/* =========================================================================
   PRZESTRZENIE — Pięknie Żyć
   Portal wejściowy (4 kafelki na tle zdjęcia) + wspólny layout podstron:
   piekna-ciaza-przestrzen.html, piekna-kobiecosc.html,
   pieknie-zyc.html, o-mnie.html

   Uwaga: w style.css jest reguła
   `p, li, a, button, input, textarea, label { font-family: ... !important }`
   — dlatego serif na tych elementach ustawiamy z !important.
   ========================================================================= */

:root {
    --pz-crimson: #C41E3A;
    --pz-burgundy: #923D41;
    --pz-burgundy-dark: #6B2E31;
    --pz-gold: #A56A22;
    --pz-pink-bg: #FCEEF2;
    --pz-pink-soft: #FFE8F0;
    --pz-pink-light: #FFF0F2;
    --pz-pink-mist: #FFF8FA;

    /* ——— Skala pierwszego ekranu ———
       Krok typograficzny bierze MNIEJSZY z wymiarów okna, dzięki czemu na
       niskim laptopie (np. 1366×768) treść kurczy się tak samo jak na wąskim
       telefonie — pierwszy widok zawsze mieści się w 100% wysokości. */
    --pz-krok: min(1vw, 1.55vh);
    /* Wysokość przyklejonego nagłówka — rezerwa na górze pierwszego ekranu */
    --pz-naglowek: clamp(4.4rem, 10.8vh, 6.6rem);
}

/* =========================================================================
   1. PIERWSZY EKRAN — wspólna baza portalu i hero podstron

   Portal na stronie głównej i hero podstron to ten sam układ:
   pełna wysokość okna, tekst po lewej, zdjęcie wykrwawione do prawej
   krawędzi i wtopione w różowe tło maską gradientową.
   ========================================================================= */
.portal,
.przestrzen-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: linear-gradient(150deg, #FFF8FA 0%, var(--pz-pink-bg) 58%, #FFE8F0 100%);
    /* Symetryczny odstęp = treść faktycznie na środku ekranu.
       Górny zapewnia prześwit pod przyklejonym nagłówkiem, dolny pod strzałkę. */
    padding: var(--pz-naglowek) 0;
}

/* ——— Zdjęcie: domyślnie tło całej sekcji (tablet i telefon) ——— */
.portal__photo,
.przestrzen-hero__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Zdjęcie pozycjonowane absolutnie — inaczej `height:100%` nie rozwiązuje się
   w gridzie i pionowa fotografia rozpycha sekcję poza 100svh. */
.portal__photo picture,
.przestrzen-hero__photo picture,
.portal__photo img,
.przestrzen-hero__photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.portal__photo img,
.przestrzen-hero__photo img {
    object-fit: cover;
    object-position: 50% 12%;
}

/* Żadna podstrona nie przyciemnia już zdjęcia welonem — fotografie zostają
   w oryginalnych barwach, a czytelność tekstu bierze się z matowej szybki
   pod nim (patrz .przestrzen-hero__inner w sekcji mobilnej niżej). */

/* Poniżej 1024px tekst leży wprost na zdjęciu. Zamiast zagęszczać welon
   (co schowałoby fotografię), dajemy literom miękką białą poświatę — czyta
   się na dowolnym tle, a sama pozostaje niewidoczna. */
/* ——— Mobile: ciemna smuga u samej góry ———
   Daje jasnemu logo i hamburgerowi kontrast niezależnie od tego, czy pod
   spodem jest ciemna zieleń, czy białe tło (Piękna Ciąża). */
@media (max-width: 1023px) {
    .portal__photo::after,
    .przestrzen-hero__photo::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: clamp(6.5rem, 17vh, 11rem);
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(58, 24, 30, 0.62) 0%, rgba(58, 24, 30, 0) 100%);
    }

    /* Strona główna: kadr wyżej — zdjęcie kotwiczymy do DOŁU i przerastamy
       kontener, więc nadmiar obcina się u góry, a sylwetka wjeżdża wyżej.
       (Przy proporcjach telefonu zdjęcie mieści się w pionie co do piksela,
       więc samo `object-position` nic by nie zmieniło.) */
    /* Kadr w poziomie: sylwetka jest w pliku ok. 2,5% na lewo od środka, a że
       zdjęcie wystaje poza szerokość ekranu, na telefonie odchyłka rośnie do
       ~4%. Przesunięcie punktu kotwiczenia w lewo (44% zamiast 50%) ustawia
       postać dokładnie na osi ekranu. */
    .portal__photo img {
        top: auto;
        bottom: 0;
        height: 120%;
        object-position: 44% 12%;
    }
}

/* ——— Mobile i tablet: większy stopień pisma i ciaśniejsze marginesy ———
   Skala `--pz-krok` opiera się na `1vw`, więc na telefonie wszystkie clampy
   spadały do minimum i tekst był drobny. Tutaj sterujemy nim wprost. */
@media (max-width: 1023px) {
    .portal,
    .przestrzen-hero {
        padding-top: calc(var(--pz-naglowek) * 0.72);
    }

    .portal__kicker,
    .przestrzen-hero__kicker {
        font-size: clamp(0.92rem, 3.3vw, 1.1rem);
    }

    .przestrzen-back {
        font-size: clamp(0.78rem, 2.7vw, 0.92rem);
        color: rgba(107, 46, 49, 0.85);
    }

    .portal__title {
        font-size: clamp(2.35rem, 9.4vw, 3.7rem);
    }

    .przestrzen-hero__title {
        font-size: clamp(2.2rem, 9vw, 3.6rem);
    }

    .portal__lead,
    .przestrzen-hero__lead {
        font-size: clamp(1.18rem, 4.4vw, 1.55rem);
    }

    .przestrzen-hero__prose p {
        font-size: clamp(1.12rem, 4.2vw, 1.4rem);
        line-height: 1.6;
    }

    .portal__tile-label {
        font-size: clamp(1.2rem, 4.8vw, 1.6rem);
    }

    .portal__tile-desc {
        font-size: clamp(0.96rem, 3.5vw, 1.15rem);
    }

    /* Strzałka leży na jaśniejszym dole, ale zawsze nad zdjęciem */
    .portal__scroll,
    .przestrzen-hero__scroll {
        text-shadow: 0 0 10px rgba(253, 248, 246, 0.9);
    }

}

.portal__container,
.przestrzen-hero__container {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 6rem);
}

