/* ════════════════════════════════════════════════════════════════════
   KABEX — main.css
   • Design tokens (CSS Variables)
   • Reset + base
   • Typografia
   • Utility (container, section, btn, screen-reader)
   • Komponenty szkieletu (loader, header, footer, breadcrumbs, forms, newsletter)
   • Sekcje sklepu dochodzą w assets/css/sections/*.css
   ════════════════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 1. DESIGN TOKENS                                                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */
:root {

    /* ── Kolory marki (paleta KABEX z obecnego Shopera) ── */
    --color-primary:        #1E5BA8;   /* KABEX blue (logo, top-bar, CTA główne) */
    --color-primary-dark:   #144378;
    --color-primary-light:  #3C7DCC;
    --color-primary-tint:   #E8F0FA;

    --color-accent:         #F5D32E;   /* żółty z banerów ("OCIEPLENIA TYNKI") */
    --color-accent-dark:    #D9B91E;
    --color-accent-tint:    #FEF8DE;

    --color-action:         #E63946;   /* czerwony — promocje, "Comfino", urgency */
    --color-action-dark:    #C0202C;

    --color-success:        #2BB673;
    --color-warning:        #F59E0B;
    --color-info:           #3B82F6;

    /* ── Skala neutralna ── */
    --color-dark:           #1A2332;   /* tekst główny */
    --color-text:           #2A3340;
    --color-text-muted:     #6C7689;
    --color-text-light:     #9AA3B5;
    --color-border:         #E2E6ED;
    --color-border-light:   #EEF1F5;
    --color-bg:             #FFFFFF;
    --color-bg-alt:         #F4F6F9;   /* sekcje alternatywne */
    --color-bg-dark:        #131C2A;   /* footer */

    /* ── Typografia ── */
    /* Typografia v4 — Poppins (body, popularny polski klasyk) + Oswald (display, industrial condensed)
       Manrope/DM Sans/Antonio/Barlow Condensed jako legacy fallback. */
    --font-sans:            'Poppins', 'Manrope', 'DM Sans', 'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-display:         'Oswald', 'Syne', 'Antonio', 'Barlow Condensed', 'Poppins', sans-serif;
    --font-mono:            ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-xs:    0.75rem;    /* 12px */
    --fs-sm:    0.875rem;   /* 14px */
    --fs-base:  1rem;       /* 16px */
    --fs-md:    1.125rem;   /* 18px */
    --fs-lg:    1.25rem;    /* 20px */
    --fs-xl:    1.5rem;     /* 24px */
    --fs-2xl:   1.875rem;   /* 30px */
    --fs-3xl:   2.25rem;    /* 36px */
    --fs-4xl:   3rem;       /* 48px */
    --fs-5xl:   3.75rem;    /* 60px */
    --fs-6xl:   4.5rem;     /* 72px */

    --lh-tight:  1.1;
    --lh-snug:   1.3;
    --lh-base:   1.6;
    --lh-relax:  1.8;

    /* ── Spacing scale (8px base) ── */
    --sp-1:  0.25rem;   /* 4px */
    --sp-2:  0.5rem;    /* 8px */
    --sp-3:  0.75rem;   /* 12px */
    --sp-4:  1rem;      /* 16px */
    --sp-5:  1.25rem;   /* 20px */
    --sp-6:  1.5rem;    /* 24px */
    --sp-8:  2rem;      /* 32px */
    --sp-10: 2.5rem;    /* 40px */
    --sp-12: 3rem;      /* 48px */
    --sp-16: 4rem;      /* 64px */
    --sp-20: 5rem;      /* 80px */
    --sp-24: 6rem;      /* 96px */
    --sp-32: 8rem;      /* 128px */

    /* ── Kontenery ── */
    --container-sm:   640px;
    --container-md:   960px;
    --container-lg:   1280px;
    --container-xl:   1480px;
    --container-pad:  var(--sp-4);

    /* ── Radius — ostre kąty (industrial KABEX) ── */
    --r-sm:    2px;        /* drobne elementy: chips, badges, mini-tags */
    --r-md:    0;          /* karty, boxy, banery — SHARP */
    --r-lg:    0;          /* duże kontenery, hero — SHARP */
    --r-xl:    0;          /* największe — SHARP */
    --r-full:  9999px;     /* pill buttons, round icons — zostaje */

    /* ── Cienie ── */
    --shadow-sm:   0 1px 3px rgba(20, 30, 50, .08);
    --shadow-md:   0 4px 12px rgba(20, 30, 50, .10);
    --shadow-lg:   0 12px 32px rgba(20, 30, 50, .12);
    --shadow-xl:   0 24px 60px rgba(20, 30, 50, .16);

    /* ── Z-indexy ── */
    --z-base:    1;
    --z-sticky:  100;
    --z-header:  200;
    --z-overlay: 800;
    --z-modal:   900;
    --z-loader:  9999;

    /* ── Transitions ── */
    --t-fast:   0.15s ease;
    --t-base:   0.25s cubic-bezier(.4, 0, .2, 1);
    --t-slow:   0.4s cubic-bezier(.4, 0, .2, 1);

    /* ── Header heights ── */
    --header-topbar-h: 36px;
    --header-main-h:   80px;
    --header-nav-h:    48px;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 2. RESET & BASE                                                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    background: var(--color-bg);
    min-height: 100vh;
    overflow-x: hidden;
    /* Defensywne: na imported PDP niezdiagnozowane CSS zwężało body do 700px.
       100% wymusza full width, bez 100vw bo to ignoruje scrollbar. */
    width: 100% !important;
    max-width: 100% !important;
}
html { width: 100% !important; max-width: 100% !important; }

