/* ==========================================================================
   FaceTime Studio — warstwa marki na szablonie Fabulux.
   CIEMNY motyw wg materialow drukowanych (ulotka A5 + cadeaubon):
     tlo    #171615   tekst #EFEEED   drugorzedny #9A9A99
     akcent #6ACFEC   panel #1E1D1C
   Zdjecia czarno-biale, jak w druku. main.css zostaje nietkniety.
   ========================================================================== */

:root,
body {
    --primary: #EFEEED;          /* naglowki i tekst wiodacy */
    --secondary: #1B1A19;        /* tlo sekcji wyrozniowych */
    --text-color: #9A9A99;       /* tekst drugorzedny */
    --accent-color: #EFEEED;     /* klasa .accent-color = jasny tekst na ciemnym */
    --brand: #6ACFEC;            /* akcent z ulotki */
    --brand-deep: #34535B;       /* ciemny turkus z ulotki */
    --ink: #171615;              /* tlo strony */
    --panel: #1E1D1C;            /* karty, inputy */
    --hairline: rgba(239, 238, 237, .12);
    /* w szablonie to jasny bez (#E7D3C5) uzywany na 16 obwodkach i liniach —
       na ciemnym tle swiecil; jedno przemapowanie zalatwia wszystkie      */
    --accent-color-2: rgba(239, 238, 237, .14);
    --accent-color-3: #171615;
    --accent-color-4: #171615;
}

/* ==========================================================================
   MOBILE FIRST
   Szablon jest zaprojektowany pod desktop: naglowki 84/54 px na sztywno,
   sekcje po 8em (128 px) padding gora i dol — na telefonie dawalo to
   ogromne puste pasy i tytuly wychodzace poza ekran. Skalujemy plynnie
   przez clamp(), wiec od 360 px do 4K rosnie to samo.
   ========================================================================== */
h1 {
    font-size: clamp(2.35rem, 8.6vw, 84px) !important;
    line-height: 1.06 !important;
}

h2 {
    font-size: clamp(1.75rem, 5.4vw, 54px) !important;
    line-height: 1.12 !important;
}

h3 {
    font-size: clamp(1.22rem, 2.6vw, 28px) !important;
    line-height: 1.25 !important;
}

h4 {
    font-size: clamp(1.06rem, 2vw, 22px) !important;
    line-height: 1.3 !important;
}

.section          { padding: clamp(3.25rem, 8vw, 8em) 1.25em !important; }
.section-py-small { padding: clamp(2.75rem, 6vw, 6em) 1.25em !important; }
.section-py-medium{ padding: clamp(3rem, 7vw, 7em) 1.25em !important; }
.section-pb-large { padding: clamp(3.25rem, 8vw, 8em) 1.25em clamp(3.75rem, 10vw, 10em) !important; }

/* Etykiety: mniej rozstrzelone na waskim ekranie, zeby nie lamaly sie na 2 linie */
.sub-heading-text {
    font-size: clamp(.72rem, 2.4vw, .85rem);
}

/* Na desktopie szablon uklada zdjecia w pary: fotografia + jej powtorka
   w ozdobnej ramce, plus mniejsze zdjecie nalozone w narozniku. Po
   zwezeniu do jednej kolumny wszystko to ustawia sie w pionie i strona
   glowna rosla do 10 400 px (13 ekranow telefonu). Na mobile zostawiamy
   po jednym zdjeciu na sekcje i chowamy same dekoracje.
   Wyjatek: "Aneta przy pracy" (about-intro__image-container) zostaje
   widoczna takze na telefonie — na zyczenie klientki.                    */
@media (max-width: 767.98px) {
    /* Karta "Chwila wytchnienia": w szablonie wisi absolutnie 230 px pod
       sekcja, a kontener zdjecia rezerwuje pod nia 200 px marginesu — na
       telefonie zostawala czarna pusta przerwa. W jednej kolumnie karta
       plynie normalnie w ukladzie, a rezerwa znika.                       */
    .card-about-intro__highlight {
        position: static !important;
        width: 100% !important;
        margin-top: 1.75rem;
    }

    /* rowne odstepy nad i pod karta: szablonowy gap flexa (50-100 px)
       dokladal sie do dolnego marginesu — zerujemy go i dajemy obu
       stronom te sama wartosc                                            */
    .about-intro__main-content {
        gap: 0 !important;
    }

    .about-intro__image-container {
        margin-top: 1.75rem !important;
    }

    .about-intro__image-decoration,
    .whychooseus-decoration-border,
    .whychooseus-decoration-paint,
    .pricing-image-decoration,
    .appointment-content-image {
        display: none !important;
    }

    /* zdjecie przy "Najczesciej wybierane zabiegi" widoczne tez na
       telefonie (tresc = jak na PC); licznik "24+" schodzi pod zdjecie
       zamiast wisiec absolutnie                                          */
    .pricing-image-container {
        height: auto;
    }

    .pricing-feature {
        position: static;
        width: 100%;
        margin-top: 1rem;
        padding: 1.5em 2em;
    }
}

@media (max-width: 575px) {
    .sub-heading-text { letter-spacing: .1em !important; }
    .btn {
        min-height: 46px;              /* wygodny cel dotyku */
        display: inline-flex;
        align-items: center;
    }
    .price-group + .price-group { margin-top: 2.5rem; }
    .gspace-5 { gap: 2rem !important; }
}

/* ==========================================================================
   CELE DOTYKU
   Zmierzone sonda na 390 px: linki menu mialy 23 px wysokosci, kropki
   karuzeli 10 px, linki w stopce 26 px. Wytyczna to min. 44 px dla
   glownych elementow i min. 24 px dla linkow w akapitach. Powiekszamy
   sam obszar klikania — uklad i wyglad zostaja bez zmian.
   ========================================================================== */
.sidebar-menu a,
.sidebar-dropdown-menu a {
    display: block;
    padding: .8rem 0 !important;
    min-height: 44px;
}

.navbar-nav .nav-link {
    padding-top: .7rem !important;
    padding-bottom: .7rem !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .25rem 0;
}

.nav-btn,
.close-btn-sidebar {
    min-width: 46px;
    min-height: 46px;
}

/* kropki karuzeli: kropka zostaje mala i okragla, obszar klikania rosnie */
.testimonial-nav-btn {
    width: 12px !important;
    height: 12px !important;
    padding: 16px !important;
    background-clip: content-box !important;
    box-sizing: content-box !important;
    border: 0 !important;
    border-radius: 50% !important;
}

/* ikona cytatu ma w szablonie 58 px czcionki — na telefonie zajmowala
   pol ekranu; skalujemy ja plynnie                                       */
.testimonial-quote-icon {
    font-size: clamp(26px, 7vw, 58px) !important;
    width: clamp(64px, 17vw, 130px) !important;
    height: clamp(64px, 17vw, 130px) !important;
}

.testimonial-btn {
    min-width: 46px;
    min-height: 46px;
}

/* linki wewnatrz akapitow: min. 24 px bez rozjezdzania sie tekstu */
p a,
.footer-description a,
.footer-contactline a,
.contact-card a,
.price-note a {
    padding-block: .3rem;
}

/* --- Podstawa ---------------------------------------------------------- */
body {
    background-color: var(--ink);
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary);
}

p {
    color: var(--text-color);
}

a {
    color: var(--primary);
}

hr {
    border-color: var(--hairline);
}

/* --- Akcenty turkusowe ------------------------------------------------- */
.sub-heading-text,
.service-subtitle,
.accent-text,
.text-primary {
    color: var(--brand) !important;
    letter-spacing: .16em;
}

.accent-line::before,
.accent-line::after,
.sub-heading-line::before,
.sub-heading-line::after,
.sub-heading-double::before,
.sub-heading-double::after {
    background-color: var(--brand) !important;
}

/* Kwadratowe ikonki listy zalet: cyan z ciemnym znakiem (jasne tlo szablonu
   dawalo cyan na bialym = nic nie bylo widac) */
