/* =========================================
   STYLE GŁÓWNE - START
   ========================================= */
/* Definicja zmiennych (kolorów i czcionek), których używamy w całym pliku */
:root {
    --bg-cream: #FDFBF7;

    /* Jasnokremowe tło całej strony */
    --pastel-nude: #E6C2BF;

    /* Twój główny różowy kolor (akcent) */
    --pastel-sage: #DDE5D8;

    /* Pastelowa szałwia (dodatkowy) */
    --text-dark: #1a1a1a;

    /* Prawie czarny kolor tekstu (czytelny) */
    --text-light: #7D7068;

    /* Jaśniejszy brąz/szary dla opisów */
    --font-serif: 'Cormorant Garamond', serif;

    /* Elegancka czcionka szeryfowa (nagłówki) */
    --font-sans: 'Montserrat', sans-serif;

    /* Nowoczesna czcionka bezszeryfowa (tekst) */
}

/* Resetowanie domyślnych ustawień przeglądarki */
* {
    margin: 0;

    /* Usuwa domyślne marginesy */
    padding: 0;

    /* Usuwa domyślne odstępy wewnętrzne */
    box-sizing: border-box;

    /* Sprawia, że padding nie powiększa elementów */
}

/* Podstawowe ustawienia strony */
body {
    background-color: var(--bg-cream);

    /* Ustawia tło strony na nasz kremowy */
    color: var(--text-dark);

    /* Domyślny kolor tekstu */
    font-family: var(--font-sans);

    /* Domyślna czcionka (Montserrat) */
    line-height: 1.5;

    /* Odstęp między liniami tekstu (czytelność) */
    overflow-x: hidden;

    /* Zapobiega poziomemu przewijaniu strony */
}

/* =========================================
   NAGŁÓWKI I TYPOGRAFIA
   ========================================= */
/* Styl dla wszystkich nagłówków H1, H2, H3 oraz specjalnych klas tytułów */
h1,
h2,
h3,
.category-title,
.art-title,
#modal-title {
    font-family: var(--font-serif) !important;

    /* Wymusza czcionkę ozdobną */
    font-weight: 600;

    /* Pogrubienie czcionki */
    color: var(--text-dark);

    /* Kolor tekstu */
}

h1 {
    font-size: 3rem;

    /* Bardzo duży tekst (tytuł główny) */
    line-height: 1.1;

    /* Ciaśniejsze linie dla dużego tekstu */
    margin-bottom: 20px;

    /* Odstęp pod tytułem */
}

h2 {
    font-size: 2.8rem;

    /* Duży tekst (tytuły sekcji) */
    margin-bottom: 30px;

    /* Odstęp pod spodem */
    text-align: center;

    /* Wyśrodkowanie tekstu */
}

h3 {
    font-size: 1.5rem;

    /* Średni nagłówek */
    margin-bottom: 10px;

    /* Mały odstęp pod spodem */
}

/* Pasek ogłoszeń na samej górze (np. "Urlop") */
#announcement-bar {
    display: none;

    /* Domyślnie ukryty (pokazuje go JS) */
    background: #E6C2BF;

    /* Różowe tło */
    color: #000;

    /* Czarny tekst */
    text-align: center;

    /* Wyśrodkowanie */
    padding: 10px;

    /* Odstęp wewnątrz paska */
    font-weight: 600;

    /* Pogrubienie */
    font-size: 0.9rem;

    /* Nieco mniejszy tekst */
}

/* =========================================
   NAGŁÓWEK STRONY (HEADER)
   ========================================= */
header {
    padding: 0 5%;

    /* Odstępy po bokach (5% szerokości) */
    height: 70px;

    /* Stała wysokość paska menu */
    display: flex;

    /* Układ elastyczny (elementy obok siebie) */
    justify-content: space-between;

    /* Rozsuwa logo i menu na boki */
    align-items: center;

    /* Wyśrodkowuje elementy w pionie */
    background: #ffffff;

    /* Białe tło */
    position: sticky;

    /* Przykleja menu do góry podczas przewijania */
    top: 0;

    /* Pozycja 0 od góry */
    z-index: 1000;

    /* Warstwa najwyższa (nad innymi elementami) */
    box-shadow: 0 2px 15px rgba(0,0,0,0.03);

    /* Delikatny cień pod menu */
    gap: 15px;

    /* Odstęp między elementami */
    flex-wrap: nowrap;

    /* Zapobiega zawijaniu się elementów */
}