.portal__inner,
.przestrzen-hero__inner {
    width: 100%;
    max-width: min(40rem, 100%);
}

/* ——— Desktop: zdjęcie dostaje własną kolumnę i wtapia się w tło ———

   Szerokość kolumny liczona z WYSOKOŚCI okna (63vh), czyli zawsze węższa niż
   proporcja zdjęcia 2:3. Dzięki temu `object-fit: cover` przycina wyłącznie
   tło po bokach, a cała postać mieści się w kadrze na każdym ekranie.
   Kolumna wychodzi poza padding sekcji (ujemne marginesy), więc zdjęcie
   dotyka górnej i dolnej krawędzi ekranu — jego wysokość to pełne 100svh. */
@media (min-width: 1024px) {
    .portal,
    .przestrzen-hero--foto {
        display: grid;
        grid-template-columns: minmax(0, 1fr) min(42vw, 63vh);
        align-items: center;
    }

    .portal__container,
    .przestrzen-hero--foto .przestrzen-hero__container {
        max-width: 62rem;
        margin: 0 0 0 auto;
        padding-right: clamp(1.5rem, 3vw, 3.5rem);
    }

    /* 54rem, nie 46 — przy 46rem druga linia nagłówka („która świadomie
       kreuje swoje życie.") łamała się na trzeci wers od ok. 1440 px wzwyż. */
    .portal__inner {
        max-width: 54rem;
    }

    .przestrzen-hero--foto .przestrzen-hero__inner {
        max-width: 100%;
    }

    .portal__photo,
    .przestrzen-hero--foto .przestrzen-hero__photo {
        position: relative;
        inset: auto;
        align-self: stretch;
        margin-top: calc(-1 * var(--pz-naglowek));
        margin-bottom: calc(-1 * var(--pz-naglowek));
        overflow: visible;
    }

    /* Miękkie zejście w róż tła — zamiast twardej krawędzi kolumny */
    .portal__photo img,
    .przestrzen-hero--foto .przestrzen-hero__photo img {
        object-position: 50% center;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%);
        mask-image: linear-gradient(to right, transparent 0%, #000 26%);
    }

    /* Strona główna: zdjęcie ma zostać w oryginalnych barwach, więc zmiękczamy
       tylko wąski pas przy krawędzi — tyle, żeby nie było twardego cięcia. */
    .portal__photo img {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%);
        mask-image: linear-gradient(to right, transparent 0%, #000 11%);
    }

    /* Zdjęcie sięga górnej krawędzi ekranu, więc pod nagłówkiem rozjaśniamy
       je smugą — inaczej ciemne tło zjada logo i ikony w menu. */
    .portal__photo::after,
    .przestrzen-hero--foto .przestrzen-hero__photo::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--pz-naglowek) + 1.5rem);
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(253, 248, 246, 0.92) 0%, rgba(253, 248, 246, 0) 100%);
    }
}

/* ——— Ekrany ultrapanoramiczne (21:9, 32:9 — 2560, 3440 px i szersze) ———

   Szerokość kolumny zdjęcia ogranicza wysokość okna (63vh), więc na bardzo
   szerokim monitorze po lewej zostaje ogromny pas wolnego miejsca. Domyślnie
   blok tekstu jest dosunięty do zdjęcia i cała kompozycja ucieka w prawo —
   tutaj centrujemy go w tej wolnej przestrzeni, żeby marginesy się zrównały. */
@media (min-width: 2000px) {
    .portal__container,
    .przestrzen-hero--foto .przestrzen-hero__container {
        max-width: none;
        margin: 0;
    }

    .portal__inner {
        max-width: 60rem;
        margin-inline: auto;
    }

    .przestrzen-hero--foto .przestrzen-hero__inner {
        max-width: 64rem;
        margin-inline: auto;
    }

    /* Krok skalowania jest ograniczony wysokością okna, więc na monitorze
       21:9 typografia zostawała drobna — podnosimy górne limity. */
    .portal__title            { font-size: clamp(1.85rem, calc(var(--pz-krok) * 4.8), 4.25rem); }
    .przestrzen-hero__title   { font-size: clamp(1.7rem, calc(var(--pz-krok) * 3.6), 4rem); }
    .portal__lead,
    .przestrzen-hero__lead    { font-size: clamp(0.95rem, calc(var(--pz-krok) * 1.5), 1.7rem); }
    .portal__tile-label       { font-size: clamp(1rem, calc(var(--pz-krok) * 1.75), 1.85rem); }
    .portal__tile-desc        { font-size: clamp(0.8rem, calc(var(--pz-krok) * 1.05), 1.05rem); }
    .przestrzen-hero__prose p { font-size: clamp(0.88rem, calc(var(--pz-krok) * 1.14), 1.2rem); }
    .przestrzen-hero__prose   { max-width: 52rem; }
}

/* Kadrowanie sterowane per podstrona (poniżej 1024px zdjęcie jest tłem sekcji) */
.przestrzen-hero__photo img[data-kadr="gora"]   { object-position: 50% 6%; }
.przestrzen-hero__photo img[data-kadr="prawa"]  { object-position: 92% center; }

@media (min-width: 1024px) {
    /* Zdjęcie poziome (Piękna Ciąża) — postać stoi przy prawej krawędzi kadru */
    .przestrzen-hero--foto .przestrzen-hero__photo img[data-kadr="prawa"] { object-position: 100% center; }
}

/* =========================================================================
   2. PIERWSZY EKRAN — typografia (skalowana wysokością okna)
   ========================================================================= */
.portal__kicker,
.przestrzen-hero__kicker {
    font-family: var(--font-body) !important;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: clamp(0.8rem, calc(var(--pz-krok) * 1.0), 0.98rem);
    font-weight: 700;
    color: var(--pz-gold);
    margin: 0 0 clamp(0.4rem, 1.4vh, 1rem);
}

.portal__title {
    font-family: var(--font-display);
    /* Górny limit 3,6rem (≈58 px) to najwięcej, przy którym druga linia
       mieści się w 54rem — powyżej robiły się trzy wersy. */
    font-size: clamp(1.85rem, calc(var(--pz-krok) * 4.8), 3.6rem);
    font-weight: 700;
    line-height: 1.04;
    text-wrap: pretty;
    letter-spacing: -0.015em;
    color: var(--pz-burgundy-dark);
    margin: 0 0 clamp(0.5rem, 1.4vh, 1rem);
    overflow-wrap: break-word;
}

