/**
 * agentsclub V2 - /produkt/<slug>, strona sprzedażowa.
 *
 * Jedna kolumna czytelnej szerokości: to jest strona do przeczytania, nie
 * kokpit. Checkout (/kup/<slug>) ma własny, dwukolumnowy układ - tu nie ma
 * formularza, bo ta strona ma przekonać, a nie domykać.
 */

.pd { max-width: 68ch; margin: 0 auto; padding: 40px 0 72px; }

.pd-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 32px;
  background: var(--panel);
}

.pd h1 { margin-bottom: 12px; }

.pd-lead {
  font-size: 18px;
  color: var(--sub);
  line-height: 1.55;
  text-wrap: pretty;
  margin-bottom: 32px;
}

/* ── Blok ceny ──────────────────────────────────────────── */

.pd-buy {
  background: var(--panel);
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 40px;
}

.pd-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pd-price strong { font-size: 32px; font-weight: 650; letter-spacing: -.02em; }
.pd-price s { font-size: 18px; color: var(--sub); }

.pd-vat { font-size: var(--fs-small); color: var(--sub); margin-top: 4px; }

/* Wymóg Omnibusa stoi tuż pod ceną, nie w przypisie na dole strony -
   informacja, która ma chronić kupującego, musi być tam, gdzie patrzy. */
.pd-omnibus {
  font-size: var(--fs-small);
  color: var(--sub);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}

.pd-countdown {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--acc);
  margin-top: 14px;
}
.pd-countdown.is-over { color: var(--sub); font-weight: 500; }

.pd-cta { margin-top: 20px; font-size: var(--fs-body); padding: 15px 28px; }

.pd-closed {
  margin-top: 18px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--sub);
}

/* ── Zawartość paczki ───────────────────────────────────── */

.pd-items { margin-bottom: 40px; }
.pd-items h2 { margin-bottom: 14px; }
.pd-items ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pd-items li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--fs-body);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}
.pd-item-kind {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--acc);
}

/* ── Opis (HTML z panelu) ───────────────────────────────── */

.pd-body { font-size: var(--fs-body); line-height: 1.72; }
.pd-body :is(h2, h3, h4) { margin: 32px 0 12px; font-weight: 650; letter-spacing: -.012em; }
.pd-body p { margin: 0 0 16px; text-wrap: pretty; }
.pd-body :is(ul, ol) { margin: 0 0 16px; padding-left: 22px; }
.pd-body li { margin-bottom: 8px; }
.pd-body :is(img, video) { max-width: 100%; height: auto; border-radius: 12px; margin: 20px 0; }
.pd-body figure { margin: 20px 0; }
.pd-body figcaption { font-size: var(--fs-small); color: var(--sub); margin-top: 8px; }
.pd-body a { color: var(--acc); }
.pd-body code {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--pill);
  padding: 2px 6px;
  border-radius: 6px;
}
.pd-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: var(--fs-small); }
.pd-body :is(td, th) { border: 1px solid var(--hair); padding: 8px 12px; text-align: left; }
.pd-body th { font-weight: 600; background: var(--panel); }

@media (max-width: 640px) {
  .pd { padding: 24px 0 56px; }
  .pd-buy { padding: 20px; }
  .pd-price strong { font-size: 28px; }
  /* CTA na pełną szerokość: na telefonie to jedyny cel tej strony. */
  .pd-cta { display: flex; justify-content: center; width: 100%; }
}

/* ── Masz to już ─────────────────────────────────────────
   Zamiast bloku ceny, nie obok niego (views/product.php). Ten sam akcent
   i ten sam ptaszek co „W bibliotece" w /sklep - to jest ta sama informacja
   i ma wyglądać tak samo w obu miejscach. */

.pd-owned-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 650;
  color: var(--acc);
}
.pd-owned-tag svg { width: 18px; height: 18px; flex: none; }

.pd-owned-note { font-size: var(--fs-small); color: var(--sub); margin-top: 8px; }
.pd-owned .pd-cta { margin-top: 20px; }

/* Ostrzeżenie w --ink, nie --sub: to informacja, na podstawie której ktoś
   decyduje o zapłacie, a nie proza wokół niej. */
.pd-partial {
  font-size: var(--fs-small);
  color: var(--ink);
  margin-top: 14px;
}