/*
 * Kanon wyglądu BDG Portal — wzory komponentów w czystym CSS (stan na 30.09.2026).
 *
 * Dla modułów BEZ Tailwinda (czysty HTML/JS). Każda klasa odwzorowuje klasy Tailwinda użyte w portalu —
 * obok reguły stoi, z czego pochodzi. Wymaga zmiennych z kolory/tokens.css (załaduj go PRZED tym plikiem).
 * Podgląd wszystkich wzorów: komponenty/html/podglad.html.
 *
 * Zasady pliku (CSP serwera: `style-src 'self'`): żadnych atrybutów style=… w HTML i żadnych <style>
 * w stronie — wygląd tylko z plików .css.
 */

/* ---------------------------------------------------------------- podstawa */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* Własna reguła `display` bije `[hidden]` z arkusza przeglądarki — KANON-PLATFORMY.md, sekcja 5. */
[hidden] {
  display: none !important;
}

/* Fokus klawiatury — dostępność, nie ozdoba (portal: `:focus-visible { outline-accent outline-2 outline-offset-2 }`). */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  border-radius: 0.25rem;
  background: var(--color-surface-sunken);
  padding: 0.125rem 0.375rem;
}

.kanon-liczba {
  font-variant-numeric: tabular-nums; /* cyfry o stałej szerokości — kwoty i liczniki nie „skaczą” */
}

/* ------------------------------------------------------------- ikony (lucide) */
/* SVG z lucide.dev: viewBox 0 0 24 24, bez wypełnienia, obrys w kolorze tekstu. */
.kanon-ikona {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kanon-ikona--13 { width: 13px; height: 13px; }
.kanon-ikona--15 { width: 15px; height: 15px; }
.kanon-ikona--18 { width: 18px; height: 18px; }
.kanon-ikona--24 { width: 24px; height: 24px; }

/* ------------------------------------------------ tło karty (TloPlatformy) */
/* Kontener strony: `relative min-h-[calc(100vh-4rem)] overflow-hidden bg-canvas` (w module w ramce: 100vh). */
.kanon-ekran {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--color-canvas);
}

/* Siatka kropek — kropka 1 px co 26 px, barwa `line-strong` (portal: `.kropki-platformy` w index.css). */
.kropki-platformy {
  background-image: radial-gradient(var(--color-line-strong) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* Warstwa kropek: `kropki-platformy pointer-events-none absolute inset-0 opacity-60` + maska. */
.kanon-tlo-kropki {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
  /* maska „gora” — kropki gasną ku dołowi (strony z krótką treścią) */
  -webkit-mask-image: radial-gradient(ellipse at 25% 0%, black 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at 25% 0%, black 0%, transparent 75%);
}
/* maska „calosc” — kropki do 70% wysokości (strona główna, długie listy) */
.kanon-tlo-kropki--calosc {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

/* Poświata marki: `pointer-events-none absolute -left-32 top-10 h-96 w-96 rounded-full bg-brand opacity-10 blur-3xl`. */
.kanon-poswiata {
  position: absolute;
  left: -8rem;
  top: 2.5rem;
  width: 24rem;
  height: 24rem;
  border-radius: 9999px;
  background: var(--color-brand);
  opacity: 0.1;
  filter: blur(64px);
  pointer-events: none;
}

/* Treść nad tłem. Strona portalu: `relative mx-auto max-w-3xl px-6 py-14`. */
.kanon-tresc {
  position: relative;
  margin: 0 auto;
  max-width: 48rem;
  padding: 3.5rem 1.5rem;
}
/* Moduł w ramce portalu (gęsty interfejs): `relative mx-auto max-w-[1400px] px-5 py-6`. */
.kanon-tresc--modul {
  max-width: 1400px;
  padding: 1.5rem 1.25rem;
}

/* ------------------------------------------------------ nagłówek karty portalu */
/* Plakietka nad tytułem: `inline-flex items-center gap-1.5 rounded-full border border-brand/25 bg-brand-soft px-3 py-1 text-xs font-medium text-brand-ink`. */
.kanon-plakietka {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklch, var(--color-brand) 25%, transparent);
  background: var(--color-brand-soft);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--color-brand-ink);
}
/* Tytuł strony: `mt-5 text-2xl font-semibold text-ink`. */
.kanon-tytul {
  margin: 1.25rem 0 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  color: var(--color-ink);
}
/* Opis pod tytułem: `mt-1 max-w-xl text-ink-soft`. */
.kanon-opis {
  margin: 0.25rem 0 0;
  max-width: 36rem;
  color: var(--color-ink-soft);
}

/* ------------------------------------------- nagłówek modułu w ramce portalu */
/* Wzór z modułu Uprawnienia (`PageHeader`): tytuł po lewej, konto i poziom po prawej, BEZ logo. */
.kanon-naglowek-modulu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.kanon-naglowek-modulu__tekst {
  min-width: 0;
  flex: 1 1 auto;
}
/* `text-[22px] font-medium tracking-tight` */
.kanon-naglowek-modulu__tytul {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.025em;
}
/* `text-ink-muted mt-1 text-[13px]` */
.kanon-naglowek-modulu__opis {
  margin: 0.25rem 0 0;
  font-size: 13px;
  color: var(--color-ink-muted);
}
.kanon-naglowek-modulu__konto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
}

