/* ==========================================================================
   FH ALINA - warstwa prezentacyjna stron (bez Elementora)

   Kolory i kroje wg dokumentu STRUKTURA-STRONY.md, rozdz. 4.
   Naglowkow nie pogrubiamy - Gotu ma jedna wage, a sztuczne pogrubienie
   przegladarki dawalo wrazenie "topornej" strony.
   ========================================================================== */

:root {
    --fha-ciemny:     #0f0f0f;
    --fha-ciemny-2:   #151515;
    --fha-zloty:      #e4b85f;
    --fha-zloty-ciem: #c9a050;
    --fha-jasny:      #f7f7f5;
    --fha-tekst-jasny:#f0ece4;
    --fha-tekst-szary:#b5b0a6;
    --fha-obrys:      rgba(228, 184, 95, .35);
    --fha-czarny:     #090909;   /* tlo sekcji ciemnych i tekst na jasnych */
    /* Zloty #e4b85f jest zrobiony pod ciemne tlo - na bialym daje kontrast 1,9.
       Sekcje jasne uzywaja glebszego odcienia (4,6 na bieli). */
    --fha-zloty-jasnetlo: #8a6a1f;
    --fha-belka:      #0b0b0b;
    --fha-kafelek:    #292929;
    --fha-ikona:      #d9be82;
    --fha-szer:       1140px;   /* tak jak kontener Elementora przed przebudowa */
    --fha-luz:        clamp(56px, 8vw, 110px);
}

/* --------------------------------------------------------------- podstawa */

body {
    margin: 0;
    background: var(--fha-ciemny);
    color: var(--fha-tekst-jasny);
    font-family: 'Public Sans', system-ui, sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.7;
}

h1, h2, h3, h4 {
    color: inherit;
    text-transform: none;      /* zestaw stylow Elementora wymuszal capitalize */
    font-family: 'Gotu', Georgia, serif;
    font-weight: 400;          /* Gotu ma tylko te wage */
    line-height: 1.25;
    margin: 0 0 .5em;
}

a { color: var(--fha-zloty); }

img { max-width: 100%; height: auto; }

.fha-wnetrze {
    box-sizing: border-box;
    width: min(var(--fha-szer), calc(100% - 48px));
    margin-inline: auto;
}

/* Elementy ukladu licza szerokosc razem z paddingiem - inaczej kazdy odstep
   wewnetrzny dokladalby sie do szerokosci i rozpychal siatke. */
.fha-kafelek, .fha-karta, .fha-karta-tresc, .fha-plik, .fha-plik-tresc,
.fha-wpis, .fha-wpis-tresc, .fha-okno-panel, .fha-stopka-kolumna {
    box-sizing: border-box;
}

.fha-tresc { display: block; }

/* Tresc widoczna wylacznie dla czytnikow ekranu. */
.fh-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fha-pomin {
    position: absolute; left: -9999px;
    background: var(--fha-zloty); color: var(--fha-ciemny);
    padding: 10px 18px; z-index: 1000;
}
.fha-pomin:focus { left: 12px; top: 12px; }

/* kotwica z zapasem na wysokosc belki */
.fha-kotwica { display: block; height: 0; scroll-margin-top: 90px; }

/* --------------------------------------------------------------- przyciski */

.fha-przycisk {
    display: inline-flex; align-items: center; justify-content: center;
    /* bez tego `width: 100%` liczy sie BEZ paddingu i obramowania, wiec przycisk
       „Pobierz" wychodzil 19 px poza kafelek i rozpychal strone na telefonie */
    box-sizing: border-box;
    padding: 12px 24px;
    background: var(--fha-zloty);
    color: var(--fha-czarny);
    font-weight: 500; font-size: 15px; line-height: 1.8;
    letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--fha-zloty);
    border-radius: 10px;          /* tak jak w Elementorze - 10 px na kazdym przycisku */
    transition: background .25s, color .25s;
}
.fha-przycisk:hover { background: var(--fha-zloty-ciem); border-color: var(--fha-zloty-ciem); }

.fha-przycisk-obrys {
    background: transparent;
    color: var(--fha-zloty);
}
.fha-przycisk-obrys:hover { background: var(--fha-zloty); color: var(--fha-ciemny); }