.chooseus-icon {
    background-color: var(--brand) !important;
    color: var(--ink) !important;
}

.service-icon,
.icon-container i,
.contact-icon {
    color: var(--brand) !important;
}

/* w kartach kontaktowych ikona jest sama, bez kwadratu */
.contact-card .chooseus-icon {
    background-color: transparent !important;
    color: var(--brand) !important;
}

a:hover,
.nav-link:hover,
.dropdown-item:hover,
.sidebar-menu a:hover,
.footer-menu a:hover,
.footer-link:hover {
    color: var(--brand) !important;
}

/* --- Przyciski: jasny cyan z ciemnym tekstem, jak pas na ulotce -------- */
.btn-primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--ink) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--ink) !important;
}

.btn-ghost,
.btn-secondary {
    background-color: transparent !important;
    border: 1px solid var(--hairline) !important;
    color: var(--primary) !important;
}

/* --- Nawigacja: header przyklejony do gory ----------------------------
   Szablon ma header position:relative, wiec odjezdzal ze scrollem i na
   telefonie trzeba bylo wracac na gore po menu. Sticky (nie fixed), wiec
   nie wypada z ukladu i nie trzeba kompensowac wysokosci.
   z-index 900: nad trescia, ale pod panelem bocznym (1000).             */
/* `fixed`, nie `sticky`: przy sticky naglowek zostaje w ukladzie strony,
   wiec jego zwezanie sie przy scrollu przesuwalo cala tresc o 60 px
   (desktop) i 38 px (telefon) — przy powrocie na gore bylo widac skok.
   Fixed jest poza ukladem, a miejsce rezerwuje stale wypelnienie <body>
   rowne wysokosci naglowka w stanie poczatkowym.                         */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background-color: rgba(23, 22, 21, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: box-shadow .25s ease, background-color .25s ease;
}

body {
    padding-top: 97px;            /* = wysokosc naglowka na starcie (telefon) */
}

@media (min-width: 992px) {
    body {
        padding-top: 129px;       /* = wysokosc naglowka na starcie (desktop) */
    }
}

header.is-scrolled {
    background-color: rgba(23, 22, 21, .97);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}

/* po przewinieciu header lekko sie splaszcza */
header.is-scrolled .navbar {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

header.is-scrolled .logo-container.header-logo img,
header.is-scrolled .navbar-brand img {
    height: 38px;                 /* po przewinieciu male */
}

@media (min-width: 992px) {
    header.is-scrolled .logo-container.header-logo img,
    header.is-scrolled .navbar-brand img {
        height: 48px;             /* po przewinieciu male (desktop) */
    }
}

/* linki wewnetrzne nie chowaja sie pod przyklejonym headerem */
html {
    scroll-padding-top: 88px;     /* naglowek po zwezeniu (69 px) + zapas */
    scroll-behavior: smooth;
}

.navbar {
    background-color: transparent !important;
    border-bottom: 1px solid var(--hairline);
    transition: padding .3s ease;
}

/* Tresc naglowka trzyma te sama linie co reszta strony (hero-container),
   zamiast rozjezdzac sie do krawedzi ekranu.                              */
.navbar .container-fluid {
    max-width: 1340px;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Rowne "skrzydla": logo i przycisk dostaja te sama elastyczna szerokosc,
   wiec menu laduje dokladnie na srodku (szablon dawal CTA 20%, logo auto —
   menu wisialo w lewo od srodka).                                          */
@media (min-width: 992px) {
    .navbar .container-fluid > .logo-container.header-logo,
    .navbar .container-fluid > .navbar-cta-container {
        flex: 1 1 0;
        width: auto !important;
    }
    .navbar-nav {
        gap: .35rem;
    }
}

.navbar-brand img,
.logo-container.header-logo img {
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
}

.nav-link {
    background-color: transparent !important;
    color: var(--primary) !important;
    letter-spacing: .08em;
}

/* Numer telefonu nigdy nie lamie sie w polowie linii — dotyczy linkow
   tel:/wa.me (formularz wizyt, stopka, sidebar) i numeru w hero.          */
a[href^="tel:"],
a[href^="https://wa.me"],
.home-contact-container p {
    white-space: nowrap;
}

/* blok "Umow wizyte" w hero jest linkiem-kotwica do formularza wizyt na
   dole strony — bez podkreslenia, kolory jak przy zwyklym tekscie */
a.home-contact-container {
    text-decoration: none;
    color: inherit;
}

a.home-contact-container h6 {
    color: inherit;
}

/* kotwica ma zatrzymac sie pod stalym naglowkiem, plynny scroll */
html {
    scroll-behavior: smooth;
}

#umow-wizyte {
    scroll-margin-top: 6rem;
}

/* aktywna pozycja: cienka linia pod tekstem zamiast ciezkiego prostokata */
.navbar-nav .nav-link {
    position: relative;
}

.navbar-nav .nav-link.active {
    background-color: transparent !important;
    color: var(--brand) !important;
}

.navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 1px;
    height: 2px;
    background: var(--brand);
}

.nav-btn,
.nav-btn:focus,
.close-btn-sidebar,
.close-btn-sidebar:hover {
    background-color: transparent !important;
    color: var(--primary) !important;
}

.sidebar {
    background: var(--ink) !important;
}

/* ==========================================================================
   CTA NA TELEFONIE
   Szablon ukrywa przycisk z naglowka ponizej 992 px (display:none), a menu
   boczne ma same linki — na telefonie nie bylo ani jednego wezwania do
   dzialania. Dokladamy dwa skroty przy hamburgerze i blok w menu.
   ========================================================================== */
.mobile-cta {
    display: none;                /* na desktopie zbedne — jest przycisk Contact */
}

@media (max-width: 991.98px) {
    .mobile-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin-right: .5rem;
        border-radius: 50%;
        background-color: var(--brand);
        color: var(--ink) !important;
        font-size: 17px;
        text-decoration: none;
        transition: background-color .2s ease;
    }
    .mobile-cta--wa {
        background-color: transparent;
        border: 1px solid var(--brand);
        color: var(--brand) !important;
    }
    .mobile-cta:active {
        background-color: var(--primary);
    }
    .nav-link-wrapper {
        display: flex;
        align-items: center;
    }
}

.sidebar-cta {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.5rem 1.25rem 2rem;
    margin-top: auto;
    border-top: 1px solid var(--hairline);
}

.sidebar-cta .btn-primary {
    justify-content: center;
    margin-bottom: .6rem;
}

.sidebar-cta__line {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    color: var(--primary) !important;
    text-decoration: none;
    font-size: .95rem;
    text-transform: none;         /* adres e-mail czytelniej bez kapitalikow */
    letter-spacing: .01em;
}

/* --- Popup "przed i po" na stronie cennika ------------------------------
   Ten sam komponent suwaka co na stronie glownej, w modalu Bootstrapa
   przemalowanym na ciemna palete strony.                                 */
.przedpo-modal {
    background: var(--panel);
    color: var(--primary);
    border: 1px solid var(--hairline);
    border-radius: 0;             /* spojnie z resztą strony: ostre krawedzie */
}

.przedpo-modal .modal-header {
    border-bottom: 1px solid var(--hairline);
}

.przedpo-modal__opis {
    font-size: .92rem;
    opacity: .85;
}

.przedpo-modal .vgl-grid {
    margin-top: 1.25rem;
}

.przedpo-modal .modal-body > .vgl {
    margin-top: 1rem;
}

/* przycisk "Zobacz przed i po" w rozwinietym opisie zabiegu */
.ft-acc__przedpo {
    margin-top: .9rem;
}

.ft-acc__przedpo .przedpo-btn {
    font-size: .78rem;
    padding: .5rem 1.1rem;
}

/* galeria zabiegu: miniatury w opisie + zdjecie w lightboksie */
.ft-acc__media {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
}

.ft-acc__media-thumb {
    width: 92px;
    height: 92px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid var(--hairline);
}

