/* Kroje pisma z własnego serwera. Wygenerowane przez
   tools/fonty-lokalne.py, nie poprawiaj ręcznie.
   Rodziny 'X zapasowy' mają miary policzone z POMIARU w przeglądarce,
   osobno dla grubości lekkiej i pogrubionej, żeby zajmowały tyle samo
   miejsca co krój właściwy. Podmiana po wczytaniu nie rusza układu.  */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/archivo-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: 'Archivo zapasowy';
  font-weight: 1 600;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 98.4%;
  ascent-override: 89.23%;
  descent-override: 21.34%;
  line-gap-override: 0.0%;
}

@font-face {
  font-family: 'Archivo zapasowy';
  font-weight: 601 1000;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arial');
  size-adjust: 98.91%;
  ascent-override: 88.77%;
  descent-override: 21.23%;
  line-gap-override: 0.0%;
}

/* Kroje pisma z własnego serwera. Wygenerowane przez
   tools/fonty-lokalne.py, nie poprawiaj ręcznie.
   Rodziny 'X zapasowy' mają miary policzone z POMIARU w przeglądarce,
   osobno dla grubości lekkiej i pogrubionej, żeby zajmowały tyle samo
   miejsca co krój właściwy. Podmiana po wczytaniu nie rusza układu.  */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/source-sans-3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/source-sans-3-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: 'Source Sans 3 zapasowy';
  font-weight: 1 600;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 92.86%;
  ascent-override: 110.27%;
  descent-override: 43.08%;
  line-gap-override: 0.0%;
}

@font-face {
  font-family: 'Source Sans 3 zapasowy';
  font-weight: 601 1000;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arial');
  size-adjust: 92.09%;
  ascent-override: 111.2%;
  descent-override: 43.44%;
  line-gap-override: 0.0%;
}

/* =========================================================================
   MAGNA TYRES POLAND — jeden arkusz, tokeny w :root, bez preprocesorow.

   Skala NIE jest wymyslona. Zmierzona 16.09.2026 na dwoch stronach
   (`wzorzec.py`): hubtractyres.com H1 38 px, arlek.pl H1 50 px. Bierzemy
   srodek widelek, blizej konkurencji, bo to sklep techniczny: H1 42 px.
   Tresc 17 px, a nie 13 jak arlek.pl, bo polowa tej strony to tabele
   danych technicznych czytane na telefonie w warsztacie.

   Barwy z materialu klienta: granat to JEDYNA barwa w oficjalnym logo SVG,
   bursztyn to akcent uzywany w calym jego sklepie.
   ========================================================================= */

:root {
  /* ============================================ BARWY
     Baza jest CZARNA, nie granatowa. Granat i bursztyn to znak klienta
     i zostaja, ale jako tozsamosc, nie jako cale tlo — para granat plus
     bursztyn uzyta wszedzie czyta sie jak gotowy szablon. Ciezar niesie
     czern i stal, jasne sceny stoja na KOSCI, nie na bieli: biel jest
     zimna i tania, kosc ma temperature. */
  --mt-czern:       #0B0E14;   /* tlo scen fotograficznych */
  --mt-grafit:      #141922;   /* panel techniczny */
  --mt-stal:        #232B38;   /* linie i obramowania na ciemnym */
  --mt-stal-jasna:  #394454;

  --mt-granat:        #1C355E;  /* znak klienta */
  --mt-granat-ciemny: #12233F;
  --mt-granat-jasny:  #24457A;
  --mt-bursztyn:      #FEBC32;  /* JEDEN nasycony moment na ekran */
  --mt-bursztyn-ciemny:#D99A0C;

  --mt-kosc:    #F4F2ED;   /* jasne tlo katalogowe */
  --mt-kosc-ciemna: #E8E4DC;
  --mt-bialy:   #FFFFFF;
  --mt-linia:   #DCD8CF;
  --mt-szary:   #5A6472;
  --mt-tekst:   #11161F;

  --mt-od-reki:    #167A4B;
  --mt-zamowienie: #8A6A12;

  /* ============================================ TYPOGRAFIA
     JEDNA rodzina, trzy charaktery — Archivo jest krojem zmiennym
     z osiami `wght` (100-900) ORAZ `wdth` (62-125). Naglowki ida
     szeroko (monumentalnosc), etykiety techniczne waska (panel
     przyrzadu), tresc normalnie. Dwie rodziny neutralnych groteskow
     obok siebie daly wersje, ktora Pawel nazwal „AI vibe za 100 zl". */
  --mt-krój: 'Archivo', 'Archivo zapasowy', system-ui, sans-serif;

  --mt-szeroko:  'wdth' 112;
  --mt-wasko:    'wdth' 74;

  --mt-h1: clamp(34px, 4.2vw, 58px);   --mt-h1-lh: 1.04;
  --mt-h2: clamp(27px, 2.6vw, 38px);   --mt-h2-lh: 1.12;
  --mt-h3: 20px;  --mt-h3-lh: 27px;
  --mt-tresc: 17px; --mt-tresc-lh: 28px;
  --mt-male: 14px;  --mt-male-lh: 21px;
  --mt-mikro: 12px;

  /* ============================================ RYTM (siatka 8 px) */
  --mt-1: 4px;  --mt-2: 8px;   --mt-3: 12px; --mt-4: 16px;
  --mt-5: 24px; --mt-6: 32px;  --mt-7: 48px; --mt-8: 64px;
  --mt-9: 88px; --mt-10: 112px;

  --mt-sekcja:     clamp(56px, 8vw, 104px);
  --mt-sekcja-mala:clamp(32px, 5vw, 56px);

  /* ============================================ SZEROKOSCI
     JEDEN system, zadnych wlasnych max-width w sekcjach. */
  --mt-kontener: 1280px;
  --mt-szeroki:  1560px;
  --mt-margines: 20px;

  --mt-r:      4px;   /* ostrzej niz 8 — narzedzie, nie aplikacja */
  --mt-r-male: 2px;
  --mt-r-pigulka: 999px;

  --mt-cien:      0 1px 2px rgba(11,14,20,.08), 0 6px 18px rgba(11,14,20,.07);
  --mt-cien-mocny:0 2px 6px rgba(11,14,20,.12), 0 18px 44px rgba(11,14,20,.16);

  --mt-ease: cubic-bezier(.22,1,.36,1);
  --mt-szybko: 140ms;
  --mt-zwykle: 240ms;

  --mt-naglowek-wys: 84px;
}