img, picture, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:hover { color: var(--color-primary-dark); }

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

button { cursor: pointer; background: none; border: 0; }

ul, ol { list-style: none; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 3. TYPOGRAFIA                                                    ║
   ║ Nagłówki — Barlow Condensed 800 (gruba czcionka), UPPERCASE,     ║
   ║ duże rozmiary (industrial-modern feel jak Stitch design)         ║
   ╚══════════════════════════════════════════════════════════════════╝ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);            /* Barlow Condensed */
    font-weight: 800;                            /* grubsze niż wcześniej (700→800) */
    line-height: 1.05;                           /* mocne, zwarte */
    color: var(--color-dark);
    letter-spacing: -0.015em;                    /* lekkie zaciśnięcie */
    text-transform: uppercase;
}

/* Rozmiary — większe niż domyślne, scalone fluidem */
h1 { font-size: clamp(2.5rem, 5.5vw, 5rem);     }    /* 40 → 80px */
h2 { font-size: clamp(2rem,   4.5vw, 4rem);     }    /* 32 → 64px */
h3 { font-size: clamp(1.5rem, 3vw,   2.5rem);   }    /* 24 → 40px */
h4 { font-size: clamp(1.25rem, 2vw,  1.75rem);  }    /* 20 → 28px */
h5 { font-size: var(--fs-lg);   }                    /* 20px */
h6 { font-size: var(--fs-base); }                    /* 16px */

p { margin-bottom: var(--sp-4); }

::selection { background: var(--color-accent); color: var(--color-dark); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 3b. SECTION-HEADER — reusable pattern dla sekcji home page       ║
   ║                                                                  ║
   ║ Wzór (jak na designie Stitch):                                   ║
   ║   KICKER (mała etykieta nad tytułem, niebieski)                  ║
   ║   DUŻY TYTUŁ SEKCJI (Barlow Condensed 800, UPPERCASE)           ║
   ║   Opcjonalny lead (opis pod tytułem, Inter)                      ║
   ║                                                                  ║
   ║ HTML:                                                            ║
   ║   <header class="section-header">                                ║
   ║     <span class="section-header__kicker">Kompletne rozwiązania</span> ║
   ║     <h2 class="section-header__title">Gotowe systemy ocieplen</h2>    ║
   ║     <p class="section-header__lead">Opcjonalny opis...</p>       ║
   ║   </header>                                                      ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.section-header {
    margin-bottom: clamp(var(--sp-6), 3vw, var(--sp-10));
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: 900px;
}

/* Kicker — mała etykieta nad tytułem */
.section-header__kicker {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);                     /* 14px */
    font-weight: 700;
    color: var(--color-primary);                 /* #1E5BA8 niebieski */
    text-transform: uppercase;
    letter-spacing: 0.15em;                      /* rozstrzelone — premium feel */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Tytuł sekcji — duży, gruby, uppercase (na wzór designu) */
.section-header__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.75rem);      /* 32 → 60px */
    font-weight: 800;
    line-height: 1.05;
    color: var(--color-dark);
    letter-spacing: -0.015em;
    text-transform: uppercase;
    margin: 0;
}

/* Opcjonalny lead — opis pod tytułem */
.section-header__lead {
    font-family: var(--font-sans);
    font-size: var(--fs-md);                     /* 18px */
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: var(--sp-3) 0 0;
    max-width: 720px;
}