/* --- Podstrony zabiegow (zabiegi/<slug>.html z generatora) ------------------
   Uklad: tekst (72ch) + przyklejona karta z cena/galeria/CTA po prawej.     */
.ft-acc__more { margin: .9rem 0 0; font-size: .92rem; }
.ft-acc__more a { color: var(--brand); text-decoration: none; letter-spacing: .04em; }
.ft-acc__more a:hover { text-decoration: underline; }

/* okruszki: separator "›" jest ::before kolejnego elementu, wiec przy
   zawijaniu na telefonie wedruje razem z nim, a nie zostaje sam na koncu  */
.zabieg-okruszki { display: block; margin: 0 0 2rem; font-size: .78rem; line-height: 1.9; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.zabieg-okruszki > * { display: inline; }
.zabieg-okruszki > * + *::before { content: "›"; margin: 0 .55em; color: rgba(255, 255, 255, .4); }
.zabieg-okruszki a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.zabieg-okruszki a:hover { color: var(--brand); }

.zabieg-uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 991.98px) { .zabieg-bok { order: -1; } }   /* na telefonie cena i CTA przed tekstem */
@media (min-width: 992px) {
    .zabieg-uklad { grid-template-columns: minmax(0, 1fr) 340px; gap: 4rem; }
    .zabieg-bok { position: sticky; top: 6rem; }
}

.zabieg-tresc { max-width: 72ch; font-size: clamp(.98rem, 1.5vw, 1.05rem); line-height: 1.85; }
.zabieg-tresc p { margin: 0 0 1.15em; }
.zabieg-tresc h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 2.2rem 0 .9rem; color: var(--primary); }
.zabieg-tresc h3 { font-size: 1.1rem; margin: 1.8rem 0 .7rem; color: var(--primary); }
.zabieg-tresc > :first-child { margin-top: 0; }
.zabieg-tresc ul { list-style: none; padding: 0; margin: 0 0 1.4em; }
.zabieg-tresc li { position: relative; padding-left: 1.5em; margin-bottom: .45em; }
.zabieg-tresc li::before { content: ""; position: absolute; left: 0; top: .8em; width: .6em; height: 1px; background: var(--brand); }

.zabieg-bok__karta { border: 1px solid var(--hairline); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
.zabieg-bok__tytul { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin: 0; }
.zabieg-cennik__lista { list-style: none; margin: 0; padding: 0; }
/* dluga nazwa (np. "Presoterapia — drenaż limfatyczny") + szeroka cena:
   cena schodzi pod nazwe, do prawej, zamiast lamac nazwe na 3 linie      */
.zabieg-cennik__lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--hairline); }
.zabieg-cennik__nazwa { flex: 1 1 auto; }
.zabieg-cennik__meta { margin-left: auto; }
.zabieg-cennik__lista li:last-child { border-bottom: 0; }
.zabieg-cennik__meta { white-space: nowrap; color: var(--brand); }
.zabieg-bok__link { color: rgba(255, 255, 255, .75); text-decoration: none; font-size: .92rem; }
.zabieg-bok__link:hover { color: var(--brand); }
/* galeria w karcie: 3 rowne kwadraty na szerokosc karty (zamiast 92px miniatur) */
.zabieg-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .5rem; margin-top: 0; }
.zabieg-galeria .ft-acc__media-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.zabieg-bok__cta { width: 100%; text-align: center; }

.zabieg-inne { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--hairline); font-size: .92rem; }
.zabieg-inne__etykieta { color: rgba(255, 255, 255, .5); margin-right: .4rem; }
.zabieg-inne a { border: 1px solid var(--hairline); padding: .35rem .8rem; color: inherit; text-decoration: none; }
.zabieg-inne a:hover { border-color: var(--brand); color: var(--brand); }

/* stopka na waskim telefonie: 4 linki w jednej linii (KONTAKT spadal sam do drugiej) */
@media (max-width: 480px) {
    footer .footer-link { margin: 0 !important; padding: .5rem .7rem !important; }   /* min-height 44px zostaje — cel dotyku bez zmian */
}

.galeria-zdjecie {
    max-height: 70vh;
    object-fit: contain;
}

/* --- Przyklejony pasek kontaktu na telefonie (WhatsApp + e-mail) -------
   WhatsApp wyniesiony z naglowka na staly dolny pasek; obok e-mail.
   Na desktopie pasek nie wystepuje (kontakt jest w stopce i naglowku).   */
.contact-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;                 /* nad trescia (header 900), pod sidebarem (1000) */
    display: none;
    background: rgba(23, 22, 21, .97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--hairline);
    padding-bottom: env(safe-area-inset-bottom);
}

.contact-dock__btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem .5rem;
    color: var(--primary) !important;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    min-width: 0;
}

.contact-dock__btn + .contact-dock__btn {
    border-left: 1px solid var(--hairline);
}

.contact-dock__btn i {
    color: var(--brand);
    font-size: 1.15rem;
}

@media (max-width: 991.98px) {
    .contact-dock { display: flex; }
    body { padding-bottom: calc(3.2rem + env(safe-area-inset-bottom)); }
}

.sidebar-cta__line i {
    width: 18px;
    text-align: center;
    color: var(--brand);
}

.sidebar-cta__line:hover {
    color: var(--brand) !important;
}

/* panel boczny jako kolumna, zeby CTA wypadlo na dole */
.sidebar {
    display: flex;
    flex-direction: column;
}

.sidebar-menu li,
.sidebar-menu li.active > a {
    background-color: transparent !important;
}

.sidebar-menu a {
    color: var(--primary) !important;
}

/* Logo (wersja biala jest podpieta w HTML).
   Szablon nadaje logo procentowa szerokosc (47% / 80% na mobile) — razem z
   ograniczeniem wysokosci znieksztalcalo to proporcje. Wiazemy wysokosc,
   szerokosc liczy sie sama.                                                */
.logo-container.header-logo {
    width: auto !important;
}

.logo-container.header-logo img,
.navbar-brand img,
.sidebar-header .logo img {
    width: auto !important;
    max-width: 100% !important;
    height: 64px;                 /* na starcie duze */
    object-fit: contain;
}

@media (min-width: 992px) {
    .logo-container.header-logo img,
    .navbar-brand img {
        height: 96px;             /* na starcie duze (desktop) */
    }
}

.footer-logo img,
footer .logo img,
footer .image-container img {
    max-height: 76px;
    width: auto;
}

/* --- Elementy malowane w szablonie kolorem --primary -------------------
   W jasnym szablonie --primary bylo ciemnym brazem uzywanym jako TLO
   (licznik, listy ikon, pasy banerow). Po przejsciu na ciemny motyw
   --primary jest jasny, wiec te bloki zrobily sie biale z niewidocznym
   tekstem. Nadajemy im tlo panelu.                                       */
.pricing-feature,
.about-benefits__icon-list,
.card-blog-recent,
.bg-primary-accent,
.accordion .accordion-button:not(.collapsed) {
    background-color: var(--panel) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--text-color) !important;
}

.pricing-feature__number,
.pricing-feature__symbol {
    color: var(--brand) !important;
}

.pricing-feature__title,
.about-benefits__icon-list h3,
.about-benefits__icon-list h4,
.accordion .accordion-button:not(.collapsed) {
    color: var(--primary) !important;
}

/* pasy z fotografia: kolor awaryjny pod zdjeciem tez musi byc ciemny */
.banner-inner,
.banner-contact,
.banner-notfound,
.testimonial-banner,
.footer-content-banner,
.banner-appointment-cta {
    background-color: var(--ink) !important;
}

.btn-close {
    background-color: transparent !important;
    color: var(--primary) !important;
}

/* --- Sekcja "Umow wizyte" --------------------------------------------- */
/* Szablon rozciagal ja na cala szerokosc ekranu, a reszta tresci trzyma
   sie 1340px (.hero-container) — zawezamy tak samo. Ogromny prawy padding
   formularza (18em) byl liczony pod pelna szerokosc, w wezszym pudle
   wystarczy skromniejszy.                                                */
.appointment-content-container {
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
}