/* Trzy charaktery jednego kroju. Klasy pomocnicze, zeby nie powtarzac
   `font-variation-settings` w kilkudziesieciu miejscach. */
.mt-szeroko { font-variation-settings: var(--mt-szeroko); }
.mt-etykieta,
.mt-nadtytul {
  font-variation-settings: var(--mt-wasko);
  text-transform: uppercase;
  letter-spacing: .14em;
}

@media (max-width: 899px) {
  :root {
    /* ⚠️ h1 i h2 NIE sa tu nadpisywane: maja `clamp()`, ktory skaluje je
       plynnie od 34 px na telefonie do 58 px na duzym ekranie. Sztywna
       wartosc w media query zabijala clamp i dawala ten sam rozmiar
       na 390 i na 899 px. */
    --mt-h3: 18px;  --mt-h3-lh: 26px;
    --mt-tresc: 16px; --mt-tresc-lh: 26px;
    --mt-margines: 16px;
    --mt-naglowek-wys: 64px;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--mt-bialy);
  color: var(--mt-tekst);
  font-family: var(--mt-krój);
  font-size: var(--mt-tresc);
  line-height: var(--mt-tresc-lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--mt-krój);
  font-weight: 700;
  color: var(--mt-granat);
  margin: 0 0 var(--mt-4);
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: var(--mt-h1); line-height: var(--mt-h1-lh); }
h2 { font-size: var(--mt-h2); line-height: var(--mt-h2-lh); }
h3 { font-size: var(--mt-h3); line-height: var(--mt-h3-lh); }

p { margin: 0 0 var(--mt-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--mt-granat); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mt-granat-jasny); }

img, svg, video { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--mt-bursztyn);
  outline-offset: 2px;
  border-radius: var(--mt-r-male);
}

/* Liczby w tabelach danych maja stac w kolumnie, a nie tanczyc. */
.mt-liczby, td, th, .mt-cena, .mt-rozmiar {
  font-variant-numeric: tabular-nums;
}

/* ======================================================== kontenery */
.mt-kontener {
  width: 100%;
  max-width: var(--mt-kontener);
  margin-inline: auto;
  padding-inline: var(--mt-margines);
}
.mt-kontener--szeroki { max-width: var(--mt-szeroki); }
.mt-kontener--pelny   { max-width: none; padding-inline: 0; }

.mt-sekcja { padding-block: var(--mt-sekcja); }
.mt-sekcja--mala { padding-block: var(--mt-sekcja-mala); }

/* Przelamanie: JEDNA ciemna sekcja robi wiecej niz dziesiec odcieni bieli. */
.mt-sekcja--granat {
  background: var(--mt-granat);
  color: #DCE3EC;
}
.mt-sekcja--granat h1,
.mt-sekcja--granat h2,
.mt-sekcja--granat h3 { color: var(--mt-bialy); }
.mt-sekcja--granat a:not(.mt-btn) { color: var(--mt-bursztyn); }

/* ⛔ `:not(.mt-btn)` NIE jest ozdoba. Regula `.mt-sekcja--granat a` ma
   specyficznosc (0,1,1) i bila `.mt-btn--akcent` (0,1,0), wiec przycisk
   w ciemnej sekcji dostawal bursztynowy NAPIS na bursztynowym TLE.
   Na zrzucie pierwszej wersji stal zolty prostokat bez tekstu. */

.mt-sekcja--popiel { background: var(--mt-kosc); }

/* Element z WLASNYM tlem ma WLASNE barwy tekstu — inaczej w ciemnej sekcji
   tytul jasnej karty ginie na wlasnym tle (lekcja: niewidoczne.py). */
.mt-sekcja--granat .mt-karta,
.mt-sekcja--granat .mt-kafel {
  background: var(--mt-bialy);
  color: var(--mt-tekst);
}
.mt-sekcja--granat .mt-karta h3,
.mt-sekcja--granat .mt-kafel h3 { color: var(--mt-granat); }

/* ======================================================== nadtytul */




/* ======================================================== przyciski */
.mt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mt-2);
  min-height: 48px;
  padding: 0 var(--mt-5);
  border: 2px solid transparent;
  border-radius: var(--mt-r);
  font-family: var(--mt-krój);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mt-zwykle) var(--mt-ease),
              border-color var(--mt-zwykle) var(--mt-ease),
              color var(--mt-zwykle) var(--mt-ease),
              transform var(--mt-szybko) var(--mt-ease);
}
.mt-btn:active { transform: translateY(1px); }

