/* ============================================================
   Karta produktu v3 — redesign 2026-07-05 (inspiracja Tomka, pkt 7).
   Trzy sekcje w systemie podstron (.subpage): 1) jasnoniebieski blok
   opis|media(16:9)+autor, 2) białe „Jak dodawać posty" (co otrzymujesz/
   jak korzystać/podgląd/dla kogo), 3) ważne informacje + CTA asysta.
   Lewy rail (nieruchomy): SPIS TREŚCI + karta „Pakiet" + box „Format
   i szczegóły techniczne" + disclaimer. Wymaga podstrony.css (--u-*,
   .sub-*) i jak-produkty.css (makieta jtp-cover).
   REVERT: apps/products/views.py → render 'products/detail_v2.html'.
   ============================================================ */

/* ---------------- LAYOUT / numeracja sekcji 2 ---------------- */
.pdp3 .sub-main { counter-reset: pdp3sec; }
.pdp3-secnum::before { counter-increment: pdp3sec; content: counter(pdp3sec); }

/* =========================================================================
   LEWY RAIL (7.1) — karta „Pakiet" + Format i szczegóły + disclaimer
   ========================================================================= */
.pdp3-railbuy {
    margin-top: 28px; padding: 18px;
    background: #fff; border: 1px solid var(--u-border);
    border-radius: var(--u-radius-sm); box-shadow: var(--u-shadow);
}
.pdp3-railbuy__label {
    margin: 0 0 10px; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--u-ink-muted);
}
.pdp3-railbuy__price { margin: 0; font-size: 1.28rem; font-weight: 800; color: var(--u-ink); line-height: 1.1; }
.pdp3-railbuy__price small { font-size: .7rem; font-weight: 600; color: var(--u-ink-muted); }
.pdp3-railbuy__gross { margin: 3px 0 14px; font-size: .74rem; color: var(--u-ink-muted); }
.pdp3-railbuy .sub-btn { width: 100%; justify-content: center; padding: 10px 12px; font-size: .84rem; }
.pdp3-railbuy .sub-btn + .sub-btn { margin-top: 8px; }

/* Box: Format i szczegóły techniczne (bez rozwijania) */
.pdp3-railtech {
    margin-top: 14px; padding: 16px 16px 14px;
    background: #fff; border: 1px solid var(--u-border);
    border-radius: var(--u-radius-sm); box-shadow: var(--u-shadow);
}
.pdp3-railtech__label {
    display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
    font-size: .82rem; font-weight: 800; color: var(--u-ink); line-height: 1.3;
}
.pdp3-railtech__icon {
    flex: none; width: 30px; height: 30px; border-radius: 8px;
    background: var(--u-primary-tint-2); color: var(--u-primary-dark);
    display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.pdp3-techlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pdp3-techlist li { display: flex; gap: 9px; align-items: flex-start; font-size: .8rem; line-height: 1.45; color: var(--u-ink-3); }
.pdp3-techlist li > i { flex: none; margin-top: 3px; color: var(--u-primary); font-size: .7rem; }
.pdp3-techlist b { color: var(--u-ink-2); font-weight: 700; }

/* Disclaimer + asysta w railu */
.pdp3-raildisc {
    margin-top: 14px; padding: 14px 16px; border-radius: var(--u-radius-sm);
    background: var(--u-primary-tint-2); border: 1px solid #CDE7F6;
}
.pdp3-raildisc__note { margin: 0 0 10px; font-size: .76rem; line-height: 1.5; color: var(--u-ink-3); display: flex; gap: 8px; }
.pdp3-raildisc__note i { flex: none; margin-top: 1px; color: var(--u-primary); }
.pdp3-raildisc__cta { font-size: .8rem; font-weight: 700; color: var(--u-primary-dark); text-decoration: none; }
.pdp3-raildisc__cta:hover { color: var(--u-primary); }

/* =========================================================================
   SEKCJA 1 (jasnoniebieskie tło) — breadcrumb full-width + opis|media + autor
   ========================================================================= */
.pdp3-s1 { display: block; padding: 28px 34px 32px; }
.pdp3-s1__crumb { margin: 0 0 20px; }

/* Swap kolumn (spec Tomka pkt 3): MEDIA/wideo w LEWEJ (szerokiej, „centralnej")
   kolumnie, opis w PRAWEJ (zwężonej) — kolejność wizualną daje CSS `order`.
   align-items:stretch → prawa kolumna ciągnie się na wysokość mediów, więc CTA
   (margin-top:auto) zjeżdża do poziomu paska miniatur (pkt 5). */
.pdp3-s1__grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: 30px; align-items: stretch; }

/* --- opis produktu (PRAWA komórka po swapie; flex-kolumna → CTA na dół) --- */
.pdp3-desc { min-width: 0; order: 2; display: flex; flex-direction: column; }
/* Tytuł mniejszy o ~30% + lead mniejszy (spec Tomka) */
.pdp3-desc__title {
    margin: 2px 0 8px; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800;
    line-height: 1.18; letter-spacing: -.02em; color: var(--u-ink);
}
.pdp3-desc__lead { margin: 0 0 14px; font-size: .86rem; line-height: 1.55; color: var(--u-ink-3); }
/* Cena (spec Tomka pkt 6 + 2026-07-10): nagłówek „Dostęp do pakietu", kwota netto
   w OSOBNYM wierszu poniżej (nie inline), brutto pod spodem. Blok zjeżdża NA DÓŁ
   pod CTA (margin-top:auto na .pdp3-actions ciągnie [CTA]+[cena] do dołu kolumny);
   ostatni wiersz (brutto) trafia w dolną linię modułu mediów. */
/* Cena zjeżdża w dół (margin-top:auto) tak, by DÓŁ „brutto" trafiał w dolną linię
   EKRANU mediów (dół sceny 16:9), a CTA zostało pod nią na samym dole (poziom miniatur).
   Odstęp cena→CTA (24px) ≈ wysokość strefy miniatur pod sceną — spec Tomka 2026-07-10 v2. */
.pdp3-desc__price { margin: auto 0 0; padding: 0; background: none; border: none; }
.pdp3-desc__price-label {
    display: block; font-size: .82rem; font-weight: 700; letter-spacing: .01em;
    color: var(--u-ink-2);
}
.pdp3-desc__price-net { margin-top: 5px; line-height: 1.05; }
.pdp3-desc__price-net b { font-size: 1.34rem; font-weight: 800; color: var(--u-ink); }
.pdp3-desc__price-gross { display: block; margin-top: 4px; font-size: .78rem; color: var(--u-ink-muted); }
/* CTA zjeżdża na dół kolumny = poziom paska miniatur (spec Tomka pkt 5) */
.pdp3-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.pdp3-actions .sub-btn { padding: 11px 18px; font-size: .9rem; }
.pdp3-owned {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px;
    border-radius: 10px; background: var(--u-green-bg); border: 1px solid var(--u-green-border);
    color: var(--u-green); font-size: .88rem; font-weight: 700;
}

/* --- media (LEWA komórka po swapie): scena 16:9 z karuzelą --- */
.pdp3-media { min-width: 0; order: 1; }
.pdp3-scene {
    position: relative; display: flex; align-items: center; justify-content: center;
}
/* „Giga okno" (spec Tomka): większa scena, szersza kolumna → maks. podglądu */
.pdp3-scene--wide {
    aspect-ratio: 3 / 2; max-height: 400px; overflow: hidden;
    border-radius: 16px; border: 1px solid #CDE7F6;
    background: radial-gradient(120% 140% at 30% 18%, #F6FBFE 0%, #E1EFFA 82%);
}
/* Makieta produktu — powiększona proporcjonalnie do większej sceny */
.pdp3-scene--wide .jtp-herofig { min-height: 0; padding: 0; }
.pdp3-scene--wide .jtp-herofig::before { width: 300px; height: 300px; }
.pdp3-scene__slot[data-slot="mock"] { display: none; width: 100%; }
.pdp3-scene__slot[data-slot="mock"].is-active { display: block; }
.pdp3-scene--wide .jtp-cover { max-width: 248px; }
.pdp3-scene--wide .jtp-cover__card { padding: 20px 20px 17px; }
.pdp3-scene--wide .jtp-cover__top { margin-bottom: 16px; }
.pdp3-scene--wide .jtp-cover__title { font-size: 1.32rem; }
.pdp3-scene--wide .jtp-cover__sub { margin: 4px 0 12px; font-size: .86rem; }
.pdp3-scene--wide .jtp-cover__foot { padding: 9px 12px; font-size: .76rem; }

/* zdjęcia / wideo — wypełniają kadr 16:9 bez czarnych pasków (§7.3) */
.pdp3-scene__img, .pdp3-scene__video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border-radius: 16px; display: block;
}
.pdp3-scene__img { object-fit: cover; background: #fff; }
.pdp3-scene__video { object-fit: cover; background: #0B1F3A; }
.pdp3-scene__img[hidden], .pdp3-scene__video[hidden] { display: none; }

.pdp3-scene__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--u-primary-dark); border: 1px solid #CDE7F6;
    box-shadow: 0 6px 14px rgba(11, 31, 58, .12);
    transition: background .15s ease;
}
.pdp3-scene__nav:hover { background: var(--u-primary-tint); }
.pdp3-scene__nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pdp3-scene__nav--prev { left: 10px; }
.pdp3-scene__nav--next { right: 10px; }
.pdp3-scene__count {
    position: absolute; right: 12px; bottom: 10px; z-index: 5; padding: 3px 10px;
    border-radius: 999px; background: rgba(11, 31, 58, .62); color: #fff;
    font-size: .7rem; font-weight: 700;
}

.pdp3-thumbs {
    display: flex; gap: 10px; justify-content: center; margin-top: 14px;
    overflow-x: auto; padding-bottom: 4px;
}
.pdp3-thumb {
    flex: none; width: 56px; height: 56px; border-radius: 10px; padding: 0;
    border: 2px solid var(--u-border); background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--u-primary-dark); font-size: 1rem; overflow: hidden;
    transition: border-color .15s ease;
}
.pdp3-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp3-thumb--video { background: var(--u-primary-tint-2); }
.pdp3-thumb:hover { border-color: #9ED3EF; }
.pdp3-thumb.is-active { border-color: var(--u-primary); box-shadow: 0 0 0 3px rgba(39, 163, 220, .16); }

/* --- Autor (spec Tomka 2026-07-10 v2): kolumny LUSTRZĄ hero (media|opis).
   LEWA kolumna (why/specialist) = pod modułem mediów (ściągnięta w lewo, węższa);
   PRAWA (stempel „Autor materiału" + foto) = pod kolumną opisu, więc foto i stempel
   ZACZYNAJĄ się dokładnie tam, gdzie tytuł/opis/cena. Foto większe (nie ściśnięte). --- */
.pdp3-s1__author {
    display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: 30px;
    align-items: start; margin-top: 22px; padding-top: 22px;
    border-top: 1px solid #D6E8F4;
}
.pdp3-acells { order: 1; }
/* prawa kolumna: stempel „Autor materiału" NAD zdjęciem, oba dosunięte w lewo do
   krawędzi kolumny; top-aligned z nagłówkiem „Dlaczego…" (align-items:start w gridzie)
   — spec Tomka 2026-07-10 (feng shui: równa górna linia). */
.pdp3-authorcol { order: 2; display: flex; flex-direction: column; padding-top: 0; }

/* Stempel „Autor materiału" — PŁASKI, jak eyebrow „Poradniki" (.sub-eyebrow):
   złota tarcza (--u-accent) + niebieski tekst, BEZ białej pastylki/komórki, dosunięty
   w lewo do linii zdjęcia (padding:0). */
.pdp3-authorbadge {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    margin: 0 0 13px; padding: 0;
    background: none; border: none; box-shadow: none;
    font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--u-primary-dark); line-height: 1.2;
}
.pdp3-authorbadge i { color: var(--u-accent); font-size: .95rem; }

.pdp3-abox {
    background: #fff; border: 1px solid var(--u-border);
    border-radius: var(--u-radius-sm); box-shadow: var(--u-shadow); overflow: hidden;
    align-self: flex-start; width: 100%; max-width: 265px;
}
/* Foto (spec Tomka 2026-07-10 v5): ZWĘŻONE o ~20% (331→265px), lekko WYŻSZE niż v4
   (kadr był za krótki) — aspect 9/10 (265×294), nadal odrobinę niższe od portretu 4:5.
   object-position trzyma twarz w kadrze. */