/* wlasne zdjecie zamiast szablonowego dummy (to samo co stare hero);
   Aneta z usmiechem przy urzadzeniu — zaproszenie do umowienia wizyty */
.appointment-content-image {
    background-image: url('../images/umow-wizyte.jpg?v=82d6a63c') !important;
}

@media (min-width: 992px) {
    .appointment-content-form {
        padding: 0 6em 6em 0;
    }
}

/* --- Powierzchnie: karty, inputy, alerty ------------------------------ */
.card,
.service-description-card,
.card-contact,
.contact-card,
.success,
.error {
    background-color: var(--panel) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--text-color);
}

.contact-card a,
.card a {
    color: var(--primary);
}

.form input,
.form textarea,
.form .dropdown-select,
.form .dropdown-list,
.form .dropdown-option,
.dd-multi__option.active {
    background-color: var(--panel) !important;
    border-color: var(--hairline) !important;
    color: var(--primary) !important;
}

.form input::placeholder,
.form textarea::placeholder {
    color: #6E6D6C;
}

.form label {
    color: var(--brand);
    letter-spacing: .12em;
}

/* Sekcje z jasnym tlem w szablonie -> ciemny panel */
.about-intro,
.whychooseus-banner,
.testimonial-banner.testimonial-light-banner,
.bg-secondary-accent {
    background-color: var(--secondary) !important;
}

.whychooseus-banner {
    background-image: none !important;
}

.whychooseus-banner::before {
    display: none !important;
}

/* Ikonka telefonu w hero: cyan, jak akcent w druku */
.home-contact-container .contact-home-icon {
    background-color: var(--brand) !important;
    color: var(--ink) !important;
}

/* Karta wyrozniona: cyan z ciemnym tekstem — odpowiednik pasa z ulotki */
.card-about-intro__highlight {
    background-color: var(--brand) !important;
    border: 0 !important;
}

.card-about-intro__highlight h3,
.card-about-intro__highlight p,
.card-about-intro__highlight .accent-color {
    color: var(--ink) !important;
}

/* --- Zdjecia w kolorze -------------------------------------------------
   Wczesniej wszystko szlo przez grayscale, bo w slotach byl stock i chcielismy
   spojnosci z drukiem. Teraz sa realne zdjecia klientki — kolory zostaja,
   ujednolicenie (lekko mniej nasycenia + kontrast) jest wypieczone w plikach
   przez przygotuj-zdjecia.sh, wiec CSS nie ingeruje.                       */
.image-container img,
.card-blog img,
.team-content-container img {
    filter: none;
}

/* --- Zdjecia pod tekstem: precz ---------------------------------------
   Szablon podklada fotografie pod kolumny z tekstem (about-intro,
   about-benefits, about-experience, blog). Tekst byl nieczytelny —
   zdjecia zostaja tylko w dedykowanych slotach obok.                     */
.about-intro__content-container,
.about-benefits__content-container,
.about-experience__content-container,
.blog-section-container,
.blog-content-title,
.appointment-content-description {
    background-image: none !important;
}

/* Zespol: Aneta przy pracy (sesja 2026-08). Zdjecie jest pionowe, a karta
   pozioma — punkt kadrowania u gory, zeby twarz nie wypadala z kadru.    */
.team-founder-hair-style {
    background-image: url('../images/ft-aneta.jpg?v=173c439f') !important;
    background-position: center 18% !important;
}

.team-content-container {
    min-height: 420px;
    justify-content: flex-end;
}

/* Nakladka szablonu to gradient do var(--primary) — po przejsciu na ciemny
   motyw ta zmienna jest jasna, wiec dol kafla robil sie bialy i zjadal
   zdjecie. Przyciemniamy tylko pod podpis.                               */
.team-content-container::before {
    background-image: linear-gradient(180deg,
        rgba(23, 22, 21, 0) 0%,
        rgba(23, 22, 21, .12) 55%,
        rgba(23, 22, 21, .80) 100%) !important;
    opacity: 1 !important;
}

/* Nazwisko ma w szablonie tlo --accent-color i tekst --primary. W ciemnym
   motywie oba sa jasne, wiec wychodzil bialy pasek z niewidocznym tekstem.
   Ramka `.content-spacer` (400 px wysokosci) tez byla jasna.              */
.team-name {
    background-color: rgba(23, 22, 21, .72) !important;
    color: var(--primary) !important;
    padding: .7rem .5rem !important;
    margin-bottom: 0;
    font-size: 1.22rem !important;
}

/* Szablon rysuje tu ozdobna ramke w kafelku — na portrecie przecinala
   twarz, wiec ja zdejmujemy; element zostaje tylko jako rozpieracz.      */
.team-name-container .content-spacer {
    border: 0 !important;
    height: auto !important;
    flex: 1 1 auto;
    min-height: 260px;
}

.team-details {
    background-color: rgba(23, 22, 21, .72);
    color: var(--brand) !important;
    letter-spacing: .08em;
    margin: 0 !important;
    padding: 0 .5rem .7rem !important;
    width: 100%;
}

/* --- Kafle zabiegow: zdjecie dopasowane do kategorii ------------------ */
.service-container--cinematic-makeup { background-image: url('../images/ft-gezicht.jpg?v=b12f0525') !important; }
.service-container--fashion-makeup   { background-image: url('../images/ft-body.jpg?v=027156d0') !important; }
.service-container--bridal-makeup    { background-image: url('../images/ft-brows.jpg') !important; }
.service-container--hair-style       { background-image: url('../images/ft-massage.jpg') !important; }

.service-container::before {
    background-image: linear-gradient(180deg,
        rgba(23, 22, 21, .15) 0%,
        rgba(23, 22, 21, .70) 100%) !important;
    opacity: 1 !important;
}

.service-container {
    background-position: center !important;
    background-size: cover !important;
    border-color: var(--hairline) !important;
}

.service-description-card {
    min-height: 118px;
    justify-content: center;
}

.service-title {
    font-size: 1.18rem;
    line-height: 1.35;
    /* Szablon dziedziczy word-wrap:break-word, wiec dlugie nazwy kategorii
       lamaly sie w srodku wyrazu ("Gezicht|sbehan|delinge|n"). Lamiemy tylko
       na granicy slow, a w ostatecznosci z myslnikiem.                     */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
}

/* Szablon daje nazwom kategorii text-transform: capitalize — po angielsku
   uchodzi, ale po polsku i niderlandzku wychodzi "Zabiegi Na Cialo" albo
   "Brwi I Rzesy". Zostawiamy zapis taki, jaki jest w tresci.             */
.service-description-card .service-title {
    text-transform: none;
}

/* Kafel kategorii: karta z napisem ma sie rozciagnac na szerokosc kafla
   (minus oddech), zamiast zwezac sie do stalej szerokosci tekstu.        */
.service-description-card {
    width: 100%;
    padding: 1.4em 1.2em !important;
}

/* Waskie okno na PC (992-1200 px): cztery kolumny zostawiaja na napis
   ok. 150 px, wiec zmniejszamy go plynnie zamiast lamac wyrazy.          */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .service-title {
        font-size: clamp(.86rem, 1.55vw, 1.1rem) !important;
    }
    .service-description-card {
        padding: 1em .8em !important;
    }
}

/* Na telefonie szablon daje 1 kafel w rzedzie i 450 px zdjecia — cztery
   kategorie to bylo 2,5 tys. px przewijania. Dwie kolumny od 480 px
   i nizsze kafle skracaja to o dwie trzecie.                             */
@media (max-width: 767.98px) {
    .service-container .service-content-spacer {
        height: 190px !important;
    }
    .service-container {
        padding: 1.1em !important;
    }
    .service-description-card {
        min-height: 92px;
        padding: .85rem !important;
    }
    .service-title {
        font-size: 1.02rem;
    }
    .service-subtitle {
        font-size: .7rem !important;
    }
}

