/* dixor.pl — arkusz serwisu (przebudowa 2026-10-23).
   Klasy: zasady/DESIGN.md par. 5 (lista zamknięta).
   Paleta własna dixor.pl. Skala odstępów 8 px: 8, 16, 24, 32, 48, 64. */

:root {
  --primary:        #0F6B63;
  --primary-hover:  #0B524C;
  --on-primary:     #FFFFFF;
  --accent:         #B45309;

  --canvas:         #F6F7F5;
  --surface:        #FFFFFF;
  --surface-2:      #ECEFEC;

  --ink:            #14212B;
  --body:           #36434D;
  --muted:          #5F6B74;
  --hairline:       #DCE1DD;

  --success:        #15803D;
  --danger:         #B91C1C;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font: 400 16px/1.6 var(--font);
}
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--primary); }
a:hover, a:focus-visible { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

h1, h2, h3 { color: var(--ink); margin: 0 0 16px; }
h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 650; line-height: 1.2; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 16px; }

/* --- układ --------------------------------------------------- */
.kontener { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.kontener--waski { max-width: 720px; }
.sekcja { padding: 48px 0; }
.sekcja--tlo { background: var(--surface-2); }
@media (min-width: 768px) { .sekcja { padding: 64px 0; } }

.siatka { display: grid; gap: 16px; }
@media (min-width: 640px)  { .siatka--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .siatka--4 { grid-template-columns: repeat(4, 1fr); } .siatka--2 { gap: 24px; } }
@media (min-width: 640px) and (max-width: 959px) { .siatka--4 { grid-template-columns: repeat(2, 1fr); } }

/* --- nagłówek i menu ----------------------------------------- */
.naglowek { background: var(--surface); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 10; }
.naglowek__pasek { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.logo svg { width: 24px; height: 24px; color: var(--primary); }
.logo span span { color: var(--primary); }

.menu { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; align-items: center; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--body); text-decoration: none; font-weight: 500; font-size: 15px; border-radius: 6px; }
.menu a:hover, .menu a:focus-visible { color: var(--ink); background: var(--surface-2); }
.menu__pozycja--aktywna > a { color: var(--primary); }
@media (min-width: 1024px) { .menu { display: block; } }

.menu-mobilne { position: relative; }
.menu-mobilne summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--hairline); border-radius: 6px; font-weight: 600; color: var(--ink); }
.menu-mobilne summary::-webkit-details-marker { display: none; }
.menu-mobilne ul { position: absolute; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 8px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 33, 43, .12); min-width: 240px; }
.menu-mobilne a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; text-decoration: none; color: var(--body); border-radius: 6px; }
.menu-mobilne a:hover, .menu-mobilne a:focus-visible { background: var(--surface-2); color: var(--ink); }
@media (min-width: 1024px) { .menu-mobilne { display: none; } }