.logo-container {
    height: 100%;

    /* Zajmuje pełną wysokość headera */
    display: flex;

    /* Układ elastyczny */
    align-items: center;

    /* Wyśrodkowanie w pionie */
}

.logo-container img {
    height: 70px;

    /* Wysokość logo taka jak headera */
    width: auto;

    /* Szerokość dopasowuje się automatycznie */
    display: block;

    /* Blokowy element (usuwa dziwne odstępy) */
    object-fit: contain;

    /* Skaluje obrazek, żeby się mieścił */
}

#logo-text {
    display: none;

    /* Ukryty tekst logo (używamy obrazka) */
    font-family: var(--font-serif);

    /* Czcionka ozdobna */
    font-weight: 600;

    /* Pogrubienie */
    font-size: 1.5rem;

    /* Rozmiar tekstu */
}

/* Menu nawigacyjne (linki) */
nav ul {
    list-style: none;

    /* Usuwa kropki z listy */
    display: flex;

    /* Elementy obok siebie */
    gap: 25px;

    /* Odstęp między linkami */
}

nav a {
    text-decoration: none;

    /* Usuwa podkreślenie linków */
    color: var(--text-dark);

    /* Ciemny kolor tekstu */
    font-size: 0.9rem;

    /* Rozmiar czcionki */
    text-transform: uppercase;

    /* Zamienia na WIELKIE LITERY */
    font-weight: 600;

    /* Pogrubienie */
    letter-spacing: 1px;

    /* Rozstrzelenie liter */
}

/* Przycisk w nagłówku (np. "Umów") */
header .btn {
    width: auto !important;

    /* Szerokość dopasowana do treści */
    min-width: 0 !important;

    /* Reset minimalnej szerokości */
    padding: 10px 25px !important;

    /* Mniejsze odstępy niż zwykły przycisk */
    font-size: 0.75rem !important;

    /* Mniejsza czcionka */
    white-space: nowrap !important;

    /* Tekst w jednej linii */
    margin: 0;

    /* Brak marginesów */
    flex-shrink: 0;

    /* Przycisk się nie kurczy */
}

/* =========================================
   PRZYCISKI (STYLE OGÓLNE)
   ========================================= */
.btn {
    display: inline-block;

    /* Zachowuje się jak blok w tekście */
    padding: 14px 40px;

    /* Duże odstępy wewnątrz */
    background-color: #000;

    /* Czarne tło */
    color: #fff;

    /* Biały tekst */
    text-decoration: none;

    /* Bez podkreślenia */
    border-radius: 50px;

    /* Mocno zaokrąglone rogi (pastylka) */
    font-size: 0.9rem;

    /* Rozmiar tekstu */
    font-weight: 600;

    /* Pogrubienie */
    text-transform: uppercase;

    /* Wielkie litery */
    letter-spacing: 1px;

    /* Odstępy między literami */
    transition: 0.4s ease;

    /* Płynna animacja przy najechaniu */
    border: none;

    /* Bez ramki */
    cursor: pointer;

    /* Kursor rączki */
}

.btn:hover {
    background-color: var(--pastel-nude);

    /* Zmiana tła na różowe */
    color: #000;

    /* Zmiana tekstu na czarny */
    transform: translateY(-3px);

    /* Lekkie uniesienie przycisku */
}

/* =========================================
   SEKCJA HERO (STARTOWA)
   ========================================= */
.hero {
    min-height: 45vh;

    /* Minimalna wysokość to 45% ekranu */
    display: flex;

    /* Układ flex */
    align-items: center;

    /* Wyśrodkowanie pionowe */
    justify-content: center;

    /* Wyśrodkowanie poziome */
    text-align: center;

    /* Tekst wyśrodkowany */
    /* Tło: Gradient (przyciemnienie) + Obrazek */
    background: linear-gradient(rgba(253, 251, 247, 0.6), rgba(253, 251, 247, 0.6)), url('https://images.unsplash.com/photo-1632345031435-8727f6897d53?q=80&w=1920');
    background-size: cover;

    /* Obrazek pokrywa całość */
    background-position: center;

    /* Wyśrodkowanie obrazka */
    background-attachment: fixed;

    /* Efekt paralaksy (tło stoi w miejscu) */
    padding: 40px 20px;

    /* Odstępy wewnętrzne */
}

