/* Štýly nastavovača predplatného.
   Vytiahnuté zo stránky, lebo to isté rozhranie beží aj v profile v module
   Faktúry. Dve kópie štýlov by sa rozišli a v profile by to vyzeralo inak
   než na cenníku, ktorý zákazníka presvedčil.

   AKO JE TO MYSLENÉ. Predtým to bol formulár: zaškrtávacie štvorčeky, šedé
   ikony a riadky pod sebou. Fungovalo to, ale nedalo sa to prehliadnuť očami —
   dvadsať nástrojov vyzeralo ako dvadsať rovnakých riadkov.

   Teraz je každý nástroj DLAŽDICA s vlastnou farbou. Tá istá farba, akú má
   nástroj v pracovnej ploche vo Windows, takže sa človek neučí dve sady.
   Zaškrtnutie vidno na prvý pohľad: dlaždica sa zafarbí a dostane značku.
   Farba nie je ozdoba — je to jediný spôsob, ako v dvadsiatich políčkach
   nájsť to svoje bez čítania.

   Stĺpec s cenou má tú istú farbu ako dlaždice: v pásiku pod cenou má každý
   nástroj svoj diel. Vidno teda nielen KOĽKO, ale aj ZA ČO.

   POZOR NA TMAVÝ REŽIM. Stránka má globálne pravidlá s `!important` a s
   `:is(...)`, ktoré preberá špecifickosť najsilnejšieho argumentu. Tam, kde
   na farbe naozaj záleží, je tu preto `!important` zámerne — stráži to
   `tests/v76/test_odkazy_v_tme.py`. */

.cennik-nastavovac{
  --nav-brand:#5548e8; --nav-brand-tmava:#4338ca;
  --nav-papier:#fff; --nav-tichy:#f7f8fd; --nav-text:#1a2233; --nav-sedy:#5b6779;
  --nav-ciara:var(--line,#e3e7f0); --nav-tien:0 1px 2px rgba(19,24,45,.05);
  --nav-tien-vys:0 10px 24px -12px rgba(46,42,120,.28);
  /* VZDUCH OKOLO OBSAHU. Bolo 24 px napevno. Karta s cenou ma vlastny tien,
     ktory tych par pixelov opticky zoberie — vysledok vyzeral, ze sa karta
     dotyka ramceka, hoci ho nepresahovala. Odstup preto rastie so sirkou
     okna: na mobile zostava uzky (miesta je malo), na sirokej obrazovke
     dostane az 40 px. */
  margin:30px 0 10px;padding:clamp(20px,3.2vw,40px);border:1px solid var(--nav-ciara);
  border-radius:22px;background:var(--nav-papier);color:var(--nav-text)
}
.cennik-nastavovac h3{margin:0 0 6px;font-size:21px;letter-spacing:-.028em}
.nav-uvod{margin:0 0 22px;max-width:660px;color:var(--nav-sedy);font-size:13.5px;line-height:1.62}
.nav-telo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.86fr);
  /* Medzera medzi stlpcami rastie rovnako ako vonkajsi odstup — inak by
     karta odsadla od ramceka, ale prilepila sa k zoznamu nastrojov. */
  gap:clamp(18px,2.4vw,34px);align-items:start}
.nav-blok{margin:0 0 24px}
.nav-otazka{display:block;margin:0 0 12px;font-size:15px;font-weight:650;letter-spacing:-.012em}

/* ── posuvník ──────────────────────────────────────────────────────────────
   Veľké číslo hore, aby bolo čo sledovať pri ťahaní. Značky na dráhe hovoria,
   KDE sa cena za faktúru láme — to je informácia, nie ozdoba. */