/* obrys na jasnym tle - „KONTAKT" przy pytaniach */
.fha-przycisk-obrys-ciemny {
    background: transparent;
    color: var(--fha-czarny);
    border-color: var(--fha-czarny);
}
.fha-przycisk-obrys-ciemny:hover { background: var(--fha-czarny); color: #fff; border-color: var(--fha-czarny); }

.fha-przycisk-maly { font-size: 14px; padding: 12px 20px; }

/* ------------------------------------------------------------------ belka */

.fha-belka {
    position: sticky; top: 0; z-index: 500;
    background: var(--fha-belka);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.fha-belka-wnetrze {
    width: min(var(--fha-szer), calc(100% - 48px));
    margin-inline: auto;
    display: flex; align-items: center; gap: 28px;
    min-height: 98px;
}
.fha-logo { flex: none; display: flex; align-items: center; }
.fha-logo img { max-height: 52px; width: auto; }
.fha-logo-tekst { font-family: 'Gotu', serif; font-size: 22px; color: var(--fha-tekst-jasny); }

/* Menu stoi tuz przy logo, a koszyk/konto/„Zamow zdjecie" dosuwaja sie do prawej
   krawedzi - tak jak w belce sprzed przebudowy. */
.fha-nawigacja { display: flex; align-items: center; gap: 28px; flex: 1; }

.fha-menu {
    display: flex; align-items: center; gap: 26px;
    margin: 0; padding: 0; list-style: none;
}
.fha-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 14px; letter-spacing: .02em; text-transform: uppercase;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
}
.fha-menu a:hover,
.fha-menu .current-menu-item > a { color: var(--fha-zloty); border-bottom-color: var(--fha-zloty); }

.fha-belka-akcje { display: flex; align-items: center; gap: 14px; margin-left: auto; }

/* Pasek „Zamów zdjęcie" pod belką jest tylko na telefonie - na komputerze ten sam
   wybór daje szeroki przycisk w samej belce. */
.fha-belka-zamow { display: none; }

.fha-hamburger {
    display: none; margin-left: auto;
    width: 44px; height: 44px; padding: 10px;
    background: none; border: 1px solid rgba(255,255,255,.2); border-radius: 4px;
    cursor: pointer;
}
.fha-hamburger span {
    display: block; height: 1.5px; background: var(--fha-tekst-jasny);
    margin: 4px 0; transition: transform .25s, opacity .25s;
}
.fha-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.fha-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fha-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* =========================================================================
   STRONA GLOWNA - uklad odtworzony jeden do jednego po szablonie Elementora
   (strona 73). Wartosci pochodza z pomiarow starej strony: kolory #090909
   i #e4b75f, kroje Gotu 72/82 i 48/58, kontener 1140 px, zaokraglenia 10 px.
   ========================================================================= */

/* przedzial „split" miedzy sekcjami - ta sama sciezka SVG co w Elementorze */
.fha-fala {
    position: absolute; left: 0; width: 100%; line-height: 0;
    z-index: 2; pointer-events: none;
    overflow: hidden;
}
.fha-fala svg { display: block; width: calc(100% + 1.3px); height: 30px; }
/* Kierunek jak w Elementorze: u gory sekcji kolec wchodzi w DOL, u dolu - w GORE.
   Za pierwszym razem mialam to odwrotnie i wciecie wygladalo na obrocone. */
.fha-fala-gora { top: 0; }
.fha-fala-dol  { bottom: 0; }
.fha-fala-dol svg { transform: rotate(180deg); }

/* sekcje na bialym tle - bez jawnego tla przebijaloby ciemne tlo <body> */
.fha-sekcja-jasna {
    background: #fff;
    color: var(--fha-czarny);
}
.fha-sekcja-jasna h1, .fha-sekcja-jasna h2, .fha-sekcja-jasna h3 { color: var(--fha-czarny); }
.fha-sekcja-jasna .fha-proza { color: var(--fha-czarny); }

/* ------------------------------------------------------------------- hero */

.fha-hero {
    position: relative;
    min-height: 85vh;
    display: flex; align-items: center;
    background: var(--fha-czarny) center center/cover no-repeat;
}
/* przeslona z Elementora: gradient w prawo, #090909 do 47%, dalej przezroczysty,
   cala warstwa na 55% krycia - dzieki temu zdjecia po prawej zostaja widoczne */
.fha-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, #090909 47%, rgba(41,41,41,0) 100%);
    opacity: .55;
}
.fha-hero-wnetrze { position: relative; z-index: 1; }
.fha-hero-kolumna {
    width: 51%;
    display: flex; flex-direction: column; align-items: flex-start; gap: 30px;
}
.fha-hero-haslo {
    margin: 0;
    color: var(--fha-zloty);
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.14;
}
.fha-hero-podhaslo {
    margin: -14px 0 0;
    color: #fff; font-size: clamp(16px, 2vw, 19px); max-width: 46ch;
}
.fha-hero-przycisk { display: flex; }

/* ------------------------------------------------------- naglowki sekcji */

.fha-nadtytul {
    margin: 0 0 20px;
    color: var(--fha-zloty);
    font-family: 'Gotu', Georgia, serif;
    font-size: 14px; line-height: 1.8; text-transform: uppercase;
}
.fha-tytul-sekcji {
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.21;
    margin: 0 0 20px;
}
.fha-nadtytul-srodek, .fha-tytul-srodek { text-align: center; }

