/* webI: obrazy wtopione w arkusz. Siatka idzie przez zdjecie tym samym krokiem co po papierze wersji H (Rafal 2026-11-02). */
:root { --s1: 100px; --s2: 20px; }
.i-start { display: grid; grid-template-columns: minmax(360px, 560px) auto; grid-template-areas: "tekst rys"; justify-content: center; gap: 18px 30px; align-items: start; padding: 22px 34px 6px 64px; box-sizing: border-box; }
.i-start-tekst { grid-area: tekst; align-self: center; }
.i-start-tekst .ark-h1 { margin: 6px 0 0; }
.i-start-tekst .ark-lead { margin: 14px 0 0; }
.i-przyciski { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.i-start-rys { grid-area: rys; width: min(62vw, calc((100vh - 118px) * 1.3333)); margin: 0; }

/* obraz bez ramki: krawedzie rozplywaja sie w papierze, siatka przechodzi przez srodek */
.i-wklej { position: relative; display: block; line-height: 0; }
.i-wklej[hidden] { display: none; }
.i-wklej img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.i-siatka { position: absolute; inset: 0; pointer-events: none; --gb: rgba(255, 255, 255, .24); --gm: rgba(255, 255, 255, .10); --nb: rgba(31, 58, 110, .20); --nm: rgba(31, 58, 110, .07);
  background-image: linear-gradient(var(--gb) 1px, transparent 1px), linear-gradient(90deg, var(--gb) 1px, transparent 1px),
                    linear-gradient(var(--gm) 1px, transparent 1px), linear-gradient(90deg, var(--gm) 1px, transparent 1px),
                    linear-gradient(var(--nb) 1px, transparent 1px), linear-gradient(90deg, var(--nb) 1px, transparent 1px),
                    linear-gradient(var(--nm) 1px, transparent 1px), linear-gradient(90deg, var(--nm) 1px, transparent 1px);
  background-size: var(--s1) var(--s1), var(--s1) var(--s1), var(--s2) var(--s2), var(--s2) var(--s2), var(--s1) var(--s1), var(--s1) var(--s1), var(--s2) var(--s2), var(--s2) var(--s2);
  background-position: var(--px, 0) var(--py, 0); }
.i-powieksz { cursor: zoom-in; }
/* siatka na prawdziwych zdjeciach kart i realizacji */
.oferta-rys { position: relative; }
.oferta-rys::after, .p-karta-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px),
                    linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px; }
.p-karta-foto { position: relative; }
.oferta-rys .fot { z-index: 1; }

