/* =========================================================================
   base.css — theme „base" page-buildera (CMS)
   Tokeny (design tokens) + kontrakt klas page-buildera (pb-*).
   Klient edytuje wartości tokenów (panel — E5); układ buduje z sekcji.
   Responsywność: auto — kolumny zwijają się przez @media + custom properties
   emitowane przez StyleBuilder (--pb-col / --pb-col-m). Zero inline media queries.
   ========================================================================= */

/* ---------- Design tokens (theme „base") ---------- */
:root {
    /* paleta */
    --c-primary:      #2563eb;
    --c-primary-dark: #1d4ed8;
    --c-accent:       #f59e0b;
    --c-bg:           #ffffff;
    --c-surface:      #f8fafc;
    --c-text:         #1e293b;
    --c-muted:        #64748b;
    --c-border:       #e2e8f0;
    --c-white:        #ffffff;
    --c-dark:         #0f172a;

    /* typografia */
    --font-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-head: var(--font-base);
    --fs-base: 1rem;
    --lh-base: 1.65;

    /* skala odstępów */
    --sp-sm:  0.5rem;
    --sp-md:  1rem;
    --sp-lg:  2rem;
    --sp-xl:  3.5rem;
    --sp-xxl: 5.5rem;

    /* układ */
    --container: 1180px;
    --radius: 10px;
    --gutter: 1.25rem;
}

/* ---------- Reset minimalny ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.pb-body {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text);
    background: var(--c-bg);
}
.pb-main { display: block; }

/* ---------- Sekcja ---------- */
.pb-section {
    position: relative;
    padding-top: var(--pb-pad, var(--sp-lg));
    padding-bottom: var(--pb-pad, var(--sp-lg));
    min-height: var(--pb-minh, auto);
    display: flex;
    flex-direction: column;
    justify-content: var(--pb-justify, flex-start);
    background-repeat: no-repeat;
    background-position: center;
}
.pb-section--sticky { position: sticky; top: 0; z-index: 50; }

.pb-section-inner { position: relative; z-index: 2; width: 100%; }
.pb-section--boxed > .pb-section-inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* tło: wideo + overlay (CSS background-image jest najniżej naturalnie) */
.pb-bg-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.pb-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ---------- Wiersz / kolumny (12-grid) ---------- */
.pb-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--pb-gap, var(--sp-md));
    align-items: var(--pb-items, start);
}
.pb-row + .pb-row { margin-top: var(--pb-gap, var(--sp-md)); }

.pb-col { grid-column: span 12; min-width: 0; position: relative; }
.pb-col-1  { grid-column: span 1; }
.pb-col-2  { grid-column: span 2; }
.pb-col-3  { grid-column: span 3; }
.pb-col-4  { grid-column: span 4; }
.pb-col-5  { grid-column: span 5; }
.pb-col-6  { grid-column: span 6; }
.pb-col-7  { grid-column: span 7; }
.pb-col-8  { grid-column: span 8; }
.pb-col-9  { grid-column: span 9; }
.pb-col-10 { grid-column: span 10; }
.pb-col-11 { grid-column: span 11; }
.pb-col-12 { grid-column: span 12; }
.pb-col-inner { position: relative; z-index: 2; }
/* Kolumna z poziomym menu musi przykrywać SĄSIEDNIE kolumny wiersza: dropdown (z-index 200/300)
   żyje wewnątrz kontekstu swojej kolumny (z-index 2), a kolumna PÓŹNIEJSZA w DOM przy tym samym
   z-index maluje się wyżej — np. przycisk w nagłówku zasłaniał rozwinięte menu (desktop i burger). */
.pb-col-inner:has(.pb-menu--horizontal) { z-index: 10; }
.pb-col--center { text-align: center; }
.pb-col--right  { text-align: right; }

/* ---------- Rytm pionowy elementów ---------- */
.pb-el + .pb-el { margin-top: var(--sp-md); }

/* ---------- Elementy: typografia ---------- */
.pb-heading { font-family: var(--font-head); line-height: 1.25; color: var(--c-text); }
h2.pb-heading { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); }
h3.pb-heading { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.6rem); }
h4.pb-heading { font-size: 1.15rem; }

.pb-text > * + * { margin-top: 0.75em; }
.pb-text h2, .pb-text h3 { line-height: 1.3; margin-top: 0.4em; }
.pb-text ul, .pb-text ol { padding-left: 1.4em; }
.pb-text a { text-decoration: underline; }

