/* AgroTronik — WARIANT B „sklepowy / katalogowy" (bliżej wzorca ilgenfritz) Prototyp wyglądu. Czysty CSS, zero zależności zewnętrznych. */ :root{ --zielen:#2f7d32; --zielen-ciemna:#1d5720; --zielen-jasna:#eaf4ea; --limonka:#8bc34a; --granat:#1f2a2e; --tekst:#1c2426; --tekst-lekki:#5f6f73; --tlo:#ffffff; --tlo-2:#f4f7f4; --linia:#dfe5df; --pomarancz:#e8730c; /* Ten sam pomarańcz w odcieniu, który PRZECHODZI WCAG AA. Biały tekst na `--pomarancz` daje tylko 3,05:1 (próg 4,5) — dotyczyło to wstążki „Część” leżącej na zdjęciu i przycisku „Dodaj do koszyka”; jako tekst na białym tle (gwiazdki, `.wym`) było równie słabe. #b05500 daje 5,07:1 z bielą, więc ma zapas nad progiem i zostaje rozpoznawalnie pomarańczowy. Zasada: wszędzie, gdzie pomarańcz NIESIE TEKST, używamy tej zmiennej; `--pomarancz` zostaje do ozdób (paski, obramowania), gdzie próg kontrastu tekstu nie obowiązuje. */ --pomarancz-czytelny:#b05500; --max:1240px; --r:8px; --cien:0 1px 2px rgba(28,36,38,.05),0 6px 20px rgba(28,36,38,.07); } *{box-sizing:border-box} /* Atrybut `hidden` MUSI wygrywać — inaczej element „ukryty" i tak jest widoczny. Sam `hidden` opiera się na regule przeglądarki [hidden]{display:none}, a reguły ARKUSZA AUTORA biją reguły przeglądarki niezależnie od specyficzności. Każda nasza reguła ustawiająca `display` (np. .karta-stan{display:flex}, .atrapa{display:inline-block}) unieważniała więc `hidden` — i strona potwierdzenia pokazywała wszystkie stany naraz razem z banerem podglądu (bug prod 2026-07-27). Ta jedna reguła zamyka temat dla WSZYSTKICH elementów chowanych atrybutem, także tych, które dopiero powstaną. */ [hidden]{display:none !important} html{scroll-behavior:smooth} body{ margin:0;font-family:"Segoe UI",Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:16px;line-height:1.6;color:var(--tekst);background:var(--tlo); -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:700} h1{font-size:clamp(1.85rem,3.6vw,2.7rem)} h2{font-size:clamp(1.4rem,2.4vw,1.95rem)} h3{font-size:1.08rem} p{margin:0 0 1em} .wrap{max-width:var(--max);margin:0 auto;padding:0 20px} .sekcja{padding:60px 0} .sekcja--szara{background:var(--tlo-2)} .naglowek-sekcji{text-align:center;max-width:64ch;margin:0 auto 40px} .naglowek-sekcji p{color:var(--tekst-lekki)} .nadtytul{font-size:.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--zielen);margin:0 0 .6em} /* ——— przyciski ——— */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; padding:.8em 1.45em;border-radius:var(--r);border:2px solid transparent; font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;transition:all .15s ease; } .btn--glowny{background:var(--zielen);color:#fff;border-color:var(--zielen)} .btn--glowny:hover{background:var(--zielen-ciemna);border-color:var(--zielen-ciemna)} .btn--pomarancz{background:var(--pomarancz-czytelny);color:#fff;border-color:var(--pomarancz-czytelny)} .btn--pomarancz:hover{filter:brightness(.92)} .btn--obrys{border-color:var(--linia);color:var(--tekst);background:#fff} .btn--obrys:hover{border-color:var(--zielen);color:var(--zielen)} .btn--maly{padding:.55em 1em;font-size:.87rem} .btn--pelny{width:100%} /* ——— górna belka użytkowa ——— */ .pasek-prototyp{background:#243a26;color:#cfe8cf;text-align:center;font-size:.83rem;padding:7px 16px} .pasek-prototyp a{color:#fff} .pasek-uslug{background:var(--granat);color:#c2ced1;font-size:.83rem} .pasek-uslug .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:8px 20px} .pasek-uslug ul{display:flex;gap:18px;list-style:none;margin:0;padding:0} .pasek-uslug a{text-decoration:none} .pasek-uslug a:hover{color:#fff} /* ——— nagłówek sklepowy ——— */ .naglowek{background:#fff;border-bottom:1px solid var(--linia);position:sticky;top:0;z-index:60} .naglowek__gora{display:flex;align-items:center;gap:26px;padding:16px 0} .logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto} .logo__znak{ width:42px;height:42px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto; background:linear-gradient(150deg,var(--zielen),var(--zielen-ciemna));color:#fff;font-weight:900;font-size:1.15rem; } .logo__nazwa{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;line-height:1.1;color:var(--granat)} .logo__nazwa span{display:block;font-size:.62rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--zielen);margin-top:2px} .szukaj-gora{flex:1;display:flex;max-width:560px} .szukaj-gora input{ flex:1;min-width:0;padding:.78em 1em;border:2px solid var(--linia);border-right:0; border-radius:var(--r) 0 0 var(--r);font-size:.94rem;font-family:inherit; } .szukaj-gora input:focus{outline:none;border-color:var(--zielen)} .szukaj-gora button{border-radius:0 var(--r) var(--r) 0;padding:.78em 1.3em} @media(max-width:980px){.szukaj-gora{display:none}} .akcje{display:flex;align-items:center;gap:6px;margin-left:auto} .akcja{ display:flex;align-items:center;gap:8px;padding:.5em .75em;border-radius:var(--r); text-decoration:none;font-size:.88rem;font-weight:600;color:var(--tekst); } .akcja:hover{background:var(--tlo-2);color:var(--zielen)} .akcja small{display:block;font-weight:400;font-size:.72rem;color:var(--tekst-lekki)} /* Saldo kredytów w nagłówku. `b` przejmuje rolę głównego napisu (jak „Koszyk" obok), więc dostaje ten sam rozmiar i wagę — inaczej liczba ginęłaby przy sąsiednich pozycjach. */ .akcja--kredyty b{font-weight:600;font-size:.88rem;display:block} .akcja--kredyty svg{color:var(--pomarancz-czytelny)} @media(max-width:560px){.akcja--kredyty small{display:none}} /* ——— nagłówek na wąskim ekranie: rząd MUSI się zawinąć ——— Zmierzone na 380 px (Chromium): logo + konto + saldo + koszyk + hamburger nie mieściły się w jednym rzędzie, więc strona dostawała poziome przewijanie (475 px treści na 380 px ekranu), a **przycisk menu lądował POZA ekranem** — czyli na telefonie nie dało się otworzyć nawigacji w ogóle. Zawijanie zamiast chowania: `Wyloguj` i saldo kredytów też siedzą w `.akcje`, więc ukrycie ich „dla miejsca" odcięłoby realne funkcje. */ @media(max-width:700px){ .naglowek__gora{flex-wrap:wrap;gap:10px;row-gap:4px} .akcje{flex-wrap:wrap;justify-content:flex-end;gap:2px} .akcja{padding:.45em .5em} } .akcja__licznik{ background:var(--pomarancz-czytelny);color:#fff;font-size:.7rem;font-weight:800; border-radius:99px;padding:.05em .45em;margin-left:-4px; } /* ——— główna nawigacja + mega menu ——— */ .nawigacja{background:var(--zielen);position:relative} .nawigacja > .wrap{display:flex;gap:2px;flex-wrap:wrap} .nawigacja a{ display:block;padding:.85em 1.1em;color:#eaf4ea;text-decoration:none;font-weight:650;font-size:.94rem; } .nawigacja li{list-style:none;position:relative} .nawigacja ul{display:flex;margin:0;padding:0;gap:0} .nawigacja > .wrap > ul > li > a:hover,.nawigacja a[aria-current]{background:var(--zielen-ciemna);color:#fff} .mega{ display:none;position:absolute;top:100%;left:0;z-index:70; background:#fff;border:1px solid var(--linia);border-top:3px solid var(--zielen); box-shadow:var(--cien);border-radius:0 0 var(--r) var(--r);padding:12px;min-width:250px; } /* Trzy drogi do rozwinięcia listy — każda dla innego sposobu obsługi: `:hover` mysz · `:focus-within` klawiatura (bez tego pozycje w `display:none` są nieosiągalne Tabem) · klasa `podmenu--otwarte` — dotyk, ustawia ją `menu.js`. Reguła jest JEDNA, żeby wygląd rozwiniętej listy nie zależał od tego, czym ją otwarto. */ .nawigacja li:hover > .mega, .nawigacja li:focus-within > .mega, .nawigacja li.podmenu--otwarte > .mega{display:grid;grid-template-columns:1fr;gap:2px} .mega h4{grid-column:1/-1;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase; color:var(--tekst-lekki);margin:0 0 6px} .mega a{padding:.5em .7em;border-radius:6px;color:var(--tekst);font-weight:500;font-size:.92rem; white-space:nowrap} .mega a:hover,.mega a:focus-visible{background:var(--zielen-jasna);color:var(--zielen-ciemna)} /* Zakładka z podmenu: odsyłacz + osobny przycisk strzałki. Odsyłacz nadal PROWADZI na swoją stronę jednym kliknięciem — rozwijanie go nie przechwytuje. */ .ma-podmenu{display:flex;align-items:stretch} .podmenu-przycisk{ background:none;border:0;cursor:pointer;color:#eaf4ea;font-size:.7rem;line-height:1; padding:0 .8em 0 0;display:flex;align-items:center; } .ma-podmenu:hover > .podmenu-przycisk, .podmenu-przycisk:hover, .ma-podmenu:focus-within > .podmenu-przycisk{background:var(--zielen-ciemna);color:#fff} .podmenu-przycisk:focus-visible{outline:2px solid #fff;outline-offset:-3px} /* Strzałka obraca się, gdy lista jest rozwinięta — jedyny sygnał stanu na dotyku, gdzie nie ma podświetlenia spod kursora. */ .podmenu-przycisk span{display:block;transition:transform .15s ease} .podmenu--otwarte > .podmenu-przycisk span{transform:rotate(180deg)} /* Tło zakładki z podmenu podświetla się jako CAŁOŚĆ (odsyłacz + strzałka), inaczej przy najechaniu na strzałkę zakładka rozpadała się wizualnie na dwa kawałki. */ .ma-podmenu:hover > a,.ma-podmenu:focus-within > a{background:var(--zielen-ciemna);color:#fff} @media(max-width:980px){ /* Na dotyku `:hover` albo nie istnieje, albo zostaje „przyklejony" po tapnięciu — rozwijanie zostaje WYŁĄCZNIE na przycisku (klasa z `menu.js`). */ .nawigacja li:hover > .mega,.nawigacja li:focus-within > .mega{display:none} .nawigacja li.podmenu--otwarte > .mega{display:grid} /* Lista wchodzi w kolumnę menu zamiast wisieć nad treścią — na 380 px kafelek `position:absolute` i tak nie miałby gdzie się zmieścić. */ .mega{ position:static;min-width:0;width:100%;padding:4px 0 10px 20px; background:var(--zielen-ciemna);border:0;border-radius:0;box-shadow:none; } .mega a{color:#eaf4ea;white-space:normal} .mega a:hover,.mega a:focus-visible{background:rgba(255,255,255,.14);color:#fff} .ma-podmenu{flex-wrap:wrap} .ma-podmenu > a{flex:1} .podmenu-przycisk{font-size:.95rem;padding:0 1.1em} } /* ——— hero ——— */ .hero{background:linear-gradient(180deg,var(--tlo-2),#fff);border-bottom:1px solid var(--linia)} .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:52px 20px} @media(max-width:940px){.hero .wrap{grid-template-columns:1fr;gap:32px}} .hero h1{color:var(--granat)} .hero h1 em{font-style:normal;color:var(--zielen)} .hero p.lead{font-size:1.06rem;color:var(--tekst-lekki);max-width:56ch} .hero__punkty{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:9px} .hero__punkty li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem} .hero__punkty svg{color:var(--zielen);flex:0 0 auto;margin-top:4px} .hero__cta{display:flex;gap:12px;flex-wrap:wrap} .karta-zlecenie{ background:#fff;border:1px solid var(--linia);border-top:4px solid var(--pomarancz); border-radius:var(--r);padding:26px;box-shadow:var(--cien); } .karta-zlecenie h3{font-size:1.2rem} .karta-zlecenie ol{margin:0 0 20px;padding-left:1.2em;color:var(--tekst-lekki);font-size:.94rem} .karta-zlecenie ol li{margin-bottom:.5em} .karta-zlecenie ol b{color:var(--tekst)} /* ——— pasek zaufania ——— */ .zaufanie{background:var(--granat);color:#fff} .zaufanie .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 20px} @media(max-width:760px){.zaufanie .wrap{grid-template-columns:repeat(2,1fr);gap:22px}} /* Poniżej ~480 px dwie kolumny to po ~170 px na komórkę, a najdłuższy wpis („Termin po diagnostyce / podajemy razem z ceną") potrzebuje 204 px — ZMIERZONE w Chromium. Efekt: cała strona główna dostawała poziome przewijanie (430 px treści na 380 px ekranu). Jedna kolumna nic nie ukrywa i przewijanie znika. */ @media(max-width:480px){.zaufanie .wrap{grid-template-columns:1fr;gap:16px}} .zaufanie div{display:flex;gap:12px;align-items:center;font-size:.92rem} .zaufanie svg{color:var(--limonka);flex:0 0 auto} .zaufanie b{display:block;font-size:1.02rem} .zaufanie span{color:#a8b8bc;font-size:.85rem} /* ——— kafle kategorii ——— */ .kafle{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:1000px){.kafle{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){.kafle{grid-template-columns:repeat(2,1fr)}} .kafel{ background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:22px 18px; text-align:center;text-decoration:none;color:inherit;transition:all .15s ease; } .kafel:hover{border-color:var(--zielen);box-shadow:var(--cien);transform:translateY(-2px)} .kafel__ikona{ width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center; background:var(--zielen-jasna);color:var(--zielen); } .kafel h3{font-size:1rem;margin-bottom:.25em} .kafel p{font-size:.85rem;color:var(--tekst-lekki);margin:0} .kafel small{display:block;margin-top:10px;font-size:.8rem;font-weight:700;color:var(--zielen)} /* ——— produkty ——— */ .produkty{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:1000px){.produkty{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){.produkty{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.produkty{grid-template-columns:1fr}} .produkt{ background:#fff;border:1px solid var(--linia);border-radius:var(--r);overflow:hidden; display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:all .15s ease;position:relative; } .produkt:hover{border-color:var(--zielen);box-shadow:var(--cien)} /* Kafelek zdjęcia — OBSZAR ZAMKNIĘTY. Zdjęcie nie ma prawa z niego wyjść. Bug zgłoszony przez właściciela 2026-07-29 („napisy przy obrazkach słabo widoczne”): wiersz siatki był `auto`, więc `height:100%` na `` odwoływało się do wysokości zależnej od samego obrazka — odwołanie CYKLICZNE, które przeglądarka traktuje jak `auto`. Zdjęcie 493×497 przy szerokości 284 px renderowało się na 286,7 px i wychodziło ~117 px PONIŻEJ kafelka, przykrywając markę, nazwę, etykietę stanu i numer katalogowy. Rozwiązanie: żadnych procentów. Wysokość stoi w jednej zmiennej `--foto-h`, z której korzysta i kafelek, i obrazek — wartość jest BEZWARUNKOWO określona, więc nie ma czego wyliczać z zawartości i nie ma jak wpaść w cykl. (Sprawdzone: `grid-template-rows:1fr` NIE wystarczyło — obrazek nadal rósł do 286,7 px, test to wyłapał.) `overflow:hidden` zostaje jako druga, niezależna siatka ochronna: gdyby kiedykolwiek cokolwiek w tym kafelku wyliczyło się za duże, przelew zostanie obcięty na jego krawędzi, a nie namalowany na napisach. To błąd, który raz już trafił do właściciela. */ .produkt__foto{ --foto-h:170px; height:var(--foto-h);display:grid;place-items:center;overflow:hidden; color:#9aa8a9;font-size:.78rem; background:repeating-linear-gradient(45deg,#f3f6f3 0 10px,#edf1ed 10px 20px); border-bottom:1px solid var(--linia); } /* `box-sizing:border-box` (reguła `*` na górze) sprawia, że padding wchodzi w te 170 px. */ .produkt__foto img{width:100%;height:var(--foto-h);object-fit:contain;padding:8px;background:#fff} /* Zastępnik zdjęcia: symbol płytki zamiast napisu „[zdjęcie]”. Ma być cichy — informuje o braku fotografii, nie krzyczy do użytkownika, że strona jest niedokończona. */ .produkt__ikona{width:46px;height:38px;color:#b3bfbb} /* Hasło sekcji sklepu — jedno zdanie pod nagłówkiem, wyróżnione od zwykłego akapitu. */ .podtytul-sekcji{ font-size:1.06rem;font-weight:700;color:var(--zielen);margin:.1em 0 .5em; } /* ——— etykieta stanu technicznego części ——— `align-self:flex-start` jest tu KONIECZNE, nie kosmetyczne: `.produkt__tresc` jest kolumną flex, a jej domyślne `align-items:stretch` rozciągało `inline-block` na całą szerokość karty. Zamiast zwartego badge’a wychodził bladozielony PASEK przez całą kartę — to jest ten „półprzezroczysty pasek”, o którym pisał właściciel. `border` w kolorze napisu (currentColor) daje etykiecie wyraźny obrys na białym tle karty. */ .kondycja{ display:inline-block;align-self:flex-start; margin-bottom:.5em;padding:.18em .6em;border-radius:4px;border:1px solid currentColor; font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase; } /* Pary kolorów sprawdzone miernikiem kontrastu: 5,76:1 · 6,79:1 · 6,43:1 (próg AA to 4,5). */ .kondycja--nowy{background:#e7f4ec;color:#1c6b3c} .kondycja--reman{background:#e6eefb;color:#1d4f9c} .kondycja--uzywany{background:#eceef0;color:#4d565e} /* ——— strona „Do pobrania" ——— */ .zakladki{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px;border-bottom:2px solid var(--linia)} .zakladka{ appearance:none;background:none;border:0;border-bottom:3px solid transparent; font:inherit;font-weight:700;color:var(--tekst-lekki);cursor:pointer; padding:10px 16px;margin-bottom:-2px;border-radius:4px 4px 0 0; } .zakladka:hover{color:var(--granat);background:var(--tlo-2)} .zakladka--aktywna{color:var(--zielen);border-bottom-color:var(--zielen)} .pliki{display:grid;gap:16px} .plik{background:#fff;border:1px solid var(--linia);border-radius:8px;padding:20px 22px} .plik h3{margin:0 0 .25em;font-size:1.05rem} .plik__meta{margin:0 0 .6em;font-size:.86rem;color:var(--tekst-lekki);font-weight:700} /* `max-width` w `ch` ogranicza DŁUGOŚĆ WIERSZA, nie szerokość karty. Karta jest szeroka na całą treść (1200 px), więc bez tego opis szedł jednym wierszem po ~120 znaków — oko gubi początek następnej linii. ~70 znaków to standardowa miara czytelnego akapitu. Karta zostaje pełnowymiarowa; zawęża się sam tekst. */ .plik__opis{margin:0 0 .8em;max-width:70ch} /* Opis na KARCIE modułu — dokładnie jedna linia, nadmiar ucięty wielokropkiem. Modyfikator, a nie zmiana `.plik__opis`: ta sama klasa niesie wielolinijkowe opisy plików na „Do pobrania", gdzie ucinanie zabrałoby treść. Pełny tekst zostaje w `title`, a długi opis modułu i tak czyta się na jego stronie. `min-width:0` jest konieczne — element w siatce/flexie ma domyślnie `min-width:auto` i wtedy NIE kurczy się poniżej swojej treści, więc `ellipsis` nigdy nie zadziała (tekst zamiast tego rozpycha kafelek). */ .plik__opis--jedna-linia{ max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .plik__nota{ margin:0 0 .9em;padding:10px 12px;font-size:.88rem;max-width:74ch; background:var(--tlo-2);border-left:3px solid var(--zielen);border-radius:0 4px 4px 0; } /* ——— paczki kredytów (sekcja „Kredyty" w sklepie) ——— Osobne klasy, a NIE `.plik`: karta pobierania jest szeroka i tekstowa, paczka kredytów jest wąska i liczbowa. Wspólna klasa zmuszałaby jedną z nich do wyglądu drugiej — i tak już raz skończyło się kolizją nazw (patrz `.lista-plikow` niżej). */ .paczki{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:16px} .paczka{ position:relative;display:flex;flex-direction:column; background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:22px 20px 20px; } /* Zielone tło z bielą: 5,3:1, czyli powyżej progu AA. Rabat NIESIE TREŚĆ (o ile taniej), więc nie może być ozdobnym, jasnym napisem. */ .paczka__rabat{ position:absolute;top:12px;right:12px; background:var(--zielen);color:#fff;font-size:.72rem;font-weight:800; padding:.25em .6em;border-radius:5px;letter-spacing:.02em; } /* `margin-bottom` tutaj (a nie `margin-top` na przycisku) daje odstęp NIEZALEŻNIE od tego, ile akapitów paczka faktycznie ma — cena i przelicznik bywają pominięte, gdy API ich nie podało. Przycisk dociąga `margin-top:auto`, więc w rzędzie kart stopki stoją równo. */ .paczka__tresc{margin-bottom:18px} /* Bez rezerwy miejsca na badge — SPRAWDZONE, że jej nie potrzeba: nawet paczka 100 000 kredytów na ekranie 380 px zostawia 152 px między ostatnią cyfrą a zniżką. Dokładany „na wszelki wypadek" `padding-right` przechodził testy identycznie po usunięciu, czyli nie pilnował niczego. Kolizji pilnują asercje geometrii w `test-css-render.js` (mierzą prostokąty CYFR, nie akapitu) — gdyby badge kiedyś urósł, zaświecą na czerwono. */ .paczka__ile{margin:0;font-size:2.05rem;font-weight:900;line-height:1.05;color:var(--granat)} .paczka__jednostka{ margin:.15em 0 0;font-size:.74rem;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--tekst-lekki); } .paczka__nazwa{margin:.75em 0 0;font-size:.9rem;color:var(--tekst-lekki)} .paczka__cena{margin:.85em 0 0;font-size:1.3rem;font-weight:800;color:var(--tekst)} .paczka__stawka{margin:.15em 0 0;font-size:.85rem;color:var(--tekst-lekki)} .paczka .btn{margin-top:auto} /* Globalne `.btn:disabled{opacity:.5}` zjadłoby czytelność jedynego napisu, który tłumaczy, DLACZEGO nie da się kupić. Zamiast przygaszać, dajemy wyraźny wygląd „nieczynne": #5f6f73 na #f4f7f4 to 4,9:1 (AA), a `not-allowed` i tak zostaje z reguły globalnej. */ .paczka .btn:disabled{ opacity:1;background:var(--tlo-2);color:var(--tekst-lekki);border-color:var(--linia); } .plik__suma{margin-top:12px;font-size:.82rem;color:var(--tekst-lekki)} .plik__suma summary{cursor:pointer} .plik__suma code{display:block;margin-top:6px;word-break:break-all;font-size:.78rem} /* Warstwa napisów: WŁASNE nieprzezroczyste tło i pozycja nad zdjęciem. Polecenie właściciela mówiło wprost: „etykieta stanu, marka, nazwa, numer katalogowy i opis pod zdjęciem na SOLIDNYM tle — nie pływające po fotografii”. `background:#fff` plus `z-index:1` sprawiają, że tekst leży na nieprzeziernej płaszczyźnie: gdyby kiedyś jakikolwiek element z góry karty się wylał, przejdzie POD napisami, nie przez nie. */ .produkt__tresc{ padding:15px 16px 17px;display:flex;flex-direction:column;flex:1; position:relative;z-index:1;background:#fff; } .produkt__marka{font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--zielen)} .produkt h3{font-size:.98rem;margin:.3em 0 .35em;line-height:1.35} .produkt__nr{font-family:Consolas,monospace;font-size:.8rem;color:var(--tekst-lekki);margin-bottom:.8em} .produkt__cena{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:8px; padding-top:12px;border-top:1px solid var(--tlo-2)} .produkt__cena b{font-size:1.12rem;color:var(--granat)} .produkt__cena small{font-size:.76rem;color:var(--tekst-lekki)} /* Wstążka („Część”, „Naprawa”, „Reman”) to JEDYNY napis leżący na zdjęciu — a zdjęcie jest tłem, na które nie mamy wpływu (fotografie z Allegro: folia, etykiety, druk). Dlatego: nieprzezroczyste tło w odcieniu przechodzącym WCAG (5,07:1 z bielą — na `--pomarancz` było 3,05:1), obrys w kolorze tła i cień, żeby badge odcinał się od dowolnej fotografii, oraz `z-index`, żeby nie zniknął pod warstwą treści karty. */ .wstazka{ position:absolute;top:10px;left:10px;z-index:2; background:var(--pomarancz-czytelny);color:#fff; font-size:.72rem;font-weight:800;padding:.22em .6em;border-radius:4px;letter-spacing:.03em; box-shadow:0 0 0 1px var(--pomarancz-czytelny),0 1px 4px rgba(28,36,38,.35); } .wstazka--zielona{background:var(--zielen)} .wstazka--allegro{background:#ff5a00} /* ——— pas marek ——— */ .marki{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .marki span{ padding:.6em 1.2em;border:1px solid var(--linia);border-radius:var(--r);background:#fff; font-weight:700;font-size:.93rem;color:var(--tekst-lekki); } /* ——— dwie kolumny promo ——— */ .promo{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media(max-width:860px){.promo{grid-template-columns:1fr}} .promo__karta{border-radius:var(--r);padding:34px;color:#fff;display:flex;flex-direction:column} .promo__karta h2{color:#fff} .promo__karta p{opacity:.9} .promo--soft{background:linear-gradient(135deg,var(--granat),#33474d)} .promo--zielona{background:linear-gradient(135deg,var(--zielen-ciemna),var(--zielen))} .promo__karta ul{list-style:none;padding:0;margin:0 0 22px} .promo__karta li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.15);font-size:.94rem} .promo__karta .btn{align-self:flex-start;margin-top:auto} /* ——— stopka ——— */ .stopka{background:var(--granat);color:#b8c6c9;font-size:.92rem;padding:52px 0 22px} .stopka__siatka{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px} @media(max-width:880px){.stopka__siatka{grid-template-columns:1fr 1fr}} @media(max-width:520px){.stopka__siatka{grid-template-columns:1fr}} .stopka h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.1em} .stopka ul{list-style:none;padding:0;margin:0} .stopka li{margin-bottom:.5em} .stopka a{text-decoration:none;opacity:.85} .stopka a:hover{opacity:1;color:var(--limonka)} .stopka__dol{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1); display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;opacity:.7} /* Stała tu OSIEROCONA deklaracja bez selektora (`background:rgba(255,255,255,.07);…}`) — resztka po skasowanym kiedyś elemencie stopki. Parser CSS traktuje taki śmieć jak początek reguły i połyka NASTĘPNĄ: ofiarą było `.menu-mobilne{display:none}`, przez co przycisk hamburgera wisiał w nagłówku także na desktopie (sprawdzone w CSSOM: reguła w ogóle nie docierała do przeglądarki — również na produkcji). Usunięte 2026-08-02. */ /* ——— menu mobilne ——— */ .menu-mobilne{ display:none;background:none;border:1px solid var(--linia);border-radius:var(--r); padding:.45em .6em;cursor:pointer;color:var(--tekst);margin-left:4px; } .menu-mobilne:hover{border-color:var(--zielen);color:var(--zielen)} @media(max-width:980px){ .menu-mobilne{display:block} .nawigacja > .wrap > ul{display:none;flex-direction:column;overflow:visible} .nawigacja--otwarte > .wrap > ul{display:flex} .nawigacja > .wrap > ul > li > a{border-bottom:1px solid rgba(255,255,255,.12)} } /* licznik pozycji w bocznym drzewie */ .bok__ile{ float:right;font-size:.76rem;font-weight:700;color:var(--tekst-lekki); background:var(--tlo-2);border-radius:99px;padding:0 .45em; } .bok a[aria-current] .bok__ile{background:rgba(255,255,255,.22);color:#fff} /* pusta kategoria */ .blok-pusty{ border:1px dashed var(--linia);border-radius:var(--r);padding:30px;text-align:center; background:var(--tlo-2);margin-bottom:8px; } .blok-pusty h3{margin-bottom:.4em} .blok-pusty p{color:var(--tekst-lekki);max-width:60ch;margin:0 auto 18px} /* ——— układ strony z formularzem ——— */ .uklad-formularz{display:grid;grid-template-columns:1fr 330px;gap:32px;align-items:start;padding:34px 20px 64px} @media(max-width:940px){.uklad-formularz{grid-template-columns:1fr}} .formularz{background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:8px 26px 26px} .formularz fieldset{border:0;border-top:1px solid var(--linia);margin:0;padding:22px 0 6px} .formularz fieldset:first-of-type{border-top:0} .formularz legend{font-weight:800;font-size:1.02rem;color:var(--granat);padding:0 8px 0 0} .pola{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:620px){.pola{grid-template-columns:1fr}} .formularz label{display:block;font-size:.9rem;font-weight:650;color:var(--granat);margin-bottom:2px} .formularz label.pelna{margin-top:14px} .formularz input[type=text],.formularz input[type=tel],.formularz input[type=email], .formularz input[type=file],.formularz select,.formularz textarea{ width:100%;margin-top:5px;padding:.7em .85em;border:1px solid var(--linia);border-radius:var(--r); font-family:inherit;font-size:.94rem;font-weight:400;color:var(--tekst);background:#fff; } .formularz textarea{resize:vertical} .formularz input:focus,.formularz select:focus,.formularz textarea:focus{outline:none;border-color:var(--zielen);box-shadow:0 0 0 3px rgba(47,125,50,.12)} .formularz small{display:block;margin-top:5px;font-weight:400;color:var(--tekst-lekki);font-size:.83rem} .wym{color:var(--pomarancz-czytelny)} .zgoda{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.88rem; color:var(--tekst-lekki);margin-top:16px} .zgoda input{margin-top:3px;flex:0 0 auto} .formularz__dol{display:flex;align-items:center;gap:14px;flex-wrap:wrap; border-top:1px solid var(--linia);margin-top:22px;padding-top:20px} .bok-formularz{display:grid;gap:16px} .karta-boczna{background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:20px} .karta-boczna h3{font-size:1rem;margin-bottom:.7em} .karta-boczna--ciemna{background:var(--granat);border-color:var(--granat);color:#c2ced1} .karta-boczna--ciemna h3{color:#fff} .lista-kroki{margin:0;padding-left:1.15em;font-size:.9rem;color:var(--tekst-lekki)} .lista-kroki li{margin-bottom:.45em} .lista-kroki b{color:var(--tekst)} .lista-ptaszki{list-style:none;margin:0;padding:0;font-size:.89rem;color:var(--tekst-lekki)} .lista-ptaszki li{padding:.4em 0 .4em 1.5em;position:relative;border-bottom:1px solid var(--tlo-2)} .lista-ptaszki li:last-child{border-bottom:0} .lista-ptaszki li::before{content:"✔";position:absolute;left:0;color:var(--zielen);font-weight:800} .mapa-zastepnik{ height:180px;border-radius:var(--r);display:grid;place-items:center;color:#9aa8a9;font-size:.82rem; background:repeating-linear-gradient(45deg,#f3f6f3 0 12px,#edf1ed 12px 24px);border:1px solid var(--linia); } /* ——— komunikaty formularzy ——— */ .komunikat{border-radius:var(--r);padding:14px 18px;margin-bottom:16px;font-size:.94rem;line-height:1.5} .komunikat--ok{background:var(--zielen-jasna);border:1px solid var(--zielen);color:var(--zielen-ciemna)} .komunikat--blad{background:#fbe9e7;border:1px solid #e5a49c;color:#8c1d18} /* ——— strony kont ——— */ .uklad-waski{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start;max-width:940px} @media(max-width:820px){.uklad-waski{grid-template-columns:1fr}} /* reset hasła pokazuje produkcyjnie tylko jedną kartę — wtedy nie zostawiamy pustej kolumny */ .uklad-waski--jedna, .uklad-waski:has(> .karta-waska[hidden]){grid-template-columns:1fr;max-width:560px} .karta-waska{background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:28px} .karta-waska--obok{background:var(--tlo-2)} .formularz--goly{border:0;padding:0;background:transparent} .formularz--goly fieldset{border-top:0} .karta-stan{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--linia); border-left:4px solid var(--linia);border-radius:var(--r);padding:24px;margin-bottom:16px} .karta-stan p{color:var(--tekst-lekki);font-size:.95rem} /* Kartę stanu, w której treść ma iść JEDNA POD DRUGĄ (nagłówek, akapit, przyciski), przełączamy na kolumnę — domyślny `flex` układa dzieci w rzędzie, co przy stronie statusu płatności rozjeżdżało nagłówek i przyciski w bok. */ .karta-stan--pion{flex-direction:column;gap:0} /* Przyciski karty stanu w JEDNYM wierszu — w kolumnowej karcie każdy element jest dzieckiem flexa i bez tego opakowania szedłby w osobnym rzędzie, jeden pod drugim. `flex-wrap` przenosi je pod siebie dopiero wtedy, gdy naprawdę się nie mieszczą (telefon). */ .karta-stan__akcje{display:flex;flex-wrap:wrap;gap:10px;margin:.4em 0 0} /* Obrotka przy „sprawdzamy…" — CSS, bez obrazka i bez skryptu. `currentColor` na jednej krawędzi wystarcza, by widać było ruch. Przy `prefers-reduced-motion` zatrzymujemy ją: dla części osób wirujące elementy to realny problem, a stan i tak mówi tekst. */ .obrotka{ display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-2px; border:2px solid var(--linia);border-top-color:var(--zielen);border-radius:50%; animation:obrot .8s linear infinite; } @keyframes obrot{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.obrotka{animation:none}} .karta-stan__ikona{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto} .karta-stan--ok{border-left-color:var(--zielen)} .karta-stan--ok .karta-stan__ikona{background:var(--zielen-jasna);color:var(--zielen)} .karta-stan--uwaga{border-left-color:var(--pomarancz)} .karta-stan--uwaga .karta-stan__ikona{background:#fdecdd;color:var(--pomarancz-czytelny)} .karta-stan--blad{border-left-color:#b3261e} .karta-stan--blad .karta-stan__ikona{background:#fbe9e7;color:#b3261e} .uklad-konto{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start;padding:28px 20px 70px} @media(max-width:940px){.uklad-konto{grid-template-columns:1fr}} .kafelki{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .kafelki--3{grid-template-columns:repeat(3,1fr)} @media(max-width:860px){.kafelki,.kafelki--3{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.kafelki,.kafelki--3{grid-template-columns:1fr}} .kafelek{background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:18px} .kafelek--warsztat{border-left:3px solid var(--zielen);background:var(--zielen-jasna)} .kafelek__etykieta{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--tekst-lekki)} .kafelek__liczba{display:block;font-size:1.9rem;font-weight:800;color:var(--granat);line-height:1.2;margin:.1em 0} .kafelek small{color:var(--tekst-lekki);font-size:.83rem} .pas-uwaga{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px; background:#fdecdd;border:1px solid #f3c79b;border-radius:var(--r);padding:14px 18px;font-size:.94rem} .pas-warsztat{background:var(--zielen-jasna);border:1px dashed var(--zielen);border-radius:var(--r); padding:14px 18px;font-size:.92rem;color:var(--zielen-ciemna)} .tabela-owijka{overflow-x:auto;border:1px solid var(--linia);border-radius:var(--r);background:#fff} .tabela{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px} .tabela th{text-align:left;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase; color:var(--tekst-lekki);padding:12px 14px;border-bottom:1px solid var(--linia);background:var(--tlo-2)} .tabela td{padding:13px 14px;border-bottom:1px solid var(--tlo-2)} .tabela tr:last-child td{border-bottom:0} .tabela .minus{color:#b3261e;font-weight:700} .tabela .plus{color:var(--zielen);font-weight:700} .link-akcja{color:var(--zielen);font-weight:700;text-decoration:none;font-size:.9rem;white-space:nowrap} .link-akcja:hover{text-decoration:underline} .stan{display:inline-block;font-size:.8rem;font-weight:700;padding:.22em .6em;border-radius:5px;white-space:nowrap} .stan--ok{background:var(--zielen-jasna);color:var(--zielen-ciemna)} .stan--wtoku{background:#e7eef2;color:#33606f} .stan--czeka{background:#fdecdd;color:#a34b00} /* Poziomy wiersz listy plików (ikona + nazwa) — NIE mylić z kartą `.plik` ze strony „Do pobrania” (l. ~255). Obie klasy nazywają się tak samo, więc te reguły MUSZĄ być zagnieżdżone w `.lista-plikow`. Bug prod 2026-07-30 (zgłoszony przez właściciela): stały tu jako gołe `.plik` i `.plik__opis`. Jako PÓŹNIEJSZE w pliku wygrywały kaskadę i przerabiały pionową kartę pobierania na poziomy pasek: `display:flex` ustawiał wszystkie dzieci w rząd, a `flex:1; min-width:0` na opisie kurczyło go do **0 px** — tekst wylewał się z pudełka po jednym słowie w pionie (17 wierszy zamiast 2) i nachodził na ramkę „Wersja testowa…”. Zagnieżdżenie, a nie usunięcie: komponent jest dziś nieużywany, ale to gotowy układ pod listę załączników przy zleceniu. Zawężony nie szkodzi nikomu. */ .lista-plikow{display:grid;gap:10px} .lista-plikow .plik{display:flex;align-items:center;gap:14px;background:#fff; border:1px solid var(--linia);border-radius:var(--r);padding:14px 16px} .lista-plikow .plik__ikona{width:42px;height:42px;border-radius:6px;display:grid; place-items:center;flex:0 0 auto; background:#fbe9e7;color:#b3261e;font-weight:800;font-size:.76rem} .lista-plikow .plik__opis{flex:1;min-width:0} .lista-plikow .plik__opis b{display:block} .lista-plikow .plik__opis small{color:var(--tekst-lekki);font-size:.85rem} /* ——— mock okna programu (strefa oprogramowania) ——— */ .okno-mock{background:#0d1417;border:1px solid #24343a;border-radius:var(--r);overflow:hidden; box-shadow:0 18px 44px rgba(28,36,38,.28)} .okno-mock__belka{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#16232a; border-bottom:1px solid #24343a} .okno-mock__belka i{width:10px;height:10px;border-radius:50%;background:#34474f;display:block} .okno-mock__belka span{margin-left:9px;font-size:.79rem;color:#8ba0a8} .okno-mock__tresc{padding:18px;font-family:Consolas,"Cascadia Mono",monospace;font-size:.83rem;color:#9db2ba} .okno-mock__wiersz{display:flex;justify-content:space-between;gap:12px;padding:7px 0; border-bottom:1px dashed rgba(255,255,255,.08)} .okno-mock__wiersz b{color:#fff;font-weight:600} .okno-mock__ok{color:#8bc34a} .okno-mock__akcent{color:#ffb066} /* ——— przypis (gwiazdka: zasady rozliczania) ——— */ .przypis{ font-size:.85rem;color:var(--tekst-lekki);background:var(--zielen-jasna); border-left:3px solid var(--zielen);border-radius:0 var(--r) var(--r) 0; padding:12px 16px;margin:18px 0 0; } .przypis b{color:var(--granat)} .gwiazdka{color:var(--pomarancz-czytelny);font-weight:800} /* ——— atrapa ——— */ .atrapa{display:inline-block;padding:.12em .5em;border-radius:4px;background:#fff3d4;color:#7a5600; font-size:.78rem;font-weight:700;border:1px dashed #e0b33a} /* ——— PODSTRONA KATALOGU ——— */ .okruchy{font-size:.85rem;color:var(--tekst-lekki);padding:14px 0;border-bottom:1px solid var(--linia)} .okruchy a{text-decoration:none} .okruchy a:hover{color:var(--zielen)} .okruchy span{margin:0 .4em;opacity:.5} .uklad-kat{display:grid;grid-template-columns:258px 1fr;gap:34px;align-items:start;padding:28px 20px 64px} @media(max-width:940px){.uklad-kat{grid-template-columns:1fr}} .bok{border:1px solid var(--linia);border-radius:var(--r);overflow:hidden;position:sticky;top:110px;background:#fff} @media(max-width:940px){.bok{position:static}} .bok__naglowek{background:var(--zielen);color:#fff;padding:12px 16px;font-weight:700;font-size:.92rem} .bok__grupa{font-weight:800;font-size:.9rem;padding:14px 16px 6px;color:var(--granat);border-top:1px solid var(--linia)} .bok ul{list-style:none;margin:0;padding:0 8px 8px} .bok a{display:block;padding:.42em .6em;border-radius:6px;text-decoration:none;font-size:.9rem} .bok a:hover{background:var(--zielen-jasna);color:var(--zielen-ciemna)} .bok a[aria-current]{background:var(--zielen);color:#fff;font-weight:700} .bok__stopka{padding:16px;border-top:1px solid var(--linia);background:var(--tlo-2)} .pasek-kat{background:var(--tlo-2);border-bottom:1px solid var(--linia);padding:26px 0} .pasek-kat h1{margin-bottom:.25em;color:var(--granat)} .pasek-kat p{color:var(--tekst-lekki);max-width:70ch;margin:0} .narzedzia-listy{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px} .narzedzia-listy input,.narzedzia-listy select{ padding:.66em .85em;border-radius:var(--r);border:1px solid var(--linia);font-size:.92rem; font-family:inherit;background:#fff;color:var(--tekst); } .narzedzia-listy input{flex:1;min-width:210px} .narzedzia-listy input:focus,.narzedzia-listy select:focus{outline:none;border-color:var(--zielen)} .licznik-wynikow{margin-left:auto;font-size:.88rem;color:var(--tekst-lekki)} .faq details{background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:15px 18px;margin-bottom:9px} .faq details[open]{border-color:var(--zielen)} .faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--zielen);font-weight:800;font-size:1.28rem;line-height:1} .faq details[open] summary::after{content:"–"} .faq p{margin:.85em 0 0;color:var(--tekst-lekki);font-size:.94rem} .kroki-poziom{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:k;margin:26px 0} @media(max-width:860px){.kroki-poziom{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.kroki-poziom{grid-template-columns:1fr}} .krok-p{background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:18px} .krok-p::before{ counter-increment:k;content:counter(k);display:grid;place-items:center; width:30px;height:30px;border-radius:50%;background:var(--zielen);color:#fff;font-weight:800; font-size:.9rem;margin-bottom:10px; } .krok-p h3{font-size:.98rem;margin-bottom:.25em} .krok-p p{font-size:.88rem;color:var(--tekst-lekki);margin:0} /* ═══════════════ SKLEP, KOSZYK I DOKUMENTY (zgodność Przelewy24) ═══════════════ */ /* — dane sprzedawcy (stopka + dokumenty) — */ .sprzedawca{font-style:normal;font-size:.9rem;line-height:1.75;opacity:.9;margin-top:14px} .sprzedawca a{text-decoration:underline} .sprzedawca--jasna{background:var(--tlo-2);border:1px solid var(--linia);border-radius:var(--r); padding:16px 18px;opacity:1;max-width:38ch} /* — sekcja płatności w stopce — */ .platnosci{margin-top:10px} .platnosci__znak{display:inline-block;background:#fff;color:#12263a;font-weight:800;letter-spacing:.02em; font-size:.86rem;padding:.42em .8em;border-radius:5px;border:1px solid #d7dee6} .platnosci p{font-size:.84rem;opacity:.85;margin:10px 0 0} .platnosci a{text-decoration:underline} /* — karta produktu: opis, cena całkowita, przycisk — */ .produkt{display:flex;flex-direction:column} .produkt__opis{font-size:.84rem;color:var(--tekst-lekki);margin:.5em 0 0;line-height:1.5} .produkt__razem{font-size:.82rem;color:var(--tekst-lekki);margin:.45em 0 .7em; padding-top:.5em;border-top:1px dashed var(--linia)} .produkt__razem b{color:var(--tekst)} .produkt__tresc{display:flex;flex-direction:column;flex:1} .produkt__tresc .btn{margin-top:auto} .btn--dodano{background:var(--zielen) !important;border-color:var(--zielen) !important} /* — blok obowiązków informacyjnych na stronie sklepu — */ .info-zakup{background:var(--zielen-jasna);border:1px solid #cfe3cf;border-radius:var(--r);padding:24px 26px} .info-zakup h2{font-size:1.12rem;margin-bottom:.7em} .info-zakup h3{font-size:.92rem;margin-bottom:.35em;color:var(--zielen-ciemna)} .info-zakup__siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px} .info-zakup p{font-size:.87rem;line-height:1.6;margin:0} .info-zakup a{color:var(--zielen-ciemna);font-weight:700;text-decoration:underline} .info-zakup__stopka{margin-top:18px;padding-top:14px;border-top:1px solid #cfe3cf;font-size:.87rem} /* — koszyk — */ .koszyk{width:100%;border-collapse:collapse;margin:6px 0 22px} .koszyk th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em; color:var(--tekst-lekki);border-bottom:1px solid var(--linia);padding:0 8px 8px 0} .koszyk td{padding:12px 8px 12px 0;border-bottom:1px solid var(--linia);font-size:.92rem;vertical-align:middle} .koszyk td:first-child{font-weight:600} .koszyk .ilosc{width:64px;padding:.35em .5em;border:1px solid var(--linia);border-radius:5px;font:inherit} .koszyk .usun{background:none;border:0;font-size:1.35rem;line-height:1;color:var(--tekst-lekki); cursor:pointer;padding:0 .2em} .koszyk .usun:hover{color:#b3261e} .tylko-czytnik{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .dostawa{border:1px solid var(--linia);border-radius:var(--r);padding:14px 16px;margin:0 0 20px} .dostawa legend{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tekst-lekki);padding:0 .4em} .dostawa label{display:block;font-size:.92rem;padding:.28em 0;cursor:pointer} .podsumowanie{margin:0;font-size:.94rem} .podsumowanie div{display:flex;justify-content:space-between;gap:16px;padding:.42em 0} .podsumowanie dt,.podsumowanie dd{margin:0} .podsumowanie dd{font-variant-numeric:tabular-nums} .podsumowanie__razem{border-top:2px solid var(--tekst);margin-top:.5em;padding-top:.7em !important; font-size:1.1rem;font-weight:800} .zgoda{background:var(--tlo-2);border:1px solid var(--linia);border-radius:var(--r); padding:14px 16px;margin:22px 0 16px} .zgoda label{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.55;cursor:pointer} .zgoda input{margin-top:.25em;flex:0 0 auto;width:18px;height:18px} .zgoda a{color:var(--zielen);font-weight:700;text-decoration:underline} .zgoda .komunikat{margin-top:12px} .btn:disabled{opacity:.5;cursor:not-allowed} .lista-ptaszki{list-style:none;padding:0;margin:0 0 16px;font-size:.9rem} .lista-ptaszki li{padding:.4em 0 .4em 1.5em;position:relative;line-height:1.5} .lista-ptaszki li::before{content:"✔";position:absolute;left:0;color:var(--zielen);font-weight:700} /* — dokumenty prawne (regulamin, polityka) — */ .dokument{max-width:820px} .dokument h1{font-size:1.75rem;margin-bottom:.2em} .dokument h2{font-size:1.12rem;margin:2em 0 .6em;padding-top:.6em;border-top:1px solid var(--linia)} .dokument p,.dokument li{font-size:.94rem;line-height:1.7} .dokument a{color:var(--zielen);font-weight:600;text-decoration:underline} .dokument__data{color:var(--tekst-lekki);font-size:.88rem} .dokument__lista{padding-left:1.3em} .dokument__lista li{margin:.5em 0} .dokument__lista ul{margin:.4em 0} .pasek-projekt{background:#fff3d4;border:1px solid #e2c765;border-left:4px solid #e8a90c; border-radius:var(--r);padding:16px 18px;font-size:.9rem;line-height:1.6;margin-bottom:28px} .pasek-projekt strong{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase; color:#7a5600;margin-bottom:.4em} .dopisz{background:#fff3d4;color:#7a5600;padding:.1em .4em;border-radius:4px;font-size:.94em} .warunkowo{background:var(--zielen-jasna);color:var(--zielen-ciemna);padding:.1em .4em;border-radius:4px} .ramka{background:var(--tlo-2);border:1px solid var(--linia);border-radius:var(--r);padding:20px 24px} .ramka p{margin:0 0 1em} .ramka p:last-child{margin-bottom:0} .formularz-wzor{background:#fff;border:1px dashed var(--tekst-lekki);border-radius:var(--r); padding:18px 20px;overflow-x:auto} .formularz-wzor pre{margin:0;font-family:"Consolas","DejaVu Sans Mono",monospace; font-size:.83rem;line-height:1.65;white-space:pre} .tabela-dane{width:100%;border-collapse:collapse;font-size:.88rem;margin:1em 0} .tabela-dane th{text-align:left;background:var(--tlo-2);border:1px solid var(--linia);padding:10px 12px; font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tekst-lekki)} .tabela-dane td{border:1px solid var(--linia);padding:10px 12px;vertical-align:top;line-height:1.55} @media(max-width:700px){ .tabela-dane,.tabela-dane tbody,.tabela-dane tr,.tabela-dane td{display:block;width:100%} .tabela-dane thead{display:none} .tabela-dane tr{margin-bottom:14px;border:1px solid var(--linia);border-radius:var(--r);overflow:hidden} .tabela-dane td{border:0;border-bottom:1px solid var(--linia)} .tabela-dane td:last-child{border-bottom:0} } .dostawa__cena{float:right;color:var(--tekst-lekki);font-size:.86rem} .komunikat--info{background:var(--zielen-jasna);border:1px solid #cfe3cf;color:var(--tekst); border-radius:var(--r);padding:12px 14px;font-size:.88rem;line-height:1.55;margin:.6em 0 0} /* pusty stan w panelu — zamiast wymyślonych zamówień i napraw */ .pusty-stan{background:var(--tlo-2);border:1px dashed var(--linia);border-radius:var(--r); padding:26px 28px;text-align:center} .pusty-stan p{margin:0 0 .7em;color:var(--tekst-lekki);font-size:.94rem;max-width:56ch; margin-left:auto;margin-right:auto} .pusty-stan p b{color:var(--tekst)} .pusty-stan .btn{margin-top:8px} /* konto w nagłówku: nazwa użytkownika + wylogowanie */ .akcja--konto{cursor:default} .akcja--konto a{text-decoration:none;font-weight:700} .akcja--konto a:hover{color:var(--zielen)} .wyloguj{background:none;border:0;padding:0;font:inherit;font-size:.72rem;color:var(--tekst-lekki); cursor:pointer;text-decoration:underline} .wyloguj:hover{color:var(--pomarancz-czytelny)} /* ——— karta prowadząca do szczegółów (Części, Wtyczki) ——— Cała karta jest klikalna (nasłuch w JS), ale odnośnikiem z widoczną etykietą jest NAZWA — to ona daje obsługę klawiatury, otwieranie w nowej karcie i sensowny odczyt w czytniku ekranu. `cursor:pointer` na karcie jest jedyną zapowiedzią, że da się w nią kliknąć; bez niego użytkownik nie ma skąd wiedzieć, że karta cokolwiek robi. Kolor napisu ZOSTAJE odziedziczony: nazwa produktu na liście to nagłówek, a nie niebieski link — podkreślenie przy najechaniu wystarcza za sygnał. */ .produkt--klikalna,.plik--klikalna{cursor:pointer} .produkt__link,.plik__link{color:inherit;text-decoration:none} .produkt__link:hover,.plik__link:hover{text-decoration:underline;color:var(--zielen-ciemna)} /* Obrys ogniskowej MUSI zostać widoczny: bez niego osoba idąca Tabem nie wie, na czym stoi. `outline-offset` odsuwa go od tekstu, żeby nie zlał się z podkreśleniem. */ .produkt__link:focus-visible,.plik__link:focus-visible{outline:2px solid var(--zielen);outline-offset:3px} .plik--klikalna:hover{border-color:var(--zielen);box-shadow:var(--cien)} /* ——— strona szczegółów (produkt.html, wtyczka.html) ——— Dwie kolumny: galeria po lewej, opis i zakup po prawej. Na wąskim ekranie kolumny schodzą pod siebie — zdjęcie na górze, bo po nim klient rozpoznaje swoją część. */ .szczegoly{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start} .szczegoly--waskie{grid-template-columns:minmax(0,760px)} @media(max-width:900px){.szczegoly{grid-template-columns:1fr;gap:26px}} .szczegoly__galeria{position:relative} /* Ten sam pomysł, co w kafelku na liście: wysokość stoi w zmiennej, żadnych procentów na obrazku. Powód historyczny w komentarzu przy `.produkt__foto` — `height:100%` tworzy odwołanie cykliczne i zdjęcie wychodzi poza kafelek, na napisy. */ .galeria__glowne{ --duze-h:420px; height:var(--duze-h);display:grid;place-items:center;gap:8px;overflow:hidden; background:#fff;border-radius:var(--r); /* Obrys rysowany CIENIEM, nie `border`. Przy `box-sizing:border-box` ramka zjada wysokość od środka: kafelek 420 px z ramką 1 px ma 418 px miejsca, a obrazek o wysokości `--duze-h` wystawał 2 px poniżej. `overflow:hidden` to przycinał, więc na oko było dobrze — ale prostokąt elementu wychodził poza kafelek i test geometrii to zmierzył. Cień wewnętrzny wygląda identycznie i NIE zajmuje miejsca, więc obrazek i kafelek mają tę samą wysokość co do piksela. Zero procentów — z tego samego powodu, co w `.produkt__foto`. */ box-shadow:inset 0 0 0 1px var(--linia); color:#9aa8a9;font-size:.86rem; } .galeria__glowne img{width:100%;height:var(--duze-h);object-fit:contain;padding:14px;background:#fff} @media(max-width:640px){.galeria__glowne{--duze-h:300px}} .galeria__brak{color:var(--tekst-lekki);font-size:.86rem} .galeria__miniatury{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .galeria__mini{ width:84px;height:70px;padding:4px;cursor:pointer; background:#fff;border:1px solid var(--linia);border-radius:6px;overflow:hidden; } .galeria__mini img{width:100%;height:100%;object-fit:contain;display:block} .galeria__mini:hover{border-color:var(--zielen)} /* Aktywna miniatura ma odróżniać się OD RAZU — obrys w kolorze marki plus druga linia w środku, żeby było to widoczne także przy zdjęciu z jasnym tłem. */ .galeria__mini--aktywna{border-color:var(--zielen);box-shadow:inset 0 0 0 2px var(--zielen)} .galeria__mini:focus-visible{outline:2px solid var(--zielen);outline-offset:2px} .szczegoly__tresc h1{font-size:1.5rem;line-height:1.25;margin:.15em 0 .45em} .szczegoly__opis{margin:.8em 0 1.2em;max-width:62ch} .szczegoly__opis p{margin:0 0 .8em;line-height:1.65} .szczegoly__opis p:last-child{margin-bottom:0} /* Lista punktowana w opisie wpisanym w panelu (`- pozycja` →