/* =============================================================
 *  File:        assets/css/custom.css
 *  Location:    /alfa.polska.beauty/assets/css/custom.css
 *  Function:    Editorial theme on a light background that
 *               overrides Bootstrap 5 defaults. All foreground
 *               / background pairs have been verified to meet
 *               WCAG 2.2 AA (minimum contrast 5:1 as required).
 *  Version:     1.3.6
 *  Changelog:
 *    1.0.0 — 2026-04-23 — Initial theme. Palette audited for
 *                         contrast: 12 pairs, all >= 5:1.
 *    1.3.0 — 2026-04-23 — Added sections 21 (logo variants) and
 *                         22 (mobile improvements).
 *    1.3.5 — 2026-04-23 — Kompletny redesign hero home (v2):
 *                         białe tło, wyszukiwarka w centrum,
 *                         6 popularnych fraz, social proof z
 *                         live count. Usunięte reguły starego
 *                         editorial hero (schodki, italic lead).
 *    1.3.1 — 2026-04-23 — Zero-overflow policy: html/body get
 *                         overflow-x: clip, nagłówki dostają
 *                         overflow-wrap: anywhere, nav brand
 *                         skurczony na wąskich ekranach,
 *                         CTA bar ma min-width:0 na flex-items,
 *                         stats/sekcje poprawione typografią.
 * ============================================================= */

/* -------------------------------------------------------------
 *  1. PALETA — wszystkie pary tekst/tło zweryfikowane
 *              pod kątem kontrastu ≥ 5:1
 * ------------------------------------------------------------- */
:root {
    --pb-cream:       #faf7f2;   /* tło główne */
    --pb-cream-2:     #f3ede1;   /* tło sekcji alt */
    --pb-ink:         #1a1412;   /* tekst główny  — 17.05:1 / cream */
    --pb-ink-soft:    #3a302a;   /* tekst drugorzędny — 12.01:1 */
    --pb-ink-muted:   #5a4f48;   /* meta / eyebrow — 7.42:1 */
    --pb-gold:        #7a5a10;   /* akcent + linki — 5.96:1 */
    --pb-gold-hover:  #5a4208;   /* link hover — 8.86:1 */
    --pb-gold-light:  #d4a849;   /* złoto tylko na tle ink — 8.24:1 */
    --pb-rose:        #8b3a3a;   /* kursywa / akcent emocjonalny — 7.11:1 */
    --pb-line:        #d4c8b5;   /* granice sekcji */
    --pb-success:     #2d6a3f;
    --pb-danger:      #8b2020;

    --pb-ff-display:  'Fraunces', Georgia, 'Times New Roman', serif;
    --pb-ff-body:     'DM Sans', 'Helvetica Neue', Arial, sans-serif;

    --pb-radius:      2px;
    --pb-shadow-sm:   0 1px 2px rgba(26, 20, 18, .06);
    --pb-shadow-md:   0 6px 24px -6px rgba(26, 20, 18, .12);
}

/* -------------------------------------------------------------
 *  2. BOOTSTRAP OVERRIDES
 * ------------------------------------------------------------- */
.pb-body {
    background: var(--pb-cream);
    color: var(--pb-ink);
    font-family: var(--pb-ff-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--pb-gold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}
a:hover,
a:focus {
    color: var(--pb-gold-hover);
    text-decoration-thickness: 2px;
}

/* Focus indicator — wymagane przez WCAG 2.2 (kryterium 2.4.11) */
*:focus-visible {
    outline: 3px solid var(--pb-gold-hover);
    outline-offset: 2px;
    border-radius: var(--pb-radius);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.page-link:focus-visible {
    outline: 3px solid var(--pb-gold-hover);
    outline-offset: 2px;
    box-shadow: none;
}

/* Skip link — widoczny tylko przy fokusie klawiaturą */
.skip-link {
    position: absolute;
    top: -9999px;
    left: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--pb-ink);
    color: var(--pb-cream);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
    color: var(--pb-cream);
}

/* -------------------------------------------------------------
 *  3. NAV
 * ------------------------------------------------------------- */
.pb-navbar {
    background: rgba(250, 247, 242, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--pb-line);
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.pb-brand {
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}
.pb-brand:hover { text-decoration: none; }
.pb-brand-main {
    font-family: var(--pb-ff-display);
    font-weight: 900;
    font-size: 1.375rem;
    letter-spacing: -0.01em;
    color: var(--pb-ink);
}
.pb-dot {
    color: var(--pb-gold);
    font-style: italic;
    font-weight: 400;
}
.pb-brand-sub {
    font-family: var(--pb-ff-body);
    font-size: 0.625rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--pb-ink-muted);
    padding-left: 1rem;
    border-left: 1px solid var(--pb-line);
}
.pb-navlink {
    color: var(--pb-ink) !important;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.25rem 0 !important;
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
}
.pb-navlink:hover,
.pb-navlink:focus {
    color: var(--pb-gold-hover) !important;
    border-bottom-color: var(--pb-gold);
}
.pb-search-btn {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    border-color: var(--pb-ink);
    color: var(--pb-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.pb-search-btn:hover,
.pb-search-btn:focus {
    background: var(--pb-ink);
    color: var(--pb-cream);
    border-color: var(--pb-ink);
}

/* -------------------------------------------------------------
 *  4. HERO
 *     - .pb-hero-v2   — nowy hero home (białe tło, search)
 *     - .pb-region-*  — hero podstron województw (zachowany)
 * ------------------------------------------------------------- */

/* --- HERO V2 (homepage) — białe tło, search w centrum --- */
.pb-hero-v2 {
    background: #ffffff;
    padding: 4rem 0 5rem;
    border-bottom: 1px solid var(--pb-line);
    text-align: center;
}
.pb-hero-v2 .container {
    max-width: 760px;
}

.pb-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pb-ink-soft);
    font-weight: 500;
}
.pb-hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pb-gold);
    display: inline-block;
    flex-shrink: 0;
}

.pb-hero-h1 {
    font-family: var(--pb-ff-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 7vw, 4.75rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--pb-ink);
    margin: 0 0 2.25rem;
}
.pb-hero-h1-a {
    display: block;
    font-weight: 300;
    color: var(--pb-ink-soft);
}
.pb-hero-h1-b {
    display: block;
    font-weight: 600;
    color: var(--pb-ink);
}