.portal__title strong {
    color: var(--pz-crimson);
    font-weight: 700;
}

.portal__lead,
.przestrzen-hero__lead {
    font-family: var(--font-display) !important;
    font-style: italic;
    font-size: clamp(0.95rem, calc(var(--pz-krok) * 1.5), 1.5rem);
    line-height: 1.4;
    color: rgba(107, 46, 49, 0.82);
    margin: 0 0 clamp(0.9rem, 2.6vh, 2rem);
    max-width: 40rem;
}

/* ——— Kafelki (owale ze szkicu) ——— */
.portal__tiles {
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 1.1vh, 0.85rem);
}

.portal__tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(0.5rem, 1.4vh, 0.95rem) clamp(1rem, 2vw, 1.75rem);
    border: 1.5px solid rgba(196, 30, 58, 0.62);
    border-radius: 999px;
    background: rgba(255, 246, 249, 0.88);
    -webkit-backdrop-filter: blur(10px) saturate(170%);
    backdrop-filter: blur(10px) saturate(170%);
    box-shadow: 0 8px 26px -13px rgba(146, 61, 65, 0.6);
    text-decoration: none !important;
    overflow: hidden;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1),
                background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wypełnienie wjeżdżające od lewej przy hoverze */
.portal__tile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--pz-crimson) 0%, var(--pz-burgundy) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 450ms cubic-bezier(0.65, 0, 0.35, 1);
}

.portal__tile-body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
}

.portal__tile-label {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1rem, calc(var(--pz-krok) * 1.75), 1.6rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pz-crimson);
    transition: color 350ms ease;
}

.portal__tile-desc {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(0.8rem, calc(var(--pz-krok) * 1.05), 0.95rem);
    font-weight: 500;
    line-height: 1.3;
    color: rgba(107, 46, 49, 0.8);
    margin-top: 0.2rem;
    transition: color 350ms ease;
}

.portal__tile-arrow {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(1.7rem, 3.4vh, 2.25rem);
    height: clamp(1.7rem, 3.4vh, 2.25rem);
    border-radius: 50%;
    border: 1.5px solid rgba(196, 30, 58, 0.55);
    color: var(--pz-crimson);
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1;
    transition: color 350ms ease, border-color 350ms ease, transform 350ms ease;
}

.portal__tile:hover,
.portal__tile:focus-visible {
    transform: translateX(6px);
    border-color: transparent;
    box-shadow: 0 16px 34px -16px rgba(196, 30, 58, 0.55);
}

.portal__tile:hover::before,
.portal__tile:focus-visible::before {
    transform: scaleX(1);
}

.portal__tile:hover .portal__tile-label,
.portal__tile:focus-visible .portal__tile-label {
    color: #fff;
}

.portal__tile:hover .portal__tile-desc,
.portal__tile:focus-visible .portal__tile-desc {
    color: rgba(255, 255, 255, 0.82);
}

.portal__tile:hover .portal__tile-arrow,
.portal__tile:focus-visible .portal__tile-arrow {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateX(3px);
}

.portal__tile:focus-visible {
    outline: 2px solid var(--pz-crimson);
    outline-offset: 4px;
}

/* ——— Hero podstrony: powrót, tytuł ——— */
.przestrzen-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body) !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: clamp(0.65rem, calc(var(--pz-krok) * 0.76), 0.72rem);
    font-weight: 700;
    color: rgba(107, 46, 49, 0.6);
    text-decoration: none !important;
    margin-bottom: clamp(0.7rem, 2.2vh, 1.5rem);
    transition: color 300ms ease, gap 300ms ease;
}

.przestrzen-back:hover {
    color: var(--pz-crimson);
    gap: 0.8rem;
}

/* Mniejszy niż na starcie — pod nagłówkiem mieści się teraz cały opis strony */
.przestrzen-hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, calc(var(--pz-krok) * 3.6), 3.4rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--pz-crimson);
    margin: 0 0 clamp(0.5rem, 1.4vh, 1rem);
    overflow-wrap: break-word;
}

/* ——— Opis strony wewnątrz hero (bez przewijania) ——— */
.przestrzen-hero__prose {
    max-width: 44rem;
}

.przestrzen-hero__prose p {
    font-family: var(--font-body) !important;
    font-size: clamp(0.88rem, calc(var(--pz-krok) * 1.14), 1.08rem);
    line-height: 1.58;
    color: var(--pz-burgundy-dark);
    margin: 0 0 clamp(0.45rem, 1.3vh, 0.85rem);
}

.przestrzen-hero__prose p:last-child {
    margin-bottom: 0;
}

.przestrzen-hero__prose strong {
    color: var(--pz-crimson);
    font-weight: 600;
}

.przestrzen-hero__prose em {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1em;
    color: var(--pz-burgundy);
}

/* Gdy w hero jest pełny opis, lead jest krótkim wprowadzeniem — mniejszy odstęp */
.przestrzen-hero__inner:has(.przestrzen-hero__prose) .przestrzen-hero__lead {
    margin-bottom: clamp(0.6rem, 1.6vh, 1.1rem);
}

/* ——— Zaproszenie do przewinięcia ——— */
.portal__scroll,
.przestrzen-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: clamp(0.75rem, 2vh, 1.5rem);
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body) !important;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(107, 46, 49, 0.6);
    text-decoration: none !important;
    transition: color 300ms ease;
}

.portal__scroll:hover,
.przestrzen-hero__scroll:hover {
    color: var(--pz-crimson);
}

.portal__scroll-line,
.przestrzen-hero__scroll-line {
    display: block;
    width: 1px;
    height: clamp(1.25rem, 3vh, 2.25rem);
    background: linear-gradient(to bottom, rgba(146, 61, 65, 0.5), transparent);
    animation: portalScroll 2.4s ease-in-out infinite;
}

@keyframes portalScroll {
    0%, 100% { opacity: 0.35; transform: scaleY(0.7); transform-origin: top; }
    50%      { opacity: 1;    transform: scaleY(1);   transform-origin: top; }
}

/* ——— Tablet ——— */
@media (max-width: 1023px) {
    /* Tekst schodzi na dół, bo zdjęcie jest tłem całej sekcji.
       Hero bez zdjęcia (sklep, kontakt) zostaje wyśrodkowane. */
    .portal,
    .przestrzen-hero--foto {
        align-items: flex-end;
        padding-bottom: clamp(3rem, 8vh, 5rem);
    }

    /* Hero z krótkim tekstem (sklep, kontakt) — kafelek ani na środku, ani
       przy samej krawędzi: środek bloku ląduje ok. 3/4 wysokości ekranu. */
    .przestrzen-hero--krotki {
        align-items: flex-end;
        padding-bottom: clamp(4.5rem, 13vh, 7.5rem);
    }

    /* Strona główna — blok tekstu schodzi nieco niżej, żeby odsłonić szyję
       i naszyjnik na zdjęciu (szybka zaczynała się tuż pod brodą). */
    .portal {
        padding-bottom: clamp(2.5rem, 5.5vh, 3.5rem);
    }

    .portal__inner,
    .przestrzen-hero__inner {
        max-width: min(34rem, 100%);
        margin: 0 auto;
        text-align: center;
    }

    .przestrzen-hero__lead {
        margin-left: auto;
        margin-right: auto;
    }

    /* Dłuższy opis czyta się źle wyjustowany do środka — wracamy do lewej */
    .przestrzen-hero__prose {
        text-align: left;
    }

    .portal__tile {
        text-align: left;
    }
}

/* ——— Telefon ——— */
@media (max-width: 767px) {
    .portal__tile {
        gap: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal__tile,
    .portal__tile::before,
    .portal__tile-arrow,
    .portal__scroll-line,
    .przestrzen-hero__scroll-line {
        transition: none;
        animation: none;
    }
}

/* =========================================================================
   3. PODSTRONY PRZESTRZENI — hero bez zdjęcia (sklep, kontakt)
   ========================================================================= */
.przestrzen-hero--tekst {
    text-align: center;
    justify-content: center;
}

.przestrzen-hero--tekst .przestrzen-hero__container {
    max-width: 60rem;
}

.przestrzen-hero--tekst .przestrzen-hero__inner {
    max-width: 100%;
    margin: 0 auto;
}

.przestrzen-hero--tekst .przestrzen-hero__lead {
    margin-left: auto;
    margin-right: auto;
}

/* Ozdobny okrąg w tle — tylko gdy nie ma zdjęcia */
.przestrzen-hero--tekst::before {
    content: '';
    position: absolute;
    top: -35%;
    right: -12%;
    width: min(46rem, 80vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 232, 240, 0.9) 0%, rgba(255, 232, 240, 0) 68%);
    pointer-events: none;
}

/* =========================================================================
   4. PODSTRONY PRZESTRZENI — sekcje treści
   ========================================================================= */
.przestrzen-section {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    background: #fff;
}


.przestrzen-section--pink {
    background: linear-gradient(170deg, var(--pz-pink-mist) 0%, var(--pz-pink-light) 100%);
}

.przestrzen-section--soft {
    background: var(--pz-pink-mist);
}

.przestrzen__container {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.przestrzen__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.6vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--pz-crimson);
    text-align: center;
    margin: 0 0 1.5rem;
}

.przestrzen__subtitle {
    font-family: var(--font-display) !important;
    font-style: italic;
    font-size: clamp(1.1rem, 2.1vw, 1.4rem);
    color: var(--pz-burgundy);
    text-align: center;
    max-width: 42rem;
    margin: -0.5rem auto 2.5rem;
}

/* ——— Proza (krótki opis przestrzeni) ——— */
.przestrzen__prose {
    max-width: 46rem;
    margin: 0 auto;
}

.przestrzen__prose p {
    font-family: var(--font-body) !important;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--pz-burgundy-dark);
    margin: 0 0 1.15rem;
}

.przestrzen__prose p:last-child {
    margin-bottom: 0;
}

.przestrzen__prose strong {
    color: var(--pz-crimson);
    font-weight: 600;
}

.przestrzen__prose em {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1em;
    color: var(--pz-burgundy);
}

/* Wyróżniony cytat / puenta */
.przestrzen__pull {
    max-width: 44rem;
    margin: 2.5rem auto 0;
    padding: 1.75rem 2rem;
    border-left: 3px solid var(--pz-crimson);
    background: var(--pz-pink-light);
    border-radius: 0 4px 4px 0;
}

.przestrzen__pull p {
    font-family: var(--font-display) !important;
    font-style: italic;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    line-height: 1.4;
    color: var(--pz-burgundy);
    margin: 0;
}

/* ——— Lista „dla kogo / co znajdziesz” ——— */
.przestrzen__checklist {
    list-style: none;
    max-width: 44rem;
    margin: 2rem auto 0;
    padding: 0;
    display: grid;
    gap: 0.8rem;
}

.przestrzen__checklist li {
    position: relative;
    padding-left: 2rem;
    font-family: var(--font-body) !important;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--pz-burgundy-dark);
}

.przestrzen__checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pz-crimson), var(--pz-burgundy));
}

/* Cel linku kotwicowego nie może chować się pod przyklejonym nagłówkiem.
   Reguła na `[id]`, nie na `:target` — `:target` nie łapie przewijania
   wywołanego z JS (scrollIntoView), a `scroll-margin` i tak działa tylko
   wtedy, gdy do elementu faktycznie przewijamy. */
[id] {
    scroll-margin-top: calc(var(--pz-naglowek) + 1.5rem);
}

/* ——— Zaproszenie na końcu sekcji (CTA) ——— */
.przestrzen__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 44rem;
    margin: 2.75rem auto 0;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    text-align: center;
    background: linear-gradient(170deg, var(--pz-pink-mist) 0%, var(--pz-pink-light) 100%);
    border: 1px solid rgba(196, 30, 58, 0.12);
    border-radius: 6px;
}

.przestrzen-section--pink .przestrzen__cta {
    background: rgba(255, 255, 255, 0.75);
}

.przestrzen__cta-text {
    font-family: var(--font-display) !important;
    font-style: italic;
    font-size: clamp(1.1rem, 2.1vw, 1.4rem);
    line-height: 1.45;
    color: var(--pz-burgundy);
    margin: 0;
}

/* =========================================================================
   5. PRODUKTY — kurs / e-book
   ========================================================================= */
.produkty {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    margin-top: 2.5rem;
}

.produkt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: clamp(1.75rem, 4vw, 3rem);
    background: #fff;
    border: 1px solid rgba(196, 30, 58, 0.12);
    border-radius: 6px;
    box-shadow: 0 20px 50px -34px rgba(107, 46, 49, 0.5);
}

.przestrzen-section--pink .produkt {
    background: rgba(255, 255, 255, 0.85);
}

.produkt__cover {
    flex: 0 0 auto;
    width: min(72%, 17.5rem);
}

.produkt__cover img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 26px 60px -26px rgba(107, 46, 49, 0.55);
}

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

.produkt__kicker {
    font-family: var(--font-body) !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pz-gold);
    margin: 0 0 0.6rem;
}

.produkt__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--pz-burgundy);
    margin: 0 0 0.9rem;
}

.produkt__lead {
    font-family: var(--font-display) !important;
    font-style: italic;
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    line-height: 1.4;
    color: var(--pz-crimson);
    margin: 0 0 1.1rem;
}

.produkt__text {
    font-family: var(--font-body) !important;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--pz-burgundy-dark);
    margin: 0 0 1.25rem;
}

.produkt__text strong {
    color: var(--pz-crimson);
    font-weight: 600;
}

.produkt__list {
    list-style: none;
    display: grid;
    gap: 0.55rem;
    margin: 0 auto 1.4rem;
    padding: 0;
    max-width: 30rem;
    text-align: left;
}

.produkt__list li {
    position: relative;
    padding-left: 1.7rem;
    font-family: var(--font-body) !important;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--pz-burgundy-dark);
}

.produkt__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pz-crimson), var(--pz-burgundy));
}

.produkt__meta {
    font-family: var(--font-display) !important;
    font-style: italic;
    font-size: 1rem;
    color: rgba(107, 46, 49, 0.7);
    margin: 0 0 1.5rem;
}

.produkt__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 1.35rem;
}

/* Stara, przekreślona cena przy promocji */
.produkt__price-old {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    font-weight: 600;
    color: rgba(107, 46, 49, 0.55);
    text-decoration: line-through;
    line-height: 1;
}

.produkt__price-value {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.6vw, 2.4rem);
    font-weight: 700;
    color: var(--pz-crimson);
    line-height: 1;
}

.produkt__price-note {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: rgba(107, 46, 49, 0.6);
}

/* Blok ceny ukryty przez licznik promocji ([hidden] musi wygrać z display:flex) */
.produkt__price[hidden],
.sklep-karta__price[hidden] {
    display: none;
}

/* Wyróżniona cena promocyjna — duża cena promo, przekreślona regularna,
   nota w kolorze marki w osobnej linii */
.produkt__price--promo {
    flex-wrap: wrap;
    row-gap: 0.35rem;
}

.produkt__price--promo .produkt__price-value {
    font-size: clamp(2.3rem, 4.8vw, 3.1rem);
}

/* Mocniej widoczne przekreślenie starej ceny przy promocji */
.produkt__price--promo .produkt__price-old {
    text-decoration-color: var(--pz-crimson);
    text-decoration-thickness: 2px;
}

.produkt__price--promo .produkt__price-note {
    flex-basis: 100%;
    color: var(--pz-crimson);
    font-weight: 600;
}

.produkt__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
}

.produkt__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 2.2rem;
    border-radius: 40px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--pz-crimson) 0%, var(--pz-burgundy) 100%);
    color: #fff !important;
    font-family: var(--font-body) !important;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: 0 10px 26px -10px rgba(196, 30, 58, 0.55);
    transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
}

.produkt__cta:hover {
    background: linear-gradient(135deg, var(--pz-burgundy) 0%, var(--pz-burgundy-dark) 100%);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -12px rgba(196, 30, 58, 0.6);
}

.produkt__cta--ghost {
    background: transparent;
    color: var(--pz-burgundy) !important;
    border-color: rgba(146, 61, 65, 0.45);
    box-shadow: none;
}

.produkt__cta--ghost:hover {
    background: var(--pz-burgundy);
    color: #fff !important;
    border-color: var(--pz-burgundy);
}

.produkt__terms {
    font-family: var(--font-body) !important;
    font-size: 0.85rem;
    color: rgba(107, 46, 49, 0.55);
    margin: 1rem 0 0;
}

.produkt__terms a {
    color: var(--pz-burgundy) !important;
    text-decoration: underline !important;
}

/* ——— Wariant „Wkrótce” ——— */
.produkt--soon {
    background: rgba(255, 255, 255, 0.6);
    border-style: dashed;
    border-color: rgba(146, 61, 65, 0.3);
    box-shadow: none;
}

.produkt__badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    background: var(--pz-pink-soft);
    color: var(--pz-crimson);
    font-family: var(--font-body) !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 0.9rem;
}

/* ——— Produkty: desktop ——— */
@media (min-width: 900px) {
    .produkt {
        flex-direction: row;
        align-items: center;
        gap: clamp(2.5rem, 4vw, 4rem);
    }

    .produkt--reverse {
        flex-direction: row-reverse;
    }

    .produkt__cover {
        width: 19rem;
    }

    .produkt__body {
        flex: 1 1 auto;
        text-align: left;
    }

    .produkt__list {
        margin-left: 0;
        margin-right: 0;
    }

    .produkt__price,
    .produkt__actions {
        justify-content: flex-start;
    }
}

/* =========================================================================
   6. SKLEP — siatka kart produktowych (podstrona „Sklep”)
   ========================================================================= */
.sklep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: 2.5rem;
}

.sklep-karta {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(196, 30, 58, 0.12);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 20px 50px -34px rgba(107, 46, 49, 0.5);
    transition: transform 350ms ease, box-shadow 350ms ease;
}

.sklep-karta:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 56px -30px rgba(107, 46, 49, 0.6);
}

.sklep-karta__media {
    position: relative;
    background: linear-gradient(160deg, var(--pz-pink-mist) 0%, var(--pz-pink-light) 100%);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.sklep-karta__media img {
    width: 100%;
    height: auto;
    max-height: 20rem;
    object-fit: contain;
    border-radius: 3px;
    filter: drop-shadow(0 18px 34px rgba(107, 46, 49, 0.35));
}

.sklep-karta__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.sklep-karta__kicker {
    font-family: var(--font-body) !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--pz-gold);
    margin: 0 0 0.5rem;
}

.sklep-karta__title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--pz-burgundy);
    margin: 0 0 0.7rem;
}

.sklep-karta__text {
    font-family: var(--font-body) !important;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--pz-burgundy-dark);
    margin: 0 0 1rem;
}

