/*
 * Sklep IMPORTERZY.NET — jasna wersja (29.10.2026).
 *
 * Prośba właściciela: jasno, czysto, z pikselowymi efektami jak na stronach innych serwerów,
 * bez zbędnego tekstu, z ładnymi ikonami. Ikony to rendery 3D z Blendera
 * (services/shop-web/grafika/render_3d.py), krawędzie i iskry z generuj_grafike.py.
 *
 * Zasady, na których stoi wygląd:
 *  - JEDEN akcent: złoto serwera. Złote są wyłącznie rzeczy do kliknięcia przy zakupie,
 *    więc wzrok sam trafia na cenę (efekt izolacji — wyróżnia się to, co jedyne w swoim kolorze).
 *  - Zieleń tylko dla bonusu („+20 gratis”) — zysk ma inny kolor niż koszt.
 *  - Pikselowe krawędzie robi box-shadow (cztery cienie = ramka z wyciętymi rogami), a nie
 *    obrazki — ramka trzyma się każdego rozmiaru i nie rozmywa się przy powiększeniu.
 *  - Przyciski wciskają się jak w grze (dolna krawędź znika, przycisk opada) — każde
 *    kliknięcie ma odpowiedź pod palcem.
 *  - Kupka gwiazdek rośnie z paczką, a ziemia jest na tej samej wysokości w każdej karcie:
 *    wartość widać, zanim przeczyta się liczbę.
 *
 * CSP strony jest ścisłe (default-src 'self'): zero stylów w atrybutach, zero zewnętrznych
 * fontów — pikselowe napisy składa piksele.js w SVG, reszta to czcionka systemowa.
 */

:root {
  /* Strona jest TYLKO jasna (decyzja właściciela) i mówi to przeglądarce wprost. Bez tego
     telefon z ciemnym motywem (np. przeglądarka w Messengerze, „Auto Dark” w Chrome)
     przemalowuje ją sam: ciemne karty i rozsypane pikselowe cyfry (zgłoszone 12.11.2026). */
  color-scheme: only light;

  --tlo: #fafaf9;            /* stone-50 */
  --karta: #ffffff;
  --linia: #e7e5e4;          /* stone-200 */
  --linia-mocna: #d6d3d1;    /* stone-300 */
  --tekst: #44403c;          /* stone-700 */
  --tekst-mocny: #1c1917;    /* stone-900 */
  --tekst-slaby: #78716c;    /* stone-500 */

  --hero: #ffd95a;           /* ten sam kolor w grafika/krawedz-hero.svg */
  --hero-kratka: #ffe07a;
  --stopka: #f5f5f4;         /* ten sam kolor w grafika/krawedz-stopka.svg */

  --zloto: #fbbf24;          /* amber-400 */
  --zloto-jasne: #fde68a;    /* amber-200 */
  --zloto-tlo: #fffbeb;      /* amber-50 */
  --zloto-ciemne: #d97706;   /* amber-600 */
  --zloto-brzeg: #b45309;    /* amber-700 */

  --zielen: #059669;         /* emerald-600 */
  --zielen-brzeg: #047857;   /* emerald-700 */
  --zielen-tlo: #d1fae5;     /* emerald-100 */
  --discord: #5865f2;
  --blad: #dc2626;
  --ok: #059669;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ══ Podstawy ═════════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--tlo);
  color: var(--tekst);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

img { max-width: 100%; }

a { color: var(--zloto-brzeg); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; color: var(--tekst-mocny); font-weight: 800; letter-spacing: -.02em; }

.wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; }
.wrap-doc { width: min(50rem, 100% - 2rem); }

.muted { color: var(--tekst-slaby); }
.small { font-size: .875rem; }

:focus-visible { outline: 3px solid var(--zloto-ciemne); outline-offset: 3px; }

/* Pikselowe napisy (piksele.js). Rozmiar piksela podaje kontekst przez --px. */
svg.px {
  display: block;
  flex-shrink: 0;
  overflow: visible;
  width: calc(var(--w) * var(--px, 2) * 1px);
  height: calc(var(--h) * var(--px, 2) * 1px);
  margin-top: calc(var(--nad) * var(--px, 2) * -1px);
  margin-bottom: calc(var(--pod) * var(--px, 2) * -1px);
}

/* ══ Pikselowa ramka ═════════════════════════════════════════════════════
 * Cztery cienie przesunięte o grubość ramki: rogi zostają puste, więc ramka ma
 * wycięte piksele jak przedmioty w grze. Kolor ramki niesie --brzeg.               */

.ramka {
  --brzeg: var(--linia);
  --gr: 3px;
  box-shadow:
    0 calc(var(--gr) * -1) 0 0 var(--brzeg),
    0 var(--gr) 0 0 var(--brzeg),
    calc(var(--gr) * -1) 0 0 0 var(--brzeg),
    var(--gr) 0 0 0 var(--brzeg);
}

/* ══ Przyciski ═══════════════════════════════════════════════════════════ */

.btn-px {
  --tlo-btn: #fff;
  --brzeg: var(--linia-mocna);
  --spod: var(--linia);
  --swiatlo: rgba(255, 255, 255, .55);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 3px;
  padding: .625rem 1.125rem .75rem;
  border: 0;
  background: var(--tlo-btn);
  color: var(--tekst-mocny);
  font: 800 .9375rem/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-shadow:
    0 -3px 0 0 var(--brzeg), 0 3px 0 0 var(--brzeg),
    -3px 0 0 0 var(--brzeg), 3px 0 0 0 var(--brzeg),
    inset 0 -4px 0 0 var(--spod),
    inset 0 3px 0 0 var(--swiatlo);
  transition: transform .08s ease-out, box-shadow .08s ease-out, filter .15s ease-out;
}
.btn-px:hover { filter: brightness(1.05); transform: translateY(-1px); }
/* Wciśnięcie: dolna krawędź znika, przycisk opada o jej wysokość — jak w grze. */
.btn-px:active {
  transform: translateY(3px);
  box-shadow:
    0 -3px 0 0 var(--brzeg), 0 3px 0 0 var(--brzeg),
    -3px 0 0 0 var(--brzeg), 3px 0 0 0 var(--brzeg),
    inset 0 -1px 0 0 var(--spod),
    inset 0 3px 0 0 rgba(0, 0, 0, .08);
}
.btn-px:disabled { cursor: progress; filter: saturate(.6) opacity(.75); transform: none; }
/* Tylko ikony leżące wprost w przycisku — pikselowy napis (svg.px w środku spana) ma własny rozmiar. */
.btn-px > svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-zloty  { --tlo-btn: var(--zloto); --brzeg: var(--zloto-brzeg); --spod: var(--zloto-ciemne); color: #1c1206; }
.btn-ciemny { --tlo-btn: var(--tekst-mocny); --brzeg: #0c0a09; --spod: #000; --swiatlo: rgba(255, 255, 255, .14); color: #fff; }
.btn-jasny  { --tlo-btn: #fff; --brzeg: var(--linia-mocna); --spod: var(--linia); }
.btn-discord { --tlo-btn: var(--discord); --brzeg: #3c45a5; --spod: #4752c4; --swiatlo: rgba(255, 255, 255, .25); color: #fff; }

.btn-duzy { padding: .875rem 1.75rem 1rem; font-size: 1.0625rem; }
.btn-block { display: flex; width: calc(100% - 6px); }

/* ══ Pasek trybu testowego ═══════════════════════════════════════════════ */

.symulacja {
  margin: 0; padding: .5rem 1rem; text-align: center;
  background: repeating-linear-gradient(135deg, #fef3c7 0 14px, #fde68a 14px 28px);
  color: #78350f; font-size: .875rem; font-weight: 700;
}

/* ══ Górny pasek ═════════════════════════════════════════════════════════ */

.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--linia);
}
/* flex-wrap: na dokumentach przy wąskim ekranie menu schodzi pod logo, zamiast je ściskać. */
.top-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 80px; padding-block: .5rem; }

.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
/* Logo z bloków (render_3d.py → grafika/3d/logo.webp). Wysokość ustala rozmiar, szerokość idzie za nią. */
.logo-obraz { display: block; width: auto; height: 60px; }
.wrap-doc .logo-obraz { height: 48px; }

.top-akcje { display: flex; align-items: center; gap: .5rem; }

.btn-ip { gap: .625rem; padding-inline: .875rem; font-variant-numeric: tabular-nums; }
.btn-ip .ip-value { font-weight: 800; letter-spacing: .01em; }
.btn-ip .ip-ikona { width: 14px; height: 14px; opacity: .7; }
.ip-copy { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--zloto); }
.ip-copy.ok { color: #4ade80; }

.ip-dot { width: 8px; height: 8px; flex-shrink: 0; background: #a8a29e; }
.ip-dot.online { background: #22c55e; animation: puls 2.4s ease-in-out infinite; }

.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .125rem .75rem; }
.nav a { padding: .375rem .25rem; color: var(--tekst); font-weight: 700; font-size: .9375rem; text-decoration: none; }
.nav a:hover { color: var(--tekst-mocny); }
.nav a[aria-current="page"] { color: var(--tekst-mocny); box-shadow: inset 0 -3px 0 var(--zloto); }

/* ══ Hero ════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  padding: 3rem 0 2.75rem;
  background-color: var(--hero);
  /* Szachownica jak bloki — wygasa przy dole, żeby schodki krawędzi nie miały szwu. */
  background-image:
    linear-gradient(to bottom, transparent 55%, var(--hero) 100%),
    repeating-conic-gradient(var(--hero-kratka) 0 25%, transparent 0 50%);
  background-size: 100% 100%, 72px 72px;
}
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -24px; height: 24px;
  background: url(/grafika/krawedz-hero.svg) repeat-x 0 0 / 512px 24px;
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 2rem;
}

.hero-status {
  --brzeg: rgba(28, 25, 23, .12);
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 3px 3px 1.5rem; padding: .375rem .75rem;
  background: rgba(255, 255, 255, .7);
  color: var(--tekst-mocny); font-size: .875rem; font-weight: 700;
  box-shadow:
    0 -3px 0 0 var(--brzeg), 0 3px 0 0 var(--brzeg),
    -3px 0 0 0 var(--brzeg), 3px 0 0 0 var(--brzeg);
}

/* „GWIAZDKI” z bloków (render_3d.py → grafika/3d/tytul.webp); tekst niesie alt obrazka. */
.tytul { margin: 0 0 1.25rem; line-height: 1; }
.tytul img { display: block; width: min(100%, 470px); height: auto; }

.opis-sklepu { max-width: 28rem; margin: 0 0 2rem; color: #422006; font-size: 1.1875rem; font-weight: 500; line-height: 1.55; }

/* Scena: to, na co wydaje się gwiazdki, unosi się wokół gwiazdki. */
.hero-scena { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; }
.hero-scena img { position: absolute; display: block; height: auto; }
.scena-gwiazda { width: 62%; left: 19%; top: 12%; z-index: 2; animation: unos 4.2s ease-in-out infinite; }
.scena-cien {
  position: absolute; left: 30%; bottom: 13%; width: 40%; height: 7%;
  background: radial-gradient(closest-side, rgba(120, 53, 15, .28), rgba(120, 53, 15, 0));
  animation: cien 4.2s ease-in-out infinite;
}
.scena-przedmiot { width: 30%; z-index: 3; filter: drop-shadow(0 8px 6px rgba(120, 53, 15, .18)); }
.scena-klucz   { left: 0;   top: 4%;    animation: unos 5s ease-in-out -1.2s infinite; }
.scena-voucher { left: 2%;  bottom: 8%; animation: unos 4.6s ease-in-out -2.6s infinite; }
.scena-pakiet  { right: 0;  top: 40%;   animation: unos 5.4s ease-in-out -.4s infinite; }

.iskra { position: absolute; width: 22px; height: 22px; z-index: 4; image-rendering: pixelated; animation: migaj 2.8s ease-in-out infinite; }
.iskra-1 { left: 70%; top: 10%; }
.iskra-2 { left: 34%; top: 2%;  animation-delay: -1s; width: 16px; height: 16px; }
.iskra-3 { left: 78%; top: 82%; animation-delay: -1.9s; }

/* ══ Kroki ═══════════════════════════════════════════════════════════════ */

.kroki-sekcja { position: relative; z-index: 2; margin-top: 2.75rem; }
.kroki {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 0;
}
.krok {
  --brzeg: var(--linia);
  position: relative;
  display: flex; align-items: center; gap: .875rem;
  margin: 3px; padding: .75rem 1rem;
  background: var(--karta);
  box-shadow:
    0 -3px 0 0 var(--brzeg), 0 3px 0 0 var(--brzeg),
    -3px 0 0 0 var(--brzeg), 3px 0 0 0 var(--brzeg),
    0 9px 0 0 rgba(28, 25, 23, .05);
}
.krok-ikona { width: 52px; height: 52px; flex-shrink: 0; }
.krok-nr {
  position: absolute; top: -12px; left: -12px;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  background: var(--tekst-mocny); color: var(--zloto);
  font: 900 .8125rem/1 var(--font);
}
.krok-tekst { color: var(--tekst-mocny); font-weight: 700; line-height: 1.35; }
.krok-tekst b { color: var(--zloto-brzeg); }

/* ══ Paczki ══════════════════════════════════════════════════════════════ */

.oferta { padding: 3.5rem 0 5.5rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: stretch;
}

.paczka {
  --brzeg: var(--linia);
  position: relative;
  display: flex; flex-direction: column;
  margin: 3px;
  background: var(--karta);
  box-shadow:
    0 -3px 0 0 var(--brzeg), 0 3px 0 0 var(--brzeg),
    -3px 0 0 0 var(--brzeg), 3px 0 0 0 var(--brzeg),
    0 10px 0 0 rgba(28, 25, 23, .06);
  transition: transform .15s ease-out;
}
.paczka:hover { transform: translateY(-4px); }

/* Polecana: złota ramka i podniesiona — jedyna inna w rzędzie, więc oko zaczyna od niej. */
.paczka.polecana {
  --brzeg: var(--zloto);
  transform: translateY(-10px);
  box-shadow:
    0 -3px 0 0 var(--brzeg), 0 3px 0 0 var(--brzeg),
    -3px 0 0 0 var(--brzeg), 3px 0 0 0 var(--brzeg),
    0 -9px 0 0 rgba(251, 191, 36, .22), 0 9px 0 0 rgba(251, 191, 36, .22),
    -9px 0 0 0 rgba(251, 191, 36, .22), 9px 0 0 0 rgba(251, 191, 36, .22),
    0 18px 0 0 rgba(180, 83, 9, .08);
}
.paczka.polecana:hover { transform: translateY(-14px); }

.paczka-wstazka {
  position: absolute; top: -15px; left: 50%; z-index: 2;
  transform: translateX(-50%);
  padding: .3125rem .75rem;
  background: var(--tekst-mocny); color: var(--zloto);
  font: 900 .6875rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}

.paczka-obraz {
  position: relative;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  background-color: var(--zloto-tlo);
  /* Siatka pikseli w tle obrazka — tylko szept, nie wzór. */
  background-image:
    linear-gradient(90deg, rgba(180, 83, 9, .05) 1px, transparent 1px),
    linear-gradient(rgba(180, 83, 9, .05) 1px, transparent 1px);
  background-size: 20px 20px;
}
.paczka-obraz img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease-out; }
.paczka:hover .paczka-obraz img { transform: scale(1.05) translateY(-2px); }

.paczka-bonus {
  --brzeg: var(--zielen-brzeg);
  position: absolute; top: .75rem; left: .75rem;
  margin: 3px; padding: .25rem .5rem;
  background: var(--zielen); color: #fff;
  font: 900 .8125rem/1.2 var(--font);
  box-shadow:
    0 -3px 0 0 var(--brzeg), 0 3px 0 0 var(--brzeg),
    -3px 0 0 0 var(--brzeg), 3px 0 0 0 var(--brzeg);
}

.paczka-tytul { display: flex; align-items: baseline; justify-content: center; gap: .5rem; margin: 1.25rem 1rem .25rem; }
.paczka-ile { --px: 5; }
.paczka-ile:not(.px-gotowe) { font-size: 2.25rem; font-weight: 900; color: var(--tekst-mocny); font-variant-numeric: tabular-nums; }
.paczka-jedn { color: var(--tekst-slaby); font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.paczka-wartosc { min-height: 1.4em; margin: 0 1rem 1.125rem; color: var(--tekst-slaby); font-size: .875rem; text-align: center; }

.btn-kup { margin: auto calc(1rem + 3px) calc(1rem + 3px); padding-block: .75rem .875rem; }
.btn-kup [data-piksele] { --px: 3; }
.btn-kup [data-piksele]:not(.px-gotowe) { font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; }

.paczka.szkielet {
  min-height: 25rem;
  background: linear-gradient(90deg, var(--stopka) 25%, #fff 50%, var(--stopka) 75%);
  background-size: 200% 100%;
  animation: blysk 1.4s linear infinite;
}

.loading { grid-column: 1 / -1; text-align: center; color: var(--tekst-slaby); }

/* ══ Stopka ══════════════════════════════════════════════════════════════ */

.footer { position: relative; margin-top: 1.5rem; padding: 3rem 0 1.5rem; background: var(--stopka); }
.footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -24px; height: 24px;
  background: url(/grafika/krawedz-stopka.svg) repeat-x 0 0 / 512px 24px;
  pointer-events: none;
}
.footer-inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.footer-logo { display: block; width: 220px; height: auto; margin-bottom: 1rem; }
.footer-o-nas p { max-width: 26rem; margin: 0; }
.footer-kolumna { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }
.footer a { color: var(--tekst); font-weight: 600; text-decoration: none; }
.footer a:hover { color: var(--tekst-mocny); text-decoration: underline; text-underline-offset: 3px; }
.footer-discord { display: inline-flex; align-items: center; gap: .5rem; color: var(--discord) !important; }
.footer-discord svg { width: 16px; height: 16px; }
.footer-dol { margin-top: 2rem; padding-top: 1rem; border-top: 3px solid var(--linia); }
.footer-dol p { margin: 0; }

/* ══ Okno zakupu ═════════════════════════════════════════════════════════ */

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(28, 25, 23, .45); backdrop-filter: blur(3px); }
.modal-card {
  --brzeg: var(--linia-mocna);
  position: relative;
  width: min(30rem, 100% - 6px);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  margin: 3px;
  padding: 1.5rem;
  background: var(--karta);
  box-shadow:
    0 -3px 0 0 var(--brzeg), 0 3px 0 0 var(--brzeg),
    -3px 0 0 0 var(--brzeg), 3px 0 0 0 var(--brzeg),
    0 14px 0 0 rgba(28, 25, 23, .18);
  animation: pojaw .18s ease-out;
}
.modal-close {
  position: absolute; top: .5rem; right: .5rem;
  width: 2.25rem; height: 2.25rem;
  border: 0; background: transparent; color: var(--tekst-slaby);
  font: 700 1.75rem/1 var(--font); cursor: pointer;
}
.modal-close:hover { color: var(--tekst-mocny); }

.modal-produkt { display: flex; align-items: center; gap: 1rem; padding-right: 2rem; }
.modal-art { width: 112px; flex-shrink: 0; aspect-ratio: 6 / 5; background: var(--zloto-tlo); }
.modal-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.modal-produkt h2 { --px: 3; margin: 0; font-size: 1.5rem; }
.chip-bonus { display: inline-block; margin: .625rem 0 0; padding: .1875rem .5rem; background: var(--zielen-tlo); color: var(--zielen-brzeg); font-size: .8125rem; font-weight: 800; }
.modal-desc { margin: 1rem 0 .25rem; color: var(--tekst-slaby); }

.buy-form label { display: block; margin: 1rem 0 .375rem; color: var(--tekst-mocny); font-weight: 700; }
.opcjonalnie { color: var(--tekst-slaby); font-weight: 500; }
.buy-form input[type="text"], .buy-form input[type="email"] {
  width: 100%;
  padding: .75rem .875rem;
  border: 2px solid var(--linia-mocna);
  border-radius: 0;
  background: var(--tlo);
  color: var(--tekst-mocny);
  font: 500 1rem/1.3 var(--font);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.buy-form input:focus { outline: none; border-color: var(--zloto-ciemne); background: #fff; box-shadow: 0 0 0 3px rgba(251, 191, 36, .35); }
.buy-form input.ok { border-color: var(--ok); }
.buy-form input.bad { border-color: var(--blad); }
.pole-info { margin: .375rem 0 0; color: var(--tekst-slaby); font-size: .8125rem; }
.pole-info.ok { color: var(--ok); font-weight: 600; }
.pole-info.bad { color: var(--blad); font-weight: 600; }

.kupon { margin-top: 1rem; }
.kupon summary { color: var(--zloto-brzeg); font-weight: 700; cursor: pointer; }
.coupon-row { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.coupon-row input { flex: 1; }
.coupon-info { min-height: 1.2em; margin: .375rem 0 0; font-size: .8125rem; }
.coupon-info.ok { color: var(--ok); font-weight: 600; }
.coupon-info.bad { color: var(--blad); font-weight: 600; }

.summary { margin: 1.25rem 0 1rem; padding: .875rem 1rem; background: var(--stopka); }
.summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.summary-row + .summary-row { margin-top: .25rem; }
.summary-row strong { color: var(--tekst-mocny); font-size: 1.375rem; font-variant-numeric: tabular-nums; }

.check { display: flex !important; align-items: flex-start; gap: .625rem; margin: .5rem 0 !important; font-weight: 500 !important; color: var(--tekst) !important; }
.check input { width: 1.125rem; height: 1.125rem; margin: .15rem 0 0; accent-color: var(--zloto-ciemne); flex-shrink: 0; }

.form-error { margin: .75rem 0; padding: .625rem .875rem; background: #fee2e2; color: #991b1b; font-weight: 600; }

.buy-form .btn-block { margin-top: 1rem; }
.modal-foot { margin: 1rem 0 0; color: var(--tekst-slaby); font-size: .8125rem; line-height: 1.5; }

/* ══ Podstrony: dokumenty, płatność, 404 ═════════════════════════════════ */

.page { padding: 2.5rem 0 4.5rem; }
.page-card {
  --brzeg: var(--linia);
  margin: 3px;
  padding: 2rem;
  background: var(--karta);
  box-shadow:
    0 -3px 0 0 var(--brzeg), 0 3px 0 0 var(--brzeg),
    -3px 0 0 0 var(--brzeg), 3px 0 0 0 var(--brzeg),
    0 10px 0 0 rgba(28, 25, 23, .05);
}
.page-card.center { max-width: 34rem; margin: 0 auto; text-align: center; }
.page-card.center .btn-px { margin-inline: .375rem; }

.doc h1 { font-size: clamp(1.6rem, 3.5vw, 2rem); }
.doc h2 { margin: 2rem 0 .75rem; font-size: 1.25rem; }
.doc p, .doc li { line-height: 1.7; }
.doc ol, .doc ul { padding-left: 1.4rem; }
.doc li + li { margin-top: .25rem; }
.todo { padding: .875rem 1rem; background: var(--zloto-tlo); border-left: 4px solid var(--zloto); }

.result-icon { display: grid; place-items: center; height: 7rem; margin: 0 auto .5rem; font-size: 3rem; }
.result-icon img { width: 7rem; height: 7rem; animation: unos 4.2s ease-in-out infinite; }
.order-id { color: var(--tekst-mocny); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; }

/* ══ Ruch ════════════════════════════════════════════════════════════════ */

@keyframes unos   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cien   { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.82); opacity: .65; } }
@keyframes migaj  { 0%, 100% { opacity: 0; transform: scale(.4); } 45%, 55% { opacity: 1; transform: scale(1); } }
@keyframes puls   { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); } 50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); } }
@keyframes pojaw  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes blysk  { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ══ Mniejsze ekrany ═════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.75rem; }
  .paczka.polecana { transform: none; }
  .paczka.polecana:hover { transform: translateY(-4px); }
}