/* Siatka kafli: `1fr` nie zwezy sie ponizej szerokosci tresci, wiec przy
   480 px kolumny wychodzily 270 + 208 px i strona wylewala sie w bok o
   39 px. `minmax(0, 1fr)` pozwala kolumnom sie scisnac.                  */
.service-content-container {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (min-width: 480px) and (max-width: 767.98px) {
    .service-content-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 479.98px) {
    .service-content-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .service-content-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Ukryty input listy wielokrotnej (pole "Behandeling") jest pozycjonowany
   absolutnie bez ograniczenia szerokosci — przy 768 px wystawal 17 px
   poza ekran i strona dawala sie przesuwac w bok.                        */
.dd-multi__input {
    max-width: 100%;
    width: 100%;
    left: 0;
}

.dropdown-container.dd-multi {
    position: relative;
    max-width: 100%;
}

/* Karuzela opinii: slajdy leza obok siebie i wystawaly poza ekran
   (376 px przy widoku 360 px). Przycinamy do szerokosci kontenera.       */
.testimonial-slider {
    overflow: hidden;
    max-width: 100%;
}

/* Bezpiecznik na poziome wylewanie (resztki po karuzeli przy 320 px).
   `clip` zamiast `hidden`, bo `overflow:hidden` na przodku psuje
   position: sticky w naglowku. Header jest poza <main>, wiec bezpieczny. */
main {
    overflow-x: clip;
}

.testimonial-content-container,
.testimonial-slider-wrapper {
    max-width: 100%;
}

/* Turkusowa karta jest w szablonie pozycjonowana absolutnie nad zdjeciem.
   Na mobile zdjecie obok jest ukryte, wiec karta wystawala 178 px w dol,
   na kolejna sekcje. Na waskich ekranach wraca do normalnego przeplywu.  */
@media (max-width: 767.98px) {
    .card-about-intro__highlight {
        position: static !important;
        width: 100% !important;
        margin-top: 1.25rem;
    }
}

/* ==========================================================================
   LZEJSZE ZDJECIA NA TELEFON
   Szablon serwuje jeden plik na wszystkie ekrany — telefon ciagnal hero
   1920x900 (111 kB) i kafle 700x900. Nizej te same kadry w rozmiarach pod
   telefon; przy tej szerokosci roznicy nie widac, a transfer spada o polowe.
   ========================================================================== */
@media (max-width: 767.98px) {
    .banner-home {
        background-image: url('../images/hero-sm.jpg') !important;
    }
    .banner-inner,
    .banner-contact,
    .banner-notfound,
    .testimonial-banner,
    .banner-appointment-cta,
    .appointment-header-container,
    .footer-content-banner {
        background-image: url('../images/banner-sm.jpg') !important;
    }
    .service-container--cinematic-makeup { background-image: url('../images/ft-gezicht-sm.jpg?v=85a25110') !important; }
    .service-container--fashion-makeup   { background-image: url('../images/ft-body-sm.jpg?v=216068c5') !important; }
    .service-container--bridal-makeup    { background-image: url('../images/ft-brows-sm.jpg') !important; }
    .service-container--hair-style       { background-image: url('../images/ft-massage-sm.jpg') !important; }
    .team-founder-hair-style             { background-image: url('../images/ft-aneta-sm.jpg?v=b894f0a1') !important; }
}

/* --- Hero: film w tle -------------------------------------------------
   Dwa montaze z sesji zabiegowej: hero-d.mp4 (poziomy, desktop) oraz
   hero-m.mp4 (pionowy, telefon i pionowe okna) — dobor robi skrypt przy
   <video> w index.html. Zdjecie-poster leci pierwsze, film dopiero gdy
   sie wczyta — bez migania. Bez dzwieku, w petli, inline (iOS).          */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    z-index: -2;
    pointer-events: none;
}

/* Tekst hero siedzi po lewej — punkt kadrowania przesuniety lekko w prawo
   i przyciemniona lewa strona, zeby haslo nie lezalo na twarzy.           */
@media (min-width: 992px) {
    .hero-video {
        object-position: 62% 50%;
    }
    .banner-home::after {
        background:
            linear-gradient(to right,
                rgba(23, 22, 21, .92) 0%,
                rgba(23, 22, 21, .74) 38%,
                rgba(23, 22, 21, .30) 68%,
                rgba(23, 22, 21, .45) 100%),
            linear-gradient(to top,
                rgba(23, 22, 21, .55) 0%,
                rgba(23, 22, 21, .12) 45%,
                rgba(23, 22, 21, .35) 100%);
    }
}

/* kto wylaczyl animacje w systemie, dostaje sam kadr */
@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
    .banner-home {
        background-image: url('../images/hero-sm.jpg');
    }
}

/* --- Hero ------------------------------------------------------------- */
.banner-home::before {
    display: none;
}

.banner-home::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
        rgba(23, 22, 21, .92) 0%,
        rgba(23, 22, 21, .72) 42%,
        rgba(23, 22, 21, .45) 100%);
}

.banner-home .home-content-description {
    max-width: 46ch;
}

/* --- Hero na telefonie: jeden pelny ekran ------------------------------
   Cala sekcja (haslo, opis, "Zobacz zabiegi" i kontakt "Umow wizyte") ma
   miescic sie w jednym ekranie telefonu razem z filmem: wysokosc = okno
   minus staly naglowek (97px) i dolny pasek kontaktu (~52px). Drugi
   akapit opisu chowamy — ta tresc wraca w sekcjach nizej; odstepy i h1
   ciasniejsze, zeby zmiescic sie tez na niskich ekranach (iPhone SE).    */
@media (max-width: 767.98px) {
    .banner-home {
        min-height: calc(100vh - 97px - 52px);
        min-height: calc(100svh - 97px - 52px);
        padding-top: 1.5em;
        padding-bottom: 2.5em;
    }
    .banner-home h1 {
        font-size: 38px;
    }
    .banner-home-content {
        gap: 14px;
    }
    .banner-home .home-content-description + .home-content-description {
        display: none;
    }
}

/* --- Baner podstrony -------------------------------------------------- */
.banner-inner,
.banner-contact,
.banner-notfound {
    position: relative;
    z-index: 1;
}

.banner-inner::after,
.banner-contact::after,
.banner-notfound::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(23, 22, 21, .78);
}

/* Baner podstrony. Szablon daje kontenerowi max-width 57% i overflow:hidden,
   wiec dlugie tytuly byly UCINANE po obu stronach zamiast sie zawijac —
   widac to bylo na "EMS — elektrostimulatie" przy 992 px. Poszerzamy pole,
   pozwalamy lamac dlugie slowa i zdejmujemy przycinanie.                  */
.banner-inner-container {
    max-width: min(100%, 900px) !important;
    overflow: visible !important;
}

.banner-inner-title {
    letter-spacing: .06em;
    overflow-wrap: anywhere;
    hyphens: auto;
    max-width: 100%;
}

.banner-inner-excerpt {
    width: auto !important;
    max-width: 46ch;
}

/* --- Pasy ze zdjeciem i bialym tekstem -------------------------------- */
.testimonial-banner,
.banner-appointment-cta,
.appointment-header-container,
.footer-content-banner {
    position: relative;
    z-index: 1;
}

.testimonial-banner::after,
.banner-appointment-cta::after,
.appointment-header-container::after,
.footer-content-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(23, 22, 21, .84);
}

/* Stopka jest najgestszym miejscem na stronie (adres, telefon, menu, ikony)
   i lezy na ruchliwym zdjeciu z jasnym aparatem po prawej. Mocniejsza
   przyslona + delikatne przyciemnienie ku dolowi, zeby tekst byl czytelny
   az do paska z prawami autorskimi.                                      */
.footer-content-banner::after {
    background: linear-gradient(180deg, rgba(23, 22, 21, .88) 0%, rgba(23, 22, 21, .94) 100%);
}

/* Pas "Umow wizyte" mial w prawym gornym rogu szablonowy kafel ze stockowymi
   rozami (dummy-img-400x400) — usuniety, zostaje samo tlo.                */
.appointment-header-container::before {
    display: none !important;
}

