/* Marcellus + Mulish — hostowane lokalnie (zero zapytań do Google). Styl „Couture” od 6.10.2026. */
@font-face {font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Marcellus-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Marcellus-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/Mulish-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/Mulish-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Salon Chloé — arkusz nowej strony (styl „Couture” od 6.10.2026)
 *
 * Salon ma trzy działy: kosmetyka (tło kaszmirowe), kosmetologia (biel) oraz medycyna
 * estetyczna (czerń). Paleta jak w gabinecie: kaszmir, czerń i biel, akcenty bordo.
 * Marcellus w nagłówkach i przyciskach (wersaliki z rozstrzeleniem), Mulish w tekście.
 * Reguły od sekcji „STYL COUTURE” na końcu pliku nadpisują wcześniejsze. Logo (od 6.10): monogram „Ch.” w owalu, czarne/białe.
 */

:root {
  /* Paleta jak w gabinecie: kaszmir, czerń i biel; akcenty bordo / dojrzała wiśnia / czekolada. Złoto tylko w logo. */
  --porcelana: #FAF8F5;    /* ciepła biel — tło strony, jasny tekst na czerni */
  --bialy: #FFFFFF;
  --roz: #EDE4D8;          /* kaszmir — dział: kosmetyka */
  --mineral: #E3DCD3;      /* kaszmir chłodniejszy (greige) — filar: medycyna estetyczna */
  --kaszmir-ciemny: #C8B5A0; /* linie i obwódki na kaszmirze */
  --tusz: #171314;         /* czerń — tekst, przyciski, kontakt i stopka */
  --czern: #171314;        /* stała czerń (tło filaru medycyny, gdzie --tusz jest odwrócony) */
  --tusz-2: #5B4E48;       /* tekst drugorzędny, ciepła szarość z czekoladą */
  --zloto: #651C29;        /* ciemne bordo — akcent w tekście (etykiety, cyfry, znaczniki) */
  --zloto-logo: #722331;   /* bordo — linie, podkreślenia, etykiety na jasnym tle */
  --czekolada: #5A3B2E;    /* akcent filaru kosmetyki */
  --kaszmir-jasny: #DCCBB7; /* akcent na czerni (przycisk, hover) */
  --linia: rgba(23, 19, 20, .14);

  --f-tytul: 'Marcellus', 'Times New Roman', serif;
  --f-tekst: 'Mulish', 'Segoe UI', 'Helvetica Neue', sans-serif;

  --maks: 1240px;
  --pad: clamp(16px, 4vw, 48px);
  --sekcja: clamp(64px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--porcelana);
  color: var(--tusz);
  font-family: var(--f-tekst);
  font-size: 1.125rem;            /* 18 px */
  font-weight: 400;
  line-height: 1.6;
  font-kerning: normal;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }

h1, h2, h3 {
  font-family: var(--f-tytul);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(2.125rem, 3.6vw, 3.25rem); margin-bottom: .6em; }
h3 { font-size: 1.5rem; line-height: 1.2; }

:focus-visible { outline: 2px solid var(--zloto); outline-offset: 3px; }

.pomin {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--tusz); color: var(--bialy); padding: 10px 16px; text-decoration: none;
}
.pomin:focus { top: 12px; }

.sekcja-in, .filar-in, .nag-in { max-width: var(--maks); margin: 0 auto; padding-inline: var(--pad); }

/* ---------- przyciski i linki ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 28px;
  border-radius: 999px;            /* łuk w miniaturze */
  font-family: var(--f-tekst); font-size: 1rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-ciemny { background: var(--tusz); color: var(--bialy); border: 1px solid var(--tusz); }
.btn-ciemny:hover { background: var(--zloto); border-color: var(--zloto); }
.btn-jasny { background: transparent; color: var(--tusz); border: 1px solid var(--tusz); }
.btn-jasny:hover { background: var(--tusz); color: var(--bialy); }
.btn-zloty { background: var(--kaszmir-jasny); color: var(--tusz); border: 1px solid var(--kaszmir-jasny); }
.btn-zloty:hover { background: var(--porcelana); border-color: var(--porcelana); }

.podkr {
  color: var(--tusz); font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--zloto-logo); text-decoration-thickness: 1px; text-underline-offset: .28em;
}
.podkr:hover { text-decoration-thickness: 2px; color: var(--zloto); }
.podkr-jasny { color: var(--porcelana); }
.podkr-jasny:hover { color: var(--kaszmir-jasny); }

/* ---------- nagłówek ---------- */
.nag {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linia);
}
.nag-in {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
  min-height: 76px;
}
.nag-logo img { height: 48px; width: auto; }
.nag-menu { display: flex; justify-content: center; gap: clamp(16px, 2.4vw, 36px); }
.nag-menu a { font-size: 1rem; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.nag-menu a:hover { border-bottom-color: var(--zloto-logo); }
.nag-cta { min-height: 44px; padding: 0 22px; font-size: .9375rem; }

/* ---------- hero: tekst + dwa łuki ---------- */
.hero {
  max-width: var(--maks); margin: 0 auto;
  padding: clamp(40px, 7vw, 104px) var(--pad) clamp(56px, 8vw, 120px);
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.hero h1 { font-size: clamp(2.375rem, 4.2vw, 3.75rem); line-height: 1.04; margin-bottom: 24px; max-width: 11.5em; }
.hero-lead { font-size: 1.1875rem; color: var(--tusz-2); max-width: 33em; margin-bottom: 32px; }
.hero-akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

.ocena { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 1rem; color: var(--tusz-2); }
.ocena strong { color: var(--tusz); font-weight: 600; }
.gwiazdki { color: var(--zloto-logo); letter-spacing: 2px; font-size: 1.05rem; }
.ocena:hover span:last-child { text-decoration: underline; text-underline-offset: .25em; }

.hero-luki { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); align-items: start; }
.luk { display: block; text-decoration: none; }
.luk-m { margin-top: clamp(32px, 5vw, 72px); }
.luk img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  /* łuk: półkole na górze — 50% szerokości = 37,5% wysokości przy proporcji 3:4 */
  border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
  margin-bottom: 16px;
}
.luk-k img { background: var(--roz); }
.luk-m img { background: var(--mineral); }
.luk-nazwa { display: block; font-family: var(--f-tytul); font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.2; margin-bottom: 6px; }
.luk-opis { display: block; font-size: .9375rem; line-height: 1.5; color: var(--tusz-2); }
.luk:hover .luk-nazwa { text-decoration: underline; text-decoration-color: var(--zloto-logo); text-underline-offset: .2em; }
/* pasek koloru filaru pod łukiem — ta sama barwa, co sekcja, do której prowadzi */
.luk::after { content: ""; display: block; height: 3px; margin-top: 14px; width: 48px; }
.luk-k::after { background: var(--czekolada); }
.luk-m::after { background: var(--zloto-logo); }