/* --- przyciski ----------------------------------------------- */
.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; border-radius: 6px; font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background-color .15s ease-out, color .15s ease-out; }
.przycisk--glowny { background: var(--primary); color: var(--on-primary); }
.przycisk--glowny:hover, .przycisk--glowny:focus-visible { background: var(--primary-hover); color: var(--on-primary); }
.przycisk--obrys { border-color: var(--primary); color: var(--primary); background: transparent; }
.przycisk--obrys:hover, .przycisk--obrys:focus-visible { background: #E3F0EE; color: var(--primary-hover); }
.przycisk--tekst { padding: 0; min-height: 44px; color: var(--primary); }
.przycisk--tekst:hover, .przycisk--tekst:focus-visible { text-decoration: underline; }
.przycisk--maly { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* --- wstęp (hero) -------------------------------------------- */
.wstep { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.wstep__uklad { display: grid; gap: 32px; padding: 48px 0; align-items: center; }
@media (min-width: 960px) { .wstep__uklad { grid-template-columns: 1.1fr 1fr; padding: 64px 0; gap: 48px; } }
.wstep__podtytul { font-size: 18px; color: var(--body); max-width: 560px; }
.wstep__akcje { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.wstep__fakty { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 32px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.wstep__fakty li { display: flex; align-items: center; gap: 8px; }
.wstep__fakty svg { width: 16px; height: 16px; color: var(--primary); flex: none; }

.mapa { position: relative; background: #E8EEEA; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; }
.mapa svg { width: 100%; height: 100%; }
.mapa__tabliczka { position: absolute; left: 16px; bottom: 16px; right: 16px; background: var(--surface); border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(20, 33, 43, .08); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 12px; color: var(--muted); }
.mapa__tabliczka b { display: block; font: 600 16px/1.3 var(--mono); color: var(--ink); }
.mapa__podpis { position: absolute; top: 16px; left: 16px; }

/* --- karty, znaczniki ---------------------------------------- */
.karta { background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 24px; box-shadow: 0 2px 4px rgba(20, 33, 43, .06); transition: transform .15s ease-out; display: flex; flex-direction: column; }
a.karta { text-decoration: none; color: inherit; }
a.karta:hover, a.karta:focus-visible { transform: translateY(-1px); }
.karta h3 { margin-bottom: 8px; }
.karta p { font-size: 15px; }
.karta__model { font: 600 13px/1 var(--mono); color: var(--primary); letter-spacing: .02em; margin-bottom: 16px; }
.karta__cena { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--muted); }
.karta__cena b { font: 600 18px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }

.znacznik { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.znacznik--mocny { background: var(--accent); color: #fff; }
.znacznik--info { background: var(--surface-2); color: var(--muted); }
.znacznik--brak { background: #FDF0E1; color: #8A3D06; }

/* --- listy cech ---------------------------------------------- */
.lista-cech { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 768px) { .lista-cech { grid-template-columns: repeat(2, 1fr); gap: 24px 48px; } }
.lista-cech li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; }
.lista-cech svg { width: 24px; height: 24px; color: var(--primary); }
.lista-cech b { display: block; color: var(--ink); margin-bottom: 4px; }

/* --- tabela -------------------------------------------------- */
.tabela-dane { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; font-size: 15px; }
.tabela-dane th, .tabela-dane td { padding: 16px; text-align: left; border-bottom: 1px solid var(--hairline); }
.tabela-dane th { background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 14px; }
.tabela-dane td.liczba, .tabela-dane th.liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-dane tr:last-child td { border-bottom: 0; }
.tabela-przewijana { overflow-x: auto; position: relative; }

/* --- notka --------------------------------------------------- */
.notka { border-left: 3px solid var(--primary); background: var(--surface); padding: 16px; border-radius: 0 6px 6px 0; font-size: 15px; }
.notka--ostrzezenie { border-left-color: var(--accent); background: #FDF6EC; }
.notka p:last-child { margin-bottom: 0; }

/* --- okruszki ------------------------------------------------ */
.okruszki { font-size: 12px; color: var(--muted); padding: 16px 0 0; }
.okruszki ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.okruszki li + li::before { content: "/"; margin-right: 8px; color: var(--hairline); }
.okruszki a { color: var(--muted); }

/* --- formularz / pola ---------------------------------------- */
.pole { display: grid; gap: 8px; }
.pole__etykieta { font-size: 14px; font-weight: 600; color: var(--ink); }
.pole__podpowiedz { font-size: 12px; color: var(--muted); }
.pole__blad { font-size: 12px; color: var(--danger); }
.pole input, .pole select { min-height: 44px; border: 1px solid #B9C2BC; border-radius: 6px; padding: 0 16px; font: 16px var(--font); color: var(--ink); background: var(--surface); width: 100%; }
.pole input:focus, .pole select:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }

/* --- kalkulator ---------------------------------------------- */
.kalkulator { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .kalkulator { grid-template-columns: 1fr 380px; gap: 32px; } }
.krok { background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 24px; }
.krok + .krok { margin-top: 16px; }
.krok__naglowek { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.krok__numer { font: 600 13px/1 var(--mono); color: var(--primary); }
.krok__naglowek h2 { font-size: 20px; margin: 0; }

.wybor { display: grid; gap: 8px; }
@media (min-width: 640px) { .wybor { grid-template-columns: repeat(2, 1fr); } }
.wybor label { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--hairline); border-radius: 6px; cursor: pointer; background: var(--surface); }
.wybor label:hover { border-color: #9DB3AC; }
.wybor input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.wybor label:has(input:checked) { border-color: var(--primary); background: #F1F7F6; box-shadow: inset 0 0 0 1px var(--primary); }
.wybor b { display: block; color: var(--ink); font-size: 15px; }
.wybor small { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 4px; }

.pozycje { display: grid; gap: 8px; }
.pozycja { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--hairline); border-radius: 6px; }
.pozycja > div:first-child { flex: 1 1 200px; }
.pozycja--polecana { border-color: var(--primary); background: #F1F7F6; }
.pozycja b { color: var(--ink); }
.pozycja small { display: block; color: var(--muted); font-size: 13px; }
.licznik { display: inline-flex; align-items: center; border: 1px solid #B9C2BC; border-radius: 6px; overflow: hidden; background: var(--surface); }
.licznik button { width: 44px; height: 44px; border: 0; background: var(--surface-2); font: 600 20px/1 var(--font); color: var(--ink); cursor: pointer; }
.licznik button:hover, .licznik button:focus-visible { background: #DCE3DE; }
.licznik input { width: 56px; height: 44px; border: 0; text-align: center; font: 600 16px var(--font); color: var(--ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.licznik input::-webkit-outer-spin-button, .licznik input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wynik { background: var(--ink); color: #DCE4E8; border-radius: 8px; padding: 24px; position: sticky; top: 88px; }
.wynik h2 { color: #fff; font-size: 18px; margin-bottom: 16px; }
.wynik dl { margin: 0; display: grid; gap: 8px; }
.wynik dl div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.wynik dt { color: #B5C2C9; }
.wynik dd { margin: 0; font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; white-space: nowrap; }
.wynik__suma { margin-top: 16px; }
.wynik__suma span { display: block; font-size: 13px; color: #B5C2C9; }
.wynik__suma strong { display: block; font-size: 36px; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wynik__mies { font-size: 14px; color: #B5C2C9; margin: 8px 0 24px; }
.wynik__mies b { color: #fff; }
.wynik .przycisk--glowny { width: 100%; background: #fff; color: var(--ink); }
.wynik .przycisk--glowny:hover, .wynik .przycisk--glowny:focus-visible { background: #E3F0EE; color: var(--ink); }
.wynik__pusty { font-size: 15px; color: #B5C2C9; }
.wynik__uwaga { font-size: 12px; color: #9FAEB6; margin: 16px 0 0; }

/* --- faq ----------------------------------------------------- */
.faq { display: grid; gap: 8px; }
.faq details { background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; }
.faq summary { cursor: pointer; padding: 16px 24px; min-height: 44px; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; color: var(--primary); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 24px 16px; }

/* --- stopka -------------------------------------------------- */
.stopka { background: var(--ink); color: #B5C2C9; padding: 48px 0 32px; font-size: 14px; }
.stopka a { color: #E2E8EB; }
.stopka__tytul { color: #fff; font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.stopka__kolumny { display: grid; gap: 32px; }
@media (min-width: 768px) { .stopka__kolumny { grid-template-columns: 1.4fr 1fr 1fr; } }
.stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stopka__dol { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 32px; padding-top: 16px; font-size: 12px; color: #8E9DA5; }

/* --- pomocnicze ---------------------------------------------- */
.naglowek-sekcji { max-width: 720px; margin-bottom: 32px; }
.naglowek-sekcji p { color: var(--body); font-size: 17px; }
.drobny { font-size: 13px; color: var(--muted); }
.ukryte { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* --- dostępność ---------------------------------------------- */
.ukryte--fokus:focus { position: fixed !important; left: 16px; top: 16px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--surface); color: var(--ink); padding: 8px 16px; border-radius: 6px; box-shadow: 0 2px 8px rgba(20, 33, 43, .2); }

/* --- zdjęcia urządzeń ---------------------------------------- */
.karta__foto { margin: -8px -8px 16px; background: #fff; border-radius: 6px; display: flex; justify-content: center; }
.karta__foto img { width: 100%; max-width: 200px; height: auto; aspect-ratio: 1; object-fit: contain; }

/* --- karta urządzenia (strona produktu) ---------------------- */
.produkt { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .produkt { grid-template-columns: 360px 1fr; gap: 48px; } }
.produkt__foto { background: #fff; border: 1px solid var(--hairline); border-radius: 8px; padding: 24px; display: flex; justify-content: center; }
.produkt__foto img { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; object-fit: contain; }
.produkt__cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 24px 0; padding: 16px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.produkt__cena b { font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.produkt__cena span { color: var(--muted); font-size: 14px; }

.kolumny { display: grid; gap: 32px; }
@media (min-width: 768px) { .kolumny { grid-template-columns: repeat(2, 1fr); gap: 32px 48px; } }
.kolumny h2 { font-size: 20px; }

.lista-punktow { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.lista-punktow li { position: relative; padding-left: 24px; }
.lista-punktow li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--primary); }

.akcje { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }

/* --- tabela porównania --------------------------------------- */
.tabela-dane caption { text-align: left; padding: 0 0 16px; color: var(--muted); font-size: 14px; }
.tabela-dane th[scope="rowgroup"] { background: var(--ink); color: #fff; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; padding: 8px 16px; }
.tabela-dane td.tak, .tabela-dane td.nie { text-align: center; white-space: nowrap; }
.tabela-dane td.tak { color: var(--success); font-weight: 600; }
.tabela-dane td.nie { color: var(--muted); }
.tabela-dane td.tak::before { content: "✓" / ""; font-size: 18px; }
.tabela-dane td.nie::before { content: "–" / ""; }
.tabela-dane tbody th { background: var(--surface); font-weight: 500; color: var(--ink); }
.tabela-porownania { min-width: 640px; }
.tabela-porownania th:first-child { width: 40%; }
.tabela-porownania td, .tabela-porownania td.liczba, .tabela-porownania thead th:not(:first-child) { text-align: center; }

/* --- formularz ----------------------------------------------- */
.formularz { display: grid; gap: 16px; }
.pole textarea { min-height: 160px; border: 1px solid #B9C2BC; border-radius: 6px; padding: 16px; font: 16px/1.5 var(--font); color: var(--ink); background: var(--surface); width: 100%; resize: vertical; }
.pole textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
.pole--pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.komunikat { border-radius: 8px; padding: 24px; border: 1px solid var(--hairline); background: var(--surface); }
.komunikat--ok { border-color: #A7D7B8; background: #F0FAF3; }
.komunikat--blad { border-color: #F1B5B5; background: #FDF2F2; }
.komunikat h1, .komunikat h2 { font-size: 24px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }