:root {
  --tlo: #10162a;
  --tlo-header: #161d34;
  --karta: #1b2440;
  --karta-hover: #232f52;
  --miniatura: #202a48;
  --granat: #0069b4;
  --granat-jasny: #4fb3ff;
  --czerwony: #e21f2b;
  --czerwony-ciemny: #a8161f;
  --czerwony-jasny: #ff4d4d;
  --iskra: #ff7a1a;
  --iskra-ciemna: #cc5c00;
  --tekst: #eef1f6;
  --tekst-mocny: #ffffff;
  --tekst-muted: #99a2b8;
  --obwodka: #2c3855;
  --sukces: #2ecc82;
  --zolty: #ff7a1a;
  --radius: 12px;
  --status-ok-bg: rgba(46,204,130,0.14);
  --status-ok-txt: #4fe0a0;
  --status-ok-border: rgba(46,204,130,0.3);
  --status-warn-bg: rgba(255,122,26,0.16);
  --status-warn-txt: #ffb27a;
  --status-bad-bg: rgba(226,31,43,0.14);
  --status-bad-txt: #ff8080;
  --status-bad-border: rgba(226,31,43,0.3);
  /* Tokeny "panelowe" — czytane przez sekcje, które zawsze zostają ciemne
     (hero, gorący strzał, transmisja, kafelki, stopka, top-banner).
     Domyślnie identyczne z ciemnym motywem "uniwersalnym"; każda kolorystyka
     marki podmienia je na swoją ciemną, zabarwioną wersję. */
  --panel-tlo: #10162a;
  --panel-tlo-header: #161d34;
  --panel-karta: #1b2440;
  --panel-karta-hover: #232f52;
  --panel-miniatura: #202a48;
  --panel-tekst: #eef1f6;
  --panel-tekst-mocny: #ffffff;
  --panel-tekst-muted: #99a2b8;
  --panel-obwodka: #2c3855;
  --panel-granat-jasny: #4fb3ff;
  --panel-czerwony-jasny: #ff4d4d;
  --panel-blask: rgba(0,105,180,0.26);
  --akcent-pasek: var(--obwodka);
  --cien-karta: none;
  --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-naglowek: 'Chivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-dane: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Tryb jasny (przełącznik w nagłówku) — jasno i czysto, jak x-kom.pl ---------- */
html[data-theme="light"] {
  --tlo: #ffffff;
  --tlo-header: #ffffff;
  --karta: #ffffff;
  --karta-hover: #f6f7f9;
  --miniatura: #f1f2f5;
  --tekst: #191b20;
  --tekst-mocny: #0c0d10;
  --tekst-muted: #6b6f7a;
  --obwodka: #e7e8ec;
  --granat-jasny: #005f96;
  --czerwony-jasny: #a8161f;
  --cien-karta: 0 1px 3px rgba(20,20,30,0.06), 0 1px 2px rgba(20,20,30,0.04);
  --status-ok-bg: rgba(31,157,92,0.1);
  --status-ok-txt: #1f9d5c;
  --status-ok-border: rgba(31,157,92,0.3);
  --status-warn-bg: rgba(163,98,15,0.1);
  --status-warn-txt: #a3620f;
  --status-bad-bg: rgba(184,31,49,0.08);
  --status-bad-txt: #a8161f;
  --status-bad-border: rgba(184,31,49,0.3);
}

/* ---------- Kolorystyka marki (do wyboru obok trybu ciemny/jasny) ----------
   Uniwersalna (domyślna) zostaje bez zmian. Pozostałe trzy podmieniają
   CAŁE tło strony (i paneli, które zawsze są ciemne) na zabarwioną,
   ciemną wersję w barwie danej marki — nie tylko przyciski/CTA — tak
   by po zmianie kolorystyki cała strona kojarzyła się z tym producentem. */
html[data-kolor="bosch"] {
  /* Bosch Professional — tryb CIEMNY: stonowana ciemna sza-granatowa baza,
     niebieski jako CTA/akcent (przyciski, pasek). Tryb JASNY tej marki
     jest zdefiniowany osobno niżej (html[data-theme="light"][data-kolor="bosch"]). */
  --czerwony: #0069b4;
  --czerwony-ciemny: #004d85;
  --czerwony-jasny: #3fa9f5;
  --granat: #0069b4;
  --granat-jasny: #3fa9f5;
  --tlo: #12181f;
  --tlo-header: #161d26;
  --karta: #1b232d;
  --karta-hover: #232d39;
  --miniatura: #1e2731;
  --obwodka: #2a3540;
  --tekst-muted: #9aa7b2;
  --panel-tlo: #0c1116;
  --panel-tlo-header: #10161d;
  --panel-karta: #161d26;
  --panel-karta-hover: #1e2831;
  --panel-miniatura: #182129;
  --panel-obwodka: #23303b;
  --panel-tekst-muted: #a3b3bd;
  --panel-granat-jasny: #4fb3ff;
  --panel-czerwony-jasny: #3fa9f5;
  --panel-blask: rgba(0,120,200,0.32);
  --akcent-pasek: #0069b4;
}
html[data-kolor="milwaukee"] {
  /* Milwaukee — tryb CIEMNY: tło strony to prawdziwa czerwień oficjalnej
     strony Milwaukee (#db011c). Żeby paski i przyciski nie "znikały" na
     czerwonym tle, dostają osobny, kontrastujący czarny akcent — dokładnie
     tak jak marka Milwaukee łączy czerwień z czernią. Karty produktów
     zostają neutralnie ciemnografitowe, żeby wyraźnie odcinały się od
     czerwonego tła. Etykiety marki/akcenty tekstowe (--granat-jasny) nadal
     są w jasnej czerwieni — to tylko drobne detale tekstowe, nie tła.
     Tryb JASNY tej marki jest zdefiniowany osobno niżej. */
  --czerwony: #161616;
  --czerwony-ciemny: #000000;
  --czerwony-jasny: #ff3b4f;
  --granat: #db011c;
  --granat-jasny: #ff3b4f;
  --tlo: #db011c;
  --tlo-header: #b8011a;
  --karta: #1e1e1e;
  --karta-hover: #292929;
  --miniatura: #202020;
  --obwodka: #7a0210;
  --tekst-muted: #ffd9dd;
  --panel-tlo: #0d0d0d;
  --panel-tlo-header: #131313;
  --panel-karta: #1a1a1a;
  --panel-karta-hover: #232323;
  --panel-miniatura: #1c1c1c;
  --panel-obwodka: #333333;
  --panel-tekst-muted: #b0b0b0;
  --panel-granat-jasny: #ff4d4d;
  --panel-czerwony-jasny: #ff4d4d;
  --panel-blask: rgba(219,1,28,0.35);
  --akcent-pasek: #161616;
}
html[data-kolor="stihl"] {
  /* Stihl — tryb CIEMNY: stonowana ciemna, lekko cieplejsza baza,
     pomarańcz jako CTA/akcent/pasek. Tryb JASNY tej marki jest
     zdefiniowany osobno niżej. */
  --czerwony: #ff6a00;
  --czerwony-ciemny: #cc5500;
  --czerwony-jasny: #ff9142;
  --granat: #ff6a00;
  --granat-jasny: #ff9142;
  --tlo: #191510;
  --tlo-header: #201a14;
  --karta: #29211a;
  --karta-hover: #342a21;
  --miniatura: #2c231c;
  --obwodka: #40332a;
  --tekst-muted: #b3a494;
  --panel-tlo: #120e0a;
  --panel-tlo-header: #17120d;
  --panel-karta: #201a14;
  --panel-karta-hover: #29211a;
  --panel-miniatura: #241d17;
  --panel-obwodka: #392c22;
  --panel-tekst-muted: #c2ae95;
  --panel-granat-jasny: #ffb27a;
  --panel-czerwony-jasny: #ff9142;
  --panel-blask: rgba(255,106,0,0.30);
  --akcent-pasek: #ff6a00;
}

/* Kolorystyka marki + tryb JASNY równocześnie — tło i karty zostają jasne,
   ale z delikatnym zabarwieniem w stronę barwy marki (dużo mocniejsza
   specyficzność niż same reguły [data-theme] / [data-kolor] osobno, żeby
   wygrać nad ciemnym tłem zdefiniowanym powyżej). */
html[data-theme="light"][data-kolor="bosch"] {
  --tlo: #f3f9fd;
  --tlo-header: #ffffff;
  --karta: #ffffff;
  --karta-hover: #e9f3fa;
  --miniatura: #e3f0f8;
  --obwodka: #c9e2ef;
  --tekst-muted: #4f7488;
  --granat-jasny: #005f96;
  --czerwony-jasny: #005f96;
}
html[data-theme="light"][data-kolor="milwaukee"] {
  --tlo: #fdf4f4;
  --tlo-header: #ffffff;
  --karta: #ffffff;
  --karta-hover: #fbe9ea;
  --miniatura: #f9e2e3;
  --obwodka: #f0c7c9;
  --tekst-muted: #8a5a5d;
  --granat-jasny: #a3011a;
  --czerwony-jasny: #a3011a;
}
html[data-theme="light"][data-kolor="stihl"] {
  --tlo: #fdf7f0;
  --tlo-header: #ffffff;
  --karta: #ffffff;
  --karta-hover: #fbeadb;
  --miniatura: #f9e2cd;
  --obwodka: #f0d3ab;
  --tekst-muted: #8a6a44;
  --granat-jasny: #cc5500;
  --czerwony-jasny: #cc5500;
}

/* Panele, które zawsze zostają ciemne (baner, transmisja, kafelki, stopka) —
   niezależnie od wybranego motywu strony, żeby zachować kontrast na zdjęciach/gradientach.
   Kolory czytane z tokenów --panel-*, które podmienia wybrana kolorystyka marki. */
.hero,
.goracy-strzal,
.transmisja-mini,
.transmisja-blok,
.kafelek,
footer.stopka {
  --tlo: var(--panel-tlo);
  --tlo-header: var(--panel-tlo-header);
  --karta: var(--panel-karta);
  --karta-hover: var(--panel-karta-hover);
  --miniatura: var(--panel-miniatura);
  --tekst: var(--panel-tekst);
  --tekst-mocny: var(--panel-tekst-mocny);
  --tekst-muted: var(--panel-tekst-muted);
  --obwodka: var(--panel-obwodka);
  --granat-jasny: var(--panel-granat-jasny);
  --czerwony-jasny: var(--panel-czerwony-jasny);
  --status-ok-bg: rgba(46,204,130,0.14);
  --status-ok-txt: #4fe0a0;
  --status-ok-border: rgba(46,204,130,0.3);
  --status-warn-bg: rgba(255,122,26,0.16);
  --status-warn-txt: #ffb27a;
  --status-bad-bg: rgba(226,31,43,0.14);
  --status-bad-txt: #ff8080;
  --status-bad-border: rgba(226,31,43,0.3);
}

/* ---------- Przelacznik motywu ---------- */
.motyw-przelacznik {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--obwodka);
  background: var(--karta);
  color: var(--tekst);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.motyw-przelacznik:hover { background: var(--karta-hover); border-color: var(--granat-jasny); }
.motyw-przelacznik .ikona-slonce { display: none; }
.motyw-przelacznik .ikona-ksiezyc { display: block; }
html[data-theme="light"] .motyw-przelacznik .ikona-slonce { display: block; }
html[data-theme="light"] .motyw-przelacznik .ikona-ksiezyc { display: none; }

/* ---------- Wybor kolorystyki marki ---------- */
.kolor-wybor {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 0 10px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--obwodka);
  background: var(--karta);
}
.kolor-kropka {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--obwodka);
  transition: transform 0.15s, box-shadow 0.15s;
}
.kolor-kropka:hover { transform: scale(1.15); }
.kolor-kropka.aktywna { box-shadow: 0 0 0 2px var(--karta), 0 0 0 4px var(--tekst); }
.kolor-uniwersalna { background: conic-gradient(from 200deg, #e21f2b, #0069b4, #ff7a1a, #e21f2b); }
.kolor-bosch { background: #0069b4; }
.kolor-milwaukee { background: #db011c; }
.kolor-stihl { background: #ff6a00; }

@media (max-width: 720px) {
  .kolor-wybor { order: 1; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--tlo);
  color: var(--tekst);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Naglowek ---------- */
header.glowny {
  background: var(--tlo-header);
  border-bottom: 2px solid var(--akcent-pasek);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* Przy wybranej kolorystyce marki nagłówek zostaje ciemny (jak prawdziwy
   pasek nawigacji producenta), niezależnie od trybu jasny/ciemny — treść
   strony poniżej jest już jasna/biała. */
html[data-kolor="bosch"] header.glowny,
html[data-kolor="milwaukee"] header.glowny,
html[data-kolor="stihl"] header.glowny {
  background: var(--panel-tlo-header);
}
header.glowny .container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  flex-wrap: wrap;
}
.logo {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.logo-obraz { height: 48px; width: auto; display: block; }

.szukaj-form {
  flex: 1 1 320px;
  display: flex;
  min-width: 220px;
}
.szukaj-form input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--obwodka);
  border-right: none;
  border-radius: 999px 0 0 999px;
  font-size: 14.5px;
  font-family: var(--font);
  background: var(--karta);
  color: var(--tekst);
}
.szukaj-form input[type="text"]::placeholder { color: var(--tekst-muted); }
.szukaj-form input[type="text"]:focus { outline: none; border-color: var(--czerwony); }
.szukaj-form button {
  background: var(--czerwony);
  color: #fff;
  border: none;
  padding: 0 20px;
  border-radius: 0 999px 999px 0;
  cursor: pointer;
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: 15px;
  transition: filter 0.15s;
}
.szukaj-form button:hover { filter: brightness(1.12); }

.koszyk-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-naglowek);
  font-weight: 700;
  color: var(--tekst);
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--karta);
  border: 1px solid var(--obwodka);
  white-space: nowrap;
}
.koszyk-link:hover { background: var(--karta-hover); }
.koszyk-licznik {
  background: var(--czerwony);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-dane);
  font-size: 12px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-weight: 700;
}

/* ---------- Flash ---------- */
.flashe { max-width: 1180px; margin: 14px auto 0; padding: 0 20px; }
.flash {
  padding: 11px 16px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
}
.flash.sukces { background: var(--status-ok-bg); color: var(--status-ok-txt); border-color: var(--status-ok-border); }
.flash.blad { background: var(--status-bad-bg); color: var(--status-bad-txt); border-color: var(--status-bad-border); }

/* ---------- Hero ---------- */
.hero {
  background: var(--panel-tlo-header);
  color: #fff;
  padding: 48px 0 0;
  border-bottom: 1px solid var(--obwodka);
}
.hero h1 {
  font-family: var(--font-naglowek);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 40px);
  margin: 0 0 12px;
  max-width: 640px;
  text-wrap: balance;
}
.hero p { color: var(--tekst-muted); font-size: 16.5px; max-width: 560px; margin: 0 0 22px; }
.hero .badge-strefa {
  display: inline-flex;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--obwodka);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 18px;
}
.hero-cta {
  display: inline-block;
  background: var(--czerwony);
  color: #fff;
  font-family: var(--font-naglowek);
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 15.5px;
  box-shadow: 0 10px 26px rgba(226,31,43,0.30);
  transition: filter 0.15s;
}
.hero-cta:hover { filter: brightness(1.12); }