.fha-proza p { margin: 0 0 1em; }
.fha-proza p:last-child { margin-bottom: 0; }
.fha-proza a { text-decoration: underline; }

/* -------------------------------------------------------------- wyrozniki */

.fha-wyrozniki {
    position: relative;
    padding: 70px 0 90px;      /* 60 px odstepu + 30 px na przedzial */
    text-align: center;
    background: var(--fha-czarny); color: #fff;
}
.fha-siatka-kafelkow {
    display: grid; gap: 40px;
    grid-template-columns: repeat(4, 1fr);
    text-align: left;
}
/* Karta zaczyna sie dopiero od 20% wysokosci - gorna czesc jest przezroczysta,
   dzieki czemu zlota ikona „lezy" na tle sekcji, a nie na kafelku. */
.fha-kafelek {
    display: flex; flex-direction: column;
    padding: 30px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 20%, var(--fha-kafelek) 20%);
}
.fha-kafelek-ikona {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin-bottom: 20px;
    border-radius: 50%;
    background: var(--fha-ikona);
    color: var(--fha-czarny);
}
.fha-kafelek-ikona svg { width: 32px; height: 32px; }
.fha-kafelek h3 { font-size: 24px; line-height: 1.42; color: #fff; margin: 0 0 10px; }
.fha-kafelek p  { margin: 0; color: #fff; font-size: 15px; line-height: 1.7; font-weight: 300; }

/* ---------------------------------------------------------------- o firmie */

.fha-ofirmie { padding: 60px 0 100px; }
.fha-ofirmie-naglowek { margin-bottom: 40px; }
.fha-sygnet { max-height: 137px; width: auto; margin: 0 0 20px; display: block; }
.fha-ofirmie-wiersz {
    display: flex; align-items: center; justify-content: space-between; gap: 40px;
    flex-wrap: wrap;
}
.fha-ofirmie-wiersz .fha-tytul-sekcji { margin: 0; max-width: 45%; }

.fha-ofirmie-uklad {
    display: flex; gap: 46px; align-items: stretch;
}
.fha-ofirmie-opis {
    width: 48%; box-sizing: border-box;
    padding: 60px;
    border-radius: 10px;
    background: var(--fha-zloty);
    color: var(--fha-czarny);
    font-size: 17px; line-height: 1.8;
}
.fha-ofirmie-zdjecie {
    width: 48%; min-height: 400px;
    border-radius: 10px;
    background: #ddd center center/cover no-repeat;
}

/* --------------------------------------------------------------- wezwanie */

.fha-wezwanie {
    position: relative;
    min-height: 600px;
    display: flex; align-items: center;
    background: var(--fha-czarny) center center/cover no-repeat;
    background-attachment: fixed;
    color: #fff;
}
.fha-wezwanie::after {
    content: ''; position: absolute; inset: 0;
    background: var(--fha-czarny); opacity: .5;
}
.fha-wezwanie .fha-wnetrze { position: relative; z-index: 1; }
.fha-wezwanie-kolumna { width: 50%; }
.fha-wezwanie h2 {
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(40px, 4.5vw, 60px); line-height: 1.17;
}
.fha-wezwanie p {
    margin: 0 0 32px;
    color: #fff; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.6;
}

/* ----------------------------------------------------------------- oferta */

.fha-oferta { padding: 60px 0 30px; }
.fha-karty {
    display: flex; gap: 46px; margin-top: 20px; align-items: stretch;
}
.fha-karta {
    width: 48%;
    display: flex; flex-direction: column;
    background: none; border: 0;
}
.fha-karta-zdjecie img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    display: block; border-radius: 10px;
}
.fha-karta-tresc {
    display: flex; flex-direction: column; flex: 1;
    padding: 24px 0 0 10px;
}
.fha-karta-tresc h3 { font-size: 24px; line-height: 1.42; margin: 0; }
.fha-karta-podtytul {
    margin: 0 0 24px;
    font-family: 'Gotu', Georgia, serif;
    color: var(--fha-czarny);
    font-size: 16px; letter-spacing: 0; text-transform: none;
}
.fha-karta .fha-proza { font-size: 15px; line-height: 1.8; }
.fha-karta-przyciski {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
    margin-top: auto; padding: 28px 0 24px;
    border-bottom: 1px solid rgba(9,9,9,.15);
}

/* -------------------------------------------------------------------- FAQ */

.fha-faq { padding: 60px 0 90px; }
.fha-faq-uklad {
    display: flex; gap: 46px; align-items: flex-start;
}
.fha-faq-obok { width: 48%; }
.fha-faq-tekst { font-size: 15px; line-height: 1.8; margin: 0 0 26px; }

/* Panel z pytaniami: zloty prostokat po prawej, tak jak w Elementorze */
.fha-faq-lista {
    width: 48%; box-sizing: border-box;
    padding: 40px;
    border-radius: 10px;
    background: var(--fha-zloty);
    color: var(--fha-czarny);
}
.fha-pytanie { border-bottom: 0; padding: 0; }
.fha-pytanie + .fha-pytanie { margin-top: 6px; }
.fha-pytanie summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 16px;
    border-radius: 6px;
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: 15px; font-weight: 500; line-height: 1.6;
    color: var(--fha-czarny);
    cursor: pointer; list-style: none;
}
.fha-pytanie summary::-webkit-details-marker { display: none; }
.fha-pytanie summary::after {
    content: '+'; flex: none;
    color: var(--fha-czarny); font-size: 22px; line-height: 1;
}
.fha-pytanie[open] summary { background: rgba(255,255,255,.35); }
.fha-pytanie[open] summary::after { content: '\2212'; }
.fha-pytanie .fha-proza {
    padding: 14px 16px 22px;
    color: var(--fha-czarny); font-size: 15px; line-height: 1.8;
}