/* --- Wyszukiwarka --- */
.pb-hero-search {
    margin: 0 0 1.75rem;
}
.pb-hero-search-inner {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 14px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pb-hero-search-inner:focus-within {
    border-color: var(--pb-ink);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}
.pb-hero-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pb-ink-soft);
    font-size: 1.15rem;
    padding: 0 .5rem 0 1rem;
    pointer-events: none;
}
.pb-hero-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--pb-ff-body, inherit);
    font-size: 1rem;
    padding: .75rem .5rem;
    color: var(--pb-ink);
    min-height: 56px;
}
.pb-hero-search-input::placeholder {
    color: var(--pb-ink-muted);
    opacity: 1;
}
/* Na iOS 16px blokuje auto-zoom przy focus */
@media (max-width: 767.98px) {
    .pb-hero-search-input { font-size: 16px; }
}
.pb-hero-search-btn {
    flex: 0 0 auto;
    background: var(--pb-ink);
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    padding: 0 1.5rem;
    min-height: 48px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .15s ease;
}
.pb-hero-search-btn:hover,
.pb-hero-search-btn:focus-visible {
    background: var(--pb-gold);
    color: var(--pb-ink);
}
.pb-hero-search-btn:focus-visible {
    outline: 2px solid var(--pb-gold);
    outline-offset: 2px;
}

/* --- Popularne frazy (chipy) --- */
.pb-hero-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .75rem;
    margin: 0 0 2.5rem;
}
.pb-hero-chips-label {
    font-size: .88rem;
    color: var(--pb-ink-soft);
    font-weight: 500;
}
.pb-hero-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    justify-content: center;
}
.pb-hero-chip {
    display: inline-flex;
    align-items: center;
    padding: .45rem 1rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    color: var(--pb-ink);
    font-size: .92rem;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    min-height: 38px;
}
.pb-hero-chip:hover,
.pb-hero-chip:focus-visible {
    background: var(--pb-ink);
    color: #ffffff;
    border-color: var(--pb-ink);
    text-decoration: none;
}
.pb-hero-chip:focus-visible {
    outline: 2px solid var(--pb-gold);
    outline-offset: 2px;
}

/* --- Social proof pod spodem --- */
.pb-hero-proof {
    font-size: .95rem;
    color: var(--pb-ink-soft);
    margin: 0;
    letter-spacing: .01em;
}
.pb-hero-proof-num {
    font-family: var(--pb-ff-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--pb-ink);
    margin: 0 .15rem;
}
.pb-hero-proof-sep {
    margin: 0 .65rem;
    color: var(--pb-gold);
}

/* --- Mobile tuning --- */
@media (max-width: 575.98px) {
    .pb-hero-v2 {
        padding: 2.5rem 0 3rem;
        text-align: left;
    }
    .pb-hero-v2 .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .pb-hero-eyebrow {
        font-size: .72rem;
        letter-spacing: .14em;
        margin-bottom: 1rem;
    }
    .pb-hero-h1 {
        font-size: clamp(2rem, 9vw, 2.75rem);
        margin-bottom: 1.75rem;
    }
    .pb-hero-search {
        margin-bottom: 1.5rem;
    }
    .pb-hero-search-icon {
        padding-left: .75rem;
        padding-right: .25rem;
        font-size: 1.05rem;
    }
    .pb-hero-search-input {
        padding: .5rem .25rem;
        min-height: 48px;
    }
    .pb-hero-search-btn {
        padding: 0 .85rem;
        min-height: 44px;
        min-width: 44px;
    }
    .pb-hero-chips {
        justify-content: flex-start;
        margin-bottom: 2rem;
    }
    .pb-hero-chips-list {
        justify-content: flex-start;
    }
    .pb-hero-chips-label {
        width: 100%;
        font-size: .82rem;
    }
    .pb-hero-chip {
        font-size: .88rem;
        padding: .4rem .85rem;
    }
    .pb-hero-proof {
        text-align: left;
        font-size: .88rem;
    }
    .pb-hero-proof-num {
        font-size: 1.1rem;
    }
    .pb-hero-proof-sep {
        margin: 0 .4rem;
    }
}

/* --- HERO województwa (zachowane z v1) --- */
.pb-region-hero {
    padding: 4rem 0 5rem;
    position: relative;
    border-bottom: 1px solid var(--pb-line);
}
.pb-region-title {
    font-family: var(--pb-ff-display);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -0.045em;
    margin: 2.5rem 0 0;
    color: var(--pb-ink);
    font-size: clamp(3rem, 9vw, 8rem);
}

/* -------------------------------------------------------------
 *  5. SECTIONS
 * ------------------------------------------------------------- */