/* Jedyny ruch na stronie: łuki wchodzą po kolei przy pierwszym wczytaniu */
@media (prefers-reduced-motion: no-preference) {
  .luk { animation: wejscie .9s cubic-bezier(.2, .7, .2, 1) both; }
  .luk-m { animation-delay: .15s; }
  @keyframes wejscie { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
}

/* ---------- filary ---------- */
.filar { padding-block: var(--sekcja); }
.filar-k { background: var(--roz); }
/* medycyna estetyczna na czerni: kolory odwrócone przez zmienne, karty wewnątrz wracają do jasnych */
.filar-m {
  --tusz: #FAF8F5; --tusz-2: rgba(250, 248, 245, .78); --zloto: #DCCBB7; --zloto-logo: #A3495A;
  --linia: rgba(250, 248, 245, .2);
  background: var(--czern); color: var(--tusz);
}
.filar-m + .cta-pas { border-top: 1px solid rgba(250, 248, 245, .16); }
.filar-m .cennik .kr { border-bottom-color: rgba(250, 248, 245, .32); }
.filar-m .btn-ciemny { background: var(--kaszmir-jasny); border-color: var(--kaszmir-jasny); color: var(--czern); }
.filar-m .btn-ciemny:hover { background: var(--porcelana); border-color: var(--porcelana); }
.filar-m .btn-jasny:hover { color: var(--czern); }
.filar-m .przed-zabiegiem, .filar-m .zapowiedz, .filar-m .z-blog {
  --tusz: #171314; --tusz-2: #5B4E48; --zloto: #651C29; --zloto-logo: #722331; --linia: rgba(23, 19, 20, .14);
  color: var(--tusz);
}

.filar-wstep {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px); align-items: start; margin-bottom: clamp(48px, 6vw, 80px);
}
.filar-tekst p { max-width: 34em; }

/* kolaż jak linia horyzontu: łuk – kwadrat – łuk, wyrównane do dołu */
.kolaz { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 16px; align-items: end; }
.kolaz figure { margin: 0; }
.kolaz img { width: 100%; object-fit: cover; }
.kolaz-kw img { aspect-ratio: 1; }
.kolaz-luk img { aspect-ratio: 3 / 4; border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; }
.kolaz figcaption { font-size: .875rem; color: var(--tusz-2); margin-top: 8px; }

.przed-zabiegiem { background: var(--porcelana); padding: clamp(24px, 3vw, 36px); border-top: 3px solid var(--zloto-logo); }
.przed-zabiegiem h3 { margin-bottom: 14px; }
.przed-zabiegiem ul { margin: 0; padding-left: 1.1em; }
.przed-zabiegiem li { margin-bottom: .6em; }
.przed-zabiegiem li::marker { color: var(--zloto); }

/* cennik w kolumnach jak karta salonu — grupy nie rozdzielają się między kolumnami */
.grupy { columns: 3 320px; column-gap: clamp(32px, 4vw, 64px); }
.grupa { break-inside: avoid; margin-bottom: clamp(40px, 4vw, 56px); }
.grupa h3 { margin-bottom: 10px; }
.grupa > p { font-size: 1rem; color: var(--tusz-2); margin-bottom: 14px; }
.cennik { list-style: none; margin: 0; padding: 0; }
.cennik li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 1rem; }
.cennik .kr { flex: 1 1 24px; border-bottom: 1px dotted rgba(23, 19, 20, .35); transform: translateY(-4px); min-width: 24px; }
.cennik .c { white-space: nowrap; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.cennik .c small { font-size: .8125rem; font-weight: 400; color: var(--tusz-2); }
.cennik .c-brak { font-weight: 400; font-style: italic; color: var(--zloto); }
.grupa-dalej { margin: 12px 0 0; font-size: .9375rem; }
.grupa-dalej a { color: var(--zloto); text-decoration: underline; text-underline-offset: .25em; }
.filar-uwaga { font-size: .9375rem; color: var(--tusz-2); max-width: 46em; margin: 0; }
.filar-uwaga a { color: var(--tusz); }

/* ---------- pierwsza wizyta: to faktycznie kolejność, więc numery ---------- */
.kroki { padding-block: var(--sekcja); background: var(--bialy); }
.kroki ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); counter-reset: krok; }
.kroki li { counter-increment: krok; border-top: 1px solid var(--linia); padding-top: 24px; }
.kroki li::before {
  content: counter(krok); display: block;
  font-family: var(--f-tytul); font-size: 3.5rem; line-height: 1; color: var(--zloto); margin-bottom: 16px;
}
.kroki h3 { margin-bottom: 8px; }
.kroki p { color: var(--tusz-2); margin: 0; }

/* ---------- opinie ---------- */
.opinie { padding-block: var(--sekcja); }
.opinie-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); }
.wynik { display: flex; align-items: center; gap: 20px; margin: 8px 0 20px; }
.wynik-liczba { font-family: var(--f-tytul); font-size: clamp(4.5rem, 9vw, 7rem); line-height: .9; font-weight: 500; }
.wynik-opis { color: var(--tusz-2); font-size: 1rem; line-height: 1.45; }
.opinia { margin: 0 0 32px; padding-bottom: 28px; border-bottom: 1px solid var(--linia); }
.opinia blockquote { margin: 0 0 10px; font-family: var(--f-tytul); font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.4; }
.opinia blockquote p { margin: 0; }
.opinia figcaption { font-size: .9375rem; color: var(--tusz-2); }
.opinia figcaption strong { color: var(--tusz); font-weight: 500; }
.opinie-zrodlo { font-size: .875rem; color: var(--tusz-2); margin: 0; }

/* ---------- o nas ---------- */
.o-nas { padding-block: var(--sekcja); background: var(--bialy); }
.o-nas-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.o-nas-foto { margin: 0; max-width: 400px; }
.o-nas-foto img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; background: var(--roz); }
.o-nas-tekst p { max-width: 34em; }

/* ---------- poradnik ---------- */
.poradnik { padding-block: var(--sekcja); }
.poradnik-lista { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.poradnik-lista a { display: block; height: 100%; text-decoration: none; border-top: 1px solid var(--tusz); padding-top: 18px; }
.p-kat { display: block; font-size: .875rem; color: var(--zloto); margin-bottom: 8px; }
.p-tyt { display: block; font-family: var(--f-tytul); font-size: 1.3rem; line-height: 1.3; }
.poradnik-lista a:hover .p-tyt { text-decoration: underline; text-decoration-color: var(--zloto-logo); text-underline-offset: .2em; }

/* ---------- FAQ ---------- */
.faq { padding-block: var(--sekcja); background: var(--bialy); }
.faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.faq details { border-bottom: 1px solid var(--linia); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--f-tytul); font-size: 1.3rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-family: var(--f-tekst); font-size: 1.6rem; color: var(--zloto); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--tusz-2); max-width: 40em; padding-bottom: 8px; }

/* ---------- kontakt i stopka: tusz ---------- */
.kontakt { background: var(--tusz); color: var(--porcelana); padding-block: var(--sekcja); }
.kontakt h2, .kontakt h3 { color: var(--porcelana); }
.kontakt h3 { margin-bottom: 16px; }
.kontakt-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
.kontakt address { font-style: normal; font-size: 1.25rem; line-height: 1.5; margin-bottom: 12px; }
.kontakt-wsk { color: rgba(250, 248, 245, .78); }
.kontakt-dane a { color: var(--porcelana); text-decoration: none; }
.kontakt-dane a:hover { color: var(--kaszmir-jasny); }
.godziny { margin: 0 0 32px; }
.godziny div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(250, 248, 245, .18); max-width: 420px; }
.godziny dt { color: rgba(250, 248, 245, .78); }
.godziny dd { margin: 0; font-variant-numeric: tabular-nums; }

