/* product.css — SZCZURKOWO 2.0, redesign strony produktu (2026-09)
   Dotyczy woocommerce/single-product.php: Pakiet 3 ebooków, Konsultacja 1:1,
   pojedyncze ebooki. Tylko warianty/komponenty, których main.css jeszcze nie
   miał — reszta (hero, book, chip, card, price-row, delivery-strip, steps,
   grid-3…) pochodzi z main.css i jest tam utrzymywana, nie duplikowana tutaj. */

/* ---- Hero badge — warianty koloru per typ oferty. Używają dokładnie tych
   samych tokenów co .chip--rat/--hamster/--rabbit gdzie indziej w motywie,
   więc to nie jest równoległa paleta, tylko inny komponent na tych samych
   kolorach. ---- */
.hero-badge-pill--bundle {
  background: var(--color-accent);
  color: #fff;
}
.hero-badge-pill--rat { background: var(--color-rat-tint); color: var(--color-rat-ink); }
.hero-badge-pill--hamster { background: var(--color-hamster-tint); color: var(--color-hamster-ink); }
.hero-badge-pill--rabbit { background: var(--color-rabbit-tint); color: var(--color-rabbit-ink); }

/* ---- Konsultacja 1:1 — to usługa, nie ebook: hero-visual dostaje realne
   zdjęcie zamiast okładki/mockupu książki (patrz single-product.php). ---- */
.pdp-photo-wrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center 30%;
  box-shadow: var(--shadow-lg);
}
.pdp-photo-wrap--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-5);
  background: repeating-linear-gradient(135deg, var(--color-primary-tint), var(--color-primary-tint) 14px, var(--color-cream) 14px, var(--color-cream) 28px);
  border: 2px dashed var(--color-primary);
}

@media (max-width: 560px) {
  .pdp-photo-wrap { aspect-ratio: 4 / 3; }
}