/* Jeden nasycony moment na ekran: bursztyn nalezy do wezwania. */
.mt-btn--akcent {
  background: var(--mt-bursztyn);
  color: var(--mt-granat);
}
.mt-btn--akcent:hover { background: var(--mt-bursztyn-ciemny); color: var(--mt-granat); }

.mt-btn--granat { background: var(--mt-granat); color: var(--mt-bialy); }
.mt-btn--granat:hover { background: var(--mt-granat-jasny); color: var(--mt-bialy); }

.mt-btn--obrys {
  background: transparent;
  border-color: var(--mt-granat);
  color: var(--mt-granat);
}
.mt-btn--obrys:hover { background: var(--mt-granat); color: var(--mt-bialy); }

.mt-sekcja--granat .mt-btn--obrys { border-color: rgba(255,255,255,.5); color: var(--mt-bialy); }
.mt-sekcja--granat .mt-btn--obrys:hover { background: var(--mt-bialy); color: var(--mt-granat); }

/* ======================================================== odznaki */
.mt-odznaka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--mt-r-pigulka);
  font-size: var(--mt-mikro);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.mt-odznaka--od-reki {
  background: rgba(22,122,75,.10);
  color: var(--mt-od-reki);
}
.mt-odznaka--na-zamowienie {
  background: rgba(138,106,18,.12);
  color: var(--mt-zamowienie);
}
.mt-odznaka--zima {
  background: rgba(28,53,94,.08);
  color: var(--mt-granat);
}

/* ======================================================== siatki */
.mt-siatka { display: grid; gap: var(--mt-5); }
.mt-siatka--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-siatka--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt-siatka--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .mt-siatka--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 899px)  { .mt-siatka--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 599px)  {
  .mt-siatka--2, .mt-siatka--3, .mt-siatka--4 { grid-template-columns: minmax(0,1fr); }
}

/* ========================================================== NAGLOWEK
   Menu na desktopie to SAME NAPISY. Bez tla, bez obwodki, bez podkreslenia.
   Po najechaniu zmienia sie WYLACZNIE barwa napisu i nic nie zmienia
   szerokosci (root CLAUDE.md, zasada twarda, zlamana dwa razy). */

.mt-naglowek {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mt-bialy);
  border-bottom: 1px solid var(--mt-linia);
  transition: box-shadow var(--mt-zwykle) var(--mt-ease);
}
.mt-naglowek.jest-przewiniety { box-shadow: var(--mt-cien); }

.mt-naglowek__rzad {
  display: flex;
  align-items: center;
  gap: var(--mt-6);
  height: var(--mt-naglowek-wys);
}

.mt-naglowek__znak { display: flex; align-items: center; gap: var(--mt-3); text-decoration: none; }
.mt-logo { width: auto; height: 52px; color: var(--mt-granat); }
@media (max-width: 899px) { .mt-logo { height: 40px; } }

.mt-naglowek__nazwa {
  font-family: var(--mt-krój);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mt-granat);
  letter-spacing: -.01em;
}
.mt-naglowek__nazwa span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mt-szary);
}

.mt-menu { display: flex; align-items: center; gap: var(--mt-5); margin-left: auto; }
.mt-menu a {
  font-family: var(--mt-krój);
  font-size: 15px;
  font-weight: 600;
  color: var(--mt-tekst);
  text-decoration: none;
  transition: color var(--mt-szybko) var(--mt-ease);
}
.mt-menu a:hover,
.mt-menu .current-menu-item > a { color: var(--mt-granat-jasny); }

.mt-naglowek__kontakt {
  display: flex;
  align-items: center;
  gap: var(--mt-4);
  padding-left: var(--mt-5);
  border-left: 1px solid var(--mt-linia);
}
.mt-naglowek__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-2);
  font-family: var(--mt-krój);
  font-size: 17px;
  font-weight: 700;
  color: var(--mt-granat);
  text-decoration: none;
  white-space: nowrap;
}
.mt-naglowek__tel:hover { color: var(--mt-granat-jasny); }

.mt-koszyk {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--mt-granat);
  text-decoration: none;
}
.mt-koszyk__ile {
  position: absolute;
  top: 2px; right: 0;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--mt-r-pigulka);
  background: var(--mt-bursztyn);
  color: var(--mt-granat);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.mt-hamburger {
  display: none;
  width: 48px; height: 48px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--mt-granat);
  cursor: pointer;
}
@media (max-width: 1099px) {
  .mt-menu, .mt-naglowek__kontakt { display: none; }
  .mt-hamburger { display: inline-flex; }
}

/* ---- menu na telefonie: pelny ekran, nie nakladka nad trescia ---- */
.mt-menu-tel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--mt-granat);
  color: var(--mt-bialy);
  transform: translateX(100%);
  transition: transform var(--mt-zwykle) var(--mt-ease);
  overflow-y: auto;
}
.mt-menu-tel.jest-otwarte { transform: translateX(0); }
body.menu-otwarte { overflow: hidden; }

.mt-menu-tel__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--mt-naglowek-wys);
  padding-inline: var(--mt-margines);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.mt-menu-tel__zamknij {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--mt-bialy); cursor: pointer;
}
.mt-menu-tel nav { padding: var(--mt-5) var(--mt-margines); }
.mt-menu-tel nav a {
  display: block;
  padding: var(--mt-3) 0;
  font-family: var(--mt-krój);
  font-size: 22px;
  font-weight: 700;
  color: var(--mt-bialy);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.mt-menu-tel__stopka {
  margin-top: auto;
  padding: var(--mt-5) var(--mt-margines) var(--mt-7);
  display: grid;
  gap: var(--mt-3);
}

/* ======================================================== TELEFON RUCHOMY
   Pojawia sie po 400 px przewiniecia, zeby nie zaslanial pierwszego ekranu. */
.mt-tel-ruchomy {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--mt-bursztyn);
  color: var(--mt-granat);
  box-shadow: var(--mt-cien-mocny);
  text-decoration: none;
}
.mt-tel-ruchomy.jest-widoczny { display: inline-flex; }
@media (min-width: 1100px) { .mt-tel-ruchomy { display: none !important; } }