/* ozdoby: na kazdej podstronie inny obraz, wtopiony w gore strony */
.i-tag { position: absolute; right: 10px; bottom: 8px; z-index: 2; padding: 1px 6px; background: rgba(245, 243, 238, .82); font: 600 11px/1.4 Barlow, Arial, sans-serif; color: var(--szary); line-height: 1.4; }
/* znaczek "wizualizacja" na niebieskim i czarnym arkuszu: jasny napis na jasnym tle byl nieczytelny */
:root[data-motyw="niebieski"] .i-tag, :root[data-motyw="czarny"] .i-tag { background: rgba(10, 24, 48, .82); color: #E8EEF6; }
.i-start-rys { position: relative; }
.p-hero { min-height: 400px; display: flex; align-items: center; }
.p-hero > .a-wrap { width: 100%; }
.p-hero .i-ozdoba { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; z-index: 0; overflow: hidden; }
.i-ozdoba img { display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 44%); mask-image: linear-gradient(90deg, transparent 12%, #000 44%); }
.i-ozdoba--sklep { position: absolute; right: 0; top: 0; width: var(--oz); line-height: 0; }
.i-ozdoba--sklep img { height: auto; aspect-ratio: 4 / 3;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
#sIntro { position: relative; --oz: min(42vw, 760px); }
#sIntro:has(.i-ozdoba--sklep) { max-width: min(1560px, calc(100vw - 110px)); padding-right: calc(var(--oz) + 34px); box-sizing: border-box; }
#sIntro:has(.i-ozdoba--sklep) .h { font-size: clamp(38px, 4.5vw, 74px); }

.i-okienko { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 28px; box-sizing: border-box; background: rgba(14, 18, 24, .92); }
.i-okienko[hidden] { display: none; }
.i-okienko img { max-width: 100%; max-height: 100%; border: 1px solid rgba(255, 255, 255, .5); }
.i-okienko button { position: absolute; top: 14px; right: 14px; padding: 8px 14px; border: 2px solid var(--czarny); background: var(--zolty); color: var(--czarny); font: 700 14px Barlow, Arial, sans-serif; cursor: pointer; }
.i-okienko button:hover { background: #ffd93a; color: var(--czarny); }

@media (max-width: 1180px) {
  .i-start { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "rys"; padding: 18px 18px 6px; }
  .i-start-rys { width: 100%; }
  #sIntro:has(.i-ozdoba--sklep) { max-width: 900px; padding-right: 0; }
  .i-ozdoba--sklep { position: relative; right: auto; width: 100%; }
  .p-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .p-hero .i-ozdoba { position: relative; order: 2; width: 100%; height: 190px; margin-top: 12px; }
  .i-ozdoba img { -webkit-mask-image: linear-gradient(transparent 0, #000 22%); mask-image: linear-gradient(transparent 0, #000 22%); }
  .i-okienko { padding: 10px; }
}

/* znacznik wersji roboczej w sklepie wchodzil na menu */
@media (max-width: 1700px) { .s-projekt { display: none; } }

/* jereczek.pl od 2026-11-03: tylko wersja niebieska (Rafał) - bez kafelków wyboru wyglądu */
.ark-rewers { display: none !important; }
/* nagłówek podstrony z rysunkiem: bez starego zdjęcia w tle, rysunek nie nakłada się na fotografię */
body.arkusz .p-hero.i-bez-fotki { background-image: none !important; }
/* nakladka przyciemniala zdjecie; bez zdjecia zostawala jasna smuga przy lewej krawedzi */
body.arkusz .p-hero.i-bez-fotki::before { background: none !important; }
/* sklep bez filmu w tle (przy wyłączonych animacjach było stare zdjęcie): sam arkusz, bez przyciemnienia */
.s-tlo, .s-cien { display: none !important; }
/* tekst nagłówka podstrony kończy się przed rysunkiem (rysunek od 46% szerokości; treść max 1280 px, margines 4vw) */
@media (min-width: 1181px) { .p-hero.i-bez-fotki > .a-wrap > * { max-width: calc(608px - 8vw); } }
/* rysunki w nagłówkach podstron w całości (Rafał 03.11: „za bardzo obcięte”): bez powiększania do pola,
   tylko wąskie przejście w tło z lewej (wcześniej znikało 44%); na telefonie cały rysunek pod tekstem */
.p-hero .i-ozdoba img { object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
@media (max-width: 1180px) {
  .p-hero .i-ozdoba { height: auto; }
  .p-hero .i-ozdoba img { height: auto; max-height: 420px; -webkit-mask-image: none; mask-image: none; }
}
/* plansze Rafała na górze galerii Flota i Sprzęt (wstawia je webi.py przy każdej przebudowie) */
.i-plansza { position: relative; margin: 0 0 24px; }
.i-plansza img { display: block; width: 100%; height: auto; }

/* --- droga (Rafał 03.11: „zrób drogę wszędzie z przerywanymi kreskami, obecnie jest linia biała” + „czarna bardziej”) ---
   asfalt prawie czarny zamiast granatowego; linia środkowa przerywana P-1 (54/108 px) na pasie przy stopce
   i przez środek wezwania „Dołącz do naszych inwestorów” - kreski widać w przerwach między napisem a przyciskami */
:root[data-motyw="niebieski"] { --asfalt: #1B1D20; --asfalt-ciemny: #111214; }
.h-pas--ciagla .h-pas-srodek { background-image: var(--wykruszenia), repeating-linear-gradient(90deg, var(--farba) 0 54px, transparent 54px 162px); }
body.arkusz .p-cta.h-nawierzchnia { position: relative; }
body.arkusz .p-cta.h-nawierzchnia::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; z-index: 0; pointer-events: none;
  background-image: var(--wykruszenia), repeating-linear-gradient(90deg, var(--farba) 0 54px, transparent 54px 162px);
  background-size: 300px 300px, auto; background-blend-mode: multiply, normal; opacity: .93;
}
body.arkusz .p-cta.h-nawierzchnia > * { position: relative; z-index: 1; }
/* napisy i przycisk w obrysie leżą na „swoim” kawałku asfaltu: linia przerywa się przy nich, tekst zawsze czytelny */
body.arkusz .p-cta.h-nawierzchnia .p-h2,
body.arkusz .p-cta.h-nawierzchnia p { width: fit-content; max-width: 100%; padding-inline: 12px; margin-inline: -12px; box-sizing: content-box; }
body.arkusz .p-cta.h-nawierzchnia .p-h2,
body.arkusz .p-cta.h-nawierzchnia p,
body.arkusz .p-cta.h-nawierzchnia .p-btn-obrys { background-color: var(--asfalt); background-image: var(--kruszywo), var(--wykruszenia); background-size: 300px 300px; }
@media (max-width: 560px) {
  .h-pas--ciagla .h-pas-srodek,
  body.arkusz .p-cta.h-nawierzchnia::before { background-image: var(--wykruszenia), repeating-linear-gradient(90deg, var(--farba) 0 32px, transparent 32px 96px); }
}

/* --- drugi pas przed stopką: ścieżka rowerowa albo chodnik z kostki (Rafał 03.11: „masz podwójnie drogę… zrobić tą drugą
   jako ścieżkę rowerową lub gdzieniegdzie chodnik i to z polbruku” + „z oznaczeniem, że to jest pas dla rowerów”).
   Klasę i-rower / i-chodnik nadaje arkusz-i.js według strony; bez skryptu zostaje droga. --- */

/* ścieżka rowerowa jak na zdjęciu od Rafała: przytłumiona czerwień, od strony jezdni gruba linia ciągła,
   z drugiej strony przerywana, pośrodku duży namalowany rower (P-23) co kilka metrów, bez linii środkowej */
.h-pas.i-rower {
  background-color: #A24E48;
  background-image:
    var(--kruszywo),
    var(--wykruszenia),
    linear-gradient(180deg, rgba(0,0,0,.22) 0, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(0,0,0,.22) 100%);
  background-size: 300px 300px, 300px 300px, auto;
}
.h-pas.i-rower .h-pas-srodek { display: none; }
.h-pas.i-rower::before { top: 9px; height: 9px; box-shadow: none; background: var(--farba); opacity: .95; }
.h-pas.i-rower::after { bottom: 9px; height: 6px; box-shadow: none; background: repeating-linear-gradient(90deg, var(--farba) 0 46px, transparent 46px 80px); opacity: .95; }
.h-pas.i-rower .h-pas-szew {
  top: 0; bottom: 0; height: auto; box-shadow: none; opacity: .93;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='104' viewBox='0 0 640 104'%3E%3Cg fill='none' stroke='%23F1EFE9' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(90 26)'%3E%3Ccircle cx='16' cy='30' r='13'/%3E%3Ccircle cx='66' cy='30' r='13'/%3E%3Cpath d='M16 30 L31 11 L56 11 L66 30 M31 11 L41 30 L56 11 M16 30 L41 30 M23 5 L38 5 M31 5 L31 11 M56 11 L53 3 L63 3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / auto 100%;
}

/* chodnik: kostka 20×10 na przewiązkę (w skali mniejsza, żeby nie wyglądała jak mur), fugi jasne z piasku, krawędzie fazowane,
   odcienie szarości z melanżem; przy krawężnikach rząd grafitowy, krawężnik betonowy co 1 m */
.h-pas.i-chodnik {
  background-color: #8E9093;
  background-image:
    linear-gradient(180deg, transparent 0 12px, rgba(28,29,33,.40) 12px 24px, transparent 24px calc(100% - 24px), rgba(28,29,33,.40) calc(100% - 24px) calc(100% - 12px), transparent calc(100% - 12px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48' viewBox='0 0 120 48'%3E%3Crect width='120' height='48' fill='%23C2BBAA'/%3E%3Crect x='0.7' y='0.7' width='22.6' height='10.6' rx='1.2' fill='%23888B8F'/%3E%3Cpath d='M1.3 10.7V1.3H22.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M1.3 10.7H22.7V1.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='24.7' y='0.7' width='22.6' height='10.6' rx='1.2' fill='%23888B8F'/%3E%3Cpath d='M25.3 10.7V1.3H46.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M25.3 10.7H46.7V1.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='48.7' y='0.7' width='22.6' height='10.6' rx='1.2' fill='%23888B8F'/%3E%3Cpath d='M49.3 10.7V1.3H70.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M49.3 10.7H70.7V1.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='72.7' y='0.7' width='22.6' height='10.6' rx='1.2' fill='%23A5A8AB'/%3E%3Cpath d='M73.3 10.7V1.3H94.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M73.3 10.7H94.7V1.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='96.7' y='0.7' width='22.6' height='10.6' rx='1.2' fill='%239DA0A3'/%3E%3Cpath d='M97.3 10.7V1.3H118.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M97.3 10.7H118.7V1.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='-11.3' y='12.7' width='22.6' height='10.6' rx='1.2' fill='%23888B8F'/%3E%3Cpath d='M-10.7 22.7V13.3H10.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M-10.7 22.7H10.7V13.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='108.7' y='12.7' width='22.6' height='10.6' rx='1.2' fill='%23888B8F'/%3E%3Cpath d='M109.3 22.7V13.3H130.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M109.3 22.7H130.7V13.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='12.7' y='12.7' width='22.6' height='10.6' rx='1.2' fill='%239DA0A3'/%3E%3Cpath d='M13.3 22.7V13.3H34.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M13.3 22.7H34.7V13.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='36.7' y='12.7' width='22.6' height='10.6' rx='1.2' fill='%2395989B'/%3E%3Cpath d='M37.3 22.7V13.3H58.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M37.3 22.7H58.7V13.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='60.7' y='12.7' width='22.6' height='10.6' rx='1.2' fill='%23888B8F'/%3E%3Cpath d='M61.3 22.7V13.3H82.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M61.3 22.7H82.7V13.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='84.7' y='12.7' width='22.6' height='10.6' rx='1.2' fill='%23909296'/%3E%3Cpath d='M85.3 22.7V13.3H106.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M85.3 22.7H106.7V13.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='0.7' y='24.7' width='22.6' height='10.6' rx='1.2' fill='%239DA0A3'/%3E%3Cpath d='M1.3 34.7V25.3H22.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M1.3 34.7H22.7V25.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='24.7' y='24.7' width='22.6' height='10.6' rx='1.2' fill='%2395989B'/%3E%3Cpath d='M25.3 34.7V25.3H46.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M25.3 34.7H46.7V25.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='48.7' y='24.7' width='22.6' height='10.6' rx='1.2' fill='%238D9093'/%3E%3Cpath d='M49.3 34.7V25.3H70.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M49.3 34.7H70.7V25.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='72.7' y='24.7' width='22.6' height='10.6' rx='1.2' fill='%23A19D97'/%3E%3Cpath d='M73.3 34.7V25.3H94.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M73.3 34.7H94.7V25.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='96.7' y='24.7' width='22.6' height='10.6' rx='1.2' fill='%23888B8F'/%3E%3Cpath d='M97.3 34.7V25.3H118.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M97.3 34.7H118.7V25.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='-11.3' y='36.7' width='22.6' height='10.6' rx='1.2' fill='%239DA0A3'/%3E%3Cpath d='M-10.7 46.7V37.3H10.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M-10.7 46.7H10.7V37.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='108.7' y='36.7' width='22.6' height='10.6' rx='1.2' fill='%239DA0A3'/%3E%3Cpath d='M109.3 46.7V37.3H130.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M109.3 46.7H130.7V37.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='12.7' y='36.7' width='22.6' height='10.6' rx='1.2' fill='%238D9093'/%3E%3Cpath d='M13.3 46.7V37.3H34.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M13.3 46.7H34.7V37.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='36.7' y='36.7' width='22.6' height='10.6' rx='1.2' fill='%2395989B'/%3E%3Cpath d='M37.3 46.7V37.3H58.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M37.3 46.7H58.7V37.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='60.7' y='36.7' width='22.6' height='10.6' rx='1.2' fill='%238D9093'/%3E%3Cpath d='M61.3 46.7V37.3H82.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M61.3 46.7H82.7V37.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3Crect x='84.7' y='36.7' width='22.6' height='10.6' rx='1.2' fill='%238D9093'/%3E%3Cpath d='M85.3 46.7V37.3H106.7' stroke='%23fff' stroke-opacity='.28' fill='none'/%3E%3Cpath d='M85.3 46.7H106.7V37.3' stroke='%23000' stroke-opacity='.22' fill='none'/%3E%3C/svg%3E");
  background-size: auto, 120px 48px;
  background-position: 0 0, 0 12px;
}
.h-pas.i-chodnik .h-pas-srodek,
.h-pas.i-chodnik .h-pas-szew { display: none; }
.h-pas.i-chodnik::before,
.h-pas.i-chodnik::after {
  height: 12px; box-shadow: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, #CDCBC4 0 118px, #8C8A85 118px 120px);
}
.h-pas.i-chodnik::before { top: 0; }
.h-pas.i-chodnik::after { bottom: 0; }

/* strona główna: nad pasem nie ma jezdni (jest ramka kreatora), więc pas to jezdnia z przerywaną osią i przyklejona do niej
   ścieżka rowerowa - jak na zdjęciu od Rafała (03.11: „odkleiłeś drogę od trasy rowerowej i brak pasów”) */
.h-pas.i-droga-rower { --droga: 104px; --rower: 86px; height: calc(var(--droga) + var(--rower)); }
.h-pas.i-droga-rower {
  background-color: var(--asfalt);
  background-image:
    var(--kruszywo),
    var(--wykruszenia),
    linear-gradient(180deg, transparent 0 var(--droga), #A24E48 var(--droga)),
    linear-gradient(180deg, rgba(0,0,0,.42) 0, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.30) 100%);
  background-size: 300px 300px, 300px 300px, auto, auto;
}
.h-pas.i-droga-rower .h-pas-srodek { top: calc(var(--droga) / 2); background-image: var(--wykruszenia), repeating-linear-gradient(90deg, var(--farba) 0 54px, transparent 54px 162px); }
.h-pas.i-droga-rower::after { top: calc(var(--droga) - 6px); bottom: auto; height: 9px; box-shadow: none; background: var(--farba); opacity: .95; }
.h-pas.i-droga-rower .h-pas-szew {
  top: var(--droga); bottom: 0; height: auto; box-shadow: none; opacity: .93;
  background:
    repeating-linear-gradient(90deg, var(--farba) 0 46px, transparent 46px 80px) 0 calc(100% - 8px) / 100% 6px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='104' viewBox='0 0 640 104'%3E%3Cg fill='none' stroke='%23F1EFE9' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(90 26)'%3E%3Ccircle cx='16' cy='30' r='13'/%3E%3Ccircle cx='66' cy='30' r='13'/%3E%3Cpath d='M16 30 L31 11 L56 11 L66 30 M31 11 L41 30 L56 11 M16 30 L41 30 M23 5 L38 5 M31 5 L31 11 M56 11 L53 3 L63 3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 200px 0 / auto 100% repeat-x;
}
@media (max-width: 560px) {
  .h-pas.i-droga-rower { --droga: 74px; --rower: 64px; }
  .h-pas.i-droga-rower .h-pas-srodek { background-image: var(--wykruszenia), repeating-linear-gradient(90deg, var(--farba) 0 32px, transparent 32px 96px); }
}

/* stopka autora, jak w BM i innych projektach Rafała (03.11: „na dole daj moją stopkę z tel, mailem oraz hasłem”) */
.i-autor { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--tusz-slaby, rgba(255,255,255,.18)); font-size: 12px; line-height: 1.7; text-align: center; }
.i-autor-haslo { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tusz); }
.i-autor a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.i-autor a:hover { color: var(--zolty); }