.pdp3-abox__photo {
    display: block; position: relative; width: 100%; aspect-ratio: 9 / 10;
    background: linear-gradient(135deg, #4FBEEC 0%, #1A86B8 100%); overflow: hidden;
}
.pdp3-abox__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.pdp3-abox__letter {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 72px; font-weight: 800;
}
.pdp3-abox__id { padding: 15px 18px 18px; }
.pdp3-abox__eyebrow {
    display: block; margin-bottom: 6px; font-size: .64rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: var(--u-ink-muted);
}
.pdp3-abox__name { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; color: var(--u-ink); line-height: 1.25; }
.pdp3-abox__role { margin: 0 0 12px; font-size: .82rem; line-height: 1.45; color: var(--u-ink-3); }
.pdp3-abox__bio { margin: 0 0 12px; font-size: .8rem; line-height: 1.5; color: var(--u-ink-3); }
.pdp3-abox__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.pdp3-abox__chips li {
    padding: 3px 9px; border-radius: 999px; background: var(--u-primary-tint-2);
    border: 1px solid #CDE7F6; color: var(--u-primary-dark); font-size: .66rem; font-weight: 700;
}
.pdp3-abox__link {
    display: inline-flex; align-items: center; gap: 7px; font-size: .82rem;
    font-weight: 700; color: var(--u-primary-dark); text-decoration: none;
}
.pdp3-abox__link:hover { color: var(--u-primary); }

/* Bloki „Dlaczego powstał…" / „Jestem specjalistą" — PŁASKO na niebieskim tle sekcji,
   BEZ osobnych białych komórek (spec Tomka 2026-07-10). Nagłówek pierwszego bloku stoi
   w równej linii ze stemplem „Autor materiału" (grid align-items:start). Cienka linia
   rozdziela oba bloki, zamiast obwódek. */
.pdp3-acells { display: grid; grid-template-columns: 1fr; gap: 20px; align-self: start; }
.pdp3-acell { background: none; border: none; border-radius: 0; padding: 0; }
.pdp3-acell + .pdp3-acell { padding-top: 20px; border-top: 1px solid #D6E8F4; }
.pdp3-acell__h {
    display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
    font-size: 1rem; font-weight: 800; color: var(--u-ink); line-height: 1.3;
}
.pdp3-acell__h i { flex: none; color: var(--u-primary); }
.pdp3-acell__t { margin: 0; font-size: .9rem; line-height: 1.62; color: var(--u-ink-3); }

/* =========================================================================
   SEKCJA 2 (białe tło) — komórki „Jak dodawać posty"
   ========================================================================= */
.pdp3-step--full { grid-template-columns: 1fr; }
.pdp3 .sub-step__desc { max-width: 56em; }

/* „Co otrzymujesz" — układ 2-kolumnowy: lista po LEWEJ, notatki „Wskazówka"/„Format" po
   PRAWEJ, a pod nimi PEŁNY OPIS jako własna komórka na całą szerokość (spec Tomka v3). */
.pdp3-aside-stack { display: flex; flex-direction: column; gap: 16px; }
.pdp3-fulldesc {
    grid-column: 1 / -1;
    background: #fff; border: 1px solid var(--u-border);
    border-radius: var(--u-radius-sm); box-shadow: var(--u-shadow); padding: 20px 24px;
}
.pdp3-fulldesc__label {
    margin: 0 0 12px; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--u-ink-muted);
}
.pdp3-fulldesc .pdp3-collapse { margin-top: 0; }

/* Mniej boldów w liście pakietu (spec Tomka 2026-07-10) — nacisk przenosimy na rozwijany
   szczegółowy opis; tytuły pozycji lżejsze (600 zamiast 800). */
.pdp3-getlist li strong { color: var(--u-ink-2); font-weight: 600; }

/* Rozwijana treść „Co otrzymujesz" (spec Tomka pkt 7) — wzór „Rozwiń/Zwiń"
   z feedu, na tokenach --u-*. Pełna szerokość komórki; rozwinięcie przesuwa
   kolejne komórki w dół (naturalny flow). */
.pdp3-collapse { margin-top: 18px; }
.pdp3-collapse__content {
    position: relative; overflow: hidden; max-height: none;
    font-size: .9rem; line-height: 1.62; color: var(--u-ink-3);
    transition: max-height .35s ease;
}
.pdp3-collapse__content p { margin: 0 0 10px; }
.pdp3-collapse__content p:last-child { margin-bottom: 0; }
.pdp3-collapse.is-clamped .pdp3-collapse__content { max-height: 150px; }
.pdp3-collapse.is-clamped .pdp3-collapse__content::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 92%);
    pointer-events: none; transition: opacity .2s ease;
}
.pdp3-collapse.is-clamped.is-expanded .pdp3-collapse__content { max-height: 4000px; }
.pdp3-collapse.is-clamped.is-expanded .pdp3-collapse__content::after { opacity: 0; }
.pdp3-collapse__toggle {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
    padding: 7px 16px; background: #fff; border: 1px solid var(--u-border);
    border-radius: 999px; color: var(--u-primary-dark); font: inherit;
    font-size: .82rem; font-weight: 700; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.pdp3-collapse__toggle:hover { background: var(--u-primary-tint-2); border-color: var(--u-primary); }
.pdp3-collapse__icon { transition: transform .2s ease; }
.pdp3-collapse.is-expanded .pdp3-collapse__icon { transform: rotate(180deg); }

/* Zielona komórka „Format i szczegóły techniczne" (spec Tomka) — lekki tekst, bez boldów */
.pdp3-formatnote { align-items: flex-start; }
.pdp3-formatnote__body { min-width: 0; }
.pdp3-formatnote .sub-note__title { margin-bottom: 8px; }
.pdp3-formatnote .pdp3-techlist { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pdp3-formatnote .pdp3-techlist li { display: flex; gap: 9px; align-items: flex-start; font-size: .83rem; line-height: 1.5; color: #3B5B41; }
.pdp3-formatnote .pdp3-techlist li > i { flex: none; margin-top: 3px; font-size: .72rem; color: var(--u-green); }
.pdp3-formatnote .pdp3-techlist b { font-weight: 500; color: inherit; }

/* Format i szczegóły — karta mobilna (rail znika < 992px) */
.pdp3-techmobile { display: none; }

/* 2. Jak korzystać — pionowe numerowane kroki (prawa kolumna) */
.pdp3-vsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pdp3-vstep {
    display: flex; gap: 14px; align-items: flex-start;
    background: #fff; border: 1px solid var(--u-border); border-radius: 12px;
    padding: 14px 16px; box-shadow: var(--u-shadow);
}
.pdp3-vstep__num {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--u-primary-tint); color: var(--u-primary-dark);
    font-weight: 800; font-size: .95rem;
}
.pdp3-vstep h3 { margin: 0 0 3px; font-size: .92rem; font-weight: 800; color: var(--u-ink); line-height: 1.3; }
.pdp3-vstep p { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--u-ink-3); }

/* 3. Zobacz co znajdziesz — zablurowany podgląd */
.pdp3-doc__chip {
    display: inline-block; padding: 2px 8px; border-radius: 999px; margin-left: 4px;
    font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    font-style: normal; vertical-align: middle;
}
.pdp3-doc__chip--blue  { background: var(--u-primary-tint-2); color: var(--u-primary-dark); }
.pdp3-doc__chip--green { background: var(--u-green-bg); color: var(--u-green); }
.pdp3-doc__chip--gold  { background: #FBF0D3; color: var(--u-accent-dark); }
.pdp3-doc__chip--navy  { background: #E8EDF5; color: var(--u-ink); }
.pdp3-doc__icon--blue  { background: var(--u-primary-tint-2); color: var(--u-primary-dark); }
.pdp3-doc__icon--green { background: var(--u-green-bg); color: var(--u-green); }
.pdp3-doc__icon--gold  { background: #FBF0D3; color: var(--u-accent-dark); }
.pdp3-doc__icon--navy  { background: #E8EDF5; color: var(--u-ink); }

.pdp3-blurprev {
    position: relative; min-height: 232px; height: 100%; border-radius: 14px;
    overflow: hidden; border: 1px solid var(--u-border); background: #F8FBFE;
    box-shadow: var(--u-shadow);
}
.pdp3-blurprev__page { padding: 20px; display: grid; gap: 13px; filter: blur(3px); opacity: .9; }
.pdp3-blurprev__doc {
    display: flex; align-items: center; gap: 12px; background: #fff;
    border: 1px solid var(--u-border); border-radius: 10px; padding: 12px 14px;
}
.pdp3-blurprev__ico {
    flex: none; width: 38px; height: 38px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.pdp3-blurprev__lines { flex: 1; display: grid; gap: 7px; }
.pdp3-blurprev__lines i { display: block; height: 8px; border-radius: 4px; background: #DCE6F1; }
.pdp3-blurprev__lock {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    background: radial-gradient(circle at center, rgba(234, 246, 252, .55), rgba(226, 240, 250, .88));
}
.pdp3-blurprev__badge {
    width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--u-primary-dark); font-size: 1.25rem;
    box-shadow: 0 10px 24px rgba(11, 31, 58, .18);
}
.pdp3-blurprev__cap {
    font-size: .86rem; font-weight: 700; color: var(--u-ink-2);
    background: #fff; padding: 6px 14px; border-radius: 999px; box-shadow: var(--u-shadow);
}

/* Realna ZAJAWKA dokumentu (spec Tomka 2026-07-10): 1. strona PDF (previews.py) —
   przyciemniona, lekko rozmyta, NIERUCHOMA (bez scrolla/zaznaczania/przeciągania).
   Kłódka + „Podgląd dostępny po zakupie" zostają na wierzchu. Rozmycie CSS = kosmetyka;
   realne zabezpieczenie to niska rozdzielczość + przycięcie obrazu (patrz previews.py). */
.pdp3-blurprev__real { position: absolute; inset: 0; overflow: hidden; background: #0B1F3A; }
.pdp3-blurprev__real img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
    /* dokument ODKRYTY (spec Tomka 2026-07-10): BEZ rozmycia — pokazujemy realny podgląd.
       Zabezpieczenie = niska rozdzielczość + tylko górna część 1. strony (previews.py).
       Nadal nieruchomy: bez zaznaczania/przeciągania/menu. */
    filter: none;
    user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none;
}
/* wariant „dokument" (spec Tomka 2026-07-10 v6): komórka PIONOWA (portret) — bo dokumenty
   są wertykalne; pokazujemy WIĘKSZĄ część strony. Kłódka + „Podgląd" NA DOLE, gradient
   tylko u dołu → górna część dokumentu w pełni widoczna („uchylamy większego rąbka"). */
.pdp3-blurprev--doc {
    aspect-ratio: 3 / 4; height: auto; min-height: 0; width: 100%; max-width: 330px; margin: 0 auto;
}
.pdp3-blurprev--doc .pdp3-blurprev__lock {
    justify-content: flex-end; padding-bottom: 18px; gap: 10px;
    background: linear-gradient(180deg, rgba(11, 31, 58, 0) 45%, rgba(11, 31, 58, .58) 100%);
}
.pdp3-blurprev--doc .pdp3-blurprev__badge { width: 44px; height: 44px; font-size: 1rem; }
.pdp3-blurprev--doc .pdp3-blurprev__cap { background: rgba(255, 255, 255, .97); }

/* =========================================================================
   KARUZELA PODGLĄDÓW dokumentu (sekcja „Zobacz, co znajdziesz") — do 5 zajawek.
   Element ma klasy .pdp3-carousel.pdp3-blurprev--doc — używamy WYŻSZEJ
   specyficzności (0,2,0), by zresetować bazowe .pdp3-carousel (margin/padding/
   border-top od karuzeli „poznaj inne produkty") i wyśrodkować kłódkę
   (bazowe .pdp3-blurprev--doc .pdp3-blurprev__lock daje flex-end = dół).
   ========================================================================= */
.pdp3-carousel.pdp3-blurprev--doc {
    /* reset dziedziczenia z bazowego .pdp3-carousel */
    margin: 0 auto; padding: 0; border-top: none;
    position: relative; overflow: hidden;
    border-radius: 14px; background: #0B1F3A; box-shadow: var(--u-shadow);
    /* rozmiar jak .pdp3-blurprev--doc (portret 3/4, max 330px, wyśrodkowany) */
    aspect-ratio: 3 / 4; height: auto; min-height: 0; width: 100%; max-width: 330px;
}
.pdp3-carousel__viewport { position: absolute; inset: 0; }
.pdp3-carousel__slide {
    position: absolute; inset: 0; opacity: 0;
    transition: opacity .3s ease; pointer-events: none;
}
.pdp3-carousel__slide.is-active { opacity: 1; }
.pdp3-carousel__slide .pdp3-blurprev__real { position: absolute; inset: 0; overflow: hidden; background: #0B1F3A; }
.pdp3-carousel__slide .pdp3-blurprev__real img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
    /* lekkie rozmycie: nagłówki (duże) czytelne, drobny tekst już nie + delikatne przyciemnienie */
    filter: blur(1.5px) brightness(.92);
    user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none;
}
/* kłódka WYŚRODKOWANA (override bazowego flex-end) + czysto wizualna
   (pointer-events:none → nigdy nie blokuje strzałek/kropek pod spodem) */
.pdp3-carousel.pdp3-blurprev--doc .pdp3-blurprev__lock {
    position: absolute; inset: 0; z-index: 3; padding: 0; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: radial-gradient(120% 90% at 50% 50%, rgba(11, 31, 58, .12) 0%, rgba(11, 31, 58, .42) 100%);
}
.pdp3-carousel.pdp3-blurprev--doc .pdp3-blurprev__badge { width: 52px; height: 52px; font-size: 1.15rem; }
.pdp3-carousel.pdp3-blurprev--doc .pdp3-blurprev__cap { background: rgba(255, 255, 255, .97); }

/* strzałki — nad obrazami i overlayem, zawsze klikalne (także na mobile, ≥40px) */
.pdp3-carousel__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    pointer-events: auto; cursor: pointer;
    width: 40px; height: 40px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .9); color: var(--u-primary-dark);
    font-size: 1.5rem; line-height: 1; font-weight: 700;
    box-shadow: 0 6px 16px rgba(11, 31, 58, .22); transition: background .15s ease;
}
.pdp3-carousel__arrow:hover { background: #fff; }
.pdp3-carousel__arrow:focus-visible { outline: 3px solid var(--u-accent); outline-offset: 2px; }
.pdp3-carousel__arrow--prev { left: 6px; }
.pdp3-carousel__arrow--next { right: 6px; }

/* kropki — dół, wyśrodkowane */
.pdp3-carousel__dots {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 5;
    display: flex; gap: 6px; pointer-events: auto;
}
.pdp3-carousel__dot {
    width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .55); box-shadow: 0 1px 3px rgba(11, 31, 58, .3);
    transition: background .15s ease, transform .15s ease;
}
.pdp3-carousel__dot:hover { background: rgba(255, 255, 255, .8); }
.pdp3-carousel__dot.is-active { background: #fff; transform: scale(1.35); }
.pdp3-carousel__dot:focus-visible { outline: 2px solid var(--u-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pdp3-carousel__slide { transition: none; }
}

/* 4. Dla kogo — persony */
.pdp3-personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 10px; }
.pdp3-persona {
    background: #fff; border: 1px solid var(--u-border);
    border-radius: var(--u-radius-sm); box-shadow: var(--u-shadow); padding: 22px 18px;
}
.pdp3-persona__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; border-radius: 14px; margin-bottom: 13px;
    background: var(--u-primary-tint); color: var(--u-primary-dark); font-size: 1.25rem;
}
.pdp3-persona h3 { margin: 0 0 7px; font-size: .94rem; font-weight: 800; color: var(--u-ink); line-height: 1.3; }
.pdp3-persona p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--u-ink-3); }

/* =========================================================================
   SEKCJA 3 (zostaje) — Ważne informacje + CTA asysta (małe zdjęcie autora)
   ========================================================================= */
.pdp3-legal {
    margin-top: 14px; background: #fff; border: 1px solid var(--u-border);
    border-radius: var(--u-radius-sm); padding: 4px 18px;
}
.pdp3-legal summary {
    list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700;
    color: var(--u-ink); font-size: .92rem; display: flex; justify-content: space-between;
    align-items: center; gap: 12px;
}
.pdp3-legal summary::-webkit-details-marker { display: none; }
.pdp3-legal summary::after {
    content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    color: var(--u-primary); font-size: .78rem; transition: transform .2s ease;
}
.pdp3-legal[open] summary::after { transform: rotate(180deg); }
.pdp3-legal ul { margin: 0 0 16px; padding-left: 18px; }
.pdp3-legal li { font-size: .88rem; line-height: 1.6; color: var(--u-ink-3); margin-bottom: 6px; }
.pdp3-fine { margin: 14px 0 0; font-size: .78rem; color: var(--u-ink-muted); }
/* delikatna kreska rozdzielająca „Ważne informacje" od CTA asysty (spec Tomka 2026-07-10) */
.pdp3-hr { border: none; border-top: 1px solid var(--u-border); margin: 22px 0 2px; }
/* „Podstawa prawna" przeniesiona po sekcji 1 — samodzielny blok (odstęp jak inne komórki) */
.pdp3-legal--standalone { margin-top: 0; }

/* Okrągłe zdjęcie autora w sekcji asysty — powiększone o +30% (spec Tomka pkt 8): 84→110px */
.pdp3-final__photo {
    flex: none; width: 110px; height: 110px; border-radius: 50%; overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .55); box-shadow: 0 6px 16px rgba(8, 20, 39, .22);
}
.pdp3-final__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================================
   MOBILNY STICKY PASEK ZAKUPU
   ========================================================================= */
.pdp3-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: none;
    background: #fff; border-top: 1px solid var(--u-border);
    box-shadow: 0 -8px 24px rgba(11, 31, 58, .14);
    transform: translateY(110%); transition: transform .25s ease;
}
.pdp3-sticky.is-visible { transform: none; }
.pdp3-sticky__inner { display: flex; align-items: center; gap: 12px; padding: 11px 16px; }
.pdp3-sticky__name {
    flex: 1; min-width: 0; font-size: .82rem; font-weight: 700; color: var(--u-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdp3-sticky__price { flex: none; font-size: .92rem; font-weight: 800; color: var(--u-ink); }
.pdp3-sticky__price small { font-size: .68rem; font-weight: 600; color: var(--u-ink-muted); }
.pdp3-sticky .sub-btn { flex: none; width: auto; padding: 9px 14px; font-size: .82rem; }
.pdp3-sticky__owned { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--u-green); font-size: .82rem; font-weight: 700; }
@media (max-width: 992px) {
    .pdp3-sticky { display: block; }
}

/* =========================================================================
   MODAL KONTAKTU
   ========================================================================= */
.pdp3-modal-overlay {
    position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center;
    padding: 20px; background: rgba(11, 31, 58, .55); backdrop-filter: blur(2px);
}
.pdp3-modal-overlay[hidden] { display: none; }
.pdp3-modal {
    position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
    background: #fff; border-radius: 16px; padding: 28px 30px;
    box-shadow: 0 30px 80px rgba(8, 20, 39, .35);
}
.pdp3-modal__close {
    position: absolute; top: 12px; right: 14px; width: 36px; height: 36px;
    border: none; background: none; cursor: pointer; border-radius: 9px;
    font-size: 1.5rem; line-height: 1; color: var(--u-ink-muted);
}
.pdp3-modal__close:hover { background: var(--u-bg); color: var(--u-ink); }
.pdp3-modal__title { margin: 0 0 8px; font-size: 1.3rem; font-weight: 800; color: var(--u-ink); }
.pdp3-modal__sub { margin: 0 0 20px; font-size: .9rem; line-height: 1.55; color: var(--u-ink-3); }

.pdp3-form { display: flex; flex-direction: column; gap: 14px; }
.pdp3-field { display: flex; flex-direction: column; gap: 6px; }
.pdp3-field label { font-size: .86rem; font-weight: 700; color: var(--u-ink-2); }
.pdp3-field .pdp3-opt { font-weight: 500; color: var(--u-ink-muted); }
.pdp3-field input, .pdp3-field textarea {
    width: 100%; padding: 11px 13px; font: inherit; font-size: .94rem;
    color: var(--u-ink); background: #fff; border: 1px solid var(--u-border);
    border-radius: 9px; transition: border-color .15s ease, box-shadow .15s ease;
}
.pdp3-field input:focus, .pdp3-field textarea:focus {
    outline: none; border-color: var(--u-primary);
    box-shadow: 0 0 0 3px rgba(39, 163, 220, .15);
}
.pdp3-field textarea { resize: vertical; min-height: 90px; }
.pdp3-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .84rem; line-height: 1.5; color: var(--u-ink-3); }
.pdp3-consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--u-primary); }
.pdp3-consent a { color: var(--u-primary-dark); }
.pdp3-form__status { padding: 11px 14px; border-radius: 9px; font-size: .88rem; }
.pdp3-form__status--pending { background: var(--u-primary-tint-2); color: var(--u-ink-2); }
.pdp3-form__status--ok { background: var(--u-green-bg); border: 1px solid var(--u-green-border); color: var(--u-green); }
.pdp3-form__status--error { background: #FEF2F2; border: 1px solid #FCA5A5; color: #9B1C1C; }
.pdp3-form .sub-btn { width: 100%; justify-content: center; }

/* =========================================================================
   KARUZELA „Poznaj inne nasze produkty" (spec Tomka pkt 9)
   ========================================================================= */
.pdp3-carousel { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--u-border); }
.pdp3-carousel__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px;
}
.pdp3-carousel__title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--u-ink); line-height: 1.2; }
.pdp3-carousel__nav { display: flex; gap: 8px; flex: none; }
.pdp3-carousel__btn {
    width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--u-primary-dark); border: 1px solid #CDE7F6;
    box-shadow: 0 6px 14px rgba(11, 31, 58, .1); transition: background .15s ease, opacity .15s ease;
}
.pdp3-carousel__btn:hover { background: var(--u-primary-tint); }
.pdp3-carousel__btn:disabled { opacity: .35; cursor: default; }
.pdp3-carousel__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.pdp3-carousel__track {
    display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 10px;
    scroll-snap-type: x proximity; scrollbar-width: thin;
}
.pdp3-carousel__track::-webkit-scrollbar { height: 8px; }
.pdp3-carousel__track::-webkit-scrollbar-thumb { background: #CDE7F6; border-radius: 999px; }
.pdp3-pcard {
    flex: 0 0 218px; scroll-snap-align: start; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--u-border); border-radius: var(--u-radius-sm);
    overflow: hidden; text-decoration: none; box-shadow: var(--u-shadow);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pdp3-pcard:hover { transform: translateY(-3px); border-color: #9ED3EF; box-shadow: 0 14px 30px rgba(11, 31, 58, .14); }
.pdp3-pcard__media {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    background: radial-gradient(120% 140% at 30% 18%, #F6FBFE 0%, #E1EFFA 82%);
    display: flex; align-items: center; justify-content: center;
}
.pdp3-pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp3-pcard__ph { color: var(--u-primary); font-size: 1.7rem; opacity: .7; }
.pdp3-pcard__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pdp3-pcard__name {
    margin: 0; font-size: .88rem; font-weight: 700; color: var(--u-ink); line-height: 1.34;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pdp3-pcard__price { margin-top: auto; font-size: .95rem; font-weight: 800; color: var(--u-primary-dark); }
.pdp3-pcard__price small { font-size: .68rem; font-weight: 600; color: var(--u-ink-muted); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 992px) {
    .pdp3-personas { grid-template-columns: repeat(2, 1fr); }
    /* rail (.sub-toc) znika → format i szczegóły w karcie mobilnej */
    .pdp3-techmobile {
        display: block; background: #fff; border: 1px solid var(--u-border);
        border-radius: var(--u-radius-sm); box-shadow: var(--u-shadow); padding: 16px 18px;
    }
}
@media (max-width: 860px) {
    .pdp3-s1 { padding: 22px 20px 26px; }
    .pdp3-s1__grid { grid-template-columns: 1fr; gap: 22px; }
    /* mobile: tytuł/opis PRZED modułem wideo (kontekst na górze) */
    .pdp3-desc { order: 0; }
    .pdp3-scene--wide { max-height: none; }
    .pdp3-s1__author { grid-template-columns: 1fr; gap: 20px; }
    /* mobile: karta autora (badge+foto) przed komórkami why/specjalista */
    .pdp3-authorcol { order: 0; padding-top: 0; }
    .pdp3-abox { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; max-width: none; }
    .pdp3-abox__id { padding: 14px 16px; }
}
@media (max-width: 720px) {
    .pdp3-personas { grid-template-columns: 1fr; }
    .pdp3-actions .sub-btn { width: 100%; justify-content: center; }
    .pdp3-scene--wide { max-height: 64vw; }
    .pdp3-abox { grid-template-columns: 1fr; }
    .pdp3-abox__photo { aspect-ratio: 3 / 2; }
    .pdp3-modal { padding: 24px 20px; }
    /* pasek sticky nie może zasłaniać stopki formularzy */
    .pdp3 { padding-bottom: 64px; }
}
@media (max-width: 500px) {
    /* Scena kwadratowa na wąskim ekranie — mieści portretową makietę z tagiem
       „E-BOOK" (w kadrze 3:2 cover 260px > scena 227px → tag ucinany). QA fix. */
    .pdp3-scene--wide { aspect-ratio: 1 / 1; max-height: 380px; }
    .pdp3-scene--wide .jtp-cover { max-width: 210px; }
    .pdp3-scene--wide .jtp-herofig::before { width: 250px; height: 250px; }
    .pdp3-scene--wide .jtp-cover__title { font-size: 1.16rem; }
    .pdp3-carousel__title { font-size: 1.02rem; }
    .pdp3-pcard { flex-basis: 200px; }
    /* karuzela podglądów: nieco węższa na wąskich ekranach, strzałki nadal ≥40px */
    .pdp3-carousel.pdp3-blurprev--doc { max-width: 300px; }
}