/* ============================================================ HERO
   Pelnoekranowa fotografia kola, nie prostokat w kolorze marki.
   Dwie poprzednie wersje wrocily z ocena „AI vibe": pierwsza nie miala
   zadnego zdjecia, druga miala render na plaskim granacie. Tu pierwszy
   ekran jest FOTOGRAFIA, a typografia lezy na niej. */

.mt-hero {
  position: relative;
  min-height: min(760px, 86vh);
  display: grid;
  align-items: end;
  background: var(--mt-czern);
  color: #E6EAF1;
  overflow: hidden;
  isolation: isolate;
}
.mt-hero__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mt-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 56%;
  display: block;
}
/* Trzy warstwy, nie jedna: pion pod typografie, poziom pod czytelnosc,
   winieta pod skupienie. Jedna plaska zaslona daje „baner". */
.mt-hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,14,20,.72) 0%, rgba(11,14,20,.18) 34%, rgba(11,14,20,.94) 88%),
    linear-gradient(90deg, rgba(11,14,20,.86) 0%, rgba(11,14,20,.28) 52%, rgba(11,14,20,.55) 100%);
}

.mt-hero__uklad {
  position: relative;
  z-index: 2;
  padding-block: clamp(80px, 12vw, 132px) clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: end;
  gap: var(--mt-7);
}
.mt-hero h1 {
  color: var(--mt-bialy);
  font-size: var(--mt-h1);
  line-height: var(--mt-h1-lh);
  font-weight: 800;
  font-variation-settings: var(--mt-szeroko);
  letter-spacing: -.018em;
  margin: 0 0 var(--mt-4);
  text-wrap: balance;
}
.mt-hero__lead {
  font-size: 18px;
  line-height: 29px;
  color: #BDC7D6;
  margin: 0;
}

/* Kreska nad nadtytulem: znak, ze zaczyna sie scena. Bursztyn tylko tu
   i przy jednym wezwaniu — reszta strony go nie uzywa. */
.mt-nadtytul {
  display: flex;
  align-items: center;
  gap: var(--mt-3);
  font-size: var(--mt-mikro);
  font-weight: 700;
  color: var(--mt-granat);
  margin: 0 0 var(--mt-4);
}
.mt-nadtytul::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--mt-bursztyn);
  flex: 0 0 auto;
}
.mt-nadtytul--jasny { color: var(--mt-bursztyn); }

@media (max-width: 999px) {
  .mt-hero { min-height: 0; }
  .mt-hero__uklad { grid-template-columns: minmax(0,1fr); gap: var(--mt-5); }
  .mt-hero__lead { font-size: 16px; line-height: 26px; }
}

/* ================================================ WYSZUKIWARKA ROZMIARU
   Najwazniejsza kontrolka sklepu. Na fotografii, w ciemnym pudelku ze
   szklem — nie biala karta, ktora wyglada jak wyciety formularz. */