/* ----------------------------------------------------------------- stopka */

.fha-stopka { background: var(--fha-ciemny); border-top: 1px solid rgba(255,255,255,.07); }
.fha-stopka-wnetrze {
    width: min(var(--fha-szer), calc(100% - 48px));
    margin-inline: auto;
}
.fha-stopka > .fha-stopka-wnetrze {
    display: grid; gap: 40px; padding: 64px 0 48px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.fha-stopka-kolumna h2 {
    font-size: 17px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--fha-zloty); margin-bottom: 20px;
}
.fha-stopka-lista { margin: 0; padding: 0; list-style: none; }
.fha-stopka-lista li {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 12px; color: var(--fha-tekst-szary); font-size: 15px;
}
.fha-stopka-lista svg { flex: none; margin-top: 3px; color: var(--fha-zloty); }
.fha-stopka-lista a { color: var(--fha-tekst-szary); text-decoration: none; }
.fha-stopka-lista a:hover { color: var(--fha-zloty); }
.fha-stopka-odnosniki li { margin-bottom: 10px; }

.fha-stopka-dol { border-top: 1px solid rgba(255,255,255,.07); }
.fha-stopka-dol .fha-stopka-wnetrze {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
    padding: 22px 0;
    font-size: 14px; color: var(--fha-tekst-szary);
}
.fha-prawa { margin: 0; }
.fha-spolecznosci { display: flex; gap: 18px; margin: 0 auto 0 0; padding: 0; list-style: none; }
.fha-spolecznosci a { color: var(--fha-tekst-szary); text-decoration: none; }
.fha-spolecznosci a:hover { color: var(--fha-zloty); }
.fha-autor { margin: 0; }
.fha-autor a { color: var(--fha-tekst-szary); text-decoration: none; }
.fha-autor a:hover { color: var(--fha-zloty); }

/* ------------------------------------------------------------------ telefon */

@media (max-width: 1240px) {
    /* przy weszym oknie menu nie miesci sie obok logo - schodzi pod belke
       dopiero na 1080 px, wczesniej wystarczy zwezic odstepy */
    .fha-belka-wnetrze { gap: 18px; }
    .fha-nawigacja { gap: 18px; }
    .fha-menu { gap: 16px; }
    .fha-menu a { font-size: 13px; }
}

@media (max-width: 1024px) {
    .fha-siatka-kafelkow { grid-template-columns: repeat(2, 1fr); }
    .fha-hero-kolumna { width: 65%; }
    .fha-wezwanie-kolumna { width: 65%; }
    .fha-ofirmie-wiersz .fha-tytul-sekcji { max-width: 60%; }
}