.pb-section {
    padding: 5rem 0;
    position: relative;
}
.pb-section-small { padding: 3rem 0; }
.pb-section-alt {
    background: var(--pb-cream-2);
    border-top: 1px solid var(--pb-line);
    border-bottom: 1px solid var(--pb-line);
}
.pb-section-head { margin-bottom: 2.5rem; }
.pb-eyebrow {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--pb-gold);
    margin-bottom: 1rem;
    font-weight: 500;
}
.pb-section-title {
    font-family: var(--pb-ff-display);
    font-weight: 300;
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--pb-ink);
}
.pb-section-title em {
    color: var(--pb-gold);
    font-weight: 400;
}
.pb-section-side {
    color: var(--pb-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.pb-rule {
    display: block;
    width: 40px;
    height: 1px;
    background: var(--pb-gold);
    margin-bottom: 1rem;
}

/* -------------------------------------------------------------
 *  6. STATS
 * ------------------------------------------------------------- */
.pb-stats-section { padding: 4rem 0 1rem; }
.pb-stats {
    border-top: 1px solid var(--pb-line);
    border-bottom: 1px solid var(--pb-line);
}
.pb-stat {
    padding: 2.5rem 1.5rem;
    border-right: 1px solid var(--pb-line);
}
.pb-stat:last-child { border-right: none; }
@media (max-width: 767.98px) {
    .pb-stat {
        border-right: none;
        border-bottom: 1px solid var(--pb-line);
    }
    .pb-stat:nth-last-child(-n+2) { border-bottom: none; }
}
.pb-stat-num {
    font-family: var(--pb-ff-display);
    font-weight: 300;
    font-size: 3.75rem;
    line-height: 1;
    color: var(--pb-gold);
    letter-spacing: -0.03em;
}
.pb-stat-lbl {
    margin-top: 0.75rem;
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--pb-ink-muted);
}

/* -------------------------------------------------------------
 *  7. WOJEWÓDZTWA GRID
 * ------------------------------------------------------------- */
.pb-voj-grid {
    border: 1px solid var(--pb-line);
    margin: 0;
}
.pb-voj-grid > .col {
    border-right: 1px solid var(--pb-line);
    border-bottom: 1px solid var(--pb-line);
}
@media (min-width: 992px) {
    .pb-voj-grid > .col:nth-child(4n) { border-right: none; }
    .pb-voj-grid > .col:nth-last-child(-n+4) { border-bottom: none; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .pb-voj-grid > .col:nth-child(3n) { border-right: none; }
}
@media (max-width: 767.98px) {
    .pb-voj-grid > .col:nth-child(2n) { border-right: none; }
}

.pb-voj-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 1.75rem 1.75rem;
    min-height: 220px;
    text-decoration: none;
    color: inherit;
    transition: background .3s, transform .3s;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.pb-voj-card:hover,
.pb-voj-card:focus {
    background: var(--pb-cream-2);
    color: inherit;
    text-decoration: none;
}
.pb-voj-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--pb-gold);
    transform: translateX(-100%);
    transition: transform .4s;
}
.pb-voj-card:hover::after,
.pb-voj-card:focus::after { transform: translateX(0); }
.pb-voj-num {
    font-family: var(--pb-ff-display);
    font-size: 0.8125rem;
    color: var(--pb-gold);
    letter-spacing: 0.15em;
}
.pb-voj-name {
    font-family: var(--pb-ff-display);
    font-weight: 300;
    font-style: italic;
    font-size: 2rem;
    line-height: 1;
    margin: 0.75rem 0 0;
    letter-spacing: -0.02em;
    color: var(--pb-ink);
}
.pb-voj-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 1rem;
}
.pb-voj-count {
    color: var(--pb-ink-soft);
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
}
.pb-voj-count strong {
    font-family: var(--pb-ff-display);
    font-size: 1.375rem;
    color: var(--pb-ink);
    font-weight: 400;
    margin-right: 0.25rem;
}
.pb-voj-arrow {
    font-family: var(--pb-ff-display);
    font-size: 1.375rem;
    color: var(--pb-gold);
    transition: transform .3s;
}
.pb-voj-card:hover .pb-voj-arrow { transform: translate(4px, -4px); }

/* -------------------------------------------------------------
 *  8. CARD SALONU
 * ------------------------------------------------------------- */
.pb-card {
    position: relative;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    display: flex;
    flex-direction: column;
    min-height: 320px;
    transition: border-color .3s, transform .3s, box-shadow .3s;
}
.pb-card:hover,
.pb-card:focus-within {
    border-color: var(--pb-gold);
    transform: translateY(-2px);
    box-shadow: var(--pb-shadow-md);
}
.pb-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
}
.pb-card-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--pb-gold);
    margin-bottom: 1rem;
}
.pb-card-top span:last-child { color: var(--pb-ink-muted); }
.pb-card-title {
    font-family: var(--pb-ff-display);
    font-weight: 400;
    font-size: 1.625rem;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
    color: var(--pb-ink);
}
.pb-card-addr {
    font-size: 0.8125rem;
    color: var(--pb-ink-soft);
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--pb-line);
}
.pb-card-serv {
    font-family: var(--pb-ff-display);
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--pb-rose);
    line-height: 1.5;
    flex-grow: 1;
    margin: 0 0 1rem;
}
.pb-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--pb-line);
    position: relative;
    z-index: 2;
}
.pb-card-tags {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.pb-tag {
    display: inline-block;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--pb-line);
    border-radius: 999px;
    color: var(--pb-gold);
    background: var(--pb-cream);
}
.pb-card-more {
    font-size: 0.6875rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--pb-gold-hover);
    border-bottom: 1px solid var(--pb-gold);
    padding-bottom: 1px;
}

/* -------------------------------------------------------------
 *  9. TAG CLOUD
 * ------------------------------------------------------------- */
.pb-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin: 0;
}
.pb-tag-link {
    font-family: var(--pb-ff-display);
    font-style: italic;
    font-size: clamp(1.125rem, 2vw, 2rem);
    color: var(--pb-ink-soft);
    text-decoration: none;
    line-height: 1;
    transition: color .2s, transform .2s;
}
.pb-tag-link:hover,
.pb-tag-link:focus {
    color: var(--pb-gold-hover);
    transform: translateY(-2px);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
.pb-tag-count {
    font-family: var(--pb-ff-body);
    font-size: 0.45em;
    color: var(--pb-gold);
    margin-left: 0.15em;
    font-style: normal;
    vertical-align: super;
}
.pb-tag-cloud-small .pb-tag-link {
    font-size: 1.125rem;
}

/* -------------------------------------------------------------
 *  10. MANIFESTO
 * ------------------------------------------------------------- */
.pb-manifesto {
    padding: 6rem 0;
    border-top: 1px solid var(--pb-line);
}
.pb-manifesto-text {
    max-width: 940px;
    font-family: var(--pb-ff-display);
    font-weight: 300;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--pb-ink);
    margin: 1.5rem 0 0;
}

/* -------------------------------------------------------------
 *  11. FILTRY + FORMULARZE (Bootstrap override)
 * ------------------------------------------------------------- */
.pb-filter-bar {
    padding: 1.25rem 0;
    border-top: 1px solid var(--pb-line);
    border-bottom: 1px solid var(--pb-line);
    margin-bottom: 2.5rem;
}
.pb-filter-label {
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--pb-gold);
    margin-bottom: 0.35rem;
    font-weight: 500;
}
.form-control,
.form-select {
    background-color: transparent;
    border: 1px solid var(--pb-line);
    color: var(--pb-ink);
    font-family: var(--pb-ff-body);
    font-size: 0.9375rem;
    border-radius: var(--pb-radius);
    padding: 0.6rem 0.85rem;
}
.form-control:focus,
.form-select:focus {
    background-color: #fff;
    border-color: var(--pb-gold-hover);
    color: var(--pb-ink);
    box-shadow: none;
}
.form-control::placeholder {
    color: var(--pb-ink-muted);
    opacity: 0.7;
}
.pb-filter-btn {
    padding: 0.6rem 1rem;
    background: var(--pb-ink);
    border-color: var(--pb-ink);
    color: var(--pb-cream);
}
.pb-filter-btn:hover,
.pb-filter-btn:focus {
    background: var(--pb-gold-hover);
    border-color: var(--pb-gold-hover);
    color: var(--pb-cream);
}
.pb-filter-count {
    font-family: var(--pb-ff-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--pb-gold);
    margin: 1rem 0 0;
    text-align: right;
}