/* Floaty (oblewanie obrazka tekstem) zamknięte w obrębie bloku richtextu —
   nie wyciekają do kolejnych elementów sekcji. */
.pb-text::after, .pb-html-body::after, .pb-faq-a::after, .pb-cta-body::after {
    content: "";
    display: table;
    clear: both;
}

/* ---------- Obrazy w richtext: oblewanie tekstem (klasy z TinyMCE image_class_list) ---------- */
img.img-left, figure.image.img-left {
    float: left;
    margin: 0.3rem 1.25rem 0.75rem 0;
    max-width: 48%;
    border-radius: var(--radius);
}
img.img-right, figure.image.img-right {
    float: right;
    margin: 0.3rem 0 0.75rem 1.25rem;
    max-width: 48%;
    border-radius: var(--radius);
}
img.img-center, figure.image.img-center {
    display: block;
    float: none;
    margin: 1rem auto;
    border-radius: var(--radius);
}
img.img-full, figure.image.img-full {
    display: block;
    width: 100%;
    height: auto;
    margin: 1rem 0;
    border-radius: var(--radius);
}
figure.image { margin: 0; }
figure.image figcaption { font-size: 0.875rem; color: var(--c-muted); margin-top: 0.35rem; }
@media (max-width: 560px) {
    /* Na wąskich ekranach oblewanie przestaje mieć sens — obraz na pełną szerokość. */
    img.img-left, img.img-right, figure.image.img-left, figure.image.img-right {
        float: none;
        max-width: 100%;
        margin: 1rem 0;
    }
}

.pb-el-title { font-size: 1.1rem; margin-bottom: var(--sp-sm); color: var(--c-text); }

/* ---------- Obraz ---------- */
.pb-image img { border-radius: var(--radius); }
.pb-image-cap { font-size: 0.875rem; color: var(--c-muted); margin-top: var(--sp-sm); }

/* ---------- Cytat ---------- */
.pb-quote {
    border-left: 4px solid var(--c-primary);
    padding: var(--sp-sm) var(--sp-md);
    background: var(--c-surface);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.pb-quote blockquote { font-size: 1.15rem; font-style: italic; }
.pb-quote figcaption { margin-top: var(--sp-sm); color: var(--c-muted); font-size: 0.9rem; }

/* ---------- Linia / przerwa ---------- */
.pb-hr { border: 0; border-top: 1px solid var(--c-border); }
.pb-spacer--small  { height: var(--sp-md); }
.pb-spacer--medium { height: var(--sp-lg); }
.pb-spacer--large  { height: var(--sp-xl); }
.pb-spacer--xlarge { height: var(--sp-xxl); }

/* ---------- Przyciski ---------- */
.pb-button--center { text-align: center; }
.pb-button--right  { text-align: right; }
.pb-btn {
    display: inline-block;
    font: inherit; font-weight: 600; line-height: 1.2;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s;
}
.pb-btn:hover { text-decoration: none; }
.pb-btn--sm { padding: 0.4rem 0.85rem; font-size: 0.9rem; }
.pb-btn--md { padding: 0.65rem 1.4rem; }
.pb-btn--lg { padding: 0.9rem 2rem; font-size: 1.1rem; }
.pb-btn--primary   { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.pb-btn--primary:hover   { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: var(--c-white); }
.pb-btn--secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); }
.pb-btn--secondary:hover { background: var(--c-border); color: var(--c-text); }
.pb-btn--outline   { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.pb-btn--outline:hover   { background: var(--c-primary); color: var(--c-white); }
.pb-btn--link      { background: transparent; border-color: transparent; color: var(--c-primary); padding-inline: 0; }
.pb-btn--link:hover      { text-decoration: underline; }

/* ---------- CTA ---------- */
.pb-cta {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-lg);
    text-align: center;
}
.pb-cta-title { font-size: 1.4rem; margin-bottom: var(--sp-sm); }
.pb-cta-body { color: var(--c-muted); margin-bottom: var(--sp-md); }

/* ---------- Menu (widget): warianty ---------- */
.pb-menu ul { list-style: none; padding: 0; margin: 0; }

/* pionowa lista (sidebar/stopka) — zagnieżdżenie z wcięciem i linią prowadzącą */
.pb-menu--vertical li { margin: 0.15rem 0; }
.pb-menu--vertical ul ul {
    margin: 0.2rem 0 0.4rem 0.35rem;
    padding-left: 0.85rem;
    border-left: 2px solid var(--c-border);
}
.pb-menu--vertical ul ul a { font-size: 0.92em; }
.pb-dark .pb-menu--vertical ul ul { border-left-color: rgba(255, 255, 255, 0.25); }