/* Znacznik poziomu konta (moduły: `Badge ton="akcent"` — `rounded-md px-1.5 py-0.5 text-[11.5px] font-medium`). */
.kanon-poziom {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--color-brand-soft);
  color: var(--color-brand-ink);
}

/* ------------------------------------------------------------------- kafel */
/* Kafel sekcji (Kopie zapasowe, `Kafel`): `rounded-3xl border border-line bg-surface p-6`. */
.kanon-kafel {
  border-radius: 1.5rem;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: 1.5rem;
}
/* Tytuł kafla: `text-sm font-semibold uppercase tracking-wide text-ink-muted`. */
.kanon-kafel__tytul {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-ink-muted);
}
/* Kafel narzędzia (FeatureCard): `rounded-3xl border p-7 shadow-sm hover:-translate-y-1 hover:border-line-strong hover:shadow-lg`. */
.kanon-kafel--narzedzie {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 1.75rem;
  text-align: left;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  transition: transform 150ms, box-shadow 150ms, border-color 150ms;
}
.kanon-kafel--narzedzie:hover {
  transform: translateY(-0.25rem);
  border-color: var(--color-line-strong);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
/* Wyłączony (w budowie): `cursor-default border-dashed border-line bg-surface-sunken/60`. */
.kanon-kafel--wylaczony {
  cursor: default;
  border-style: dashed;
  background: color-mix(in oklch, var(--color-surface-sunken) 60%, transparent);
  box-shadow: none;
}
.kanon-kafel--wylaczony:hover {
  transform: none;
  border-color: var(--color-line);
  box-shadow: none;
}
/* Ikona kafla: `flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-soft text-brand-ink`. */
.kanon-kafel__ikona {
  display: flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: var(--color-brand-soft);
  color: var(--color-brand-ink);
}
.kanon-kafel--wylaczony .kanon-kafel__ikona {
  background: var(--color-surface);
  color: var(--color-ink-muted);
}
/* Nazwa narzędzia: `text-lg font-semibold`; opis: `mt-1.5 text-sm leading-relaxed text-ink-soft`. */
.kanon-kafel__nazwa {
  display: block;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}
.kanon-kafel__tekst {
  display: block;
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--color-ink-soft);
}
.kanon-kafel--wylaczony .kanon-kafel__nazwa {
  color: var(--color-ink-muted);
}
/* Wyłączony: plakietka bez pomarańczu (`bg-surface text-ink-muted`) — jak w FeatureCard. */
.kanon-kafel--wylaczony .kanon-kafel__plakietka {
  background: var(--color-surface);
  color: var(--color-ink-muted);
}
/* Plakietka na kafelku: `rounded-full bg-accent-soft px-2.5 py-1 text-xs font-medium text-accent-ink`. */
.kanon-kafel__plakietka {
  border-radius: 9999px;
  background: var(--color-accent-soft);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-accent-ink);
}
.kanon-kafel__gora {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
}
/* Siatka kafli: `grid gap-5 md:grid-cols-2`. */
.kanon-siatka {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .kanon-siatka--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- przycisk */
/* Główny (Kopie zapasowe): `inline-flex items-center gap-2 rounded-xl bg-brand px-4 py-2 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50`. */
.kanon-przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms, opacity 150ms;
}
.kanon-przycisk:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.kanon-przycisk--glowny {
  background: var(--color-brand);
  color: #fff;
}
.kanon-przycisk--glowny:hover:not(:disabled) {
  opacity: 0.9;
}
/* Drugorzędny: `rounded-xl border border-line px-4 py-2 text-sm font-medium text-ink hover:bg-surface-sunken`. */
.kanon-przycisk--drugorzedny {
  border-color: var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink);
}
.kanon-przycisk--drugorzedny:hover:not(:disabled) {
  background: var(--color-surface-sunken);
}
/* Cichy (bez obramowania, np. „Anuluj”): `text-ink-soft hover:bg-surface-sunken`. */
.kanon-przycisk--cichy {
  background: transparent;
  color: var(--color-ink-soft);
}
.kanon-przycisk--cichy:hover:not(:disabled) {
  background: var(--color-surface-sunken);
  color: var(--color-ink);
}
/* Logowanie (WymagaLogowania): `h-10 rounded-lg bg-navy px-4 text-sm font-medium text-white hover:opacity-90`. */
.kanon-przycisk--logowanie {
  height: 2.5rem;
  border-radius: 0.5rem;
  background: var(--color-navy);
  color: #fff;
}
.kanon-przycisk--logowanie:hover:not(:disabled) {
  opacity: 0.9;
}
/* Niebezpieczny (akcja nieodwracalna — dopiero po wpisaniu słowa potwierdzenia). */
.kanon-przycisk--niebezpieczny {
  border-color: color-mix(in oklch, var(--color-err) 40%, transparent);
  background: var(--color-surface);
  color: var(--color-err-ink);
}
.kanon-przycisk--niebezpieczny:hover:not(:disabled) {
  background: var(--color-err-soft);
}
/* Mały (w wierszu tabeli, w nagłówku): `h-8 px-2.5 text-[12.5px] rounded-lg`. */
.kanon-przycisk--maly {
  height: 2rem;
  border-radius: 0.5rem;
  padding: 0 0.625rem;
  font-size: 12.5px;
}
/* Rząd przycisków: `flex flex-wrap gap-2` — ta sama wysokość i linia bazowa. */
.kanon-przyciski {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ------------------------------------------------------------ pole formularza */
/* Moduły (`Pole`): etykieta `text-ink-soft text-[12.5px] font-medium`, pole `h-9 rounded-lg border border-line-strong px-3 text-[13px]`. */
.kanon-pole {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.kanon-pole__etykieta {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-ink-soft);
}
.kanon-pole__wejscie {
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  padding: 0 0.75rem;
  font: inherit;
  font-size: 13px;
  color: var(--color-ink);
}
.kanon-pole__wejscie:focus {
  border-color: var(--color-brand);
}
.kanon-pole__podpowiedz {
  font-size: 11.5px;
  color: var(--color-ink-muted);
}

/* ------------------------------------------------------------------- tabela */
/* Kopie zapasowe: nagłówki `text-left text-xs uppercase tracking-wide text-ink-muted font-medium pb-2`, wiersze `border-t border-line py-2`. */
.kanon-tabela-ramka {
  overflow-x: auto; /* 375 px: przewija się tabela, nie cała strona */
}
.kanon-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.kanon-tabela th {
  padding: 0 0.75rem 0.5rem 0;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-ink-muted);
  white-space: nowrap;
}
.kanon-tabela td {
  border-top: 1px solid var(--color-line);
  padding: 0.5rem 0.75rem 0.5rem 0;
  color: var(--color-ink-soft);
}
.kanon-tabela td:first-child {
  color: var(--color-ink);
}
.kanon-tabela th:last-child,
.kanon-tabela td:last-child {
  padding-right: 0;
}
/* Liczby i kwoty do prawej i BEZ łamania („12 345,50 EUR” w jednej linii — na telefonie przewija się tabela). */
.kanon-tabela .kanon-prawo {
  text-align: right;
  white-space: nowrap;
}
.kanon-tabela__pusta {
  font-size: 0.875rem;
  color: var(--color-ink-muted);
}