.sklep-karta__meta {
    font-family: var(--font-display) !important;
    font-style: italic;
    font-size: 0.95rem;
    color: rgba(107, 46, 49, 0.7);
    margin: 0 0 1.25rem;
}

/* Stopka karty zawsze przy dolnej krawędzi — karty w rzędzie są równe */
.sklep-karta__foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sklep-karta__price {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

/* Stara, przekreślona cena przy promocji */
.sklep-karta__price-old {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 600;
    color: rgba(107, 46, 49, 0.55);
    text-decoration: line-through;
    line-height: 1;
}

.sklep-karta__price-value {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--pz-crimson);
    line-height: 1;
}

.sklep-karta__price-note {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: rgba(107, 46, 49, 0.6);
}

/* Nota cenowa zawsze w osobnej linii — karty trzymają jednolity układ */
.sklep-karta__price {
    flex-wrap: wrap;
    row-gap: 0.3rem;
}

.sklep-karta__price-note {
    flex-basis: 100%;
}


.sklep-karta__price--promo .sklep-karta__price-note {
    color: var(--pz-crimson);
    font-weight: 600;
}

.sklep-karta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.sklep-karta__actions .produkt__cta {
    flex: 1 1 auto;
    padding: 0.85rem 1.4rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

/* =========================================================================
   7. CERTYFIKATY (podstrona „O mnie”)
   ========================================================================= */
.certyfikaty {
    display: grid;
    /* Górny limit szerokości kolumny — przy 2 certyfikatach karty nie rozjeżdżają się na pół ekranu */
    grid-template-columns: repeat(auto-fit, minmax(15rem, 22rem));
    justify-content: center;
    gap: 1.75rem;
    margin-top: 2.5rem;
}

.certyfikat {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid rgba(176, 137, 79, 0.35);
    border-radius: 4px;
    box-shadow: 0 16px 40px -30px rgba(107, 46, 49, 0.55);
    transition: transform 350ms ease, box-shadow 350ms ease;
}

.certyfikat:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px -26px rgba(107, 46, 49, 0.6);
}

.certyfikat img {
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/* ——— Passe-partout ———
   Certyfikaty mają różne formaty (jeden poziomy 842×581, drugi pionowy
   571×843). Kwadratowa ramka z marginesem wyrównuje je optycznie: poziomy
   dobija do szerokości, pionowy do wysokości, a zajmowana powierzchnia
   wychodzi w obu przypadkach niemal identyczna — karty stoją równo,
   niezależnie od orientacji skanu. */
.certyfikat__ramka {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    padding: clamp(0.75rem, 2.2vw, 1.35rem);
    border-radius: 2px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--pz-pink-mist) 0%, var(--pz-pink-light) 100%);
    text-decoration: none !important;
}

.certyfikat__ramka img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 1px;
    box-shadow: 0 12px 28px -16px rgba(107, 46, 49, 0.55);
    transition: transform 350ms ease;
}

.certyfikat__ramka:hover img,
.certyfikat__ramka:focus-visible img {
    transform: scale(1.03);
}

.certyfikat__ramka:focus-visible {
    outline: 2px solid var(--pz-crimson);
    outline-offset: 2px;
}

/* Podpowiedź, że skan można otworzyć w pełnym rozmiarze */
.certyfikat__zoom {
    display: block;
    margin-top: 0.55rem;
    font-family: var(--font-body) !important;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pz-gold);
    opacity: 0.85;
}

.certyfikat figcaption {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--pz-burgundy-dark);
    text-align: center;
    padding: 0.9rem 0.5rem 0.35rem;
}

.certyfikat figcaption strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pz-burgundy);
    margin-bottom: 0.2rem;
}

/* Miejsce na skan certyfikatu — zastąp <img> gdy zdjęcie będzie gotowe */
.certyfikat__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    aspect-ratio: 3 / 4;
    border-radius: 2px;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(252, 238, 242, 0.9) 0 12px,
            rgba(255, 248, 250, 0.9) 12px 24px
        );
    color: var(--pz-gold);
}

.certyfikat__placeholder svg {
    width: 3.25rem;
    height: 3.25rem;
    opacity: 0.75;
}

.certyfikat__placeholder span {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(107, 46, 49, 0.45);
}

/* =========================================================================
   8. SESJE INDYWIDUALNE — formularz (podstrona „Pięknie Żyć”)
   ========================================================================= */
.sesja {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

@media (min-width: 900px) {
    .sesja {
        grid-template-columns: 1fr 1.15fr;
    }
}

.sesja__info h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    color: var(--pz-burgundy);
    margin: 0 0 1rem;
}

/* „Jak to wygląda" kleiło się do ramki z cytatem nad sekcją — dokładamy
   odstępu. Tylko pierwszy nagłówek: drugi ma już zapas od akapitu wyżej. */
.sesja__info h3:first-child {
    margin-top: clamp(2.25rem, 3vw, 2.75rem);
}

.sesja__info p {
    font-family: var(--font-body) !important;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--pz-burgundy-dark);
    margin: 0 0 1.1rem;
}

.sesja__list {
    list-style: none;
    display: grid;
    gap: 0.7rem;
    margin: 1.25rem 0 0;
    padding: 0;
}

.sesja__list li {
    position: relative;
    padding-left: 1.7rem;
    font-family: var(--font-body) !important;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--pz-burgundy-dark);
}

.sesja__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pz-crimson), var(--pz-burgundy));
}

.sesja__form {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: #fff;
    border: 1px solid rgba(196, 30, 58, 0.12);
    border-radius: 6px;
    box-shadow: 0 20px 50px -34px rgba(107, 46, 49, 0.5);
}

.sesja__field {
    margin-bottom: 1.15rem;
}

.sesja__field label {
    display: block;
    font-family: var(--font-body) !important;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pz-burgundy);
    margin-bottom: 0.4rem;
}

.sesja__field input,
.sesja__field select,
.sesja__field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(146, 61, 65, 0.25);
    border-radius: 4px;
    background: var(--pz-pink-mist);
    font-family: var(--font-body) !important;
    font-size: 1rem;
    color: var(--pz-burgundy-dark);
    transition: border-color 250ms ease, box-shadow 250ms ease, background-color 250ms ease;
}

.sesja__field textarea {
    min-height: 8.5rem;
    resize: vertical;
    line-height: 1.5;
}

.sesja__field input:focus,
.sesja__field select:focus,
.sesja__field textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--pz-crimson);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.12);
}