/* Warianty alignmentu */
.section-header--center {
    margin-inline: auto;
    text-align: center;
    align-items: center;
}
.section-header--center .section-header__lead {
    margin-inline: auto;
}

/* Wariant na ciemnym tle */
.section-header--dark .section-header__kicker { color: var(--color-accent); }
.section-header--dark .section-header__title  { color: #fff; }
.section-header--dark .section-header__lead   { color: rgba(255, 255, 255, 0.75); }

/* Akcentowany highlight (np. żółte słowo w tytule) */
.section-header__title .accent {
    color: var(--color-primary);                 /* lub var(--color-accent) */
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 4. UTILITY                                                       ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-md); }
.container--wide   { max-width: 100%; }

.section { padding-block: clamp(var(--sp-12), 7vw, var(--sp-24)); }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-bg-dark); color: #fff; }
.section--tight { padding-block: var(--sp-8); }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.skip-link {
    position: absolute; top: -100px; left: var(--sp-2);
    background: var(--color-primary); color: #fff;
    padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
    z-index: var(--z-loader);
}
.skip-link:focus { top: var(--sp-2); }

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    min-height: 44px;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--t-base);
    text-align: center;
    line-height: 1;
}

.btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--accent {
    background: var(--color-accent);
    color: var(--color-dark);
    border-color: var(--color-accent);
}
.btn--accent:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--action {
    background: var(--color-action);
    color: #fff;
    border-color: var(--color-action);
}
.btn--action:hover {
    background: var(--color-action-dark);
    border-color: var(--color-action-dark);
    color: #fff;
}

.btn--outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn--outline:hover {
    background: var(--color-primary);
    color: #fff;
}

.btn--ghost {
    background: transparent;
    color: var(--color-dark);
}
.btn--ghost:hover { background: var(--color-bg-alt); }

.btn--lg { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-md); min-height: 52px; }
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); min-height: 36px; }
.btn--block { width: 100%; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 5. LOADER                                                        ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.loader {
    position: fixed; inset: 0;
    background: #fff;
    z-index: var(--z-loader);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .4s ease, visibility .4s ease;
}
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__spinner {
    width: 48px; height: 48px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: kabex-spin .7s linear infinite;
}
@keyframes kabex-spin { to { transform: rotate(360deg); } }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 6. HEADER                                                        ║
   ║ Style przeniesione do osobnego pliku — patrz:                    ║
   ║ assets/css/sections/header.css                                   ║
   ║ (ładowany przez inc/02-enqueue.php po main.css — kaskada OK)     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 7. BREADCRUMBS                                                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.breadcrumbs {
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding-block: var(--sp-3);
    font-size: var(--fs-sm);
}
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}
.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-text-muted);
}
.breadcrumbs__item--current { color: var(--color-dark); font-weight: 500; }
.breadcrumbs__link { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs__link:hover { color: var(--color-primary); }
.breadcrumbs__sep { color: var(--color-text-light); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 8. FORMS                                                         ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.kabex-form {
    display: grid;
    gap: var(--sp-4);
}
.kabex-form__group { display: flex; flex-direction: column; gap: var(--sp-2); }
.kabex-form__label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-dark);
}
.kabex-form__input,
.kabex-form__textarea,
.kabex-form__select {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.kabex-form__input:focus,
.kabex-form__textarea:focus,
.kabex-form__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-tint);
}
.kabex-form__textarea { resize: vertical; min-height: 120px; }

.kabex-form__rodo {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    line-height: var(--lh-snug);
}
.kabex-form__rodo a { color: var(--color-primary); }