/* ------------------------------------------------------------- znacznik stanu */
/* Kopie zapasowe (`Znacznik`): `inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium` — barwy z tokenów stanów. */
.kanon-znacznik {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border: 1px solid var(--color-line);
  background: var(--color-surface-sunken);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--color-ink-muted);
}
.kanon-znacznik--ok {
  border-color: color-mix(in oklch, var(--color-ok) 30%, transparent);
  background: var(--color-ok-soft);
  color: var(--color-ok-ink);
}
.kanon-znacznik--ostrzezenie {
  border-color: color-mix(in oklch, var(--color-warn) 35%, transparent);
  background: var(--color-warn-soft);
  color: var(--color-warn-ink);
}
.kanon-znacznik--blad {
  border-color: color-mix(in oklch, var(--color-err) 30%, transparent);
  background: var(--color-err-soft);
  color: var(--color-err-ink);
}

/* --------------------------------------------------------------- komunikaty */
/* Błąd (Kopie zapasowe): `rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-800` → tokeny `err`. */
.kanon-komunikat {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: 1rem;
  border: 1px solid var(--color-line);
  background: var(--color-surface-sunken);
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-ink);
}
.kanon-komunikat p {
  margin: 0;
}
.kanon-komunikat .kanon-ikona {
  margin-top: 0.125rem;
}
.kanon-komunikat--blad {
  border-color: color-mix(in oklch, var(--color-err) 30%, transparent);
  background: var(--color-err-soft);
  color: var(--color-err-ink);
}
.kanon-komunikat--ostrzezenie {
  border-color: color-mix(in oklch, var(--color-warn) 35%, transparent);
  background: var(--color-warn-soft);
  color: var(--color-warn-ink);
}
.kanon-komunikat--ok {
  border-color: color-mix(in oklch, var(--color-ok) 30%, transparent);
  background: var(--color-ok-soft);
  color: var(--color-ok-ink);
}

