/* ==========================================================================
   steam-v2 (robotnik K): kategoria Gry Steam i widok produktu gry Steam.
   Wszystko pod .sv2 albo z prefiksem sv2-. Mobile first (390 px), desktop od 768 px.
   Tokeny jak /fc27-coins (packet-v2.css). Fonty Barlow / Barlow Condensed ładuje layout.
   ========================================================================== */
.sv2 {
  --sv2-ciemny: #0d1017;
  --sv2-ciemny2: #151b25;
  --sv2-ramka-c: #2a3342;
  --sv2-zloty: #f3b300;
  --sv2-zloty-tekst: #8a6500;
  --sv2-zielony: #34d399;
  --sv2-zielony-tekst: #12805a;
  --sv2-ramka: #dfe3ea;
  --sv2-ramka2: #e6e9ef;
  --sv2-szary: #5b6576;
  --sv2-szary-c: #aab2c0;
  --sv2-tekst: #1a2230;
  --sv2-cien: 0 6px 18px rgba(13, 16, 23, 0.05);
  --sv2-cond: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: Barlow, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: var(--sv2-tekst);
  text-align: left;
  line-height: 1.45;
}
.sv2 *, .sv2 *::before, .sv2 *::after { box-sizing: border-box; }
.sv2 input, .sv2 input[type="search"], .sv2 select, .sv2 button { box-sizing: border-box; max-width: 100%; }
.sv2 b, .sv2 strong { font-weight: 700; }
.sv2 a { color: var(--sv2-zloty-tekst); }
.sv2 a:hover { color: #5c4300; }
.sv2 button, .sv2 input, .sv2 select { font-family: inherit; }
.sv2 :focus-visible { outline: 3px solid var(--sv2-zloty); outline-offset: 2px; }
.sv2 [hidden] { display: none !important; }
.sv2 ul, .sv2 ol { margin: 0; padding: 0; }
.sv2 img { max-width: 100%; }

.sv2-h1 { margin: 0; font-family: var(--sv2-cond); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: 0.2px; color: #fff; text-transform: none; }
.sv2-h2 { margin: 0; font-family: var(--sv2-cond); font-weight: 800; font-size: 28px; line-height: 1; color: var(--sv2-ciemny); text-transform: none; letter-spacing: 0; }
.sv2-sekcja { display: flex; flex-direction: column; gap: 12px; }
.sv2-zloto { color: var(--sv2-zloty); }
.sv2-nadtytul { font-size: 12px; font-weight: 700; color: var(--sv2-szary-c); letter-spacing: 0.6px; text-transform: uppercase; }
.sv2-tylko-desktop { display: none !important; }

.sv2-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 600; color: var(--sv2-szary-c); }
.sv2-kropka { width: 8px; height: 8px; border-radius: 50%; background: var(--sv2-zielony); display: inline-block; }
.sv2-kropka-off { background: #f04438; }
.sv2-status-ok { color: var(--sv2-zielony); }
.sv2 dd.sv2-status-ok { color: var(--sv2-zielony); }

.sv2-znaczek { padding: 2px 6px; border-radius: 6px; background: var(--sv2-zloty); color: var(--sv2-ciemny); font-weight: 800; font-size: 11px; line-height: 1.3; }
.sv2-znaczek-duzy { flex: 0 0 auto; padding: 4px 8px; border-radius: 7px; font-size: 13px; }

.sv2-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 12px; font-weight: 800; font-size: 15px; text-decoration: none; text-align: center; }
.sv2 a.sv2-btn-zloty, .sv2 a.sv2-btn-zloty:hover { background: var(--sv2-zloty); color: var(--sv2-ciemny); }

/* ---------- Hero kategorii: mobile pasek na całą szerokość, tekst pod grafiką ---------- */
.sv2-hero { background: var(--sv2-ciemny); color: #fff; margin: 0 -15px; padding-bottom: 22px; }
.sv2-hero-obraz { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }
.sv2-hero-obraz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv2-hero-obraz::before, .sv2-hero-obraz::after { content: ''; position: absolute; left: 0; right: 0; height: 9%; z-index: 1; pointer-events: none; }
.sv2-hero-obraz::before { top: 0; background: linear-gradient(#0d1017, rgba(13, 16, 23, 0)); }
.sv2-hero-obraz::after { bottom: 0; background: linear-gradient(rgba(13, 16, 23, 0), #0d1017); }
.sv2-hero-tekst { position: relative; padding: 14px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.sv2-hero-tekst p { margin: 0; }
.sv2-hero-lead { font-size: 16px; line-height: 1.4; font-weight: 600; color: #fff; }
.sv2-hero-chipy { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px !important; }
.sv2-hero-chipy li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--sv2-ciemny2); border: 1px solid var(--sv2-ramka-c); font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.2; }
.sv2-hero-chipy li[class*="sv2-ik-"]::before { content: ''; width: 14px; height: 14px; flex: 0 0 14px; background: var(--sv2-zloty); -webkit-mask: var(--sv2-ik) center / contain no-repeat; mask: var(--sv2-ik) center / contain no-repeat; }
.sv2-ik-prezent { --sv2-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); }
.sv2-ik-zegar { --sv2-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.sv2-ik-tarcza { --sv2-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.sv2-ik-gwiazda { --sv2-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 2.9 6.9 7.1.6-5.4 4.7 1.6 7.1L12 17.6 5.8 21.3l1.6-7.1L2 9.5l7.1-.6z'/%3E%3C/svg%3E"); }
.sv2-hero-chipy li.sv2-ik-gwiazda::before { background: #00b67a; }

/* ---------- Układ listy: mobile kolumna (kalkulator pod listą), desktop lista + prawy panel ---------- */
.sv2-uklad { display: flex; flex-direction: column; gap: 16px; }
.sv2-glowna { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sv2-narzedzia { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; }
.sv2:not(.sv2-js) .sv2-szukaj, .sv2:not(.sv2-js) .sv2-sort, .sv2:not(.sv2-js) .sv2-chipy { display: none; }
.sv2-szukaj { order: 1; flex: 1 1 100%; display: flex; flex-direction: column; gap: 12px; }
.sv2-szukaj-etykieta { font-family: var(--sv2-cond); font-weight: 800; font-size: 24px; line-height: 1; color: var(--sv2-ciemny); margin: 0; }
.sv2-szukaj-pole { position: relative; }
.sv2-szukaj-ikona { position: absolute; left: 14px; top: 16px; color: var(--sv2-szary); display: flex; pointer-events: none; }
.sv2 .sv2-szukaj-pole input { width: 100%; height: 52px; padding: 0 48px 0 44px; margin: 0; border-radius: 14px; border: 1.5px solid var(--sv2-ramka); background: #fff; font-size: 16px; color: var(--sv2-tekst); outline: none; box-shadow: var(--sv2-cien); -webkit-appearance: none; appearance: none; }
.sv2 .sv2-szukaj-pole input:focus { border-color: var(--sv2-ciemny); }
.sv2 .sv2-szukaj-pole input::-webkit-search-cancel-button { display: none; }
.sv2 input::placeholder { color: #7d8696; }
.sv2-szukaj-czysc { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--sv2-szary); display: flex; align-items: center; justify-content: center; padding: 0; }
.sv2-chipy { order: 2; flex: 1 1 100%; min-width: 0; display: flex; gap: 8px; overflow-x: auto; margin: 0 -15px; padding: 2px 15px 4px; scrollbar-width: none; }
.sv2-chipy::-webkit-scrollbar { display: none; }
.sv2-chip { flex: 0 0 auto; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sv2-ramka); background: #fff; color: var(--sv2-tekst); font-weight: 700; font-size: 13.5px; }
.sv2-chip[aria-pressed="true"] { background: var(--sv2-ciemny); border-color: var(--sv2-ciemny); color: #fff; }
.sv2-sort { order: 4; display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--sv2-szary); font-weight: 600; }
.sv2-sort select { height: 38px; border-radius: 10px; border: 1px solid var(--sv2-ramka); background: #fff; padding: 0 8px; font-weight: 700; font-size: 13.5px; color: var(--sv2-tekst); }
.sv2-licznik { order: 3; flex: 1 1 auto; margin: 0; font-size: 13px; color: var(--sv2-szary); font-weight: 600; }

.sv2-pusto { background: #fff; border: 1px solid var(--sv2-ramka2); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sv2-cien); }
.sv2-pusto-tekst { display: flex; flex-direction: column; gap: 6px; color: var(--sv2-szary); }
.sv2-pusto-tytul { font-family: var(--sv2-cond); font-weight: 800; font-size: 22px; line-height: 1.1; color: var(--sv2-tekst); overflow-wrap: anywhere; }
.sv2-pusto .sv2-btn { overflow-wrap: anywhere; padding: 8px 16px; }

.sv2 a.sv2-pasek { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--sv2-ciemny); color: #fff; text-decoration: none; }
.sv2-pasek-tekst { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sv2-pasek-tekst b { font-weight: 800; font-size: 14.5px; }
.sv2-pasek-tekst span { font-size: 12.5px; color: var(--sv2-szary-c); }
.sv2-pasek-strz { color: var(--sv2-zloty); display: flex; }

/* ---------- Karty gier ---------- */
.sv2-siatka { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sv2-karta { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sv2-ramka2); border-radius: 14px; overflow: hidden; box-shadow: var(--sv2-cien); min-width: 0; }
.sv2 a.sv2-karta-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: var(--sv2-tekst); }
.sv2-karta-obraz { position: relative; display: block; aspect-ratio: 460 / 215; background: var(--sv2-ciemny2); overflow: hidden; }
.sv2-karta-obraz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv2-karta-obraz .sv2-znaczek { position: absolute; left: 6px; top: 6px; }
.sv2-nowosc { position: absolute; right: 6px; top: 6px; padding: 2px 6px; border-radius: 6px; background: var(--sv2-ciemny); color: #fff; font-weight: 700; font-size: 10.5px; line-height: 1.3; }
.sv2-karta-tresc { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 8px; }
.sv2-karta-nazwa { font-weight: 700; font-size: 13.5px; line-height: 1.25; min-height: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sv2-karta-ceny { display: flex; flex-direction: column; gap: 3px; }
.sv2-karta-steam { font-size: 11.5px; color: var(--sv2-szary); }
.sv2-karta-cena { font-family: var(--sv2-cond); font-weight: 800; font-size: 20px; line-height: 1; }
.sv2-karta-czas { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--sv2-szary); margin-top: 2px; }
.sv2-karta-czas svg { flex: 0 0 13px; }
.sv2-karta-form { margin: 0 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.sv2-btn-koszyk { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--sv2-ciemny); background: var(--sv2-ciemny); color: #fff; font-weight: 800; font-size: 13.5px; text-decoration: none; }
.sv2 a.sv2-btn-koszyk.is-on, .sv2 a.sv2-btn-koszyk.is-on:hover { margin: 0 10px 10px; width: auto; background: #effcf6; border-color: #bdeed8; color: var(--sv2-zielony-tekst); }
.sv2-btn-koszyk:disabled { opacity: 0.6; cursor: wait; }
.sv2-btn-koszyk.is-off { margin: 0 10px 10px; width: auto; background: #eef0f3; border-color: #dfe3ea; color: #5b6576; cursor: default; }
.sv2-blad { font-size: 12px; line-height: 1.35; color: #b42318; font-weight: 600; }

/* ---------- Kalkulator dowolnej gry ---------- */
.sv2-kalk { position: relative; background: var(--sv2-ciemny); color: #fff; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sv2-kalk-gora { display: flex; align-items: center; gap: 8px; }
.sv2-kalk-gora .sv2-znaczek-duzy { font-size: 12px; padding: 3px 8px; border-radius: 6px; }
.sv2-kalk-tytul { font-family: var(--sv2-cond); font-weight: 800; font-size: 28px; line-height: 1.02; }
.sv2-kalk-etykieta { font-size: 13px; font-weight: 600; color: var(--sv2-szary-c); margin: 0; }
.sv2-kalk-pole { position: relative; }
.sv2 .sv2-kalk-pole input { width: 100%; height: 52px; padding: 0 44px 0 14px; margin: 0; border-radius: 12px; border: 1.5px solid var(--sv2-ramka-c); background: var(--sv2-ciemny2); color: #fff; font-size: 18px; font-weight: 700; outline: none; }
.sv2 .sv2-kalk-pole input:focus { border-color: var(--sv2-zloty); }
.sv2-kalk-pole span { position: absolute; right: 14px; top: 15px; color: var(--sv2-szary-c); font-weight: 700; }
.sv2-kalk-wynik { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sv2-ciemny2); border: 1px solid var(--sv2-ramka-c); }
.sv2-kalk-placisz { display: flex; flex-direction: column; gap: 2px; }
.sv2-kalk-placisz span { font-size: 12px; color: var(--sv2-szary-c); font-weight: 600; }
.sv2-kalk-placisz b { font-family: var(--sv2-cond); font-weight: 800; font-size: 30px; line-height: 1; color: var(--sv2-zloty); }
.sv2-kalk-oszcz { font-size: 13px; font-weight: 700; color: var(--sv2-zielony); text-align: right; }
.sv2-kalk-uwaga { font-size: 12px; color: var(--sv2-szary-c); margin-top: -4px; }

/* ---------- Jak to działa, region, FAQ (bloki z panelu) ---------- */
.sv2-blok-jak { background: #fff; border: 1px solid var(--sv2-ramka2); border-radius: 18px; padding: 6px 16px; box-shadow: var(--sv2-cien); }
.sv2-blok-jak p { margin: 0 0 10px; }
.sv2-kroki { list-style: none; counter-reset: sv2k; }
.sv2-kroki li { counter-increment: sv2k; position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 0 14px 44px; min-height: 60px; border-bottom: 1px solid #eef0f4; }
.sv2-kroki li:last-child { border-bottom: 0; }
.sv2-kroki li::before { content: counter(sv2k); position: absolute; left: 0; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--sv2-ciemny); color: var(--sv2-zloty); display: flex; align-items: center; justify-content: center; font-family: var(--sv2-cond); font-weight: 800; font-size: 17px; }
.sv2-kroki b { font-size: 15px; }
.sv2-kroki span { color: var(--sv2-szary); }
.sv2-region { display: flex; gap: 10px; padding: 14px; border-radius: 14px; background: #fff8e1; border: 1px solid #f6dc8a; }
.sv2-region-ikona { color: var(--sv2-zloty-tekst); flex: 0 0 20px; display: flex; }
.sv2-region p { margin: 0; }
.sv2-faq { display: flex; flex-direction: column; gap: 10px; }
.sv2-faq details { background: #fff; border: 1px solid var(--sv2-ramka2); border-radius: 14px; padding: 0 16px; }
.sv2-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 8px 0; font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; }
.sv2-faq summary::-webkit-details-marker { display: none; }
.sv2-faq summary::after { content: ''; flex: 0 0 18px; height: 18px; background: var(--sv2-szary); transition: transform .2s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.sv2-faq details[open] summary::after { transform: rotate(180deg); }
.sv2-faq details > :not(summary) { margin: 0 0 14px; color: #3a4558; line-height: 1.55; }
.sv2-faq ol, .sv2-faq ul { padding-left: 20px; }

/* Opinie: wygląd /fc27-coins (packet-v2.css), tu tylko odstępy */
.sv2 .sv2-opinie { max-width: none; width: 100%; margin: 0; padding: 0; }

/* ---------- Produkt ---------- */
.sv2p { gap: 0; }
.sv2p-okruszki { background: var(--sv2-ciemny); color: var(--sv2-szary-c); margin: 0 -15px; padding: 14px 16px 0; font-size: 12.5px; }
.sv2 .sv2p-okruszki a { color: var(--sv2-szary-c); text-decoration: none; }
.sv2p-okruszki b { font-weight: 600; color: var(--sv2-szary-c); }
.sv2p-uklad { display: flex; flex-direction: column; gap: 14px; }
.sv2p-gora { background: var(--sv2-ciemny); color: #fff; margin: 0 -15px; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.sv2p-obraz { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 460 / 215; background: var(--sv2-ciemny2); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.sv2p-obraz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv2p-obraz .sv2-znaczek { position: absolute; left: 10px; top: 10px; }
.sv2p .sv2-h1 { font-size: 38px; line-height: 0.98; }
.sv2p-lead { margin: 0; color: #c9d0db; line-height: 1.45; font-size: 15px; }
.sv2p-bok { display: flex; flex-direction: column; gap: 14px; }
.sv2p-zakup { background: var(--sv2-ciemny); color: #fff; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.sv2p-ceny { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.sv2p-ceny-l { display: flex; flex-direction: column; gap: 4px; }
.sv2p-steam { font-size: 12.5px; color: var(--sv2-szary-c); font-weight: 600; }
.sv2p-cena { font-family: var(--sv2-cond); font-weight: 800; font-size: 44px; line-height: 0.9; color: var(--sv2-zloty); white-space: nowrap; }
.sv2p-ceny-p { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.sv2p-oszcz { font-size: 13px; font-weight: 700; color: var(--sv2-zielony); }
.sv2p-scp { padding: 4px 10px; border-radius: 999px; border: 1px solid #5a4a12; background: #221c08; color: var(--sv2-zloty); font-weight: 700; font-size: 12px; white-space: nowrap; }
.sv2p-dane { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sv2p-dane > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--sv2-ciemny2); border: 1px solid var(--sv2-ramka-c); }
.sv2p-dane dt { float: none; width: auto; margin: 0; padding: 0; text-align: left; clear: none; font-size: 11.5px; color: var(--sv2-szary-c); font-weight: 400; line-height: 1.3; }
.sv2p-dane dd { float: none; width: auto; margin: 0; padding: 0; text-align: left; font-weight: 800; font-size: 15px; line-height: 1.3; }
.sv2p-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.sv2p-zapr-etykieta { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: #c9d0db; margin: 0; }
.sv2p-zapr-etykieta span { font-weight: 600; color: var(--sv2-szary-c); }
.sv2 .sv2p-form input { height: 50px; width: 100%; margin: 0; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--sv2-ramka-c); background: var(--sv2-ciemny2); color: #fff; font-size: 15px; outline: none; }
.sv2 .sv2p-form input.is-ok { border-color: var(--sv2-zielony); }
.sv2 .sv2p-form input.is-zly { border-color: #f04438; }
.sv2p-zapr-msg { font-size: 12.5px; color: var(--sv2-szary-c); line-height: 1.4; }
.sv2p-zapr-msg.is-ok { color: var(--sv2-zielony); }
.sv2p-zapr-msg.is-zly { color: #fda29b; }
.sv2p-form .sv2-blad { color: #fda29b; }
.sv2p-btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 56px; margin-top: 6px; padding: 6px 14px; border-radius: 14px; border: 0; background: var(--sv2-zloty); color: var(--sv2-ciemny); font-weight: 800; font-size: 16.5px; text-decoration: none; line-height: 1.2; }
.sv2 a.sv2p-btn.is-on, .sv2 a.sv2p-btn.is-on:hover { background: var(--sv2-zielony); color: var(--sv2-ciemny); }
.sv2p-btn.is-off { background: var(--sv2-ramka-c); color: var(--sv2-szary-c); }
.sv2p-btn:disabled { opacity: 0.6; cursor: wait; }
.sv2-platnosci { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sv2-platnosci li { padding: 5px 9px; border-radius: 8px; border: 1px solid var(--sv2-ramka-c); background: var(--sv2-ciemny2); font-size: 11.5px; font-weight: 700; color: #c9d0db; }
.sv2p-sprzedawca { display: flex; gap: 8px; font-size: 12px; color: var(--sv2-szary-c); line-height: 1.4; padding-top: 10px; border-top: 1px solid #222a36; }
.sv2p-sprzedawca > svg { flex: 0 0 14px; color: var(--sv2-zielony); margin-top: 1px; }
.sv2p-sprzedawca .si { color: var(--sv2-szary-c); }
.sv2p-sprzedawca .si .si-toggle { color: var(--sv2-zloty); font-weight: 600; }
.sv2p-sprzedawca .si .si-box { background: var(--sv2-ciemny2); border-color: var(--sv2-ramka-c); color: var(--sv2-szary-c); }
.sv2p-sprzedawca .si .si-box-title { color: var(--sv2-zloty); }
.sv2 a.sv2p-dowolna { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--sv2-ramka2); color: var(--sv2-tekst); text-decoration: none; box-shadow: var(--sv2-cien); }
.sv2p-dowolna .sv2-pasek-tekst span { color: var(--sv2-szary); }
.sv2p-dowolna > span:last-child { color: var(--sv2-zloty-tekst); font-weight: 800; }
.sv2p-jak, .sv2p-podobne, .sv2p > .sv2-sekcja, .sv2p > .sv2-pasek, .sv2p-opis { margin-top: 26px; }
.sv2p-jak { margin-top: 12px; }
.sv2p-opinie { margin-top: 12px; }
.sv2p-podobne-lista { list-style: none; display: flex; gap: 12px; overflow-x: auto; margin: 0 -15px !important; padding: 2px 15px 8px !important; scrollbar-width: none; }
.sv2p-podobne-lista::-webkit-scrollbar { display: none; }
.sv2p-podobne-lista li { flex: 0 0 200px; min-width: 0; }
.sv2 .sv2p-podobne-lista a { height: 100%; background: #fff; border: 1px solid var(--sv2-ramka2); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--sv2-tekst); display: flex; flex-direction: column; box-shadow: var(--sv2-cien); }
.sv2p-podobne-lista img { display: block; width: 100%; height: auto; aspect-ratio: 460 / 215; object-fit: cover; background: var(--sv2-ciemny2); }
.sv2p-podobne-lista a > span { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 3px; }
.sv2p-podobne-lista b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv2p-podobne-cena { font-family: var(--sv2-cond); font-weight: 800; font-size: 19px; }
.sv2p-opis { background: #fff; border: 1px solid var(--sv2-ramka2); border-radius: 14px; padding: 0 16px; }
.sv2p-opis > summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; }
.sv2p-opis > summary::-webkit-details-marker { display: none; }
.sv2p-opis .sv2-chev { transition: transform .2s; color: var(--sv2-szary); }
.sv2p-opis[open] .sv2-chev { transform: rotate(180deg); }
.sv2p-opis-tresc { padding-bottom: 14px; overflow-x: auto; }
.sv2p-opis-tresc img { height: auto; }

/* Dolny pasek (mobile): nad dolnym menu sklepu (#mobile-bottom-nav, 58 px przy <= 768 px) */
.sv2p-dolny { position: sticky; bottom: 58px; z-index: 50; margin: 18px -15px 0; background: var(--sv2-ciemny); border-top: 1px solid var(--sv2-ramka-c); padding: 10px 16px 12px; display: flex; align-items: center; gap: 12px; color: #fff; }
.sv2p-dolny-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 45%; }
.sv2p-dolny-l span { font-size: 11.5px; color: var(--sv2-szary-c); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv2p-dolny-l b { font-family: var(--sv2-cond); font-weight: 800; font-size: 26px; line-height: 1; color: var(--sv2-zloty); white-space: nowrap; }
.sv2p-dolny .sv2p-btn { flex: 1; min-height: 50px; margin: 0; border-radius: 12px; font-size: 15px; }

@media (max-width: 767px) {
  .sv2-tylko-mobile { display: flex; }
}

@media (min-width: 768px) {
  .sv2 { gap: 22px; font-size: 14.5px; padding-top: 6px; }
  .sv2-tylko-desktop { display: revert !important; }
  li.sv2-tylko-desktop, a.sv2-tylko-desktop { display: inline-flex !important; }
  .sv2-tylko-mobile { display: none !important; }
  .sv2-h2 { font-size: 32px; }

  .sv2-hero { margin: 0; position: relative; overflow: hidden; border-radius: 20px; min-height: 330px; display: flex; align-items: center; padding: 0; }
  .sv2-hero-obraz { position: absolute; inset: 0; aspect-ratio: auto; }
  .sv2-hero-obraz { background: var(--sv2-ciemny); }
  .sv2-hero-obraz img { width: auto; max-width: 100%; margin-left: auto; object-fit: contain; object-position: right center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%); mask-image: linear-gradient(90deg, transparent, #000 16%); }
  .sv2-hero-obraz::before, .sv2-hero-obraz::after { display: none; }
  .sv2-hero-tekst { padding: 40px 44px; max-width: 640px; gap: 14px; }
  .sv2-hero .sv2-status { font-size: 13px; }
  .sv2-h1 { font-size: 64px; line-height: 0.95; }
  .sv2-hero-lead { font-size: 20px; line-height: 1.35; font-weight: 700; }
  .sv2-hero-lead .sv2-zloto { display: block; }
  .sv2-hero-chipy li { padding: 8px 12px; font-size: 13px; background: rgba(21, 27, 37, 0.85); }

  .sv2-uklad { flex-direction: row; align-items: flex-start; gap: 22px; }
  .sv2-glowna { flex: 1 1 auto; gap: 14px; }
  .sv2-bok { flex: 0 0 340px; position: sticky; top: 90px; }
  .sv2-narzedzia { gap: 12px; }
  .sv2-szukaj { flex: 1 1 360px; }
  .sv2-szukaj-etykieta { position: absolute; left: -9999px; }
  .sv2 .sv2-szukaj-pole input { height: 54px; padding-left: 46px; }
  .sv2-szukaj-ikona { left: 16px; top: 17px; }
  .sv2-szukaj-czysc { right: 5px; top: 5px; }
  .sv2-sort { order: 2; font-size: 13.5px; gap: 8px; }
  .sv2-sort select { height: 54px; border-radius: 14px; border-width: 1.5px; padding: 0 12px; font-size: 14.5px; }
  .sv2-chipy { order: 3; flex: 1 1 400px; flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .sv2-chip { padding: 0 15px; }
  .sv2-licznik { order: 4; flex: 0 0 auto; margin-left: auto; font-size: 13.5px; }
  .sv2-pusto { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; padding: 26px; }
  .sv2-pusto-tekst { flex: 1 1 320px; }
  .sv2-pusto-tytul { font-size: 28px; }
  .sv2-siatka { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 16px; }
  .sv2-karta { border-radius: 16px; transition: box-shadow .2s, transform .2s; }
  .sv2-karta:hover { box-shadow: 0 14px 30px rgba(13, 16, 23, 0.12); transform: translateY(-2px); }
  .sv2-karta-obraz img { transition: transform .35s; }
  .sv2-karta:hover .sv2-karta-obraz img { transform: scale(1.04); }
  .sv2-karta-obraz .sv2-znaczek { left: 8px; top: 8px; padding: 3px 7px; font-size: 12px; }
  .sv2-nowosc { right: 8px; top: 8px; padding: 3px 7px; font-size: 11.5px; }
  .sv2-karta-tresc { gap: 4px; padding: 12px 14px 10px; }
  .sv2-karta-nazwa { font-size: 15px; min-height: 38px; }
  .sv2-karta-ceny { flex-direction: row-reverse; align-items: baseline; justify-content: flex-end; gap: 6px; margin-top: 2px; }
  .sv2-karta-ceny .sv2-karta-steam { margin-left: auto; }
  .sv2-karta-cena { font-size: 24px; }
  .sv2-karta-steam { font-size: 12.5px; }
  .sv2-karta-czas { font-size: 12px; }
  .sv2-karta-form { margin: 0 14px 14px; }
  .sv2 a.sv2-btn-koszyk.is-on, .sv2 a.sv2-btn-koszyk.is-on:hover { margin: 0 14px 14px; }
  .sv2-btn-koszyk { border-radius: 11px; font-size: 14px; }
  .sv2-kalk { border-radius: 20px; padding: 22px; }
  .sv2-kalk-tytul { font-size: 30px; line-height: 1; }
  .sv2-kalk-placisz b { font-size: 34px; }

  .sv2-blok-jak { background: none; border: 0; box-shadow: none; padding: 0; }
  .sv2-kroki { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
  .sv2-kroki li { background: #fff; border: 1px solid var(--sv2-ramka2); border-radius: 18px; padding: 66px 20px 20px; box-shadow: var(--sv2-cien); gap: 8px; }
  .sv2-kroki li:last-child { border-bottom: 1px solid var(--sv2-ramka2); }
  .sv2-kroki li::before { left: 20px; top: 20px; width: 36px; height: 36px; font-size: 19px; }
  .sv2-kroki b { font-size: 16.5px; }
  .sv2-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; align-items: start; }
  .sv2-faq details { padding: 0 18px; }
  .sv2-faq summary { min-height: 58px; font-size: 15.5px; }

  .sv2p { gap: 0; }
  .sv2p-okruszki { background: none; margin: 0 0 18px; padding: 0; font-size: 13px; color: var(--sv2-szary); }
  .sv2 .sv2p-okruszki a { color: var(--sv2-szary); }
  .sv2p-okruszki b { color: var(--sv2-tekst); font-weight: 700; }
  .sv2p-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "gora bok" "jak bok" "opinie bok"; grid-template-rows: auto auto 1fr; gap: 18px 22px; align-items: start; }
  .sv2p-gora { grid-area: gora; margin: 0; border-radius: 20px; padding: 22px; gap: 16px; }
  .sv2p-obraz { box-shadow: none; }
  .sv2p-obraz .sv2-znaczek { left: 14px; top: 14px; padding: 4px 10px; border-radius: 8px; font-size: 14px; }
  .sv2p .sv2-h1 { font-size: 56px; line-height: 0.95; margin-top: -4px; }
  .sv2p-lead { font-size: 16.5px; line-height: 1.5; max-width: 680px; }
  .sv2p-gora .sv2-hero-chipy { display: flex !important; margin-top: 0 !important; }
  .sv2p-gora .sv2-hero-chipy li { background: var(--sv2-ciemny2); }
  .sv2p-bok { grid-area: bok; position: sticky; top: 90px; }
  .sv2p-zakup { padding: 22px; }
  .sv2p-cena { font-size: 50px; }
  .sv2p-dane { display: flex; flex-direction: column; gap: 9px; padding: 12px 0; border-top: 1px solid #222a36; border-bottom: 1px solid #222a36; }
  .sv2p-dane > div, .sv2p-dane > div.sv2-tylko-desktop { display: flex !important; flex-direction: row; justify-content: space-between; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; }
  .sv2p-dane dt { font-size: 14px; }
  .sv2p-dane dd { font-size: 14px; font-weight: 700; text-align: right; }
  .sv2p-btn { min-height: 58px; font-size: 17px; }
  .sv2p-jak { grid-area: jak; margin-top: 0; }
  .sv2p-opinie { grid-area: opinie; margin-top: 0; }
  .sv2p-opinie .pv2-opinie-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv2p-opinie .pv2-opinia-kto b { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
  .sv2p-podobne-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; overflow: visible; margin: 0 !important; padding: 0 !important; }
  .sv2 .sv2p-podobne-lista a { border-radius: 16px; transition: box-shadow .2s, transform .2s; }
  .sv2 .sv2p-podobne-lista a:hover { box-shadow: 0 14px 30px rgba(13, 16, 23, 0.12); transform: translateY(-2px); }
  .sv2p-podobne-lista a > span { padding: 12px 14px 14px; gap: 4px; }
  .sv2p-podobne-lista b { font-size: 15px; white-space: normal; }
  .sv2p-podobne-cena { font-size: 22px; }
  .sv2p-dolny { display: none; }
}