.mt-szukaj-rozmiar {
  background: rgba(15,20,29,.82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--mt-r);
  padding: var(--mt-5);
  color: #E6EAF1;
}
.mt-szukaj-rozmiar__tytul {
  display: flex;
  align-items: center;
  gap: var(--mt-2);
  font-size: var(--mt-mikro);
  font-weight: 700;
  font-variation-settings: var(--mt-wasko);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--mt-bursztyn);
  margin: 0 0 var(--mt-3);
}
.mt-szukaj-rozmiar__pole { display: flex; gap: var(--mt-2); }
.mt-szukaj-rozmiar input[type="search"],
.mt-szukaj-rozmiar input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 54px;
  padding: 0 var(--mt-4);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--mt-r);
  background: rgba(8,11,17,.7);
  color: var(--mt-bialy);
  font-family: var(--mt-krój);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--mt-szybko) var(--mt-ease);
}
.mt-szukaj-rozmiar input:focus { border-color: var(--mt-bursztyn); outline: none; }
.mt-szukaj-rozmiar input::placeholder { color: #8A94A4; font-weight: 500; }
.mt-szukaj-rozmiar .mt-btn { min-height: 54px; flex: 0 0 auto; }
.mt-szukaj-rozmiar__wskazowka {
  margin: var(--mt-3) 0 0;
  font-size: 13px;
  line-height: 20px;
  color: #9BA6B6;
}
.mt-szukaj-rozmiar__wskazowka strong { color: #E6EAF1; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .mt-szukaj-rozmiar__pole { flex-wrap: wrap; }
  .mt-szukaj-rozmiar .mt-btn { width: 100%; justify-content: center; }
}

/* ===================================== PASEK ROZMIAROW (panel techniczny)
   Waski pas pod hero: najczestsze rozmiary jako skroty. Krój kondensowany
   i cyfry tabularne — to ma czytac sie jak tabliczka znamionowa,
   nie jak chmura tagow. */

.mt-pasek-rozmiarow {
  background: var(--mt-grafit);
  border-block: 1px solid var(--mt-stal);
  color: #C8D1DF;
}
.mt-pasek-rozmiarow__uklad {
  display: flex;
  align-items: center;
  gap: var(--mt-5);
  padding-block: var(--mt-4);
  flex-wrap: wrap;
}
.mt-pasek-rozmiarow__etykieta {
  font-size: var(--mt-mikro);
  font-weight: 700;
  font-variation-settings: var(--mt-wasko);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #7E8B9E;
  margin: 0;
  flex: 0 0 auto;
}
.mt-pasek-rozmiarow__lista { display: flex; flex-wrap: wrap; gap: var(--mt-2); }
.mt-pasek-rozmiarow__lista a {
  padding: 7px 13px;
  border: 1px solid var(--mt-stal);
  border-radius: var(--mt-r-male);
  font-size: var(--mt-male);
  font-weight: 600;
  color: #D6DEEA;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--mt-szybko) var(--mt-ease),
              background var(--mt-szybko) var(--mt-ease);
}
.mt-pasek-rozmiarow__lista a:hover {
  border-color: var(--mt-bursztyn);
  background: rgba(254,188,50,.08);
  color: var(--mt-bialy);
}

/* ================================================== LICZBY (pasek faktow) */
.mt-fakty {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mt-5);
}
.mt-fakt { display: flex; flex-direction: column; gap: 2px; }
.mt-fakt__liczba {
  font-size: 30px;
  font-weight: 800;
  font-variation-settings: var(--mt-szeroko);
  line-height: 1.05;
  color: var(--mt-bialy);
  font-variant-numeric: tabular-nums;
}
.mt-fakt__opis {
  font-size: var(--mt-mikro);
  line-height: 17px;
  color: #93A0B2;
  font-variation-settings: var(--mt-wasko);
  text-transform: uppercase;
  letter-spacing: .1em;
}
@media (max-width: 720px) { .mt-fakty { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* =========================================== SCENA KATALOGOWA (jasna)
   Render klienta duzy, obok TABELA danych technicznych. Nie kafle:
   kupujacy opony ciezarowe czyta tabele, bo tak wyglada karta produktu
   u producenta i tak porownuje modele. */

.mt-sekcja { padding-block: var(--mt-sekcja); }
.mt-sekcja--kosc { background: var(--mt-kosc); }
.mt-sekcja--grafit { background: var(--mt-grafit); color: #C8D1DF; }
.mt-sekcja--grafit h2, .mt-sekcja--grafit h3 { color: var(--mt-bialy); }

.mt-katalog { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--mt-8); align-items: center; }
@media (max-width: 999px) { .mt-katalog { grid-template-columns: minmax(0,1fr); gap: var(--mt-6); } }

.mt-katalog__obraz { position: relative; display: flex; justify-content: center; }
.mt-katalog__obraz img {
  width: min(420px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 40px rgba(11,14,20,.26));
}
/* okrag za oponą — buduje glebie na plaskiej kosci */
.mt-katalog__obraz::before {
  content: "";
  position: absolute;
  inset: 8% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28,53,94,.10) 0%, rgba(28,53,94,0) 68%);
  z-index: -1;
}

h2 {
  font-size: var(--mt-h2);
  line-height: var(--mt-h2-lh);
  font-weight: 800;
  font-variation-settings: var(--mt-szeroko);
  letter-spacing: -.012em;
  color: var(--mt-tekst);
  margin: 0 0 var(--mt-4);
  text-wrap: balance;
}
.mt-wstep { color: var(--mt-szary); margin: 0 0 var(--mt-6); }

/* --- tabela danych: liczby tabularne, etykiety kondensowane --- */
.mt-dane { width: 100%; border-collapse: collapse; margin-top: var(--mt-5); }
.mt-dane th, .mt-dane td {
  text-align: left;
  padding: var(--mt-3) 0;
  border-bottom: 1px solid var(--mt-linia);
  vertical-align: baseline;
}
.mt-dane th {
  width: 42%;
  font-size: var(--mt-mikro);
  font-weight: 700;
  font-variation-settings: var(--mt-wasko);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mt-szary);
}
.mt-dane td {
  font-size: 16px;
  font-weight: 600;
  color: var(--mt-tekst);
  font-variant-numeric: tabular-nums;
}
.mt-sekcja--grafit .mt-dane th { color: #8593A6; }
.mt-sekcja--grafit .mt-dane td { color: var(--mt-bialy); }
.mt-sekcja--grafit .mt-dane th,
.mt-sekcja--grafit .mt-dane td { border-color: var(--mt-stal); }

/* ========================================== PAS RZEZBY BIEZNIKA
   Materiał klienta na pelna szerokosc okna. Proporcja pliku JEST
   proporcja pola (`aspect-ratio`), wiec `cover` nie ma czego docinac. */

.mt-pas-bieznik {
  position: relative;
  aspect-ratio: 1920 / 260;
  overflow: hidden;
  background: var(--mt-czern);
}
.mt-pas-bieznik img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-pas-bieznik--z-ciemnego::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11,14,20,.9) 0%, rgba(11,14,20,0) 44%);
}

/* ==================================================== PANEL OSI
   Jeden duzy rysunek zamiast trzech rownych kafli. Kupujacy pokazuje
   palcem os, na ktorej ma problem — to jest jezyk tej branzy. */

.mt-naglowek-sekcji { margin-bottom: var(--mt-6); }
.mt-naglowek-sekcji--z-linkiem {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mt-5);
  flex-wrap: wrap;
}
.mt-naglowek-sekcji--z-linkiem h2 { margin-bottom: 0; }