/* poziome proste (stopka) */
.pb-menu--inline > ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; justify-content: inherit; }
.pb-menu--inline ul ul { display: none; }

/* POZIOMA NAWIGACJA (nagłówek) + dropdown + burger na mobile (czysty CSS) */
.pb-menu--horizontal { position: relative; }
.pb-menu--horizontal > ul { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.pb-menu--horizontal > ul > li { position: relative; }
.pb-menu--horizontal > ul > li > a {
    display: block;
    padding: 0.5rem 0.85rem;
    border-radius: calc(var(--radius) / 2);
    font-weight: 600;
    color: var(--c-text);
}
.pb-menu--horizontal > ul > li > a:hover { background: var(--c-surface); text-decoration: none; color: var(--c-primary); }
.pb-menu--horizontal li ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    padding: 0.35rem;
    display: none;
    z-index: 200;
}
.pb-menu--horizontal li:hover > ul, .pb-menu--horizontal li:focus-within > ul { display: block; }
/* wskaźnik podmenu (strzałka) — bez niej wielopoziomowość jest niewidoczna */
.pb-menu--horizontal > ul > li.has-sub > a::after { content: " ▾"; font-size: 0.75em; opacity: 0.7; }
.pb-menu--horizontal li ul li.has-sub > a::after { content: " ▸"; font-size: 0.75em; opacity: 0.7; }
.pb-menu--vertical li.has-sub > a { font-weight: 600; }
/* mostek nad szczeliną kursora między pozycją a dropdownem (hover nie gaśnie) */
.pb-menu--horizontal > ul > li.has-sub::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 10px;
}
.pb-menu--horizontal li ul a { display: block; padding: 0.45rem 0.7rem; border-radius: 6px; color: var(--c-text); }
.pb-menu--horizontal li ul a:hover { background: var(--c-surface); text-decoration: none; color: var(--c-primary); }
/* Poziom 3+ wewnątrz dropdownu: WYRAŹNE zagnieżdżenie — wcięcie + pionowa linia prowadząca
   + mniejszy, przygaszony tekst. Każdy kolejny poziom wcina się dalej (reguły się kumulują). */
.pb-menu--horizontal li ul ul {
    position: static;
    box-shadow: none;
    border: 0;
    display: block;
    margin: 0.15rem 0 0.35rem 0.9rem;
    padding: 0 0 0 0.65rem;
    border-left: 2px solid var(--c-border);
}
.pb-menu--horizontal li ul ul a { font-size: 0.92em; color: var(--c-muted); padding: 0.35rem 0.6rem; }
.pb-menu--horizontal li ul ul a:hover { color: var(--c-primary); }
.pb-menu-burger { display: none; cursor: pointer; }

@media (max-width: 768px) {
    .pb-menu--horizontal .pb-menu-burger {
        display: inline-flex;
        flex-direction: column;
        gap: 5px;
        padding: 0.55rem;
        border: 1px solid var(--c-border);
        border-radius: calc(var(--radius) / 2);
        background: var(--c-bg);
        margin-left: auto;
    }
    .pb-menu-burger span { width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; }
    .pb-menu--horizontal > ul {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: auto;
        min-width: 240px;
        flex-direction: column;
        align-items: stretch;
        background: var(--c-bg);
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
        padding: 0.4rem;
        z-index: 300;
    }
    .pb-menu-toggle:checked ~ ul { display: flex; }
    /* Mobile (burger): podmenu zawsze rozwinięte, zagnieżdżenie = wcięcie + linia prowadząca. */
    .pb-menu--horizontal li ul {
        position: static;
        display: block;
        box-shadow: none;
        border: 0;
        margin: 0.15rem 0 0.4rem 0.6rem;
        padding-left: 0.7rem;
        border-left: 2px solid var(--c-border);
    }
    .pb-menu--horizontal li ul a { font-size: 0.95em; }
}