.sesja__field input::placeholder,
.sesja__field textarea::placeholder {
    color: rgba(107, 46, 49, 0.4);
}

.sesja__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 1.4rem;
}

.sesja__consent input {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    accent-color: var(--pz-crimson);
}

.sesja__consent label {
    font-family: var(--font-body) !important;
    font-size: 0.88rem;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(107, 46, 49, 0.75);
    margin: 0;
}

.sesja__consent a {
    color: var(--pz-burgundy) !important;
    text-decoration: underline !important;
}

.sesja__submit {
    width: 100%;
    padding: 1rem 2rem;
    border: none;
    border-radius: 40px;
    background: linear-gradient(135deg, var(--pz-crimson) 0%, var(--pz-burgundy) 100%);
    color: #fff;
    font-family: var(--font-body) !important;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 26px -10px rgba(196, 30, 58, 0.55);
    transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease, opacity 300ms ease;
}

.sesja__submit:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--pz-burgundy) 0%, var(--pz-burgundy-dark) 100%);
    transform: translateY(-2px);
}

.sesja__submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.sesja__message {
    margin-top: 1.1rem;
    padding: 0.9rem 1.1rem;
    border-radius: 4px;
    font-family: var(--font-body) !important;
    font-size: 0.98rem;
    line-height: 1.45;
}

.sesja__message--ok {
    background: var(--pz-pink-soft);
    color: var(--pz-burgundy-dark);
    border: 1px solid rgba(196, 30, 58, 0.25);
}

.sesja__message--error {
    background: #FFF1F1;
    color: #8B1538;
    border: 1px solid rgba(139, 21, 56, 0.3);
}

/* =========================================================================
   9. Nawigacja między przestrzeniami (stopka podstrony)
   ========================================================================= */
.przejscia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}

.przejscie {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(146, 61, 65, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    text-decoration: none !important;
    text-align: center;
    transition: transform 350ms ease, border-color 350ms ease, background-color 350ms ease, box-shadow 350ms ease;
}

.przejscie:hover {
    transform: translateY(-3px);
    border-color: var(--pz-crimson);
    background: #fff;
    box-shadow: 0 14px 30px -18px rgba(196, 30, 58, 0.5);
}

.przejscie span {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pz-burgundy-dark);
}

.przejscie small {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: rgba(107, 46, 49, 0.6);
}

/* =========================================================================
   10. Zdjęcie + tekst (blok „historia”)
   ========================================================================= */
.blok-foto {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
}

@media (min-width: 900px) {
    .blok-foto {
        grid-template-columns: 0.85fr 1.15fr;
        align-items: stretch;
    }

    .blok-foto--reverse .blok-foto__media {
        order: 2;
    }
}

.blok-foto__media img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 26px 60px -32px rgba(107, 46, 49, 0.6);
}

/* Zdjęcie dociąga się do wysokości kolumny z tekstem — bez tego pod krótszym
   zdjęciem zostaje pusta luka. Musi stać PO regule bazowej wyżej (ta sama
   specyficzność, więc decyduje kolejność), a obrazek pozycjonujemy absolutnie,
   bo `height:100%` w komórce gridu się nie rozwiązuje. */
@media (min-width: 900px) {
    .blok-foto__media {
        position: relative;
    }

    .blok-foto__media picture,
    .blok-foto__media img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }

    .blok-foto__media img {
        object-fit: cover;
    }
}

.blok-foto__body p {
    font-family: var(--font-body) !important;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--pz-burgundy-dark);
    margin: 0 0 1.15rem;
}

.blok-foto__body p:last-child {
    margin-bottom: 0;
}

.blok-foto__body strong {
    color: var(--pz-crimson);
    font-weight: 600;
}

.blok-foto__body h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--pz-burgundy);
    margin: 0 0 1rem;
}


/* =========================================================================
   9. MOBILE — KAFELEK POD TEKSTEM HERO

   Zdjęcia zostają w oryginalnych barwach (żadnego welonu na całą fotografię),
   a czytelność tekstu daje matowa szybka pod samym blokiem treści — ten sam
   materiał co kafelki przestrzeni na stronie głównej.

   Blok stoi na KOŃCU arkusza celowo: reguły bazowe mają tę samą wagę
   selektora, a media query wagi nie podnosi — decyduje kolejność w pliku.
   ========================================================================= */
@media (max-width: 1023px) {
    .portal__intro,
    .przestrzen-hero--foto:not(.przestrzen-hero--gradient) .przestrzen-hero__inner {
        background: rgba(255, 246, 249, 0.66);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        backdrop-filter: blur(16px) saturate(180%);
        border: 1.5px solid rgba(196, 30, 58, 0.18);
        border-radius: 22px;
        box-shadow: 0 12px 32px -18px rgba(146, 61, 65, 0.65);
    }

    .portal__intro {
        padding: clamp(0.75rem, 2.1vh, 1.25rem) clamp(1rem, 4vw, 1.6rem) clamp(0.65rem, 1.8vh, 1.05rem);
        margin-bottom: clamp(0.5rem, 1.4vh, 0.9rem);
    }

    /* Na szybce lead nie potrzebuje już własnego odstępu od kafelków */
    .portal__intro .portal__lead {
        margin-bottom: 0;
    }

    .przestrzen-hero--foto:not(.przestrzen-hero--gradient) .przestrzen-hero__inner {
        padding: clamp(1rem, 2.6vh, 1.6rem) clamp(1.1rem, 4.5vw, 1.75rem) clamp(1rem, 2.4vh, 1.5rem);
    }

    /* Wariant bez szybki (przestrzenie + Pokochaj Siebie): zamiast kafelka
       pod tekstem — gradient rozjaśniający zdjęcie ku dołowi, w kolorze tła
       strony. Rozciąga się na całą wysokość kadru i startuje od zera przy
       samej górze, więc góra fotografii zostaje w oryginalnych barwach,
       a rozjaśnienie narasta płynnie aż do bloku tekstu. */
    .przestrzen-hero--gradient .przestrzen-hero__photo::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            rgba(253, 248, 246, 0) 0%,
            rgba(253, 248, 246, 0) 25%,
            rgba(253, 248, 246, 0.55) 50%,
            rgba(253, 248, 246, 0.9) 68%,
            rgba(253, 248, 246, 0.97) 100%
        );
    }

    /* Ostatni akapit opisu nie potrzebuje odstępu — robi go padding szybki */
    .przestrzen-hero--foto .przestrzen-hero__prose p:last-child {
        margin-bottom: 0;
    }
}

