/* --- kroje pisma z wlasnej domeny ---
   Wczesniej strona ciagnela je z fonts.googleapis.com, przez co adres IP kazdego
   odwiedzajacego trafial do Google, zanim cokolwiek kliknal. Teraz przegladarka
   pobiera je z tapnijnow.pl, a Netlify pobiera je od Google po swojej stronie
   (przekierowania w netlify.toml). Do Google nie idzie zadne zapytanie z urzadzenia
   klienta.
   Oba kroje sa zmienne - jeden plik na podzbior znakow obsluguje caly zakres grubosci,
   stad tylko cztery pliki zamiast kilkunastu. latin-ext jest konieczny dla polskich
   znakow diakrytycznych. */
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonty/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonty/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonty/jetbrains-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonty/jetbrains-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


:root{--ink:#071633;--muted:#657187;--line:#e6e9ef;--bg:#f7f8fb;--g:linear-gradient(135deg,#ff7a00,#ff3f79 50%,#8d19dd);--box:#0c1c40;--shadow:0 25px 70px rgba(7,22,51,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Manrope,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5}a{text-decoration:none;color:inherit}.container{width:min(1160px,calc(100% - 36px));margin:auto}
.nav{height:76px;position:sticky;top:0;z-index:30;background:#fffffff5;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.navin{height:100%;display:flex;align-items:center;justify-content:space-between}.logo{width:122px;height:60px;object-fit:contain}.links{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:800}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 21px;border-radius:14px;font-weight:900;border:1px solid transparent}.primary{background:var(--ink);color:#fff;box-shadow:0 10px 24px #0716331f}.outline{background:#fff;border-color:var(--line)}
.hero{padding:78px 0 90px}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}.eyebrow,.kicker{font-size:12px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase}.eyebrow{display:inline-block;padding:8px 12px;border:1px solid #ffd7ea;background:#fff3f8;color:#a8005d;border-radius:999px}.kicker{color:#ad0061}
h1{font-size:clamp(44px,6vw,76px);line-height:.98;letter-spacing:-.048em;margin:18px 0}.grad{background:var(--g);background-clip:text;color:transparent}.lead{font-size:20px;color:#526078;max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:29px}.micro{font-size:13px;color:#8992a3;margin-top:14px}
.hero-product{border:1px solid var(--line);border-radius:32px;background:var(--bg);box-shadow:var(--shadow);padding:18px;position:relative;overflow:hidden}.hero-product img{width:100%;height:auto;display:block;border-radius:23px}.badge{position:absolute;left:34px;bottom:32px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:10px 14px;font-size:12px;font-weight:900;box-shadow:0 12px 30px #07163318}
.section{padding:88px 0}.alt{background:var(--bg)}.center{text-align:center}h2{font-size:clamp(34px,4.5vw,54px);line-height:1.02;letter-spacing:-.042em;margin:12px 0 15px}.sub{font-size:18px;color:var(--muted);max-width:760px;margin:auto}
.problem{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:42px}.panel{padding:31px;border-radius:24px;text-align:left;border:1px solid var(--line);background:#fff}.panel.bad,.good{background:none}.problem .panel{border:0;background:none;padding:0;border-radius:0}.problem{gap:20px 46px}.panel.panel h3{margin:0 0 10px;font-size:22px}.panel li{margin:8px 0;color:#59667b}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:42px}.step{padding:28px;text-align:left;border:1px solid var(--line);border-radius:22px;background:#fff}.num{font-size:12px;color:#b00063;font-weight:900}.step h3{margin:9px 0 7px}.step p{margin:0;color:var(--muted)}
.usegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px}.use{padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff;text-align:left;min-height:145px}.uicon{font-size:27px}.use h3{font-size:18px;margin:9px 0 5px}.use p{font-size:14px;color:var(--muted);margin:0}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;margin-top:43px}.product{background:#fff;border:1px solid var(--line);border-radius:25px;overflow:hidden;text-align:left;display:flex;flex-direction:column}.product-img{height:254px;padding-top:24px;background:#fff;display:grid;place-items:center;overflow:hidden}.product-img img{width:100%;height:100%;max-height:230px;object-fit:cover}.product-img .clean{object-fit:contain}.pbody{padding:24px;display:flex;flex-direction:column;flex:1}.pbody .btn{margin-top:auto;align-self:flex-start}.tag{display:inline-block;font-size:11px;font-weight:900;letter-spacing:1px;color:#a8005d;background:#fff0f7;padding:6px 9px;border-radius:999px}.pbody h3{font-size:22px;margin:10px 0 7px}.pbody p{color:var(--muted);margin:0 0 18px}.pbody ul{color:#59667b;padding-left:20px;margin:0 0 20px}.pbody li{margin:5px 0}
.industries{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}.industry{border:1px solid var(--line);border-radius:23px;background:#fff;padding:27px;text-align:left}.industry .emoji{font-size:38px}.industry h3{margin:12px 0 6px}.industry p{color:var(--muted);margin:0}
.formbox{margin-top:0;background:none;color:inherit;border-radius:0;padding:0}.form{max-width:900px;margin:28px auto 0;text-align:left}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form label{font-size:13px;font-weight:900}.form input,.form select,.form textarea{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:#fff;color:var(--ink);font:inherit;font-weight:500;font-size:15px;transition:border-color .15s}.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ink)}.form textarea{min-height:95px;resize:vertical}.form select{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.5;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23071633' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px}.form select::-ms-expand{display:none}.full{grid-column:1/-1}.form .btn{margin-top:16px}.fine{font-size:13px;line-height:1.6;color:var(--muted);margin-top:14px}.gw{color:#b00063;font-weight:900;margin-left:3px}.mailinfo{display:none;margin-top:8px;font-size:13px;font-weight:600;line-height:1.55;color:var(--ink);background:var(--bg);border-left:2px solid #b00063;border-radius:0 10px 10px 0;padding:10px 13px}.mailinfo.on{display:block}.mailinfo button{font:inherit;font-weight:900;color:var(--ink);background:none;border:0;padding:0;margin:0;text-decoration:underline;cursor:pointer;width:auto!important}.privacy-check .gw{margin-left:-6px}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:40px}details{padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:#fff;text-align:left}summary{font-weight:900;cursor:pointer}details p{color:var(--muted)}
.footer{border-top:1px solid var(--line);padding:33px 0;color:#68748a;font-size:14px}.footin{display:flex;justify-content:space-between;gap:20px}
.projektuj-mob{display:none}
@media(max-width:900px){.actions{justify-content:center}.micro{text-align:center}.projektuj-mob{display:flex;justify-content:center;margin-top:12px}.projektuj-mob .btn{width:100%;max-width:340px;justify-content:center}.nav-cta{display:none}.navin .logo{flex:none}.links{display:none}.hero-grid,.problem{grid-template-columns:1fr}.steps,.product-grid,.industries{grid-template-columns:1fr}.usegrid{grid-template-columns:repeat(2,1fr)}.faq{grid-template-columns:1fr}}
@media(max-width:560px){.navin .btn{padding:10px 12px;font-size:12.5px}.navin .logo{width:92px;height:45px}.container{width:calc(100% - 28px)}.hero{padding:52px 0 65px}.section{padding:67px 0}h1{letter-spacing:-.042em}.usegrid,.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.footin{display:block}.hero-product{padding:8px}}

.white-cta{display:inline-flex;align-items:center;justify-content:center;background:#fff!important;color:#17223d!important;border:0!important;border-radius:12px;padding:14px 28px;font-weight:900;text-decoration:none;min-width:190px;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.white-cta:hover{transform:translateY(-1px)}
.privacy-check{display:flex!important;align-items:flex-start;gap:10px;font-size:13px!important;line-height:1.6;margin-top:6px}.privacy-check input{width:auto!important;margin:2px 0 0!important}.privacy-check a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

@media (max-width:1000px){.industries{grid-template-columns:repeat(2,1fr)}}
@media (max-width:650px){.industries{grid-template-columns:1fr}}

@media(max-width:560px){.form .btn{color:#071633!important;background:#fff!important;border-color:#fff!important;text-shadow:none!important;opacity:1!important}}


/* drobny druk w kroju maszynowym - etykiety, oznaczenia, wymiary */
.eyebrow,.kicker,.tag,.num,.badge,.wym,.podpis{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.eyebrow,.kicker{font-weight:700;letter-spacing:1.1px}
.tag,.num{font-weight:700;letter-spacing:.5px}
.badge{font-weight:500;letter-spacing:.2px}
.form label{font-family:Manrope,Inter,system-ui,sans-serif;font-weight:800;letter-spacing:0;font-size:13.5px}
.form label.privacy-check{font-family:Manrope,Inter,system-ui,sans-serif;font-weight:400;letter-spacing:0}
.pole{font-size:13.5px;font-weight:800;letter-spacing:0;color:var(--muted)}
.podpis{font-weight:400;font-size:12px}
.wym{font-weight:500}
/* wpisywana tresc zostaje w Manrope - krojem maszynowym sa tylko etykiety */
.form input,.form select,.form textarea,.form option{font-family:Manrope,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:13px;font-weight:900;letter-spacing:0}
.mailinfo{font-family:Manrope,Inter,system-ui,sans-serif;letter-spacing:0}
.mailinfo button{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:12px}
.form label.privacy-check{align-items:flex-start}
.privacy-check .gw{margin-left:2px}

/* --- 01: gradient jako podkreslenie, nie wypelnienie liter --- */
.podkres{background-image:var(--g);background-repeat:no-repeat;background-size:100% .07em;background-position:0 100%;padding:0 .04em .06em}
/* Na szerokim ekranie wiersze naglowka sa ciasne (line-height .98), wiec kreska
   pod "Jednym" wchodzila w linie nizej. Podnosimy ja na desktopie. */
@media(min-width:900px){.podkres{padding-bottom:.025em}}

/* --- 03: naglowek sekcji do lewej, numer zamiast nadkreslenia --- */
.lewo>.container>.sekglowa,.lewo>.container>h1,.lewo>.container>h2,.lewo>.container>.sub{text-align:left}
.lewo>.container>.sub{margin-left:0;margin-right:0}
.sekglowa{display:flex;align-items:center;gap:13px}
.sekglowa .kicker{flex:none;color:var(--ink)}
.sekglowa .linia{flex:1;height:1px;opacity:1;background:linear-gradient(90deg,#ff7a00 0,#ff3f79 46px,#8d19dd 96px,#e6e9ef 150px)}

/* --- 02: wiersze katalogowe zamiast czterech kart --- */
.katalog{margin-top:34px;text-align:left}
.kw{display:grid;grid-template-columns:36px 82px 1fr auto;gap:20px;align-items:center;padding:19px 0;border-bottom:1px solid var(--line)}
.kw:first-child{border-top:2px solid var(--ink)}
.kw:last-child{border-bottom:2px solid var(--ink)}
.kw .idx{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:13px;font-weight:500;color:var(--muted,#657187)}
.kfot{width:82px;height:82px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px}
.kop h3{margin:0;font-size:20px;letter-spacing:-.4px;line-height:1.15}
.kop p{margin:5px 0 0;font-size:14.5px;color:var(--muted);line-height:1.5;max-width:58ch}
.kspec{text-align:right;white-space:nowrap}
.kspec b{display:block;font-size:15px}
.kspec span{display:block;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--muted);margin-top:4px}
.kcta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
@media(max-width:700px){
  .kw{grid-template-columns:30px 62px 1fr;gap:13px;align-items:start;padding:17px 0}
  .kfot{width:62px;height:62px;border-radius:8px}
  .kspec{grid-column:2 / 4;text-align:left;margin-top:2px}
  .kspec b{display:inline;font-size:14px}
  .kspec span{display:inline;margin-left:11px}
  .kop h3{font-size:17px}
  .kop p{font-size:13.5px}
}

/* --- 05: os z trzema przystankami zamiast trzech kart --- */
.os{position:relative;margin-top:42px;text-align:left}
.stacje{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative}
.st .kropka{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:12px;font-weight:700;position:relative;z-index:2}
.st .num{display:block;margin-top:15px}
.st h3{margin:6px 0 0;font-size:20px;letter-spacing:-.4px;line-height:1.2}
.st p{margin:7px 0 0;font-size:14.5px;color:var(--muted);line-height:1.55}
@media(max-width:900px){
  .stacje{grid-template-columns:1fr;gap:22px}
}

/* --- 04: etykiety zamiast emoji --- */
.mdane{margin-top:11px}
.met{display:block;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;opacity:.55;margin-bottom:2px}
.kontdane{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 58px;min-height:180px;margin-top:6px;text-align:center}
.kontdane .mdane{margin-top:0}
.kontdane a{font-size:17px;font-weight:700}

/* 06: cele jako lista z kreskami zamiast kafelkow */
.cele{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;margin-top:38px;text-align:left}
.cel{padding:15px 0;border-bottom:1px solid var(--line)}
.cel b{display:block;font-size:17px;font-weight:800;letter-spacing:-.3px}
.cel span{display:block;font-size:14px;color:var(--muted);margin-top:3px;line-height:1.5}
@media(max-width:700px){.cele{grid-template-columns:1fr;gap:0}.cel{padding:13px 0}.cel b{font-size:16px}}

/* 07: branze jako lista nazw, emoji zostaje przed nazwa */
.branze{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;margin-top:36px;
  text-align:left;border-top:2px solid var(--ink)}
.branza{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.branza b{font-size:16px;font-weight:800;letter-spacing:-.3px}
.branze-nota{margin-top:22px;font-size:14.5px;color:var(--muted);text-align:left}
@media(max-width:820px){.branze{grid-template-columns:1fr 1fr;gap:0 26px}}
@media(max-width:520px){.branze{grid-template-columns:1fr}.branza{padding:12px 0}}

/* --- nawigacja: poziome menu powyzej 980 px, nizej hamburger --- */
.links a{position:relative}
/* Podkreslenie aktywnej strony. Gdy kursor wchodzi w pasek, podswietlenie
   przenosi sie pod kursor i wraca na aktywna strone, gdy kursor go opusci. */
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--g);opacity:0;transition:opacity .16s ease}
.links a.tu::after{opacity:1}
.links:hover a.tu::after{opacity:0}
.links:hover a:hover::after{opacity:1}
.dom{display:flex;align-items:center}
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer;flex:none}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;margin:4px 0;transition:transform .18s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-mob{position:fixed;left:0;right:0;top:76px;bottom:0;background:#fff;z-index:29;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 0 30px}
.menu-mob[hidden]{display:none}
.menu-mob .container{display:flex;flex-direction:column}
.menu-mob a{padding:17px 2px;font-size:18px;font-weight:800;border-bottom:1px solid var(--line)}
.menu-mob a.tu{color:#ad0061}
.menu-mob .btn{margin-top:24px;border-bottom:0;justify-content:center;font-size:15px}
/* Blokada przewijania pod otwartym menu.
   NIE przez overflow:hidden na <html> - w Safari na iOS to wylacza position:sticky,
   wiec pasek odczepial sie i wracal na swoje miejsce w dokumencie (czyli hen nad
   ekran), a w luce nad menu widac bylo tresc strony. Zamiast tego usztywniamy
   <body> na wysokosci, z ktorej klient otworzyl menu, a pasek na ten czas robi
   sie fixed - fixed dziala na iOS niezaleznie od tego, co jest kontenerem
   przewijania. Skrypt zapamietuje pozycje i przywraca ja przy zamknieciu. */
body.menu-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
html.menu-otwarte .nav{position:fixed;top:0;left:0;right:0;z-index:31}
/* Rozmycie tla kosztuje na telefonie zaskakujaco duzo - przy kazdej klatce
   przewijania przeglada sie to, co pod paskiem. Ponizej progu hamburgera
   dajemy zwykle biale tlo; wizualnie roznica jest zadna, plynnosc duza. */
@media(max-width:1399px){
  .nav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(max-width:1399px){
  .links{display:none}
  .nav-cta{display:none}
  .burger{display:block}
  .navin .logo{width:108px;height:53px}
}
@media(prefers-reduced-motion:reduce){.burger span,.rstrz{transition:none}}

/* --- rozdroze na stronie glownej --- */
.rozdroze{margin-top:34px;border-top:2px solid var(--ink)}
.rozd{display:grid;grid-template-columns:44px 1fr 28px;gap:18px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line);text-align:left}
.rozd:hover .rstrz{transform:translateX(5px)}
.rnr{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:13px;font-weight:500;color:var(--muted,#657187)}
.rtxt b{display:block;font-size:22px;letter-spacing:-.5px;line-height:1.2}
.rtxt span{display:block;font-size:15px;color:var(--muted);margin-top:5px;line-height:1.5;max-width:62ch}
.rstrz{font-size:20px;color:var(--ink);transition:transform .18s;text-align:right}
@media(max-width:560px){
  .rozd{grid-template-columns:34px 1fr;gap:12px;padding:18px 0}
  .rstrz{display:none}
  .rtxt b{font-size:18px}
  .rtxt span{font-size:14px}
}

/* --- blok "co dalej" na dole kazdej podstrony --- */
.codalej{padding-top:0}
.cd{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  border-top:2px solid var(--ink);padding-top:30px;text-align:left}
.cd h2{font-size:clamp(23px,3.4vw,34px);margin:10px 0 0;letter-spacing:-1px}
.cd .sub{margin:8px 0 0;font-size:16px;max-width:52ch;margin-left:0;margin-right:0}
.cd .btn{flex:none}
@media(max-width:700px){.cd{display:block}.cd .btn{margin-top:20px}}
h1.jakh2{font-size:clamp(34px,4.5vw,54px);line-height:1.02;letter-spacing:-.042em;margin:12px 0 15px}
.opis-firmy{margin-top:26px;text-align:left;max-width:68ch}
.opis-firmy p{font-size:16.5px;line-height:1.65;color:var(--muted);margin:0 0 14px}
.opis-firmy p:last-child{margin-bottom:0}
.opis-firmy b{color:var(--ink);font-weight:700}
/* Na telefonie plakietka zachodzila na produkt - mniejsza i blizej rogu. */
@media(max-width:700px){
  .badge{left:14px;bottom:14px;padding:7px 10px;font-size:9.5px;letter-spacing:.1px;border-radius:11px;
    box-shadow:0 8px 20px #07163314}
}
/* Na waskich ekranach sam dopisek robi plakietke dwa razy dluzsza niz trzeba. */
@media(max-width:430px){.badge-dop{display:none}}

/* --- 02: gradient zarezerwowany dla logo i kreski pod naglowkiem --- */
.btn.primary{background:var(--ink);color:#fff;box-shadow:0 10px 24px #0716331f}
.btn.primary:hover{background:#0d2149}
/* w formularzu (tlo gradientowe) przycisk zostaje bialy - granat na gradiencie ginie */


/* --- 01: hero bez panelu - prawdziwe zdjecie do krawedzi ekranu --- */
.hero{padding:0}
.hero-grid{display:grid;gap:0;grid-template-columns:minmax(18px,calc((100% - 1160px)/2)) minmax(0,614px) minmax(0,1fr);align-items:center}
.hero-tekst{grid-column:2;padding:66px 54px 74px 0}
.hero-in{max-width:614px}
/* Zdjecie ma byc dokladnie tej wysokosci co blok tekstu obok: nie narzuca wlasnych
   proporcji, tylko rozciaga sie na wysokosc wiersza, ktora wyznacza tekst. */
.hero-foto{grid-column:3;position:relative;background:#f4f0ea;align-self:stretch;max-width:820px;margin:66px 0 74px auto}
.hero-foto img{width:100%;height:100%;object-fit:cover;display:block}
.kick{display:flex;align-items:center;gap:13px}
.kick b{flex:none;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink)}
.kick i{flex:1;height:1px;opacity:1;background:linear-gradient(90deg,#ff7a00 0,#ff3f79 46px,#8d19dd 96px,#e6e9ef 150px)}
.fakty{display:flex;gap:34px;flex-wrap:wrap;margin-top:32px;padding-top:19px;border-top:1px solid var(--line)}
.fakty div{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.2px;color:var(--muted)}
.fakty b{display:block;font-family:Manrope,Inter,system-ui,sans-serif;font-size:15.5px;font-weight:800;letter-spacing:0;color:var(--ink);margin-bottom:2px}
@media(max-width:1150px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-tekst{grid-column:1;padding:52px 18px 40px;display:flex;justify-content:center}
  .hero-in{max-width:560px;width:100%}
  .hero-foto{grid-column:1;min-height:0;aspect-ratio:1;align-self:stretch;max-width:min(100%,620px);margin:0 auto}
  .fakty{justify-content:center;text-align:center;gap:22px 30px}
}
@media(max-width:560px){
  .hero-tekst{padding:44px 14px 34px}

  .fakty{flex-direction:column;align-items:center;gap:13px;margin-top:26px}
}

/* --- 05: katalog produktow na duzych, nieprzycietych zdjeciach --- */
.katalog2{margin-top:36px;border-top:2px solid var(--ink);text-align:left}
.pw{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:12px 54px;align-items:center;padding:44px 0;border-bottom:1px solid var(--line)}
.pw:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,460px)}
.pw:nth-child(even) .pfot{order:2}
.pfot img{width:100%;height:auto;display:block}
.pnr{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;font-weight:700;letter-spacing:1.4px;color:var(--muted)}
.pop h2,.pop h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.035em;line-height:1.06;margin:10px 0 10px}
.pop>p{color:#526078;margin:0 0 22px;font-size:16px;max-width:46ch}
.pspec{border-top:1px solid var(--line);margin:0 0 22px;max-width:470px}
.pspec div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.pspec span{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.2px;color:var(--muted)}
.pspec b{font-size:14.5px;font-weight:800;text-align:right}
.plin{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:15px}
.plin s{width:26px;height:1px;background:var(--ink);display:block;text-decoration:none;transition:width .18s}
.plin:hover s{width:38px}
.plinki{display:flex;flex-direction:column;align-items:flex-start;gap:13px}

@media(max-width:860px){
  .pw,.pw:nth-child(even){grid-template-columns:1fr;gap:22px;padding:34px 0}
  .pw:nth-child(even) .pfot{order:0}
  .pfot{display:flex;justify-content:center}
  .pfot img{max-width:340px}
  .pspec,.pop>p{max-width:none}
}

/* --- koszyk: lista do wyceny, bez cen i platnosci --- */
.kbadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:999px;background:var(--ink);color:#fff;
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:700;letter-spacing:0}
.kbadge[hidden]{display:none}
/* w pasku licznik siada na rogu ikony, w menu na telefonie stoi za nazwa */
.koszyk-link .kbadge{position:absolute;right:-4px;top:-1px;box-shadow:0 0 0 2px #fff}
.menu-mob .koszyk-mob .kbadge{margin-left:2px}
button.plin{font:inherit;font-weight:900;font-size:15px;color:var(--ink);background:none;border:0;
  padding:0;cursor:pointer;text-align:left}
button.plin.dodany s{width:38px}
.kosz-pusto{margin-top:34px;border-top:2px solid var(--ink);padding-top:30px;text-align:left}
.kosz-info{color:var(--muted);margin:0 0 22px;font-size:16px;max-width:52ch}
.kosz-lista{margin-top:34px;border-top:2px solid var(--ink);text-align:left}
.kosz-poz{display:grid;grid-template-columns:38px 1fr auto 34px;gap:18px;align-items:center;
  padding:19px 0;border-bottom:1px solid var(--line)}
.kosz-nr{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:13px;font-weight:500;color:var(--muted,#657187)}
.kosz-naz{font-size:18px;font-weight:800;letter-spacing:-.3px}
.kosz-ile{display:inline-flex;align-items:center;gap:4px}
.kosz-ile button{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:9px;
  font:inherit;font-size:17px;font-weight:800;color:var(--ink);cursor:pointer;line-height:1}
.kosz-ile button:hover{border-color:var(--ink)}
.kosz-ile b{min-width:30px;text-align:center;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.kosz-usun{width:34px;height:34px;border:0;background:none;font:inherit;font-size:20px;
  color:var(--muted);cursor:pointer;line-height:1;border-radius:9px}
.kosz-usun:hover{color:var(--ink);background:var(--bg)}
.kosz-pod{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:18px;text-align:left}
.kosz-suma{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--muted)}
@media(max-width:560px){
  .kosz-poz{grid-template-columns:30px 1fr 34px;gap:10px 12px;padding:16px 0}
  .kosz-naz{font-size:16px}
  .kosz-ile{grid-column:2;justify-self:start}
  .kosz-usun{grid-row:1;grid-column:3}
}

/* projekt z edytora w koszyku */
/* Pola plikow wypelnia skrypt koszyka - klient ich nie widzi. Rozmiary z !important,
   bo ogolna regula dla pol formularza (.form input) je nadpisywala i ukryte pole
   wystawalo 14 px poza ekran telefonu, dajac poziomy scroll w koszyku. */
.plik-ukryty{position:absolute!important;left:0!important;top:0!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;margin:0!important;overflow:hidden!important;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.kosz-poz.kosz-proj{grid-template-columns:38px 62px 1fr auto 34px}
.kosz-mini{width:62px;height:62px;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:9px;color:var(--muted);text-align:center;padding:4px}
.kosz-mini img{width:100%;height:100%;object-fit:contain}
.kosz-naz b{display:block;font-size:18px;font-weight:800;letter-spacing:-.3px}
.kosz-det{display:block;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-size:11px;color:var(--muted);margin-top:4px}
@media(max-width:560px){
  .kosz-poz.kosz-proj{grid-template-columns:30px 52px 1fr 34px}
  .kosz-mini{width:52px;height:52px}
  .kosz-poz.kosz-proj .kosz-ile{grid-column:2/4}
}
/* panel edytora: grupa zamowienia */
.grupa-kosz #ileSztuk{width:100%}
.grupa-kosz .btn.primary{width:100%;margin-top:10px}

/* wybor celu przy produkcie */
.pcel{margin:0 0 22px;max-width:470px}
.pcel-lab{display:block;font-size:13.5px;font-weight:800;letter-spacing:0;
  color:var(--muted);margin-bottom:7px}
.pcel-sel{display:block;width:100%;border:1px solid var(--line);border-radius:12px;
  padding:12px 40px 12px 14px;background:#fff;color:var(--ink);
  font-family:Manrope,Inter,system-ui,sans-serif;font-size:14.5px;font-weight:800;cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23071633' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px}
.pcel-sel:hover,.pcel-sel:focus{border-color:var(--ink);outline:none}
@media(max-width:860px){.pcel{max-width:none}}

/* --- pasek na desktopie: logo przy lewej krawedzi ekranu, wycena przy prawej --- */
/* Menu trzyma sie siatki tresci tylko do 1250 px; wyzej pasek rozpiera sie na
   cala szerokosc, zeby dziewiec pozycji zmiescilo sie w jednej linii. */
@media(min-width:1400px){
  .nav .container.navin{width:calc(100% - 48px);max-width:none}
  .nav .links{margin:0 auto}
}

/* Na telefonie kwadrat marnowal szerokosc - pionowy kadr 3:4 powieksza produkt
   o jedna trzecia. Zdjecie jest kwadratowe, wiec wyzsza ramka przycina boki
   (stojak zajmuje 25-78% szerokosci, wiec zostaje z zapasem), a nie gore i dol. */
@media(max-width:700px){
  .hero-foto{aspect-ratio:3/4}
}

/* --- cennik na stronie produktow --- */
.pwzor,.pksz,.pwym,.pkup{margin:0 0 16px;max-width:470px}
.przel{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.przel button{border:0;background:none;font:inherit;font-size:14px;font-weight:800;color:var(--muted);
  padding:11px 16px;cursor:pointer}
.przel button[aria-pressed="true"]{background:var(--ink);color:#fff}
.ksztalty{display:flex;gap:8px;flex-wrap:wrap}
.ksztalt{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;
  border-radius:12px;padding:9px 13px 9px 11px;font:inherit;font-size:14px;font-weight:800;
  color:var(--ink);cursor:pointer}
.ksztalt:hover{border-color:var(--ink)}
.ksztalt[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.ksztalt svg{flex:none;display:block}
.pwym{display:flex;gap:12px;flex-wrap:wrap}
.wym{display:grid;gap:5px}
.wym[hidden],.pkup[hidden],.kosz-kwoty[hidden]{display:none}
.wym span{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;letter-spacing:.2px;color:var(--muted)}
.wym input{width:130px;border:1px solid var(--line);border-radius:11px;padding:11px 13px;background:#fff;
  color:var(--ink);font:inherit;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.wym input:focus-visible,.ksztalt:focus-visible,.przel button:focus-visible,.pcel-sel:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px}
.pkup{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:18px}
.pcena{display:grid;gap:1px;padding-bottom:2px}
.pcena-szt{font-size:30px;font-weight:800;letter-spacing:-1.2px;line-height:1.05;color:var(--ink);
  font-variant-numeric:tabular-nums}
.pcena-op{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:11px;color:var(--muted)}
.pinny{margin:-6px 0 16px;font-size:14px;color:var(--muted);max-width:470px}
.pinny[hidden]{display:none}
@media(max-width:860px){.pwzor,.pksz,.pwym,.pkup,.pinny{max-width:none}.wym input{width:100%}
  .pwym{display:grid;grid-template-columns:1fr 1fr}}

/* --- kwoty w koszyku --- */
.kosz-kwota{display:grid;gap:1px;text-align:right;white-space:nowrap}
.kosz-kwota b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.kosz-kwota span{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:11px;color:var(--muted)}
.kosz-kwota .kosz-wyc{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:11.5px;
  font-weight:700;color:var(--muted)}
.kosz-poz{grid-template-columns:38px 1fr auto auto 34px}
.kosz-poz.kosz-proj{grid-template-columns:38px 62px 1fr auto auto 34px}
.kosz-kwoty{margin-top:28px;border-top:2px solid var(--ink);padding-top:22px;text-align:left;
  display:grid;gap:18px}
.kosz-dost{display:grid;gap:9px;justify-items:start}
.kosz-rach{margin:0;display:grid;gap:0;max-width:420px}
.kosz-rach>div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.kosz-rach dt{font-size:14px;font-weight:600;color:var(--muted)}
.kosz-rach dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums}
.kosz-rach .razem{border-bottom:0;border-top:2px solid var(--ink);padding-top:14px;margin-top:4px}
.kosz-rach .razem dt{font-family:Manrope,sans-serif;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.kosz-rach .razem dd{font-size:24px;letter-spacing:-1px}
.kosz-nota{margin:0;font-size:14px;color:var(--muted);max-width:52ch}
.kosz-nota[hidden]{display:none}
.kosz-czas{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--muted);max-width:52ch}
.kosz-czas b{color:var(--ink);font-weight:800}
@media(max-width:560px){
  .kosz-poz{grid-template-columns:30px 1fr 34px}
  .kosz-poz.kosz-proj{grid-template-columns:30px 52px 1fr 34px}
  .kosz-poz .kosz-ile{grid-column:2/4}
  .kosz-kwota{grid-column:1/-1;text-align:left;display:flex;gap:10px;align-items:baseline}
  .kosz-rach{max-width:none}
}

/* ostrzezenie o braku zwrotu przy wlasnym projekcie */
.pperso{margin:-6px 0 16px;max-width:470px;font-size:13.5px;line-height:1.55;color:var(--muted);
  border-left:3px solid #d8a400;background:#fdf8ec;border-radius:0 10px 10px 0;padding:11px 14px}
.pperso[hidden]{display:none}
.privacy-check[hidden]{display:none!important}
@media(max-width:860px){.pperso{max-width:none}}

/* informacja o numerze zamowienia w tytule przelewu */
/* Ten blok stal wczesniej na kolorowym tle formularza i mial bialy tekst.
   Po zdjeciu ramy bialy na bialym znikal - teraz jest to zwykla notka
   w gramatyce reszty strony: jasne tlo i wloskowata kreska z boku. */
.platnosc-info{margin:16px 0 0;padding:14px 17px;background:var(--bg);
  border-left:2px solid var(--ink);border-radius:0 12px 12px 0;
  font-size:13.5px;line-height:1.6;color:var(--muted);text-align:left}
.platnosc-info b{color:var(--ink);font-weight:900}
.codalej-kroki{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;margin-top:40px;
  text-align:left;border-top:2px solid var(--ink)}
.codalej-kroki .krok{padding:22px 0;border-bottom:1px solid var(--line)}
.codalej-kroki .knr{display:block;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:1.4px;color:var(--muted);margin-bottom:9px}
.codalej-kroki b{display:block;font-size:17px;letter-spacing:-.3px;line-height:1.25;margin-bottom:6px}
.codalej-kroki span:not(.knr){display:block;font-size:14.5px;color:var(--muted);line-height:1.55}
@media(max-width:760px){
  .codalej-kroki{grid-template-columns:1fr;gap:0}
  .codalej-kroki .krok{padding:18px 0}
}

/* numer zamowienia po wyslaniu */
.nr-zam{display:inline-grid;justify-items:center;gap:5px;margin:32px auto 0;padding:22px 34px;
  border:2px solid var(--ink);border-radius:18px;background:#fff}
.nr-zam[hidden]{display:none}
.nr-zam-et{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.nr-zam b{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:clamp(24px,4.5vw,34px);
  font-weight:700;letter-spacing:1px;color:var(--ink);line-height:1.15}
.nr-zam-op{font-size:13.5px;color:var(--muted);max-width:40ch;line-height:1.5;margin-top:3px}
@media(max-width:560px){.nr-zam{padding:18px 20px;margin-top:26px}}

/* --- platnosc online na stronie "dziekujemy" --- */
.platnosc-box{display:grid;justify-items:center;gap:8px;max-width:520px;margin:26px auto 0;
  padding:26px 30px;border-radius:18px;background:var(--ink);color:#fff}
.platnosc-box[hidden]{display:none}
.pb-et{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;opacity:.65}
.platnosc-box b{font-size:clamp(30px,5.5vw,42px);font-weight:900;line-height:1.1;letter-spacing:-1.2px}
.pb-op{font-size:13.5px;opacity:.78;max-width:42ch;line-height:1.5}
.platnosc-box form{margin-top:8px}
.platnosc-box .btn.primary{background:#fff;color:var(--ink);border-color:#fff}
.pb-alt{font-size:12.5px;opacity:.6;max-width:42ch;line-height:1.5;margin-top:4px}
.platnosc-ok{display:grid;justify-items:center;gap:6px;max-width:520px;margin:26px auto 0;
  padding:20px 26px;border-radius:16px;border:2px solid var(--ink);background:#fff}
.platnosc-ok[hidden]{display:none}
.platnosc-ok b{font-size:16px;color:var(--ink)}
.platnosc-ok span{font-size:13.5px;color:var(--muted);line-height:1.5;max-width:44ch}
@media(max-width:560px){.platnosc-box{padding:22px 20px}}

/* --- pola dostawy w koszyku --- */
.dost-pola{margin-top:2px}
.dost-pola[hidden]{display:none}
.dost-pola .fine{display:block;margin-top:6px}
.dost-pola .fine a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){.przel{display:flex;width:100%}.przel button{flex:1 1 auto;text-align:center}}
/* --- rachunek na firme --- */
.fakt-pola{margin-top:12px}
.fakt-pola[hidden]{display:none}
.fakt-info{display:block;margin-top:7px;font-weight:500}
.fakt-info.ok{color:#0f7a52;font-weight:700}
.fakt-info.blad{color:#b00063;font-weight:700}
.dost-naglowek{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
  margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--line)}

/* --- licznik do darmowej dostawy --- */
.dostpasek{display:grid;gap:7px;max-width:420px;margin:18px 0 0}
.dostpasek[hidden]{display:none}
.dp-gora{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dp-gora span{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.dp-gora b{font-size:16px;font-weight:900;color:var(--ink);white-space:nowrap}
.dp-gora b[hidden]{display:none}
.dp-tor{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.dp-tor>span{display:block;height:100%;border-radius:999px;background:var(--g);
  transition:width .35s cubic-bezier(.4,0,.2,1)}
.dp-skala{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:11px;color:#8992a3}
.dostpasek.dp-gotowe .dp-gora span{color:#0a7d4b}
.dostpasek.dp-gotowe .dp-tor>span{background:#0a7d4b}

/* --- kod rabatowy --- */
.kod-box{display:grid;gap:7px;max-width:420px;margin:0 0 22px}
.kod-pole{display:flex;gap:8px}
.kod-pole input{flex:1 1 auto;min-width:0;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font:inherit;font-size:14px;background:#fff;color:var(--ink);
  text-transform:uppercase;letter-spacing:.6px}
.kod-pole input::placeholder{text-transform:none;letter-spacing:0;color:#9aa3b2}
.kod-pole button{flex:0 0 auto;border:1px solid var(--ink);background:var(--ink);color:#fff;
  border-radius:12px;padding:12px 18px;font:inherit;font-weight:900;font-size:14px;cursor:pointer}
.kod-pole button:disabled{opacity:.5;cursor:default}
.kod-info{font-size:13px;line-height:1.45;color:#b0004b}
.kod-info.ok{color:#0a7d4b}
.kod-info[hidden]{display:none}
.kod-zdejmij{font:inherit;font-size:13px;font-weight:800;background:none;border:0;padding:0;
  margin-left:8px;color:var(--muted);text-decoration:underline;cursor:pointer}
.kosz-rach #kw-rabat-rzad[hidden]{display:none}
.kosz-rach #kw-rabat{color:#0a7d4b}

/* --- adres docelowy przy produkcie --- */
.plink-box{margin:-8px 0 22px;max-width:470px}
.plink{display:block;width:100%;border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;background:#fff;color:var(--ink);font:inherit;font-size:15px}
.plink:hover,.plink:focus{border-color:var(--ink);outline:none}
.plink-info{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:var(--muted)}

/* --- odstapienie od umowy --- */
.uwaga{margin:26px 0 0;padding:16px 19px;border-radius:14px;background:#fff4f7;
  border:1px solid #ffd3df;color:#5d0030;font-size:14px;line-height:1.65;text-align:left;
  max-width:900px}
.uwaga b{font-weight:900;color:#43001f}
.uwaga a{color:#c51f79;text-decoration:underline;font-weight:800}
.odst-ok{display:grid;justify-items:center;gap:9px;max-width:560px;margin:0 auto;
  padding:34px 30px;border:2px solid var(--ink);border-radius:20px;background:#fff;text-align:center}
.odst-ok[hidden]{display:none}
.odst-ok b{font-size:22px;letter-spacing:-.5px}
.odst-ok span{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:44ch}
.odst-ok .btn{margin-top:10px}
.plin[hidden],.plinki [hidden]{display:none}
.pcel[hidden]{display:none}

/* --- gwarancja i opieka po zakupie ---
   Ta sama gramatyka co "co dalej": gruba kreska u gory, wlosowe pod kazda pozycja,
   etykieta krojem maszynowym. Zadnych kart ani wypelnien - strona ich nie uzywa. */
.gwar-lista{display:grid;grid-template-columns:1fr 1fr;gap:0 46px;margin-top:42px;
  text-align:left;border-top:2px solid var(--ink)}
.gwar-poz{padding:24px 0;border-bottom:1px solid var(--line)}
.gwar-poz .get{display:block;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:#b00063;margin-bottom:9px}
.gwar-poz b{display:block;font-size:17px;letter-spacing:-.3px;line-height:1.3;margin-bottom:7px}
.gwar-poz span:not(.get){display:block;font-size:14.5px;color:var(--muted);line-height:1.6}
.gwar-nota{max-width:640px;margin:30px 0 0;padding-left:16px;border-left:2px solid var(--ink);
  text-align:left;font-size:14.5px;line-height:1.65;color:var(--muted)}
.gwar-nota a{font-weight:800;color:var(--ink);text-decoration:underline}
@media(max-width:820px){.gwar-lista{grid-template-columns:1fr;gap:0}}

/* pasek nawigacji jest przyklejony - bez tego kotwica (#faq, #gwarancja)
   ustawia naglowek dokladnie pod nim i klient go nie widzi */
[id]{scroll-margin-top:96px}

/* --- kalkulator opinii ---
   Ta sama gramatyka co reszta: wlosowe kreski, etykiety krojem maszynowym,
   zero kart i wypelnien. Wyniki po prawej, zeby zmiana suwaka byla widoczna
   bez przewijania. */
.kalk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:0 56px;
  margin-top:42px;text-align:left;border-top:2px solid var(--ink)}
.kalk-pola{padding:26px 0 8px}
.kalk-pole{display:grid;gap:7px;margin-bottom:26px}
.kalk-pole>span,.kalk-suw>span{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;font-size:13.5px;font-weight:800;letter-spacing:0;color:var(--muted)}
.kalk-pole>span b,.kalk-suw>span b{font-size:15px;color:var(--ink);white-space:nowrap}
.kalk-pole input{width:170px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  background:#fff;color:var(--ink);font:inherit;font-size:17px;font-weight:800;
  font-variant-numeric:tabular-nums}
.kalk-pole input:focus{border-color:var(--ink);outline:none}
.kalk-suw{display:grid;gap:10px;margin-bottom:24px}
.kalk-suw input[type=range]{width:100%;accent-color:var(--ink);cursor:pointer}
.kalk-kontrola{margin:4px 0 0;padding-left:15px;border-left:2px solid var(--ink);
  font-size:14px;line-height:1.55;color:var(--ink);font-weight:800}
.kalk-wyniki{display:grid;align-content:start;padding-top:26px}
.kalk-w{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.kalk-w .ket{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.kalk-w b{font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:-1.4px;line-height:1;
  font-variant-numeric:tabular-nums}
.kalk-w:last-child b{color:#b00063}
.kalk-nota{max-width:720px;margin:28px 0 0;text-align:left;font-size:14px;line-height:1.65;
  color:var(--muted)}
.kalk-nota b{color:var(--ink)}
@media(max-width:820px){.kalk{grid-template-columns:1fr;gap:0}
  .kalk-wyniki{padding-top:6px;border-top:1px solid var(--line)}}

/* --- porownanie: kartka kontra tabliczka ---
   Tabela, a nie dwa panele - strona "Dlaczego?" ma juz wyzej uklad dwoch paneli
   i drugi taki sam wygladalby jak powielony szablon. */
.por{margin-top:42px;text-align:left;border-top:2px solid var(--ink)}
.por-w{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,1fr);
  gap:0 34px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.por-glowa{padding:14px 0 12px}
.por-glowa span{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.por-glowa .g3{color:#b00063}
.por-kryt{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--muted);line-height:1.5}
.por-a{font-size:15px;line-height:1.6;color:var(--muted)}
.por-b{font-size:15px;line-height:1.6;color:var(--ink);font-weight:800}
.por-nota{max-width:720px;margin:28px 0 0;padding-left:16px;border-left:2px solid var(--ink);
  text-align:left;font-size:14.5px;line-height:1.7;color:var(--muted)}
.por-nota b{color:var(--ink)}
@media(max-width:820px){
  .por-glowa{display:none}
  .por-w{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .por-kryt{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:#b00063}
  .por-a::before{content:"Kartka: ";font-weight:800;color:var(--muted)}
  .por-b::before{content:"Tabliczka: ";font-weight:800;color:#b00063}
}

/* --- ikona konta w pasku --- */
/* Stoi na lewo od przycisku wyceny. Kropka zapala sie dopiero po zalogowaniu -
   to jedyny slad sesji widoczny na wszystkich podstronach. */
/* Koszyk i konto stoja obok siebie po prawej stronie paska - na kazdej
   szerokosci, takze na telefonie, gdzie poziome menu jest ukryte. */
.nav-ikony{display:flex;align-items:center;gap:10px;flex:none}
.konto-link,.koszyk-link{position:relative;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;color:var(--ink);line-height:1;
  flex:none;border-radius:999px}
.konto-link{margin-right:14px}
.konto-link:hover,.koszyk-link:hover{background:var(--bg)}
.konto-link[aria-current="page"],.koszyk-link[aria-current="page"]{background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line)}
.kikona{display:block}
/* Na telefonie pasek ma tylko logo, dwie ikony i hamburgera. Bez tego
   justify-content:space-between rozrzuca je rowno i ladowalyby na srodku -
   maja stac przy hamburgerze, bo to razem jest "menu". */
@media(max-width:1399px){
  .nav-ikony{margin-left:auto}
  .konto-link{margin-right:2px}
}
.menu-mob .konto-mob,.menu-mob .koszyk-mob{display:flex;align-items:center;gap:11px}
.konto-link:hover{background:var(--bg)}
.konto-link[aria-current="page"]{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.kkropka{position:absolute;right:3px;top:4px;width:8px;height:8px;border-radius:999px;
  background:#00a06a;box-shadow:0 0 0 2px #fff}
.kkropka[hidden]{display:none}

/* --- panel klienta --- */
.kon-gosc,.kon-panel{margin-top:40px;text-align:left}
.kon-gosc[hidden],.kon-panel[hidden],.kon-czekaj[hidden]{display:none}
.kon-czekaj{margin-top:40px;text-align:left;color:var(--muted);font-size:15px}

.kon-przelacz{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:30px}
.kon-tab{font:inherit;font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);background:none;border:0;padding:0 0 13px;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.kon-tab.wybrany{color:var(--ink);border-bottom-color:var(--ink)}

.kon-form{display:grid;gap:17px;max-width:420px}
/* [hidden] przegrywa z display:grid - bez tej linii ukryty formularz nadal widac */
.kon-form[hidden]{display:none}
.kon-form-szer{max-width:620px;grid-template-columns:1fr 1fr}
.kon-pole{display:block}
.kon-pole>span{display:block;font-size:13.5px;font-weight:800;letter-spacing:0;
  color:var(--muted);margin-bottom:6px}
.kon-pole input{display:block;width:100%;font:inherit;color:var(--ink);background:#fff;
  border:0;border-bottom:1.5px solid var(--line);border-radius:0;padding:9px 2px}
.kon-pole input:focus{outline:0;border-bottom-color:var(--ink)}
.kon-pod{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
.kon-zgoda{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--muted)}
.kon-zgoda input{margin-top:3px;accent-color:var(--ink);flex:none}
.kon-zgoda a{text-decoration:underline}
.kon-form .btn{justify-self:start;margin-top:4px}
.kon-form-szer .btn,.kon-form-szer .kon-blad,.kon-form-szer .kon-ok{grid-column:1/-1}

.kon-blad,.kon-ok{margin:0;font-size:14px;line-height:1.55;padding-left:13px;
  border-left:2px solid #c2185b;color:#8a0f42}
.kon-ok{border-left-color:#00a06a;color:#00684a}
.kon-blad[hidden],.kon-ok[hidden]{display:none}

.kon-link{font:inherit;font-weight:800;font-size:14px;color:var(--ink);background:none;
  border:0;padding:0;cursor:pointer;text-align:left;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.kon-link:disabled{opacity:.45;cursor:default}
.kon-link-usun{color:#a3104f}

.kon-glowa{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  padding-bottom:18px;border-bottom:2px solid var(--ink)}
.kon-glowa .ket{display:block;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.kon-glowa b{font-size:19px;letter-spacing:-.3px}

.kon-dzial{margin-top:46px}
.kon-naglowek{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding-bottom:12px;border-bottom:2px solid var(--ink)}
.kon-naglowek h3{margin:0;font-size:21px;letter-spacing:-.6px}
.kon-lista{margin-top:2px}
.kon-poz{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:19px 0;border-bottom:1px solid var(--line)}
.kon-poz-tresc b{display:block;font-size:16px;letter-spacing:-.2px}
.kon-meta{display:block;margin-top:5px;font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.7;color:var(--muted);word-break:break-word}
.kon-poz-akcje{display:flex;gap:16px;align-items:center;flex:none}
.kon-pusto{margin:20px 0 0;color:var(--muted);font-size:15px;line-height:1.7;max-width:58ch}
.kon-nota{margin:16px 0 0;color:var(--muted);font-size:14px;line-height:1.7;max-width:62ch}
.kon-dzial .kon-form{margin-top:22px}

.kon-status{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);white-space:nowrap}
.kon-status-produkcja{color:#8a4b00;border-color:#f0d3ad}
.kon-status-wyslane{color:#00684a;border-color:#b6e2d0}
.kon-status-odebrane{color:#00684a;border-color:#b6e2d0}
.kon-status-anulowane{color:#a3104f;border-color:#f2c3d6}

/* Znaczniki przy pozycji zamowienia: czy jest gotowy plik do druku i czy kod
   QR jest juz wlasciwy. Male, ale musza byc czytelne na pierwszy rzut oka. */
.zn-rzad{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.zn{display:inline-flex;align-items:center;gap:5px;font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.zn::before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
.zn-ok{color:#137a45;border-color:#b6e2d0}      .zn-ok::before{background:#1b9e5a}
.zn-uwaga{color:#7a3c00;border-color:#f0d3ad}   .zn-uwaga::before{background:#ff7a00}
.zn-brak{color:#8d1240;border-color:#f2c3d6}    .zn-brak::before{background:#ff3f79}

.kon-dzial-konc{margin-top:58px}
.kon-dzial-konc .kon-link-usun{margin-top:16px}

@media(max-width:620px){
  .kon-form-szer{grid-template-columns:1fr}
  .kon-poz{flex-direction:column;gap:12px}
  .kon-poz-akcje{align-self:flex-start}
  .kon-glowa{flex-direction:column;align-items:flex-start;gap:12px}
}
.adm-status{font:inherit;font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:6px 10px;cursor:pointer}
.kon-naglowek .ket{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.kon-glos{margin:34px 0 0;text-align:left;font-size:15px;line-height:1.6;padding-left:14px}
.kon-nowehaslo{margin-top:40px;text-align:left}
.kon-nowehaslo[hidden]{display:none}

/* --- producent i bezpieczenstwo (GPSR) --- */
.bezp{margin-top:40px;border-top:2px solid var(--ink);text-align:left}
.bezp-blok{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:0 34px;
  padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.bezp-et{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.bezp-tr{min-width:0}
.bezp-tresc{margin:0 0 10px;font-size:15.5px;line-height:1.75;color:var(--muted)}
.bezp-tresc:last-child{margin-bottom:0}
.bezp-tresc b{color:var(--ink)}
.bezp-tresc a{text-decoration:underline;text-underline-offset:2px}
.bezp-cicho{font-size:14.5px}
.bezp-lista{margin:0;padding-left:19px;color:var(--muted);font-size:15.5px;line-height:1.75}
.bezp-lista li{margin:0 0 9px}
.bezp-lista li:last-child{margin-bottom:0}
.bezp-lista b{color:var(--ink)}
.bezp-nota{max-width:720px;margin:26px 0 0;padding-left:16px;border-left:2px solid var(--ink);
  text-align:left;font-size:14.5px;line-height:1.7;color:var(--muted)}
.bezp-nota b{color:var(--ink)}
.bezp-nota a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:760px){
  .bezp-blok{grid-template-columns:1fr;gap:10px;padding:22px 0}
}

/* --- WhatsApp: pływający link w prawym dolnym rogu --- */
/* z-index niżej niż menu mobilne (29) i pasek (30/31) - przy otwartym menu
   i tak go chowamy, ale bez tego wisiałby nad listą pozycji */
.wa{position:fixed;right:18px;z-index:28;display:inline-flex;align-items:center;gap:9px;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  padding:11px 17px 11px 14px;border-radius:999px;background:#0f7a52;color:#fff;
  font-size:14px;font-weight:900;letter-spacing:-.1px;
  box-shadow:0 10px 26px #0716332e;transition:transform .16s}
.wa:hover{transform:translateY(-2px)}
.wa svg{display:block;flex:none}
html.menu-otwarte .wa{display:none}
/* Na telefonie sam znaczek: pigulka z napisem zaslaniala przycisk "Poprosz
   o wycene" w hero. Kolo 48 px to dolny prog wygodnego dotkniecia. */
@media(max-width:560px){
  .wa{right:14px;bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    width:48px;height:48px;padding:0;justify-content:center;gap:0}
  .wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wa svg{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){.wa{transition:none}}

/* --- pole na plik w formularzu wyceny --- */
.form label.plik-pole{display:block}
.plik-pole input[type=file]{display:block;width:100%;margin-top:6px;font:inherit;font-weight:500;font-size:13.5px;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.plik-pole input[type=file]::file-selector-button{font:inherit;font-weight:800;font-size:13px;
  margin-right:12px;padding:8px 13px;border:0;border-radius:9px;background:var(--ink);color:#fff;cursor:pointer}
.plik-info{display:block;margin-top:8px;font-size:13px;line-height:1.6;color:var(--muted)}

/* .wym sluzy do dwoch rzeczy naraz: wymiarow ("15 × 21 cm" - krój maszynowy
   jest tam na miejscu) i etykiety pola "Ilość sztuk", ktora jest zwyklym
   zdaniem. Etykieta wraca do Manrope, wymiary zostaja. */
.pkup .wym>span{font-family:Manrope,Inter,system-ui,sans-serif;font-size:13.5px;
  font-weight:800;letter-spacing:0;color:var(--muted)}

/* --- formularz bez ramy --- */
/* Sekcja z formularzem trzyma sie tej samej gramatyki co reszta strony:
   kicker, nagłówek, kreska, treść. Kreska nad polami zastępuje dawną ramkę. */
.formbox{text-align:left}
.formbox .kicker{color:#b00063}
.formbox h2{margin:12px 0 14px}
/* .sub ma margin:auto (wysrodkowanie w innych sekcjach) - bez wlasnego
   odstepu dolnego kreska nad formularzem wchodzila na tekst */
.formbox .sub{margin:0 0 38px;max-width:62ch}
.formbox .form{margin:0;max-width:820px;padding-top:30px;border-top:2px solid var(--ink)}
.formbox.center{text-align:left}
.form-grid{gap:20px 26px}

/* --- zamykający blok "Co dalej" --- */
.ctablok{margin-top:10px;background:var(--bg);border-top:2px solid var(--ink);
  padding:52px 44px;text-align:left}
.ctablok .kicker{color:#b00063}
.ctablok h2{margin-top:10px}
@media(max-width:560px){.ctablok{padding:36px 20px}}

/* --- przyciski: białe tło, podświetlenie pod kursorem --- */
/* Wcześniej żaden przycisk poza granatowym nie reagował na najechanie. */
.btn{transition:background .16s,color .16s,border-color .16s,box-shadow .16s,transform .16s}
.btn.outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.outline:hover{border-color:var(--ink);background:var(--bg);
  box-shadow:0 8px 20px #0716331a;transform:translateY(-1px)}
.btn.primary:hover{background:#12294f;box-shadow:0 12px 28px #07163330;transform:translateY(-1px)}
.btn:active{transform:none}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}
.white-cta{border:1px solid var(--line)!important}
.white-cta:hover{border-color:var(--ink)!important;background:var(--bg)!important;
  box-shadow:0 10px 24px #0716331f;transform:translateY(-1px)}

/* Aktywna zakładka na koncie — ta sama kreska w kolorach logo co w menu.
   border-bottom nie przyjmuje gradientu, więc rysuje ją osobny pasek. */
.kon-tab{position:relative}
.kon-tab.wybrany{border-bottom-color:transparent}
.kon-tab.wybrany::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--g)}

/* --- wybor paczkomatu z mapy --- */
.pm-pole>label{display:block}
.pm-wiersz{display:flex;gap:10px;align-items:stretch;margin-top:6px}
.pm-wiersz input{margin-top:0!important;flex:1 1 auto;min-width:0;text-transform:uppercase}
.pm-otworz{display:inline-flex;align-items:center;gap:8px;flex:none;padding:0 16px;border-radius:12px;
  border:1px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.pm-otworz:hover{background:var(--ink);color:#fff}
.pm-wybrany{display:block;margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--ink);
  background:var(--bg);border-left:2px solid #0f7a52;border-radius:0 10px 10px 0;padding:9px 12px}
.pm-wybrany.blad{border-left-color:#b00063}
.pm-wybrany[hidden]{display:none}
.pm-okno{width:min(980px,calc(100vw - 24px));height:min(720px,calc(100vh - 24px));max-width:none;max-height:none;
  padding:0;border:0;border-radius:18px;box-shadow:0 30px 80px #0716334d;overflow:hidden;color:var(--ink)}
.pm-okno[open]{display:flex;flex-direction:column}
.pm-okno::backdrop{background:#07163366}
.pm-gora{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.pm-gora b{font-size:17px}
.pm-zamknij{width:40px;height:40px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:var(--ink);border-radius:10px}
.pm-zamknij:hover{background:var(--bg)}
.pm-szukaj{display:flex;gap:8px;padding:12px 18px 0;flex-wrap:wrap}
.pm-szukaj input{flex:1 1 220px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font:inherit;font-size:15px}
.pm-szukaj input:focus{outline:none;border-color:var(--ink)}
.pm-szukaj button{border:1px solid var(--ink);border-radius:12px;padding:0 15px;min-height:44px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;background:var(--ink);color:#fff}
.pm-szukaj button#pm-gps{background:#fff;color:var(--ink)}
.pm-szukaj button[hidden]{display:none}
.pm-info{margin:8px 18px 10px;font-size:13px;color:var(--muted)}
.pm-uklad{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 330px;border-top:1px solid var(--line)}
.pm-mapa{min-height:0;height:100%;background:#eef0f4}
.pm-lista{list-style:none;margin:0;padding:0;overflow-y:auto;border-left:1px solid var(--line)}
.pm-lista button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;
  padding:12px 16px;font:inherit;color:var(--ink);cursor:pointer}
.pm-lista button:hover,.pm-lista button:focus-visible{background:var(--bg)}
.pm-lista b{display:block;font-size:14.5px}
.pm-lista span{display:block;font-size:13px;color:#4d5a70;line-height:1.45;margin-top:2px}
.pm-lista small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
@media(max-width:760px){
  .pm-okno{width:100vw;height:100dvh;border-radius:0}
  .pm-uklad{grid-template-columns:1fr;grid-template-rows:42% 1fr}
  .pm-lista{border-left:0;border-top:1px solid var(--line)}
  .pm-wiersz{flex-direction:column}
  .pm-otworz{justify-content:center;min-height:46px}
}
/* naklejka: wybor materialu (folia / magnes) */
.pmat-info{margin:9px 0 0;font-size:13px;line-height:1.55;color:var(--muted);max-width:46ch}
.pmat-info[hidden]{display:none}

/* --- "znajdziemy link za Ciebie" --- */
.plink-szuk{font:inherit;font-weight:800;color:var(--ink);background:none;border:0;padding:0;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pfirma-box{margin-top:12px}
.pfirma-box[hidden]{display:none}
.pfirma-lab{display:block}

/* --- zestawy dla branz --- */
.zestawy{display:grid;grid-template-columns:1fr 1fr;gap:0 46px;margin-top:40px;border-top:2px solid var(--ink);text-align:left}
.zest{padding:30px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.zest h3{font-size:clamp(21px,2.2vw,26px);letter-spacing:-.03em;line-height:1.1;margin:9px 0 8px}
.zest>p{color:#526078;margin:0 0 16px;font-size:15.5px;line-height:1.55;max-width:52ch}
.zest-sklad{list-style:none;padding:0;margin:0 0 20px;border-top:1px solid var(--line)}
.zest-sklad li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:700}
.zest-sklad li b{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:13px;margin-right:4px}
.zest-sklad li span{font-weight:500;color:var(--muted)}
.zest .pperso{margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.zest .pperso[hidden]{display:none}
.zest .plink-box{margin:6px 0 20px;max-width:none}
.zest-kup{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:18px;margin-top:auto}
/* Bez przekreslenia: przekreslona liczba czyta sie jako "dawna cena", a zestaw
   nigdy tyle nie kosztowal - to suma dzisiejszych cen osobnych produktow. */
.zest-przed{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:860px){.zestawy{grid-template-columns:1fr}}

/* --- gwarancja efektu --- */
.gwar-efekt{display:grid;gap:7px;margin-top:38px;padding:26px 30px;border-radius:18px;background:var(--ink);color:#fff;text-align:left}
.gwar-efekt .get{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;opacity:.7}
.gwar-efekt b{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.03em;line-height:1.15}
.gwar-efekt span:not(.get){font-size:15px;line-height:1.6;opacity:.85;max-width:70ch}
.gwar-efekt a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:800}
@media(max-width:560px){.gwar-efekt{padding:22px 20px}}

/* --- poradnik "jak zbierac opinie" --- */
.poradnik .jakh2{margin:12px 0 15px}
.por-spis{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 30px;margin:34px 0 10px;padding:20px 0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--line);text-align:left}
.por-spis b{grid-column:1/-1;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:11.5px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.por-spis a{font-size:15px;font-weight:700;padding:4px 0}
.por-spis a:hover{text-decoration:underline}
.por-tresc{max-width:760px;text-align:left}
.por-tresc h2{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.03em;line-height:1.1;margin:46px 0 14px;scroll-margin-top:96px}
.por-tresc p,.por-tresc li{font-size:16.5px;line-height:1.7;color:#3f4b61}
.por-tresc b{color:var(--ink)}
.por-tresc ul{padding-left:20px;margin:0 0 12px}
.por-tresc li{margin:8px 0}
.por-tresc a{text-decoration:underline;text-underline-offset:2px;font-weight:700}
.por-formaty{width:100%;border-collapse:collapse;margin:20px 0 24px;font-size:15px;line-height:1.6}
.por-formaty caption{text-align:left;font-weight:700;color:var(--ink);padding-bottom:12px}
.por-formaty th,.por-formaty td{text-align:left;vertical-align:top;padding:16px;border-bottom:1px solid var(--line)}
.por-formaty thead th{background:var(--bg);color:var(--ink);border-top:2px solid var(--ink)}
.por-formaty tbody th{width:34%;font-weight:700;color:var(--ink)}
.por-formaty tbody th span{display:block;margin-top:4px;font-size:14px;font-weight:400;color:#3f4b61}
.por-formaty td{color:#3f4b61}
@media(max-width:560px){.por-formaty{font-size:14px}.por-formaty th,.por-formaty td{padding:12px 8px}.por-formaty tbody th{width:40%}.por-formaty tbody th span{font-size:13px}}
.por-cytaty{display:grid;gap:10px;margin:16px 0}
.por-cytaty p{margin:0;padding:14px 18px;border-left:3px solid #ff5a18;background:var(--bg);border-radius:0 12px 12px 0;
  font-weight:700;color:var(--ink)}
.por-nie li::marker{content:"✕  ";color:#c51f79;font-weight:900}
.por-kontakt{margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
@media(max-width:860px){.por-spis{grid-template-columns:1fr}}
.por-baner{display:grid;justify-items:center;gap:7px;max-width:560px;margin:30px auto 0;padding:24px 28px;
  border:1px solid var(--line);border-radius:18px;background:var(--bg)}
.por-baner .get{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.por-baner b{font-size:19px;letter-spacing:-.3px}
.por-baner span:not(.get){font-size:14px;color:var(--muted);line-height:1.55;max-width:46ch}
.por-baner .btn{margin-top:8px}

/* --- metody platnosci --- */
.metody{display:grid;gap:8px;margin-top:14px}
.metody[hidden]{display:none}
.metody-et{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.metody-ikony{display:flex;flex-wrap:wrap;gap:8px}
.metoda{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px;font-weight:700}
.metoda img{height:26px;width:auto;display:block}
.pb-kanaly{display:grid;gap:10px;width:100%;max-width:340px;margin:4px auto 10px}
.pb-kanaly[hidden]{display:none}
.pb-kanal{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 18px;border-radius:14px;
  border:0;background:#fff;color:var(--ink);font:inherit;font-weight:900;font-size:16px;cursor:pointer}
.pb-kanal img{height:30px;width:auto;display:block}
.pb-kanal:hover{box-shadow:0 0 0 3px #ffffff55}
.platnosc-box .pb-kanaly:not([hidden]) + .btn.primary{background:transparent;color:#fff;border-color:#ffffff66}

/* --- panel wlasciciela: kody NFC/QR --- */
.tag-szukaj{margin:34px 0 4px;max-width:420px}
.tag-kod{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:14px;letter-spacing:1px;
  padding:2px 7px;border:1px solid var(--line);border-radius:7px;margin-right:6px}
.tag-cel{word-break:break-all}
.tag-cel a{text-decoration:underline;text-underline-offset:2px}
.tag-akcje{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.tag-stat{margin-top:12px}
.tag-stat[hidden]{display:none}
.tag-wykres{display:flex;align-items:flex-end;gap:2px;height:70px;margin-top:10px;max-width:520px;
  border-bottom:1px solid var(--line)}
.tag-wykres span{flex:1;background:var(--ink);border-radius:2px 2px 0 0;min-height:2px}
.tag-wykres span.zero{background:var(--line)}
.tag-poz .kon-meta b{display:inline;font-size:inherit;letter-spacing:0}

/* --- panel klienta: produkty i skany --- */
.moj-kod{padding:22px 0;border-bottom:1px solid var(--line)}
.mk-gora{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mk-gora b{display:block;font-size:17px;letter-spacing:-.2px}
.mk-liczby{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.mk-liczby div{border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.mk-liczby b{display:block;font-size:24px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.mk-liczby span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.mk-wykres{max-width:none;margin-top:14px}
.mk-wykres[hidden]{display:none}
.mk-szczegoly{margin-top:8px}
.mk-cel{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-top:12px}
.mk-cel b{color:var(--ink);word-break:break-all}
.mk-form{margin-top:12px;display:grid;gap:10px;max-width:520px}
.mk-form[hidden]{display:none}
.mk-przyciski{display:flex;align-items:center;gap:16px}
.kon-pwa{display:grid;gap:6px;margin-top:22px;padding:16px 18px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.kon-pwa[hidden]{display:none}
.kon-pwa span{font-size:13.5px;color:var(--muted);line-height:1.6}
.kon-pwa .btn{justify-self:start;margin-top:4px}
.kon-pwa .btn[hidden]{display:none}
@media(max-width:560px){.mk-liczby{grid-template-columns:1fr 1fr}.mk-liczby div:last-child{grid-column:1/-1}}
.kon-raport{margin-top:18px}.kon-raport[hidden]{display:none}

/* ---------- panel wlasciciela (panel.html) ---------- */
.pn-karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:26px 0 34px}
.pn-karta{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--tlo2,transparent)}
.pn-karta b{display:block;font-size:26px;letter-spacing:-.6px;line-height:1.1}
.pn-karta-t{display:block;margin:6px 0 2px;font-size:14px}
.pn-filtry{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;margin-bottom:22px}
.pn-filtry .kon-pole{flex:1 1 240px;margin:0}
.pn-filtry .kon-pole-waski{flex:0 1 200px}
.pn-szczegoly{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pn-siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 24px}
.pn-w span{display:block;font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.pn-w b{display:block;font-size:15px;font-weight:600;word-break:break-word}
.pn-poz-lista{margin-top:16px;display:grid;gap:10px}
.pn-pozycja{border-left:2px solid var(--line);padding-left:12px}
.pn-pozycja b{display:block;font-size:15px}
.pn-pliki{margin-top:14px;display:flex;flex-wrap:wrap;gap:14px}
.pn-pliki a{font-size:14px}
.pn-akcje{margin-top:18px;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.pn-akcje .kon-pole{margin:0;flex:1 1 200px}
.pn-akcje .btn{flex:none}
@media (max-width:700px){
  .pn-karta b{font-size:22px}
  .pn-akcje .btn{width:100%}
}

/* ---------- program partnerski ---------- */
.part-karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:28px 0 36px}
.part-karta{border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.part-karta .ket{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.part-karta b{display:block;font-size:44px;line-height:1;letter-spacing:-1.5px;margin:8px 0 10px}
.part-karta p{margin:0 0 10px;font-size:15px}
.part-zasady{margin:18px 0 34px;padding-left:22px;max-width:760px}
.part-zasady>li{margin-bottom:12px}
.part-zasady ul{margin:8px 0 0;padding-left:20px}
.part-zasady ul li{margin-bottom:6px}
@media (max-width:700px){ .part-karta b{font-size:36px} }

/* --- program partnerski: konkretne kwoty i drabinka stawek --- */
.part-ile{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:0 0 38px}
.part-ile-blok{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:var(--bg)}
.part-ile-blok .ket{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#ad0061}
.part-ile-blok .sub{margin:8px 0 14px;font-size:14.5px}
.part-ile-blok .wskazowka{margin:14px 0 0}
.part-kwoty,.part-drabina{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.part-kwoty li,.part-drabina li{display:flex;align-items:baseline;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.part-kwoty li:last-child,.part-drabina li:last-child{border-bottom:0;padding-bottom:0}
.part-kwoty b,.part-drabina b{flex:none;min-width:88px;font-size:20px;letter-spacing:-.5px}
.part-kwoty span,.part-drabina span{font-size:14.5px;color:var(--muted)}
@media (max-width:700px){ .part-kwoty b,.part-drabina b{min-width:76px;font-size:18px} }

/* Public guide index: readable editorial list, no horizontal overflow. */
.por-lista{list-style:none;padding:0;margin:20px 0 36px}.por-lista>li{border-top:1px solid #dfe3eb;padding:22px 0;margin:0}.por-lista>li>a{font-size:clamp(19px,2vw,23px);font-weight:750;line-height:1.35}.por-lista>li>p{margin:9px 0 0}

/* Mobile checkout: readable fields and comfortable touch targets. */
@media(max-width:560px){
  .kosz-ile button,.kosz-usun{width:44px;height:44px}
  .kosz-poz{grid-template-columns:30px minmax(0,1fr) 44px}
  .kosz-poz.kosz-proj{grid-template-columns:30px 52px minmax(0,1fr) 44px}
  .kod-pole input,.pm-szukaj input{font-size:16px}
  .kosz-kwoty,.kosz-dost,.kod-box{grid-template-columns:minmax(0,1fr)}
}

/* Explicit mobile placement prevents the remove button from displacing the product title. */
@media(max-width:560px){
  .kosz-poz.kosz-proj{grid-template-columns:52px minmax(0,1fr) 44px}
  .kosz-poz .kosz-nr{grid-column:1;grid-row:1;align-self:start;padding-top:10px}
  .kosz-poz.kosz-proj .kosz-nr{display:none}
  .kosz-poz .kosz-mini{grid-column:1;grid-row:1;align-self:start}
  .kosz-poz .kosz-naz{grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere}
  .kosz-poz .kosz-naz b{font-size:16px;line-height:1.4}
  .kosz-poz .kosz-usun{grid-column:3;grid-row:1;align-self:start}
  .kosz-poz .kosz-ile,.kosz-poz.kosz-proj .kosz-ile{grid-column:2/4;grid-row:2}
  .kosz-poz .kosz-kwota{grid-column:2/4;grid-row:3;flex-wrap:wrap}
}

/* Purchase and quote routes in public guides. */
.por-sciezka{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin:24px 0;padding:16px 0;border-block:1px solid var(--line,#e6e9ef);font-size:15px;line-height:1.6}
.por-sciezka span{color:#5c6880}.por-sciezka a{font-weight:700;text-decoration:underline;text-underline-offset:4px}
.cd-zakup{align-items:start}.por-akcje{display:flex;flex-direction:column;gap:12px;flex-shrink:0;max-width:100%}.por-akcje .btn{white-space:normal;text-align:center}
.wycena-kontekst{margin:20px 0;padding:16px 20px;border-left:3px solid #7209b7;background:#f7f8fb;text-align:left;font-size:15px;line-height:1.6}
@media(max-width:680px){.por-sciezka{align-items:flex-start;flex-direction:column;gap:0}.por-sciezka a{display:inline-flex;align-items:center;min-height:44px}.cd-zakup{display:block}.por-akcje{margin-top:24px}.por-akcje .btn{width:100%;box-sizing:border-box}}


/* --- wycena: co klient dostaje, zanim wypelni formularz --- */
.wyc-obietnice{list-style:none;margin:22px auto 26px;padding:0;max-width:640px;
  display:grid;gap:12px;text-align:left}
.wyc-obietnice li{display:flex;flex-direction:column;gap:2px;padding:12px 16px;
  border:1px solid var(--line);border-radius:14px;background:#fff}
.wyc-obietnice b{font-size:15px}
.wyc-obietnice span{font-size:13.5px;color:var(--muted);line-height:1.5}
/* Wariant na ciemnym tle. Kiedys .formbox mial ciemne tlo i te trzy reguly
   pasowaly - po zmianie na biale robily bialy tekst na bialym i trzy obietnice
   znikaly z /wycena. Zostaja pod wlasna klasa, ktorej nikt dzis nie uzywa,
   ale ktora nie zapali sie przypadkiem. */
.wyc-ciemne .wyc-obietnice li{background:#ffffff14;border-color:#ffffff2e}
.wyc-ciemne .wyc-obietnice b{color:#fff}
.wyc-ciemne .wyc-obietnice span{color:#ffffffc7}
@media(min-width:760px){.wyc-obietnice{grid-template-columns:repeat(3,1fr)}}

/* Tabele cennika. Przy 390 px nie mieszcza sie w szerokosc - dlatego przewijaja
   sie wewnatrz wlasnej ramki, a nie razem z cala strona (straznik zglosilby
   poziomy scroll). Pierwsza kolumna zostaje w miejscu, zeby przy przewijaniu
   bylo widac, o ktory produkt chodzi. */
.cen-tabela{margin:22px 0;border:1px solid var(--line);border-radius:18px;background:#fff;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cen-tabela table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px}
.cen-tabela caption{caption-side:top;text-align:left;padding:16px 18px 6px;font-size:13px;font-weight:900;letter-spacing:.4px;color:var(--muted)}
.cen-tabela th,.cen-tabela td{padding:12px 16px;text-align:right;border-top:1px solid var(--line);white-space:nowrap}
.cen-tabela thead th{text-align:right;font-size:12px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);border-top:0}
.cen-tabela thead th:first-child,.cen-tabela tbody th{text-align:left;position:sticky;left:0;background:#fff;white-space:normal}
.cen-tabela tbody th{font-weight:900;min-width:180px}
.cen-tabela tbody tr:hover td,.cen-tabela tbody tr:hover th{background:var(--bg)}
.cen-wariant{display:block;font-size:13px;font-weight:700;color:#b00063}
.cen-opis{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.cen-przed{color:var(--muted);text-decoration:line-through}
@media(max-width:560px){.cen-tabela table{font-size:14px}.cen-tabela th,.cen-tabela td{padding:10px 12px}.cen-tabela tbody th{min-width:150px}}

/* Dodaj do koszyka wygladalo dokladnie tak samo jak sasiednie odnosniki
   pomocnicze: kreska i tekst, 22 px wysokosci na telefonie. Na karcie
   produktu to jedyna akcja, ktora konczy sie sprzedaza - musi wygladac
   jak przycisk i dac sie trafic kciukiem (48 px to minimum, ktore da sie
   nacisnac bez celowania). Reszta motywu .plin zostaje bez zmian. */
.plin.kosz-dodaj{justify-content:center;gap:0;min-height:48px;padding:13px 24px;
  border-radius:14px;background:var(--ink);color:#fff;border:1px solid transparent;
  box-shadow:0 10px 24px #0716331f;cursor:pointer;font-size:16px;
  transition:background .15s,box-shadow .15s}
.plin.kosz-dodaj s{display:none}
.plin.kosz-dodaj:hover{background:#0d2450;box-shadow:0 14px 30px #07163329}
.plin.kosz-dodaj:active{transform:translateY(1px)}
.plin.kosz-dodaj.dodany{background:#0b7a45;box-shadow:0 10px 24px #0b7a4533}
/* Na telefonie przycisk na calą szerokosc - kciuk trafia wszedzie.
   Na duzym ekranie tak szeroki pas wyglada jak baner, wiec zostaje
   przy swojej szerokosci z sensownym minimum. */
.plin.kosz-dodaj{min-width:240px}
@media(max-width:560px){.plin.kosz-dodaj{align-self:stretch;width:100%;min-width:0}}

/* --- mniej ruchu, gdy system o to prosi --- */
/* Fokus klawiatury jest juz obsluzony w _css_wspolne.css i _css_wzory.css -
   nie dokladamy drugiego zestawu obwodek, bo mialyby inny kolor.
   Ruch byl natomiast wylaczany pojedynczo (burger, przycisk WhatsApp, .btn,
   przewijanie), wiec kazdy nowy animowany element trzeba bylo pamietac.
   Ta regula obejmuje wszystkie, takze te, ktore dopiero powstana. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .plin:hover s,.plin.dodany s{width:26px}
  .plin.kosz-dodaj:active{transform:none}
}

/* Opinie w Google w karcie produktu. Liczba, ktora klienta naprawde obchodzi -
   skany sa tylko wyjasnieniem, skad sie wziela. Sekcja pojawia sie wylacznie
   dla kodow z przypisanym miejscem w Google. */
.mk-opinie{margin:14px 0 0;padding:14px 16px;border:1px solid var(--line);
  border-radius:14px;background:var(--bg)}
.mko-gora{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:6px}
.mko-liczby{display:flex;align-items:baseline;gap:9px}
.mko-liczby b{font-size:30px;line-height:1;letter-spacing:-.03em}
.mko-liczby span{color:var(--muted);font-size:14px}
.mko-zmiana{margin:8px 0 0;font-weight:900;color:#0b7a45}
.mko-zmiana.mko-zero{color:var(--muted);font-weight:700}
.mk-opinie .kon-meta{margin:4px 0 0}

/* --- podmenu "Produkty" ---
   Komputer: rozwija sie po najechaniu albo po wejsciu klawiatura (focus-within).
   Most z paddingu nad lista, zeby kursor nie "spadal" w szczeline miedzy
   napisem a lista. Telefon: przycisk rozwija liste w panelu menu. */
.ma-pod{position:relative;display:flex;align-items:center}
.ma-pod>a{display:inline-flex;align-items:center;gap:5px}
.pod-strz{flex:none;transition:transform .16s ease}
.ma-pod:hover .pod-strz,.ma-pod:focus-within .pod-strz{transform:rotate(180deg)}
.podmenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:18px;
  opacity:0;visibility:hidden;transition:opacity .14s ease,visibility 0s linear .14s;z-index:40}
.ma-pod:hover .podmenu,.ma-pod:focus-within .podmenu{opacity:1;visibility:visible;transition:opacity .14s ease}
.podmenu-in{min-width:260px;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 44px #0716331f;padding:8px;display:flex;flex-direction:column}
.podmenu a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;
  font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap}
.podmenu a small{font-size:12px;font-weight:500;color:var(--muted)}
.podmenu a:hover,.podmenu a:focus-visible{background:var(--bg)}
.podmenu a.tu{color:#ad0061}
.podmenu a:last-child{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;padding-top:12px}
/* lista bez pozycji zbiorczej na koncu - kreska nie ma czego oddzielac */
.podmenu-in.bez-stopki a:last-child{margin-top:0;border-top:0;border-radius:10px;padding-top:10px}
/* podkreslenie z paska nie dotyczy pozycji w liscie */
.links .podmenu a::after{content:none}
/* gdy kursor jest w podmenu, podkreslony zostaje napis "Produkty" */
.links .ma-pod:hover>a::after{opacity:1}

.mob-pod-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:17px 2px;font:inherit;font-size:18px;font-weight:800;color:var(--ink);background:none;
  border:0;border-bottom:1px solid var(--line);cursor:pointer;text-align:left}
.mob-pod.tu .mob-pod-btn{color:#ad0061}
.mob-pod-btn .pod-strz{width:14px;height:10px}
.mob-pod-btn[aria-expanded="true"] .pod-strz{transform:rotate(180deg)}
.mob-pod-lista{display:flex;flex-direction:column;padding:4px 0 8px 14px;border-bottom:1px solid var(--line)}
.mob-pod-lista[hidden]{display:none}
.menu-mob .mob-pod-lista a{padding:12px 2px;font-size:16px;font-weight:700;border-bottom:0;
  display:flex;flex-direction:column;gap:1px}
.menu-mob .mob-pod-lista a small{font-size:12.5px;font-weight:500;color:var(--muted)}

/* --- podstrona produktu --- */
.okruszki{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin:0 0 18px}
.okruszki a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.okruszki [aria-current]{color:var(--ink);font-weight:700}
.prod-gora .katalog2{margin-top:30px}
.pw-link{color:inherit;text-decoration:none}
.pw-link:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.inne-prod{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.inny-prod{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);
  border-radius:16px;background:#fff;transition:border-color .15s}
.inny-prod:hover{border-color:var(--ink)}
.inny-prod img{width:72px;height:72px;object-fit:cover;border-radius:10px;flex:none}
.inny-prod b{display:block;font-size:15px}
.inny-prod small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
@media(max-width:900px){.inne-prod{grid-template-columns:1fr}}

/* --- dostepnosc: wspolne dla wszystkich stron ---
   Obwodka przy poruszaniu sie klawiatura: wyrazna, w kolorze marki. Tylko
   :focus-visible, wiec klikniecie myszka niczego nie obrysowuje. */
:focus-visible{outline:3px solid #ff5a18;outline-offset:3px}
a:focus-visible,button:focus-visible{border-radius:6px}
/* Cele dotyku min. 24 px (WCAG 2.2, 2.5.8): linki w stopce mialy 19 px,
   pola wyboru 13 px. */
.footer a{display:inline-block;padding:5px 0}
.footer .mdane a{padding:5px 0}
.privacy-check input[type="checkbox"]{width:20px!important;height:20px!important;flex:none;accent-color:#071633;margin-top:1px!important}
/* Pola miały lokalne outline:none, które przykrywało wspólny fokus. */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a94216!important;outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
.form input.plik-ukryty[hidden]{display:none!important}

/* Detale po audycie: klawiatura, czytelne kotwice i długie dane klientów. */
.skip-link{position:fixed;left:16px;top:12px;z-index:1000;background:#071633;color:#fff;padding:12px 18px;border-radius:12px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
main:focus{outline:none}
section[id],details[id],.grupa[id]{scroll-margin-top:100px}
.marka-nazwa{white-space:nowrap}
.pn-w b,.kon-meta,.st-card p,.st-card h3{overflow-wrap:anywhere;min-width:0}
@media(max-width:600px){.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea,.kon-pole input,.kon-pole select{font-size:16px}}

.tn-mfa{border:0;border-radius:20px;padding:28px;max-width:480px;width:calc(100% - 32px);color:#111d36;box-shadow:0 24px 80px #111d3640}.tn-mfa::backdrop{background:#111d3680}.tn-mfa label{display:block;margin:16px 0}.tn-mfa input{display:block;width:100%;box-sizing:border-box;padding:12px;font-size:16px}.tn-mfa p{overflow-wrap:anywhere;line-height:1.6}.tn-mfa button{margin:8px 8px 0 0}

.tn-mfa [hidden]{display:none!important}

/* PageSpeed: etykiety kontaktu i linki w akapitach muszą być czytelne. */
.mdane .met{opacity:1;color:inherit}
.hero-help a,.app-release-note a{text-decoration:underline;text-underline-offset:4px}

/* Consent stays compact, readable and equally easy to refuse or accept. */
.tn-consent[hidden],.tn-consent-settings[hidden]{display:none!important}
.tn-consent{position:fixed;bottom:16px;left:16px;z-index:1000;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:22px;background:#fff;color:#071633;border:1px solid #cbd2df;border-radius:16px;box-shadow:0 8px 36px #07163324;font:14px/1.55 Manrope,system-ui,sans-serif}
.tn-consent strong{font-size:17px}.tn-consent p{margin:8px 0;color:#46546c}.tn-consent a{text-decoration:underline;color:#49328b}
.tn-consent-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.tn-consent-actions button{flex:1;min-height:44px;border:1px solid #071633;background:#fff;color:#071633;padding:10px 12px;border-radius:8px;font:700 13px/1.4 Manrope,system-ui,sans-serif;cursor:pointer}
.tn-consent-actions button:hover{background:#f1f3f7}
.tn-consent button:focus-visible,.tn-consent-settings:focus-visible{outline:3px solid #8d19dd;outline-offset:3px}
.tn-consent-settings{font:inherit;color:inherit;background:none;border:0;padding:5px 0;min-height:32px;display:inline-flex;align-items:center;text-align:left;text-decoration:underline;cursor:pointer}
@media(max-width:400px){.tn-consent{padding:16px}.tn-consent-actions{flex-direction:column}}
.hero-help{font-size:14px;line-height:1.65;margin:18px 0 0;color:#536079}.hero-help a,.app-benefits a{color:#48348b;text-underline-offset:4px}.app-benefits{background:#f5f4fa}.app-benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:32px}.app-benefit-grid article{background:white;border:1px solid #e3e1ec;border-radius:20px;padding:26px;display:flex;flex-direction:column;align-items:flex-start}.app-benefit-grid h3{font-size:20px;line-height:1.3;margin:20px 0 10px}.app-benefit-grid p{font-size:15px;line-height:1.7;color:#536079;flex:1}.app-benefit-grid a{font-size:14px;font-weight:700;margin-top:15px}.app-number{font-size:12px;color:#6951c5;font-weight:800;letter-spacing:2px}.app-release-note{font-size:14px;line-height:1.7;color:#536079;margin-top:24px;max-width:760px}.product-gallery{position:relative;background:#f3f3f5!important;display:flex!important;flex-direction:column!important;justify-content:center!important;padding:24px!important;gap:14px}.product-gallery img{width:100%!important;height:auto!important;aspect-ratio:1;object-fit:contain!important;max-height:480px;mix-blend-mode:normal}.product-image-note{font-size:11px;line-height:1.6;color:#536079;text-align:center;max-width:320px;margin:0 auto}.tn-status{display:inline-flex;align-items:center;border-radius:7px;padding:5px 9px;font-size:12px;font-weight:700;line-height:1.5;background:var(--status-bg);color:var(--status-fg)}.tn-statuses{display:flex;gap:6px;flex-wrap:wrap}.tn-sync{font-size:12px;line-height:1.6;color:#536079;padding:8px 0}.tn-sync[data-stale=true]{color:#914126}.security-list{list-style:none;padding:0;display:grid;gap:12px}.security-list li{padding:15px;border:1px solid #e3e1ec;border-radius:12px;display:grid;gap:8px}.security-list small{color:#536079}.security-actions{display:flex;flex-wrap:wrap;gap:10px}.feature-scroll{overflow:auto}.feature-table{width:100%;border-collapse:collapse;min-width:560px}.feature-table th,.feature-table td{text-align:left;padding:15px;border-bottom:1px solid #e3e1ec;line-height:1.6}.feature-table th{background:#f5f4fa}@media(max-width:1000px){.app-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.app-benefit-grid{grid-template-columns:1fr}.app-benefit-grid article{padding:22px}.app-benefit-grid h3{margin-top:12px}.hero .actions{display:grid;grid-template-columns:1fr}.product-gallery{padding:18px!important}}

/* Exact print-layout preview; product photograph remains one click away. */
.product-gallery .ready-design{display:block;max-width:82%;max-height:520px;width:auto;height:auto;margin:32px auto;filter:drop-shadow(0 12px 18px rgba(16,28,48,.12))}
.product-gallery [hidden]{display:none!important}
.product-gallery .ready-views{display:flex;justify-content:center;gap:6px;padding:10px 12px 20px}
.ready-views button{font:700 13px Manrope,sans-serif;border:1px solid #ccd3df;background:#fff;color:#101c30;padding:10px 16px;border-radius:7px;cursor:pointer;min-height:44px}
.ready-views button[aria-pressed="true"]{background:#101c30;color:#fff;border-color:#101c30}
.ready-views button:focus-visible{outline:3px solid #a58bd4;outline-offset:3px}
.product-gallery .product-image-note{position:static;display:block;padding:10px 22px;text-align:center;line-height:1.5}
@media(max-width:700px){.product-gallery .ready-design{max-height:360px;margin:24px auto}}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url(/fonty/oswald-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url(/fonty/oswald-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonty/lora-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonty/lora-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.ready-options{min-width:0;margin:18px 0;padding:16px;border:1px solid #d9dfe8;border-radius:10px;background:#f8f9fb;display:grid;gap:12px}
.ready-options legend{padding:0 6px;font-weight:800;font-size:14px}
.ready-options label{display:grid;gap:6px;font-size:13px;font-weight:700}
.ready-options select,.ready-options input[type=text]{width:100%;box-sizing:border-box;min-height:44px;padding:10px;border:1px solid #cbd2de;border-radius:6px;background:white;color:#101c30;font:inherit}
.ready-color-custom{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px}
.ready-options input[type=color]{width:100%;height:44px;padding:3px;border:1px solid #cbd2de;border-radius:6px;background:white}
.ready-options .ready-brand{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border-top:1px solid #d9dfe8;padding-top:14px;min-height:44px;cursor:pointer}
.ready-brand input{width:20px;height:20px;accent-color:#101c30}.ready-brand b{white-space:nowrap}
.ready-options small{font-size:12px;line-height:1.6;color:#556174}.ready-options [hidden],.ready-options[hidden]{display:none!important}
.ready-options :focus-visible{outline:3px solid #7955af;outline-offset:2px}
/* Visual purpose picker; the native select remains the no-JS fallback. */
.ready-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:8px}
.ready-choice{min-width:0;border:1px solid #cbd2de;border-radius:8px;background:#fff;color:#101c30;padding:7px;cursor:pointer;font:700 11px/1.4 Manrope,sans-serif;display:grid;gap:6px;justify-items:center}
.ready-choice canvas{width:100%;max-width:88px;height:auto;aspect-ratio:1;object-fit:contain}.ready-choice span{overflow-wrap:anywhere}
.ready-choice[aria-pressed=true]{border:2px solid #7955af;padding:6px;background:#f6f3fa}.ready-choice:focus-visible{outline:3px solid #7955af;outline-offset:3px}
.ready-choices[hidden],.pcel-sel[hidden]{display:none!important}.kosz-mini canvas{width:100%;height:100%;object-fit:contain}
@media(max-width:540px){.ready-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.ready-choice{font-size:12px}}
.kosz-preview{padding:3px;cursor:zoom-in;background:#f5f6f8}.kosz-preview:focus-visible{outline:3px solid #7955af;outline-offset:3px}
.ready-dialog{border:1px solid #d9dfe8;border-radius:14px;padding:24px;max-width:440px;width:calc(100% - 36px);box-sizing:border-box;color:#101c30;background:white;max-height:90vh;overflow:auto}.ready-dialog::backdrop{background:#101c3080}.ready-dialog h2{font:800 18px Manrope,sans-serif;margin:0 0 16px}.ready-dialog canvas{display:block;width:100%;height:45vh;object-fit:contain}.ready-dialog p{font:400 13px/1.6 Manrope,sans-serif;color:#556174}.ready-dialog button{min-height:44px;width:100%;background:#101c30;color:white;border:0;border-radius:7px;font:700 14px Manrope,sans-serif;cursor:pointer}