.kabex-form__message {
    display: none;
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 500;
}
.kabex-form__message.is-visible { display: block; }
.kabex-form__message--success {
    background: rgba(43, 182, 115, 0.1);
    color: #18814F;
    border: 1px solid rgba(43, 182, 115, 0.3);
}
.kabex-form__message--error {
    background: rgba(230, 57, 70, 0.08);
    color: var(--color-action-dark);
    border: 1px solid rgba(230, 57, 70, 0.2);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 9. NEWSLETTER                                                    ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.newsletter {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    padding-block: var(--sp-12);
}
.newsletter__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    align-items: center;
    text-align: center;
}
@media (min-width: 768px) {
    .newsletter__inner {
        grid-template-columns: 1fr 1.2fr;
        text-align: left;
    }
}
.newsletter__heading { color: #fff; margin-bottom: var(--sp-2); }
.newsletter__text { color: rgba(255,255,255,.85); margin: 0; }
.newsletter__form {
    display: flex;
    gap: var(--sp-2);
    grid-column: 1 / -1;
}
@media (min-width: 768px) {
    .newsletter__form { grid-column: auto; }
}
.newsletter__input {
    flex: 1;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    border: 0;
    font-size: var(--fs-base);
}
.newsletter__rodo {
    grid-column: 1 / -1;
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.7);
}
.newsletter__rodo a { color: var(--color-accent); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 10. FOOTER                                                       ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.footer {
    background: var(--color-bg-dark);
    color: rgba(255,255,255,.7);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}
.footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-8);
    padding-block: var(--sp-16);
}
.footer__col--brand { grid-column: span 1; }
@media (min-width: 992px) {
    .footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

.footer__logo { display: inline-block; margin-bottom: var(--sp-4); }
.footer__logo img { max-height: 56px; width: auto; }
.footer__about { margin-bottom: var(--sp-5); color: rgba(255,255,255,.6); }

.footer__contact { font-style: normal; }
.footer__contact-item {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    margin-bottom: var(--sp-3);
    color: rgba(255,255,255,.7);
}
.footer__contact-item svg { color: var(--color-accent); margin-top: 4px; flex-shrink: 0; }
.footer__link { color: #fff; text-decoration: none; }
.footer__link:hover { color: var(--color-accent); }

.footer__heading {
    color: #fff;
    font-size: var(--fs-base);
    margin-bottom: var(--sp-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.footer__menu li { margin-bottom: var(--sp-2); }
.footer__menu a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: color var(--t-fast);
}
.footer__menu a:hover { color: var(--color-accent); }

.footer__socials {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}
.footer__socials__link {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08);
    border-radius: var(--r-full);
    color: #fff;
    transition: background var(--t-fast);
}
.footer__socials__link:hover { background: var(--color-primary); }

.footer__assets {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-block: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
}
.footer__assets-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.footer__assets-label {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 100px;
}
.footer__assets-logos {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
}
.footer__assets-logo {
    height: 28px; width: auto;
    object-fit: contain;
    opacity: .8;
}

.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-block: var(--sp-4);
}
.footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.5);
}
.footer__legal {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.footer__legal a { color: rgba(255,255,255,.5); text-decoration: none; }
.footer__legal a:hover { color: #fff; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 11. UTILITIES — image placeholder                                ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.image--placeholder {
    width: 100%;
    border-radius: var(--r-md);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 12. SEKCJE SKLEPU                                                ║
   ║ — dochodzą jako osobne pliki w assets/css/sections/*.css         ║
   ║   importowane przez @import poniżej kiedy będą gotowe            ║
   ╚══════════════════════════════════════════════════════════════════╝ */
/* @import url('sections/hero.css'); */
/* @import url('sections/category-tiles.css'); */
/* @import url('sections/products-grid.css'); */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 13. UJEDNOLICONE NIEBIESKIE HERO — wzorzec z /kategorie/         ║
   ║                                                                  ║
   ║ Gradient 135deg primary → primary-dark + równomierna siatka      ║
   ║ kropek 24×24 (rgba white 0.07). Wszystkie blue hero używają      ║
   ║ tego samego wyglądu dla spójności brand-experience.              ║
   ║                                                                  ║
   ║ Aplikujemy do znanych selektorów (archive-product, page-about,   ║
   ║ page-kontakt, page-cennik, page-promocje, page-kategorie,        ║
   ║ blog-archive, single-post, page-legal, page-platnosci).          ║
   ║ Selektor uniwersalny: dodaj klasę `.kbx-hero-blue` do nowych.    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

.kbx-hero-blue,
.about-hero,
.page-kontakt__hero,
.page-cennik__hero,
.page-promocje__hero,
.page-legal__hero,
.page-platnosci__hero,
.blog-archive__hero,
.single-post__hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
}

.kbx-hero-blue::after,
.about-hero::after,
.page-kontakt__hero::after,
.page-cennik__hero::after,
.page-promocje__hero::after,
.page-legal__hero::after,
.page-platnosci__hero::after,
.blog-archive__hero::after,
.single-post__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

/* Zawartość hero musi siedzieć nad pattern */
.kbx-hero-blue > .container,
.about-hero > .container,
.page-kontakt__hero > .container,
.page-cennik__hero > .container,
.page-promocje__hero > .container,
.page-legal__hero > .container,
.page-platnosci__hero > .container,
.blog-archive__hero > .container,
.single-post__hero > .container {
    position: relative;
    z-index: 1;
}