.stopka { background: var(--tusz); color: rgba(250, 248, 245, .78); border-top: 1px solid rgba(250, 248, 245, .14); padding-block: 40px; font-size: .9375rem; }
.stopka-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.stopka-in img { height: 40px; width: auto; }
.stopka nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.stopka a, .stopka-zgody { color: inherit; text-decoration: none; }
.stopka a:hover, .stopka-zgody:hover { color: var(--kaszmir-jasny); }
.stopka-zgody { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.stopka-social { display: flex; gap: 20px; margin: 0; }

/* ---------- baner zgód (js/zgody.js) w palecie prototypu ---------- */
.szz-baner, .szz-baner * { box-sizing: border-box; }
.szz-baner[hidden], .szz-ustawienia[hidden] { display: none !important; }
.szz-baner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--bialy); color: var(--tusz-2); border-top: 1px solid var(--linia);
  box-shadow: 0 -8px 30px rgba(23, 19, 20, .08);
  font-family: var(--f-tekst); font-size: .9375rem; line-height: 1.55;
  opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease;
}
.szz-baner.szz-widoczny { opacity: 1; transform: none; }
.szz-panel { max-width: var(--maks); margin: 0 auto; }
.szz-glowny { display: flex; align-items: center; gap: 16px 40px; padding: 18px var(--pad); }
.szz-tytul { font-family: var(--f-tytul); font-size: 1.15rem; color: var(--tusz); margin: 0 0 2px; font-weight: 500; }
.szz-opis { margin: 0; flex: 1; }
.szz-link { color: var(--zloto); }
.szz-akcje { display: flex; align-items: center; gap: 10px; flex: none; }
.szz-akcje-dol { padding: 12px var(--pad) 20px; }
.szz-baner .szz-btn {
  appearance: none; min-height: 46px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  font-family: var(--f-tekst); font-size: .9375rem; font-weight: 500;
  border: 1px solid var(--tusz); background: transparent; color: var(--tusz);
}
.szz-baner .szz-btn-glowny { background: var(--tusz); color: var(--bialy); }
.szz-baner .szz-btn-tekst { border-color: transparent; text-decoration: underline; text-underline-offset: .25em; padding: 0 8px; }
.szz-ustawienia { border-top: 1px solid var(--linia); max-height: min(52vh, 420px); overflow-y: auto; }
.szz-kat { padding: 14px var(--pad); border-bottom: 1px solid var(--linia); }
.szz-kat-naglowek { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.szz-kat-nazwa { color: var(--tusz); font-weight: 500; }
.szz-zawsze { font-size: .875rem; color: var(--zloto); }
.szz-kat-opis { margin: 6px 0 0; max-width: 70ch; font-size: .875rem; }
.szz-przelacznik { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.szz-przelacznik input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.szz-suwak { position: relative; width: 44px; height: 26px; border-radius: 999px; background: #CFC7BF; transition: background-color .2s; }
.szz-suwak::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.szz-przelacznik input:checked + .szz-suwak { background: var(--tusz); }
.szz-przelacznik input:checked + .szz-suwak::after { transform: translateX(18px); }
.szz-przelacznik input:focus-visible + .szz-suwak { outline: 2px solid var(--zloto); outline-offset: 3px; }

/* ---------- tablet i telefon ---------- */
@media (max-width: 1000px) {
  .nag-in { grid-template-columns: auto auto; row-gap: 0; padding-top: 8px; }
  .nag-menu {
    grid-column: 1 / -1; grid-row: 2; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none; gap: 22px; padding: 4px 0 10px;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
  }
  .nag-menu::-webkit-scrollbar { display: none; }
  .nag-menu a { white-space: nowrap; font-size: .9375rem; }
  .nag-cta { justify-self: end; }
  html { scroll-padding-top: 120px; }

  .hero { grid-template-columns: 1fr; }
  .filar-wstep, .opinie-in, .o-nas-in, .faq-in, .kontakt-in { grid-template-columns: 1fr; }
  .poradnik-lista { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .nag-logo img { height: 40px; }
  .nag-in { min-height: 60px; gap: 12px; }
  .hero-akcje .btn { flex: 1 1 100%; }
  .hero { padding-top: 28px; gap: 32px; }
  .hero-lead { font-size: 1.0625rem; margin-bottom: 24px; }
  .hero-akcje { margin-bottom: 20px; }
  .nag-cta { min-height: 40px; padding: 0 18px; }
  .kolaz { grid-template-columns: 1fr 1fr; }
  .kolaz-kw { grid-column: 1 / -1; grid-row: 1; }
  .kroki ol { grid-template-columns: 1fr; }
  .poradnik-lista { grid-template-columns: 1fr; }
  .o-nas-foto { max-width: 300px; }
  .szz-glowny { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px 12px; }
  .szz-tytul { font-size: 1.05rem; }
  .szz-opis { font-size: .875rem; line-height: 1.5; }
  .szz-baner .szz-btn { min-height: 44px; }
  .szz-akcje { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .szz-baner .szz-btn { padding: 0 10px; }
  .szz-baner .szz-btn-tekst { grid-column: 1 / -1; min-height: 30px; }
  .szz-kat, .szz-akcje-dol { padding-inline: 16px; }
  .szz-akcje-dol .szz-btn { width: 100%; }
}

/* =====================================================================
   PODSTRONY (5.10.2026): ścieżka, nagłówek zabiegu, treść + cennik,
   pasek rezerwacji, listy zabiegów, cennik, blog, stopka
   ===================================================================== */

/* ścieżka */
.okruchy { padding-top: 18px; font-size: .875rem; color: var(--tusz-2); }
.okruchy ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.okruchy li + li::before { content: "/"; margin: 0 10px; color: var(--zloto-logo); }
.okruchy a { color: var(--tusz-2); text-decoration: none; }
.okruchy a:hover { color: var(--tusz); text-decoration: underline; text-underline-offset: .2em; }
.okruchy [aria-current] { color: var(--tusz); }

/* nagłówek podstrony */
.z-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 6vw, 80px); }
.z-hero h1 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); margin-bottom: 20px; max-width: 14em; }
.z-hero .hero-lead { max-width: 36em; }
.z-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.z-hero-2kol .z-hero-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.z-karta { background: var(--bialy); padding: 8px 28px 12px; border-top: 3px solid var(--zloto-logo); }
.z-hero-k .z-karta { border-top-color: var(--czekolada); }
.z-hero-m .z-karta { border-top-color: var(--zloto-logo); }
.z-karta .z-fakty { grid-template-columns: 1fr; margin: 0; }
.z-karta .z-fakty div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.z-karta .z-fakty div:first-child { border-top: 0; }
.z-karta .z-fakty dt { font-size: .9375rem; }
.z-foto { margin: 0; max-width: 380px; justify-self: end; }
.z-foto img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; }
.z-hero-k .z-foto img { background: var(--roz); }
.z-hero-m .z-foto img { background: var(--mineral); }

/* karta faktów: cena, czas, konsultacja — konkretne informacje, nie ozdoba */
.z-fakty { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 24px; margin: 8px 0 0; max-width: 640px; }
.z-fakty div { border-top: 1px solid var(--linia); padding: 12px 0; }
.z-hero-k .z-fakty div { border-top-color: var(--kaszmir-ciemny); }
.z-hero-m .z-fakty div { border-top-color: var(--kaszmir-ciemny); }
.z-fakty dt { font-size: .8125rem; color: var(--tusz-2); }
.z-fakty dd { margin: 2px 0 0; font-family: var(--f-tytul); font-size: 1.2rem; line-height: 1.3; }

/* treść + cennik obok */
.z-tresc { padding: clamp(48px, 6vw, 88px) 0; background: var(--bialy); }
.z-tresc-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.proza { max-width: 38em; }
.proza-szeroka { max-width: 46em; }
.proza-artykul { max-width: 42em; margin: 0 auto; }
.proza > section + section { margin-top: clamp(32px, 4vw, 48px); }
.proza h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0 0 .55em; }
.proza-artykul h2 { margin-top: 1.8em; }
.proza h3 { font-size: 1.3rem; margin: 1.4em 0 .5em; }
.proza ul, .proza ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.proza li { margin-bottom: .45em; }
.proza li::marker { color: var(--zloto); }
.proza a { color: var(--tusz); text-decoration: underline; text-decoration-color: var(--zloto-logo); text-underline-offset: .22em; }
.proza a:hover { color: var(--zloto); }
.proza strong { font-weight: 600; }
.proza address, .adres { font-style: normal; margin: 0 0 1em; }