.mt-link-dalej {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-2);
  font-weight: 700;
  font-size: var(--mt-male);
  color: var(--mt-granat);
  text-decoration: none;
  white-space: nowrap;
}
.mt-sekcja--grafit .mt-link-dalej { color: var(--mt-bursztyn); }
.mt-link-dalej .mt-ikona { transition: transform var(--mt-zwykle) var(--mt-ease); }
.mt-link-dalej:hover .mt-ikona { transform: translateX(4px); }

.mt-osie-schemat { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--mt-7); align-items: center; }
@media (max-width: 999px) { .mt-osie-schemat { grid-template-columns: minmax(0,1fr); } }

.mt-osie-schemat__rysunek { position: relative; }
.mt-osie-schemat__rysunek > img { width: 100%; height: auto; display: block; }

.mt-osie-schemat__strefa {
  position: absolute;
  display: block;
  text-decoration: none;
  border-radius: var(--mt-r-male);
  height: 18.3%;
}
.mt-osie-schemat__strefa--prowadzaca { left: 12.2%; width: 8.8%;  top: 64.9%; }
.mt-osie-schemat__strefa--napedowa   { left: 39.3%; width: 8.8%;  top: 68.8%; }
.mt-osie-schemat__strefa--naczepowa  { left: 62.2%; width: 27.9%; top: 68.8%; }

.mt-osie-schemat__znacznik {
  position: absolute;
  inset: -6% -8%;
  border: 2px solid var(--mt-bursztyn);
  border-radius: var(--mt-r-pigulka);
  opacity: .34;
  transform: scale(.94);
  transition: opacity var(--mt-zwykle) var(--mt-ease), transform var(--mt-zwykle) var(--mt-ease);
}
.mt-osie-schemat__etykieta {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translate(-50%, 6px);
  padding: 4px 10px;
  border-radius: var(--mt-r-male);
  background: var(--mt-bursztyn);
  color: var(--mt-czern);
  font-size: var(--mt-mikro);
  font-weight: 700;
  font-variation-settings: var(--mt-wasko);
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--mt-zwykle) var(--mt-ease), transform var(--mt-zwykle) var(--mt-ease);
}
.mt-osie-schemat__strefa:hover .mt-osie-schemat__znacznik,
.mt-osie-schemat__strefa:focus-visible .mt-osie-schemat__znacznik,
.mt-osie-schemat__strefa.jest-wskazana .mt-osie-schemat__znacznik { opacity: 1; transform: scale(1); }
.mt-osie-schemat__strefa:hover .mt-osie-schemat__etykieta,
.mt-osie-schemat__strefa:focus-visible .mt-osie-schemat__etykieta,
.mt-osie-schemat__strefa.jest-wskazana .mt-osie-schemat__etykieta { opacity: 1; transform: translate(-50%, 0); }

.mt-osie-lista { list-style: none; margin: 0; padding: 0; }
.mt-osie-lista li + li { border-top: 1px solid var(--mt-stal); }

.mt-os {
  display: flex;
  align-items: flex-start;
  gap: var(--mt-4);
  padding: var(--mt-4) var(--mt-2);
  text-decoration: none;
  color: inherit;
  transition: background var(--mt-zwykle) var(--mt-ease), padding-inline var(--mt-zwykle) var(--mt-ease);
}
.mt-os:hover, .mt-os:focus-visible, .mt-os.jest-wskazana {
  background: rgba(255,255,255,.04);
  padding-inline: var(--mt-4) var(--mt-2);
}
.mt-os__nr {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--mt-bursztyn);
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--mt-wasko);
}
.mt-os__tresc { flex: 1 1 auto; min-width: 0; }
.mt-os__nazwa {
  display: block;
  font-size: 19px;
  font-weight: 700;
  font-variation-settings: var(--mt-szeroko);
  color: var(--mt-bialy);
  margin: 0 0 2px;
}
.mt-os__opis { display: block; font-size: var(--mt-male); line-height: var(--mt-male-lh); color: #96A2B4; margin: 0; }
.mt-os__strzalka { flex: 0 0 auto; color: var(--mt-bursztyn); padding-top: 5px; }
.mt-os__strzalka .mt-ikona { transition: transform var(--mt-zwykle) var(--mt-ease); }
.mt-os:hover .mt-os__strzalka .mt-ikona { transform: translateX(4px); }

/* ============================================ SCENA Z FOTOGRAFIA
   Sekcja, w ktorej zdjecie zajmuje POLOWE okna i dochodzi do jego
   krawedzi. Material 1600 px pokazany w polu 400 px to material
   zmarnowany. */

.mt-scena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--mt-czern);
  color: #D5DDE9;
}
.mt-scena--jasna { background: var(--mt-kosc); color: var(--mt-tekst); }
.mt-scena--odwrotna .mt-scena__foto { order: 2; }

.mt-scena__foto { position: relative; min-height: 420px; }
.mt-scena__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.mt-scena__tresc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--mt-sekcja) clamp(24px, 5vw, 76px);
}
.mt-scena h2 { color: inherit; }
.mt-scena--jasna h2 { color: var(--mt-tekst); }
.mt-scena__lead { font-size: 17px; line-height: 28px; color: inherit; opacity: .84; margin: 0 0 var(--mt-5); }

.mt-scena__punkty { list-style: none; margin: 0 0 var(--mt-6); padding: 0; display: grid; gap: var(--mt-3); }
.mt-scena__punkty li { display: flex; gap: var(--mt-3); align-items: flex-start; }
.mt-scena__punkty .mt-ikona { flex: 0 0 auto; color: var(--mt-bursztyn); margin-top: 3px; }