/* -------------------------------------------------------------
 *  12. PAGINATION
 * ------------------------------------------------------------- */
.pb-pagination-nav { padding: 3rem 0 1rem; }
.pb-pagination .page-link {
    color: var(--pb-ink);
    background: transparent;
    border: 1px solid var(--pb-line);
    font-family: var(--pb-ff-display);
    font-size: 0.875rem;
    padding: 0.5rem 0.9rem;
    margin: 0 2px;
    border-radius: var(--pb-radius);
    min-width: 40px;
    text-align: center;
}
.pb-pagination .page-link:hover,
.pb-pagination .page-link:focus {
    border-color: var(--pb-gold);
    color: var(--pb-gold-hover);
    background: var(--pb-cream-2);
}
.pb-pagination .page-item.active .page-link {
    background: var(--pb-ink);
    border-color: var(--pb-ink);
    color: var(--pb-cream);
}
.pb-pagination .page-item.disabled .page-link {
    color: var(--pb-ink-muted);
    opacity: 0.4;
}

/* -------------------------------------------------------------
 *  13. BREADCRUMB
 * ------------------------------------------------------------- */
.pb-breadcrumb-nav { padding: 1.75rem 0 0; }
.pb-breadcrumb {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0;
}
.pb-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--pb-line);
    content: "/";
}
.pb-breadcrumb .breadcrumb-item a {
    color: var(--pb-gold);
    text-decoration: none;
}
.pb-breadcrumb .breadcrumb-item a:hover,
.pb-breadcrumb .breadcrumb-item a:focus {
    color: var(--pb-gold-hover);
    text-decoration: underline;
}
.pb-breadcrumb .breadcrumb-item.active {
    color: var(--pb-ink-muted);
}

/* -------------------------------------------------------------
 *  14. SALON PAGE
 * ------------------------------------------------------------- */
.pb-salon-hero {
    padding: 3rem 0 5rem;
    border-bottom: 1px solid var(--pb-line);
}
.pb-salon-loc {
    font-size: 0.75rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--pb-gold);
    margin-bottom: 1.5rem;
}
.pb-salon-title {
    font-family: var(--pb-ff-display);
    font-weight: 300;
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 0.92;
    letter-spacing: -0.035em;
    margin: 0 0 2rem;
    max-width: 14ch;
    color: var(--pb-ink);
}
.pb-salon-lead {
    max-width: 680px;
    font-family: var(--pb-ff-display);
    font-style: italic;
    font-size: 1.375rem;
    line-height: 1.5;
    color: var(--pb-ink-soft);
    margin: 0 0 2.5rem;
}
.pb-salon-lead::before {
    content: "";
    display: block;
    width: 50px;
    height: 1px;
    background: var(--pb-gold);
    margin-bottom: 1.25rem;
}
.pb-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.pb-cta {
    padding: 0.85rem 1.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    border-radius: var(--pb-radius);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.pb-cta-primary {
    background: var(--pb-ink);
    color: var(--pb-cream);
    border-color: var(--pb-ink);
}
.pb-cta-primary:hover,
.pb-cta-primary:focus {
    background: var(--pb-gold-hover);
    border-color: var(--pb-gold-hover);
    color: var(--pb-cream);
}
.btn-outline-dark.pb-cta {
    color: var(--pb-ink);
    border-color: var(--pb-ink);
}
.btn-outline-dark.pb-cta:hover,
.btn-outline-dark.pb-cta:focus {
    background: var(--pb-ink);
    color: var(--pb-cream);
}

.pb-salon-info {
    padding: 4rem 0;
    border-bottom: 1px solid var(--pb-line);
}
.pb-info-h {
    font-family: var(--pb-ff-body);
    font-size: 0.6875rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--pb-gold);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--pb-line);
}
.pb-services-list { margin: 0; padding: 0; }
.pb-services-list li {
    display: flex;
    align-items: baseline;
    gap: 1.125rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--pb-line);
    font-family: var(--pb-ff-display);
    font-size: 1.375rem;
    font-weight: 300;
    color: var(--pb-ink);
}
.pb-serv-num {
    font-family: var(--pb-ff-body);
    font-size: 0.6875rem;
    color: var(--pb-gold);
    letter-spacing: 0.2em;
    min-width: 2.5rem;
    font-weight: 500;
}
.pb-info-dl {
    margin: 0;
}
.pb-info-dl > div {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--pb-line);
}
.pb-info-dl > div:last-child { border-bottom: none; }
.pb-info-dl dt {
    font-size: 0.6875rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--pb-gold);
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.pb-info-dl dd {
    font-family: var(--pb-ff-display);
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--pb-ink);
    margin: 0;
    line-height: 1.4;
}
.pb-info-dl dd a {
    color: var(--pb-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--pb-gold);
}
.pb-info-dl dd a:hover,
.pb-info-dl dd a:focus {
    color: var(--pb-gold-hover);
    border-bottom-width: 2px;
}
.pb-verif-yes { color: var(--pb-success); font-weight: 500; }
.pb-verif-no  { color: var(--pb-ink-muted); }

.pb-tags-section { padding-bottom: 4rem; border-bottom: 1px solid var(--pb-line); }

/* -------------------------------------------------------------
 *  15. SEARCH PAGE
 * ------------------------------------------------------------- */