/* ---------- TON SEKCJI: ciemne tło = jasny tekst (klasa pb-dark na sekcji/kolumnie) ---------- */
.pb-dark { color: #e2e8f0; }
.pb-dark .pb-heading, .pb-dark .pb-el-title, .pb-dark .pb-cta-title,
.pb-dark .pb-logo, .pb-dark .pb-logo-text { color: #fff; }
.pb-dark .pb-cta-body, .pb-dark .pb-text { color: #e2e8f0; }
.pb-dark a { color: var(--c-accent); }
.pb-dark .pb-menu--horizontal > ul > li > a { color: #e2e8f0; }
.pb-dark .pb-menu--horizontal > ul > li > a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.pb-dark .pb-quote { background: rgba(255, 255, 255, 0.06); }
.pb-dark .pb-hr { border-top-color: rgba(255, 255, 255, 0.2); }

/* ---------- Ostatnie treści (widget) ---------- */
.pb-recent-list { list-style: none; padding: 0; }
.pb-recent-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--c-border); }
.pb-empty { color: var(--c-muted); }

/* ---------- FAQ ---------- */
.pb-faq-item { border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: var(--sp-sm); overflow: hidden; }
.pb-faq-item summary { cursor: pointer; padding: var(--sp-md); font-weight: 600; list-style: none; }
.pb-faq-item summary::-webkit-details-marker { display: none; }
.pb-faq-item summary::after { content: "+"; float: right; color: var(--c-muted); }
.pb-faq-item[open] summary::after { content: "−"; }
.pb-faq-a { padding: 0 var(--sp-md) var(--sp-md); color: var(--c-text); }

/* ---------- Galeria + lightbox (czysto CSS :target) ---------- */
.pb-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-sm); }
.pb-gallery-item { margin: 0; }
.pb-gallery-thumb img { border-radius: var(--radius); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.pb-gallery figcaption { font-size: 0.8rem; color: var(--c-muted); margin-top: 0.25rem; }

.pb-lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.92); padding: 4vmin;
}
.pb-lightbox:target { display: flex; }
/* Otwarte powiększenie musi przykryć CAŁĄ stronę: lightbox żyje w kontekście
   warstwowania swojej kolumny (.pb-col-inner z-index:2), więc menu (z-index:10)
   i późniejsze kolumny malowały się NAD nim (incydent: menu+panel logowania
   widoczne na warstwie zdjęcia, 2026-08-31). Przy :target podnosimy cały
   łańcuch przodków ponad wszystko. */
.pb-section-inner:has(.pb-lightbox:target),
.pb-col-inner:has(.pb-lightbox:target) { z-index: 1001; }
.pb-lightbox-content { margin: 0; max-width: 92vw; max-height: 92vh; }
.pb-lightbox-content img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 6px; }
.pb-lightbox-content figcaption { color: #e2e8f0; text-align: center; margin-top: 0.5rem; font-size: 0.9rem; }
.pb-lightbox-close { position: absolute; inset: 0; cursor: default; }
.pb-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: #fff; font-size: 3rem; line-height: 1; text-decoration: none;
    padding: 0 1.5rem; user-select: none;
}
.pb-lightbox-nav:hover { text-decoration: none; color: var(--c-accent); }
.pb-lightbox-prev { left: 1vmin; }
.pb-lightbox-next { right: 1vmin; }
.pb-lightbox-x {
    position: absolute; top: 2vmin; right: 2vmin;
    color: #fff; font-size: 2rem; line-height: 1; text-decoration: none;
}

/* ---------- Formularz kontaktowy (core) ---------- */
.pb-form-fields { display: flex; flex-direction: column; gap: 0.8rem; max-width: 640px; }
.pb-form-f { display: flex; flex-direction: column; gap: 0.25rem; }
.pb-form-f span { font-weight: 600; font-size: 0.9rem; }
.pb-form-f input, .pb-form-f textarea, .pb-form-f select {
    font: inherit;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius) / 2);
    background: var(--c-bg);
    color: var(--c-text);
}
.pb-form-f input:focus, .pb-form-f textarea:focus, .pb-form-f select:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.pb-form-consent { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; color: var(--c-muted); }
.pb-form-consent input { margin-top: 0.2rem; }
.pb-form button[type=submit] { align-self: flex-start; border: 2px solid transparent; }
.pb-form-ok {
    padding: 0.9rem 1.1rem;
    border: 1px solid #86efac;
    background: #f0fdf4;
    color: #166534;
    border-radius: var(--radius);
    font-weight: 600;
}
.pb-form-err {
    padding: 0.7rem 1rem;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    border-radius: var(--radius);
}
/* Honeypot — poza ekranem (NIE display:none, bo sprytniejsze boty to wykrywają). */
.pb-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* ---------- Strefa klienta (/konto — moduł members) ----------
   Ekrany systemowe renderowane w szablonie strony (BuilderRenderer::renderSystem).
   Wszystko na tokenach theme (:root) — panel „Wygląd" i theme'y nadpisują paletę. */