@media (max-width: 899px) {
  .mt-scena { grid-template-columns: minmax(0,1fr); }
  .mt-scena--odwrotna .mt-scena__foto { order: 0; }
  .mt-scena__foto { min-height: 260px; }
}

/* =========================================================== ATUTY */
.mt-atuty {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mt-6) var(--mt-5);
}
@media (max-width: 899px) { .mt-atuty { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 519px) { .mt-atuty { grid-template-columns: minmax(0,1fr); } }

.mt-atut__ikona { display: block; color: var(--mt-granat); margin-bottom: var(--mt-3); }
.mt-sekcja--grafit .mt-atut__ikona { color: #C8D1DF; }
.mt-atut__tytul {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  font-variation-settings: var(--mt-szeroko);
  margin: 0 0 var(--mt-2);
  color: var(--mt-tekst);
}
.mt-sekcja--grafit .mt-atut__tytul { color: var(--mt-bialy); }
.mt-atut__opis { font-size: var(--mt-male); line-height: var(--mt-male-lh); color: var(--mt-szary); margin: 0; }
.mt-sekcja--grafit .mt-atut__opis { color: #96A2B4; }

.mt-ikona-marki { display: inline-block; vertical-align: middle; }
.mt-ikona-marki .mt-ikona__akcent { color: var(--mt-bursztyn); }

/* ===================================================== SEKCJA MARKI */
.mt-marka { position: relative; overflow: hidden; background: var(--mt-czern); color: #D5DDE9; isolation: isolate; }
.mt-marka__tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; z-index: 0; }
.mt-marka__zaslona {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Zaslona MOCNA po lewej (pod tekst) i SLABA po prawej — inaczej
     zjada wytloczenie MAGNA, czyli jedyny powod, dla ktorego ta
     fotografia tu stoi. Poprzednia wersja konczyla sie na .5 i sekcja
     czytala sie jak tekst na czarnym prostokacie. */
  background: linear-gradient(90deg,
    rgba(11,14,20,.95) 0%, rgba(11,14,20,.88) 38%,
    rgba(11,14,20,.45) 66%, rgba(11,14,20,.12) 100%);
}
.mt-marka { min-height: 480px; display: flex; align-items: center; }
.mt-marka__tresc {
  position: relative;
  z-index: 2;
  padding-block: var(--mt-sekcja);
  display: grid;
  /* Wiersz skraca KOLUMNA, nigdy `max-width` na tekscie (zakaz Pawla). */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--mt-6);
  width: 100%;
}
.mt-marka__tresc > * { grid-column: 1; }
.mt-marka h2 { color: var(--mt-bialy); }
.mt-marka__lead { font-size: 17px; line-height: 28px; color: #BDC7D6; margin-bottom: var(--mt-5); }
.mt-marka p:last-child { margin-bottom: 0; }
/* ⛔ Bez drugiego renderu w tej sekcji: czarna opona na prawie czarnym
   tle jest niewidoczna, a sekcje niesie wytloczenie MAGNA w tle. */
@media (max-width: 899px) {
  .mt-marka__tresc { grid-template-columns: minmax(0,1fr); }
}

/* ================================================== PUSTA POLKA */
.mt-pusto {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--mt-2);
  padding: var(--mt-8) var(--mt-4);
  background: var(--mt-bialy);
  border: 1px solid var(--mt-linia);
  border-radius: var(--mt-r);
  color: var(--mt-granat);
}
.mt-pusto__tytul { font-size: 19px; font-weight: 700; font-variation-settings: var(--mt-szeroko); margin: var(--mt-2) 0 0; }
.mt-pusto__opis { color: var(--mt-szary); margin: 0; }

/* ============================================ ZAKLADKA W PRZYGOTOWANIU */
.mt-przygotowanie {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--mt-naglowek-wys));
  background: var(--mt-czern);
  color: #D5DDE9;
  overflow: hidden;
  isolation: isolate;
}
.mt-przygotowanie__scena { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mt-przygotowanie__scena::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 85% at 14% 0%, rgba(28,53,94,.55) 0%, rgba(11,14,20,0) 62%);
}
.mt-przygotowanie__luk {
  position: absolute;
  right: -12%;
  top: 50%;
  width: min(620px, 56vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(254,188,50,.22);
}
.mt-przygotowanie__tresc { position: relative; z-index: 2; padding-block: var(--mt-8); }
.mt-przygotowanie h1 { color: var(--mt-bialy); font-size: var(--mt-h2); line-height: var(--mt-h2-lh); font-weight: 800; font-variation-settings: var(--mt-szeroko); margin-bottom: var(--mt-3); }
.mt-przygotowanie__lead { font-size: 18px; line-height: 29px; color: #BDC7D6; margin-bottom: var(--mt-6); }
.mt-przygotowanie__punkty { list-style: none; margin: 0 0 var(--mt-6); padding: 0; display: grid; gap: var(--mt-3); }
.mt-przygotowanie__punkty li { display: flex; align-items: center; gap: var(--mt-3); }
.mt-przygotowanie__punkty .mt-ikona { flex: 0 0 auto; color: var(--mt-bursztyn); }
.mt-przygotowanie__dzialania { display: flex; flex-wrap: wrap; gap: var(--mt-3); }

.mt-btn--obrys-jasny { background: transparent; border-color: rgba(255,255,255,.4); color: var(--mt-bialy); }
.mt-btn--obrys-jasny:hover { background: var(--mt-bialy); color: var(--mt-czern); border-color: var(--mt-bialy); }

/* ================================================== KARTA PRODUKTU
   Dane na wierzchu. Na starym sklepie cena lezala 952 px od gory
   na telefonie — czyli poza pierwszym ekranem. */

.mt-produkty { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--mt-4); }
@media (max-width: 1099px) { .mt-produkty { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 599px)  { .mt-produkty { grid-template-columns: minmax(0,1fr); } }

.mt-produkt {
  display: flex;
  flex-direction: column;
  background: var(--mt-bialy);
  border: 1px solid var(--mt-linia);
  border-radius: var(--mt-r);
  overflow: hidden;
  transition: border-color var(--mt-zwykle) var(--mt-ease),
              box-shadow var(--mt-zwykle) var(--mt-ease);
}
.mt-produkt:hover { border-color: #C3CEDC; box-shadow: var(--mt-cien); }

.mt-produkt__zdjecie {
  position: relative;
  aspect-ratio: 1 / 1;          /* pliki sa 3000x3000, wiec nic nie docinamy */
  background: var(--mt-kosc);
  overflow: hidden;
}
.mt-produkt__zdjecie img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--mt-4);
  transition: transform var(--mt-zwykle) var(--mt-ease);
}
.mt-produkt:hover .mt-produkt__zdjecie img { transform: scale(1.04); }

.mt-produkt__znaczki {
  position: absolute;
  top: var(--mt-3); left: var(--mt-3);
  display: flex; flex-wrap: wrap; gap: 6px;
}

.mt-produkt__tresc { display: flex; flex-direction: column; gap: var(--mt-3); padding: var(--mt-4); flex: 1 1 auto; }

.mt-produkt__rozmiar {
  font-family: var(--mt-krój);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--mt-granat);
  font-variant-numeric: tabular-nums;
}
.mt-produkt__wzor { font-size: var(--mt-male); color: var(--mt-szary); }
.mt-produkt__wzor strong { color: var(--mt-tekst); font-weight: 600; }