.z-cennik {
  position: sticky; top: 100px; background: var(--porcelana);
  padding: clamp(22px, 3vw, 32px); border-top: 3px solid var(--zloto-logo);
}
.z-cennik h2 { font-size: 1.75rem; margin-bottom: 14px; }
.z-cennik .btn { width: 100%; margin-top: 18px; }
.z-cennik-uwaga { font-size: .8125rem; color: var(--tusz-2); margin: 14px 0 0; }
.cennik .n { min-width: 0; }
.cennik .t { display: block; font-size: .8125rem; color: var(--tusz-2); margin-top: 1px; }
.cennik-pelny li { font-size: .9688rem; padding: 6px 0; }
.cennik-pelny li.war-nag { padding: 12px 0 2px; font-weight: 600; }
.cennik-pelny li.war-nag:first-child { padding-top: 0; }
.cennik-pelny li.war { padding-left: 14px; font-size: .9375rem; }

.zapowiedz, .z-blog {
  margin: 28px 0 0; padding: 14px 18px; background: var(--porcelana);
  border-left: 3px solid var(--zloto-logo); font-size: 1rem;
}
.z-blog + .zapowiedz, .zapowiedz + .z-blog { margin-top: 12px; }

/* powiązane zabiegi */
.powiazane { padding-block: clamp(48px, 6vw, 88px); }
.powiazane h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.powiazane .poradnik-lista, .sezon .poradnik-lista { grid-template-columns: repeat(3, 1fr); }

/* pasek rezerwacji */
.cta-pas { background: var(--tusz); color: var(--porcelana); padding-block: clamp(56px, 7vw, 96px); }
.cta-pas h2 { color: var(--porcelana); }
.cta-in p { max-width: 36em; color: rgba(250, 248, 245, .82); }
.cta-pas .cta-uwaga { color: var(--kaszmir-jasny); }
.cta-pas .hero-akcje { margin: 24px 0 0; }
.btn-obrys-jasny { background: transparent; color: var(--porcelana); border: 1px solid rgba(250, 248, 245, .7); }
.btn-obrys-jasny:hover { background: var(--porcelana); color: var(--tusz); }
.cta-pas + .stopka { border-top: 1px solid rgba(250, 248, 245, .14); }

/* listy zabiegów z cenami (strona główna, strony zbiorcze, 404) */
.grupy-linki .grupa h3 { margin-bottom: 12px; }
.cennik-linki li { display: block; padding: 0; }
.cennik-linki li > a { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; text-decoration: none; }
.cennik-linki li > a:hover .n { text-decoration: underline; text-decoration-color: var(--zloto-logo); text-underline-offset: .22em; }
.cennik-linki li > a .n { font-weight: 500; }
.cennik-linki li > p { margin: -4px 0 10px; font-size: .9375rem; color: var(--tusz-2); max-width: 34em; }
.h-link { color: inherit; text-decoration: none; }
.h-link:hover { text-decoration: underline; text-decoration-color: var(--zloto-logo); text-underline-offset: .15em; text-decoration-thickness: 2px; }
.filar-uwaga a { color: var(--tusz); }
.filar > .filar-in > h2 { margin-bottom: clamp(28px, 4vw, 48px); }

/* cennik zbiorczy */
.spis { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.spis a { padding: 8px 18px; border: 1px solid var(--tusz); border-radius: 999px; text-decoration: none; font-size: .9375rem; }
.spis a:hover { background: var(--tusz); color: var(--bialy); }
.cennik-zabieg { break-inside: avoid; margin-bottom: clamp(36px, 4vw, 52px); }
.cennik-zabieg h3 { margin-bottom: 10px; }
.cennik-zabieg h3 a { color: inherit; text-decoration: none; }
.cennik-zabieg h3 a:hover { text-decoration: underline; text-decoration-color: var(--zloto-logo); text-underline-offset: .2em; }

/* o nas, bony, dokumenty */
.o-nas-strona { padding-top: clamp(28px, 4vw, 56px); }
.o-nas-strona h1 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); margin-bottom: 18px; }
.cytat { margin: 28px 0 0; padding-left: 22px; border-left: 3px solid var(--zloto-logo); font-family: var(--f-tytul); font-size: 1.3rem; line-height: 1.45; }
.cytat p { margin: 0 0 10px; }
.cytat footer { font-family: var(--f-tekst); font-size: .9375rem; color: var(--tusz-2); }
.bon-cechy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.bon-cechy li { border-top: 1px solid var(--linia); padding-top: 22px; }
.kroki .bon-cechy li::before { content: none; }
.bon-cechy h3 { margin-bottom: 8px; }
.bon-cechy p { color: var(--tusz-2); margin: 0; }
.data-dok { font-size: .9375rem; color: var(--tusz-2); margin: 0; }
.przycisk-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--tusz); text-decoration: underline; text-decoration-color: var(--zloto-logo); text-underline-offset: .22em; }

/* blog: lista */
.blog-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 40px); }
.wpis a { display: block; height: 100%; text-decoration: none; border-top: 1px solid var(--tusz); padding-top: 18px; }
.wpis .p-tyt { font-size: 1.45rem; margin-bottom: 10px; }
.wpis-lead { display: block; font-size: .9688rem; color: var(--tusz-2); }
.wpis a:hover .p-tyt { text-decoration: underline; text-decoration-color: var(--zloto-logo); text-underline-offset: .2em; }

/* blog: artykuł */
.artykul .z-hero { padding-bottom: clamp(24px, 3vw, 40px); }
.art-glowa { max-width: calc(42em + 2 * var(--pad)); }
.art-glowa h1 { max-width: none; }
.art-meta { font-size: .9375rem; color: var(--tusz-2); margin: 0 0 18px; }
.proza-artykul { padding-bottom: clamp(48px, 6vw, 88px); }
.art-cytat { margin: 1.6em 0; padding-left: 22px; border-left: 3px solid var(--zloto-logo); font-family: var(--f-tytul); font-size: 1.3rem; line-height: 1.45; }
.art-figura, .art-fig { margin: 1.8em 0; }
.art-figura img, .art-fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.art-figura figcaption, .art-fig figcaption { font-size: .875rem; color: var(--tusz-2); margin-top: 8px; }
.art-kroki { counter-reset: ak; list-style: none; padding-left: 0 !important; }
.art-kroki li { counter-increment: ak; position: relative; padding-left: 44px; margin-bottom: 1em; }
.art-kroki li::before { content: counter(ak); position: absolute; left: 0; top: -4px; font-family: var(--f-tytul); font-size: 1.7rem; color: var(--zloto); }
.art-faq, .art-akordeon { border-bottom: 1px solid var(--linia); }
.art-faq summary, .art-akordeon summary { cursor: pointer; padding: 16px 32px 16px 0; position: relative; font-family: var(--f-tytul); font-size: 1.2rem; list-style: none; }
.art-faq summary::-webkit-details-marker, .art-akordeon summary::-webkit-details-marker { display: none; }
.art-faq summary::after, .art-akordeon summary::after { content: "+"; position: absolute; right: 2px; top: 12px; font-family: var(--f-tekst); font-size: 1.5rem; color: var(--zloto); }
.art-faq[open] summary::after, .art-akordeon[open] summary::after { content: "–"; }
.art-faq p, .art-akordeon__tresc p { color: var(--tusz-2); }
.art-uwaga { margin: 1.4em 0; padding: 16px 20px; background: var(--porcelana); border-left: 3px solid var(--zloto-logo); }
.art-uwaga p:last-child { margin-bottom: 0; }
.art-porownanie { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 1.4em 0; }
.art-karta { background: var(--porcelana); padding: 20px 22px; }
.art-karta h3 { margin-top: 0; }
.art-karta ul { margin-bottom: 0; }
.art-autorka, .art-autor-box { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; margin: 2.4em 0 1.6em; padding: 20px; background: var(--porcelana); }
.art-autorka img, .art-autor-box img { width: 96px; height: 128px; object-fit: cover; object-position: top; border-radius: 48px 48px 0 0; }
.art-autorka p, .art-autor-box p { margin: 0 0 4px; font-size: .9375rem; }
.art-autorka__imie, .art-autor-box__imie { font-family: var(--f-tytul); font-size: 1.15rem !important; }
.art-autorka__opis, .art-autor-box__rola, .art-autor-box__tekst { color: var(--tusz-2); }
.art-nawigacja { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 1.6em; }
.art-ceny { margin: 1em 0; }
.art-ceny a.n { color: var(--tusz); }
.art-ceny-uwaga { font-size: .875rem; color: var(--tusz-2); }