.hero-content span {
    text-transform: uppercase;

    /* Wielkie litery */
    letter-spacing: 3px;

    /* Duże odstępy liter */
    font-size: 1.2rem;

    /* Rozmiar tekstu */
    display: block;

    /* Każdy span w nowej linii */
    margin-bottom: 15px;

    /* Odstęp pod spodem */
    font-weight: 800;

    /* Bardzo gruby tekst */
    color: #1a1a1a;

    /* Ciemny kolor */
}

/* =========================================
   SEKCJE (OGÓLNE USTAWIENIA)
   ========================================= */
section {
    padding: 30px 5%;

    /* Odstępy: 30px góra/dół, 5% boki */
    position: relative;

    /* Pozycjonowanie względne (dla linii ozdobnych) */
}

/* Kolory tła dla różnych sekcji (naprzemiennie) */
.portfolio,
.pricing,
.faq,
.vouchers {
    background-color: #fff;
}

/* Białe */
.before-after-section,
.blog {
    background-color: var(--bg-cream);
}

/* Kremowe */
.vouchers {
    background-color: var(--pastel-nude);
    text-align: center;
}

/* Różowe */
/* Ozdobna linia na dole sekcji */
.portfolio::after,
.pricing::after,
.blog::after,
.faq::after {
    content: '';

    /* Pusty element */
    display: block;

    /* Blokowy */
    width: 60%;

    /* Szerokość linii */
    height: 1px;

    /* Grubość linii */
    background-color: var(--pastel-nude);

    /* Różowy kolor */
    margin: 0 auto;

    /* Wyśrodkowanie */
    position: absolute;

    /* Pozycjonowanie absolutne */
    bottom: 0;

    /* Przyklej do dołu sekcji */
    left: 20%;

    /* Przesunięcie żeby było na środku (20% z lewej) */
    opacity: 0.5;

    /* Półprzezroczystość */
}

.loading-text {
    color: #999;

    /* Szary kolor */
    font-size: 0.8rem;

    /* Mały tekst */
    text-align: center;

    /* Wyśrodkowanie */
    padding: 20px 0;

    /* Odstęp */
}

/* =========================================
   CENNIK (STYL "CLEAN" - ZWARTY)
   ========================================= */
.pricing-wrapper {
    display: grid;

    /* Siatka */
    grid-template-columns: 1fr;

    /* Jedna kolumna (prosto) */
    max-width: 800px;

    /* Węższa szerokość dla czytelności */
    margin: 0 auto;

    /* Wyśrodkowanie */
    gap: 0;

    /* Brak odstępów (regulujemy paddingiem) */
}

.category-title {
    font-family: var(--font-serif);

    /* Czcionka ozdobna */
    font-size: 2rem;

    /* Rozmiar */
    text-align: center;

    /* Wyśrodkowanie */
    margin-top: 30px;

    /* Margines góra */
    margin-bottom: 20px;

    /* Margines dół */
    color: #000;

    /* Kolor */
    text-transform: uppercase;

    /* Wielkie litery */
    letter-spacing: 2px;

    /* Odstępy */
}

/* WIERSZ USŁUGI */
.price-row {
    display: flex;

    /* Elementy obok siebie */
    justify-content: space-between;

    /* Rozsuń nazwę i cenę */
    align-items: center;

    /* Wyśrodkowanie w pionie */
    padding: 8px 0;

    /* Mały padding góra/dół */
    border-bottom: 1px solid rgba(0,0,0,0.08);

    /* Cienka linia pod spodem */
    background: transparent;

    /* Bez tła */
    transition: background 0.3s;

    /* Animacja tła */
}

.price-row:hover {
    background: rgba(230, 194, 191, 0.05);

    /* Lekkie podświetlenie po najechaniu */
    padding-left: 6px;
    padding-right: 10px;

    /* Lekkie wcięcie po najechaniu */
}

/* NAZWA USŁUGI */
.price-name {
    font-family: var(--font-serif);

    /* Czcionka ozdobna */
    font-weight: 600;

    /* Pogrubienie */
    font-size: 0.9rem;

    /* Rozmiar */
    color: #1a1a1a;

    /* Ciemny kolor */
    flex: 1;

    /* Zajmuje miejsce */
    padding-right: 15px;

    /* Odstęp od ceny */
    text-transform: uppercase;

    /* Wielkie litery */
    letter-spacing: 0.5px;

    /* Odstępy liter */
    line-height: 1.2;

    /* Linia */
}

/* --- WARIANT (np. French) --- */
.price-row.variant {
    border-bottom: none;

    /* Brak linii pod wariantem */
    padding-top: 2px;

    /* Mniejszy odstęp góra */
    padding-bottom: 6px;

    /* Mniejszy odstęp dół */
    margin-top: -4px;

    /* Przyklejenie do rodzica wyżej */
}

/* STYL TEKSTU WARIANTU (PROSTY, JAK W CHMURCE) */
.price-row.variant .price-name {
    font-family: var(--font-sans);

    /* Czcionka prosta (Montserrat) */
    font-weight: 400;

    /* Nie pogrubiony (standard) */
    font-style: normal;

    /* Bez kursywy (czysty tekst) */
    font-size: 0.75rem;

    /* Rozmiar jak treść artykułu */
    color: #444;

    /* Ciemnoszary kolor (czytelny) */
    text-transform: none;

    /* Małe litery (bez CAPS) */
    padding-left: 20px;

    /* Wcięcie z lewej */
    display: flex;
    align-items: center;

    /* Wyrównanie */
}

/* STRZAŁECZKA PRZY WARIANCIE */
.price-row.variant .price-name::before {
    content: '↳';

    /* Symbol strzałki */
    margin-right: 5px;

    /* Odstęp od tekstu */
    font-size: 1rem;

    /* Rozmiar strzałki */
    color: var(--pastel-nude);

    /* Kolor różowy */
}

/* PRAWA STRONA (CENA I CZAS) */
.price-info {
    text-align: right;

    /* Do prawej */
    display: flex;

    /* Flex */
    flex-direction: row;

    /* W jednej linii */
    align-items: center;

    /* Wyśrodkowanie */
    gap: 15px;

    /* Odstęp między czasem a ceną */
}

/* CENA (Wyraźna) */
.cost {
    font-family: var(--font-sans);

    /* Prosta czcionka */
    font-size: 0.85rem;

    /* Rozmiar */
    font-weight: 700;

    /* Gruby */
    color: #000;

    /* Czarny */
    white-space: nowrap;

    /* Bez łamania */
}

/* CZAS (Mały, szary, przed ceną) */
.duration {
    font-size: 0.65rem;

    /* Mały */
    color: #999;

    /* Szary */
    font-weight: 500;

    /* Średni */
    white-space: nowrap;

    /* Bez łamania */
    display: flex;
    align-items: center;
    gap: 4px;

    /* Ikonka obok tekstu */
}

/* MOBILE */
@media (max-width: 768px) {
    .category-title {
        font-size: 1.4rem;
        margin-top: 25px;
    }

    .price-name {
        font-size: 0.9rem;
    }

    .price-info {
        gap: 10px;
    }

    /* Mniejszy odstęp na telefonie */
}

/* =========================================
   PRZYCISKI INSTAGRAMA
   ========================================= */
.insta-separator {
    display: flex;
    justify-content: center;
    padding: 15px;
    gap: 15px;
}

.insta-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
    padding: 8px 20px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    font-size: 0.9rem;
    font-weight: 600;
}

.insta-pill:hover {
    transform: translateY(-2px);
    border-color: #E6C2BF;
}

.insta-pill svg {
    width: 15px;
    height: 15px;
    color: var(--pastel-nude);
}

/* =========================================
   FAQ (PYTANIA I ODPOWIEDZI)
   ========================================= */
.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 8px;
}

.faq-question {
    padding: 12px 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    font-size: 0.84rem;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease;
    padding: 0 15px;
    font-size: 0.8rem;
    color: #555;
    line-height: 1.4;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding-bottom: 15px;
}