.mt-produkt__dane {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--mt-2);
  padding: var(--mt-3) 0;
  border-block: 1px solid var(--mt-linia);
}
.mt-produkt__dana { min-width: 0; }
.mt-produkt__dana dt {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mt-szary);
  margin: 0 0 1px;
}
.mt-produkt__dana dd {
  margin: 0;
  font-family: var(--mt-krój);
  font-size: 15px;
  font-weight: 700;
  color: var(--mt-tekst);
  font-variant-numeric: tabular-nums;
}

.mt-produkt__dol { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mt-3); }
.mt-produkt__cena {
  font-family: var(--mt-krój);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mt-granat);
  font-variant-numeric: tabular-nums;
}
.mt-produkt__cena small { display: block; font-size: var(--mt-mikro); font-weight: 500; color: var(--mt-szary); }

/* ======================================================== STOPKA */
.mt-stopka { background: var(--mt-granat-ciemny); color: #AEBDD0; padding-block: var(--mt-8) var(--mt-5); }
.mt-stopka h3 {
  color: var(--mt-bialy);
  font-size: var(--mt-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--mt-3);
}
.mt-stopka a { color: #C7D2E0; text-decoration: none; }
.mt-stopka a:hover { color: var(--mt-bursztyn); }
.mt-stopka__siatka { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--mt-6); }
@media (max-width: 999px) { .mt-stopka__siatka { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 599px) { .mt-stopka__siatka { grid-template-columns: minmax(0,1fr); } }
.mt-stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mt-2); }
.mt-stopka__dol {
  margin-top: var(--mt-7);
  padding-top: var(--mt-4);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--mt-3);
  justify-content: space-between;
  font-size: var(--mt-male);
}

/* ===================================================== WEJSCIA SEKCJI
   Animujemy `translate`, NIGDY `transform` — `animation-fill-mode: both`
   przypina wlasciwosc na zawsze i zabija `:hover` (lekcja z PETELA
   i PROJEKTU OSWIATA, dwa wystapienia). */
.mt-wejscie { opacity: 0; translate: 0 14px; }
.mt-wejscie.jest-widoczne { animation: mt-wejscie 420ms var(--mt-ease) both; }
@keyframes mt-wejscie {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-wejscie { opacity: 1; translate: none; }
}

/* ============================================ dostepnosc i drobiazgi */
.mt-omin {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 12px 20px;
  background: var(--mt-bursztyn);
  color: var(--mt-granat);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--mt-r) 0;
}
.mt-omin:focus { left: 0; }

.mt-tylko-czytnik {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mt-kafel { background: var(--mt-bialy); border: 1px solid var(--mt-linia); }

/* Proza podstron: PELNA szerokosc kontenera, lewo-wyrownana.
   Zadnego `max-width` w `ch` — twardy standard Pawla. */
.mt-proza h2 { margin-top: var(--mt-7); }
.mt-proza h3 { margin-top: var(--mt-5); }
.mt-proza ul, .mt-proza ol { padding-left: 1.2em; margin: 0 0 var(--mt-4); }
.mt-proza li { margin-bottom: var(--mt-2); }
.mt-proza table { width: 100%; border-collapse: collapse; margin: var(--mt-4) 0; }
.mt-proza th, .mt-proza td { padding: 10px 12px; border-bottom: 1px solid var(--mt-linia); text-align: left; }
.mt-proza th { font-family: var(--mt-krój); font-size: var(--mt-male); color: var(--mt-granat); }