/* stopka */
.stopka { padding-block: 48px 40px; }
.stopka-gora { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 48px; padding-bottom: 28px; border-bottom: 1px solid rgba(250, 248, 245, .14); }
.stopka-gora img { height: 40px; width: auto; }
.stopka-nap { margin: 0; line-height: 1.7; max-width: 36em; }
.stopka-nap a { color: var(--porcelana); }
.stopka-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 24px 0; }
.stopka-social { display: flex; gap: 20px; margin: 0; }

@media (max-width: 1000px) {
  .z-hero-2kol .z-hero-in, .z-tresc-in { grid-template-columns: minmax(0, 1fr); }
  .z-foto { justify-self: start; max-width: 300px; }
  .z-karta { max-width: 520px; }
  .z-cennik { position: static; order: -1; }
  .powiazane .poradnik-lista, .sezon .poradnik-lista, .blog-lista { grid-template-columns: repeat(2, 1fr); }
  .bon-cechy { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .z-foto { max-width: 220px; }
  .powiazane .poradnik-lista, .sezon .poradnik-lista, .blog-lista, .art-porownanie { grid-template-columns: 1fr; }
  .art-autorka, .art-autor-box { grid-template-columns: 72px 1fr; }
  .art-autorka img, .art-autor-box img { width: 72px; height: 96px; }
  .z-cennik { margin-inline: calc(var(--pad) * -1); }
}

/* jedna grupa (medycyna estetyczna) — lista rozłożona na kolumny zamiast jednej wąskiej */
.grupy-linki .grupa-cala { column-span: all; }
.grupa-cala .cennik-linki { columns: 3 280px; column-gap: clamp(32px, 4vw, 64px); }
.grupa-cala .cennik-linki li { break-inside: avoid; }
.grupy + .filar-uwaga { margin-top: 16px; }
.z-hero + .poradnik { padding-top: 0; }
@media (max-width: 1000px) {
  .o-nas-strona .o-nas-tekst { order: -1; }          /* tytuł przed zdjęciem */
  .o-nas-strona .o-nas-foto { max-width: 260px; }
}

/* oferta na podstronie zabiegu (np. pierwsze oczyszczanie wodorowe) */
.oferta { margin: 22px 0 20px; padding: 14px 20px 16px; background: var(--bialy); border-left: 3px solid var(--zloto-logo); max-width: 560px; }
.oferta-et { margin: 0; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--zloto); }
.oferta-cena { margin: 2px 0 4px; font-family: var(--f-tytul); font-size: clamp(2rem, 5vw, 2.5rem); line-height: 1.1; }
.oferta-opis { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--tusz-2); }


/* =====================================================================
   STYL „COUTURE” (6.10.2026, wybór Konrada i Kasi): Marcellus + Mulish,
   nagłówki wersalikami, cienkie linie, kanciaste przyciski, zdjęcia 3:4,
   cenniki w dwóch równych kolumnach, telefon zawsze pod ręką.
   ===================================================================== */
:root { --sekcja: clamp(72px, 9vw, 136px); }
body { font-size: 1.0625rem; line-height: 1.75; }
h1, h2, h3 { font-weight: 400; letter-spacing: .02em; }
h1, h2 { text-transform: uppercase; letter-spacing: .06em; }
h1 { line-height: 1.18; }
.hero h1 { font-size: clamp(1.95rem, 1.1rem + 3.1vw, 3.3rem); line-height: 1.16; max-width: 13em; }
.z-hero h1, .o-nas-strona h1 { font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.8rem); line-height: 1.2; max-width: 17em; }
h2 { font-size: clamp(1.55rem, 1rem + 1.9vw, 2.35rem); line-height: 1.24; }
h3 { font-size: 1.2rem; line-height: 1.35; }
/* w długich tekstach nagłówki zwykłą wielkością liter — łatwiej czytać */
.proza h2, .proza h3 { text-transform: none; letter-spacing: .01em; }
.proza h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); }

/* etykieta nad nagłówkiem + krótka kreska */
.brw { margin: 0 0 18px; font-family: var(--f-tytul); font-size: .8125rem; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; color: var(--zloto-logo); }
.brw::after { content: ""; display: block; width: 48px; height: 1px; background: currentColor; margin-top: 16px; }
.filar-m .brw, .kontakt .brw, .cta-pas .brw { color: var(--kaszmir-jasny); }
.p-kat { font-family: var(--f-tytul); letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; color: var(--zloto); }

/* przyciski: kanciaste, wersaliki */
.btn { border-radius: 0; min-height: 52px; padding: 0 30px; gap: 10px; font-family: var(--f-tytul); font-weight: 400; font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase; }
.btn-ciemny:hover { background: var(--zloto-logo); border-color: var(--zloto-logo); }
.btn .ikona, .nag-tel .ikona, .akcje-dol .ikona { flex: none; width: 16px; height: 16px; }
.btn-tel { letter-spacing: .14em; }
.spis a { border-radius: 0; font-family: var(--f-tytul); text-transform: uppercase; letter-spacing: .14em; font-size: .8125rem; }
.szz-baner .szz-btn { border-radius: 0; }

/* nagłówek strony: menu wersalikami, telefon obok rezerwacji */
.nag-menu { gap: clamp(18px, 2vw, 34px); }
.nag-menu a { font-family: var(--f-tytul); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; }
.nag-akcje { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.nag-tel { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-tytul); font-size: .95rem; letter-spacing: .08em; text-decoration: none; white-space: nowrap; color: var(--tusz); }
.nag-tel .ikona { color: var(--zloto-logo); }
.nag-tel:hover span { text-decoration: underline; text-decoration-color: var(--zloto-logo); text-underline-offset: .25em; }
.nag-cta { min-height: 44px; padding: 0 22px; font-size: .75rem; }
@media (max-width: 1280px) {
  .nag-dl { display: none; }
  .nag-menu a { letter-spacing: .13em; }
}
@media (max-width: 1100px) and (min-width: 1001px) {
  .nag-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nag-tel { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--linia); }
}

