/* ══════════════════════════════════════════════════════════════════
   PODSTRONY · rozszerzenie świata „Ściana war roomu”
   Dziedziczy całą tożsamość z sciana.css. Tu mieszkają wyłącznie
   układy, których nie ma na stronie głównej: karta produktu,
   lista korzyści, przesłanki zaufania, spis treści, formularz.
   ══════════════════════════════════════════════════════════════════ */

/* ── hero podstrony ──────────────────────────────────────────────── */

.phero { padding-block: var(--s6) var(--s7); }
.phero__w { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 980px) { .phero__w { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: var(--s6); } }
.phero h1 { font-size: clamp(32px, 4.3vw, 62px); margin-bottom: var(--s4); }
.phero .lead { margin-bottom: var(--s5); }

/* okładka produktu: dowód przypięty płasko, bez ramki i obrotu */
.oklada { margin: 0; }
.oklada img { width: 100%; height: auto; display: block; background: var(--sciana-glab); }
.oklada figcaption { margin-top: var(--s3); font-size: 13.5px; color: var(--kreda-plan); }

/* ── obietnice z hero: trzy zdania, nie karty ─────────────────── */

.obietnice { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s3); max-width: var(--miara); }
.obietnice li { display: flex; gap: var(--s3); font-size: 16.5px; line-height: 1.5; }
.obietnice li::before {
  content: ""; flex: 0 0 18px; height: 2px; margin-top: 13px; background: var(--zar);
}

/* ── blok ceny ───────────────────────────────────────────────────── */

.cena { border-top: 2px solid var(--zar); padding-top: var(--s3); margin-bottom: var(--s4); }
.cena__kwota {
  font-family: var(--ekspozycja); font-weight: 700; letter-spacing: -.045em;
  font-size: clamp(38px, 4.4vw, 58px); line-height: .94; margin: var(--s2) 0 var(--s2);
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
}
.cena__kwota s { font-size: .44em; font-weight: 500; color: var(--kreda-cicha); text-decoration-thickness: 1px; }
.cena__nota { font-size: 14px; color: var(--kreda-plan); margin: 0; }

/* ── korzyści: pozycje rejestru, każda z nazwą i konsekwencją ──── */

.korzysci-lista { list-style: none; margin: 0; padding-top: var(--s2); border-top: 1px solid var(--kreda-cicha); }
.korzysci-lista li { padding: var(--s5) 0; border-bottom: 1px solid var(--sciana-linia); display: grid; gap: var(--s3); }
@media (min-width: 880px) { .korzysci-lista li { grid-template-columns: minmax(0,.4fr) minmax(0,.6fr); gap: var(--s5); align-items: start; } }
.korzysci-lista h3 { margin: 0; }
.korzysci-lista p { margin: 0; color: var(--kreda-plan); max-width: var(--miara); }

/* ── przesłanki zaufania ─────────────────────────────────────────── */

.zaufanie { display: grid; gap: var(--s4); }
@media (min-width: 860px) { .zaufanie { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s5); } }
.zaufanie > div { background: var(--sciana-plan); padding: var(--s5); text-align: center; }
.zaufanie h3 { margin: 0 0 var(--s2); }
.zaufanie p { margin: 0; font-size: 16px; color: var(--kreda-plan); }

/* ── spis treści produktu ───────────────────────────────────────── */

.spis { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .spis { grid-template-columns: repeat(2, 1fr); gap: var(--s6); } }
.spis__grupa h3 { margin-bottom: var(--s3); }
.spis__grupa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.spis__grupa li { display: flex; gap: var(--s3); font-size: 16px; line-height: 1.5; color: var(--kreda-plan); }
.spis__grupa li::before { content: ""; flex: 0 0 14px; height: 1px; margin-top: 12px; background: var(--sciana-linia); }
.spis__meta { font-family: var(--ekspozycja); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--zar-kreda); margin-top: var(--s4); }

/* ── dwa produkty obok siebie ───────────────────────────────────── */

.para { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .para { grid-template-columns: repeat(2, 1fr); } }
.para--trzy { grid-template-columns: 1fr; }
@media (min-width: 980px) { .para--trzy { grid-template-columns: repeat(3, 1fr); } }
.produkt-kafel { background: var(--sciana-plan); padding: var(--s5); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); }
.produkt-kafel h3 { margin: 0; }
.produkt-kafel p { margin: 0; font-size: 16px; color: var(--kreda-plan); }
.produkt-kafel .cena { margin-top: auto; margin-bottom: var(--s3); width: 100%; }
.produkt-kafel .cena__kwota { justify-content: center; }
.produkt-kafel .cena__kwota { font-size: clamp(30px, 3vw, 40px); }
.produkt-kafel--wyroz { outline: 2px solid var(--zar); outline-offset: 0; }
.produkt-kafel__znacznik { font-family: var(--ekspozycja); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sciana); background: var(--zar); padding: 5px 11px; align-self: center; }

/* ── formularz zgłoszenia ───────────────────────────────────────── */

.zgloszenie {
  background: var(--sciana-plan); padding: clamp(1.4rem, 3.4vw, 2.8rem);
  max-width: 660px;
}
.pole { display: block; margin-bottom: var(--s4); }
.pole__etykieta { display: block; font-family: var(--ekspozycja); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--kreda); margin-bottom: var(--s2); }
.pole__input, .pole__area, .pole__select {
  width: 100%; padding: 14px 16px;
  background: var(--sciana); color: var(--kreda);
  border: 1px solid var(--sciana-linia); border-radius: 2px;
  font-family: var(--tekst); font-size: 16px; outline: none;
  transition: border-color .2s var(--wyjscie), box-shadow .2s var(--wyjscie);
}
.pole__area { min-height: 116px; resize: vertical; }
.pole__input:focus, .pole__area:focus, .pole__select:focus { border-color: var(--zar); box-shadow: 0 0 0 3px rgba(255,107,0,.16); }
.pole__input::placeholder, .pole__area::placeholder { color: #666B7A; }
.zgoda { display: flex; gap: var(--s3); align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--kreda-cicha); margin-bottom: var(--s4); }
.zgoda input { margin: 3px 0 0; accent-color: var(--zar); flex: 0 0 auto; }
.zgoda a { color: var(--zar-kreda); }
.komunikat { display: none; margin-top: var(--s4); padding: 14px 16px; background: rgba(255,107,0,.1); color: var(--kreda); font-size: 15px; }
.komunikat.widac { display: block; }

/* ── ścieżka powrotu ────────────────────────────────────────────── */

.powrot { font-size: 14px; color: var(--kreda-cicha); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.powrot:hover { color: var(--kreda); }