.pb-account-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 0.75rem 1.5rem; margin-bottom: var(--sp-lg);
    padding-bottom: var(--sp-md); border-bottom: 1px solid var(--c-border);
}
.pb-account-head h1 { margin: 0; }
.pb-account-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; color: var(--c-muted); font-size: 0.95rem; }
.pb-account-meta strong { color: var(--c-text); font-weight: 600; }
.pb-logout-form { display: inline; margin: 0; }
.pb-btn--ghost { background: transparent; border: 1px solid var(--c-border); color: var(--c-text); }
.pb-btn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pb-account-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sp-md); align-items: start;
}
.pb-account-card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: var(--sp-lg);
}
.pb-account-card > h2 { font-size: 1.1rem; margin: 0 0 var(--sp-md); }
.pb-account-card .pb-form-fields { max-width: none; }
.pb-account-hint { color: var(--c-muted); font-size: 0.875rem; margin: 0 0 var(--sp-md); }
.pb-account-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: var(--sp-md); }
/* Zakładki strefy (Profil / Adresy / przyszłe: Zamówienia — dokłada moduł sklepu). */
.pb-account-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: var(--sp-lg); }
.pb-account-nav a { padding: 0.45rem 1rem; border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-text); font-size: 0.95rem; }
.pb-account-nav a:hover { text-decoration: none; border-color: var(--c-primary); color: var(--c-primary); }
.pb-account-nav a.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
/* Książka adresowa. */
.pb-address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-md); }
.pb-address-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-md); font-size: 0.95rem; }
.pb-address-card address { font-style: normal; line-height: 1.55; }
.pb-address-badge { display: inline-block; font-size: 0.75rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--c-primary); color: var(--c-white); margin-bottom: 0.5rem; }
.pb-address-label { font-weight: 600; margin-bottom: 0.35rem; }
.pb-address-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }
.pb-address-actions form { margin: 0; display: inline; }
.pb-link-btn { background: none; border: 0; padding: 0; color: var(--c-primary); cursor: pointer; font: inherit; }
.pb-link-btn:hover { text-decoration: underline; }
.pb-link-btn--danger { color: #b91c1c; }
/* Karta „strefy ryzyka" (usunięcie konta). */
.pb-account-card--danger { border-color: #fecaca; }
.pb-account-card--danger > h2 { color: #991b1b; }
/* Ekrany logowania/rejestracji/resetu — wąska karta wyśrodkowana. */
.pb-auth-card {
    max-width: 460px; margin: 0 auto;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: var(--sp-lg);
}
.pb-auth-card > h1 { font-size: 1.5rem; margin: 0 0 var(--sp-md); }
.pb-auth-card .pb-account-links { justify-content: space-between; }

/* ---------- Logo (element layoutu) ---------- */
.pb-logo { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--c-text); }
.pb-logo:hover { text-decoration: none; }
.pb-logo img { max-height: 48px; width: auto; display: block; }
.pb-logo-text { color: var(--c-text); }

/* ---------- Slider (czysty CSS scroll-snap) ---------- */
.pb-slider { position: relative; }
.pb-slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 0;
    border-radius: var(--radius);
    -webkit-overflow-scrolling: touch;
}
.pb-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; position: relative; }
.pb-slide img { width: 100%; height: var(--pb-slider-h, 420px); object-fit: cover; display: block; }
.pb-slider--sm .pb-slide img { height: 280px; }
.pb-slider--md .pb-slide img { height: 420px; }
.pb-slider--lg .pb-slide img { height: 560px; }
.pb-slide figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.9rem 1.2rem;
    background: linear-gradient(transparent, rgba(15, 23, 42, 0.75));
    color: #fff;
    font-weight: 600;
}
.pb-slider-dots { display: flex; gap: 0.45rem; justify-content: center; margin-top: 0.6rem; }
.pb-slider-dots a {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--c-border);
    transition: background 0.15s;
}
.pb-slider-dots a:hover { background: var(--c-primary); }

/* ---------- Newsletter ---------- */
.pb-newsletter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; }
.pb-newsletter-row input[type=email] {
    flex: 1 1 240px;
    font: inherit;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius) / 2);
}
.pb-newsletter-text { color: var(--c-muted); }