/* =========================================================================
   14. HERO WARSZTATU — kluczowa grafika + tekst
   Używane na: pieknie-zyj-w-rytmie-kobiecosci.html
   ========================================================================= */
.warsztat-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, #FFF8FA 0%, var(--pz-pink-bg) 58%, #FFE8F0 100%);
    padding: calc(var(--pz-naglowek) + clamp(0.5rem, 2vh, 1.5rem)) 0 clamp(2.5rem, 7vw, 4.5rem);
}

/* Ozdobny okrąg w tle — ten sam motyw co w hero bez zdjęcia */
.warsztat-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -18%;
    width: min(46rem, 85vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 232, 240, 0.9) 0%, rgba(255, 232, 240, 0) 68%);
    pointer-events: none;
}

.warsztat-hero__container {
    position: relative;
    z-index: 1;
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 3rem);
    display: grid;
    gap: clamp(1.75rem, 5vw, 3.5rem);
    align-items: center;
}

.warsztat-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 70px -30px rgba(107, 46, 49, 0.5);
}

.warsztat-hero__body {
    text-align: center;
}

/* Trzy krótkie fakty pod leadem — zamiast kolejnego akapitu */
.warsztat-hero__fakty {
    list-style: none;
    margin: 0 0 clamp(1.25rem, 3vh, 2rem);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.6rem;
}

.warsztat-hero__fakty li {
    font-family: var(--font-body) !important;
    font-size: clamp(0.82rem, 1.8vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--pz-burgundy-dark);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(196, 30, 58, 0.16);
    border-radius: 999px;
    padding: 0.42rem 0.95rem;
}

@media (min-width: 62em) {
    .warsztat-hero__container {
        grid-template-columns: 1.02fr 0.98fr;
        gap: clamp(2.5rem, 5vw, 4.5rem);
    }

    .warsztat-hero__body {
        text-align: left;
    }

    .warsztat-hero__fakty {
        justify-content: flex-start;
    }
}

/* =========================================================================
   15. BONUSY Z OKŁADKAMI — materiały wliczone w cenę warsztatu
   Używane na: pieknie-zyj-w-rytmie-kobiecosci.html
   ========================================================================= */
.bonusy {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    max-width: 56rem;
    margin: 0 auto;
}

.bonus {
    display: grid;
    grid-template-columns: minmax(6.5rem, 9rem) 1fr;
    gap: clamp(1rem, 3vw, 1.75rem);
    align-items: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(196, 30, 58, 0.14);
    border-radius: var(--radius-xl);
    padding: clamp(1rem, 3vw, 1.75rem);
}

.bonus__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: 0 18px 34px -16px rgba(107, 46, 49, 0.5);
}

.bonus__kicker {
    font-family: var(--font-body) !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--pz-gold);
    margin: 0 0 0.35rem;
}

.bonus__title {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.6vw, 1.55rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--pz-burgundy-dark);
    margin: 0 0 0.5rem;
}

.bonus__text {
    font-family: var(--font-body) !important;
    font-size: clamp(0.9rem, 2vw, 1rem);
    line-height: 1.55;
    color: rgba(107, 46, 49, 0.85);
    margin: 0 0 0.85rem;
}

.bonus__wartosc {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-family: var(--font-body) !important;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--pz-crimson);
    background: var(--pz-pink-light);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
}

.bonus__wartosc s {
    font-weight: 600;
    color: rgba(107, 46, 49, 0.55);
}

.bonusy__suma {
    max-width: 56rem;
    margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
    text-align: center;
    font-family: var(--font-display) !important;
    font-style: italic;
    font-size: clamp(1.05rem, 2.6vw, 1.4rem);
    color: var(--pz-burgundy-dark);
}

.bonusy__suma strong {
    font-style: normal;
    color: var(--pz-crimson);
}

@media (min-width: 48em) {
    .bonusy {
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
    }

    .bonus {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        text-align: center;
    }

    .bonus__media {
        max-width: 11rem;
        margin: 0 auto clamp(0.85rem, 2vw, 1.25rem);
    }

    /* Pastylka z wartością zawsze przy dolnej krawędzi — obie karty równo */
    .bonus__body {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .bonus__wartosc {
        margin-top: auto;
        align-self: center;
    }
}

/* =========================================================================
   16. PORY ROKU — cztery kafelki w jednym rzędzie
   Używane na: pieknie-zyj-w-rytmie-kobiecosci.html (sekcja „Co znajdziesz
   w środku?"). Cztery moduły cyklu stoją obok siebie jak mapa roku.
   ========================================================================= */
.pory {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.85rem, 2vw, 1.25rem);
    margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

.pora {
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid rgba(146, 61, 65, 0.25);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.72);
    text-align: center;
    transition: transform 350ms ease, border-color 350ms ease,
                background-color 350ms ease, box-shadow 350ms ease;
}

.pora:hover {
    transform: translateY(-3px);
    border-color: var(--pz-crimson);
    background: #fff;
    box-shadow: 0 14px 30px -18px rgba(196, 30, 58, 0.5);
}

.pora__nr {
    font-family: var(--font-body) !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--pz-gold);
    margin-bottom: 0.6rem;
}

.pora__nazwa {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    font-weight: 700;
    line-height: 1;
    color: var(--pz-crimson);
    margin: 0 0 0.35rem;
}

.pora__haslo {
    font-family: var(--font-display) !important;
    font-style: italic;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    color: var(--pz-burgundy-dark);
    margin: 0 0 0.75rem;
}

.pora__opis {
    font-family: var(--font-body) !important;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(107, 46, 49, 0.82);
    margin: 0;
}

/* Cienka kreska pod nazwą pory — subtelne domknięcie kafelka */
.pora__nazwa::after {
    content: '';
    display: block;
    width: 2.2rem;
    height: 1px;
    margin: 0.55rem auto 0;
    background: rgba(196, 30, 58, 0.35);
}

@media (min-width: 34em) {
    .pory {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Cztery w jednym rzędzie, kafelki zbliżone do kwadratu */
@media (min-width: 62em) {
    .pory {
        grid-template-columns: repeat(4, 1fr);
    }

    .pora {
        aspect-ratio: 1 / 1;
        justify-content: center;
    }
}