.nav-objem{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}
.nav-objem b{
  font-size:30px;line-height:1;letter-spacing:-.035em;color:var(--nav-brand-tmava);
  font-variant-numeric:tabular-nums;transition:color .18s ease
}
.nav-objem span{font-size:13.5px;color:var(--nav-sedy)}
.nav-draha{position:relative;padding:2px 0 0}
.nav-posuvnik{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;
  background:transparent;cursor:pointer;margin:0
}
.nav-posuvnik::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--nav-brand) 0 var(--nav-vyplnene,0%),var(--nav-ciara) var(--nav-vyplnene,0%) 100%)
}
.nav-posuvnik::-moz-range-track{height:8px;border-radius:999px;background:var(--nav-ciara)}
.nav-posuvnik::-moz-range-progress{height:8px;border-radius:999px;background:var(--nav-brand)}
.nav-posuvnik::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-7px;
  border-radius:50%;background:#fff;border:2.5px solid var(--nav-brand);
  box-shadow:0 2px 6px rgba(46,42,120,.32);transition:transform .12s ease
}
.nav-posuvnik::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#fff;border:2.5px solid var(--nav-brand);
  box-shadow:0 2px 6px rgba(46,42,120,.32)
}
.nav-posuvnik:active::-webkit-slider-thumb{transform:scale(1.12)}
.nav-posuvnik:focus-visible{outline:none}
.nav-posuvnik:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(85,72,232,.28)}
/* Posuvník, ktorý cenou nehýbe, musí VYZERAŤ nečinne — inak si človek myslí,
   že sa pokazil. */
.nav-posuvnik.je-necinny{opacity:.55;filter:grayscale(1)}
.nav-znacky{position:relative;height:16px;margin-top:1px}
.nav-znacky i{
  position:absolute;top:0;transform:translateX(-50%);font-style:normal;
  font-size:10.5px;color:var(--nav-sedy);white-space:nowrap;font-variant-numeric:tabular-nums
}
/* Krajné značky by polovicou vytŕčali von z dráhy. */
.nav-znacky i:first-child{transform:none}
.nav-znacky i:last-child{transform:translateX(-100%)}
.nav-znacky i:before{
  content:"";display:block;width:1px;height:4px;margin:0 auto 2px;background:var(--nav-ciara)
}
.nav-hodnota{margin-top:8px;font-size:13px;color:var(--nav-sedy);line-height:1.55}
.nav-hodnota b{color:var(--nav-text)}
.nav-hodnota em{font-style:normal}

/* ── rýchly výber ───────────────────────────────────────────────────────── */
.nav-zostavy{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 14px;font-size:12.5px;color:var(--nav-sedy)}
.nav-zostava{
  padding:6px 13px;border:1px solid var(--nav-ciara);border-radius:999px;
  background:var(--nav-tichy);color:var(--nav-text);font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease,transform .12s ease
}
.nav-zostava:hover{border-color:var(--nav-brand);color:var(--nav-brand-tmava);background:rgba(85,72,232,.07);transform:translateY(-1px)}
.nav-zostava:focus-visible{outline:2px solid var(--nav-brand);outline-offset:2px}