/* ---------- Lista wpisów (archiwum) ---------- */
.pb-listing-list { list-style: none; padding: 0; }
.pb-listing-list li { padding: 1rem 0; border-bottom: 1px solid var(--c-border); }
.pb-listing-title { font-weight: 700; font-size: 1.15rem; }
.pb-listing-date { margin-left: 0.6rem; font-size: 0.82rem; color: var(--c-muted); }
.pb-listing-lead { margin-top: 0.3rem; color: var(--c-muted); }
/* Miniatura + metadane + „Czytaj więcej" jak lista wpisów WP (2026-08-31). */
.pb-listing-item.has-thumb { display: flex; gap: 1rem; align-items: flex-start; }
.pb-listing-thumb { flex-shrink: 0; }
.pb-listing-thumb img { width: 110px; height: 110px; object-fit: cover; border-radius: calc(var(--radius) / 2); display: block; }
.pb-listing-body { min-width: 0; }
.pb-listing-meta { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--c-muted); }
.pb-listing-more { display: inline-block; margin-top: 0.35rem; font-size: 0.85rem; font-weight: 600; }
@media (max-width: 520px) { .pb-listing-thumb img { width: 76px; height: 76px; } }
/* Nagłówek wpisu: MINIATURA obrazka głównego PO LEWEJ od tytułu i metadanych;
   klik otwiera powiększenie w lightboxie (:target, mechanizm galerii core).
   Kłódeczka .pb-lock = treść chroniona (visibility != public). */
.pb-article-head--img { display: flex; gap: 1rem; align-items: flex-start; }
.pb-article-head-body { min-width: 0; }
.pb-article-thumb { display: block; flex-shrink: 0; cursor: zoom-in; }
.pb-article-thumb:hover .pb-article-img { opacity: 0.88; }
.pb-article-img { display: block; width: 150px; height: auto; border-radius: calc(var(--radius) / 2); transition: opacity 0.15s ease; }
@media (max-width: 520px) { .pb-article-img { width: 96px; } }
.pb-lock { display: inline-flex; align-items: center; margin-right: 0.35rem; color: var(--c-muted); vertical-align: -2px; }
.pb-lock svg { display: block; }
.pb-listing-meta a, .pb-article-date a { color: inherit; text-decoration: underline; }
.pb-listing-pages { display: flex; gap: 0.4rem; align-items: center; justify-content: center; margin-top: var(--sp-md); flex-wrap: wrap; }
.pb-page-num, .pb-page-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; height: 2.2em; padding: 0 0.4em; border: 1px solid var(--c-border); text-decoration: none; }
.pb-page-num:hover, .pb-page-arrow:hover { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.pb-page-current { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.pb-page-dots { padding: 0 0.3em; }

/* ---------- Wyszukiwarka (core) ---------- */
.pb-search-form { display: flex; gap: 0.5rem; max-width: 560px; margin: var(--sp-md) 0 var(--sp-lg); }
.pb-search-form input[type=search] {
    flex: 1;
    font: inherit;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius) / 2);
}
.pb-search-results { list-style: none; padding: 0; }
.pb-search-results li { padding: 0.6rem 0; border-bottom: 1px solid var(--c-border); }
.pb-search-results a { font-weight: 600; }
/* Grupy wyników z modułów (Forum itd.) + urywek trafionej wypowiedzi (2026-08-31). */
.pb-search-group { margin-top: var(--sp-lg); font-size: 1.1rem; }
.pb-search-snippet { display: block; margin-top: 0.2rem; font-size: 0.88rem; color: var(--c-muted); }
.pb-search-path { display: block; font-size: 0.8rem; color: var(--c-muted); }

/* ---------- Mapa strony HTML (/mapa-strony, core) ---------- */
.pb-sitemap { list-style: none; padding: 0; margin: var(--sp-md) 0; }
.pb-sitemap li { padding: 0.35rem 0; }
.pb-sitemap a { font-weight: 600; }
.pb-sitemap .pb-sitemap { /* zagnieżdżone poziomy — wcięcie + linia prowadząca */
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--c-border);
}
.pb-sitemap .pb-sitemap a { font-weight: 400; }