.faq-icon {
    transition: 0.3s;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

/* =========================================
   SLIDERY (PRZEWIJANIE)
   ========================================= */
.slider-container h3 {
    text-align: center;
    margin: 15px 0 10px;
}

.horizontal-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 20px 0 30px;
    scrollbar-width: none;
}

.horizontal-slider::-webkit-scrollbar {
    display: none;
}

/* Karty w portfolio */
.portfolio-card {
    min-width: 300px;
    height: 400px;
    scroll-snap-align: center;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.portfolio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   KARTY BLOGOWE
   ========================================= */
.blog-card {
    min-width: 280px;
    max-width: 320px;
    height: auto !important;
    min-height: 0 !important;
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    scroll-snap-align: center;
    transition: transform 0.3s;
    justify-content: flex-start;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-card h3 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    margin-bottom: 10px;
    line-height: 1.2;
}

.blog-card p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
}

.read-more {
    color: #E6C2BF;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================================
   METAMORFOZY (PRZED/PO)
   ========================================= */
.ba-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 450px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.ba-img-background,
.ba-img-foreground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ba-img-foreground {
    width: 50%;
    overflow: hidden;
    border-right: 3px solid #fff;
    z-index: 10;
}

.ba-img-background img,
.ba-img-foreground img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ba-slider {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 20;
    opacity: 0;
    cursor: ew-resize;
    height: 100%;
    left: 0;
}

.ba-slider-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    z-index: 15;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.ba-label {
    position: absolute;
    top: 20px;
    background: rgba(255,255,255,0.8);
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 5px;
    font-size: 0.8rem;
    z-index: 5;
}

.ba-img-foreground .ba-label {
    left: 20px;
    color: #000;
}

.ba-img-background .ba-label {
    right: 20px;
    color: #000;
}

/* =========================================
   MAPA
   ========================================= */
.map-section {
    height: 400px;
    width: 100%;
    margin: 0;
    padding: 0 !important;
    display: block;
    position: relative;
    overflow: hidden;
}

.map-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    margin: 0;
}

/* =========================================
   INNE ELEMENTY UI (KROPKI, REVEAL)
   ========================================= */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0e0e0;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active {
    background: var(--pastel-nude);
    transform: scale(1.3);
}

/* Animacja pojawiania się elementów */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: 0.8s ease-out;
}

.reveal.hidden-init {
    opacity: 0;
    transform: translateY(20px);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   STOPKA
   ========================================= */
footer {
    background-color: #fff;
    padding: 5px 3vw 10px;
    text-align: center !important;
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 0;
}

.footer-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-col.left,
.footer-col.right {
    flex: 1;
    min-width: 150px;
}

.footer-col.center {
    flex: 3;
    align-items: center;
    text-align: center;
    min-width: 350px;
}

.footer-col.left {
    align-items: flex-start;
    gap: 5px;
}

.footer-col.right {
    align-items: flex-end;
}

.footer-text {
    font-size: 0.8rem;
    color: #333;
    line-height: 1.3;
    white-space: nowrap;
}

.footer-phone {
    color: #000;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 3px;
    display: inline-block;
}

.footer-wrapper .insta-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    font-size: 0.75rem;
    transition: 0.3s;
    padding: 5px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eee;
    width: fit-content;
}

.footer-wrapper .insta-btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    border-color: #ddd;
}

.footer-wrapper .insta-icon {
    width: 18px;
    height: 18px;
    color: #E6C2BF;
    stroke-width: 2px;
}

.footer-copy {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    font-size: 0.65rem;
    color: #bbb;
}

/* =========================================
   CHMURKA (MODAL Z ARTYKUŁEM)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    padding: 10px;
    padding-top: 10px;
    box-sizing: border-box;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #fffdf9;
    width: 100%;
    max-width: 800px;
    height: 100%;
    max-height: 85vh;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-brand-bar {
    background: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    letter-spacing: 1px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-brand-bar span {
    border-bottom: 1px solid #E6C2BF;
    padding-bottom: 5px;
}

.modal-scroll-area {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
}

#modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 10px;
    color: #1a1a1a;
}

#modal-date {
    display: block;
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    margin-bottom: 20px;
}

#modal-text {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.8;
    color: #444;
    font-size: 1rem;
    text-align: justify;
}

#modal-text img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    cursor: pointer;
    color: #555;
    z-index: 10;
    transition: 0.3s;
}

.close-modal:hover {
    color: #E6C2BF;
    transform: rotate(90deg);
}

/* =========================================
   PASEK JĘZYKOWY
   ========================================= */