/* Ekran odmowy / logowania / usługi bez adresu (karta na środku): `max-w-md rounded-3xl border border-line bg-surface p-8 text-center`. */
.kanon-srodek {
  display: flex;
  min-height: 60vh;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
}
.kanon-odmowa {
  max-width: 28rem;
  border-radius: 1.5rem;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: 2rem;
  text-align: center;
}
/* `mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-surface-sunken text-ink-muted` */
.kanon-odmowa__ikona {
  display: flex;
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: var(--color-surface-sunken);
  color: var(--color-ink-muted);
}
/* `mt-4 text-lg font-semibold text-ink` */
.kanon-odmowa__tytul {
  margin: 1rem 0 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}
/* `mt-2 text-sm leading-relaxed text-ink-soft` */
.kanon-odmowa__tekst {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--color-ink-soft);
}
.kanon-odmowa .kanon-przycisk {
  margin-top: 1.25rem;
}

/* Ładowanie: `flex items-center justify-center text-sm text-ink-muted` — tekst, nie sam kręciołek. */
.kanon-ladowanie {
  display: flex;
  padding: 3rem 0;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
}

/* ---------------------------------------------------------------- poczekalnia */
/* PoczekalniaKonta: `border-b border-line bg-accent-soft` + `mx-auto flex max-w-6xl items-start gap-3 px-6 py-3.5`. */
.kanon-poczekalnia {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-accent-soft);
}
.kanon-poczekalnia__tresc {
  display: flex;
  max-width: 72rem;
  margin: 0 auto;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  color: var(--color-accent-ink);
}
.kanon-poczekalnia__tresc .kanon-ikona {
  margin-top: 0.125rem;
}
/* `text-sm font-semibold text-accent-ink` */
.kanon-poczekalnia__tytul {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
/* `mt-0.5 text-[13px] leading-relaxed text-accent-ink/80` */
.kanon-poczekalnia__tekst {
  margin: 0.125rem 0 0;
  font-size: 13px;
  line-height: 1.625;
  opacity: 0.8;
}

/* ------------------------------------------------------------------ zakładki */
/* Checklista migracji: pasek `inline-flex flex-wrap rounded-xl border border-line bg-surface p-1`,
   zakładka `flex items-center gap-2 rounded-lg px-3.5 py-1.5 text-sm`, aktywna `bg-brand-soft font-medium text-brand-ink shadow-sm`. */
.kanon-zakladki {
  display: inline-flex;
  flex-wrap: wrap;
  border-radius: 0.75rem;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: 0.25rem;
}
.kanon-zakladka {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  padding: 0.375rem 0.875rem;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.kanon-zakladka:hover {
  background: var(--color-surface-sunken);
}
.kanon-zakladka[aria-selected='true'] {
  background: var(--color-brand-soft);
  font-weight: 500;
  color: var(--color-brand-ink);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.kanon-zakladki__kreska {
  align-self: stretch;
  width: 1px;
  margin: 0.25rem 0.25rem;
  background: var(--color-line);
}

/* ------------------------------------------------------------ stopka ramki */
/* Pasek pod ramką modułu w portalu: `border-t border-line bg-surface px-6 py-2 text-xs text-ink-muted`. */
.kanon-stopka-ramki {
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: 0.5rem 1.5rem;
  font-size: 0.75rem;
  color: var(--color-ink-muted);
}

/* --------------------------------------------------- telefon (375 px) */
@media (max-width: 640px) {
  .kanon-tresc {
    padding: 2rem 1rem;
  }
  .kanon-tresc--modul {
    padding: 1rem;
  }
  .kanon-poczekalnia__tresc {
    padding: 0.875rem 1rem;
  }
}

/* ----------------------------------------------------- ograniczenie ruchu */
@media (prefers-reduced-motion: reduce) {
  .kanon-kafel--narzedzie,
  .kanon-przycisk {
    transition: none;
  }
  .kanon-kafel--narzedzie:hover {
    transform: none;
  }
}