/* zdjęcia: jeden format 3:4, bez łuków, równe rozmiary */
.luk img, .kolaz img, .o-nas-foto img, .z-foto img { border-radius: 0; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; height: auto; }
.luk-m { margin-top: 0; }
.luk::after { height: 1px; width: 48px; }
.luk-nazwa { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.kolaz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.kolaz img { aspect-ratio: 1 / 1; object-position: center 30%; }   /* kwadraty: zdjęcie brwi „przed/po” mieści się całe */
.kolaz figcaption { font-size: .8125rem; line-height: 1.4; }
.art-autorka img, .art-autor-box img { border-radius: 0; }

/* cenniki: dwie równe kolumny, wiersz = nazwa | cena, cienkie linie */
.grupy { columns: 2 340px; column-gap: clamp(40px, 6vw, 96px); }
.grupa, .cennik-zabieg { margin-bottom: clamp(36px, 4vw, 52px); }
.grupa h3, .cennik-zabieg h3 {
  font-size: .9rem; text-transform: uppercase; letter-spacing: .14em; line-height: 1.4;
  padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px solid currentColor;
}
.cennik li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--linia); font-size: .9688rem; line-height: 1.45; }
.cennik .kr { display: none; }
.cennik .c { font-family: var(--f-tytul); font-weight: 400; font-size: 1.05rem; letter-spacing: .02em; text-align: right; }
.cennik .c small { font-family: var(--f-tekst); font-size: .78rem; margin-right: 3px; }
.cennik-linki li { display: block; padding: 0; border-bottom: 1px solid var(--linia); }
.cennik-linki li > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline; padding: 12px 0; }
.cennik-linki li > a .n { font-weight: 500; }
.cennik-linki li > p { margin: -4px 0 12px; }
.grupa-cala .cennik-linki { columns: 2 320px; }
.cennik-pelny li.war-nag { display: block; border-bottom: 0; padding: 18px 0 2px; font-weight: 600; }
.cennik-pelny li.war { padding-left: 14px; }
.cennik-pelny li.war-nag:first-child { padding-top: 6px; }
.z-cennik { border-top-width: 1px; }
.filar-m .grupa h3, .filar-m .cennik-zabieg h3 { border-bottom-color: rgba(250, 248, 245, .55); }

/* drobne elementy w nowym stylu */
.z-karta, .przed-zabiegiem { border-top-width: 1px; }
.zapowiedz, .z-blog, .oferta { border-left-width: 2px; }
.oferta-et { font-family: var(--f-tytul); letter-spacing: .2em; }
.wynik-liczba { font-weight: 400; }
.opinia blockquote { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; }
.faq summary { font-size: 1.15rem; line-height: 1.45; }
.p-tyt { font-size: 1.15rem; line-height: 1.45; }
.kroki li::before { font-weight: 400; }
.poradnik-lista a { border-top-color: var(--linia); }

/* pasek „Zadzwoń / Zarezerwuj” — telefony i tablety, zawsze pod kciukiem */
.akcje-dol { display: none; }
@media (max-width: 1000px) {
  .nag-tel, .nag-cta { display: none; }
  .nag-in { grid-template-columns: 1fr; }
  .akcje-dol {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--linia);
    box-shadow: 0 -6px 24px rgba(23, 19, 20, .08);
  }
  .akcje-dol a {
    display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px;
    font-family: var(--f-tytul); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  }
  .akcje-dol-tel { border: 1px solid var(--tusz); color: var(--tusz); }
  .akcje-dol-rez { background: var(--tusz); color: var(--bialy); border: 1px solid var(--tusz); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .nag-menu a { font-size: .75rem; }
  .hero-luki { max-width: 640px; }
}
@media (max-width: 640px) {
  .grupy, .grupa-cala .cennik-linki { columns: 1; }
  .kolaz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .kolaz-kw { grid-column: auto; grid-row: auto; }
  .kolaz figcaption { font-size: .75rem; }
  .btn { padding: 0 20px; }
  .nag-cta { padding: 0 16px; }
}
@media print { .akcje-dol { display: none; } }


/* =====================================================================
   POPRAWKI PO PRZEGLĄDZIE (6.10.2026): całe logo, większy kolaż, mniej
   pustego miejsca, jedno jasne tło + ozdobny podział z tulipanem z logo.
   ===================================================================== */
/* odstępy: ok. 30% mniej niż wcześniej */
:root { --sekcja: clamp(56px, 6.5vw, 96px); }
.hero { padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 88px); }
.filar-wstep { margin-bottom: clamp(36px, 4.5vw, 60px); align-items: center; }
.grupa, .cennik-zabieg { margin-bottom: clamp(28px, 3vw, 40px); }

/* logo: pełny znak (tulipan + Chloé) z marginesem */
.nag-logo img { height: 56px; width: auto; }
.stopka-gora img { height: 56px; width: auto; }
@media (max-width: 640px) { .nag-logo img { height: 46px; } }

/* kolaż w sekcji kosmetyki: duże zdjęcie + dwa kwadraty, równa wysokość */
.kolaz { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 14px; align-items: stretch; }
.kolaz figure { position: relative; margin: 0; }
.kolaz figure:first-child { grid-row: 1 / span 2; }
.kolaz figure:first-child img { height: 100%; aspect-ratio: auto; object-position: center 25%; }
.kolaz figure:not(:first-child) img { aspect-ratio: 1 / 1; }
.kolaz figcaption {
  position: absolute; right: 10px; bottom: 10px; margin: 0; padding: 5px 10px; max-width: calc(100% - 20px); text-align: right;
  background: rgba(250, 248, 245, .94); color: var(--tusz);
  font-family: var(--f-tytul); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3;
}
@media (max-width: 640px) {
  .kolaz { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 8px; }
  .kolaz-kw { grid-column: auto; grid-row: auto; }
  .kolaz figcaption { right: 6px; bottom: 6px; padding: 4px 7px; font-size: .6rem; max-width: calc(100% - 12px); }
}

/* jedno jasne tło dla zwykłych sekcji (wcześniej biel i ciepła biel na zmianę) */
.kroki, .o-nas, .faq, .z-tresc { background: transparent; }

/* ozdobny podział między jasnymi sekcjami: cienka linia + sygnet „Ch.” z logo (bordo) */
:is(.hero, .z-hero, .z-tresc, .kroki, .opinie, .o-nas, .poradnik, .faq, .powiazane) + :is(.z-tresc, .kroki, .opinie, .o-nas, .poradnik, .faq, .powiazane) { position: relative; }
:is(.hero, .z-hero, .z-tresc, .kroki, .opinie, .o-nas, .poradnik, .faq, .powiazane) + :is(.z-tresc, .kroki, .opinie, .o-nas, .poradnik, .faq, .powiazane)::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: min(320px, 72%); height: 36px; pointer-events: none;
  background:
    url(img/salon-chloe-sygnet-bordo-72.png) center / 24px 36px no-repeat,
    linear-gradient(var(--kaszmir-ciemny), var(--kaszmir-ciemny)) left center / calc(50% - 30px) 1px no-repeat,
    linear-gradient(var(--kaszmir-ciemny), var(--kaszmir-ciemny)) right center / calc(50% - 30px) 1px no-repeat;
}
.z-hero + .poradnik::before { content: none; }

/* etykiety: kolor i odstęp zawsze z .brw (np. „.kroki p” go nadpisywało) */
p.brw { color: var(--zloto-logo); margin: 0 0 18px; }
.filar-m p.brw, .kontakt p.brw, .cta-pas p.brw { color: var(--kaszmir-jasny); }

/* FAQ: lewa kolumna nie jest pusta */
.faq-dop { color: var(--tusz-2); max-width: 26em; margin: 18px 0 20px; }

/* telefony i tablety: zdjęcie w nagłówku podstrony na pełną szerokość (kwadrat), niższy przyklejony nagłówek */
@media (max-width: 1000px) {
  .z-foto { width: 100%; max-width: 560px; margin: 0; }
  .z-foto img { aspect-ratio: 1 / 1; object-position: center 30%; }
  .nag-in { padding-top: 6px; min-height: 0; }
  .nag-menu { padding-top: 0; padding-bottom: 8px; }
}
@media (max-width: 640px) {
  .nag-logo img { height: 40px; }
  .nag-in { min-height: 52px; }
}
@media (max-width: 1000px) {
  .o-nas-foto, .o-nas-strona .o-nas-foto { max-width: 420px; width: 100%; }
}

