/* robotatut.pl - KARTA OFERTY /oferty/{id}. Klasy wylacznie z przedrostkiem of-.

   Strona ladowania dla reklamy: kolumna do 470 px, pierwsza jest stawka,
   formularz tuz pod zdjeciem. Kolory z zadania (rozdzial 6); zloto jako
   TEKST wylacznie przez background-clip (--gold w portalu jest gradientem,
   a `color` gradientu nie przyjmuje). Zaokraglen nie ma - poza kolem.

   KROJE SA PORTALU (--f-display / --f-body / --f-cond), nie z makiety:
   Archivo i Barlow nie maja cyrylicy, wiec po ukrainsku i rosyjsku
   rysowalaby czcionka systemowa telefonu (patrz CLAUDE.md, "Trzy kroje"). */

.of{
  --of-bg:#09090B; --of-bg2:#101014; --of-bg3:#17171D;
  --of-ink:#FFFFFF; --of-ink2:#8E8778;
  --of-line:rgba(212,175,55,.24); --of-line2:rgba(255,255,255,.09);
  --of-zloto:linear-gradient(135deg,#A6790F,#F7E9AE 46%,#A6790F);
  --of-akcent:#E3C765; --of-zielony:#4ADE9B;
  --of-btn:linear-gradient(135deg,#A6790F,#F7E9AE 46%,#A6790F); --of-btn-ink:#0A0A0C;
  --of-dol:0px;
  max-width:470px;margin:0 auto;background:var(--of-bg);color:var(--of-ink);
  font-family:var(--f-body,Inter,sans-serif);font-size:15.5px;line-height:1.55;
  overflow-wrap:anywhere}

/* JASNY PORTAL - tokeny wlasciciela (reguly jasnego motywu):
   zloto jako TEKST wylacznie pelne #7E5C0C (jasny koniec gradientu na
   papierze daje 2.1:1), zlota WYPELNIENIE wylacznie ciemne
   (#6E5008 -> #8A6510) z jasnym napisem #FFFDF6. Jasnego zlota
   (#C9A227, #F7E9AE) jako tla pod tekst w tym motywie nie ma wcale. */
:root[data-theme="light"] .of{
  --of-bg:#F4F1E8; --of-bg2:#FFFEFB; --of-bg3:#F7F3E8;
  --of-ink:#14130F; --of-ink2:#5A5446;
  --of-line:rgba(126,92,12,.45); --of-line2:rgba(20,19,15,.14);
  --of-zloto:linear-gradient(135deg,#7E5C0C,#7E5C0C);
  --of-akcent:#7E5C0C; --of-zielony:#0C7743;
  --of-btn:linear-gradient(135deg,#6E5008,#8A6510); --of-btn-ink:#FFFDF6}

.of *{box-sizing:border-box}
.of img{display:block;max-width:100%}
.of h1,.of h2{margin:0;font-family:var(--f-display,sans-serif);text-wrap:balance}
.of p{margin:0}
.of a{color:inherit;text-decoration:none}
.of-acc{background:var(--of-zloto);-webkit-background-clip:text;background-clip:text;color:transparent}
.of-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.of-romb{width:7px;height:7px;background:var(--of-zloto);transform:rotate(45deg);flex:0 0 auto;display:inline-block}
.of-maly{font-size:12.5px;color:var(--of-ink2)}
.of-lead{color:var(--of-ink2);margin-top:10px;font-size:14.5px}
.of-link{text-decoration:underline!important;text-underline-offset:3px}
.of-blad{color:#FF7A7A;font-size:13px}
:root[data-theme="light"] .of-blad{color:#A32116}

.of-btn{display:block;width:100%;padding:16px;text-align:center;background:var(--of-btn);color:var(--of-btn-ink)!important;
  font-family:var(--f-display,sans-serif);font-weight:800;font-size:15.5px;border:0;border-radius:0;cursor:pointer}
.of-btn:focus-visible,.of a:focus-visible,.of input:focus-visible,.of summary:focus-visible{outline:2px solid var(--of-akcent);outline-offset:2px}
.of-btn-pusty{background:none;border:1px solid var(--of-line);color:var(--of-ink)!important;font-weight:600}

/* gorny wiersz strony */
.of-nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--of-line2)}
.of-nav-ik{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;color:var(--of-ink)}
.of-nav-ik svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.of-nav-t{flex:1;min-width:0;font-family:var(--f-cond,sans-serif);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--of-ink2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* pierwszy ekran */
.of-hero{position:relative;height:min(58svh,430px);min-height:340px;overflow:hidden;background:#000}
.of-hero>img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.of-hero-bez{background:radial-gradient(120% 90% at 20% 0%,rgba(212,175,55,.22),transparent 60%),#0B0B0E}
.of-hero-cien{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 32%,rgba(0,0,0,.6) 66%,rgba(9,9,11,.99))}
.of-hero-in{position:absolute;left:18px;right:18px;bottom:18px;color:#FFFFFF}
/* Napisy na zdjeciu sa ZAWSZE jasne i zloto zawsze jasne - leza na
   fotografii, wiec nie moga zalezec od motywu portalu. */
.of-hero .of-acc{background:linear-gradient(135deg,#A6790F,#F7E9AE 46%,#A6790F);-webkit-background-clip:text;background-clip:text}
.of-stawka{font-family:var(--f-display,sans-serif);font-weight:800;font-size:clamp(52px,16vw,72px);line-height:.9;letter-spacing:-.04em}
.of-stawka i{font-style:normal;font-size:15px;font-weight:600;letter-spacing:.02em;display:block;color:rgba(255,255,255,.85);margin-top:8px}
.of-stawka-brak{font-size:clamp(26px,7vw,32px)}
.of-hero h1{font-size:clamp(23px,6.6vw,30px);font-weight:800;letter-spacing:-.02em;margin-top:14px;line-height:1.1;color:#FFFFFF}
.of-cechy{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.of-cechy span{font-family:var(--f-cond,sans-serif);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.3);padding:4px 9px;color:#FFFFFF}

/* wiersz firmy */
.of-firma{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--of-line2);background:var(--of-bg2)}
.of-firma img,.of-firma-lit{width:40px;height:40px;object-fit:contain;background:#0B0B0E;padding:4px;flex:0 0 auto}
.of-firma-lit{display:grid;place-items:center;font-family:var(--f-display,sans-serif);font-weight:800;color:#E3C765}
.of-firma-t{min-width:0}
.of-firma b{display:block;font-family:var(--f-display,sans-serif);font-weight:700;font-size:15.5px}
.of-firma small{display:block;color:var(--of-akcent);font-size:11.5px;font-family:var(--f-cond,sans-serif);letter-spacing:.1em;text-transform:uppercase}
.of-firma-go{width:18px;height:18px;margin-left:auto;flex:0 0 auto;fill:none;stroke:var(--of-ink2);stroke-width:1.8}

/* formularz */
.of-zgl{padding:20px 18px;border-bottom:1px solid var(--of-line2);scroll-margin-top:72px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(212,175,55,.10),transparent 70%),var(--of-bg)}
/* Blok nosi tez stara klase `aplbox` (szuka go po niej test powrotu do
   oferty), a aplikacje.css daje jej ramke z zaokragleniem i zlotym bokiem.
   Na tej karcie ramki nie ma - zdejmujemy ja tu, nie w cudzym arkuszu. */
.of .of-zgl.aplbox{border:0;border-bottom:1px solid var(--of-line2);border-radius:0;box-shadow:none;margin:0}
.of-zgl-h{display:block;font-family:var(--f-display,sans-serif);margin-bottom:4px}
.of-zgl .of-btn-pusty{margin-top:12px}
.of-darmo{display:flex;gap:9px;align-items:center;color:var(--of-zielony);font-size:12.5px;margin-bottom:12px}
.of-form{display:grid;gap:9px}
.of-pole{display:block}
.of-pole input,.of-pyt-pole{width:100%;padding:15px;background:var(--of-bg2);border:1px solid var(--of-line2);border-radius:0;
  color:var(--of-ink);font:inherit;font-size:16px}
.of-pole input::placeholder{color:var(--of-ink2)}
.of-jako{font-size:14px;color:var(--of-ink2)}
.of-pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.of-pyt{border:1px solid var(--of-line2);padding:13px 14px;margin:0;background:var(--of-bg2);min-width:0}
.of-pyt legend{font-size:13.5px;padding:0;float:left;width:100%;margin-bottom:9px}
.of-opcje{clear:both;display:flex;flex-wrap:wrap;gap:6px}
.of-opt{position:relative;cursor:pointer}
.of-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.of-opt span{display:block;font-family:var(--f-cond,sans-serif);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--of-line2);padding:8px 11px;color:var(--of-ink2)}
.of-opt input:checked+span{border-color:var(--of-akcent);color:var(--of-akcent)}
.of-opt input:focus-visible+span{outline:2px solid var(--of-akcent);outline-offset:2px}
.of-zgoda{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--of-ink2)}
.of-zgoda input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:#C9A227}

/* sekcje */
.of-sek{padding:34px 18px;border-top:1px solid var(--of-line2)}
.of-brew{font-family:var(--f-cond,sans-serif);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.26em;color:var(--of-ink2)}
.of-sek h2{font-size:clamp(22px,6.2vw,28px);font-weight:800;letter-spacing:-.02em;margin-top:8px;line-height:1.1}
.of-wiersze{margin-top:14px}
.of-wiersz{display:flex;gap:13px;padding:13px 0;border-top:1px solid var(--of-line2)}
.of-nr{font-family:var(--f-cond,sans-serif);font-size:12px;letter-spacing:.18em;color:var(--of-ink2);width:24px;flex:0 0 auto;padding-top:3px}
.of-wiersz b{font-family:var(--f-display,sans-serif);font-weight:600;font-size:16px}
.of-wiersz small{display:block;color:var(--of-ink2);font-size:13px;margin-top:2px}
.of-opis{margin-top:14px;font-size:14.5px}

/* kalkulator */
.of-kalk{background:var(--of-bg2);border:1px solid var(--of-line);padding:18px;margin-top:16px}
.of-lbl{display:block;font-family:var(--f-cond,sans-serif);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--of-ink2)}
.of-suma{display:block;font-family:var(--f-display,sans-serif);font-weight:800;font-size:clamp(32px,9.5vw,42px);letter-spacing:-.03em;
  line-height:1.05;font-variant-numeric:tabular-nums;margin-top:4px}
.of-godz{margin-top:14px}
.of-godz b{font-family:var(--f-display,sans-serif);font-size:16px;letter-spacing:0;color:var(--of-ink);font-variant-numeric:tabular-nums}
.of-godz input{display:block;width:100%;margin-top:10px;accent-color:#C9A227}
.of-kalk .of-maly{margin-top:8px}

/* kto placi */
.of-dowody{display:grid;gap:1px;background:var(--of-line2);margin-top:16px}
.of-dowody div{background:var(--of-bg);padding:14px 15px;display:flex;gap:13px;align-items:baseline}
.of-dowody b{font-family:var(--f-display,sans-serif);font-weight:800;font-size:17px;color:var(--of-akcent);white-space:nowrap;font-variant-numeric:tabular-nums}
.of-dowody span{font-size:14px}
.of-obiekty{display:flex;gap:11px;overflow-x:auto;margin:16px -18px 0;padding:0 18px;scrollbar-width:none;overscroll-behavior-x:contain}
.of-obiekty::-webkit-scrollbar{display:none}
.of-obiekt{flex:0 0 190px;position:relative;margin:0;background:#000}
.of-obiekt img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}
.of-obiekt figcaption{position:absolute;left:0;right:0;bottom:0;padding:11px;color:#FFFFFF;background:linear-gradient(180deg,transparent,rgba(0,0,0,.9))}
.of-obiekt b{display:block;font-size:13.5px}
.of-obiekt small{color:rgba(255,255,255,.72);font-size:11px}
.of-sek>.of-btn-pusty{margin-top:18px}

/* podobne */
.of-sek>.of-brew+.of-podobna{margin-top:10px}
.of-podobna{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:13px;align-items:center;padding:14px 0;border-top:1px solid var(--of-line2)}
.of-podobna img,.of-podobna-lit{width:66px;height:66px;object-fit:cover}
.of-podobna-lit{display:grid;place-items:center;background:var(--of-bg3);font-family:var(--f-display,sans-serif);font-weight:800;color:var(--of-akcent)}
.of-podobna-t b{display:block;font-family:var(--f-display,sans-serif);font-weight:700;font-size:15.5px;line-height:1.2}
.of-podobna-t small{display:block;color:var(--of-ink2);font-size:12.5px;margin-top:3px}
.of-podobna-r{font-family:var(--f-display,sans-serif);font-weight:800;font-size:22px;letter-spacing:-.03em;white-space:nowrap}

.of-stopka{padding:24px 18px calc(30px + 76px);color:var(--of-ink2);font-size:12px;border-top:1px solid var(--of-line2)}
.of-stopka a{text-decoration:underline!important;text-underline-offset:3px}

/* PASEK NA DOLE - zawsze na ekranie. Na telefonie stoi NAD dolnym menu
   portalu (tabbar.css: 66 px + dolny margines ekranu), inaczej menu
   przykrywa go w calosci. */
.of-lep{position:fixed;left:0;right:0;bottom:var(--of-dol);z-index:1050;max-width:470px;margin:0 auto;
  background:var(--of-bg);border-top:1px solid var(--of-line);
  padding:10px 15px calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px}
@media (max-width:760px){
  .of{--of-dol:calc(66px + env(safe-area-inset-bottom,0px))}
  .of-lep{padding-bottom:10px}
}
@media (display-mode:standalone){
  .of{--of-dol:calc(66px + env(safe-area-inset-bottom,0px))}
  .of-lep{padding-bottom:10px}
}
.of-lep-l{min-width:0}
.of-lep-l b{display:block;font-family:var(--f-display,sans-serif);font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.of-lep-l small{display:block;color:var(--of-ink2);font-size:11px}
.of-lep .of-btn{width:auto;padding:13px 22px;margin-left:auto;flex:0 0 auto;font-size:14.5px}

/* ekran po zgloszeniu */
.of-po{padding:34px 18px 48px;text-align:center}
.of-po h1{font-weight:800;font-size:clamp(26px,8vw,30px);letter-spacing:-.02em;line-height:1.1}
.of-ptaszek{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;border:1px solid var(--of-akcent);display:grid;place-items:center}
.of-ptaszek svg{width:28px;height:28px;fill:none;stroke:var(--of-akcent);stroke-width:1.8}
.of-karta{display:grid;gap:10px;border:1px solid var(--of-line);background:var(--of-bg2);padding:16px;margin-top:22px;text-align:left}
.of-karta-zlota{border-color:var(--of-akcent)}
.of-karta b{font-family:var(--f-display,sans-serif);font-weight:700;font-size:15.5px}
.of-karta small{color:var(--of-ink2);font-size:12.5px}
.of-numer{margin-top:22px;text-align:left;border:1px solid var(--of-line2);padding:16px}
.of-numer p:first-child{font-size:15px}
.of-numer p:first-child b{display:block;font-family:var(--f-display,sans-serif);font-weight:800;font-size:clamp(24px,7.5vw,30px);
  letter-spacing:-.01em;margin:4px 0;font-variant-numeric:tabular-nums;color:var(--of-ink)}
.of-popraw{margin:4px 0 10px}
.of-popraw summary{cursor:pointer;display:inline-block;color:var(--of-akcent);font-size:14px;text-decoration:underline;text-underline-offset:3px;list-style:none}
.of-popraw summary::-webkit-details-marker{display:none}
.of-popraw .of-form{margin-top:10px}
.of-dolne{margin-top:28px;font-size:13px;color:var(--of-ink2)}
.of-dolne a{text-decoration:underline!important;text-underline-offset:3px}
.of-po .of-form{margin-top:18px}

/* ===================================================================
   TELEFON - reguly przyjecia (360 px w gore, sprawdzane od 320 px).
   Palec trafia w 44 px, pola pisza 16 px (inaczej iPhone powieksza
   strone), nic nie wypada za ekran - takze czterocyfrowa stawka i dluga
   nazwa firmy.
   =================================================================== */

.of-bok-stawka{display:none}
.of-nav-ik{width:44px;height:44px}
.of-opt span{min-height:44px;display:flex;align-items:center}
.of-zgoda{min-height:44px;align-items:center}
.of-link,.of-stopka a,.of-dolne a{display:inline-block;padding:12px 0;min-height:44px}
.of-popraw summary{min-height:44px;display:inline-flex;align-items:center}
.of-firma{min-height:68px}
.of-firma-t{flex:1;min-width:0}
.of-firma b,.of-podobna-t b{overflow-wrap:anywhere}
.of-hero h1{overflow-wrap:anywhere}

/* Czterocyfrowa stawka albo widelki ("1 250–1 400 zl") w 72 px nie
   mieszcza sie w 320 px - dluga kwota dostaje mniejszy stopien, a nie
   lamanie w polowie liczby. */
.of-stawka-dluga{font-size:clamp(34px,10.5vw,56px)}
.of-stawka .of-acc{white-space:nowrap}
.of-lep-l b{overflow:hidden;text-overflow:ellipsis}
.of-lep-dluga{font-size:16px}

/* Lepki pasek: wyciecie ekranu po bokach (telefon lezacy) i pasek gestow
   u dolu tam, gdzie dolnego menu nie ma. */
.of-lep{padding-left:max(15px,env(safe-area-inset-left,0px));padding-right:max(15px,env(safe-area-inset-right,0px))}

/* Hover i fokus - takze na telefonie z klawiatura albo myszka. */
.of-btn{transition:filter .15s,border-color .15s,background-color .15s}
@media (hover:hover){
  .of-btn:hover{filter:brightness(1.08)}
  .of-btn-pusty:hover{border-color:var(--of-akcent);filter:none}
  .of-firma:hover{background:var(--of-bg3)}
  .of-podobna:hover .of-podobna-t b{color:var(--of-akcent)}
  .of-opt:hover span{border-color:var(--of-line)}
  .of-nav-ik:hover{color:var(--of-akcent)}
}
.of-firma:focus-visible,.of-podobna:focus-visible,.of-nav-ik:focus-visible{outline:2px solid var(--of-akcent);outline-offset:-2px}

/* Ekrany po zgloszeniu, "usun" i "to Ty?" - waska kolumna do czytania. */
.of-po{max-width:560px;margin:0 auto}

/* ===================================================================
   NOUTBUK (od 1024 px) - OSOBNY UKLAD, nie rozciagniety telefon.
   Tresc do 1240 px na srodku; zdjecie na cala szerokosc, pod nim
   z lewej tresc, z prawej LEPKA panel ze stawka i formularzem.
   Dolnego paska "Zglos sie" nie ma - panel stoi na ekranie sam.
   =================================================================== */
@media (min-width:1024px){
  .of{max-width:1240px;padding:0 32px 64px;background:transparent}
  .of-uklad{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:48px;
    grid-template-areas:"nav nav" "hero bok" "firma bok" "reszta bok";align-items:start}
  .of-pole-nav{grid-area:nav;border-bottom:0;padding:18px 0 14px}
  .of-pole-hero{grid-area:hero}
  .of-pole-firma{grid-area:firma}
  .of-pole-bok{grid-area:bok}
  .of-pole-reszta{grid-area:reszta;min-width:0}

  /* Pierwszy ekran wiekszy i cichszy: duze zdjecie, duzo powietrza. */
  .of-hero{height:min(64vh,600px);min-height:460px}
  .of-hero-in{left:48px;right:48px;bottom:44px;max-width:860px}
  .of-stawka{font-size:clamp(72px,7vw,104px)}
  .of-stawka-dluga{font-size:clamp(56px,5vw,80px)}
  .of-stawka i{font-size:17px;margin-top:12px}
  .of-hero h1{font-size:clamp(48px,4.2vw,64px);margin-top:22px;letter-spacing:-.03em}
  .of-cechy{margin-top:20px;gap:8px}
  .of-cechy span{font-size:12px;padding:6px 12px}

  .of-firma{margin-top:28px;border:1px solid var(--of-line2);padding:16px 20px}
  .of-firma img,.of-firma-lit{width:48px;height:48px}

  /* Panel po prawej: lepki pod gornym paskiem portalu (okolo 72 px). */
  /* Panel stoi OBOK zdjecia, od gory: stawka i formularz sa na pierwszym
     ekranie noutbuka, a przy przewijaniu panel zostaje (lepki). */
  .of-bok{position:sticky;top:92px;border:1px solid var(--of-line);background:var(--of-bg)}
  .of-bok-stawka{display:grid;gap:4px;padding:22px 22px 0}
  .of-bok-stawka b{font-family:var(--f-display,sans-serif);font-weight:800;font-size:40px;letter-spacing:-.03em;line-height:1}
  .of-bok-stawka span{font-family:var(--f-display,sans-serif);font-weight:700;font-size:16px;line-height:1.3}
  .of-bok-stawka small{color:var(--of-ink2);font-size:13px}
  .of-bok .of-zgl{border-bottom:0;padding:18px 22px 22px;background:none}
  .of-bok .of-zgl.aplbox{border-bottom:0}

  .of-sek{padding:48px 0 0;border-top:0}
  .of-sek+.of-sek{margin-top:8px}
  .of-sek h2{font-size:32px}
  .of-wiersze,.of-kalk,.of-dowody,.of-opis{max-width:760px}

  /* Siatki sie przestawiaja: realizacje z karuzeli w rzad po cztery. */
  .of-obiekty{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:18px 0 0;padding:0}
  .of-obiekt{flex:none}
  .of-podobna{grid-template-columns:88px minmax(0,1fr) auto;padding:16px 12px;margin:0 -12px}
  .of-podobna img,.of-podobna-lit{width:88px;height:88px}
  @media (hover:hover){ .of-podobna:hover{background:var(--of-bg2)} }
  .of-sek>.of-btn-pusty{display:inline-block;width:auto;padding:14px 28px}

  .of-stopka{padding:40px 0 24px;margin-top:48px;border-top:1px solid var(--of-line2)}
  .of-lep{display:none}
}
@media (min-width:1024px) and (max-width:1279px){
  .of{padding:0 24px 56px}
  .of-uklad{grid-template-columns:minmax(0,1fr) 360px;column-gap:32px}
  .of-hero-in{left:32px;right:32px;bottom:32px}
}
@media (min-width:1440px){
  .of{max-width:1280px}
  .of-uklad{grid-template-columns:minmax(0,1fr) 420px;column-gap:64px}
  .of-obiekty{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Cele palca, ktore wylapal pomiar 320-430 px: odnosnik w zdaniu RODO
   (14 px wysokosci) i suwak godzin (16 px). */
.of-zgl .of-maly a{display:inline-block;padding:13px 0;text-decoration:underline;text-underline-offset:3px}
.of-godz input[type=range]{height:44px;margin-top:0}
.of-blad a{display:inline-block;padding:12px 0;text-decoration:underline;text-underline-offset:3px;color:inherit}
/* Cel palca w srodku zdania: wyscielka rosnie, a wiersz nie - ujemny
   margines oddaje zdaniu jego zwykla wysokosc. */
.of-zgl .of-maly a{margin:-13px 0}
/* Dluga kwota w panelu po prawej ("12 500–14 000 zl/mies.") - mniejszy
   stopien zamiast lamania w polowie. */
.of-bok-stawka b.of-bok-dluga{font-size:28px}

/* PIERWSZY EKRAN ROSNIE Z TRESCIA, A NIE OBCINA JEJ.
   Stala wysokosc z `overflow:hidden` przy dlugiej nazwie oferty wypychala
   stawke nad gorna krawedz zdjecia - po cichu, bez paska przewijania
   (zmierzone na 1920 px: "40 zl" uciete w polowie). Dzis wysokosc jest
   MINIMUM, zdjecie lezy pod spodem absolutnie, a tresc stoi w przeplywie
   i dopycha pole w dol, gdy jej przybywa. */
.of-hero{height:auto;min-height:min(58svh,430px);display:flex;flex-direction:column;justify-content:flex-end}
.of-hero>img{position:absolute;inset:0}
.of-hero-in{position:relative;left:auto;right:auto;bottom:auto;padding:72px 18px 18px}
@media (min-width:1024px){
  .of-hero{min-height:min(64vh,600px)}
  .of-hero-in{padding:96px 48px 44px;max-width:none}
}
@media (min-width:1024px) and (max-width:1279px){
  .of-hero-in{padding:88px 32px 32px}
}

/* Dluga kwota w dolnym pasku lamie sie na dwa wiersze zamiast gubic
   jednostke za wielokropkiem ("12 500–14 000 zl/..."). */
.of-lep-l b.of-lep-dluga{white-space:normal;font-size:15px;line-height:1.15;overflow:visible}
/* Zlota stawka i bialy tytul leza na dowolnym zdjeciu - na jasnym kadrze
   (kamizelka, niebo, snieg) sam srodkowy cien byl za slaby. Przyciemnienie
   zaczyna sie wyzej i jest glebsze tam, gdzie stoja napisy. */
.of-hero-cien{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.1) 22%,rgba(0,0,0,.62) 48%,rgba(9,9,11,.97))}

/* Stawka w panelu po prawej to CZESC BLOKU DZIALANIA, nie drugi naglowek
   (decyzja wlasciciela): na zdjeciu jest pierwszym uderzeniem, tu tylko
   przypomina kwote obok guzika, gdy zdjecie zjechalo z ekranu. */
@media (min-width:1024px){
  .of-bok-stawka b{font-size:28px;letter-spacing:-.02em}
  .of-bok-stawka b.of-bok-dluga{font-size:22px}
  .of-bok-stawka span{font-size:15px;font-weight:600}
}


/* ===================================================================
   JASNY MOTYW - reszta regul wlasciciela. Czarnego nie ruszamy.
   =================================================================== */
:root[data-theme="light"] .of .of-acc{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#7E5C0C}
/* Tekst na ZDJECIU jest zawsze bialy - zdjecie motywu nie zmienia.
   W jasnym motywie dotyczy to takze stawki: zloto #7E5C0C na ciemnym
   kadrze nie czyta sie wcale, a jasnego zlota ta regula zabrania. */
:root[data-theme="light"] .of .of-hero .of-acc{color:#FFFFFF}
/* Litera zamiast logo: zloty napis na czarnym to jasne zloto jako tekst -
   w jasnym motywie trzecia powierzchnia i zloto tekstowe. */
:root[data-theme="light"] .of-firma-lit{background:var(--of-bg3);color:#7E5C0C}
/* Suwak i pole zgody: jasne zloto nie ma tu kontrastu z papierem. */
:root[data-theme="light"] .of-godz input,:root[data-theme="light"] .of-zgoda input{accent-color:#7E5C0C}

/* ===================================================================
   KONTRAST (skaner na wyrenderowanej stronie, norma WCAG AA).
   =================================================================== */

/* Tekst na zdjeciu: wlasne przyciemnienie POD blokiem tekstu. Ogolny cien
   zdjecia byl najslabszy dokladnie tam, gdzie przy dlugiej nazwie stoi
   stawka (u gory bloku) - zmierzone 2.2:1 na jasnym kadrze. Blok ma
   gorna wyscielke, wiec przyciemnienie dochodzi do pelnej mocy, zanim
   zacznie sie pierwsza litera. Dotyczy obu motywow: zdjecie motywu nie
   zmienia. */
.of-hero-in{background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.62) 64px,rgba(0,0,0,.72))}
.of-obiekt figcaption{background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.9))}

/* Granice elementow sterujacych: 3:1 wobec tla obok (pola, guziki
   z obwodka, chipy). Linie dzielace sekcje zostaja delikatne - to nie
   elementy, w ktore sie stuka. */
.of{--of-ramka:rgba(255,255,255,.4); --of-ramka-btn:rgba(212,175,55,.62)}
:root[data-theme="light"] .of{--of-ramka:#857C6A; --of-ramka-btn:#7E5C0C}
.of-pole input,.of-pyt-pole,.of-opt span{border-color:var(--of-ramka)}
.of-btn-pusty{border-color:var(--of-ramka-btn)}

/* "Rozwin" pod opisem pochodzi ze wspolnego kawalka (parts/_zwin) i ma
   jasne zloto - w jasnym motywie na tej stronie zloto tekstowe. */
:root[data-theme="light"] .of .zwin-wiecej{color:#7E5C0C}

/* Kazde pole na tej stronie ma 16 px pisma - takze pulapka na automaty
   i suwak: iPhone powieksza strone przy KAZDYM polu ponizej 16 px, a
   narzedzie pomiaru (tools/szerokosc.mjs) nie zgaduje, ktore pole widac. */
.of input,.of select,.of textarea{font-size:16px}

/* Brutto / netto: mala, ta sama linia, zaraz za stawka (decyzja
   wlasciciela). Na zdjeciu bialy, w panelu i pasku kolor drugiego
   poziomu - to dopowiedzenie, nie druga liczba. */
.of-rodzaj{font-family:var(--f-body,sans-serif);font-size:15px;font-weight:600;letter-spacing:0;margin-left:8px;vertical-align:baseline}
.of-hero .of-rodzaj{color:#FFFFFF}
.of-bok-stawka .of-rodzaj,.of-lep-l .of-rodzaj{color:var(--of-ink2);font-size:13px;margin-left:6px}

/* Warunki ogloszenia chipami, w jednym rzedzie z zawijaniem. */
.of-chipy{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.of-chipy li{border:1px solid var(--of-ramka-btn);padding:8px 12px;font-size:13.5px;line-height:1.3}