.pb-search-hero { padding: 3rem 0 2rem; }
.pb-search-form { margin: 1.5rem 0 0; }
.pb-search-box {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--pb-line);
    transition: border-color .3s;
}
.pb-search-box:focus-within { border-bottom-color: var(--pb-gold-hover); }
.pb-search-input {
    flex: 1;
    background: transparent;
    border: none;
    font-family: var(--pb-ff-display);
    font-weight: 300;
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--pb-ink);
    padding: 1rem 0;
    letter-spacing: -0.02em;
}
.pb-search-input:focus { outline: none; }
.pb-search-input::placeholder {
    color: var(--pb-ink-muted);
    font-style: italic;
    opacity: 0.6;
}
.pb-search-submit {
    background: var(--pb-ink);
    border-color: var(--pb-ink);
    color: var(--pb-cream);
    border-radius: 999px;
    width: 48px;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pb-search-submit:hover,
.pb-search-submit:focus {
    background: var(--pb-gold-hover);
    border-color: var(--pb-gold-hover);
}
.pb-search-select { max-width: 320px; }
.pb-results-note {
    font-family: var(--pb-ff-display);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--pb-gold);
    padding: 1.5rem 0 0;
    margin: 0;
}

/* -------------------------------------------------------------
 *  16. EMPTY STATE
 * ------------------------------------------------------------- */
.pb-empty {
    text-align: center;
    padding: 6rem 1rem;
    font-family: var(--pb-ff-display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--pb-ink-soft);
}
.pb-empty-icon {
    display: block;
    font-size: 4rem;
    color: var(--pb-gold);
    font-style: normal;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* -------------------------------------------------------------
 *  17. FOOTER
 * ------------------------------------------------------------- */
.pb-footer {
    margin-top: 6rem;
    padding: 4.5rem 0 2.5rem;
    background: var(--pb-ink);
    color: var(--pb-cream);
    border-top: 1px solid var(--pb-gold);
}
.pb-foot-big {
    font-family: var(--pb-ff-display);
    font-weight: 300;
    font-style: italic;
    font-size: 3rem;
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--pb-cream);
    margin-bottom: 1.25rem;
}
.pb-foot-big .pb-dot { color: var(--pb-gold-light); }
.pb-foot-about {
    color: var(--pb-cream-2);
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 380px;
}
.pb-foot-h {
    font-family: var(--pb-ff-body);
    font-size: 0.6875rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--pb-gold-light);
    margin: 0 0 1.25rem;
    font-weight: 500;
}
.pb-footer ul li {
    padding: 0.35rem 0;
    font-size: 0.875rem;
    color: var(--pb-cream-2);
}
.pb-foot-link {
    color: var(--pb-cream-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.pb-foot-link:hover,
.pb-foot-link:focus {
    color: var(--pb-gold-light);
    border-bottom-color: var(--pb-gold-light);
}
.pb-foot-bottom {
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(212, 200, 181, 0.15);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.6875rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--pb-cream-2);
}

/* -------------------------------------------------------------
 *  18. ERROR PAGE
 * ------------------------------------------------------------- */
.pb-error-main {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 1rem;
}
.pb-error-box { text-align: center; max-width: 520px; }
.pb-error-code {
    font-family: var(--pb-ff-display);
    font-weight: 900;
    font-size: 8rem;
    line-height: 1;
    color: var(--pb-gold);
    letter-spacing: -0.05em;
    margin-bottom: 1rem;
}
.pb-error-title {
    font-family: var(--pb-ff-display);
    font-weight: 300;
    font-size: 2rem;
    color: var(--pb-ink);
    margin: 0 0 2rem;
    letter-spacing: -0.02em;
}

/* -------------------------------------------------------------
 *  19. REDUCED MOTION — szacunek dla preferencji systemu
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .pb-voj-card:hover .pb-voj-arrow,
    .pb-card:hover { transform: none; }
}

/* -------------------------------------------------------------
 *  20. PRINT
 * ------------------------------------------------------------- */
@media print {
    .pb-navbar, .pb-footer, .pb-filter-bar,
    .pb-cta-row, .pb-pagination-nav,
    .pb-mobile-cta-bar, .pb-report-section { display: none; }
    body { background: white; color: black; }
    a { color: black; text-decoration: underline; }
}

/* =============================================================
 *  21. LOGO (orzeł w kwadracie)
 *      Dodane w wersji 1.3. Jeden plik SVG, różne rozmiary.
 * ============================================================= */
.pb-logo { display: block; line-height: 0; max-width: 100%; height: auto; flex-shrink: 0; }
.pb-logo-nav    { width: 36px; height: 36px; }
.pb-logo-footer { width: 56px; height: 56px; }
.pb-logo-error  { width: 72px; height: 72px; opacity: .85; }
.pb-logo-xl     { width: 96px; height: 96px; }
.pb-logo-xl img { width: 96px; height: 96px; }

/* =============================================================
 *  21a. BUTTON PALETTE OVERRIDE (1.3.6)
 *       Bootstrap btn-primary jest niebieski — zastępujemy
 *       ciemnym węglem z palety editorial, żeby cały projekt
 *       wyglądał spójnie z dolnym tab-barem i hero.
 * ============================================================= */
.btn-primary {
    --bs-btn-bg:             var(--pb-ink);
    --bs-btn-border-color:   var(--pb-ink);
    --bs-btn-color:          #ffffff;
    --bs-btn-hover-bg:       var(--pb-gold);
    --bs-btn-hover-border-color: var(--pb-gold);
    --bs-btn-hover-color:    var(--pb-ink);
    --bs-btn-active-bg:      var(--pb-gold);
    --bs-btn-active-border-color: var(--pb-gold);
    --bs-btn-active-color:   var(--pb-ink);
    --bs-btn-focus-shadow-rgb: 165, 138, 74;
    --bs-btn-disabled-bg:    rgba(26, 20, 18, .45);
    --bs-btn-disabled-border-color: rgba(26, 20, 18, .45);
    --bs-btn-disabled-color: #ffffff;
    font-weight: 600;
    letter-spacing: .01em;
}
.btn-outline-primary {
    --bs-btn-color:          var(--pb-ink);
    --bs-btn-border-color:   var(--pb-ink);
    --bs-btn-hover-bg:       var(--pb-ink);
    --bs-btn-hover-border-color: var(--pb-ink);
    --bs-btn-hover-color:    #ffffff;
    --bs-btn-active-bg:      var(--pb-ink);
    --bs-btn-active-border-color: var(--pb-ink);
    --bs-btn-active-color:   #ffffff;
    --bs-btn-focus-shadow-rgb: 26, 20, 18;
    font-weight: 600;
    letter-spacing: .01em;
}
/* btn-check:checked + .btn-outline-primary = stan „aktywny" toggle */
.btn-check:checked + .btn-outline-primary {
    background-color: var(--pb-ink);
    border-color: var(--pb-ink);
    color: #ffffff;
}

/* =============================================================
 *  22. MOBILE IMPROVEMENTS
 *      Dodane w wersji 1.3, poprawione w 1.3.1:
 *        · zero-overflow policy na wszystkich viewportach
 *        · min 44×44px touch targets (WCAG 2.5.5 AAA)
 *        · większy hamburger
 *        · responsywna typografia hero
 *        · hierarchia w kartach salonów
 *        · poziomy scroll regionów na mobile
 *        · sticky bottom CTA bar
 * ============================================================= */

/* --- ZERO-OVERFLOW FOUNDATION ---
 *   Nic nie może wyjść poza viewport na żadnej szerokości.
 *   Box-sizing i overflow-x: clip na html/body blokuje
 *   jakikolwiek przypadkowy margin/padding od wyciekania
 *   poza ekran i powodowania poziomego scrolla. */
html, body {
    max-width: 100%;
    overflow-x: clip;           /* clip = nowocześniej niż hidden, nie tworzy containing block dla position:fixed */
}
img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}
/* Na bardzo wąskich viewportach ograniczamy container do paddingu
 * zgodnego z Bootstrapem. Wymuszenie box-sizing nie szkodzi nigdzie. */