/* nowe logo (monogram „Ch.” + SALON CHLOÉ, poziome) */
.nag-logo img { height: 52px; width: auto; }
.stopka-gora img { height: 52px; width: auto; }
@media (max-width: 640px) { .nag-logo img { height: 40px; } }

/* menu: pozycje nigdy się nie łamią; „estetyczna” chowamy do 1440 px (logo z napisem jest szersze) */
.nag-menu { flex-wrap: nowrap; }
.nag-menu a { white-space: nowrap; }
@media (max-width: 1440px) { .nag-dl { display: none; } }
@media (max-width: 1180px) and (min-width: 1001px) { .nag-menu { gap: 18px; } .nag-menu a { letter-spacing: .1em; } .nag-logo img { height: 46px; } }
/* „estetyczna” w menu: ukryte wizualnie, ale zostaje w treści linku (SEO, czytniki ekranu) */
.nag-dl { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; display: inline !important; }
.nag-logo img { max-width: none; flex: none; }
.nag-logo { flex: none; }

/* nagłówek czarny z białym logo (6.10.2026, decyzja Kasi) */
.nag { background: rgba(23, 19, 20, .97); border-bottom: 1px solid rgba(250, 248, 245, .12); color: var(--porcelana); }
.nag-menu a { color: rgba(250, 248, 245, .88); }
.nag-menu a:hover, .nag-menu a[aria-current] { color: var(--bialy); border-bottom-color: var(--kaszmir-jasny); }
.nag-tel { color: var(--porcelana); }
.nag-tel .ikona { color: var(--kaszmir-jasny); }
.nag-tel:hover span { text-decoration-color: var(--kaszmir-jasny); }
.nag .nag-cta { background: var(--kaszmir-jasny); border-color: var(--kaszmir-jasny); color: var(--czern); }
.nag .nag-cta:hover { background: var(--porcelana); border-color: var(--porcelana); }
@media (max-width: 1100px) and (min-width: 1001px) { .nag-tel { border-color: rgba(250, 248, 245, .3); } }

/* =====================================================================
   STRONA GŁÓWNA: zdjęcie na całą szerokość + menu nad zdjęciem (6.10.2026)
   ===================================================================== */
.hero-foto { position: relative; background: var(--czern); color: var(--porcelana); overflow: hidden; }
.hero-foto picture, .hero-foto-img { display: block; }
.hero-foto-img { width: 100%; height: clamp(600px, 88vh, 820px); object-fit: cover; object-position: 25% center; }
.hero-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(23,19,20,0) 32%, rgba(23,19,20,.55) 53%, rgba(23,19,20,.92) 71%); }
.hero-foto-in { position: absolute; inset: 0; z-index: 1; max-width: var(--maks); margin: 0 auto; padding: 77px var(--pad) 0;
  display: flex; align-items: center; justify-content: flex-end; }
.hero-foto-tekst { max-width: 520px; }
.hero-foto p.brw { color: var(--kaszmir-jasny); }
.hero-foto h1 { color: var(--porcelana); font-size: clamp(2rem, 1rem + 2.6vw, 3.1rem); margin-bottom: 20px; }
.hero-foto .hero-lead { color: rgba(250, 248, 245, .86); }
.hero-foto .btn-ciemny { background: var(--kaszmir-jasny); border-color: var(--kaszmir-jasny); color: var(--czern); }
.hero-foto .btn-ciemny:hover { background: var(--porcelana); border-color: var(--porcelana); }
.hero-foto .btn-jasny { color: var(--porcelana); border-color: rgba(250, 248, 245, .7); background: transparent; }
.hero-foto .btn-jasny:hover { background: var(--porcelana); color: var(--czern); }
.hero-foto .ocena, .hero-foto .ocena strong { color: rgba(250, 248, 245, .86); }
.hero-foto .gwiazdki { color: var(--kaszmir-jasny); }

/* menu na stronie głównej: nad zdjęciem z przejściem ombre, po przewinięciu pełny czarny pasek */
.glowna-foto .nag { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.glowna-foto .nag::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 90px); pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(23,19,20,.82) 0%, rgba(23,19,20,.55) 45%, rgba(23,19,20,0) 100%); transition: opacity .35s ease; }
.glowna-foto .nag.nag-pelny { background: rgba(23, 19, 20, .97); border-bottom-color: rgba(250, 248, 245, .12); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.glowna-foto .nag.nag-pelny::before { opacity: 0; }

/* dwa wejścia pod zdjęciem */
.wejscia { background: var(--porcelana); border-bottom: 1px solid var(--linia); }
.wejscia-in { display: grid; grid-template-columns: 1fr 1fr; }
.wejscie { display: flex; align-items: center; gap: 20px; padding: 22px 0; text-decoration: none; color: var(--tusz); }
.wejscie + .wejscie { border-left: 1px solid var(--linia); padding-left: clamp(20px, 4vw, 48px); }
.wejscie-foto { flex: none; width: 84px; height: 112px; object-fit: cover; }
.wejscie-tekst { display: block; }
.wejscie-nazwa { display: block; font-family: var(--f-tytul); text-transform: uppercase; letter-spacing: .08em; font-size: 1.05rem; margin-bottom: 4px; }
.wejscie-opis { display: block; font-size: .9375rem; line-height: 1.5; color: var(--tusz-2); }
.wejscie-dalej { display: inline-block; margin-top: 8px; font-family: var(--f-tytul); text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; color: var(--zloto-logo); }
.wejscie:hover .wejscie-nazwa { text-decoration: underline; text-decoration-color: var(--zloto-logo); text-underline-offset: .22em; }
.wejscia + .filar { border-top: 0; }

@media (max-width: 1000px) {
  .hero-foto-in { padding-top: 0; }
}
@media (max-width: 760px) {
  .hero-foto-img { height: auto; aspect-ratio: 4 / 5; max-height: 70vh; object-position: center 40%; }
  .hero-foto::after { background: linear-gradient(180deg, rgba(23,19,20,0) 35%, rgba(23,19,20,.9) 62%); top: 0; bottom: auto; height: 70vh; }
  .hero-foto-in { position: relative; inset: auto; display: block; padding: 0 var(--pad) 40px; margin-top: -90px; }
  .hero-foto-tekst { max-width: none; }
  .wejscia-in { grid-template-columns: 1fr; }
  .wejscie + .wejscie { border-left: 0; border-top: 1px solid var(--linia); padding-left: 0; }
  .wejscie { padding: 16px 0; }
  .wejscie-foto { width: 72px; height: 96px; }
}
.nag, .glowna-foto .nag.nag-pelny { background: var(--czern); }
.glowna-foto .nag:not(.nag-pelny) { background: transparent; }
/* tablety w pionie (761–1000 px): zdjęcie u góry (3:2), tekst pod nim — twarz nie ginie pod napisem */
@media (max-width: 1000px) and (min-width: 761px) {
  .hero-foto-img { height: auto; aspect-ratio: 3 / 2; object-position: 30% center; }
  .hero-foto::after { background: linear-gradient(180deg, rgba(23,19,20,0) 45%, rgba(23,19,20,.95) 100%); top: 0; bottom: auto; height: calc(100vw / 1.5); }
  .hero-foto-in { position: relative; inset: auto; display: block; padding: 0 var(--pad) 48px; margin-top: -60px; }
  .hero-foto-tekst { max-width: 640px; }
}

/* bardzo łagodne wejście z lewej: warstwa CSS nad zdjęciem (bez litej czerni w pliku) */
.hero-foto::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 46%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(23,19,20,.86) 0%, rgba(23,19,20,.72) 7%, rgba(23,19,20,.52) 15%, rgba(23,19,20,.32) 24%,
    rgba(23,19,20,.16) 33%, rgba(23,19,20,.06) 41%, rgba(23,19,20,0) 50%); }