@media (max-width: 900px) {
    .fha-hamburger { display: block; margin-left: auto; }

    .fha-nawigacja {
        position: fixed; inset: 98px 0 auto;
        display: none; flex-direction: column; align-items: stretch; gap: 0;
        margin: 0; padding: 12px 24px 28px;
        background: var(--fha-belka);
        border-bottom: 1px solid rgba(255,255,255,.08);
        max-height: calc(100vh - 98px); overflow-y: auto;
    }
    .fha-nawigacja.otwarte { display: flex; }

    .fha-menu { flex-direction: column; align-items: stretch; gap: 0; }
    .fha-menu li { border-bottom: 1px solid rgba(255,255,255,.06); }
    .fha-menu a { display: block; padding: 15px 0; border-bottom: 0; font-size: 15px; }

    /* koszyk i konto zostaja widoczne w belce, obok hamburgera - musza sie
       zmiescic razem z logo, wiec odstepy i logo schodza o kilka pikseli,
       a szeroki przycisk „Zamow zdjecie" chowa sie (tak samo bylo wczesniej) */
    .fha-belka-wnetrze { gap: 12px; min-height: 84px; }
    .fha-logo img { max-height: 44px; }
    .fha-belka-akcje { margin-left: 0; gap: 8px; }
    .fhalina-header-order-btn { display: none !important; }

    /* Belka ma teraz zmienną wysokość (doszedł pas z „Zamów zdjęcie"), więc menu
       nie może startować od sztywnych 84 px - liczymy je od dołu nagłówka. */
    .fha-nawigacja {
        position: absolute;
        inset: 100% 0 auto 0;
        max-height: 78vh;
    }

    /* ...a zamiast niego „Zamów zdjęcie" staje pasem POD belką - na wierzchu,
       bez wchodzenia w menu. Niezalogowanemu otwiera wybór „prywatnie / firma",
       tak samo jak przycisk z belki na komputerze. */
    .fha-belka-zamow {
        display: block;
        width: min(var(--fha-szer), calc(100% - 36px));
        margin-inline: auto;
        padding-bottom: 14px;
    }
    .fha-menu-zamow {
        display: block;
        width: 100%;
        margin: 0;
        padding: 15px 20px;
        background: var(--fha-zloty);
        color: #10100e;
        border: 0;
        border-radius: 10px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: .12em;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }
    .fha-menu-zamow:hover,
    .fha-menu-zamow:focus-visible { background: #f0c86f; color: #10100e; }
    .fha-menu-zamow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

    /* uklady dwukolumnowe skladaja sie do jednej kolumny */
    .fha-ofirmie-uklad, .fha-karty, .fha-faq-uklad { flex-direction: column; gap: 30px; }
    .fha-ofirmie-opis, .fha-ofirmie-zdjecie,
    .fha-karta, .fha-faq-obok, .fha-faq-lista { width: 100%; }
    .fha-hero-kolumna, .fha-wezwanie-kolumna { width: 100%; }
    .fha-ofirmie-wiersz .fha-tytul-sekcji { max-width: 100%; }

    .fha-karta-przyciski .fha-przycisk { flex: 1 1 100%; }
    .fha-karta-tresc { padding-left: 0; }

    /* tlo „przyklejone" na telefonie skacze przy przewijaniu */
    .fha-wezwanie { background-attachment: scroll; }
}

@media (max-width: 600px) {
    body { font-size: 16px; }

    /* Cele dotykowe w stopce mialy 26 px wysokosci - palcem trudno trafic,
       a sasiednie pozycje lezaly zbyt blisko siebie (WCAG 2.5.8 mowi o 24 px,
       zalecenie praktyczne to 44). Powiekszamy sam obszar klikalny, odstepy
       wizualne zostaja te same. */
    .fha-stopka-lista li { margin-bottom: 4px; }
    .fha-stopka-lista a,
    .fha-spolecznosci a,
    .fha-autor a {
        display: inline-block;
        min-height: 44px;
        padding: 9px 0;
        line-height: 1.5;
    }
    .fha-stopka-lista svg { margin-top: 13px; }
    .fha-wnetrze,
    .fha-belka-wnetrze,
    .fha-stopka-wnetrze { width: calc(100% - 32px); }
    .fha-hero { min-height: 700px; }
    .fha-wezwanie { min-height: 480px; }
    .fha-siatka-kafelkow { grid-template-columns: 1fr; gap: 30px; }
    .fha-kafelek { padding: 26px 22px; }
    .fha-ofirmie-opis { padding: 30px; }
    .fha-karta-tresc { padding: 22px 0 0; }
    .fha-faq-lista { padding: 24px 18px; }
    .fha-pytanie summary { padding: 12px 12px; }
    .fha-pytanie .fha-proza { padding: 12px 12px 18px; }
}

/* ------------------------------------------------------- okno powitalne */

.fha-okno {
    position: fixed; inset: 0; z-index: 900;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,.72);
}
.fha-okno[hidden] { display: none; }
.fha-okno-panel {
    position: relative;
    width: min(560px, 100%);
    padding: 48px 40px 40px;
    background: var(--fha-ciemny-2);
    border: 1px solid var(--fha-obrys);
    text-align: center;
}
.fha-okno-logo { max-height: 64px; width: auto; margin-bottom: 22px; }
.fha-okno-panel h2 { font-size: clamp(22px, 3vw, 30px); }
.fha-okno-panel p { color: var(--fha-tekst-szary); margin-bottom: 30px; }
.fha-okno-zamknij {
    position: absolute; top: 10px; right: 14px;
    background: none; border: 0; color: var(--fha-tekst-szary);
    font-size: 30px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.fha-okno-zamknij:hover { color: var(--fha-zloty); }

/* ------------------------------------------------- naglowek strony wewnetrznej */

/* =========================================================================
   PODSTRONY - uklad odtworzony po szablonach Elementora (08.09.2026)

   Wspolpraca i Strefa wiedzy mialy pas ze zdjeciem i biala tresc pod spodem,
   Kontakt byl bialy od gory do dolu, a Cenniki - jedna ciemna sekcja.
   Wartosci z pomiarow starej strony: kontener 1140, Gotu 60/70 w pasie,
   Gotu 48/58 i 32/42 w naglowkach, tekst Public Sans 17/30.6 i 15/27.
   ========================================================================= */

/* ---------------------------------------------- pas ze zdjeciem i tytulem */

.fha-naglowek-strony {
    position: relative;
    min-height: 400px;
    display: flex; align-items: center;
    background: var(--fha-ciemny-2) center center/cover no-repeat;
    color: #fff;
    text-align: center;
}
.fha-naglowek-strony .fha-wnetrze { position: relative; z-index: 1; }
.fha-naglowek-strony h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(38px, 4.6vw, 60px); line-height: 1.17;
}
.fha-naglowek-wstep {
    max-width: 62ch; margin: 18px auto 0;
    color: rgba(255,255,255,.82); font-size: 16.5px;
}