/* Baner "Bezplatna konsultacja": szablon rysuje po lewej pionowa kreske,
   ktora miala oddzielac kolumne z animacja ladowania. Tej kolumny u nas
   nie ma, wiec kreska wisiala sama przy krawedzi.                         */
.appointment-cta-content {
    border-left: 0 !important;
}

/* --- Cennik ----------------------------------------------------------- */
.price-group + .price-group {
    margin-top: 3.5rem;
}

.price-group h2 {
    margin-bottom: 1.25rem;
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--hairline);
}

.price-row:last-child { border-bottom: 0; }

.price-row__body { flex: 1 1 auto; }

.price-row__name {
    font-family: var(--font-family-heading);
    font-size: 1.22rem;
    color: var(--primary);
    margin: 0 0 .3rem;
}

.price-row__desc {
    font-size: .95rem;
    color: var(--text-color);
    margin: 0;
    line-height: 1.6;
}

.price-row__meta {
    flex: 0 0 auto;
    min-width: 5.5rem;
    text-align: right;
    white-space: nowrap;
}

.price-row__time {
    display: block;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6E6D6C;
}

.price-row__price {
    font-family: var(--font-family-heading);
    font-size: 1.35rem;
    color: var(--brand);
}

.price-badge {
    display: inline-block;
    background: var(--brand);
    color: var(--ink);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .18rem .6rem;
    border-radius: 999px;
    margin-left: .5rem;
    vertical-align: middle;
}

.price-note {
    background: var(--panel);
    border-left: 3px solid var(--brand);
    padding: 1.25rem 1.5rem;
    color: var(--text-color);
    font-size: .95rem;
    line-height: 1.7;
}

.price-note strong {
    color: var(--primary);
}

@media (max-width: 575px) {
    .price-row__name { font-size: 1.1rem; }
    .price-row__price { font-size: 1.2rem; }
    .price-row { gap: .75rem; }
}

/* ==========================================================================
   BEHANDELINGEN & PRIJZEN — jedna strona zamiast dwoch
   Kazda kategoria: pas ze zdjeciem + opis + jej cennik. Nazwy zabiegow
   wystepuja raz (wczesniej byly i w pigulkach, i w cenniku).
   ========================================================================== */

/* Pasek skrotow do kategorii */
.cat-nav {
    border-bottom: 1px solid var(--hairline);
    background-color: var(--secondary);
}

.cat-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1.75rem;
    list-style: none;
    margin: 0;
    padding: .35rem 0;
}

.cat-nav__list a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: .5rem .25rem;
    color: var(--text-color);
    text-decoration: none;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.cat-nav__list a:hover {
    color: var(--brand) !important;
    border-bottom-color: var(--brand);
}

/* Na telefonie cztery nazwy nie mieszcza sie w rzedzie i lamaly sie na trzy
   linie — zamiast tego jeden pasek przewijany w poziomie.                 */
@media (max-width: 767.98px) {
    .cat-nav__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0 1.4rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .cat-nav__list::-webkit-scrollbar { display: none; }
    .cat-nav__list li { flex: 0 0 auto; scroll-snap-align: start; }
    .cat-nav__list a { white-space: nowrap; font-size: .74rem; }
}

/* Pas ze zdjeciem kategorii */
.cat-band {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(200px, 34vw, 340px);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid var(--hairline);
    overflow: hidden;
}

.cat-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(23, 22, 21, .25) 0%,
        rgba(23, 22, 21, .55) 55%,
        rgba(23, 22, 21, .90) 100%);
}

.cat-band__inner {
    position: relative;
    z-index: 1;
}

/* Mobilne warianty pasow kategorii wstrzykuje generator (bandStyle w
   tools/generuj.js) z pola afbeelding_sm w data/behandelingen.json.      */

.cat-band__count {
    display: block;
    color: var(--brand);
    font-size: clamp(.7rem, 2.2vw, .82rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: .4rem;
}

.cat-band__title {
    margin: 0;
    color: var(--primary) !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}

.cat-intro {
    max-width: 68ch;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1rem, 2.5vw, 1.75rem);
    font-size: clamp(.95rem, 1.6vw, 1.02rem);
    line-height: 1.85;
}

/* Odstepy miedzy kategoriami — cieńsze niz pelna sekcja, zeby strona
   nie ciagnela sie w nieskonczonosc                                       */
.cat-section {
    padding-top: clamp(2.25rem, 5vw, 4.5em) !important;
    padding-bottom: clamp(1.5rem, 3vw, 2.5em) !important;
}

.cat-section + .cat-section {
    border-top: 1px solid var(--hairline);
}

/* --- Cennik kategorii jako rozwijane pozycje ---------------------------
   Nazwa, czas i cena sa zawsze widoczne; opis rozwija sie po kliknieciu
   (akordeon Bootstrapa, ten sam mechanizm co FAQ w szablonie). Lista czyta
   sie jak karta w gabinecie, a nie jak sciana tekstu.                     */
/* Pas ze zdjeciem, opis i lista trzymaja jedna szerokosc i sa wysrodkowane
   — inaczej pas byl na pelna szerokosc, a lista o polowe wezsza.          */
.cat-band,
.cat-intro,
.ft-acc {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

.ft-acc {
    border-top: 1px solid var(--hairline);
}

.ft-acc__item {
    border-bottom: 1px solid var(--hairline);
}

/* Naglowek pozycji: nazwa + czas + cena. Opis pod spodem jest zawsze
   widoczny, wiec to zwykly wiersz, nie przycisk — stad brak wskaznika
   klikalnosci i ciasniejszy odstep do opisu.                              */
.ft-acc__head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 0 .4rem;
    background: none;
    border: 0;
    text-align: left;
    transition: color .2s ease;
}

/* stara, klikalna wersja (zostala na zaparkowanych stronach _nl/) */
button.ft-acc__head {
    min-height: 62px;
    padding: 1.15rem 0;
    cursor: pointer;
}

/* Szablon narzuca przyciskom kapitaliki i rozstrzelenie — na nazwach
   zabiegow zabijalo to elegancje serifu, wiec tu je zdejmujemy.           */
.ft-acc__name {
    flex: 1 1 auto;
    font-family: var(--font-family-heading);
    font-size: clamp(1.06rem, 2.1vw, 1.24rem);
    line-height: 1.3;
    color: var(--primary);
    text-transform: none;
    letter-spacing: .01em;
    transition: color .2s ease;
}

.ft-acc__meta {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.ft-acc__time {
    display: block;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6E6D6C;
}

.ft-acc__price {
    font-family: var(--font-family-heading);
    font-size: clamp(1.12rem, 2.2vw, 1.3rem);
    color: var(--brand);
}

/* strzalka: sam kat z dwoch kresek, bez dodatkowych plikow */
.ft-acc__chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: .4rem;
    border-right: 1.5px solid var(--brand);
    border-bottom: 1.5px solid var(--brand);
    transform: rotate(45deg);
    transition: transform .25s ease;
    align-self: center;
}

.ft-acc__head:not(.collapsed) .ft-acc__chevron {
    transform: rotate(225deg);
}

button.ft-acc__head:hover .ft-acc__name,
button.ft-acc__head:not(.collapsed) .ft-acc__name {
    color: var(--brand);
}

.ft-acc__body {
    padding: 0 0 1.35rem;
    max-width: 68ch;
    color: var(--text-color);
    font-size: .95rem;
    line-height: 1.85;
}

/* widoczny focus dla klawiatury */
button.ft-acc__head:focus-visible {
    outline: 1px solid var(--brand);
    outline-offset: 4px;
}

/* ==========================================================================
   SUWAK "VOOR / NA"
   Zdjecia przed/po mialy wypalone napisy BEFORE/AFTER wchodzace na twarz —
   wyciete przy kadrowaniu, etykiety sa teraz elementami strony, w naroznikach.
   Suwakiem jest <input type="range">: dziala mysz, dotyk i klawiatura.
   ========================================================================== */
