/* ==========================================================================
   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.                  */
@media (max-width: 767.98px) {
    .about-intro__image-container,
    .about-intro__image-decoration,
    .whychooseus-decoration-border,
    .whychooseus-decoration-paint,
    .pricing-image-decoration,
    .image-pricing,
    .appointment-content-image {
        display: none !important;
    }
}

@media (max-width: 575px) {
    .sub-heading-text { letter-spacing: .1em !important; }
    .banner-home { min-height: 82vh; }
    .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).             */
header {
    position: sticky;
    top: 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;
}

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;
}

@media (min-width: 992px) {
    header.is-scrolled .logo-container.header-logo img,
    header.is-scrolled .navbar-brand img {
        height: 46px;
    }
}

/* linki wewnetrzne nie chowaja sie pod przyklejonym headerem */
html {
    scroll-padding-top: 96px;
    scroll-behavior: smooth;
}

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

.navbar-brand img,
.logo-container.header-logo img {
    transition: height .25s ease;
}

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

.navbar-nav .nav-link.active {
    background-color: rgba(106, 207, 236, .14) !important;
    color: var(--brand) !important;
}

.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;
}

.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: 46px;
    object-fit: contain;
}

@media (min-width: 992px) {
    .logo-container.header-logo img,
    .navbar-brand img {
        height: 58px;
    }
}

.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;
}

/* --- 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 czarno-biale, jak w druku -------------------------------- */
.image-container img,
.card-blog img,
.team-content-container img {
    filter: grayscale(100%) contrast(1.04);
}

/* placeholdery sa juz w kolorach marki — ich nie odbarwiamy */
img[src*="dummy-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: czekamy na portret Anety. Do tego czasu jawny placeholder —
   zdjecie stockowe modelki w tym miejscu udawaloby wlascicielke.        */
.team-founder-hair-style {
    background-image: url('../images/ft-aneta.jpg') !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') !important; }
.service-container--fashion-makeup   { background-image: url('../images/ft-body.jpg') !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;
}

/* 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;
    }
}

/* --- 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;
}

/* --- 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);
}

.banner-inner-title {
    letter-spacing: .06em;
}

/* --- 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);
}

/* --- 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; }
}

/* --- 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;
}

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

/* 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;
}

/* 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);
}