/* Szablon stron markowych CHEFEKT — wspólny arkusz dla wszystkich domen. Kolor akcentu wstrzykiwany per marka w (--accent, --accent-dark). */ *,*::before,*::after{box-sizing:border-box} :root{ --accent:#0f5c9e; --accent-dark:#0a3f6e; --ink:#15202b; --ink-soft:#4a5866; --ink-faint:#78868f; --line:#e2e7ec; --tint:#f5f7f9; --bg:#fff; --radius:10px; --radius-lg:16px; --shadow:0 1px 2px rgba(21,32,43,.05),0 8px 24px -12px rgba(21,32,43,.18); --wrap:1180px; --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; } html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.65} img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.015em} p{margin:0 0 1em} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px} .wrap--narrow{max-width:800px} /* ---------- pasek prawny ---------- */ .topbar{background:var(--ink);color:#dbe3ea;font-size:13px;line-height:1.4} .topbar__inner{padding:9px 24px;text-align:center} /* ---------- nagłówek + menu ---------- */ .site-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .site-head__inner{display:flex;align-items:center;gap:28px;min-height:86px;flex-wrap:wrap} /* lockup: znak producenta i znak dystrybutora w rzędzie, podpis pod nimi */ .lockup{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto;min-width:0;padding:6px 0} .lockup__row{display:flex;align-items:center;gap:16px} .lockup__brand{display:flex;align-items:center;text-decoration:none;color:var(--ink)} .lockup__brand:hover{text-decoration:none;opacity:.88} .lockup__brand img{height:36px;width:auto;max-width:190px;object-fit:contain} .lockup__word{font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--accent);text-transform:uppercase;line-height:1} .lockup__div{width:1px;height:40px;background:var(--line);flex:0 0 auto} .lockup__distlink{display:block;line-height:0} .lockup__distlink img{height:50px;width:auto;max-width:190px;object-fit:contain} .lockup__distlink:hover{opacity:.8} .lockup__distname{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap} .lockup__label{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);text-align:center;white-space:nowrap} .mainnav{display:flex;align-items:stretch;gap:22px;margin-left:auto} .mainnav__sep{width:1px;background:var(--line);align-self:stretch;margin:10px 0} .navgroup{display:flex;flex-direction:column;gap:3px;padding:8px 0} .navgroup__label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)} .navgroup__list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap} .navlink{display:inline-block;padding:5px 9px;border-radius:6px;font-size:14px;font-weight:600;color:var(--ink)} .navlink:hover{background:var(--tint);color:var(--accent);text-decoration:none} .navlink--cta{background:var(--accent);color:#fff} .navlink--cta:hover{background:var(--accent-dark);color:#fff} .navtoggle{display:none;margin-left:auto;width:44px;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer} .navtoggle span{display:block;width:20px;height:2px;background:var(--ink)} /* ---------- przyciski ---------- */ .btn{display:inline-block;padding:12px 22px;border-radius:8px;background:var(--accent);color:#fff;font-weight:700;font-size:15px;border:1px solid var(--accent);cursor:pointer} .btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;text-decoration:none} .btn--big{padding:15px 30px;font-size:16px} .btn--ghost{background:transparent;color:var(--accent);border-color:currentColor} .btn--ghost:hover{background:var(--accent);color:#fff} /* Przyciski prowadzące do sklepu — kolorystyka marki (kolory chefekt.pl są zapisane jako --shop/--shop-dark i można do nich wrócić jedną zmianą). */ .btn--shop{background:var(--accent);border-color:var(--accent);color:#fff} .btn--shop:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff} .btn--light{background:#fff;color:var(--accent-dark);border-color:#fff} .btn--light:hover{background:#eef3f8;color:var(--accent-dark);border-color:#eef3f8} /* ---------- hero ---------- */ .hero{position:relative;color:#fff;isolation:isolate;background:var(--hero-dark)} .hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2} .hero__veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,20,30,.86) 0%,rgba(10,20,30,.55) 70%);z-index:-1} .hero--plain{background:linear-gradient(120deg,var(--hero-dark),var(--hero))} .hero__inner{padding:96px 24px 104px;max-width:820px} .hero__eyebrow{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78)} .hero__h{font-size:clamp(30px,5vw,50px);margin:0 0 18px;text-transform:uppercase} .hero__sub{font-size:clamp(16px,2vw,19px);color:rgba(255,255,255,.9);max-width:620px;margin:0} .hero__cta{margin:32px 0 0} /* ---------- sekcje ---------- */ .sec{padding:76px 0} .sec--tint{background:var(--tint)} .sec--accent{background:linear-gradient(115deg,var(--accent-dark),var(--accent));color:#fff} .sec--accent .sechead__h,.sec--accent .sechead__eyebrow{color:#fff} .sec--accent .sechead__sub,.sec--accent p{color:rgba(255,255,255,.92)} .sec__after{margin:36px 0 0;text-align:center} .sechead{margin-bottom:44px;max-width:760px} .sechead--center{margin-left:auto;margin-right:auto;text-align:center} .sechead--left{margin-bottom:26px} .sechead__eyebrow{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .sechead__h{font-size:clamp(24px,3.4vw,34px);margin:0 0 12px} .sechead__sub{margin:0;color:var(--ink-soft);font-size:17px} .empty{padding:22px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--ink-faint);text-align:center;background:#fff} /* ---------- kafelki ---------- */ .cards{display:grid;gap:24px} .cards--3{grid-template-columns:repeat(3,1fr)} .cards--4{grid-template-columns:repeat(4,1fr)} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column} .card__icon{display:block;font-size:var(--icon-size,30px);line-height:1.1;margin:0 auto 16px;text-align:center; /* Znak w kolorze marki — czerwien z logo. Emoji ma wlasne kolory i to zignoruje. */ color:var(--accent); /* Emoji w Windows/macOS mają własne kroje — wymuszamy je, żeby znak nie zamienił się w prostokąt. */ font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Segoe UI Symbol',var(--font)} .card__img{border-radius:var(--radius);margin-bottom:16px} /* Ikona wektorowa w kafelku: skalowana suwakiem "rozmiar ikony", nie szerokoscia kolumny. */ .card__iconimg{display:block;width:auto;height:var(--icon-size,30px);margin:0 auto 16px} .card__cover{display:block;height:150px;border-radius:var(--radius);background:var(--tint);overflow:hidden;margin:-8px 0 16px} .card__cover img{width:100%;height:100%;object-fit:cover;display:block} .card__date{font-size:12px;color:var(--ink-faint);letter-spacing:.05em;display:block;margin-bottom:6px} .card__h{font-size:19px;margin:0 0 8px} .card__t{color:var(--ink-soft);margin:0;font-size:15px} .card__link{margin-top:auto;padding-top:16px;font-weight:700;font-size:14px} /* ---------- oferta: kategorie ---------- */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;color:var(--ink)} .tile:hover{text-decoration:none;box-shadow:var(--shadow);border-color:#cfd8e0} .tile__img{display:block;height:168px;background:var(--tint);overflow:hidden} .tile__img img{width:100%;height:100%;object-fit:cover;display:block} .tile__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px} .tile__h{font-weight:700;font-size:18px} .tile__t{color:var(--ink-soft);font-size:14px} /* ---------- produkty (bez cen i stanów) ---------- */ .prods{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .prod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;color:var(--ink)} .prod:hover{text-decoration:none;box-shadow:var(--shadow);border-color:#cfd8e0} .prod__img{display:grid;place-items:center;height:190px;background:#fff;border-bottom:1px solid var(--line);position:relative;overflow:hidden} .prod__img img{max-width:88%;max-height:170px;width:auto;height:auto;object-fit:contain} .prod__badge{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:999px} .prod__body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1} .prod__cat{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)} .prod__h{font-weight:600;font-size:15px;line-height:1.4} .prod__more{margin-top:auto;padding-top:10px;font-size:13px;font-weight:700;color:var(--accent)} /* Nadwyżka produktów ponad ustawiony limit — odsłaniana przyciskiem "rozwiń". Bez JS reguła się nie stosuje, więc przycisk działa jak zwykły link do /oferta. */ .js-on .prods .prod--more{display:none} .js-on .prods.is-expanded .prod--more{display:flex} .sec__after{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center} /* ---------- split (o producencie) ---------- */ .split{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center} .split__text p{color:var(--ink-soft)} .split__media img{border-radius:var(--radius-lg)} .split__logo{background:#fff;border:1px solid var(--line);padding:34px} .wordplate{display:grid;place-items:center;min-height:230px;border-radius:var(--radius-lg);background:var(--tint);border:1px solid var(--line)} .wordplate span{font-size:clamp(26px,4vw,42px);font-weight:800;letter-spacing:-.03em;color:var(--accent);text-transform:uppercase} /* ---------- branże ---------- */ .sectors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .sector{display:flex;flex-direction:column;gap:6px;padding:24px;border-left:3px solid var(--accent);background:var(--tint);border-radius:0 var(--radius) var(--radius) 0} .sector__icon{font-size:var(--icon-size,24px);line-height:1.1; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Segoe UI Symbol',var(--font)} .sector__img{display:block;height:120px;border-radius:var(--radius);background:#fff;overflow:hidden;margin-bottom:6px} .sector__img img{width:100%;height:100%;object-fit:cover;display:block} .sector__h{font-weight:700} .sector__t{color:var(--ink-soft);font-size:14px} /* ---------- gdzie kupić ---------- */ .buy{display:grid;grid-template-columns:1.4fr .6fr;gap:48px;align-items:center} .buy__logo img{background:#fff;border-radius:var(--radius-lg);padding:26px} /* Wgrana grafika sekcji zamiast logo: wypelnia kolumne, bez kartonika pod logotyp. */ .buy__pic img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)} .buy__cta{margin:26px 0 0} /* ---------- kontakt ---------- */ .contact{display:grid;grid-template-columns:1fr 1fr;gap:28px} .contact__box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px} .contact__h{font-size:19px} .contact__addr{color:var(--ink-soft)} .contact__list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px} .contact__list li{display:flex;gap:12px;align-items:baseline} .contact__list span{min-width:70px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)} .contact{align-items:stretch} .contact__box{display:flex;flex-direction:column} .contact__map{margin-top:auto;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--tint)} .contact__map iframe{display:block;width:100%;height:190px;border:0;filter:saturate(.92)} .contact__maplink{margin:10px 0 0;font-size:13px;font-weight:600} @media (max-width:620px){.contact__map iframe{height:170px}} .form{display:grid;gap:14px} .form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink-soft)} .form input[type=text],.form input[type=email],.form textarea{font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%} .form input:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)} .form label.form__check{display:flex;flex-direction:row;gap:10px;align-items:flex-start; font-weight:400;font-size:13px;cursor:pointer} .form label.form__check input[type=checkbox]{flex:0 0 auto;width:16px;height:16px;margin:2px 0 0} .form__note{margin:0;font-size:12px;color:var(--ink-faint)} .prose p{color:var(--ink-soft)} /* ---------- stopka ---------- */ .site-foot{background:#0d1620;color:#c2ccd6;font-size:15px;padding-top:52px;line-height:1.5} .site-foot a{color:#fff} .foot-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:36px;padding-bottom:32px} .foot-word{display:block;font-size:23px;font-weight:800;letter-spacing:-.02em;color:#fff;text-transform:uppercase;margin-bottom:12px} .foot-lead{color:#9fadb9;font-size:14px;line-height:1.45} .foot-h{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8b99a5;margin-bottom:14px} .foot-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px;line-height:1.4} .foot-col--seller{min-width:0} .foot-disclaimer{padding:4px 0 18px;font-size:13px;color:#93a1ad;line-height:1.35} .foot-disclaimer p{margin:0 0 2px} .foot-disclaimer p:last-child{margin-bottom:0} /* Dane sprzedawcy w stopce: nazwa i adres bez etykiet, pod nimi identyfikatory i kontakt w wierszach "ETYKIETA: wartość". Dwukropek jest w treści, nie w CSS, żeby nie ginął przy kopiowaniu tekstu i dla czytników ekranu. */ .sd-name{margin:0;color:#fff;font-size:13px;font-weight:600;line-height:1.35} .sd-addr{margin:0 0 9px;color:#fff;font-size:13px;line-height:1.35} .seller-data{display:grid;gap:2px;margin:0;font-size:13px;line-height:1.35} .seller-data dt{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin:0} .seller-data dd{margin:0;color:#fff;overflow-wrap:anywhere} .seller-data a{color:#fff} .sd-row{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap} /* Ten sam odcień co reszta stopki — bez widocznego pasa na dole. */ .foot-bottom{background:#0d1620;padding:18px 0} .foot-copy{margin:0;color:#7b8894;font-size:13px} /* ---------- responsywność ---------- */ @media (max-width:1040px){ .prods{grid-template-columns:repeat(3,1fr)} .foot-grid{grid-template-columns:1fr 1fr;gap:32px} } @media (max-width:900px){ .navtoggle{display:flex} .mainnav{display:none;width:100%;flex-direction:column;gap:0;margin:0;padding-bottom:14px} .mainnav.is-open{display:flex} .mainnav__sep{display:none} .navgroup{border-top:1px solid var(--line);padding:14px 0 10px} .navgroup__list{flex-direction:column;align-items:stretch;gap:2px} .navlink{padding:10px 0} .navlink--cta{text-align:center;padding:12px;margin-top:8px} .split,.buy,.contact{grid-template-columns:1fr;gap:32px} .cards--3,.cards--4,.tiles,.sectors{grid-template-columns:repeat(2,1fr)} .hero__inner{padding:70px 24px 76px} .sec{padding:56px 0} } @media (max-width:620px){ .lockup__row{gap:11px} .lockup__brand img{height:28px} .lockup__distlink img{height:38px} .lockup__label{font-size:8.5px;letter-spacing:.09em} .prods,.cards--3,.cards--4,.tiles,.sectors{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} } /* ---------- karta produktu ---------- */ .crumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink-faint);margin-bottom:22px} .crumbs a{color:var(--ink-soft)} .crumbs__here{color:var(--ink);font-weight:600} .card-product{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:start} .card-product__media{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;display:grid;place-items:center;min-height:300px} .card-product__media img{max-height:400px;width:auto;object-fit:contain} .card-product__h{font-size:clamp(22px,3vw,31px);margin:0 0 18px} .specs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 22px;margin:0 0 24px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .specs dt{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px} .specs dd{margin:0;font-weight:600} .avail{border-radius:var(--radius-lg);padding:22px 24px;border:1px solid var(--line)} .avail--ask{background:#fdf6e3;border-color:#eddcae} .avail--ok{background:#f1f8f3;border-color:#c9e4d3} .avail__h{font-size:17px;font-weight:700;margin:0 0 6px} .avail--ask .avail__h{color:#8a5a00} .avail--ok .avail__h{color:#0f7b46} .avail__t{margin:0 0 16px;color:var(--ink-soft);font-size:15px} .avail__contact{display:flex;gap:10px;flex-wrap:wrap;margin:0} .card-product__alt{margin:18px 0 0;font-size:13px;color:var(--ink-faint)} .card-product__desc,.card-product__form,.card-product__related{margin-top:52px;padding-top:38px;border-top:1px solid var(--line)} .card-product__desc h2,.card-product__form h2,.card-product__related h2{font-size:21px} .card-product__desc .prose{max-width:780px} .form--inq{max-width:720px} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form__product{margin:0 0 6px;padding:12px 14px;background:var(--tint);border-radius:8px;font-size:14px} .form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .flash-ok{padding:14px 18px;border-radius:10px;background:#e8f6ee;border:1px solid #bfe3ce;color:#0f7b46;font-weight:600;max-width:720px} .flash-err{padding:14px 18px;border-radius:10px;background:#fdecea;border:1px solid #f4c7c3;color:#b3261e;font-weight:600;max-width:720px} @media (max-width:900px){ .card-product{grid-template-columns:1fr;gap:28px} .form__row{grid-template-columns:1fr} } @media (max-width:620px){.specs{grid-template-columns:1fr}} /* Długi opis kategorii pod siatką produktów — treść, po której podstrona ma się pozycjonować, a nie tylko lista kafelków. */ .cat-desc{margin-top:52px;padding-top:36px;border-top:1px solid var(--line);max-width:820px} .cat-desc h2{font-size:21px} /* „Czytaj więcej" w kafelkach branż.
nie wymaga JavaScriptu, treść siedzi w HTML (więc jest indeksowana), a układ nie rośnie do kliknięcia. */ .more{margin-top:8px} .more__btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none; font-size:13px;font-weight:700;color:var(--accent)} .more__btn::-webkit-details-marker{display:none} .more__btn::after{content:'▾';font-size:11px;transition:transform .15s} .more[open] .more__btn::after{transform:rotate(180deg)} .more__btn:hover{text-decoration:underline} .more__body{display:block;margin-top:8px;font-size:14px;color:var(--ink-soft);line-height:1.6} .more__body p{margin:0 0 8px} .more__body p:last-child{margin-bottom:0} /* Rozwijana treść w sekcjach tekstowych (O dystrybutorze, O producencie). */ .more--block{margin-top:14px} .more--block .more__body{max-width:820px} /* ---------- FAQ (harmonijka) ---------- */ .faq{display:grid;gap:10px} .faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .faq__item[open]{border-color:#cfd8e0;box-shadow:var(--shadow)} .faq__q{display:flex;align-items:flex-start;gap:12px;cursor:pointer;list-style:none; padding:16px 20px;font-weight:700;font-size:16px;color:var(--ink);line-height:1.4} .faq__q::-webkit-details-marker{display:none} .faq__q::after{content:'+';margin-left:auto;flex:0 0 auto;font-weight:400;font-size:22px; line-height:1;color:var(--accent);transition:transform .15s} .faq__item[open] .faq__q::after{content:'–'} .faq__q:hover{background:var(--tint)} .faq__a{padding:0 20px 18px;color:var(--ink-soft);font-size:15px;line-height:1.7} .faq__a p{margin:0 0 10px} .faq__a p:last-child{margin-bottom:0} /* Sekcja z cienką linią u góry — rozdziela dwa bloki o tym samym tle, żeby FAQ nie zlewał się z sekcją nad nim ani z kontaktem pod nim. */ .sec--rule{border-top:1px solid var(--line)} .faq__item{scroll-margin-top:100px} /* ---------- oferta: szukanie, działy, stronicowanie ---------- */ .filtr{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:0 0 18px} .filtr__search{flex:1 1 320px;display:block} .filtr__label{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:6px} .filtr__search input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius); font:inherit;background:#fff;color:var(--ink)} .filtr__search input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)} .filtr__clear{align-self:flex-end;padding-bottom:13px;font-size:14px;color:var(--ink-faint)} .chipy{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} .chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line); border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:none} .chip:hover{border-color:var(--accent);color:var(--accent)} .chip--on{background:var(--accent);border-color:var(--accent);color:#fff} .chip__n{font-size:12px;font-weight:700;opacity:.65} .chip--on .chip__n{opacity:.85} .wynik{margin:0 0 20px;color:var(--ink-soft);font-size:15px} .wynik__hint{color:var(--ink-faint)} .pager{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:28px 0 0} .pager__b,.pager__n{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px; padding:0 13px;border:1px solid var(--line);border-radius:var(--radius);background:#fff; font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:none} .pager__b:hover,.pager__n:hover{border-color:var(--accent);color:var(--accent)} .pager__n--on{background:var(--accent);border-color:var(--accent);color:#fff} .pager__gap{color:var(--ink-faint)} @media (max-width:560px){ .filtr{gap:10px} .filtr__search{flex:1 1 100%} }