.vgl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 2.75rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    max-width: 48rem;              /* sekcja celowo węższa niż hero-container */
    margin-inline: auto;
}

@media (min-width: 768px) {
    .vgl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vgl {
    margin: 0;
    border: 1px solid var(--hairline);
    background: var(--panel);
    overflow: hidden;
}

/* Warstwy zdjec maja wlasny kontener — wczesniej "na" bylo pozycjonowane
   wzgledem calej karty i wychodzilo na obszar podpisu. Proporcja rowna sie
   plikom w resultaten/ (680x760), wiec object-fit nic nie docina.         */
.vgl__media {
    position: relative;
    aspect-ratio: 680 / 760;
    overflow: hidden;
    touch-action: pan-y;          /* pion nadal przewija strone */
}

.vgl__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
}

.vgl__after {
    clip-path: inset(0 0 0 50%);
}

/* pionowa linia podzialu + uchwyt */
.vgl__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--brand);
    transform: translateX(-1px);
    pointer-events: none;
}

.vgl__handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    border: 2px solid var(--brand);
    border-radius: 50%;
    background: rgba(23, 22, 21, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* etykiety w naroznikach — nie zaslaniaja twarzy */
.vgl__label {
    position: absolute;
    top: .75rem;
    z-index: 3;
    padding: .2rem .6rem;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(23, 22, 21, .68);
    border: 1px solid var(--hairline);
    pointer-events: none;
}

.vgl__label--l { left: .75rem; }
.vgl__label--r { right: .75rem; color: var(--brand); }

/* sam suwak: przezroczysty pas na calym zdjeciu */
.vgl__range {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

.vgl__range:focus-visible + figcaption,
.vgl:focus-within {
    outline: 1px solid var(--brand);
    outline-offset: 3px;
}

.vgl figcaption {
    padding: .85rem 1rem 1rem;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--panel);
    position: relative;
    z-index: 5;
}

/* --- Pelna oferta jako lista pigulek ----------------------------------- */
.offer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.offer-chips li {
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: .42rem .95rem;
    font-size: .88rem;
    color: var(--primary);
    background: var(--panel);
}

/* --- Karty kontaktowe -------------------------------------------------- */
.contact-card {
    padding: 2rem 1.75rem;
    height: 100%;
}

.contact-card .chooseus-icon {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.contact-card h3 {
    font-size: 1.25rem;
    margin-bottom: .75rem;
}

.contact-card p {
    margin-bottom: 0;
    line-height: 1.9;
}

/* --- Stopka ----------------------------------------------------------- */
footer,
.footer-copyright-container {
    background-color: var(--ink);
    color: var(--text-color);
}

/* dane kontaktowe: klikalne, z wygodnymi celami dotyku */
.footer-description,
.footer-contactline {
    text-align: center;
    margin-bottom: .35rem;
    line-height: 2.1;
}

.footer-description a,
.footer-contactline a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding: .35rem .15rem;          /* powieksza cel dotyku bez zmiany ukladu */
}

.footer-description a:hover,
.footer-contactline a:hover {
    color: var(--brand) !important;
    border-bottom-color: var(--brand);
}

.footer-sep {
    color: #55534F;
    margin: 0 .45rem;
}

/* "bezoek uitsluitend op afspraak" — wazna informacja, wiec w kolorze marki */
.footer-note,
.contact-card em {
    font-style: italic;
    color: var(--brand);
}

/* menu w stopce */
.footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem .9rem !important;
    letter-spacing: .06em;
}

.legallink-text {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .4rem .2rem;
    /* szablon ma tu capitalize — po polsku i niderlandzku wychodzilo
       "Kontakt I Rezerwacje" / "Contact En Afspraken"; zostawiamy zapis
       taki, jak w tresci                                                  */
    text-transform: none;
}

.footer-social-container {
    gap: .75rem;
}

/* Stopka na duzym ekranie: szablon ustawia wszystko w jednej, waskiej
   kolumnie na srodku — na monitorze 1600 px+ wyglada to jak zagubiona
   wstazka tekstu posrodku szerokiego zdjecia. Na >=992 px rozkladamy ja
   na trzy strefy: logo i adres po lewej, menu na srodku, kontakt i ikony
   po prawej. Na telefonie zostaje uklad szablonu (jedna kolumna).       */
@media (min-width: 992px) {
    .footer-content-container {
        display: grid;
        grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
        grid-template-areas:
            "logo   menu  kontakt"
            "adres  menu  social"
            "linia  linia linia";
        align-items: center;
        justify-items: start;
        gap: .5rem 3rem;
        text-align: left;
    }

    .footer-content-container > .image-container { grid-area: logo; }

    .footer-content-container > .image-container img {
        max-width: 150px;
    }

    .footer-description {
        grid-area: adres;
        width: 100%;
        max-width: none;
        margin: 0;
        text-align: left;
    }

    .footer-content-container > .d-flex.flex-row {
        grid-area: menu;
        justify-content: center !important;
    }

    .footer-contactline {
        grid-area: kontakt;
        justify-self: end;
        margin: 0;
        text-align: right;
    }

    .footer-social-container {
        grid-area: social;
        justify-self: end;
    }

    .footer-divider {
        grid-area: linia;
        justify-self: stretch;
        width: 100%;
        margin-top: 1.6rem;
    }

    /* adres i telefon jedna linia wyzej niz menu — wyrownujemy optycznie */
    .footer-description,
    .footer-contactline {
        line-height: 1.9;
    }

    /* Nota "wizyty wylacznie po umowieniu" idzie do wlasnej linii pod adresem.
       W jednej linii z adresem lamala sie w polowie zdania — po niderlandzku
       ("bezoek uitsluitend op afspraak") juz przy 1440 px.                  */
    .footer-description .footer-sep { display: none; }
    .footer-description .footer-note { display: block; }
}

/* Bardzo szerokie monitory (ultrapanoramiczne 21:9): zdjecie w tle rozciaga
   sie na cala szerokosc, wiec tresc dostaje wiecej powietrza, ale nie
   rozjezdza sie na caly ekran.                                          */
@media (min-width: 1600px) {
    .footer-content-container {
        gap: .6rem 5rem;
    }
}

/* Ikony social w stopce: szablon dawal im tlo --accent-color i kolor
   --primary. W ciemnym motywie oba sa jasne, wiec wychodzilo biale kolko
   z bialym znakiem — niewidoczne. Obwodka zamiast wypelnienia.          */
.footer-icon {
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    color: var(--primary) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 50%;
    font-size: 17px !important;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.footer-icon:hover {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--ink) !important;
}

.footer-divider {
    border-bottom: 1px solid var(--hairline) !important;
    background-color: transparent !important;
    width: 100% !important;
    max-width: 620px;
}

/* Na telefonie kreska jest krotka i wysrodkowana (620 px wyzej), ale w
   ukladzie trojdzielnym ma spinac cala stopke. Dwie klasy w selektorze,
   bo regula bazowa stoi w pliku nizej niz blok z ukladem.               */
@media (min-width: 992px) {
    .footer-content-container .footer-divider { max-width: none; }
}

/* logo w stopce: szerokosc liczona z proporcji, nie 100% kontenera */
.footer-content-container .image-container img {
    width: auto !important;
    max-width: 220px;
    height: 74px;
    object-fit: contain;
}