.hero-foto-img { object-position: 20% center; }
@media (max-width: 1000px) {
  .hero-foto::before { bottom: auto; height: calc(100vw / 1.5); width: 60%;
    background: linear-gradient(90deg, rgba(23,19,20,.55) 0%, rgba(23,19,20,.3) 18%, rgba(23,19,20,.1) 38%, rgba(23,19,20,0) 55%); }
}
@media (max-width: 760px) { .hero-foto::before { height: min(70vh, 125vw); } }

/* dwa duże kafle pod zdjęciem (zamiast paska z miniaturami, 6.10 — uwaga Kasi) */
.kafle { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--czern); }
.kafel { position: relative; display: block; overflow: hidden; height: clamp(300px, 32vw, 460px); color: var(--porcelana); text-decoration: none; }
.kafel img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.kafel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(23,19,20,0) 30%, rgba(23,19,20,.35) 55%, rgba(23,19,20,.82) 100%); }
.kafel-tekst { position: absolute; left: clamp(20px, 4vw, 56px); right: 20px; bottom: clamp(22px, 3.5vw, 48px); z-index: 1; }
.kafel-brw { display: block; margin-bottom: 10px; font-family: var(--f-tytul); font-size: .75rem; letter-spacing: .28em; text-transform: uppercase; color: var(--kaszmir-jasny); }
.kafel-nazwa { display: block; margin-bottom: 14px; font-family: var(--f-tytul); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.2rem); line-height: 1.15; letter-spacing: .06em; text-transform: uppercase; }
.kafel-dalej { display: inline-block; padding-bottom: 4px; border-bottom: 1px solid var(--kaszmir-jasny); font-family: var(--f-tytul); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .kafel img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
  .kafel:hover img { transform: scale(1.04); }
}
@media (max-width: 760px) {
  .kafle { grid-template-columns: 1fr; }
  .kafel { height: 260px; }
}

/* góra: napis bliżej prawej krawędzi, mniej czerni (6.10 — uwaga Kasi) */
@media (min-width: 1001px) {
  .hero-foto-in { max-width: none; padding-left: var(--pad); padding-right: clamp(28px, 5vw, 96px); }
  .hero-foto::after { background: linear-gradient(90deg, rgba(23,19,20,0) 48%, rgba(23,19,20,.36) 61%, rgba(23,19,20,.7) 76%, rgba(23,19,20,.82) 100%); }
  .hero-foto-tekst { max-width: 480px; }
}

/* pas pod zdjęciem: same napisy, bez zdjęć (6.10 — „za dużo zdjęć”) */
.filary-pas { background: var(--porcelana); border-bottom: 1px solid var(--linia); }
.filary-pas-in { display: grid; grid-template-columns: 1fr 1fr; }
.filar-link { display: block; padding: clamp(28px, 3.4vw, 44px) 0; text-decoration: none; color: var(--tusz); }
.filar-link + .filar-link { border-left: 1px solid var(--linia); padding-left: clamp(24px, 4vw, 64px); }
.filar-link-brw { display: block; margin-bottom: 10px; font-family: var(--f-tytul); font-size: .75rem; letter-spacing: .28em; text-transform: uppercase; color: var(--zloto-logo); }
.filar-link-nazwa { display: block; margin-bottom: 12px; font-family: var(--f-tytul); font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
.filar-link-dalej { display: inline-block; padding-bottom: 4px; border-bottom: 1px solid var(--zloto-logo); font-family: var(--f-tytul); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tusz-2); }
.filar-link:hover .filar-link-dalej { color: var(--tusz); }
@media (max-width: 760px) {
  .filary-pas-in { grid-template-columns: 1fr; }
  .filar-link + .filar-link { border-left: 0; border-top: 1px solid var(--linia); padding-left: 0; }
  .filar-link { padding: 24px 0; }
}

/* trzy obszary: kosmetyka / kosmetologia / medycyna estetyczna (6.10 — Kasia) */
.filary-pas-in { grid-template-columns: repeat(3, 1fr); }
.filar-link + .filar-link { padding-left: clamp(20px, 3vw, 48px); }
.filar-link { padding-right: clamp(12px, 2vw, 32px); }
.filar-link-opis { display: block; margin: -4px 0 14px; font-size: .9375rem; line-height: 1.5; color: var(--tusz-2); max-width: 26em; }
@media (max-width: 1000px) and (min-width: 761px) { .filar-link-nazwa { font-size: 1.25rem; } .filar-link-opis { font-size: .875rem; } }
@media (max-width: 760px) { .filary-pas-in { grid-template-columns: 1fr; } .filar-link { padding-right: 0; } }
/* wyrównanie trzech kolumn: tytuły w jednej linii, linki „Zabiegi i ceny” na jednej wysokości */
.filar-link { display: flex; flex-direction: column; }
.filar-link-nazwa { font-size: clamp(1.15rem, .8rem + .8vw, 1.45rem); letter-spacing: .05em; white-space: nowrap; }
.filar-link-dalej { margin-top: auto; align-self: flex-start; }
@media (max-width: 760px) {
  .filar-link + .filar-link { padding-left: 0; }
  .filar-link-nazwa { white-space: normal; }
}
@media (max-width: 1100px) { .filar-link-nazwa { white-space: normal; } }

/* =====================================================================
   TRZY DZIAŁY (6.10.2026): kosmetyka (kaszmir) · kosmetologia (biel) · medycyna estetyczna (czerń)
   ===================================================================== */
.filar-o { background: var(--bialy); }
.filar-o .przed-zabiegiem { background: var(--porcelana); }
/* siedem pozycji menu: w przedziale 1001–1100 px ciaśniej, żeby „Zarezerwuj” nie wychodził poza ekran */
@media (max-width: 1100px) and (min-width: 1001px) {
  .nag-menu { gap: 12px; }
  .nag-menu a { letter-spacing: .06em; }
  .nag-logo img { height: 42px; }
  .nag .nag-cta { padding: 0 14px; }
}

/* =====================================================================
   AUDYT SEO (6.10.2026): „Kto wykonuje zabieg”, autor wpisu, ramka „Umów zabieg”, aktualizacja wpisu
   ===================================================================== */
.kto { margin-top: clamp(32px, 4vw, 48px); padding: clamp(20px, 3vw, 28px); background: var(--porcelana); border-top: 1px solid var(--zloto-logo); }
.proza .kto h2 { margin-bottom: .6em; }
.kto-in { display: flex; gap: 20px; align-items: flex-start; }
.kto-foto { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--roz); }
.kto-in > div > p:last-child { margin-bottom: 0; }
.kto-in ul { margin: 0 0 1em; }
.kto-autor { margin-top: clamp(40px, 5vw, 56px); }
.art-umow-et { margin: 0 0 10px; font-family: var(--f-tytul); font-size: .8125rem; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--zloto); }
.art-umow { margin: 24px 0 4px; padding: 16px 20px 20px; background: var(--bialy); border-left: 2px solid var(--zloto-logo); max-width: 560px; }
.art-umow .cennik { margin: 0 0 10px; }
.art-umow .cennik-linki li > a { color: var(--tusz); }
.art-umow-dop { margin: 0 0 14px; font-size: .9375rem; color: var(--tusz-2); }
.art-aktualizacja { padding: 12px 16px; background: var(--porcelana); border-left: 2px solid var(--zloto-logo); font-size: 1rem; }
@media (max-width: 480px) {
  .kto-in { flex-direction: column; gap: 14px; }
  .kto-foto { width: 80px; height: 80px; }
}