@media (max-width: 860px) {
  .hero { padding: 2rem 0 3.25rem; }
  .hero-inner { grid-template-columns: 1fr; gap: .5rem; text-align: center; }
  .hero-scena { order: -1; width: min(70%, 300px); }
  .tytul img { margin-inline: auto; width: min(100%, 400px); }
  .logo-obraz { height: 52px; }
  .opis-sklepu { margin-inline: auto; }
  .kroki { grid-template-columns: 1fr; gap: 1rem; max-width: 26rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-o-nas { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .top-inner { min-height: 64px; }
  .logo-obraz, .wrap-doc .logo-obraz { height: 42px; }
  .btn-etykieta, .ip-copy { display: none; }
  .btn-ip .ip-value { font-size: .875rem; }
  .opis-sklepu { font-size: 1.0625rem; }
  .grid { gap: 1.5rem 1rem; }
  .paczka-tytul { flex-direction: column; align-items: center; gap: .25rem; margin-top: 1rem; }
  .paczka-ile { --px: 4; }
  .paczka-wartosc { margin-inline: .625rem; font-size: .8125rem; }
  .btn-kup { margin-inline: calc(.625rem + 3px); }
  .btn-kup [data-piksele] { --px: 2; }
  .btn-kup > svg { display: none; }
  .paczka-bonus { top: .5rem; left: .5rem; font-size: .75rem; }
  .modal-card { padding: 1.25rem; }
  /* Na wąskim ekranie obrazek nad tytułem — obok siebie „320 GWIAZDEK” nie mieści się w oknie. */
  .modal-produkt { flex-direction: column; align-items: center; padding-right: 0; text-align: center; }
  .modal-art { width: 140px; }
  .modal-produkt h2 { --px: 2; display: flex; justify-content: center; }
  .page-card { padding: 1.5rem 1.25rem; }
}

/* Na telefonie w pasku zostaje logo i adres serwera; Discord jest w stopce. */
@media (max-width: 480px) {
  .btn-discord, .btn-ip .ip-ikona { display: none; }
  .btn-ip { gap: .5rem; padding-inline: .75rem; }
}

/* Najmniejsze telefony (320 px): węższe marginesy, adres serwera drobniej. */
@media (max-width: 380px) {
  .wrap { width: min(1120px, 100% - 1.5rem); }
  .grid { gap: 1.25rem .75rem; }
  .btn-kup { padding-inline: .375rem; }
  .paczka-wartosc { font-size: .75rem; }
}

@media (max-width: 360px) {
  .logo-obraz, .wrap-doc .logo-obraz { height: 36px; }
  .btn-ip { padding-inline: .5rem; }
  .btn-ip .ip-value { font-size: .75rem; }
  .btn-ip .ip-dot { display: none; }
}