.hero-gorny-wiersz { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-gorny-wiersz .badge-strefa { margin-bottom: 0; }

/* ---------- Hero: jeden spójny baner (obraz + pasek dostawy) ---------- */
.hero-baner-glowny {
  border-radius: var(--radius);
  border: 1px solid var(--obwodka);
  overflow: hidden;
  background: var(--panel-tlo);
  margin-bottom: 26px;
}
.hero-baner-obraz {
  position: relative;
  min-height: 360px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.hero-baner-obraz-tresc { position: relative; z-index: 1; padding: 30px 32px; max-width: 460px; }
.hero-baner-obraz-tresc h3 { font-family: var(--font-naglowek); font-size: 29px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.hero-baner-obraz-tresc p { font-size: 13.5px; color: #cfd5e2; margin: 0 0 18px; line-height: 1.5; }

.hero-baner-pasek {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 28px;
  border-top: 1px solid var(--obwodka);
  background: linear-gradient(90deg, var(--panel-tlo), var(--panel-tlo-header));
}
.hero-baner-pasek-kurier { height: 84px; width: auto; flex: none; display: block; }
.hero-baner-pasek-tresc { flex: 1 1 auto; min-width: 0; }
.hero-baner-pasek-tresc h4 { font-family: var(--font-naglowek); font-size: 16.5px; font-weight: 800; color: #fff; margin: 0 0 3px; }
.hero-baner-pasek-tresc p { font-size: 12.5px; color: var(--tekst-muted); margin: 0; line-height: 1.4; max-width: 560px; }
.hero-baner-pasek-logo { height: 26px; width: auto; flex: none; display: block; }
.hero-baner-pasek-link {
  flex: none;
  font-family: var(--font-naglowek);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--granat);
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s;
}
.hero-baner-pasek-link:hover { background: var(--granat-jasny); }

@media (max-width: 900px) {
  .hero-baner-obraz { min-height: 280px; }
  .hero-baner-obraz-tresc h3 { font-size: 24px; }
}
@media (max-width: 700px) {
  .hero-baner-pasek { flex-wrap: wrap; padding: 16px 20px; }
  .hero-baner-pasek-kurier { height: 64px; }
  .hero-baner-pasek-link { margin-left: auto; }
}
@media (max-width: 480px) {
  .hero-baner-obraz { min-height: 220px; }
  .hero-baner-obraz-tresc { padding: 20px 20px; }
  .hero-baner-pasek-kurier { display: none; }
}

/* ---------- Pasek techniczny (statystyki) ---------- */
.pasek-techniczny {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 40px;
  border-top: 1px solid var(--obwodka);
}
.pasek-techniczny .staty {
  padding: 18px 4px 18px 0;
  border-right: 1px solid var(--obwodka);
}
.pasek-techniczny .staty:last-child { border-right: none; }
.pasek-techniczny .wartosc {
  font-family: var(--font-dane);
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pasek-techniczny .etykieta {
  font-size: 11.5px;
  color: var(--tekst-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Kategorie (kolka) ---------- */
.kategorie-kolka {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 28px 0 32px;
}
.kategoria-kolko {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 84px;
  text-align: center;
}
.kolko-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-naglowek);
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  background: linear-gradient(135deg, var(--granat), var(--granat-jasny));
  border: 2px solid var(--obwodka);
}
.kategoria-kolko:nth-child(3n+2) .kolko-avatar { background: linear-gradient(135deg, var(--iskra), var(--iskra-ciemna)); color: #231705; }
.kategoria-kolko:nth-child(3n) .kolko-avatar { background: var(--karta); color: var(--tekst); border-color: var(--obwodka); }
.kolko-nazwa {
  font-size: 12px;
  font-weight: 600;
  color: var(--tekst-muted);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kategoria-kolko:hover .kolko-avatar { border-color: var(--granat-jasny); }
.kategoria-kolko:hover .kolko-nazwa { color: var(--tekst); }

/* ---------- Belka transmisji (stan domyślny, poza godzinami streamu) ---------- */
.sekcja-transmisja-pasek { padding: 20px 0; }
.transmisja-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  background: linear-gradient(90deg, var(--panel-karta), var(--panel-karta-hover));
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  padding: 16px 24px;
}
.transmisja-mini-lewo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.transmisja-mini-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 14.5px; color: #fff; }
.transmisja-mini-opis { font-size: 12px; color: var(--tekst-muted); margin-top: 2px; }
.transmisja-mini-prawo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.transmisja-licznik-mini { gap: 6px; }
.transmisja-licznik-mini > div { min-width: 40px; }
.transmisja-licznik-mini .cyfra { padding: 5px 0; font-size: 14px; }

.transmisja-kropka {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background: var(--czerwony);
  box-shadow: 0 0 0 0 rgba(226,31,43,0.55);
  animation: puls-transmisja 1.7s infinite;
}
@keyframes puls-transmisja {
  0% { box-shadow: 0 0 0 0 rgba(226,31,43,0.55); }
  70% { box-shadow: 0 0 0 9px rgba(226,31,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(226,31,43,0); }
}
@media (prefers-reduced-motion: reduce) {
  .transmisja-kropka { animation: none; }
}
.transmisja-etykieta-live { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 720px) {
  .transmisja-mini { flex-direction: column; align-items: flex-start; }
  .transmisja-mini-prawo { width: 100%; justify-content: space-between; }
}

/* ---------- Sekcja: transmisja na żywo + czat (tylko w oknie streamu) ---------- */
.sekcja-transmisja { padding-top: 28px; padding-bottom: 28px; }
.transmisja-blok {
  display: flex;
  gap: 22px;
  align-items: stretch;
}
.transmisja-glowna { flex: 1 1 62%; min-width: 0; }
.transmisja-wideo {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--panel-tlo);
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  overflow: hidden;
}
.transmisja-wideo iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.transmisja-offline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--tekst-muted);
  background: radial-gradient(circle at 50% 40%, rgba(226,31,43,0.12), transparent 65%);
  font-size: 13px;
}
.transmisja-offline svg { color: var(--czerwony-jasny); opacity: 0.85; }
.transmisja-pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.transmisja-etykieta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-naglowek);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
}
.transmisja-licznik { display: flex; gap: 8px; }
.transmisja-licznik > div { flex: 1; min-width: 46px; }
.transmisja-licznik .cyfra {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--obwodka);
  border-radius: 8px;
  padding: 6px 0;
  font-family: var(--font-dane);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.transmisja-licznik .etykieta {
  font-size: 9px;
  color: var(--tekst-muted);
  text-align: center;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.transmisja-info { font-size: 12.5px; color: var(--tekst-muted); margin: 10px 0 0; }
.transmisja-czat {
  flex: 1 1 34%;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  background: var(--karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  padding: 22px;
}
.czat-naglowek { font-family: var(--font-naglowek); font-weight: 800; font-size: 16px; color: #fff; margin-bottom: 10px; }
.czat-opis { font-size: 13px; color: var(--tekst-muted); line-height: 1.55; margin: 0 0 18px; flex: 1; }
.czat-opis strong { color: #fff; }
.czat-link { align-self: flex-start; }
.czat-wkrotce { font-size: 12.5px; color: var(--tekst-muted); font-style: italic; }

.kanal-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.kanal-cta-tresc h2 { margin: 0 0 6px; }
.kanal-cta-tresc p { margin: 0; color: var(--tekst-muted); font-size: 14px; max-width: 520px; }

/* ---------- Banery: marka partnerska + dostawa ---------- */
.sekcja-banery {
  display: flex;
  gap: 20px;
  padding: 8px 0 34px;
  flex-wrap: wrap;
}
.baner-marka-etykieta {
  display: inline-block;
  font-family: var(--font-naglowek);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--granat-jasny);
  margin-bottom: 8px;
}
.baner-marka {
  flex: 1 1 420px;
  position: relative;
  min-height: 260px;
  border-radius: var(--radius);
  border: 1px solid var(--obwodka);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.baner-marka-tresc { position: relative; z-index: 1; padding: 26px 30px; max-width: 420px; }
.baner-marka-tresc h3 { font-family: var(--font-naglowek); font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.baner-marka-tresc p { font-size: 13px; color: #cfd5e2; margin: 0 0 16px; line-height: 1.5; }

.baner-dostawa {
  flex: 1 1 420px;
  position: relative;
  min-height: 260px;
  border-radius: var(--radius);
  border: 1px solid var(--obwodka);
  background: linear-gradient(120deg, #12182c, #171233);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.baner-dostawa-kurier {
  height: 260px;
  width: auto;
  flex: none;
  align-self: flex-end;
  margin-left: 6px;
}
.baner-dostawa-tresc { padding: 26px 26px 26px 4px; min-width: 0; }
.baner-dostawa-tresc h3 { font-family: var(--font-naglowek); font-size: 21px; font-weight: 800; color: #fff; margin: 0 0 8px; line-height: 1.25; }
.baner-dostawa-tresc p { font-size: 12.5px; color: #cfd5e2; margin: 0 0 14px; line-height: 1.5; max-width: 320px; }
.baner-dostawa-logo { height: 30px; width: auto; display: block; margin: 0 0 16px; }

@media (max-width: 900px) {
  .sekcja-banery { flex-direction: column; }
  .baner-dostawa-kurier { height: 200px; }
}
@media (max-width: 480px) {
  .baner-dostawa { flex-direction: column; align-items: stretch; }
  .baner-dostawa-kurier { height: 200px; margin: 0 auto; }
  .baner-dostawa-tresc { padding: 0 20px 22px; }
}

/* ---------- Sekcja: Gorący Strzał (lewa) + Bestsellery (prawa) ---------- */
.strzal-i-bestsellery {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin: 40px 0 44px;
}
.goracy-strzal {
  position: relative;
  overflow: hidden;
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--karta) 0%, var(--tlo-header) 100%);
  border: 1px solid rgba(226,31,43,0.45);
  border-radius: var(--radius);
  padding: 24px 24px 46px;
  box-shadow: 0 0 44px rgba(226,31,43,0.18);
}
.goracy-strzal::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(226,60,20,0.32), transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}

/* ---------- Plonacy dol karty "Gorący Strzał" ---------- */
.goracy-ogien {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to top, black 0%, black 30%, transparent 90%);
  mask-image: linear-gradient(to top, black 0%, black 30%, transparent 90%);
}
.goracy-ogien::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 100% at 50% 100%, rgba(255,140,20,0.55) 0%, rgba(226,31,43,0.55) 45%, transparent 80%);
}
/* Płomień rysowany na <canvas> jako system drobnych, unoszących się iskier
   (patrz skrypt na dole strony) — naturalnie faluje i gaśnie zamiast
   powtarzalnych, sztucznych "płatków". Musi być NAD ::before (który jest
   position:absolute i inaczej malowałby się na wierzchu mimo kolejności
   w źródle), dlatego dostaje własny z-index. */
.ogien-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
.goracy-miniatura {
  position: relative;
  z-index: 1;
  aspect-ratio: 1/1;
  background: var(--miniatura);
  border: 1px solid var(--obwodka);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tekst-muted);
  font-size: 12.5px;
  text-align: center;
  padding: 14px;
  margin: 14px 0;
}
.goracy-tresc { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.goracy-badge {
  align-self: flex-start;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: linear-gradient(100deg, #a8161f, #e2231a 55%, #ff7a1a);
  color: #fff;
  font-family: var(--font-naglowek);
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(226,31,43,0.35);
}
.goracy-tytul { font-family: var(--font-naglowek); font-size: 19px; font-weight: 800; margin: 4px 0 8px; color: #fff; line-height: 1.3; }
.goracy-cena-nowa {
  font-family: var(--font-dane);
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  margin: 4px 0 14px;
}
.goracy-pozostalo {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: #f6c176;
  background: rgba(255,122,26,0.16);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.goracy-postep { margin: 2px 0 16px; }
.goracy-postep-etykiety {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--tekst-muted);
  margin-bottom: 6px;
}
.goracy-postep-etykiety strong { color: #fff; font-family: var(--font-dane); }
.goracy-pasek {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.goracy-pasek-wypelnienie {
  height: 100%;
  min-width: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--czerwony-ciemny), var(--czerwony));
}
.btn-jasny { background: #fff; color: #101728; }
.btn-jasny:hover { background: #e7ebf4; }
.goracy-kup-form { margin-top: 4px; }
.goracy-link-szczegoly {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--tekst-muted);
  margin-top: 10px;
}
.goracy-link-szczegoly:hover { color: #fff; }
.goracy-info { font-size: 11.5px; color: var(--tekst-muted); margin: 12px 0 16px; }
.goracy-licznik { display: flex; gap: 8px; }
.goracy-licznik > div { flex: 1; }
.goracy-licznik .cyfra {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--obwodka);
  border-radius: 8px;
  padding: 8px 0;
  font-family: var(--font-dane);
  font-weight: 700;
  font-size: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.goracy-licznik .etykieta {
  font-size: 9.5px;
  color: var(--tekst-muted);
  text-align: center;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.goracy-tresc .btn { margin-top: 4px; }

.bestsellery-blok { flex: 1; min-width: 0; }

/* ---------- Mozaika uslug ---------- */
.siatka-uslug {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.kafelek {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  background: linear-gradient(135deg, var(--panel-karta-hover) 0%, var(--panel-tlo-header) 100%);
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  padding: 22px;
  color: var(--granat-jasny);
}
.kafelek-granat { background: linear-gradient(135deg, #1c2c58 0%, #141c34 100%); color: var(--granat-jasny); }
.kafelek-czerwony { background: linear-gradient(135deg, #2c1e21 0%, #1a1526 100%); border-color: rgba(226,31,43,0.25); color: var(--czerwony-jasny); }
.kafelek-zielony { background: linear-gradient(135deg, #182c1d 0%, #141c34 100%); color: #2ecc82; }
.kafelek-link { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.kafelek-link:hover { border-color: #324066; transform: translateY(-2px); }
.kafelek-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 16px; color: #fff; }
.kafelek-opis { font-size: 13px; color: var(--tekst-muted); line-height: 1.55; }

/* ---------- Pasek marek (pelna lista) ---------- */
.pasek-marek { display: flex; flex-wrap: wrap; gap: 10px; }
.plytka-marki {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--obwodka);
  background: var(--karta);
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--tekst);
}
.plytka-marki:hover { border-color: var(--granat-jasny); color: var(--granat-jasny); }

/* ---------- Sekcje ---------- */
.sekcja { padding: 40px 0; }
.sekcja h2 {
  font-family: var(--font-naglowek);
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--tekst-mocny);
}
.sekcja h2 .sub { font-family: var(--font); font-size: 13.5px; color: var(--tekst-muted); font-weight: 500; }

.chipy-producentow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--obwodka);
  background: var(--karta);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tekst);
}
.chip:hover, .chip.aktywny { border-color: var(--czerwony); color: var(--czerwony-jasny); }

/* ---------- Siatka produktow ---------- */
.siatka-produktow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.karta-produktu {
  background: var(--karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--cien-karta);
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.karta-produktu:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.4); transform: translateY(-2px); border-color: #324066; }
.miniatura {
  aspect-ratio: 1 / 1;
  background: var(--miniatura);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tekst-muted);
  font-size: 12px;
  text-align: center;
  padding: 10px;
}
.producent-etykieta {
  font-family: var(--font-naglowek);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--granat-jasny);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nazwa-produktu {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tekst);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 39px;
}
.kod-produktu { font-family: var(--font-dane); font-size: 12px; color: var(--tekst-muted); }
.cena-produktu { font-family: var(--font-dane); font-size: 19px; font-weight: 700; color: var(--tekst-mocny); margin-top: auto; }
.stan-badge {
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
}
.stan-dostepny { background: var(--status-ok-bg); color: var(--status-ok-txt); }
.stan-niski { background: var(--status-warn-bg); color: var(--status-warn-txt); }
.stan-brak { background: var(--status-bad-bg); color: var(--status-bad-txt); }

.btn {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  transition: filter 0.15s;
}
.btn-czerwony { background: var(--czerwony); color: #fff; }
.btn-czerwony:hover { filter: brightness(1.12); }
.btn-granat { background: var(--granat); color: #fff; }
.btn-granat:hover { background: var(--granat-jasny); }
.btn-obrys { background: transparent; color: var(--tekst); border: 1.5px solid var(--obwodka); }
.btn-obrys:hover { border-color: var(--tekst); }
.btn-pelna-szerokosc { width: 100%; }

/* ---------- Filtry / listing ---------- */
.pasek-filtrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  box-shadow: var(--cien-karta);
}
.pasek-filtrow select {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--obwodka);
  background: var(--tlo-header);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 13.5px;
}
.wynik-liczba { font-size: 13.5px; color: var(--tekst-muted); }

.paginacja { display: flex; gap: 6px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.paginacja a, .paginacja span {
  padding: 8px 13px;
  border-radius: 6px;
  border: 1px solid var(--obwodka);
  background: var(--karta);
  color: var(--tekst);
  font-size: 13.5px;
  font-weight: 600;
}
.paginacja .aktywna { background: var(--czerwony); color: #fff; border-color: transparent; }

/* ---------- Produkt szczegoly ---------- */
.karta-szczegoly {
  display: grid;
  grid-template-columns: minmax(220px, 380px) 1fr;
  gap: 34px;
  background: var(--karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  box-shadow: var(--cien-karta);
  padding: 28px;
}
.miniatura-duza {
  aspect-ratio: 1/1;
  background: var(--miniatura);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tekst-muted);
  font-size: 14px;
  text-align: center;
  padding: 20px;
}
.szczegoly-info h1 { font-family: var(--font-naglowek); font-size: 24px; margin: 4px 0 10px; color: var(--tekst-mocny); }
.szczegoly-tabelka { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 13.5px; }
.szczegoly-tabelka td { padding: 7px 0; border-bottom: 1px solid var(--obwodka); }
.szczegoly-tabelka td:first-child { color: var(--tekst-muted); width: 40%; }
.cena-duza { font-family: var(--font-dane); font-size: 30px; font-weight: 700; color: var(--tekst-mocny); margin: 6px 0 14px; }
.formularz-dodaj { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.formularz-dodaj input[type="number"] {
  width: 68px;
  padding: 10px;
  border-radius: 8px;
  border: 1.5px solid var(--obwodka);
  background: var(--tlo-header);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 14px;
  text-align: center;
}

/* ---------- Koszyk / zamowienie ---------- */
.tabela-koszyk { width: 100%; border-collapse: collapse; background: var(--karta); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--obwodka); box-shadow: var(--cien-karta); }
.tabela-koszyk th { text-align: left; background: var(--tlo-header); padding: 12px 14px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tekst-muted); }
.tabela-koszyk td { padding: 14px; border-top: 1px solid var(--obwodka); vertical-align: middle; font-size: 14px; }
.tabela-koszyk input[type="number"] { width: 60px; padding: 7px; border-radius: 6px; border: 1.5px solid var(--obwodka); background: var(--tlo-header); color: var(--tekst); text-align: center; }
.usun-link { color: var(--status-bad-txt); font-weight: 700; font-size: 13px; background: none; border: none; cursor: pointer; }
.podsumowanie-koszyk {
  background: var(--karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  box-shadow: var(--cien-karta);
  padding: 22px;
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.podsumowanie-koszyk .suma { font-family: var(--font-dane); font-size: 22px; font-weight: 700; color: var(--tekst-mocny); }

.formularz-zamowienie { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--karta); border: 1px solid var(--obwodka); border-radius: var(--radius); box-shadow: var(--cien-karta); padding: 26px; }
.formularz-zamowienie .pelna { grid-column: 1 / -1; }
.formularz-zamowienie label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--tekst); }
.formularz-zamowienie input[type="text"], .formularz-zamowienie input[type="email"], .formularz-zamowienie input[type="tel"], .formularz-zamowienie textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--obwodka);
  background: var(--tlo-header);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 14px;
}
.formularz-zamowienie .pole-blad input { border-color: var(--czerwony); }
.dostawa-opcje { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.dostawa-opcja {
  border: 1.5px solid var(--obwodka);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  flex: 1 1 200px;
  background: var(--tlo-header);
  color: var(--tekst);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.dostawa-opcja.wybrana { border-color: var(--czerwony); background: rgba(226,31,43,0.08); }
.dostawa-cena { margin-left: auto; font-family: var(--font-dane); font-weight: 700; color: var(--tekst-mocny); }
.dostawa-info { flex-basis: 100%; font-size: 11px; font-weight: 500; color: var(--tekst-muted); }

.dostawa-nudge {
  background: var(--karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  box-shadow: var(--cien-karta);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--tekst-muted);
  margin-bottom: 16px;
}
.dostawa-nudge strong { color: var(--tekst-mocny); }
.dostawa-nudge-pasek { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); margin-top: 10px; overflow: hidden; }
.dostawa-nudge-wypelnienie { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--czerwony-ciemny), var(--czerwony)); }
.dostawa-nudge-ok { color: var(--status-ok-txt); font-weight: 700; }

.podsumowanie-zamowienia {
  background: var(--tlo-header);
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 20px;
  font-size: 13.5px;
}
.podsumowanie-zamowienia .wiersz { display: flex; justify-content: space-between; padding: 5px 0; }
.podsumowanie-zamowienia .suma-koncowa { font-family: var(--font-dane); font-size: 18px; font-weight: 700; color: var(--tekst-mocny); border-top: 1px solid var(--obwodka); margin-top: 8px; padding-top: 12px; }

.potwierdzenie-box {
  background: var(--karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  box-shadow: var(--cien-karta);
  padding: 40px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.potwierdzenie-ikona { font-size: 48px; margin-bottom: 10px; }
.numer-zamowienia { font-family: var(--font-dane); font-size: 20px; font-weight: 700; color: var(--tekst-mocny); margin: 10px 0 18px; }

/* ---------- Stopka ---------- */
footer.stopka {
  background: var(--panel-tlo);
  color: #8791a8;
  margin-top: 60px;
  padding: 40px 0 0;
  font-size: 13.5px;
  border-top: 1px solid var(--obwodka);
}
footer.stopka strong { font-family: var(--font-naglowek); color: #fff; }
.stopka-kolumny {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  padding-bottom: 32px;
}
.stopka-kolumna { display: flex; flex-direction: column; gap: 9px; }
.stopka-kolumna a, .stopka-kolumna span { color: #8791a8; }
.stopka-kolumna a:hover { color: var(--tekst); }
.stopka-naglowek {
  font-family: var(--font-naglowek);
  font-weight: 800;
  color: #fff;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.stopka-tel { font-family: var(--font-dane); font-weight: 700; color: #fff !important; font-size: 16px; }
.stopka-adres { line-height: 1.5; }
.stopka-dol {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--obwodka);
  font-size: 12.5px;
}

/* ---------- Sekcja wideo ---------- */
.siatka-video { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.karta-video { display: flex; flex-direction: column; gap: 10px; }
.video-miniatura {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--karta) 0%, var(--tlo-header) 100%);
  border: 1px solid var(--obwodka);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tekst-muted);
  position: relative;
}
.video-znacznik {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: var(--czerwony);
  color: #fff;
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.video-tytul { font-size: 14.5px; font-weight: 600; color: var(--tekst); line-height: 1.35; }
.video-opis { font-size: 12.5px; color: var(--tekst-muted); }

/* ---------- Strony tresciowe (regulamin, kontakt, faq...) ---------- */
.tresc-strony h1 { font-family: var(--font-naglowek); font-size: 28px; color: var(--tekst-mocny); margin: 0 0 20px; }
.tresc-strony h2 { font-family: var(--font-naglowek); font-size: 17px; color: var(--tekst-mocny); margin: 26px 0 8px; }
.tresc-strony p { font-size: 15px; line-height: 1.7; color: var(--tekst-muted); max-width: 720px; }
.tresc-strony p a { color: var(--granat-jasny); text-decoration: underline; }

.pusty-stan { text-align: center; padding: 60px 20px; color: var(--tekst-muted); }

@media (max-width: 900px) {
  .strzal-i-bestsellery { flex-direction: column; }
  .goracy-strzal { flex-basis: auto; }
  .siatka-uslug { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .transmisja-blok { flex-direction: column; }
  .kanal-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .siatka-uslug { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .stopka-kolumny { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .siatka-video { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .karta-szczegoly { grid-template-columns: 1fr; }
  .formularz-zamowienie { grid-template-columns: 1fr; }
  header.glowny .container { flex-direction: column; align-items: stretch; }
  .szukaj-form { flex: 0 1 auto; width: 100%; min-width: 0; }
  .koszyk-link { justify-content: center; }
  .pasek-techniczny { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stopka-dol { flex-direction: column; }
}