/* Naglowek bez zdjecia - Kontakt i Cenniki mialy sam tytul na tle sekcji. */
.fha-naglowek-prosty { padding: 60px 0 0; text-align: center; }
.fha-naglowek-prosty h1 {
    margin: 0;
    font-family: 'Gotu', Georgia, serif; font-weight: 400;
    font-size: clamp(30px, 3.6vw, 48px); line-height: 1.21;
}
.fha-naglowek-prosty .fha-nadtytul { margin-bottom: 20px; }

/* -------------------------------------------------------- pliki do pobrania */

/* Cenniki i katalogi: jedna ciemna sekcja, kafelki bez ramki i bez tla -
   samo zdjecie, tytul, cienka kreska i zloty przycisk. */
.fha-pobieranie {
    position: relative;
    padding: 0 0 90px;
    background: var(--fha-czarny); color: #fff;
}
.fha-pobieranie .fha-naglowek-prosty h1 { color: #fff; font-size: clamp(26px, 2.6vw, 32px); }
.fha-siatka-plikow {
    display: grid; gap: 40px; margin-top: 40px;
    grid-template-columns: repeat(3, 1fr);
}
/* rowna wysokosc kafelkow i przycisk POBIERZ w jednej linii we wszystkich -
   wymog klienta z 12.08.2026 */
.fha-plik {
    display: flex; flex-direction: column;
    background: none; border: 0;
}
.fha-plik-okladka {
    display: block; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: 10px; background: #101010;
}
.fha-plik-okladka img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fha-plik-zastepnik {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: var(--fha-obrys);
}
.fha-plik-tresc {
    display: flex; flex-direction: column; flex: 1;
    padding: 22px 0 0;
}
.fha-plik-tytul {
    font-size: 24px; line-height: 1.42; margin: 0 0 20px; color: #fff;
}
.fha-plik-stopka {
    margin-top: auto; padding-top: 22px;
    border-top: 1px solid #292929;
}
.fha-plik-przycisk { gap: 8px; }

/* Nadtytuly i akcenty na sekcjach jasnych - glebszy zloty, zeby tekst byl
   czytelny. Wyglad zostaje ten sam, zmienia sie sam odcien. */
.fha-sekcja-jasna .fha-nadtytul,
.fha-kontakt .fha-nadtytul,
.fha-wspolpraca .fha-nadtytul,
.fha-wpisy .fha-nadtytul,
.fha-naglowek-prosty .fha-nadtytul { color: var(--fha-zloty-jasnetlo); }

.fha-sekcja-jasna .fha-proza a,
.fha-wspolpraca a:not(.fha-przycisk),
.fha-kontakt a:not(.fha-przycisk) { color: var(--fha-zloty-jasnetlo); }

/* Formularz kontaktowy rysuje sie wlasnym arkuszem, zaprojektowanym pod ciemne
   tlo (jasnoszare etykiety, przezroczyste pola). Na bialej sekcji trzeba go
   przelozyc na ciemny tekst - inaczej etykiety maja kontrast 1,7. */
.fha-formularz .fhkon-tytul { color: var(--fha-zloty-jasnetlo) !important; }
.fha-formularz .fhkon-opis { color: #5a554d !important; }
.fha-formularz .fhkon-form label > span { color: #4a4640 !important; }
.fha-formularz .fhkon-form label > span b { color: var(--fha-zloty-jasnetlo) !important; }
.fha-formularz .fhkon-form input,
.fha-formularz .fhkon-form textarea {
    background: #fff !important;
    border-color: #d9d3c8 !important;
    color: #1a1a1a !important;
}
.fha-formularz .fhkon-form input::placeholder,
.fha-formularz .fhkon-form textarea::placeholder { color: #6b665d !important; }
.fha-formularz .fhkon-zgoda,
.fha-formularz .fhkon-zgoda span { color: #4a4640 !important; }
.fha-formularz .fhkon-zgoda a { color: var(--fha-zloty-jasnetlo) !important; }

/* -------------------------------------------------------------- kontakt */

.fha-kontakt {
    padding: 0 0 60px;
    background: #fff; color: var(--fha-czarny);
}
.fha-kontakt .fha-naglowek-prosty h1 { color: #292929; }
.fha-kontakt-uklad {
    display: grid; gap: 46px; margin-top: 40px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}
/* Stara strona miala po lewej „SKONTAKTUJ SIĘ" i sposoby zamawiania,
   a po prawej dane teleadresowe. */
.fha-kontakt-sposoby { order: 1; }
.fha-kontakt-dane    { order: 2; }

.fha-kontakt-dane .fha-tytul-sekcji { display: none; }
.fha-dane-lista { margin: 0; padding: 0; list-style: none; }
.fha-dane-lista li {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 22px 0;
    border-bottom: 1px solid rgba(9,9,9,.14);
}
.fha-dane-lista li:last-child { border-bottom: 0; }
.fha-dane-ikona { flex: none; color: var(--fha-zloty); line-height: 0; padding-top: 6px; }
.fha-dane-tresc { display: flex; flex-direction: column; gap: 2px; }
.fha-dane-etykieta {
    color: var(--fha-czarny);
    font-family: 'Gotu', Georgia, serif;
    font-size: 24px; line-height: 1.42; letter-spacing: 0; text-transform: none;
}
.fha-dane-tresc a { color: #8a6a1f; text-decoration: none; }
.fha-dane-tresc a:hover { text-decoration: underline; }
.fha-kontakt-zdjecie { margin-top: 30px; width: 100%; object-fit: cover; aspect-ratio: 16 / 10; }

.fha-formularz {
    padding: 20px 0 60px;
    background: #fff; color: var(--fha-czarny);
}
.fha-formularz .fha-tytul-sekcji { text-align: center; }

/* mapa na cala szerokosc, dotykajaca stopki - wymog klienta */
.fha-mapa { line-height: 0; }
.fha-mapa iframe {
    display: block; width: 100%; height: clamp(320px, 42vh, 460px);
    border: 0; filter: grayscale(1) contrast(.9) brightness(.95);
}

/* ----------------------------------------------------------- wspolpraca */

.fha-wspolpraca {
    position: relative;
    padding: 60px 0 90px;
    background: #fff; color: var(--fha-czarny);
}
.fha-wspolpraca-uklad {
    display: grid; gap: 46px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}
.fha-wspolpraca-tekst { font-size: 17px; line-height: 1.8; }
.fha-wspolpraca-przyciski { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.fha-wspolpraca-zdjecie {
    min-height: 400px; border-radius: 10px;
    background: #ddd center center/cover no-repeat;
}

/* ---------------------------------------------------------- lista wpisow */

.fha-wpisy {
    padding: 60px 0 90px;
    background: #fff; color: var(--fha-czarny);
}
.fha-siatka-wpisow {
    display: grid; gap: 40px;
    grid-template-columns: repeat(3, 1fr);
}
.fha-wpis {
    display: flex; flex-direction: column;
    background: #f8f8fa; border: 0;
}
.fha-wpis-obraz { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #ececed; }
.fha-wpis-obraz img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fha-wpis-tresc { display: flex; flex-direction: column; flex: 1; padding: 30px; }
.fha-wpis-tresc h2 { font-size: 21px; line-height: 1.5; margin: 0 0 16px; color: var(--fha-czarny); }
.fha-wpis-tresc h2 a { color: inherit; text-decoration: none; }
.fha-wpis-tresc h2 a:hover { color: #8a6a1f; }
.fha-wpis-zajawka { margin: 0 0 22px; color: var(--fha-czarny); font-size: 15px; line-height: 1.8; }
/* data stoi na dole karty, tak jak w kartach Elementora */
.fha-wpis-data {
    margin: auto 0 0; color: #adadad;
    font-size: 12px; letter-spacing: 0; text-transform: none;
}
.fha-wpis-wiecej { display: none; }
.fha-pusto { color: #5a554d; text-align: center; }

.fha-strony { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 44px; }
.fha-strony .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 14px;
    border: 1px solid rgba(9,9,9,.16);
    color: var(--fha-czarny); text-decoration: none; font-size: 14px;
}
.fha-strony .page-numbers:hover { border-color: var(--fha-zloty); color: #8a6a1f; }
.fha-strony .page-numbers.current { background: var(--fha-zloty); border-color: var(--fha-zloty); color: var(--fha-czarny); }

/* -------------------------------------------------------- pojedynczy wpis */

/* Ekran sklepowy nie narzuca ani tla, ani koloru tekstu - robia to arkusze
   WooCommerce i `41-logowanie-strona.php`. Sam odstep od belki i stopki. */
.fha-ekran-sklepu { padding: clamp(24px, 4vw, 48px) 0 var(--fha-luz); }

.fha-dokument, .fha-artykul {
    padding: var(--fha-luz) 0;
    background: var(--fha-ciemny); color: var(--fha-tekst-jasny);
}
.fha-dokument-tresc, .fha-artykul-tresc { max-width: 78ch; margin-inline: auto; }
.fha-dokument-tresc h2, .fha-artykul-tresc h2 { margin-top: 1.6em; font-size: 26px; }
.fha-dokument-tresc h3, .fha-artykul-tresc h3 { margin-top: 1.4em; font-size: 21px; }
.fha-dokument-tresc ul, .fha-dokument-tresc ol,
.fha-artykul-tresc ul, .fha-artykul-tresc ol { padding-left: 1.3em; }
.fha-dokument-tresc li, .fha-artykul-tresc li { margin-bottom: .5em; }
.fha-artykul-zdjecie { max-width: 1000px; margin: 0 auto 44px; }
.fha-artykul-zdjecie img { width: 100%; display: block; }
.fha-artykul-powrot { display: block; max-width: 78ch; margin: 46px auto 0; }

@media (max-width: 1024px) {
    .fha-kontakt-uklad,
    .fha-wspolpraca-uklad { grid-template-columns: 1fr; }
    /* Cenniki i wpisy mialy sztywne trzy kolumny - na tablecie i telefonie
       musza sie zwezic, inaczej dokument rozpycha okno. */
    .fha-siatka-plikow,
    .fha-siatka-wpisow { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .fha-wspolpraca-zdjecie { min-height: 320px; }
}

/* --------------------------------------------------- ekrany WooCommerce

   Sklep, koszyk, kasa i konto renderuje WooCommerce, wiec nie maja naszego
   kontenera - tutaj dostaja te same marginesy i oddech co reszta stron. */

.woocommerce main.fha-tresc,
.woocommerce-page main.fha-tresc {
    display: block;
    width: min(var(--fha-szer), calc(100% - 48px));
    margin-inline: auto;
    padding: clamp(36px, 5vw, 70px) 0 var(--fha-luz);
}
.woocommerce main.fha-tresc .fha-dokument,
.woocommerce-page main.fha-tresc .fha-dokument { padding: 0; }
.woocommerce main.fha-tresc .fha-wnetrze,
.woocommerce-page main.fha-tresc .fha-wnetrze { width: 100%; }

/* Ekrany sklepowe stoja na jasnym tle, wiec tekst musi byc ciemny. Bez tego
   dziedziczy jasny kolor z `body` i nagłówki („Logowanie", „Zarejestruj się")
   robia sie prawie niewidoczne na bialych kartach. Do 07.09.2026 maskowal to
   arkusz zestawu stylow Elementora - po usunieciu wtyczki blad wyszedl na wierzch. */
body.woocommerce-account,
body.woocommerce-cart,
body.woocommerce-checkout {
    color: #1a1a1a;
}
/* Złoty #e4b85f jest zrobiony pod ciemne tło - na białym daje kontrast 1,9.
   Ciemniejszy odcień dostają wyłącznie odnośniki w treści jasnych ekranów;
   belka, stopka i przycisk „Przejdź do treści" zostają przy swoich kolorach. */
body.woocommerce-account main.fha-tresc a:not(.fha-przycisk):not(.button),
body.woocommerce-cart main.fha-tresc a:not(.fha-przycisk):not(.button),
body.woocommerce-checkout main.fha-tresc a:not(.fha-przycisk):not(.button) {
    color: #8a6a1f;
}

.woocommerce-breadcrumb { color: var(--fha-tekst-szary); font-size: 14px; margin-bottom: 28px; }
.woocommerce-breadcrumb a { color: var(--fha-tekst-szary); }
.woocommerce div.product .product_title { font-size: clamp(26px, 3.2vw, 38px); }
.woocommerce div.product p.price { color: var(--fha-zloty); }

@media (max-width: 600px) {
    .woocommerce main.fha-tresc,
    .woocommerce-page main.fha-tresc { width: calc(100% - 32px); }

    /* Ta regula musi stac PO bloku 1024 px powyzej - inaczej dwie kolumny
       z tamtego bloku wygrywaja kaskade i dokument rozpycha telefon. */
    .fha-siatka-plikow,
    .fha-siatka-wpisow { grid-template-columns: 1fr; gap: 26px; }
    .fha-wpis-tresc { padding: 24px 22px; }
}