/* ---------- Baner zgody cookies (core) ---------- */
.cms-consent {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    max-width: min(680px, calc(100vw - 2rem));
    background: var(--c-dark);
    color: #e2e8f0;
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius);
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.35);
    font-size: 0.9rem;
}
.cms-consent[hidden] { display: none; }
.cms-consent-text { margin: 0; flex: 1 1 260px; }
.cms-consent-text a { color: #fbbf24; }
.cms-consent-actions { display: flex; gap: 0.5rem; }
.cms-consent-btn {
    font: inherit;
    font-weight: 600;
    padding: 0.45rem 1rem;
    border-radius: calc(var(--radius) / 2);
    border: 1px solid #475569;
    background: transparent;
    color: #e2e8f0;
    cursor: pointer;
}
.cms-consent-accept { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.cms-consent-btn:hover { filter: brightness(1.1); }

/* ---------- Fasada zgody dla osadzeń (YouTube/Vimeo/Facebook/mapy) ---------- */
.pb-embed {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 160px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    text-align: center;
}
.pb-embed--video { aspect-ratio: 16 / 9; }
.pb-embed-thumb {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; display: block;
}
.pb-embed-btn {
    position: relative; z-index: 1;
    font: inherit; font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: calc(var(--radius) / 2);
    border: 0;
    background: var(--c-primary);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
}
.pb-embed-btn:hover { filter: brightness(1.1); }
.pb-embed-note {
    position: relative; z-index: 1;
    margin: 0; padding: 0 1rem;
    font-size: 0.8rem; color: var(--c-muted);
}
.pb-embed-thumb ~ .pb-embed-note { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.pb-embed-thumb ~ .pb-embed-note a { color: #fff; }
.pb-embed--loaded { cursor: default; display: block; border: 0; background: transparent; }
.pb-embed-frame { display: block; width: 100%; height: 100%; border: 0; }
.pb-embed--video .pb-embed-frame { position: absolute; inset: 0; }
.pb-embed--loaded:not(.pb-embed--video) .pb-embed-frame { min-height: 160px; }

/* ---------- Mapa (obraz statyczny z naszej domeny; interaktywna po kliknięciu) ---------- */
.pb-map { position: relative; }
.pb-map-frame { width: 100%; border: 1px solid var(--c-border); border-radius: var(--radius); display: block; }
.pb-map .pb-embed--map { min-height: 0; }
.pb-map-static { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.pb-map-attrib { margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--c-muted); }
.pb-map-attrib a { color: inherit; }
.pb-map-fallback { font-size: 0.9rem; color: var(--c-muted); white-space: pre-line; margin: 0; }
/* Marker (pin) nad środkiem osadzenia + opis pokazywany na hover/focus. */
.pb-map-marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); z-index: 2; cursor: pointer; }
.pb-map-pin { font-size: 2rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.pb-map-tip {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px;
    min-width: 180px; max-width: 260px; text-align: left;
    background: var(--c-surface, #fff); color: var(--c-text, #1e293b);
    padding: 0.55rem 0.75rem; border-radius: var(--radius); box-shadow: 0 2px 12px rgba(0,0,0,.22);
    font-size: 0.85rem; line-height: 1.4;
    opacity: 0; visibility: hidden; transition: opacity .15s ease; pointer-events: none;
}
.pb-map-marker:hover .pb-map-tip, .pb-map-marker:focus .pb-map-tip { opacity: 1; visibility: visible; }
.pb-map-cap { margin: 0.5rem 0 0; font-weight: 600; }
.pb-map-link { display: inline-block; margin-top: 0.35rem; font-size: 0.85rem; }

/* ---------- Opinie / testimonials ---------- */
.pb-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-md); }
.pb-testimonial {
    margin: 0;
    padding: var(--sp-md);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pb-testimonial-q { margin: 0; font-style: italic; color: var(--c-text); }
.pb-testimonial-q::before { content: "\201E"; color: var(--c-accent); font-size: 1.6rem; line-height: 0; margin-right: 0.15rem; }
.pb-testimonial-cap { display: flex; align-items: center; gap: 0.6rem; }
.pb-testimonial-av { border-radius: 50%; object-fit: cover; width: 48px; height: 48px; }
.pb-testimonial-who { display: flex; flex-direction: column; line-height: 1.3; }
.pb-testimonial-role { font-size: 0.82rem; color: var(--c-muted); }

/* ---------- Pasek logo / partnerzy ---------- */
.pb-logobar-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-lg); }
.pb-logobar-item { display: inline-flex; align-items: center; }
.pb-logobar-item img {
    max-height: 56px; width: auto; display: block;
    filter: grayscale(1); opacity: 0.7;
    transition: filter 0.2s, opacity 0.2s;
}
.pb-logobar-item:hover img { filter: grayscale(0); opacity: 1; }

/* ---------- Social media ---------- */
.pb-social-fb { width: 100%; max-width: 500px; border: none; display: block; }
.pb-social-ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.8rem; }
.pb-social-ig-item { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; }
.pb-social-ig-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.pb-social-ig-item:hover img { transform: scale(1.05); }
@media (max-width: 640px) { .pb-social-ig-grid { grid-template-columns: repeat(2, 1fr); } }
.pb-social-links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.pb-social-btn {
    display: inline-flex; align-items: center;
    padding: 0.5rem 1rem;
    border-radius: calc(var(--radius) / 2);
    font-weight: 600; color: #fff;
}
.pb-social-btn:hover { filter: brightness(1.08); text-decoration: none; }
.pb-social-ig { background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888); }
.pb-social-li { background: #0a66c2; }

/* ---------- Responsywność (auto) ---------- */
@media (max-width: 768px) {
    /* domyślnie kolumny na pełną szerokość; jawny pb-col-m-N nadpisuje */
    .pb-col { grid-column: span 12; }
    .pb-col-m-1  { grid-column: span 1; }
    .pb-col-m-2  { grid-column: span 2; }
    .pb-col-m-3  { grid-column: span 3; }
    .pb-col-m-4  { grid-column: span 4; }
    .pb-col-m-5  { grid-column: span 5; }
    .pb-col-m-6  { grid-column: span 6; }
    .pb-col-m-7  { grid-column: span 7; }
    .pb-col-m-8  { grid-column: span 8; }
    .pb-col-m-9  { grid-column: span 9; }
    .pb-col-m-10 { grid-column: span 10; }
    .pb-col-m-11 { grid-column: span 11; }
    .pb-col-m-12 { grid-column: span 12; }
    .pb-hide-mobile { display: none !important; }
    .pb-section { padding-top: calc(var(--pb-pad, var(--sp-lg)) * 0.6); padding-bottom: calc(var(--pb-pad, var(--sp-lg)) * 0.6); }
}
@media (min-width: 769px) {
    .pb-hide-desktop { display: none !important; }
}

/* ============================================================================
   TYPOGRAFIA SEKCJI (panel: kolor / rozmiar / krój — 2026-07-30)
   Klasy i zmienne emituje StyleBuilder::section() z pól typography sekcji.
   !important świadomie: jawny wybór użytkownika w edytorze MUSI wygrać
   z regułami theme/site_css (inaczej opcja działałaby losowo per theme).
   ============================================================================ */
.pb-has-text-color,
.pb-has-text-color .pb-text p,
.pb-has-text-color .pb-text li,
.pb-has-text-color .pb-text small,
.pb-has-text-color .pb-el p { color: var(--pb-text) !important; }
.pb-has-head-color .pb-heading,
.pb-has-head-color .pb-heading a { color: var(--pb-head) !important; }

.pb-ts-s .pb-text p,  .pb-ts-s .pb-text li  { font-size: 0.875rem !important; }
.pb-ts-l .pb-text p,  .pb-ts-l .pb-text li  { font-size: 1.15rem !important; }
.pb-ts-xl .pb-text p, .pb-ts-xl .pb-text li { font-size: 1.3rem !important; }

.pb-ff-serif, .pb-ff-serif .pb-text p, .pb-ff-serif .pb-heading {
    font-family: Charter, "Bitstream Charter", Cambria, Georgia, "Times New Roman", serif !important;
}
.pb-ff-sans, .pb-ff-sans .pb-text p, .pb-ff-sans .pb-heading {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.pb-ff-mono, .pb-ff-mono .pb-text p, .pb-ff-mono .pb-heading {
    font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace !important;
}

/* ============================================================================
   DOKUMENTY PDF W TREŚCI (figure.wp-pdf — przycisk „PDF" edytora / import WP).
   Kilka podglądów pod rząd (multiwstawianie 2026-09-17) ma być czytelnie
   rozdzielonych: podpis nad ramką, odstęp i linia między kolejnymi dokumentami.
   Theme/site_css może nadpisać wysokość ramki; separacja zostaje.
   ============================================================================ */
.wp-pdf { margin: 1.5rem 0; }
.wp-pdf + .wp-pdf { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--c-border); }
.wp-pdf .wp-pdf-title { font-weight: 600; margin: 0 0 0.5rem; color: var(--c-text); }
.wp-pdf iframe { display: block; width: 100%; min-height: 480px; border: 1px solid var(--c-border); background: var(--c-surface); }
.wp-pdf .wp-file { margin: 0.4rem 0 0; }
.wp-file + .wp-file { margin-top: 0.35rem; }