*, *::before, *::after { box-sizing: border-box; }

/* Długie nazwy/URL łamiemy zamiast wypychać layout w bok. */
.pb-card-title,
.pb-voj-name,
.pb-page-title,
.pb-hero-h1,
.pb-brand-main,
.pb-foot-about,
.pb-report-card,
h1, h2, h3, h4 {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* --- touch targets (apply anywhere a user taps) --- */
.pb-btn-touch {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.navbar-toggler.pb-btn-touch {
    padding: .4rem .7rem;
    font-size: 1.3rem;
    border-radius: 10px;
    line-height: 1;
}

/* Ensure all form inputs reach 44px on mobile — iOS font hack too */
@media (max-width: 767.98px) {
    .pb-form .form-control,
    .pb-form .form-select {
        min-height: 44px;
        font-size: 16px;   /* stops iOS zoom on focus */
    }
    .pb-form .form-control-lg,
    .pb-form .form-select-lg {
        min-height: 52px;
    }
    /* Radio button-group na mobile układamy pionowo — nie mieści się poziomo. */
    .pb-form .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .pb-form .btn-group > .btn {
        border-radius: 10px !important;
        margin: 0 0 .5rem 0;
    }
    .pb-form .btn-group > .btn-check + .btn {
        margin-left: 0;
    }
}

/* --- NAV: kompaktujemy się na wąskich ekranach --- */
@media (max-width: 991.98px) {
    .pb-brand-sub { display: none; }              /* "Editio MMXXVI" pod małą szerokość znika */
}
@media (max-width: 575.98px) {
    .pb-navbar .container { padding-left: .75rem; padding-right: .75rem; }
    .pb-logo-nav { width: 32px; height: 32px; }
    .pb-brand-main { font-size: 1rem !important; letter-spacing: .2px; }
    .pb-brand .ms-2 { margin-left: .4rem !important; }
}

/* --- nav CTA highlight --- */
.pb-nav-cta {
    font-weight: 600;
    letter-spacing: .2px;
}
.pb-nav-cta .bi { font-size: .95em; }

/* --- page titles (report, propose, thank-you) --- */
.pb-page-title {
    font-family: var(--pb-serif, 'Fraunces', Georgia, serif);
    font-weight: 600;
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: .5rem;
}
.pb-thankyou-title { font-size: clamp(1.9rem, 6.5vw, 3.2rem); }

/* --- section titles don't overflow --- */
.pb-section-title {
    font-size: clamp(1.8rem, 6vw, 3rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

/* --- salon card hierarchy (larger title on mobile, clearer meta) --- */
@media (max-width: 575.98px) {
    .pb-card-title   { font-size: 1.1rem; line-height: 1.25; }
    .pb-card-meta    { font-size: .82rem; opacity: .85; }
    .pb-card-body    { padding: 1rem; }
    .pb-card-services li { font-size: .85rem; }
    /* Karta nie może wyjechać z kolumny. */
    .pb-card { max-width: 100%; }
}

/* --- stats grid: na mobile mniejsze liczby, nie wyjeżdżają --- */
@media (max-width: 575.98px) {
    .pb-stat-num { font-size: clamp(1.8rem, 9vw, 3rem); }
    .pb-stat-lbl { font-size: .78rem; }
    .pb-stat     { padding: .75rem .5rem; }
}

/* --- horizontal scroll for regions on mobile --- */
@media (max-width: 767.98px) {
    /* !important żeby pokonać .row.row-cols-2 z Bootstrapa */
    .pb-voj-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: .75rem;
        padding: .25rem 1rem 1rem;
        margin: 0 -1rem;          /* wychodzimy do krawędzi ekranu, ale gasimy to paddingiem powyżej */
    }
    .pb-voj-grid > .col {
        flex: 0 0 72%;
        max-width: 280px;
        scroll-snap-align: start;
    }
    .pb-voj-grid::-webkit-scrollbar { height: 6px; }
    .pb-voj-grid::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.2);
        border-radius: 3px;
    }
    .pb-voj-name { font-size: 1.1rem; line-height: 1.15; }
}

/* --- sticky bottom mobile nav (4 ikony) ---
 *   Wersja editorial: ciemne tło zamiast półprzezroczystego białego,
 *   mocna złota krawędź górna, 4 elementy równo rozłożone,
 *   wysokość obniżona z ~72px do ~56px, środkowy element
 *   („Dodaj") ma kółko-akcent jak w nativeowych app-barach.
 */
/* --- sticky bottom tab bar (mobile only) ---
 *      Tab-bar w stylu iOS/Android: ciemny węgiel + złota kreska,
 *      4 ikony bez tekstu, z aria-label na każdym linku.
 *      Środkowa ikona "Dodaj" — okrągła, złota, lekko wystaje
 *      ponad bar jak w nativeowych appkach.  Każdy target ≥48px. */
.pb-mobile-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: none;
    justify-content: space-around;
    align-items: stretch;
    height: 60px;
    padding: 0 .25rem calc(env(safe-area-inset-bottom));
    background: var(--pb-ink);                 /* ciemny węgiel — paleta editorial */
    border-top: 2px solid var(--pb-gold);      /* mocna złota kreska */
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .15);
}
@media (max-width: 767.98px) {
    .pb-mobile-cta-bar { display: flex; }
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

.pb-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pb-cream);
    text-decoration: none;
    transition: color .15s ease;
}
.pb-tab:hover,
.pb-tab:focus-visible {
    color: var(--pb-gold-light);
    text-decoration: none;
}
.pb-tab:focus-visible {
    outline: 2px solid var(--pb-gold);
    outline-offset: -2px;
    border-radius: 8px;
}
.pb-tab .bi {
    font-size: 1.45rem;
    line-height: 1;
}