/* ── skupiny nástrojov ─────────────────────────────────────────────────── */
.nav-skupina{
  margin:0 0 14px;padding:14px;border:1px solid var(--nav-ciara);border-radius:16px;
  background:var(--nav-tichy)
}
.nav-skupina legend{
  display:flex;align-items:center;gap:9px;padding:0 8px;margin-left:-2px;
  font-size:12.5px;font-weight:750;letter-spacing:.012em;color:var(--nav-text)
}
.nav-pocitadlo{
  display:inline-block;min-width:20px;padding:2px 7px;border-radius:999px;
  background:var(--nav-ciara);color:var(--nav-sedy);
  font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center
}
.nav-skupina.ma-vybrane .nav-pocitadlo{background:var(--nav-brand);color:#fff}
/* V tme je `--nav-brand` svetlejšia a biele číslo na nej malo 3,85 —
   pod prahom pre takto drobné písmo. Podklad je preto tmavší. */
html[data-plevix-theme="dark"] .nav-skupina.ma-vybrane .nav-pocitadlo{background:#4338ca;color:#fff!important}
.nav-mriezka{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:9px;margin-top:4px}

/* ── dlaždica nástroja ─────────────────────────────────────────────────── */
.nav-polozka{
  --akcent:#5548e8;
  position:relative;display:flex;gap:10px;align-items:center;
  padding:10px 34px 10px 10px;border:1.5px solid var(--nav-ciara);border-radius:14px;
  background:var(--nav-papier);box-shadow:var(--nav-tien);cursor:pointer;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .12s ease
}
.nav-polozka:hover{border-color:color-mix(in srgb,var(--akcent) 45%,transparent);transform:translateY(-1px);box-shadow:var(--nav-tien-vys)}
/* Zaškrtávací štvorček zostáva v značkách kvôli klávesnici a čítačkám —
   iba ho nevidno. Rámček pri prechode klávesnicou dostane celá dlaždica. */
.nav-polozka input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.nav-polozka:has(input:focus-visible){outline:2px solid var(--nav-brand);outline-offset:2px}
.nav-chip{
  display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;
  background:color-mix(in srgb,var(--akcent) 12%,transparent);color:var(--akcent);
  transition:background .16s ease,color .16s ease
}
.nav-chip svg{display:block}
.nav-meno{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.3}
.nav-cenka{
  position:absolute;right:34px;bottom:9px;font-size:11.5px;color:var(--nav-sedy);
  font-variant-numeric:tabular-nums;transition:color .16s ease
}
.nav-polozka{padding-bottom:26px}
.nav-znak{
  position:absolute;top:10px;right:10px;width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--nav-ciara);background:var(--nav-papier);
  transition:background .16s ease,border-color .16s ease
}
.nav-znak:after{
  content:"";position:absolute;inset:0;margin:auto;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);
  opacity:0;transition:opacity .14s ease
}
.nav-polozka.je-zvoleny{
  border-color:var(--akcent);
  background:color-mix(in srgb,var(--akcent) 7%,var(--nav-papier))
}
.nav-polozka.je-zvoleny .nav-chip{background:var(--akcent);color:#fff}
.nav-polozka.je-zvoleny .nav-meno{font-weight:650}
/* Cenovka na zvolenej dlaždici NIE JE akcentom. Meranie z vykreslených bodov:
   Banka a pokladňa 3,06 · Kniha jázd 3,27 · Doklad 3,39 — svetlé firemné
   farby na svetlom podklade sa nedali prečítať. Akcent nesie dlaždica
   rámčekom, ikonou aj značkou; cenovka ho nepotrebuje. */
.nav-polozka.je-zvoleny .nav-cenka{color:var(--nav-text);font-weight:650}
.nav-polozka.je-zvoleny .nav-znak{background:var(--akcent);border-color:var(--akcent)}
.nav-polozka.je-zvoleny .nav-znak:after{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .nav-polozka.je-zvoleny .nav-chip{animation:navPuk .26s ease}
  @keyframes navPuk{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
}
.nav-dalsi{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--nav-sedy)}
.nav-dalsi b{color:var(--nav-text)}

/* ── stĺpec s cenou ────────────────────────────────────────────────────── */
.nav-vysledok{
  position:sticky;top:14px;padding:0 18px 18px;border:1px solid var(--nav-ciara);
  border-radius:18px;background:var(--nav-papier);box-shadow:var(--nav-tien-vys);overflow:hidden;
  /* POISTKA PROTI VYLIEZANIU Z RAMCEKA.
     Vodorovne: `min-width:0` je v mriezke nutne — polozka mriezky ma
     predvolene `min-width:auto`, takze ju dlhy nezalomitelny text (dlhy nazov
     nastroja, velke cislo) roztiahne NAD pridelenu sirku a karta vylezie
     z ramceka. Ziadna sirka v `grid-template-columns` tomu sama nezabrani.
     Zvisle: karta je lepiva (`sticky`). Ked je vyssia nez okno, jej spodok —
     a s nim tlacidlo „Pokracovat na objednavku" — sa neda dorolovat. Preto
     dostane strop na vysku a roluje sa vnutri.
     Merane: pri vsetkych 20 nastrojoch ma karta 460 px, takze na beznom okne
     sa strop neprejavi; chrani nizke okna a zvacsene pismo. */
  min-width:0;max-width:100%;
  max-height:calc(100vh - 28px);overflow-y:auto;overscroll-behavior:contain
}
/* To iste pre lavy stlpec: bez `min-width:0` ho siroky obsah roztiahne a
   odtlaci kartu doprava von z ramceka. */
.nav-telo>*{min-width:0}
/* Dlhy nazov bez medzier nema rozbit riadok ceny. */
.nav-vysledok li>span,.nav-vysledok li>b{overflow-wrap:anywhere}
.nav-vysledok:before{
  /* Karta ma teraz bocne odsadenie 18 px. Pruh ma ist cez CELU sirku,
     takze si ho zapornymi okrajmi vytiahne spat k ramiku. */
  content:"";display:block;height:4px;margin:0 -18px;
  background:linear-gradient(90deg,var(--nav-brand),#8b5cf6 55%,#a78bfa)
}
/* ODSADENIE OBSAHU OD RAMIKA KARTY.
   Predtym tu bolo `>*:not(:before)`. `:before` je PSEUDO-PRVOK a ten sa
   vnutri `:not()` pouzit nesmie — selektor je neplatny a prehliadac zahodi
   CELE pravidlo, teda aj obe odsadenia. Text tak sedel 1 px od ramika.
   Merane 27. 8. 2026 na ostrom webe: vlavo 1 px, vpravo 1 px.
   `:not()` tu ani netreba: `>*` pseudo-prvky nikdy nechyta, takze fialovy
   pruh navrchu zostane cez celu sirku sam od seba. */

.nav-stitok{display:block;margin-top:16px;font-size:10px;font-weight:850;letter-spacing:.09em;color:var(--nav-sedy)}
.nav-cena{display:flex;align-items:baseline;gap:6px;margin-top:5px}
.nav-cena b{
  font-size:38px;line-height:1;letter-spacing:-.04em;color:var(--nav-brand-tmava);
  font-variant-numeric:tabular-nums
}
.nav-cena small{font-size:12px;color:var(--nav-sedy)}
@media (prefers-reduced-motion:no-preference){
  .nav-cena b.sa-zmenila{animation:navCena .3s ease}
  @keyframes navCena{0%{transform:translateY(3px);opacity:.45}100%{transform:none;opacity:1}}
}
.nav-povodna{margin-top:3px;font-size:12.5px;color:var(--nav-sedy)}
.nav-pocet{margin-top:10px;font-size:12.5px;color:var(--nav-sedy)}

/* Pásik: každý nástroj svojím dielom a svojou farbou. */
.nav-grafika{margin-top:12px}
.nav-pruh{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--nav-ciara);gap:1.5px}
.nav-pruh.prazdny{opacity:.55}
.nav-pruh i{display:block;height:100%;min-width:2px;transition:width .28s ease,background .2s ease}
.nav-legenda{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:8px;font-size:11.5px;color:var(--nav-sedy)}
.nav-legenda span{display:flex;align-items:center;gap:5px}
.nav-legenda b{width:8px;height:8px;border-radius:3px;display:block;flex:0 0 8px}

.nav-rozpis{list-style:none;margin:14px 0;padding:12px 0 0;border-top:1px solid var(--nav-ciara);font-size:12.5px}
.nav-rozpis li{display:flex;justify-content:space-between;gap:10px;padding:3.5px 0;color:var(--nav-sedy)}
.nav-rozpis .nav-hlava{padding:0 0 5px;font-size:10px;font-weight:850;letter-spacing:.075em;color:var(--nav-sedy)}
.nav-rozpis b{font-variant-numeric:tabular-nums;color:var(--nav-text)}
.nav-rozpis .nav-mnozstvo b,.nav-rozpis .nav-zlava b{color:#15803d}
.nav-rozpis .nav-sucet{margin-top:5px;padding-top:8px;border-top:1px solid var(--nav-ciara);color:var(--nav-text);font-weight:600}

.nav-tlacidlo{
  display:block;width:100%;margin-top:14px;padding:12px 14px;border:0;border-radius:12px;
  background:var(--nav-brand);color:#fff;font:inherit;font-size:14px;font-weight:650;
  text-align:center;text-decoration:none;cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(85,72,232,.9);
  transition:background .15s ease,transform .12s ease,box-shadow .15s ease
}
.nav-tlacidlo:hover{background:var(--nav-brand-tmava);transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(85,72,232,.95)}
.nav-tlacidlo.je-vypnuty{background:#a9b0c4;box-shadow:none;pointer-events:none}
.nav-vycistit{
  display:block;width:100%;margin-top:8px;padding:9px 12px;border:1px solid var(--nav-ciara);
  border-radius:11px;background:transparent;color:var(--nav-sedy);font:inherit;font-size:12.5px;cursor:pointer;
  transition:border-color .15s ease,color .15s ease
}
.nav-vycistit:hover{border-color:var(--nav-brand);color:var(--nav-brand-tmava)}
.nav-zmena{margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--nav-sedy)}
.nav-zmena b{color:var(--nav-text)}
.nav-poznamka{margin:18px 0 0;font-size:12px;line-height:1.65;color:var(--nav-sedy)}

/* ── tmavý režim ───────────────────────────────────────────────────────────
   Farby nástrojov zostávajú tie isté (sú to ich značky), mení sa papier pod
   nimi. `color-mix` s tmavým papierom dá tlmenejší odtieň sám. */
html[data-plevix-theme="dark"] .cennik-nastavovac{
  --nav-papier:#111622; --nav-tichy:#0d1320; --nav-text:#eef2ff; --nav-sedy:#a9b4c9;
  --nav-ciara:#293247; --nav-brand:#7c6ff5; --nav-brand-tmava:#a99bff;
  --nav-tien:0 1px 2px rgba(0,0,0,.4); --nav-tien-vys:0 12px 28px -14px rgba(0,0,0,.85);
  background:#111622
}
html[data-plevix-theme="dark"] .cennik-nastavovac :is(.nav-uvod,.nav-hodnota,.nav-pocet,.nav-povodna,
  .nav-dalsi,.nav-poznamka,.nav-legenda,.nav-zmena,.nav-stitok,.nav-znacky i){color:#a9b4c9!important}
html[data-plevix-theme="dark"] .cennik-nastavovac :is(.nav-meno,.nav-hodnota b,.nav-dalsi b,
  .nav-rozpis b,.nav-zmena b){color:#eef2ff!important}
html[data-plevix-theme="dark"] .nav-rozpis li{color:#a9b4c9}
html[data-plevix-theme="dark"] .nav-rozpis :is(.nav-mnozstvo,.nav-zlava) b{color:#4ade80!important}
html[data-plevix-theme="dark"] .nav-cena b{color:#a99bff!important}
html[data-plevix-theme="dark"] .nav-objem b{color:#a99bff!important}
html[data-plevix-theme="dark"] .nav-polozka{background:#0f1626}
html[data-plevix-theme="dark"] .nav-polozka.je-zvoleny{background:color-mix(in srgb,var(--akcent) 20%,#0f1626)}
/* Cenovka na ZVOLENEJ dlaždici v tme nesmie byť akcentom. Meranie z
   vykreslených bodov ukázalo pri Faktúrach kontrast 2,46 — tmavomodrý text na
   tmavomodrom podklade. V svetlom režime tá istá farba vychádza nad 5, takže
   sa to očami ľahko prehliadne: stačí sa pozerať na svetlú tému.
   Akcent nesie dlaždica rámčekom, ikonou aj značkou; cenovka ho nepotrebuje. */
html[data-plevix-theme="dark"] .nav-polozka.je-zvoleny .nav-cenka{color:#dfe4ff!important}
html[data-plevix-theme="dark"] .nav-chip{background:color-mix(in srgb,var(--akcent) 24%,transparent)}
html[data-plevix-theme="dark"] .nav-znak{background:#0f1626}
html[data-plevix-theme="dark"] .nav-zostava{background:#0f1626;color:#eef2ff}
/* `!important` je tu zámerne: `a:not(.btn):not(.primary):not(.secondary)` má
   (0,4,2) a bez neho prebije farbu textu na tomto tlačidle. */
html[data-plevix-theme="dark"] .nav-tlacidlo{background:#6a5cf0;color:#fff!important}
html[data-plevix-theme="dark"] .nav-tlacidlo:hover{background:#7c6ff5}
html[data-plevix-theme="dark"] .nav-tlacidlo.je-vypnuty{background:#3a4358;color:#aeb8cb!important}

/* ── úzke obrazovky ────────────────────────────────────────────────────── */
@media (max-width:900px){
  .nav-telo{grid-template-columns:1fr;gap:20px}
  .nav-vysledok{position:static}
}
@media (max-width:560px){
  .cennik-nastavovac{padding:16px;border-radius:16px}
  .nav-mriezka{grid-template-columns:1fr}
  .nav-cena b{font-size:32px}
  .nav-objem b{font-size:26px}
}

/* ── lišta s cenou na mobile ───────────────────────────────────────────────
   Na širokej obrazovke stojí stĺpec s cenou vedľa zoznamu a drží sa. Na mobile
   je pod ním, takže pri zaškrtávaní nie je vidieť — a to je práve to číslo,
   kvôli ktorému človek klikal. Lišta ho drží na očiach.

   Na širokej obrazovke sa nezobrazuje NIKDY: tam by len prekrývala obsah. */
.nav-lista{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  align-items:center;gap:9px;
  /* Vpravo dole sedí plávajúce tlačidlo VIXI — bez tohto miesta by prekrylo
     tlačidlo Objednať. Overené na snímke mobilu, nie odhadom. */
  padding:10px 74px 10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--nav-papier);border-top:1px solid var(--nav-ciara);
  box-shadow:0 -6px 20px -12px rgba(19,24,45,.4)
}
.nav-lista.je-vidno{display:flex}
.nav-lista b{flex:0 0 auto;white-space:nowrap;font-size:19px;letter-spacing:-.03em;color:var(--nav-brand-tmava);font-variant-numeric:tabular-nums}
.nav-lista span{flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--nav-sedy);line-height:1.35}
.nav-lista .nav-tlacidlo{width:auto;margin:0;flex:0 0 auto;padding:10px 16px;font-size:13px}
html[data-plevix-theme="dark"] .nav-lista{background:#111622;border-top-color:#293247}
html[data-plevix-theme="dark"] .nav-lista b{color:#a99bff!important}
html[data-plevix-theme="dark"] .nav-lista span{color:#a9b4c9!important}
@media (min-width:901px){ .nav-lista{display:none!important} }

/* ── Prístupové účty ───────────────────────────────────────────────────────
   Krokovač, nie posuvník: účtov je málo a každý stojí peniaze, takže sa má
   pridávať vedome po jednom. Posuvník zvádza k ťahaniu naslepo. */
.nav-ucty .nav-krokovac{display:flex;align-items:center;gap:14px;margin-top:6px}
.nav-ucty .nav-objem{margin:0}
.nav-krok{
  width:42px;height:42px;flex:0 0 auto;border-radius:12px;cursor:pointer;
  border:1px solid var(--nav-ciara);background:var(--nav-papier);color:var(--nav-text);
  font-size:22px;line-height:1;font-weight:700;
  display:grid;place-items:center;transition:border-color .15s,background .15s
}
.nav-krok:hover:not(:disabled){border-color:var(--nav-brand);background:var(--nav-jemna)}
.nav-krok:disabled{opacity:.4;cursor:not-allowed}
.nav-krok:focus-visible{outline:2px solid var(--nav-brand);outline-offset:2px}