/* akapity w stopce: szablon dawal im szerokosc 50%, na telefonie za waskie */
.footer-description,
.footer-contactline {
    width: 100% !important;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* adres i mail bez kapitalikow — czyta sie duzo lepiej */
.footer-contactline,
.footer-contactline a,
.footer-description,
.footer-description a {
    text-transform: none !important;
}

.footer-content-container .image-container img {
    max-height: 84px;
}

/* --- Przyciski social (strona Contact) --------------------------------- */
.social-row {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .25rem;
}

.social-btn {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 46px;
    padding: .55rem .9rem;
    border: 1px solid var(--hairline);
    color: var(--primary) !important;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.social-btn i {
    width: 22px;
    text-align: center;
    font-size: 17px;
    color: var(--brand);
    transition: color .2s ease;
}

.social-btn span {
    font-size: .92rem;
    letter-spacing: .04em;
    text-transform: none;      /* @handle i adres e-mail w oryginalnej pisowni */
}

.contact-card a,
.contact-card p {
    text-transform: none !important;
}

.social-btn:hover {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--ink) !important;
}

.social-btn:hover i {
    color: var(--ink);
}

.footer-copyright-container {
    border-top: 1px solid var(--hairline);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

@media (max-width: 575px) {
    .footer-description,
    .footer-contactline {
        line-height: 2.4;
    }
    .footer-sep { display: none; }         /* na telefonie kropki tylko przeszkadzaja */
    .footer-description a,
    .footer-contactline a,
    .footer-note {
        display: block;                     /* kazda dana w osobnej, klikalnej linii */
    }
    .footer-copyright-container {
        flex-direction: column;
        gap: .5rem;
        text-align: center;
    }
}

/* (reguly .footer-divider i .footer-icon sa wyzej — tu byl duplikat,
   ktory nadpisywal tlo linii i robil z niej szary pasek) */

.footer-icon:hover {
    color: var(--brand) !important;
}

.copyright-text,
.legallink-text {
    color: #6E6D6C !important;
}

/* --- Drobne ----------------------------------------------------------- */
.card {
    border-radius: 2px;
}

.testimonial-quote-icon {
    background-color: var(--brand) !important;
    color: var(--ink) !important;
}

.testimonial-btn {
    border-color: var(--hairline) !important;
    color: var(--primary) !important;
}

.testimonial-nav-btn {
    background-color: rgba(239, 238, 237, .25) !important;
}

.testimonial-nav-btn.active {
    background-color: var(--brand) !important;
}

::selection {
    background: var(--brand);
    color: var(--ink);
}

/* --- Przelacznik jezyka (flagi PL / NL / EN) --------------------------- */
.ft-jezyk {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-right: 1rem;
}

/* Flaga: proporcje 3:2, lekko zaokraglona, z cienka obwodka — bez niej
   biale pola polskiej i holenderskiej zlewaja sie z jasnym tlem.         */
.ft-flaga {
    display: block;
    width: 24px;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(239, 238, 237, .35);
    transition: box-shadow .2s ease;
}

.ft-jezyk__nazwa {
    font-size: .88rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
    white-space: nowrap;
}

/* --- wariant w pasku: flaga + strzalka, reszta w rozwijanej liscie ----- */
.ft-jezyk--rozwijany {
    position: relative;
}

/* Przy 992-1100 px kolumny naglowka zostawiaja przyciskowi ok. 270 px, a
   "AFSPRAAK MAKEN" z flaga obok potrzebuje tyle co do joty — bez tego
   napis lamal sie na dwie linie i przycisk rosl w gore.                  */
.navbar-cta-container .btn {
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-cta-container .btn {
        padding-left: 1.1em !important;
        padding-right: 1.1em !important;
    }
    .ft-jezyk { margin-right: .5rem; }
}

.ft-jezyk__przycisk {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: .35rem .4rem;
    background: none;
    border: 0;
    cursor: pointer;
}

/* strzalka: sam kat z dwoch kresek, tak jak w akordeonie cennika */
.ft-jezyk__strzalka {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text-color);
    border-bottom: 1.5px solid var(--text-color);
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .2s ease, border-color .2s ease;
}

.ft-jezyk__przycisk:hover .ft-flaga,
.ft-jezyk__przycisk:focus-visible .ft-flaga { box-shadow: 0 0 0 1px var(--brand); }

.ft-jezyk__przycisk:hover .ft-jezyk__strzalka { border-color: var(--brand); }

.ft-jezyk__przycisk[aria-expanded="true"] .ft-jezyk__strzalka {
    transform: rotate(225deg) translate(-1px, -1px);
    border-color: var(--brand);
}

.ft-jezyk__przycisk:focus-visible {
    outline: 1px solid var(--brand);
    outline-offset: 2px;
}

.ft-jezyk__lista {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 30;
    min-width: 190px;
    padding: .3rem;
    background-color: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 3px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

.ft-jezyk__lista .ft-jezyk__link {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .4rem .6rem;
    text-decoration: none;
    border-radius: 2px;
}

.ft-jezyk__lista .ft-jezyk__link:hover,
.ft-jezyk__lista .ft-jezyk__link:focus-visible {
    background-color: rgba(106, 207, 236, .1);
    outline: none;
}

.ft-jezyk__lista .ft-jezyk__link:hover .ft-jezyk__nazwa,
.ft-jezyk__lista .ft-jezyk__link:focus-visible .ft-jezyk__nazwa { color: var(--brand); }

/* Uwaga: nie da sie tu zrobic fallbacku "otwarte na focus" przez [hidden],
   bo bootstrap ma [hidden]{display:none!important}. Listę otwiera JS
   (facetime-ui.js), a gdyby go nie bylo, przycisk dostaje klasę
   .ft-jezyk--bez-js i lista pokazuje sie jako zwykly spis.               */
.ft-jezyk--bez-js .ft-jezyk__przycisk { display: none; }

.ft-jezyk--bez-js .ft-jezyk__lista[hidden] {
    display: flex !important;
    position: static;
    gap: .2rem;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* --- wariant w menu bocznym (telefon): pelna lista, bez rozwijania ----- */
.ft-jezyk--menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0 0 1rem;
}

.ft-jezyk--menu .ft-jezyk__link,
.ft-jezyk--menu .ft-jezyk__akt {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .5rem .2rem;
    text-decoration: none;
}

.ft-jezyk--menu .ft-flaga { width: 26px; }
.ft-jezyk--menu .ft-jezyk__link .ft-flaga { opacity: .6; }
.ft-jezyk--menu .ft-jezyk__link:hover .ft-flaga { opacity: 1; }
.ft-jezyk--menu .ft-jezyk__akt .ft-flaga { box-shadow: 0 0 0 1px var(--brand); }
.ft-jezyk--menu .ft-jezyk__akt .ft-jezyk__nazwa { color: var(--brand); }

@media (max-width: 991.98px) {
    /* w pasku gornym zostaje tylko przycisk CTA — przelacznik jest w menu */
    .navbar-cta-container .ft-jezyk { display: none; }
}


/* --- Mniej ruchu -------------------------------------------------------
   Kto ma w systemie wlaczone ograniczenie animacji, dostaje strone bez
   wjezdzajacych blokow — i, co wazniejsze, z tresciami widocznymi od razu
   (szablon chowa je przez opacity: 0 i pokazuje dopiero animacja).       */
@media (prefers-reduced-motion: reduce) {
    .animate-box,
    [data-animate] {
        opacity: 1 !important;
        animation: none !important;
        transition: none !important;
    }
}

/* --- Lista aparatury (O mnie) ------------------------------------------
   14 pozycji w waskiej prawej kolumnie (~570 px). Trzy kolumny Bootstrapa
   lamaly nazwy po trzy razy, dwie z naglowkami grup ustawialy sie jedna pod
   druga i sekcja rosla. Rozwiazanie: JEDEN spis lamany przez column-count —
   przegladarka sama decyduje, czy zmiesci dwie kolumny, czy jedna.
   (uklad zaproponowany przez Codexa, sprawdzony na zywej stronie)         */
.sprzet {
    width: 100%;
    min-width: 0;
}

.sprzet__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    column-count: 2;
    column-width: 14rem;      /* ponizej ~470 px dostepnego miejsca: jedna kolumna */
    column-gap: 1.6rem;
}

.sprzet__lista > li {
    position: relative;
    break-inside: avoid;
    margin: 0;
    padding: 0 0 .42rem .85rem;
    font-size: .94rem;
    line-height: 1.45;
    color: var(--primary);
}

/* kropka zamiast ptaszka: ptaszki zostaja sekcji "dlaczego ja", zeby te
   dwie listy nie wygladaly na te sama rzecz                              */
.sprzet__lista > li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brand);
}