/* Środkowa „Dodaj" — subtelne podkreślenie (nie wystaje już ponad bar).
 * Wszystkie 4 ikony są tej samej wielkości, środkowa ma delikatny
 * „active indicator" na dole w kolorze złota. */
.pb-tab-primary {
    position: relative;
    color: var(--pb-cream);
}
.pb-tab-primary .bi {
    color: var(--pb-gold);
}
.pb-tab-primary:hover .bi,
.pb-tab-primary:focus-visible .bi {
    color: var(--pb-gold-light);
}
.pb-tab-primary::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    background: var(--pb-gold);
    border-radius: 1px;
}

/* Na bardzo wąskich ekranach lekko redukujemy ikony. */
@media (max-width: 360px) {
    .pb-tab .bi { font-size: 1.25rem; }
}

/* --- "Zgłoś aktualizację" card on salon page --- */
.pb-report-section { padding-block: 1rem; }
.pb-report-card {
    background: var(--pb-surface, #faf7f3);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}
@media (min-width: 768px) {
    .pb-report-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.5rem;
    }
}
.pb-report-h {
    font-family: var(--pb-serif, 'Fraunces', Georgia, serif);
    font-size: 1.12rem;
    font-weight: 600;
    margin-bottom: .25rem;
    line-height: 1.25;
}
.pb-report-lead {
    font-size: .92rem;
    color: var(--pb-ink-soft, #4a4540);
    margin: 0;
}
.pb-report-btn {
    white-space: nowrap;
    align-self: flex-start;
}
@media (min-width: 768px) {
    .pb-report-btn { align-self: auto; }
}

/* --- footer CTA button --- */
.pb-foot-cta {
    font-weight: 600;
    letter-spacing: .2px;
}

/* --- form layout / sections --- */
.pb-form-section {
    font-family: var(--pb-serif, 'Fraunces', Georgia, serif);
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.pb-form .form-label .text-danger {
    font-weight: 700;
    margin-inline-start: .15rem;
}

/* --- breadcrumb nav tune --- */
.pb-breadcrumb-nav .breadcrumb { margin-bottom: 1rem; flex-wrap: wrap; }
.pb-breadcrumb-nav a { color: var(--pb-ink-soft, #4a4540); }

/* --- container mobile padding fine-tune --- */
@media (max-width: 575.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    /* Sekcje: mniejsze paddingi pionowe na mobile */
    .pb-section { padding-block: 2.5rem; }
    .pb-section-head { margin-bottom: 1.25rem; }
    .pb-section-side {
        font-size: .95rem;
        margin-top: .75rem;
    }
}

/* --- gwarancja że elementy flex nie wypychają rodzica --- */
.pb-navbar .navbar-nav,
.pb-navbar .nav-item { min-width: 0; }
.pb-foot-bottom { flex-wrap: wrap; gap: .5rem; }


/* =============================================================
 *  23. FORMULARZE EDITORIAL (v2, dodane w 1.3.6)
 *      Karty sekcji na kremowym tle + podkreślone inputy
 *      (tylko dolna linia, nie ramka wokół). Spójne z resztą
 *      palety editorial.
 * ============================================================= */

.pb-main-form { background: #fafaf8; }

.pb-form-header {
    margin-bottom: 2rem;
}
.pb-form-header .pb-page-title {
    margin-top: .5rem;
    margin-bottom: .75rem;
}
.pb-form-lead {
    font-size: 1.05rem;
    color: var(--pb-ink-soft);
    max-width: 60ch;
    line-height: 1.55;
    margin: 0;
}
.pb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .25rem;
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--pb-gold);
    font-weight: 600;
}

/* --- Karta sekcji formularza --- */
.pb-form-card {
    background: var(--pb-cream);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    padding: 1.75rem 1.5rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}
.pb-form-card-h {
    float: none;
    width: 100%;
    font-family: var(--pb-ff-display);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--pb-ink);
    margin: 0 0 1.25rem;
    padding: 0 0 .75rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    line-height: 1.3;
}

/* --- Pole formularza (label + input) --- */
.pb-field {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 0 .5rem;
}
.pb-field-row .pb-field {
    padding: 0 .5rem;
}
@media (min-width: 768px) {
    .pb-field-row .col-md-6:first-child .pb-field { padding-left: 0; }
    .pb-field-row .col-md-6:last-child  .pb-field { padding-right: 0; }
}

.pb-field-label {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin-bottom: .35rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--pb-ink);
    text-transform: uppercase;
}
.pb-field-req {
    color: var(--pb-gold);
    font-weight: 700;
}
.pb-field-opt {
    color: var(--pb-ink-muted);
    font-weight: 400;
    text-transform: none;
    font-size: .8rem;
    letter-spacing: 0;
}

/* Input: brak ramki, tylko bottom-border.
 * Focus -> grubszy złoty dół + lekki gold-tinted bg. */
.pb-field-input {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1.5px solid rgba(0, 0, 0, .18);
    border-radius: 0;
    background: transparent;
    padding: .65rem 0 .55rem;
    font-family: var(--pb-ff-body, inherit);
    font-size: 1rem;
    color: var(--pb-ink);
    outline: 0;
    transition: border-color .15s ease, background-color .15s ease;
}
.pb-field-input::placeholder {
    color: var(--pb-ink-muted);
    opacity: 1;
}
.pb-field-input:focus,
.pb-field-input:focus-visible {
    border-bottom-color: var(--pb-gold);
    border-bottom-width: 2px;
    padding-bottom: calc(.55rem - .5px);     /* kompensacja grubości borderu */
}
.pb-field-input:disabled {
    color: var(--pb-ink-muted);
    border-bottom-color: rgba(0, 0, 0, .08);
}

.pb-field-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.pb-field-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231a1412' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .35rem center;
    background-size: 16px 16px;
    padding-right: 1.75rem;
    cursor: pointer;
}

.pb-field-help {
    display: block;
    margin-top: .4rem;
    font-size: .82rem;
    color: var(--pb-ink-soft);
    line-height: 1.45;
}

/* Mobile — większy touch target */
@media (max-width: 767.98px) {
    .pb-field-input {
        font-size: 16px;                         /* blokuje iOS auto-zoom */
        padding: .85rem 0 .65rem;
    }
    .pb-form-card {
        padding: 1.25rem 1rem 1rem;
        border-radius: 12px;
    }
    .pb-field { padding: 0; margin-bottom: 1.25rem; }
    .pb-field-row .pb-field { padding: 0; }
}

/* --- Alert z błędami (nie niebieski, nie Bootstrap-default) --- */
.pb-form-alert {
    background: #fef3f2;
    border: 1px solid #f1b4b0;
    color: #842d26;
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
}
.pb-form-alert ul { padding-left: 1.25rem; }
.pb-form-alert li { margin-bottom: .2rem; }

/* --- Toggle klient/właściciel jako kafelki --- */
.pb-role-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
@media (max-width: 575.98px) {
    .pb-role-tiles { grid-template-columns: 1fr; }
}
.pb-role-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, .1);
    border-radius: 14px;
    padding: 1.15rem 1.15rem 1.1rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
    min-height: 112px;
    position: relative;
}
.pb-role-tile:hover {
    border-color: var(--pb-ink-soft);
}
.pb-role-tile-icon {
    font-size: 1.6rem;
    color: var(--pb-ink-soft);
    line-height: 1;
    margin-bottom: .35rem;
}
.pb-role-tile-title {
    font-family: var(--pb-ff-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--pb-ink);
    line-height: 1.25;
}
.pb-role-tile-desc {
    font-size: .85rem;
    color: var(--pb-ink-soft);
    line-height: 1.4;
}