.lang-switch {
    position: fixed;
    top: 130px;
    right: 0;
    z-index: 2000;
    background: rgba(255,255,255,0.95);
    box-shadow: -2px 2px 10px rgba(0,0,0,0.1);
    width: 24px;
    padding: 5px 0;
    border-radius: 8px 0 0 8px;
    transition: transform 0.3s ease, width 0.3s ease;
    overflow: hidden;
    max-height: 60px;
    cursor: pointer;
}

.lang-switch.hidden-scroll {
    transform: translateX(100%);
}

.lang-switch.expanded {
    width: 36px;
    max-height: 200px;
}

.lang-label {
    font-size: 0.6rem;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-weight: 800;
    color: #ccc;
    margin: 0 auto;
    line-height: 24px;
}

.lang-switch.expanded .lang-label {
    display: none;
}

.lang-options {
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
    margin-top: 5px;
}

.lang-switch.expanded .lang-options {
    opacity: 1;
    pointer-events: auto;
}

.lang-btn {
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    opacity: 0.5;
}

.lang-btn.active {
    opacity: 1;
    transform: scale(1.1);
}

/* =========================================
   PODSTRONA ARTYKUŁU
   ========================================= */
.article-page-body {
    background-color: #FDFBF7;
}

.article-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px 3vw;
    min-height: 60vh;
}

.art-header {
    text-align: center;
    margin-bottom: 30px;
}