/* Wybrana opcja — aktywny kafel */
.btn-check:checked + .pb-role-tile {
    border-color: var(--pb-ink);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(26, 20, 18, .08), inset 0 0 0 1.5px var(--pb-ink);
}
.btn-check:checked + .pb-role-tile .pb-role-tile-icon {
    color: var(--pb-gold);
}
.btn-check:checked + .pb-role-tile::after {
    content: '';
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pb-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M13.854 3.854a.5.5 0 0 0-.708-.708L6 10.293 2.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7.5-7.5z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.btn-check:focus-visible + .pb-role-tile {
    outline: 2px solid var(--pb-gold);
    outline-offset: 2px;
}

/* --- Akcje formularza (submit + cancel) --- */
.pb-form-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1rem;
}
@media (min-width: 576px) {
    .pb-form-actions {
        flex-direction: row;
        align-items: center;
    }
}
.pb-form-submit {
    min-width: 220px;
}

/* =============================================================
 * Verification banner (v1.10.3)
 *
 * Disclosed under the hero on home / region / city / search.
 * Communicates the editorial verification process: how many
 * salons total, how many cleared for publication, and where to
 * read more. Auto-hides above VERIFY_BANNER_THRESHOLD.
 * ============================================================= */
.pb-verify-banner {
    background: linear-gradient(180deg, #f0f9f4 0%, #e6f4ec 100%);
    border-top: 1px solid #cfe6d9;
    border-bottom: 1px solid #cfe6d9;
    color: #2c4d3a;
}
.pb-verify-banner-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f7a44;
    font-size: 1.4rem;
    box-shadow: 0 2px 4px rgba(31, 122, 68, 0.12);
}
.pb-verify-banner-stats {
    flex: 0 0 auto;
    min-width: 180px;
}
.pb-verify-banner-numbers {
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}
.pb-verify-banner-num-published {
    font-size: 1.4rem;
    color: #1f7a44;
    font-weight: 700;
}
.pb-verify-banner-pct {
    font-size: 0.85rem;
    color: #5a7a68;
    font-weight: 500;
}
.pb-verify-banner-progress {
    height: 6px;
    background: rgba(31, 122, 68, 0.12);
    border-radius: 3px;
    overflow: hidden;
}
.pb-verify-banner-text {
    flex: 1 1 280px;
    font-size: 0.95rem;
    line-height: 1.5;
}
.pb-verify-banner-more {
    color: #1f7a44;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 0.25rem;
}
.pb-verify-banner-more:hover { text-decoration: underline; }

/* Mobile: stack vertically, less padding */
@media (max-width: 767.98px) {
    .pb-verify-banner .container { padding-top: 0.85rem; padding-bottom: 0.85rem; }
    .pb-verify-banner-icon { width: 36px; height: 36px; font-size: 1.15rem; }
    .pb-verify-banner-numbers { font-size: 0.95rem; }
    .pb-verify-banner-num-published { font-size: 1.15rem; }
    .pb-verify-banner-text { font-size: 0.9rem; flex-basis: 100%; }
}

/* =============================================================
 * /o-katalogu page (v1.10.3)
 * ============================================================= */
.pb-o-katalogu h2 {
    color: #1a3a26;
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: 0.65rem;
}
.pb-o-katalogu p,
.pb-o-katalogu li {
    color: #2c4d3a;
    line-height: 1.65;
}
.pb-o-katalogu ul {
    margin-bottom: 1rem;
}

/* Stats card on /o-katalogu */
.pb-stats-card {
    background: #fff;
    border: 1px solid #e1e7e3;
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.pb-stat-num {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #1a3a26;
}
.pb-stat-label {
    font-size: 0.82rem;
    color: #5a7a68;
    line-height: 1.3;
    margin-top: 0.2rem;
}
@media (max-width: 575.98px) {
    .pb-stat-num { font-size: 1.5rem; }
    .pb-stats-card { padding: 1rem; }
}