.art-date {
    font-size: 0.8rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.art-title {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
}

.art-img {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.art-content {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    white-space: pre-wrap;
    text-align: justify;
}

.back-btn-container {
    text-align: center;
    margin-top: 50px;
}

.back-btn {
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid #E6C2BF;
    border-radius: 50px;
    text-decoration: none;
    color: #000;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: 0.3s;
}

.back-btn:hover {
    background: #E6C2BF;
    color: #fff;
}

.logo-text-simple {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.5rem;
    color: #000;
    text-decoration: none;
}

/* =========================================
   RESPONSYWNOŚĆ (MOBILE)
   ========================================= */
@media (max-width: 900px) {
    header {
        padding: 0 15px;
        height: 70px;
        justify-content: space-between;
    }

    .logo-container img {
        height: 70px;
    }

    header .btn {
        padding: 8px 15px !important;
        font-size: 0.7rem !important;
        width: auto !important;
        flex-shrink: 0;
    }

    nav {
        display: none;
    }

    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    .pricing-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ba-container {
        height: 280px;
    }

    .hero {
        min-height: 50vh;
    }

    .portfolio,
    .pricing,
    .faq,
    .before-after-section,
    .blog {
        padding: 30px 4vw;
    }

    .vouchers {
        padding: 30px 4vw;
    }

    .footer-wrapper {
        flex-direction: column-reverse;
        text-align: center;
        gap: 15px;
    }

    .footer-col.left {
        align-items: center;
        width: 100%;
        flex: auto;
    }

    .footer-col.right {
        display: none;
    }

    .footer-col.center {
        width: 100%;
        flex: auto;
        min-width: 0;
    }

    .footer-text {
        white-space: normal;
    }

    .footer-wrapper .insta-btn {
        width: 100%;
        justify-content: center;
        max-width: 280px;
    }
}

/* =========================================
   DODATKI: CHMURKA ROZWIJANIE, BANNER COOKIE, OPINIE
   ========================================= */
/* Rozwijanie tekstu w chmurce */
.clamped-text {
    max-height: 300px;

    /* Wysokość startowa */
    overflow: hidden;

    /* Ukryj nadmiar */
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);

    /* Efekt zanikania */
}

.modal-expand-btn {
    display: block;
    margin: 15px auto 0;
    background-color: #E6C2BF;
    color: #000;
    border: none;
    padding: 10px 30px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.modal-expand-btn:hover {
    background-color: #dcb0ad;
    transform: translateY(-2px);
}

/* Banner Cookie */
.cookie-consent {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border-radius: 20px;
    padding: 25px;
    z-index: 10000;
    border: 1px solid #f0f0f0;
    display: none;
    animation: slideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cookie-consent.show {
    display: block;
}

.cookie-content h4 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #000;
}

.cookie-content p {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}

.cookie-content a {
    color: #E6C2BF;
    text-decoration: underline;
    font-weight: 600;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-cookie {
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-outline {
    background: transparent;
    border: 1px solid #ddd;
    color: #888;
}

.btn-outline:hover {
    border-color: #333;
    color: #000;
}

.btn-fill {
    background: #000;
    border: 1px solid #000;
    color: #fff;
}

.btn-fill:hover {
    background: #E6C2BF;
    border-color: #E6C2BF;
    color: #000;
    transform: translateY(-2px);
}

@keyframes slideUp {
    from {
        transform: translate(-50%, 100px);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@media (max-width: 600px) {
    .cookie-buttons {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .btn-cookie {
        width: 100%;
        text-align: center;
    }
}

/* Sekcja Opinie */
.review-card {
    min-width: 300px;
    max-width: 300px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 15px;
    padding: 25px;
    margin-right: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    scroll-snap-align: center;
    transition: transform 0.3s;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.review-card .stars {
    color: #E6C2BF;
    font-size: 1.1rem;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.review-card p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-style: italic;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.review-card .client-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1rem;
    color: #000;
    text-align: right;
    border-top: 1px solid #f9f9f9;
    padding-top: 10px;
}

/* Responsywność dla Opinii i Cennika */
@media (max-width: 768px) {
    .review-card {
        min-width: 85vw;
        max-width: 85vw;
    }

    .pricing-wrapper {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* --- DOLNY PRZYCISK ZAMYKANIA (DLA KCIUKA) --- */
.modal-article-footer {
    margin-top: 40px;

    /* Odstęp od tekstu artykułu */
    padding-top: 20px;

    /* Odstęp wewnątrz */
    border-top: 1px solid #eee;

    /* Delikatna kreska oddzielająca */
    display: flex;
    justify-content: space-between;

    /* Rozsuń tekst i guzik */
    align-items: center;

    /* Wyrównaj w pionie */
    padding-bottom: 20px;

    /* Odstęp od dołu ekranu */
}

.modal-footer-text {
    font-family: 'Cormorant Garamond', serif;

    /* Elegancka czcionka */
    font-style: italic;
    color: #999;
    font-size: 1rem;
}

.bottom-close-btn {
    background: #f4f4f4;

    /* Jasne tło */
    border: 1px solid #e0e0e0;

    /* Delikatna ramka */
    padding: 10px 25px;

    /* Duże pole kliknięcia dla kciuka */
    border-radius: 50px;

    /* Pastylka */
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;

    /* Odstęp iksa od tekstu */
    transition: 0.2s;
}

.bottom-close-btn:hover {
    background: #E6C2BF;

    /* Róż po najechaniu */
    border-color: #E6C2BF;
    color: #000;
}

/* Na małych telefonach układamy to ładnie */
@media (max-width: 400px) {
    .modal-article-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .bottom-close-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- NAPRAWA TRE�CI ARTYKU�U W MODALU --- */
/* Usuwa efekt ucinania i mg�y - tekst b�dzie w ca�o�ci, przewijany */
#modal-text,
.clamped-text {
    max-height: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    overflow: visible !important;
}

/* Poprawa czytelno�ci obrazk�w w tre�ci */
#modal-text img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}



/* =========================================
   CENNIK - STYLE NAPRAWIONE (GRID + DETALE)
   ========================================= */

/* 1. HERO SECTION */
.hero-cennik {
    background: linear-gradient(135deg, #FDFBF7 0%, #fae3e8 100%), url('img/cennik-hero.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    color: #1a1a1a;
    text-align: center;
    padding: 100px 20px 50px; /* Mniejszy padding z dołu */
    margin-bottom: 0;
}

.hero-cennik h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5rem;
    font-weight: 600;
    margin: 10px 0;
    color: #1a1a1a;
}

.hero-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #b58086;
    font-weight: 700;
}

/* 2. NAWIGACJA (Belka) */
.pricing-nav {
    position: sticky;
    top: 70px;
    z-index: 900;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    margin-bottom: 0;
}

.pricing-nav ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.pricing-nav a {
    text-decoration: none;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
    padding: 8px 15px;
    border-radius: 20px;
}

.pricing-nav a:hover {
    background-color: #E6C2BF;
    color: #fff;
}

/* 3. SEKCJE I ODSTĘPY (Poprawione) */
.section-detailed {
    padding: 40px 20px; /* Zmniejszone odstępy góra/dół */
    background-color: transparent;
}

.section-detailed:nth-of-type(even) {
    background-color: #fff; /* Co druga sekcja biała */
}

/* Pierwsza sekcja bliżej belki */
#dlonie {
    padding-top: 30px; 
}

.section-header-wrapper {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px; /* Mniejszy odstęp od kafelków */
    padding: 0 10px;
}

.section-title-elegant {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

/* Różowa kreska POD tytułem */
.section-title-elegant::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #E6C2BF;
    margin: 8px auto 0;
}

.intro-text {
    font-family: 'Montserrat', sans-serif;
    color: #666;
    line-height: 1.6;
    font-size: 1rem;
    margin-top: 15px;
}

.intro-text a {
    color: #b58086;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(181, 128, 134, 0.3);
}

/* 4. SIATKA KAFELKÓW (TO NAPRAWIA ROZJEŻDŻANIE) */
.pricing-grid-container {
    display: grid;
    /* To sprawia, że kafelki są obok siebie na PC, a jeden pod drugim na telefonie */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

/* 5. WYGLĄD KAFELKA */
.service-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(230, 194, 191, 0.2);
    border-color: #E6C2BF;
}

.service-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    color: #1a1a1a;
    margin-bottom: 10px;
    font-weight: 600;
}

.service-card p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Lista z emotkami */
.service-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
    text-align: left;
}

.service-card ul li {
    padding-left: 0;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #444;
    display: flex;
    align-items: flex-start;
    gap: 10px; /* Odstęp emotki od tekstu */
}

/* Cena i Czas */
.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px dashed #eee;
    margin-top: auto;
    margin-bottom: 15px;
}

.price-tag {
    font-size: 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    color: #b58086;
}

.time-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #999;
    font-weight: 600;
    letter-spacing: 1px;
    background: #f9f9f9;
    padding: 4px 10px;
    border-radius: 4px;
}

/* Przycisk w kafelku */
.service-card .btn.small {
    width: 100%;
    padding: 12px 0;
    text-align: center;
    font-size: 0.8rem;
    margin-top: 0;
    background-color: #1a1a1a;
    color: #fff;
    border-radius: 8px; /* Lekko zaokrąglony */
}

.service-card .btn.small:hover {
    background-color: #E6C2BF;
    color: #000;
}

/* Oferta Specjalna */
.service-card.special-offer {
    border: 2px solid #E6C2BF;
    background: #fffafa;
}

/* 6. LOKALIZACJA I MAPY */
.location-card {
    text-align: center;
    align-items: center;
}

.location-card .subtext {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 15px;
    font-style: italic;
    display: block;
}

.location-card .address {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Przycisk Mapy */
.map-btn {
    background-color: #fff;
    color: #4285F4;
    border: 1px solid #4285F4;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    margin-top: 15px;
    font-size: 0.9rem;
}

.map-btn:hover {
    background-color: #f0f8ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(66, 133, 244, 0.2);
}

.transport-list {
    text-align: left;
    margin-top: 15px;
    width: 100%;
}

.transport-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    font-size: 0.9rem;
    color: #555;
}

/* 7. RESPONSYWNOŚĆ (MOBILE) */
@media (max-width: 768px) {
    .hero-cennik {
        padding: 80px 15px 40px;
    }
    
    .hero-cennik h1 {
        font-size: 2.5rem;
    }

    .pricing-grid-container {
        grid-template-columns: 1fr; /* Jedna kolumna na telefonie */
        gap: 20px;
    }

    .pricing-nav {
        top: 60px;
        overflow-x: auto; /* Przewijanie menu palcem */
        white-space: nowrap;
        justify-content: flex-start;
        padding: 15px 20px;
    }
    
    .section-header-wrapper {
        padding: 0 10px;
    }
}