/* =========================================================================
   ESTETOLOG — Medycyna Estetyczna (Rzeszów)
   Statyczny port estetyki „Mavie" → czysty CSS.  Paleta: GRAFIT + KREM + ZŁOTO.
   -------------------------------------------------------------------------
   1. Zmienne (kolory/fonty)  ← TU PODMIENIASZ KOLORY
   2. Reset / baza
   3. Typografia (eyebrow, złota kreska, akcent)
   4. Layout / kontenery / sekcje
   5. Przyciski
   6. Navbar (sticky, mobile)
   7. Hero
   8. About (o mnie)
   9. Karty zabiegów (Services)
   10. Cennik (zakładki + akordeon)
   11. Metamorfozy (przed/po)
   12. Opinie
   13. Vouchery
   14. FAQ
   15. Kontakt
   16. Stopka
   17. Reveal on scroll
   18. Utilities
   ========================================================================= */

/* ============================ 1. ZMIENNE ============================ */
:root {
  /* KOLORY — motyw grafit/krem/złoto (podmieniasz tutaj) */
  --cream:        #F5F0E9;   /* ciepłe ivory */
  --cream-dark:   #EDE5D9;   /* ciepły beż */
  --graphite:     #15130F;   /* główny ciemny (nawbar, sekcje) */
  --graphite-dark:#15130F;   /* ujednolicone z --graphite: jeden espresso na całą stronę */   /* najciemniejszy */
  --graphite-light:#221E18;  /* jaśniejszy grafit (hover) */
  --gold:         #C9A96E;
  --gold-light:   #E8D5A3;
  --gold-dark:    #A08040;
  --gold-deep:    #B4914F;   /* bogatsze złoto — linie, obwódki kart, premium akcent */
  --stone:        #7A6B55;   /* tekst drugorzędny na kremie */
  --ivory:        #FFFDF8;   /* jaśniejsza od --cream, powierzchnie "uniesione" (karty, cennik) */
  /* System przejść między sekcjami: włosowa linia + medalion ze znakiem. */
  --linia-zlota:  rgba(201,169,110,0.55);
  --medalion:     clamp(34px, 4.6vw, 46px);
  --espresso:     #15130F;   /* ciepła, bardzo ciemna czerń — pasek kategorii pod Hero */
  --gold-kontrast:#7F6A45;   /* ciemne złoto do drobnego tekstu na kremie — 4.57:1, przechodzi WCAG AA */
  --gold-muted:   #B89A62;   /* przygaszone złoto — typografia na espresso */

  --font-head: "Noto Serif Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1280px;   /* max-w-7xl */
  --wide:      1152px;   /* 6xl */
  --mid:       896px;    /* 4xl */
  --narrow:    768px;    /* 3xl */
  --gutter:    clamp(1.5rem, 4vw, 2.5rem);
  --section:   clamp(4.5rem, 10vw, 8rem);  /* py-32 ~ 128px */
  --nav-h:     80px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================ 2. RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body {
  font-family: var(--font-body);
  /* Punkt 2 klientki: tekst większy, nieco ściślejszy i cięższy.
     17px zamiast 16px — przy Montserracie, który jest szeroki i okrągły,
     16px na kremowym tle czytało się lekko. Ujemny letter-spacing ściąga
     litery; interlinia schodzi z 1.7 na 1.62, bo przy większym stopniu
     i ciaśniejszym świetle 1.7 robiło zbyt luźne wiersze. */
  font-size: 17px;
  letter-spacing: -0.011em;
  line-height: 1.62;
  color: var(--graphite);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
::selection { background: var(--gold); color: var(--cream); }

/* Focus widoczny z klawiatury — złoty, w kolorystyce strony, zamiast domyślnej niebieskiej obwódki przeglądarki */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-dark); outline-offset: 2px; border-radius: 2px;
}
.nav__link:focus-visible, .m-link:focus-visible, .cat-link:focus-visible { outline-offset: 4px; }

/* ============================ 3. TYPOGRAFIA ============================ */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 300; line-height: 1.05; color: var(--graphite); }
.font-head { font-family: var(--font-head); }
em.accent, .accent { color: var(--gold); font-style: italic; }

/* Nadtytuł — mały, rozstrzelony, złoty (sygnatura Mavie) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.eyebrow--sm { letter-spacing: 0.35em; font-size: 9px; }

/* Złota kreska pod nagłówkiem */
.rule { width: 56px; height: 1.5px; background: var(--gold-deep); border: 0; }
.rule--center { margin-inline: auto; }

/* Nagłówek sekcji (wyśrodkowany) */
.sec-head { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.sec-head h2 { font-size: clamp(2.6rem, 5.5vw, 3.75rem); }
.sec-head .rule { margin: 2rem auto 0; }
.sec-head p { margin-top: 1.5rem; color: var(--stone); font-weight: 400; max-width: 42ch; margin-inline: auto; font-size: 0.9rem; }

/* ============================ 4. LAYOUT ============================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide   { max-width: var(--wide); }
.container--mid    { max-width: var(--mid); }
.container--narrow { max-width: var(--narrow); }

.section { padding-block: var(--section); }
.bg-cream      { background: var(--cream); }
.bg-cream-dark { background: var(--cream-dark); }
.bg-graphite      { background: var(--graphite); }
.bg-graphite-dark { background: var(--graphite-dark); }

/* Sekcje na ciemnym tle — jasny tekst */
.bg-graphite, .bg-graphite-dark { color: var(--cream); }
.bg-graphite h1, .bg-graphite h2, .bg-graphite h3,
.bg-graphite-dark h1, .bg-graphite-dark h2, .bg-graphite-dark h3 { color: var(--cream); }

main { overflow-x: hidden; }

/* ============================ 5. PRZYCISKI ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 1rem 2.5rem;
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 500;
  transition: all 0.3s ease; cursor: pointer; white-space: nowrap;
  max-width: 100%; text-align: center;
  border: 1px solid transparent;
}
.btn-gold { background: var(--gold); color: var(--graphite); }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-dark { background: var(--graphite); color: var(--cream); }
.btn-dark:hover { background: var(--graphite-light); }
.btn-outline-light { border-color: rgba(245,240,233,0.25); color: rgba(245,240,233,0.72); }
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline-dark { border-color: rgba(21,19,15,0.2); color: var(--stone); }
.btn-outline-dark:hover { border-color: var(--gold); color: var(--gold-dark); }
.btn-outline-gold { border-color: rgba(201,169,110,0.4); color: var(--gold); }
.btn-outline-gold:hover { background: rgba(201,169,110,0.1); }

/* Link ze strzałką */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.link-arrow svg { transition: transform 0.3s ease; }
.link-arrow:hover svg { transform: translateX(6px); }

/* ============================ 6. NAVBAR ============================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background 0.5s ease, box-shadow 0.5s ease;
  background: transparent;
}
.nav.is-scrolled { background: var(--cream); box-shadow: 0 4px 24px rgba(21,19,15,0.08); border-bottom: 1px solid rgba(122,107,85,0.1); }
/* Na podstronach (bez pełnoekranowego hero) navbar od razu jasny */
.nav.nav--solid { background: var(--cream); border-bottom: 1px solid rgba(122,107,85,0.1); }
.nav--solid .nav__link, .nav.is-scrolled .nav__link { color: var(--stone); }
.nav--solid .nav__phone, .nav.is-scrolled .nav__phone { color: var(--gold-dark); }
.nav--solid .nav__cta, .nav.is-scrolled .nav__cta { border-color: var(--gold-dark); color: var(--gold-dark); }
.nav--solid .nav__burger, .nav.is-scrolled .nav__burger { color: var(--graphite); }
.nav--solid .nav__logo-text small, .nav.is-scrolled .nav__logo-text small { color: var(--stone); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 1rem; }
.nav__logo { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; }
.nav__logo-icon { width: 30px; height: 30px; flex-shrink: 0; }
.nav__logo-text { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; }
/* Prawdziwy wordmark marki (img/logo-napis.webp — ta sama czcionka co litery 3D na
   ścianie gabinetu) zamiast zwykłego tekstu w systemowym foncie strony. Przefarbowany
   przez CSS mask, bo plik źródłowy jest czarny na przezroczystym tle. */
.nav__logo-wordmark { display: block; height: 20px; width: auto; aspect-ratio: 640 / 141; background-color: var(--gold-dark);
  -webkit-mask-image: url('/img/logo-napis.webp'); mask-image: url('/img/logo-napis.webp');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain; }
.nav__logo-text small { font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(201,169,110,0.7); margin-top: 4px; }

.nav__menu { display: flex; align-items: center; gap: 1.1rem; }
.nav__link {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400;
  color: rgba(255,255,255,0.6); transition: color 0.3s ease; white-space: nowrap;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--gold-dark); }

.nav__actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
/* Adres i telefon w nagłówku miały rgba(201,169,110,0.7) na kremowym tle,
   czyli kontrast 1.59:1 — przy 11 px to praktycznie niewidoczne (norma dla
   tekstu tej wielkości to 4.5:1). Przyciemnione złoto daje 4.57:1 i zachowuje
   ciepłą barwę marki; przezroczystość zdjęta, bo to ona zjadała połowę kontrastu. */
.nav__phone, .nav__address { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 11px; letter-spacing: 0.02em; color: var(--gold-kontrast); transition: color 0.3s; white-space: nowrap; }
.nav__phone:hover, .nav__address:hover { color: var(--gold-dark); }
.nav__cta { padding: 0.65rem 1.15rem; border: 1px solid rgba(201,169,110,0.5); color: var(--gold); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.3s ease; white-space: nowrap; }
.nav__cta:hover { border-color: var(--gold); background: var(--gold); color: var(--graphite); }

/* Grupa: ikony social + przycisk burgera — trzymane razem, żeby na mobile      social zawsze siedziały bezpośrednio przy pasku rozwijanego menu */
.nav__toggle { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }
.nav__social { display: flex; align-items: center; gap: 0.65rem; }
.nav__social-link { display: inline-flex; color: rgba(255,255,255,0.55); transition: color 0.3s ease; }
.nav__social-link svg { width: 15px; height: 15px; }
.nav__social-link:hover { color: var(--gold-dark); }
.nav--solid .nav__social-link, .nav.is-scrolled .nav__social-link { color: var(--stone); }

.nav__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: rgba(255,255,255,0.75); }
.nav__burger svg { width: 24px; height: 24px; }

/* --- Responsywność navbara --- */
/* Adres jest najmniej istotny z elementów akcji — znika pierwszy, żeby      zrobić miejsce menu na węższych desktopach/laptopach, zanim w ogóle      dojdzie do trybu burgera. */
@media (max-width: 1500px) {
  .nav__address { display: none; }
}
@media (max-width: 1300px) {
  .nav__menu, .nav__actions { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__mobile {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    background: var(--cream);
    max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease);
  }
  .nav__mobile.is-open { max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 40px rgba(21,19,15,0.1); border-top: 1px solid rgba(122,107,85,0.12); }
  .nav__mobile-inner { padding: 2rem var(--gutter) 2.5rem; display: flex; flex-direction: column; gap: 1.4rem; }
  .nav__mobile a.m-link { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); }
  .nav__mobile a.m-link[aria-current="page"], .nav__mobile a.m-link:hover { color: var(--gold-dark); }
  .nav__mobile-cta { margin-top: 0.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(122,107,85,0.12); display: flex; flex-direction: column; gap: 1rem; }
  .nav__mobile-cta .nav__phone { color: var(--gold-dark); }
}
@media (min-width: 1301px) { .nav__mobile { display: none; } }
@media (max-width: 360px) {
  .nav__social { display: none; }
}

/* ============================ 7. HERO ============================ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(21,19,15,0.32), rgba(21,19,15,0.2) 40%, rgba(21,19,15,0.52));
}
.hero__inner { position: relative; z-index: 2; padding: 7rem 1.5rem 4rem; max-width: 62rem; }
.hero .eyebrow { color: var(--gold); letter-spacing: 0.6em; margin-bottom: 2.5rem; }
/* Hero strony głównej dostaje własny krój — Bodoni Moda, wysoki kontrast grubości
   (moda/luksus). Optycznie szerszy i cięższy od Cormoranta, więc nieco mniejszy
   stopień i luźniejsza interlinia. Reszta serwisu zostaje na Cormorancie. */
.hero h1 {
  font-family: "Bodoni Moda", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.9rem, 9.2vw, 6.4rem);
  letter-spacing: -0.005em;
  color: var(--cream);
  line-height: 0.98;
  margin-bottom: 2rem;
}
.hero h1 em { color: var(--gold); font-style: italic; }
.hero__sub { max-width: 30rem; margin: 0 auto 3rem; color: rgba(255,255,255,0.55); font-weight: 400; font-size: 0.95rem; line-height: 1.9; letter-spacing: 0.01em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.hero__side { position: absolute; left: 2rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 1rem; z-index: 2; }
.hero__side .line { width: 1px; height: 6rem; background: rgba(201,169,110,0.2); }
.hero__side span { writing-mode: vertical-lr; font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(201,169,110,0.4); }
@media (max-width: 1024px) { .hero__side { display: none; } }
.hero__scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.35); }
.hero__scroll span { font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase; }
.hero__scroll svg { animation: bounce 1.8s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* Nagłówek podstrony (mniejszy hero na podstronach) */
.page-hero { position: relative; padding: calc(var(--nav-h) + clamp(3rem,7vw,5rem)) 0 clamp(3rem,7vw,5rem); text-align: center; overflow: hidden; }
.page-hero.bg-graphite, .page-hero.bg-graphite-dark { color: var(--cream); }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 130% 100% at 50% -20%, rgba(201,169,110,0.3), transparent 68%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero__bg { position: absolute; inset: 0; opacity: 0.55; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2.8rem, 7vw, 4.5rem); }
.page-hero h1 em { color: var(--gold); font-style: italic; }
.page-hero p { margin: 1.4rem auto 0; max-width: 44ch; color: rgba(245,240,233,0.6); font-weight: 400; }

/* Breadcrumbs */
.crumbs { padding-block: 1.1rem; font-size: 11px; letter-spacing: 0.05em; color: var(--stone); }
.crumbs a:hover { color: var(--gold-dark); }
.crumbs i { font-style: normal; color: var(--gold); margin-inline: 0.5rem; }

/* ============================ 8. ABOUT ============================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 4rem; } }
.about-media { position: relative; max-width: 28rem; }
.about-media__img { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.about-media__img img { width: 100%; height: 100%; object-fit: cover; }
.about-media__border { position: absolute; inset: 0; transform: translate(1.25rem, 1.25rem); border: 1px solid rgba(201,169,110,0.25); pointer-events: none; }
.about-media__badge { position: absolute; bottom: -1rem; right: -1rem; background: var(--graphite); color: var(--cream); padding: 1.25rem 1.75rem; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.about-media__badge .eyebrow { color: var(--gold); margin-bottom: 0.4rem; letter-spacing: 0.35em; }
.about-media__badge b { display: block; font-family: var(--font-head); font-size: 1.35rem; font-weight: 500; line-height: 1.15; }
@media (max-width: 900px) { .about-media { margin-inline: auto; } }

.about-body .eyebrow { letter-spacing: 0.45em; color: var(--gold-dark); }
.about-body h2 { font-size: clamp(2.4rem, 5vw, 3.5rem); margin-bottom: 2rem; }
.about-body h2 em { color: var(--gold); font-style: italic; }
.about-body p { color: var(--stone); font-weight: 400; font-size: 15px; line-height: 1.9; margin-bottom: 1.2rem; }
.about-body strong { color: var(--graphite); font-weight: 500; }

.creds { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 2.5rem; }
.cred { display: flex; gap: 0.9rem; padding: 1.1rem; border: 1px solid rgba(201,169,110,0.2); transition: all 0.3s ease; }
.cred:hover { border-color: rgba(201,169,110,0.5); background: rgba(237,232,223,0.4); }
.cred svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.cred b { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); font-family: var(--font-body); font-weight: 600; }
.cred span { font-size: 11px; color: var(--stone); }

/* ============================ 9. KARTY ZABIEGÓW ============================ */
.svc-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
/* Miękka złota poświata pod kartami — odkleja je od ciemnego tła sekcji */
.svc-grid::before {
  content: ""; position: absolute; inset: -8% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(201,169,97,0.18), rgba(201,169,97,0) 70%);
  filter: blur(80px);
}
/* Sztywne aspect-ratio 4/5 wyliczało wysokość ze szerokości i nie zważało na
   treść. Gdy do kafelka „Medycyna estetyczna" doszły dwie pozycje, jego zawartość
   urosła do 544 px przy wysokości kafelka 473 px — nadmiar wychodził górą i był
   obcinany przez overflow:hidden, więc zniknął nagłówek „TWARZ", a tekst wyglądał
   na przesunięty względem sąsiadów.
   Teraz proporcja jest DOLNĄ granicą (min-height), a nie sztywnym rozmiarem:
   kafelek może urosnąć pod treść, a że to dzieci kratki, wszystkie trzy i tak
   wyrównują się do najwyższego. */
.svc {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  /* Treść startuje OD GÓRY, zaraz pod zarezerwowanym pasem zdjęcia. Przy
     justify-content: flex-end bloki tekstu były przyklejone do dołu, więc
     kafelek z dłuższą listą zaczynał się wyżej niż sąsiedzi i nagłówki
     „TWARZ / CIAŁO / RELAKS" stały na trzech różnych wysokościach. */
  justify-content: flex-start;
  min-height: min(125%, 30rem);
  /* Kratka wyrównuje kafelki do najwyższego, więc najwyższy z nich wypełniał się
     treścią co do piksela i nie zostawało miejsca na zdjęcie. Górny padding
     rezerwuje pas, którego treść nie może zająć — dzięki temu KAŻDY kafelek
     pokazuje kawałek fotografii, niezależnie od długości listy. */
  padding-top: clamp(5rem, 11vw, 8.5rem);
  color: var(--cream);
}
.svc__img { position: absolute; inset: 0; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.svc:hover .svc__img img { transform: scale(1.05); }
.svc__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,19,15,0.8) 0%, rgba(21,19,15,0.18) 32%, transparent 58%); }
/* Panel treści rozciąga się na całą wysokość pod pasem zdjęcia (flex: 1),
   dzięki czemu wszystkie trzy kafelki mają identyczny pas fotografii u góry,
   a odnośnik na dole (margin-top: auto) zostaje wyrównany tak jak dotąd. */
.svc__body { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.5rem); background: linear-gradient(to top, rgba(21,19,15,0.95) 0%, rgba(21,19,15,0.95) 80%, rgba(21,19,15,0) 100%); }
.svc__body .link-arrow { margin-top: auto; align-self: flex-start; }
.svc__body .eyebrow { color: var(--gold); letter-spacing: 0.45em; font-size: 9px; margin-bottom: 0.5rem; }
.svc__body h3 { color: var(--cream); font-size: clamp(2rem, 3.5vw, 2.8rem); margin-bottom: 1rem; }
.svc__body p { color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 400; line-height: 1.7; margin-bottom: 1.5rem; max-width: 30ch; }
.svc__list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem; }
.svc__list li { display: flex; align-items: center; gap: 0.75rem; font-size: 11px; color: rgba(255,255,255,0.5); }
.svc__list .dash { width: 20px; height: 1px; background: rgba(201,169,110,0.5); flex-shrink: 0; }

/* ============================ 10. CENNIK ============================ */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.tab {
  padding: 0.7rem 1.5rem; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid rgba(122,107,85,0.25); color: var(--stone); transition: all 0.3s ease;
}
.tab:hover { border-color: var(--gold); color: var(--gold-dark); }
.tab.is-active { background: var(--graphite); color: var(--gold); border-color: var(--graphite); }

.price-cat { margin-bottom: 3rem; }
.price-cat > h3 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 500; color: var(--graphite); margin-bottom: 0.75rem; }
.price-cat__rule { width: 100%; height: 1px; background: rgba(201,169,110,0.25); margin-bottom: 0.25rem; }

.price-item { border-bottom: 1px solid rgba(122,107,85,0.12); }
.price-item__head {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 1rem 0.5rem; text-align: left; transition: background 0.25s ease;
}
.price-item__head:hover { background: rgba(237,232,223,0.5); }
.price-item__name { font-size: 13.5px; color: var(--stone); font-weight: 400; line-height: 1.6; }
.price-item__right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.price-item__price { font-family: var(--font-head); font-size: 1.3rem; color: var(--graphite); transition: color 0.3s; white-space: nowrap; }
.price-item__head:hover .price-item__price { color: var(--gold-dark); }
.price-item__chev { width: 13px; height: 13px; color: rgba(201,169,110,0.5); transition: transform 0.3s ease; flex-shrink: 0; }
.price-item.is-open .price-item__chev { transform: rotate(180deg); }
/* Wiersz „płaski" — tylko nazwa + cena, bez rozwijania */
.price-item--flat .price-item__head { cursor: default; }
.price-item--flat .price-item__head:hover { background: transparent; }
.price-item--flat .price-item__head:hover .price-item__price { color: var(--graphite); }
.price-item__panel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.price-item.is-open .price-item__panel { max-height: 600px; }
.price-item__inner { padding: 0.25rem 0.5rem 1.5rem; }
.price-item__desc { border-left: 2px solid rgba(201,169,110,0.4); padding-left: 1rem; }
.price-item__dur { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.75rem; }
.price-item__dur svg { width: 12px; height: 12px; }
.price-item__desc p { font-size: 13px; color: rgba(122,107,85,0.9); font-weight: 400; line-height: 1.8; }
.price-item__book { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--graphite); border-bottom: 1px solid rgba(21,19,15,0.3); padding-bottom: 2px; transition: all 0.3s; }
.price-item__book:hover { color: var(--gold-dark); border-color: var(--gold); }
.price-item__book svg { width: 12px; height: 12px; }

.price-note { margin-top: 3rem; text-align: center; }
.price-note p { font-size: 11px; color: rgba(122,107,85,0.6); letter-spacing: 0.03em; margin-bottom: 2rem; }

/* ============================ 11. METAMORFOZY ============================ */
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.5rem; }
.meta { }
.meta__imgs { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.meta__half { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.meta__half img { width: 200%; height: 100%; object-fit: cover; }
.meta__half--after { left: 50%; }
.meta__half--after img { transform: translateX(-50%); }
.meta__half--before img { filter: grayscale(1) brightness(0.75); }
.meta__tag { position: absolute; bottom: 0.5rem; padding: 0.15rem 0.5rem; font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; }
.meta__tag--before { left: 0.5rem; background: rgba(21,19,15,0.8); color: rgba(245,240,233,0.6); }
.meta__tag--after { right: 0.5rem; background: rgba(201,169,110,0.9); color: var(--graphite); font-weight: 500; }
.meta__divider { position: absolute; inset-block: 0; left: 50%; width: 1px; background: rgba(201,169,110,0.6); z-index: 3; }
.meta__dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px; height: 20px; background: rgba(201,169,110,0.85); border-radius: 50%; z-index: 4; display: flex; align-items: center; justify-content: center; }
.meta__dot::after { content: ""; width: 8px; height: 1px; background: var(--graphite); }
.meta__info { background: rgba(21,19,15,0.6); border: 1px solid rgba(201,169,110,0.1); padding: 1.25rem 1.25rem; }
.meta__info-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.meta__info-top b { font-family: var(--font-head); font-size: 17px; font-weight: 300; color: var(--cream); line-height: 1.3; }
.meta__zone { flex-shrink: 0; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(201,169,110,0.6); border: 1px solid rgba(201,169,110,0.25); padding: 0.15rem 0.5rem; }
.meta__info p { font-size: 12px; color: rgba(245,240,233,0.45); font-weight: 400; line-height: 1.7; }

/* ============================ 12. OPINIE ============================ */
.rev-summary { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-bottom: 3.5rem; flex-wrap: wrap; }
.rev-summary__score { font-family: var(--font-head); font-size: 4rem; color: var(--gold); line-height: 1; }
.rev-summary__stars { display: flex; gap: 3px; margin-bottom: 0.4rem; }
.rev-summary__stars svg { width: 16px; height: 16px; fill: var(--gold); color: var(--gold); }
.rev-summary__meta { font-size: 12px; letter-spacing: 0.1em; color: rgba(245,240,233,0.5); text-transform: uppercase; }
/* minmax(300px, …) wymusza 300 px kolumny nawet wtedy, gdy w kontenerze jest
   mniej miejsca — przy 320 px ekranu zostają 272 px i wszystkie karty wystawały
   poza krawędź. min(300px, 100%) pozwala kolumnie zwęzić się do szerokości
   kontenera, a powyżej zachowuje się dokładnie tak jak wcześniej. */
.rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.25rem; }
.rev { padding: 2rem; border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.5s ease; }
.rev:hover { border-color: rgba(201,169,110,0.25); }
.rev__stars { display: flex; gap: 4px; margin-bottom: 1.5rem; }
.rev__stars svg { width: 11px; height: 11px; fill: var(--gold); color: var(--gold); }
.rev__text { font-family: var(--font-head); font-size: 1.25rem; font-style: italic; font-weight: 300; color: rgba(245,240,233,0.75); line-height: 1.6; margin-bottom: 2rem; }
.rev__name { display: flex; align-items: center; gap: 0.75rem; }
.rev__name .dash { width: 32px; height: 1px; background: rgba(201,169,110,0.3); }
.rev__name span { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(201,169,110,0.6); }
.rev__svc { display: block; margin-top: 0.35rem; font-size: 10px; color: rgba(245,240,233,0.3); letter-spacing: 0.05em; text-transform: none; }

/* Rotacyjny pasek opinii — ciągły autoplay w JS, pauza na hover/dotyk (main.js).
   Bez scroll-snap i scroll-behavior:smooth — obie własności "walczyły" z JS-owym
   przesuwaniem scrollLeft co klatkę (przeglądarka co chwilę doszczypywała pozycję
   z powrotem do najbliższego punktu zaczepienia), przez co pasek wizualnie stał w miejscu. */
.testi-track { display: flex; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
.testi-track::-webkit-scrollbar { display: none; }
.testi-track .rev { flex: 0 0 min(400px, 84vw); border-radius: 14px; background: rgba(255,255,255,0.03); transition: border-color 0.5s ease, background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; }
.testi-track .rev:hover { background: rgba(255,255,255,0.06); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,0.25); }
.testi-static { display: none; }
@media (prefers-reduced-motion: reduce) {
  .testi-marquee { display: none; }
  .testi-static { display: grid; }
}
/* Delikatne zanikanie krawędzi paska — karty nie "ucinają się" na twardo */
.testi-marquee { -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); }

/* Kolumny opinii (/opinie) — ciągłe przewijanie w pionie, czysty CSS (bez JS), różne prędkości
   na kolumnę, pauza na hover. Każda kolumna zduplikowana 2x dla płynnego zapętlenia (translateY -50%). */
.testi-cols { display: flex; gap: 1.25rem; max-height: min(760px, 78vh); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); }
.testi-col { flex: 1 1 0; min-width: 0; }
.testi-col:nth-child(2), .testi-col:nth-child(3) { display: none; }
@media (min-width: 700px) { .testi-col:nth-child(2) { display: block; } }
@media (min-width: 1100px) { .testi-col:nth-child(3) { display: block; } }
.testi-col__track { display: flex; flex-direction: column; gap: 1.25rem; animation: testi-col-scroll var(--dur, 28s) linear infinite; }
.testi-col:hover .testi-col__track { animation-play-state: paused; }
@keyframes testi-col-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.testi-cols-static { display: none; }
@media (prefers-reduced-motion: reduce) {
  .testi-cols { display: none; }
  .testi-cols-static { display: grid; }
}

/* ============================ 13. VOUCHERY ============================ */
/* Hero z pełnoekranowym tłem — zdjęcie zajmuje całą sekcję (od krawędzi do krawędzi
   viewportu), tekst leży NA nim (nie obok, żadnego grida dwukolumnowego). Lewa część
   zdjęcia (spokojna satyna) świeci przez jasny gradient pod tekstem, prawa (vouchery)
   zostaje w pełni widoczna bez przyciemnienia. */
.vouch-hero {
  position: relative; overflow: hidden;
  min-height: clamp(560px, 62vw, 720px);
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.vouch-hero__bg {
  position: absolute; inset: 0;
  background-image: url('/img/voucher2.jpg');
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}
.vouch-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--cream) 0%, rgba(245,240,233,0.88) 26%, rgba(245,240,233,0.4) 48%, rgba(245,240,233,0) 66%);
}
.vouch-hero__content { position: relative; z-index: 2; max-width: 540px; }
.vouch-hero__lead { font-size: 1.05rem; color: var(--stone); line-height: 1.8; margin: 1.5rem 0 2rem; max-width: 46ch; }
.vouch-hero__features { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2.75rem; }
.vouch-hero__features div { display: flex; gap: 1rem; align-items: flex-start; }
.vouch-hero__features svg { width: 22px; height: 22px; color: var(--gold-dark); flex-shrink: 0; margin-top: 0.15rem; }
.vouch-hero__features b { display: block; font-size: 13px; letter-spacing: 0.01em; color: var(--graphite); font-weight: 600; }
.vouch-hero__features span { display: block; font-size: 12px; color: var(--stone); margin-top: 0.15rem; }
.vouch-hero__badge { position: absolute; z-index: 2; top: calc(var(--nav-h) + clamp(1rem, 3vw, 1.75rem)); right: clamp(1.5rem, 4vw, 3rem); width: 84px; height: 84px; filter: drop-shadow(0 10px 20px rgba(21,19,15,0.3)); }
@media (max-width: 900px) {
  .vouch-hero { min-height: 0; padding-bottom: clamp(2.5rem, 10vw, 3.5rem); }
  .vouch-hero__bg { background-position: 70% center; }
  .vouch-hero__bg::after { background: linear-gradient(180deg, var(--cream) 0%, rgba(245,240,233,0.92) 40%, rgba(245,240,233,0.6) 62%, rgba(245,240,233,0.2) 100%); }
  .vouch-hero__content { max-width: none; padding-top: 56vw; }
}
@media (max-width: 500px) { .vouch-hero__badge { width: 60px; height: 60px; top: calc(var(--nav-h) + 0.75rem); right: 1rem; } }

.vouch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (max-width: 900px) { .vouch-grid { grid-template-columns: 1fr; gap: 3.5rem; } }
.vouch-card-wrap { position: relative; }
.vouch-card-wrap::before { content: ""; position: absolute; inset: 0; transform: translate(0.75rem, 0.75rem); background: rgba(201,169,110,0.2); }
.vouch-card { position: relative; background: var(--graphite); color: var(--cream); padding: 2.5rem; overflow: hidden; }
.vouch-card__circle { position: absolute; border-radius: 50%; background: rgba(201,169,110,0.05); }
.vouch-card__circle--1 { width: 12rem; height: 12rem; top: -3rem; right: -2rem; }
.vouch-card__circle--2 { width: 9rem; height: 9rem; bottom: -3rem; left: -3rem; }
.vouch-card__body { position: relative; z-index: 2; }
.vouch-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2.5rem; }
.vouch-card__label { font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: rgba(201,169,110,0.6); margin-bottom: 0.5rem; }
.vouch-card__brand { font-family: var(--font-head); font-size: 2rem; font-weight: 300; color: var(--gold); letter-spacing: 0.15em; }
.vouch-card__sub { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(201,169,110,0.4); margin-top: 0.25rem; }
.vouch-card svg.gift { width: 36px; height: 36px; color: rgba(201,169,110,0.25); }
.vouch-card__value { border-top: 1px solid rgba(201,169,110,0.15); padding-top: 1.5rem; margin-bottom: 2rem; }
.vouch-card__value .lbl { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(245,240,233,0.4); margin-bottom: 0.5rem; }
.vouch-card__value b { font-family: var(--font-head); font-size: 3rem; font-weight: 300; color: var(--gold); }
/* Miejsce na wpisanie nazwy zabiegu. Wcześniej był tu ciąg 17 podkreślników
   przy 3 rem — min-content tego napisu to ~450 px, więc na iPhone Pro Max
   (430 px) rozpychał kartę o 45 px za ekran. Kreska rysowana CSS-em nie ma
   własnej szerokości minimalnej, więc zwęża się razem z kartą. */
.vouch-card__line { display: block; height: 1px; width: 100%; margin: 1.9rem 0 0.6rem; background: rgba(201,169,110,0.45); }
.vouch-card__valid { display: flex; align-items: flex-end; justify-content: space-between; }
.vouch-card__valid .lbl { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(245,240,233,0.3); margin-bottom: 0.25rem; }
.vouch-card__valid p { font-size: 13px; color: rgba(245,240,233,0.55); font-weight: 400; }
.vouch-card__valid .ln { width: 4rem; height: 1px; background: rgba(201,169,110,0.2); }

.vouch-steps h3 { font-family: var(--font-head); font-size: 1.9rem; font-weight: 300; color: var(--graphite); margin-bottom: 1.5rem; }
.vouch-steps ol { display: flex; flex-direction: column; gap: 1rem; }
.vouch-steps li { display: flex; gap: 1rem; align-items: flex-start; }
.vouch-steps li b { font-family: var(--font-head); font-size: 1.5rem; color: rgba(201,169,110,0.5); line-height: 1; }
.vouch-steps li span { font-size: 13.5px; color: var(--stone); font-weight: 400; line-height: 1.7; }
.vouch-amounts { margin-top: 2.5rem; }
.vouch-amounts .eyebrow { letter-spacing: 0.35em; }
.vouch-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vouch-chips .chip { padding: 0.4rem 1rem; border: 1px solid rgba(201,169,110,0.3); border-radius: 20px; font-size: 11px; color: rgba(122,107,85,0.75); letter-spacing: 0.03em; transition: all 0.2s; }
.vouch-chips .chip:hover { border-color: var(--gold-dark); color: var(--gold-dark); }
.vouch-chips .chip.is-active { background: var(--graphite); border-color: var(--graphite); color: var(--gold); }
.vouch-card__input { font-family: var(--font-head); font-size: 3rem; font-weight: 300; color: var(--gold); background: none; border: none; border-bottom: 1px solid rgba(201,169,110,0.4); width: 4.5rem; outline: none; }
.vouch-card__input::placeholder { color: rgba(201,169,110,0.35); }
.vouch-card__input::-webkit-outer-spin-button, .vouch-card__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================ 14. FAQ ============================ */
.faq { }
.faq__item { border-bottom: 1px solid rgba(201,169,110,0.15); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem 0; text-align: left; }
.faq__q span.q { font-family: var(--font-head); font-size: 1.25rem; font-weight: 300; color: rgba(245,240,233,0.8); transition: color 0.3s; line-height: 1.4; }
.faq__item.is-open .faq__q span.q, .faq__q:hover span.q { color: var(--gold); }
.faq__icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(245,240,233,0.2); display: flex; align-items: center; justify-content: center; color: rgba(245,240,233,0.4); transition: all 0.3s; }
.faq__icon svg { width: 11px; height: 11px; }
.faq__item.is-open .faq__icon { border-color: var(--gold); background: rgba(201,169,110,0.1); color: var(--gold); }
.faq__icon .minus { display: none; }
.faq__item.is-open .faq__icon .plus { display: none; }
.faq__item.is-open .faq__icon .minus { display: block; }
.faq__panel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.faq__item.is-open .faq__panel { max-height: 400px; }
.faq__panel p { font-size: 13.5px; color: rgba(245,240,233,0.55); font-weight: 400; line-height: 1.8; padding-bottom: 1.75rem; padding-right: 2.5rem; }
/* FAQ na jasnym tle */
.faq--light .faq__item { border-color: rgba(122,107,85,0.18); }
.faq--light .faq__q span.q { color: var(--graphite); }
.faq--light .faq__item.is-open .faq__q span.q, .faq--light .faq__q:hover span.q { color: var(--gold-dark); }
.faq--light .faq__icon { border-color: rgba(21,19,15,0.2); color: var(--stone); }
.faq--light .faq__item.is-open .faq__icon { border-color: var(--gold); color: var(--gold-dark); }
.faq--light .faq__panel p { color: var(--stone); }

/* ============================ 15. KONTAKT ============================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 3rem; } }
.contact-info h2 { font-size: clamp(2.4rem, 5vw, 3.5rem); margin-bottom: 3rem; }
.contact-info h2 em { color: var(--gold); font-style: italic; }
.contact-row { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 2.2rem; }
.contact-row svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 4px; }
.contact-row .lbl { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.35rem; }
.contact-row a, .contact-row p { color: var(--graphite); font-weight: 400; }
.contact-row a:hover { color: var(--gold-dark); }
.contact-social { display: flex; gap: 0.75rem; margin-top: 2.5rem; }
.contact-social a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.25rem; border: 1px solid rgba(21,19,15,0.2); color: var(--stone); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; }
.contact-social a:hover { border-color: var(--gold); color: var(--gold-dark); }
.contact-social svg { width: 13px; height: 13px; }

.contact-card { background: var(--graphite); color: var(--cream); padding: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.contact-card h3 { font-size: clamp(2rem, 4vw, 3rem); color: var(--cream); margin-bottom: 1.5rem; }
.contact-card h3 em { color: var(--gold); font-style: italic; }
.contact-card p { font-size: 13px; color: rgba(245,240,233,0.45); font-weight: 400; line-height: 1.8; margin: 0 auto 2.5rem; max-width: 26rem; }
.contact-card .btn { width: 100%; margin-bottom: 0.75rem; }

.map-wrap { margin-top: 0; }
.map-embed { width: 100%; min-height: 420px; border: 0; display: block; filter: grayscale(0.2) contrast(1.05); }
.map-placeholder { width: 100%; min-height: 420px; background: repeating-linear-gradient(45deg, #e6ded0 0 22px, #ded4c2 22px 44px); display: flex; align-items: center; justify-content: center; color: #9a8c72; font-size: 12px; letter-spacing: 0.1em; text-align: center; padding: 1rem; }

/* Pasek CTA (na ciemno) */
.cta-band { position: relative; overflow: hidden; text-align: center; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 130% 90% at 50% -10%, rgba(201,169,110,0.28), transparent 68%);
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(2.4rem, 5vw, 3.5rem); margin-bottom: 1.25rem; }
.cta-band h2 em { color: var(--gold); font-style: italic; }
.cta-band p { color: rgba(245,240,233,0.55); font-weight: 400; max-width: 34rem; margin: 0 auto 2.5rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ============================ 16. STOPKA ============================ */
.footer { background: var(--graphite-dark); color: var(--cream); padding-block: clamp(3rem, 6vw, 4rem); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 3rem); margin-bottom: 3rem; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
/* Wordmark w stopce — img/logo-napis.webp (czarny na przezroczystym tle) przefarbowany na
   złoto przez CSS mask, bo bezpośrednio na ciemnym tle stopki byłby niewidoczny. */
.footer__brand .wordmark {
  display: block; width: clamp(150px, 18vw, 210px); aspect-ratio: 640 / 141;
  background-color: var(--gold);
  -webkit-mask-image: url('/img/logo-napis.webp'); mask-image: url('/img/logo-napis.webp');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
}
.footer__brand small { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(201,169,110,0.55); display: block; margin: 0.4rem 0 1.25rem; }
.footer__brand p { font-size: 13px; color: rgba(245,240,233,0.65); font-weight: 400; line-height: 1.9; }
.footer__col h4 { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(201,169,110,0.65); margin-bottom: 1.5rem; font-family: var(--font-body); font-weight: 500; }
.footer__col nav, .footer__col .stack { display: flex; flex-direction: column; gap: 0.75rem; }
.footer__col a, .footer__col p { font-size: 13px; letter-spacing: 0.03em; color: rgba(245,240,233,0.82); transition: color 0.3s; }
.footer__col a:hover { color: var(--gold); }
.footer__social { display: flex; gap: 1rem; margin-top: 1.5rem; }
.footer__social a { color: rgba(245,240,233,0.5); transition: color 0.3s; }
.footer__social a:hover { color: var(--gold); }
.footer__social svg { width: 17px; height: 17px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.footer__bottom p, .footer__bottom a, .footer__bottom span { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(245,240,233,0.5); }
.footer__bottom a:hover { color: var(--gold); }
/* Bez zawijania trzy pozycje (polityka · regulamin · autor) nie mieszczą się
   w jednej linii poniżej ~370 px i wychodziły poza ekran — zmierzone: 5 px przy
   360 px, 45 px przy 320 px, na każdej podstronie. */
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.5rem; }
/* Separator jako ::after trzyma się pozycji PO LEWEJ, więc po zawinięciu nowa
   linia nigdy nie zaczyna się od kropki (tak było, gdy „ · ” stało w HTML). */
.footer__legal > :not(:last-child)::after {
  content: "·"; margin-left: 1.5rem; opacity: 0.45; display: inline-block;
}
@media (max-width: 420px) {
  .footer__bottom { gap: 0.9rem; }
  .footer__legal { gap: 0.35rem 0.8rem; }
  .footer__legal > :not(:last-child)::after { margin-left: 0.8rem; }
}

/* ============================ 17. REVEAL ON SCROLL ============================ */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.1s; }
.reveal[data-d="2"] { transition-delay: 0.2s; }
.reveal[data-d="3"] { transition-delay: 0.3s; }
.reveal[data-d="4"] { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scroll svg { animation: none; }
}

/* ============================ 18. UTILITIES ============================ */
.text-center { text-align: center; }
/* Długie etykiety przycisków (np. "Więcej metamorfoz na Instagramie") nie mieściły się
   w 375px — white-space:nowrap wypychał box poza viewport, co wyglądało jak brak
   wycentrowania. Na wąskich ekranach pozwalamy tekstowi zawinąć się do 2 linii. */
@media (max-width: 420px) {
  .btn { white-space: normal; line-height: 1.4; }
  /* Przycisk moze sie zawijac, ale numer telefonu ma zostac w calosci. */
  .nowrap { white-space: nowrap; }
}
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }
.no-scroll { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================ 19. PODSTRONY ZABIEGOWE (treść) ============================ */
/* Blok tekstowy z nagłówkami H3 i listami — spójny z resztą (krem/grafit/złoto) */
.prose { max-width: 720px; margin-inline: auto; }
.prose__h { font-family: var(--font-head); font-size: clamp(1.5rem, 3.5vw, 1.9rem); font-weight: 500; color: var(--graphite); margin: 72px 0 20px; }
.prose__h:first-child { margin-top: 0; }
.prose p { color: var(--stone); font-weight: 500; line-height: 1.65; margin-bottom: 20px; }
.prose a { color: var(--gold-dark); }
.prose a:hover { text-decoration: underline; }
/* Zdanie zamykające listę przeciwwskazań (np. „Pełną kwalifikację... ") — oddzielone linią */
.prose__note { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(122,107,85,0.15); }
@media (max-width: 767px) {
  .prose__h { margin: 48px 0 16px; }
  .prose__h:first-child { margin-top: 0; }
  .container--narrow:has(.prose) { padding-inline: 24px; }
}

/* Plakietka "do zatwierdzenia" — usuń jednym cięciem po akceptacji treści przez Annę */
.pending-review { background: #FFF4E0; border: 1px solid #E3A93B; border-radius: 8px; padding: 1rem 1.25rem; color: #6B4A12; font-size: 13px; line-height: 1.7; margin-bottom: 2.5rem; }
.pending-review strong { display: block; margin-bottom: 0.25rem; font-size: 14px; }
/* To samo, jako blockquote markdown (">") — na Eleventy nie da się wstawić surowego div w treść .md */
.prose blockquote { background: #FFF4E0; border: 1px solid #E3A93B; border-radius: 8px; padding: 1rem 1.25rem; margin: 1.75rem 0; }
.prose blockquote p { color: #6B4A12; font-size: 13px; line-height: 1.7; margin: 0; }
.prose blockquote strong { display: block; margin-bottom: 0.25rem; font-size: 14px; color: #6B4A12; }

/* Spis treści — kotwice do sekcji na podstronach zabiegowych */
.toc { background: var(--ivory); border: 1px solid rgba(201,169,110,0.22); border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 56px; box-shadow: 0 10px 26px rgba(160,128,64,0.07); }
.toc__lbl { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.6rem; }
.toc ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0; margin: 0; padding: 0; }
.toc li { font-size: 13px; }
.toc li:not(:last-child)::after { content: "|"; margin: 0 0.6rem; color: rgba(122,107,85,0.4); }
.toc a { color: var(--graphite); font-weight: 400; }
.toc a:hover { color: var(--gold-dark); }

/* Listy „wskazania" / „przeciwwskazania" — wspólny znacznik: krótka złota kreska */
.ticks { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 768px) {
  .ticks { grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 20px; }
  .ticks.ticks--warn { grid-template-columns: 1fr; }
}
.ticks--warn { gap: 16px; }
.ticks li { position: relative; padding-left: 1.75rem; font-size: 16px; color: var(--stone); font-weight: 400; line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 12px; height: 1px; background: var(--gold-dark); }

/* Karta z ceną */
.price-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--ivory); border: 1px solid rgba(201,169,110,0.32); box-shadow: 0 14px 34px rgba(160,128,64,0.1), 0 2px 8px rgba(21,19,15,0.03); }
.price-box__head .eyebrow { margin-bottom: 0.5rem; }
.price-box__amount { font-family: var(--font-head); font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 500; color: var(--graphite); }
.price-box__note { margin-top: 0.5rem; font-size: 13px; color: var(--stone); font-weight: 400; }
.price-box__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 520px) { .price-box__actions { width: 100%; } .price-box__actions .btn { flex: 1; } }

/* ============================ 20. HUB ZABIEGÓW + LINK KATEGORII CENNIKA ============================ */
.hub-cat { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.hub-cat__h { font-family: var(--font-head); font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 500; color: var(--graphite); margin-bottom: 0.25rem; }
.hub-cat__rule { width: 100%; height: 1px; background: rgba(201,169,110,0.25); margin-bottom: 0.25rem; }
.hub-link { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 0.5rem; border-bottom: 1px solid rgba(122,107,85,0.12); transition: background 0.3s; }
a.hub-link:hover { background: rgba(237,232,223,0.5); }
.hub-link__name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 500; color: var(--graphite); }
.hub-link__meta { display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.03em; color: var(--stone); font-weight: 400; margin-top: 0.15rem; }
.hub-link__go { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); white-space: nowrap; }
.hub-link__go svg { width: 12px; height: 12px; }
a.hub-link:hover .hub-link__name { color: var(--gold-dark); }
.hub-link--soon .hub-link__name { color: var(--stone); }
.hub-link__flag, .svc__flag { display: inline-block; margin-left: 0.6rem; font-family: var(--font-body); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 20px; padding: 0.18rem 0.6rem; vertical-align: middle; }
.hub-link__flag { color: var(--gold-dark); border: 1px solid var(--gold-dark); }
.svc__flag { color: var(--gold); border: 1px solid var(--gold); }

/* --- Drzewo kategorii na /zabiegi — odwzorowuje zagnieżdżenie z listy Pani Anny.
       Poziom 1: kategoria główna, 2: grupa, 3: zabieg (link), 4-5: warianty. --- */
.hub-top { margin-bottom: clamp(2rem, 4vw, 3rem); }
.hub-top__h { font-family: var(--font-head); font-size: clamp(1.45rem, 3.2vw, 1.9rem); font-weight: 500; color: var(--graphite); margin-bottom: 0.25rem; }
.hub-grp { margin-top: 1.6rem; }
.hub-grp__h { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dark); font-weight: 600; margin-bottom: 0.35rem; }
.hub-list { list-style: none; margin: 0; padding: 0; }
.hub-item { border-bottom: 1px solid rgba(122,107,85,0.1); }
.hub-item:last-child { border-bottom: 0; }
.hub-item__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.5rem; border-radius: 8px; transition: background 0.3s ease, transform 0.3s ease; }
a.hub-item__link:hover { background: rgba(182,154,107,0.06); transform: translateX(2px); }
.hub-item__name { font-family: var(--font-head); font-size: 1.08rem; font-weight: 500; color: var(--graphite); }
a.hub-item__link:hover .hub-item__name { color: var(--gold-dark); }
/* Pozycja bez własnej podstrony (wariant z cennika) — celowo nie wygląda na link. */
.hub-item__name--plain { display: block; padding: 0.7rem 0.5rem; color: var(--stone); }
/* Punkt 10 klientki: strzałka miała opacity:0 i wychodziła dopiero po najechaniu
   myszą — czyli NA TELEFONIE NIGDY. Lista zabiegów wyglądała jak zwykły tekst.
   Teraz widać ją zawsze, tak jak w cenniku; po najechaniu tylko się rozjaśnia
   i przesuwa. */
.hub-item__arrow { width: 13px; height: 13px; flex: none; color: var(--gold); opacity: 0.75; transition: opacity 0.3s ease, transform 0.3s ease; }
a.hub-item__link:hover .hub-item__arrow { opacity: 1; transform: translateX(3px); }
.fr-theme .hub-item__arrow { color: var(--fr-gold-muted); }
.hub-sub { list-style: none; margin: 0 0 0.55rem; padding: 0 0 0 1.4rem; display: grid; gap: 0.05rem; }
.hub-sub__i { position: relative; padding: 0.18rem 0 0.18rem 0.85rem; font-size: 13.5px; color: var(--stone); }
.hub-sub__i::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 6px; height: 1px; background: var(--gold-dark); opacity: 0.5; }
.hub-sub__i a { color: var(--stone); border-bottom: 1px solid transparent; transition: color 0.25s, border-color 0.25s; }
.hub-sub__i a:hover { color: var(--gold-dark); border-bottom-color: currentColor; }
.hub-sub--deep { padding-left: 1.1rem; margin: 0.1rem 0 0.35rem; }
.hub-sub--deep .hub-sub__i { font-size: 12.5px; }
.hub-soon-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--graphite); border-bottom: 1px solid rgba(21,19,15,0.3); padding-bottom: 2px; transition: all 0.3s; white-space: nowrap; }
.hub-soon-cta:hover { color: var(--gold-dark); border-color: var(--gold); }

/* Link kategorii w cenniku → podstrona zabiegu */
.cat-link { color: inherit; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.3s; }
.cat-link:hover { color: var(--gold-dark); }
.cat-link svg { width: 13px; height: 13px; color: var(--gold); }

/* ============================ 21. MEDIA: przed/po, certyfikaty, lightbox ============================
   Zdjęcia „przed/po” pochodzą z różnych sesji (różne proporcje, własne plakietki i etykiety
   wypalone w pikselach) — object-fit:contain w jasnej ramce gwarantuje, że żadne zdjęcie nigdy
   nie zostanie ucięte (np. plakietka czy napis „po” znikające poza kadrem przy object-fit:cover),
   niezależnie od jego oryginalnych proporcji. Podpis pod zdjęciem (nie na nim) — spójny
   "portfolio-owy" styl niezależny od tego, co jest wypalone w samym zdjęciu. */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.ba { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(201,169,110,0.22); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 28px rgba(21,19,15,0.06); }
.ba__frame { position: relative; aspect-ratio: 1/1; background: #fff; }
.ba__frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ba__cap { padding: 1.1rem 1.25rem 1.25rem; color: var(--graphite); font-size: 12px; letter-spacing: 0.05em; font-weight: 400; border-top: 1px solid rgba(201,169,110,0.15); }
.ba__cap b { font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; display: block; color: var(--graphite); margin-bottom: 0.15rem; }

/* Karuzela metamorfoz (przed/po) — snap-scroll, bez bibliotek */
.ba-carousel { position: relative; padding-inline: clamp(0px, 4vw, 44px); }
.ba-track { display: flex; gap: clamp(1rem, 2.5vw, 1.75rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 0.4rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ba-track::-webkit-scrollbar { display: none; }
.ba-track .ba { flex: 0 0 min(360px, 78vw); scroll-snap-align: start; }
.ba-nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; background: var(--graphite); border: 1px solid var(--graphite); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; box-shadow: 0 8px 20px rgba(21,19,15,0.18); transition: background 0.3s, border-color 0.3s; z-index: 2; }
.ba-nav:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.ba-nav--prev { left: 0; }
.ba-nav--next { right: 0; }
@media (max-width: 700px) { .ba-nav { display: none; } .ba-carousel { padding-inline: 0; } }

/* Siatka zdjęć (wnętrze gabinetu) — wspólny aspect-ratio, wyrównane rzędy */
.masonry { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 2vw, 1.25rem); align-items: start; }
@media (min-width: 700px) { .masonry { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .masonry { grid-template-columns: repeat(4, 1fr); } }
.masonry__item { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 1px solid rgba(201,169,110,0.18); cursor: zoom-in; }

/* Samoprzesuwający się pasek kategorii */
/* Pasek kategorii między Hero a „O mnie" — element identyfikacji, nie nawigacja.
   Smukły (58px), ciepła czerń espresso, przygaszone złoto, włosowe linie na krawędziach. */
.marquee {
  overflow: hidden;
  background: var(--espresso);
  border-top: 1px solid rgba(184,154,98,0.13);
  border-bottom: 1px solid rgba(184,154,98,0.13);
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 58px;
  /* Bardzo powolny przesuw — pasek ma być tłem marki, nie ruchem przyciągającym wzrok.
     translateX(-50%) na torze złożonym z dwóch identycznych połówek daje pętlę bez skoku. */
  animation: marquee-scroll 90s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-body);
  font-size: 10.5px;
  /* Punkt 8: na ciemnym pasku waga 400 przy rozstrzeleniu 0.42em
     rozmywała się w tle. Czcionka ta sama, tylko cięższa. */
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-muted);
  white-space: nowrap;
  padding-inline: 2rem;
}
.marquee__dot { color: rgba(184,154,98,0.42); font-size: 10px; line-height: 1; }
@media (max-width: 700px) {
  .marquee__track { height: 47px; animation-duration: 68s; }
  .marquee__item { font-size: 9.5px; letter-spacing: 0.32em; padding-inline: 1.35rem; }
}
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Karuzela certyfikatów (coverflow) — jeden wspólny komponent, /o-mnie i /galeria.
   Głębia wyłącznie przez scale/translateX/opacity/z-index (bez rotateY) — tekst
   na certyfikatach zostaje czytelny i nieznieksztalcony. object-fit:contain wszędzie,
   żaden certyfikat nie jest kadrowany. */
.cert-cf { max-width: 960px; margin-inline: auto; padding-block: clamp(1rem, 3vw, 2rem); }

.cert-cf__stage {
  --cf-w: clamp(190px, 24vw, 360px);
  --cf-h: calc(var(--cf-w) * 3 / 4);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  height: var(--cf-h);
  padding-inline: clamp(48px, 7vw, 64px);
}
.cert-cf__track { position: relative; width: 100%; height: 100%; }

.cert-cf__slide {
  position: absolute; top: 50%; left: 50%; width: var(--cf-w); aspect-ratio: 4 / 3;
  margin-top: calc(var(--cf-h) / -2); margin-left: calc(var(--cf-w) / -2);
  background: #fff; border: 1px solid rgba(201,169,110,0.35); border-radius: 4px; padding: 0;
  box-shadow: 0 18px 40px rgba(21,19,15,0.16); cursor: pointer;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}
.cert-cf__slide img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; pointer-events: none; }
.cert-cf__slide[aria-current="true"] { cursor: zoom-in; }

.cert-cf__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: #fff; border: none; transition: background 0.25s;
}
.cert-cf__arrow:hover { background: var(--gold-dark); }
.cert-cf__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.cert-cf__arrow--prev { left: 4px; }
.cert-cf__arrow--next { right: 4px; }

.cert-cf__counter { margin: 1rem 0 0; text-align: center; font-size: 12px; letter-spacing: 0.08em; color: var(--stone); }

.cert-cf__thumbs { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; }
.cert-cf__thumb-track { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-behavior: smooth; }
.cert-cf__thumb-track::-webkit-scrollbar { display: none; }
.cert-cf__thumb { flex: 0 0 auto; width: 56px; aspect-ratio: 4/3; background: #fff; border: 1px solid rgba(201,169,110,0.25); border-radius: 3px; padding: 2px; cursor: pointer; opacity: 0.6; transition: border-color 0.2s, opacity 0.2s; }
.cert-cf__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.cert-cf__thumb:hover { opacity: 0.85; }
.cert-cf__thumb.is-active { border-color: var(--gold-dark); border-width: 2px; opacity: 1; }
.cert-cf__thumb-arrow { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(201,169,110,0.4); background: #fff; color: var(--gold-dark); display: flex; align-items: center; justify-content: center; }
.cert-cf__thumb-arrow:hover { background: var(--cream-dark); }
.cert-cf__thumb-arrow svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }

@media (max-width: 767px) {
  .cert-cf__stage { --cf-w: clamp(150px, 58vw, 220px); flex-wrap: wrap; height: auto; overflow: visible; gap: 0.85rem; }
  .cert-cf__track { order: 1; flex: 1 0 100%; height: var(--cf-h); overflow: hidden; }
  .cert-cf__arrow { position: static; transform: none; order: 2; }
  .cert-cf__thumb { width: 44px; }
}

.lb { position: fixed; inset: 0; z-index: 999; background: rgba(21,19,15,0.93); display: none; align-items: center; justify-content: center; padding: 4vw; }
.lb.is-open { display: flex; }
.lb img { max-width: 94vw; max-height: 90vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lb__close { position: absolute; top: 1.2rem; right: 1.5rem; width: 44px; height: 44px; border: 1px solid rgba(245,240,233,0.3); border-radius: 50%; color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.lb__close:hover { border-color: var(--gold); color: var(--gold); }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 60px; color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; opacity: 0.65; transition: opacity 0.3s, color 0.3s; }
.lb__nav:hover { opacity: 1; color: var(--gold); }
.lb__prev { left: 0.5rem; } .lb__next { right: 0.5rem; }

/* ============================ 17. FRENCH THEME (Zabiegi / Cennik / Masaże) ============================
   Skopiowany system wizualny — dotyczy WYŁĄCZNIE stron opatrzonych klasą .fr-theme (Zabiegi hub,
   Cennik, Masaże). Reszta zabiegów (17 pozostałych podstron) korzysta z tego samego layoutu co
   Masaże (zabieg.njk), ale bez klasy .fr-theme — nic w tej sekcji ich nie dotyka. Paleta jasna,
   kremowo-beżowa, francuski "quiet luxury": ciepłe tło, stonowane złoto, dużo przestrzeni. */
.fr-theme {
  --fr-bg: #F5F1EA;
  --fr-bg-2: #EEE8DF;
  --fr-champagne: #E6D8C5;
  --fr-ivory: #FAF8F4;
  --fr-ink: #2F2A25;
  --fr-ink-soft: #6F675F;
  --fr-gold-muted: #B69A6B;
  --fr-gold-soft: #C9AE7B;
  --fr-border: rgba(182,154,107,0.20);
  background:
    radial-gradient(circle at 15% 30%, rgba(224,210,191,0.18), transparent 25%),
    radial-gradient(circle at 85% 60%, rgba(230,217,200,0.20), transparent 30%),
    var(--fr-bg);
}
.fr-theme .eyebrow { color: var(--fr-gold-muted); }

/* --- Hero --- */
.fr-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: calc(var(--nav-h) + clamp(3rem, 7vw, 5rem)) 0 clamp(3.5rem, 7vw, 5rem);
  background:
    radial-gradient(circle at 50% 0%, rgba(220,205,185,0.4), transparent 38%),
    linear-gradient(180deg, #F7F4EE 0%, #F2EEE7 100%);
}
.fr-hero__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.55; }
.fr-hero__lines path { stroke: var(--fr-gold-soft); }
.fr-hero .container { position: relative; z-index: 2; }
.fr-hero .eyebrow { color: var(--fr-gold-muted); }
.fr-hero .fr-rule { width: 1px; height: 22px; background: var(--fr-border); margin: 0.9rem auto; position: relative; }
.fr-hero .fr-rule::after { content: "◆"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 7px; color: var(--fr-gold-muted); }
.fr-hero h1 { font-family: var(--font-head); font-weight: 400; letter-spacing: -0.01em; color: var(--fr-ink); font-size: clamp(2.8rem, 7vw, 4.5rem); line-height: 1.05; }
.fr-hero h1 em { color: var(--fr-gold-soft); font-style: italic; }
.fr-hero p { margin: 1.4rem auto 0; max-width: 46ch; color: var(--fr-ink-soft); font-weight: 400; }

/* --- Emblem — powracający element na granicy hero/treść --- */
.fr-emblem {
  width: 58px; height: 58px; border-radius: 50%; position: relative; z-index: 3;
  margin: -29px auto 0;
  background: var(--fr-ivory); border: 1px solid var(--fr-border);
  box-shadow: 0 10px 26px rgba(60,45,30,0.08);
  display: flex; align-items: center; justify-content: center;
  animation: fr-float 7s ease-in-out infinite;
}
.fr-emblem img { width: 54px; height: 54px; display: block; }
@keyframes fr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .fr-emblem { animation: none; } }

/* --- Karty / kontenery treści --- */
.fr-card {
  background: rgba(255,255,255,0.7); border: 1px solid var(--fr-border); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(60,45,30,0.04);
}

/* --- Ikony w kółkach --- */
.fr-icon { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(182,154,107,0.25); background: rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; }
.fr-icon svg { width: 21px; height: 21px; stroke: var(--fr-gold-muted); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* --- Spis treści --- */
.fr-theme .toc { background: rgba(255,255,255,0.7); border: 1px solid var(--fr-border); border-radius: 12px; box-shadow: 0 12px 40px rgba(60,45,30,0.03); }
.fr-theme .toc__lbl { color: var(--fr-gold-muted); }
.fr-theme .toc a { color: var(--fr-ink-soft); position: relative; }
.fr-theme .toc a:hover { color: var(--fr-ink); }

/* --- Zakładki cennika --- */
.fr-theme .tabs { gap: 0.6rem; }
.fr-theme .tab { background: rgba(255,255,255,0.35); border: 1px solid var(--fr-border); color: var(--fr-ink-soft); border-radius: 999px; transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s; }
.fr-theme .tab:hover { transform: translateY(-1px); border-color: var(--fr-gold-muted); }
.fr-theme .tab.is-active { background: var(--fr-ink); border-color: var(--fr-ink); color: var(--fr-ivory); }

/* --- Kategorie cen / hub / akordeon (wspólny język interakcji) --- */
.fr-theme .price-cat, .fr-theme .hub-cat, .fr-theme .hub-top { background: rgba(255,255,255,0.65); border: 1px solid var(--fr-border); border-radius: 12px; padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.75rem); margin-bottom: 1.25rem; }
.fr-theme .price-cat__rule, .fr-theme .hub-cat__rule, .fr-theme .hub-top .hub-cat__rule { background: var(--fr-border); }
.fr-theme .price-cat h3 { color: var(--fr-ink); }
.fr-theme .cat-link, .fr-theme .hub-cat__h, .fr-theme .hub-top__h, .fr-theme .hub-item__name { color: var(--fr-ink); }
.fr-theme .cat-link svg { color: var(--fr-gold-muted); }
.fr-theme .price-item__head, .fr-theme .hub-link { border-radius: 8px; transition: background 0.3s ease, transform 0.3s ease; }
.fr-theme .price-item__head:hover, .fr-theme .hub-link:hover { background: rgba(182,154,107,0.06); transform: translateX(2px); }
.fr-theme .price-item__name, .fr-theme .hub-link__name { color: var(--fr-ink); }
.fr-theme .price-item__price { color: var(--fr-gold-muted); }
.fr-theme .price-item__chev, .fr-theme .hub-link__go svg { color: var(--fr-gold-muted); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.fr-theme .price-item.is-open .price-item__chev { transform: rotate(180deg); }
.fr-theme .price-item__desc p { color: var(--fr-ink-soft); }
.fr-theme .price-item__book { color: var(--fr-gold-muted); }
.fr-theme .price-note { color: var(--fr-ink-soft); }

/* --- Akordeon Masaże (podkategorie) --- */
.fr-accordion { display: flex; flex-direction: column; gap: 1rem; }
.fr-accordion__item { background: rgba(255,255,255,0.7); border: 1px solid var(--fr-border); border-radius: 12px; overflow: hidden; transition: box-shadow 0.35s ease; }
.fr-accordion__item.is-open { box-shadow: 0 16px 40px rgba(60,45,30,0.06); }
.fr-accordion__head { width: 100%; display: flex; align-items: center; gap: 1rem; padding: clamp(1.25rem, 3vw, 1.75rem); text-align: left; transition: background 0.3s ease; }
.fr-accordion__head:hover { background: rgba(182,154,107,0.05); }
.fr-accordion__head h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.5rem; color: var(--fr-ink); flex: 1; }
.fr-accordion__chev { color: var(--fr-gold-muted); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); flex-shrink: 0; }
.fr-accordion__item.is-open .fr-accordion__chev { transform: rotate(180deg); }
.fr-accordion__panel { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease; opacity: 0; }
.fr-accordion__item.is-open .fr-accordion__panel { opacity: 1; max-height: 4000px; }
.fr-accordion__inner { padding: 0 clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 3vw, 2rem); }
.fr-accordion .price-item { border-top: 1px solid var(--fr-border); }
.fr-accordion .price-item:first-child { border-top: none; }

/* --- CTA --- */
.fr-cta { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 2.5rem); flex-wrap: wrap; background: rgba(255,255,255,0.7); border: 1px solid var(--fr-border); border-radius: 12px; padding: clamp(1.5rem, 4vw, 2.25rem); }
.fr-cta__left { display: flex; align-items: center; gap: 1.25rem; flex: 1; min-width: 240px; }
.fr-cta__left b { display: block; font-family: var(--font-head); font-weight: 400; font-size: 1.35rem; color: var(--fr-ink); }
/* :not(.fr-icon) jest konieczne — bez niego ta reguła trafiała także w
   <span class="fr-icon"> (kółko z ikoną) i, mając wyższą specyficzność niż
   .fr-icon, odbierała mu display:flex. Kółko robiło się blokiem, przez co
   align-items/justify-content przestawały działać i ikona lądowała w lewym
   górnym rogu zamiast na środku. Do tego łapała margin-top i font-size 13px. */
.fr-cta__left span:not(.fr-icon) { display: block; font-size: 13px; color: var(--fr-ink-soft); margin-top: 0.3rem; }
.fr-theme .fr-cta .btn-outline-dark, .fr-theme .fr-cta .btn-gold { background: transparent; border: 1px solid var(--fr-gold-muted); color: #7E6540; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.fr-theme .fr-cta .btn-outline-dark:hover, .fr-theme .fr-cta .btn-gold:hover { background: rgba(182,154,107,0.1); box-shadow: 0 6px 16px rgba(182,154,107,0.15); }

/* --- Przyciski --- */
.fr-theme .btn-dark { background: var(--fr-ink); color: var(--fr-ivory); border: 1px solid var(--fr-ink); transition: transform 0.3s ease, background 0.3s ease; }
.fr-theme .btn-dark:hover { background: #241f1a; transform: translateY(-1px); }
.fr-theme .btn-outline-dark { border-color: var(--fr-gold-muted); color: #7E6540; transition: transform 0.3s ease, background 0.3s ease; }
.fr-theme .btn-outline-dark:hover { background: rgba(182,154,107,0.08); transform: translateY(-1px); }

@media (max-width: 640px) {
  .fr-cta { flex-direction: column; align-items: flex-start; }
  .fr-cta__actions { width: 100%; }
  .fr-cta__actions .btn { width: 100%; text-align: center; }
}

/* ===========================================================================
   18. INTRO STRONY GŁÓWNEJ (Web Animations API — bez bibliotek)
   Stany startowe muszą istnieć w CSS, zanim odpali się JS, inaczej mignie
   gotowy layout. Ukrywamy WYŁĄCZNIE przez opacity — żadnego display:none ani
   visibility:hidden, żeby treść hero została w drzewie dostępności i była
   czytana przez czytniki ekranu od pierwszej chwili.
   =========================================================================== */
/* Ukrycie musi wynikać z selektorów istniejących w arkuszu, a NIE z klasy
   dodawanej przez JS — inaczej nagłówek zdąży mignąć, zanim intro.js się wykona.
   `.intro-el` zostaje wyłącznie jako znacznik do sprzątania. */
.js-intro .nav__logo,
.js-intro .nav__menu .nav__link,
.js-intro .nav__actions,
.js-intro .nav__toggle,
.js-intro .hero .eyebrow,
.js-intro .hero h1,
.js-intro .hero__sub,
.js-intro .hero__cta,
.js-intro .hero__scroll,
.js-intro .intro-el { opacity: 0; }

/* Maska zdjęcia: start od dołu. Ustawiona tylko przy aktywnym intro, żeby przy
   wyłączonym JS albo po bezpieczniku zdjęcie było normalnie widoczne. */
.js-intro .hero__bg { clip-path: inset(100% 0 0 0); }

/* Blokada scrolla na czas intro. Zdejmowana w onComplete osi czasu. */
.js-intro, .js-intro body { overflow: hidden; }
.js-intro .hero { pointer-events: none; }

/* Fallback maski dla przeglądarek, które nie interpolują clip-path przez
   element.animate() — ta sama krzywa i czas co w wariancie WAAPI. */
@keyframes intro-odsloniecie { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero__bg.intro-maska-css { animation: intro-odsloniecie 750ms cubic-bezier(0.25, 1, 0.5, 1) forwards; }

/* Element z ruchem dostaje warstwę GPU tylko na czas animacji — zdejmowane
   w onComplete, bo stałe will-change zjada pamięć karty graficznej. */
.intro-gpu { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .js-intro .nav__logo,
  .js-intro .nav__menu .nav__link,
  .js-intro .nav__actions,
  .js-intro .nav__toggle,
  .js-intro .hero .eyebrow,
  .js-intro .hero h1,
  .js-intro .hero__sub,
  .js-intro .hero__cta,
  .js-intro .hero__scroll,
  .js-intro .intro-el { opacity: 1; }
  .js-intro .hero__bg { clip-path: none; }
  .js-intro, .js-intro body { overflow: visible; }
  .js-intro .hero { pointer-events: auto; }
  .hero__bg.intro-maska-css { animation: none; }
}

/* ===========================================================================
   19. CZYTELNOŚĆ NA TELEFONIE
   Etykiety i podpisy schodziły do 8–9,5 px, co przy rozstrzelonych wersalikach
   jest praktycznie nieczytelne na telefonie. Podnosimy je do min. 10 px
   i przy największych rozstrzeleniach lekko je ściągamy, żeby nie przepełniały
   swoich pojemników. Rozmiary na desktopie zostają bez zmian.
   =========================================================================== */
@media (max-width: 1024px) {
  .nav__logo-text small { font-size: 10px; letter-spacing: 0.16em; }
  .hero__scroll span { font-size: 10px; letter-spacing: 0.3em; }
  .hero__side span { font-size: 10px; }
  .eyebrow--sm { font-size: 10px; letter-spacing: 0.28em; }
  .svc__body .eyebrow { font-size: 10px; letter-spacing: 0.32em; }
  .meta__tag { font-size: 10px; }
  .meta__zone { font-size: 10px; }
  .vouch-card__label { font-size: 10px; letter-spacing: 0.34em; }
  .vouch-card__sub { font-size: 10px; letter-spacing: 0.18em; }
  .vouch-card__valid .lbl { font-size: 10px; letter-spacing: 0.22em; }
  .footer__brand small { font-size: 10px; letter-spacing: 0.22em; }
  .hub-link__flag, .svc__flag { font-size: 10px; }
  .marquee__item { font-size: 10.5px; letter-spacing: 0.3em; }
}

/* Na wąskich ekranach podpis pod logo rozpychał nagłówek tak, że przycisk menu
   wychodził poza prawą krawędź i był przycinany (dotyczyło to też pierwotnych
   8,5 px — nie tylko powiększonej wersji). Na telefonie zostaje sam znak
   z napisem ESTETOLOG; podtytuł jest i tak powtórzony w stopce. */
@media (max-width: 560px) {
  .nav__logo-text small { display: none; }
}

/* ===========================================================================
   20. SYSTEM PRZEJŚĆ MIĘDZY SEKCJAMI
   Sekcje zachowują własne, jednolite tła — żadnych gradientów ani rozmyć.
   Granicę tonalną wyznacza włosowa złota linia, a w dwóch wybranych miejscach
   nachodzi na nią medalion ze znakiem ESTETOLOG.

   Dwa warianty tego samego systemu:
     jasne → ciemne   (linia u góry sekcji ciemnej)
     ciemne → jasne   (linia u góry sekcji jasnej)
   Wizualnie identyczne — różnią się tylko tym, po której stronie leży ton.
   =========================================================================== */

/* --- Linia: rysowana u góry sekcji, która zaczyna się po zmianie tonu. --- */
.bg-cream + .bg-graphite,      .bg-cream + .bg-graphite-dark,
.bg-cream-dark + .bg-graphite, .bg-cream-dark + .bg-graphite-dark,
.bg-graphite + .bg-cream,      .bg-graphite + .bg-cream-dark,
.bg-graphite-dark + .bg-cream, .bg-graphite-dark + .bg-cream-dark,
.marquee + .bg-cream,          .marquee + .bg-cream-dark,
.page-hero + .bg-cream,        .page-hero + .bg-cream-dark {
  border-top: 1px solid var(--linia-zlota);
}

/* Nagłówek podstrony jest oddzielony od treści kontenerem z okruszkami,
   więc selektor rodzeństwa go nie obejmuje — linię rysujemy u dołu nagłówka,
   ale tylko wtedy, gdy poniżej faktycznie zaczyna się jasna treść. */
.page-hero { border-bottom: 1px solid var(--linia-zlota); }

/* Pasek okruszków leży na jasnym tle strony. Gdy zaraz pod nim zaczyna się
   ciemna sekcja (/opinie), to druga zmiana tonu — też należy jej się linia. */
.container + .bg-graphite,
.container + .bg-graphite-dark {
  border-top: 1px solid var(--linia-zlota);
}

/* Stopka bywa poprzedzona jasną sekcją (/zabiegi, /cennik, /masaze, /kontakt,
   /opinie) — wtedy też jest to zmiana tonu i należy jej się linia. */
body:has(main > :last-child.bg-cream) .footer,
body:has(main > :last-child.bg-cream-dark) .footer,
body:has(main > :last-child.fr-theme) .footer {
  border-top: 1px solid var(--linia-zlota);
}

/* --- Medalion: znak na granicy. Świadomie RZADKO — tylko dwa miejsca:
   (1) wejście w końcowe CTA („Umów wizytę") — moment decyzji, jedno na stronę,
   (2) na stronie głównej dodatkowo wejście w sekcję oferty — pierwsza duża
       zmiana tonu po hero, kompozycyjnie najmocniejszy punkt strony.
   Wszystkie pozostałe przejścia mają samą linię. --- */
.section:has(+ .cta-band),
.marquee + .section.bg-cream {
  position: relative;
  z-index: 2;          /* medalion ma leżeć NAD kolejną sekcją */
}

.section:has(+ .cta-band)::after,
.marquee + .section.bg-cream::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--medalion);
  height: var(--medalion);
  transform: translate(-50%, 50%);
  /* Wariant bez napisu — przy 34–46 px napis w kole byłby nieczytelny.
     Sam sygnet niesie już złoty pierścień i monogram, więc nie dokładamy
     ani obramowania, ani cienia. */
  background: url('/favicon.svg') center / contain no-repeat;
  pointer-events: none;
}

/* Sekcja CTA ma własny ::before z poświatą i overflow:hidden — medalion
   rysuje sekcja POPRZEDZAJĄCA, więc nic się nie przycina. */

@media (max-width: 600px) {
  /* Linia na wąskim ekranie nieco delikatniejsza — przy małej szerokości
     mocniej rzuca się w oczy. */
  .bg-cream + .bg-graphite, .bg-cream-dark + .bg-graphite,
  .bg-graphite + .bg-cream, .bg-graphite + .bg-cream-dark,
  .bg-graphite-dark + .bg-cream, .bg-graphite-dark + .bg-cream-dark,
  .marquee + .bg-cream, .marquee + .bg-cream-dark {
    border-top-color: rgba(201,169,110,0.42);
  }
}

/* ===========================================================================
   21. EKRAN STARTOWY — WARIANT IVORY (bez zdjęcia)
   Kompozycja typograficzna zamiast fotografii: ciepłe ivory, znak, wielki
   nagłówek w Bodoni, włosowa linia i dużo powietrza. Reguły nadpisują
   wcześniejsze style .hero, które zakładały jasny tekst na ciemnym zdjęciu.
   =========================================================================== */

.hero--foto { background: var(--cream); text-align: center; }
.hero--foto .hero__bg { background: var(--cream); }

/* Ramka passe-partout — dwie włosowe linie, odsunięte od krawędzi ekranu.
   To jedyny element dekoracyjny; ma budować kadr, nie ozdabiać. */
.hero--foto .hero__frame {
  position: absolute;
  inset: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid rgba(201,169,110,0.22);
  pointer-events: none;
  z-index: 1;
}
.hero--foto .hero__frame::after {
  content: "";
  position: absolute;
  inset: clamp(0.5rem, 1vw, 0.9rem);
  border: 1px solid rgba(201,169,110,0.10);
}

.hero--foto .hero__inner { max-width: 54rem; padding: 6rem 2rem 3rem; }

/* Znak marki nad nagłówkiem — ten sam sygnet co w medalionach przejść. */
.hero--foto .hero__mark {
  display: block;
  width: clamp(46px, 6vw, 62px);
  height: clamp(46px, 6vw, 62px);
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
  background: url('/favicon.svg') center / contain no-repeat;
}

.hero--foto .eyebrow {
  color: var(--gold-dark);
  letter-spacing: 0.52em;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.hero--foto h1 {
  color: var(--graphite);
  font-size: clamp(2.9rem, 8.4vw, 6rem);
  line-height: 1.02;
  margin-bottom: 0;
}
.hero--foto h1 em { color: var(--gold-dark); font-style: italic; }

/* Włosowa linia pod nagłówkiem — ten sam gest co separatory sekcji. */
.hero--foto .hero__rule {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: clamp(1.75rem, 4vw, 2.5rem) auto;
}

.hero--foto .hero__sub {
  color: var(--stone);
  max-width: 33rem;
  margin: 0 auto clamp(2.25rem, 5vw, 3rem);
  font-size: 0.98rem;
  line-height: 1.95;
}

.hero--foto .hero__side .line { background: rgba(201,169,110,0.3); }
.hero--foto .hero__side span { color: rgba(160,128,64,0.65); }
.hero--foto .hero__scroll { color: rgba(122,107,85,0.6); }


/* Hero jest teraz jasny, a pasek kategorii pod nim ciemny — to zmiana tonu,
   więc należy jej się linia z systemu przejść (sekcja 20). */
.hero--foto + .marquee { border-top: 1px solid var(--linia-zlota); }

@media (max-width: 700px) {
  .hero--foto .hero__inner { padding: 5rem 1.5rem 2.5rem; }
  .hero--foto .hero__frame { inset: 0.85rem; }
  .hero--foto .hero__side { display: none; }
}

/* Poprawki wariantu ivory:
   1. .hero__bg::after to ciemna nakładka spod starego zdjęcia — na jasnym tle
      przygaszała ivory do szarości. Wyłączamy ją.
   2. Pasek danych u dołu nachodził na przyciski — odsuwamy go i dokładamy
      zapas u dołu bloku treści. */
.hero--foto .hero__bg::after { content: none; }
.hero--foto .hero__inner { padding-bottom: clamp(7rem, 12vw, 9rem); }
@media (max-width: 700px) {
  .hero--foto .hero__inner { padding-bottom: 7.5rem; }
}

/* ===========================================================================
   22. HERO — UKŁAD EDYTORIALNY Z FOTOGRAFIĄ
   Treść po lewej, twarz po prawej, wychodząca poza krawędź ekranu.
   Złote linie konturowe i podpisy HARMONIA / PROPORCJE / NATURALNOŚĆ są
   wypalone w samym zdjęciu — nie rysujemy ich osobno.
   =========================================================================== */

.hero--foto { text-align: left; justify-content: flex-start; }

.hero--foto .hero__inner {
  width: min(52%, 40rem);
  max-width: none;
  margin-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding: 6rem 0 5rem;
  z-index: 3;
}
.hero--foto .hero__mark { margin-left: 0; margin-right: auto; }
.hero--foto .hero__rule { margin-left: 0; margin-right: auto; }
.hero--foto .hero__sub { margin-left: 0; margin-right: 0; max-width: 30rem; }
.hero--foto .hero__cta { justify-content: flex-start; }

/* --- Panel z fotografią --- */
.hero--foto .hero__foto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  z-index: 1;
  overflow: hidden;
}
.hero--foto .hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  /* Lewa krawędź rozpływa się w tło — bez tego byłby wklejony prostokąt.
     Druga warstwa maski zmiękcza górę i dół, żeby zdjęcie nie „obcinało się"
     o nagłówek i dolną krawędź ekranu. */
  -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,0.25) 14%, #000 40%, #000 100%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,0.25) 14%, #000 40%, #000 100%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* --- Pasek faktów. Wyłącznie liczby obecne w projekcie. --- */
.hero--foto .hero__fakty {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.hero--foto .hero__fakty li + li {
  padding-left: clamp(1.5rem, 3.5vw, 2.75rem);
  border-left: 1px solid rgba(201,169,110,0.28);
}
.hero--foto .hero__fakty b {
  display: block;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1;
  color: var(--graphite);
}
.hero--foto .hero__fakty span {
  display: block;
  margin-top: 0.45rem;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(122,107,85,0.8);
}

/* --- Wejście: zdjęcie pojawia się wolno, długo po tekście. --- */
@keyframes hero-foto-wejscie {
  from { opacity: 0; transform: scale(1.045); }
  to   { opacity: 1; transform: scale(1); }
}
.hero--foto .hero__foto img {
  animation: hero-foto-wejscie 2s cubic-bezier(0.33, 1, 0.68, 1) 0.35s both;
  will-change: transform, opacity;
}

@media (max-width: 1100px) {
  .hero--foto .hero__inner { width: min(58%, 34rem); }
  .hero--foto .hero__foto { width: 44%; }
}

/* --- Telefon: twarz schodzi pod treść, bez wciskania układu desktopowego. --- */
@media (max-width: 860px) {
  .hero--foto { display: block; min-height: 0; text-align: center; }
  .hero--foto .hero__inner {
    width: auto;
    margin-left: 0;
    padding: 5.5rem var(--gutter) 2.5rem;
    text-align: center;
  }
  .hero--foto .hero__mark { margin-inline: auto; }
  .hero--foto .hero__rule { margin-inline: auto; }
  .hero--foto .hero__sub { margin-inline: auto; }
  .hero--foto .hero__cta { justify-content: center; }
  .hero--foto .hero__fakty { justify-content: center; margin-top: 2.5rem; }

  .hero--foto .hero__foto {
    position: relative;
    width: 100%;
    height: clamp(20rem, 62vw, 27rem);
    margin-top: 1rem;
  }
  .hero--foto .hero__foto img {
    object-position: 68% 30%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .hero--foto .hero__scroll { position: static; transform: none; margin: 1.5rem auto 2.5rem; }
  .hero--foto .hero__frame { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--foto .hero__foto img { animation: none; }
}

/* Kalibracja układu (zmierzona, nie szacowana):
   „Twoje naturalne" w 96 px potrzebuje 711 px — kolumna 640 px łamała je na
   trzy linie. Poszerzamy do 46rem, dzięki czemu nagłówek zostaje w pełnej
   wielkości i mieści się w dwóch liniach. Pion skrócony, bo blok treści
   przerastał okno (1054 px przy 900 px wysokości) i pasek faktów wypadał
   poniżej krawędzi. */
@media (min-width: 861px) {
  .hero--foto .hero__inner { width: min(58%, 46rem); padding: 4.5rem 0 3rem; }
  .hero--foto .hero__mark { width: 54px; height: 54px; margin-bottom: 1.5rem; }
  .hero--foto .eyebrow { margin-bottom: 1.4rem; }
  .hero--foto .hero__rule { margin-block: 1.6rem; }
  .hero--foto .hero__sub { margin-bottom: 2rem; line-height: 1.8; }
  .hero--foto .hero__fakty { margin-top: 2.6rem; }

  /* Szerszy kadr, żeby zmieściły się podpisy HARMONIA / PROPORCJE / NATURALNOŚĆ
     wypalone przy prawej krawędzi zdjęcia. */
  .hero--foto .hero__foto { width: 50%; }
  .hero--foto .hero__foto img { object-position: 75% center; }
}

/* Podpisy przy liniach konturowych są wypalone przy prawej krawędzi zdjęcia
   (ok. 85–92% jego szerokości). Przy object-position 75% okno kadru sięgało
   tylko 88% i ucinało je w połowie — przesuwamy kadr w prawo. */
@media (min-width: 861px) {
  .hero--foto .hero__foto img { object-position: 88% center; }
}

/* Parallax przesuwa cały panel ze zdjęciem, więc daje mu zapas w pionie —
   bez tego przy przesunięciu odsłoniłaby się krawędź u góry.
   (Transform obrazu jest zajęty przez animację wejścia, dlatego ruch
   siedzi na kontenerze, nie na <img>.) */
@media (min-width: 861px) {
  .hero--foto .hero__foto { top: -34px; bottom: -34px; will-change: transform; }
}

/* Telefon — korekta kolejności i proporcji.
   W DOM zdjęcie stoi przed treścią (żeby na desktopie leżało pod spodem jako
   tło), więc przy układzie pionowym trzeba je jawnie przestawić pod nagłówek. */
@media (max-width: 860px) {
  .hero--foto { display: flex; flex-direction: column; }
  .hero--foto .hero__inner { order: 1; }
  .hero--foto .hero__foto  { order: 2; }
  .hero--foto .hero__scroll { order: 3; }
  .hero--foto .hero__bg, .hero--foto .hero__frame { order: 0; }

  /* Na telefonie zdjęcia nie ma wcale. Pod spodem treści działało jak doklejony
     kafel, a nie jak tło — hero ma tam zostać samą typografią na kremowym tle.
     Sam <img> też nie jest pobierany: <picture> podaje dla tej szerokości
     przezroczysty 1×1, więc telefon nie ściąga 200 kB w tle. */
  .hero--foto .hero__foto { display: none; }

  /* Podpisy łamały się na trzy linie — ciaśniejsze rozstrzelenie i mniejsze
     odstępy mieszczą je w dwóch. */
  .hero--foto .hero__fakty { gap: 1rem; }
  .hero--foto .hero__fakty li + li { padding-left: 1rem; }
  .hero--foto .hero__fakty b { font-size: 1.35rem; }
  .hero--foto .hero__fakty span { font-size: 9px; letter-spacing: 0.1em; }
}

/* Punkt 3 — „Przewiń" nachodził na pasek liczb na niższych ekranach
   (zmierzone: 1366×768, 1280×720, 1024×768). Wskaźnik siedzi absolutnie przy
   dolnej krawędzi, więc treść musi się skończyć wyżej. Na niskich oknach
   ściągamy rytm pionowy zamiast chować wskaźnik. */
@media (min-width: 861px) {
  .hero--foto .hero__inner { padding-bottom: 5.5rem; }
}
@media (min-width: 861px) and (max-height: 850px) {
  .hero--foto .hero__mark { width: 44px; height: 44px; margin-bottom: 1rem; }
  .hero--foto .eyebrow { margin-bottom: 0.9rem; letter-spacing: 0.42em; }
  .hero--foto h1 { font-size: clamp(2.6rem, 6.2vw, 4.4rem); }
  .hero--foto .hero__rule { margin-block: 1.1rem; }
  .hero--foto .hero__sub { margin-bottom: 1.5rem; font-size: 0.92rem; line-height: 1.7; }
  .hero--foto .hero__fakty { margin-top: 1.6rem; }
  .hero--foto .hero__fakty b { font-size: 1.35rem; }
  .hero--foto .hero__inner { padding-top: 3.5rem; padding-bottom: 5rem; }
}

/* ===========================================================================
   23. POPRAWKI Z AUDYTU RESPONSYWNOŚCI
   =========================================================================== */

/* 320 px: .hero dziedziczy align-items:center, więc blok treści dobierał
   szerokość do zawartości (341 px przy ekranie 320) i był przycinany.
   W układzie pionowym ma się rozciągać na całą szerokość. */
@media (max-width: 860px) {
  .hero--foto { align-items: stretch; }
  .hero--foto .hero__inner { width: 100%; min-width: 0; }
}

/* Podpisy w pasku liczb miały 9 px — poniżej progu czytelności przyjętego
   dla reszty serwisu (min. 10 px na telefonie). */
@media (max-width: 860px) {
  .hero--foto .hero__fakty span { font-size: 10px; letter-spacing: 0.08em; }
}

/* Ikony społecznościowe w nagłówku miały pole dotyku 15×15 px.
   Powiększamy obszar klikalny, nie samą ikonę. */
.nav__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
}

/* ======================= 24. PRZEŁĄCZNIK JĘZYKA =========================
   Cienka złota ramka, wersaliki, bez poświaty i cieni — ten sam język
   wizualny co .nav__cta, tylko węższy, bo to element drugoplanowy.
   Siedzi w .nav__toggle, więc jest widoczny na każdej szerokości
   (.nav__actions znika poniżej 1080px, .nav__toggle nie). */
.nav__lang {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 34px; padding: 0.4rem 0.6rem;
  border: 1px solid rgba(201,169,110,0.35);
  color: rgba(201,169,110,0.8);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  white-space: nowrap;
}
.nav__lang svg { width: 13px; height: 13px; flex-shrink: 0; }
.nav__lang:hover { border-color: var(--gold); background: var(--gold); color: var(--graphite); }
.nav--solid .nav__lang, .nav.is-scrolled .nav__lang {
  border-color: rgba(138,109,47,0.4); color: var(--gold-dark);
}
.nav--solid .nav__lang:hover, .nav.is-scrolled .nav__lang:hover {
  background: var(--gold-dark); border-color: var(--gold-dark); color: var(--cream);
}

/* W rozwiniętym menu mobilnym — pełna szerokość, obok przycisku rezerwacji. */
.nav__lang--mobile {
  justify-content: center; width: 100%;
  padding: 0.9rem 1rem; letter-spacing: 0.16em;
}

/* Intro na stronie głównej ukrywa pasek nawigacji — przełącznik chowa się
   razem z resztą .nav__toggle, więc nie trzeba go wymieniać osobno. */

/* ==================== 25. HERO — WERSJA ANGIELSKA ======================
   Angielskie zdjęcie hero (img/hero-twarz-en.jpg) ma te same wymiary co
   polskie, ale wypalone podpisy są dłuższe: „NATURAL BEAUTY” zamiast
   „NATURALNOŚĆ”. Przy kadrze 88% okno sięgało x=1503 z 1600, czyli ucinało
   ostatnią literę.

   93% to wartość zmierzona, nie dobrana na oko: potrzebny kadr rośnie, im węższy
   ekran (od 88,4% przy 1680 px do 93,1% przy 861 px), więc jedna wartość musi
   pokryć najciaśniejszy przypadek. Sprawdzone przy 900, 1440 i 1920 px — napisy
   mieszczą się w całości, kompozycja zostaje.
   Reguła jest przypięta do <html lang="en">, więc polska wersja jest nietknięta. */
@media (min-width: 861px) {
  html[lang="en"] .hero--foto .hero__foto img { object-position: 93% center; }
}

/* <picture> owija <img> w hero (patrz src/index.njk) tylko po to, żeby telefon
   nie pobierał zdjęcia. Domyślnie jest elementem inline i dziedziczyłby rozmiar
   treści, więc obraz przestałby wypełniać kadr — dlatego przezroczysto dla układu. */
.hero--foto .hero__foto picture { display: block; width: 100%; height: 100%; }

/* ============ 26. WĄSKIE EKRANY — PRZYCISKI I SIATKI ==================
   Zmierzone na 320 px: /vouchery wystawało o 49 px, /kontakt o 54 px.
   Przyczyna nie była w tych stronach, tylko w `.btn`: `white-space: nowrap`
   plus 2,5 rem paddingu po bokach daje ~200 px na sam tekst wersalikami
   z rozstrzeleniem 0.25em. Przycisk nie mieścił się w kontenerze, a że jest
   dzieckiem kratki (`min-width: auto`), rozpychał całą kolumnę.

   Nie zmieniamy nic powyżej 420 px — tam przyciski mieszczą się w jednej
   linii i mają zostać jednolinijkowe. */
@media (max-width: 420px) {
  .btn {
    padding: 0.95rem 1.2rem;
    letter-spacing: 0.16em;
    white-space: normal;   /* dwie linie to mniejszy problem niż wyjście poza ekran */
    line-height: 1.5;
  }
  /* Numer telefonu i godziny nadal trzymamy w całości — `.nowrap` działa dalej. */
}

/* Dzieci kratek domyślnie mają `min-width: auto`, więc nie potrafią zwęzić się
   poniżej min-content najszerszego elementu w środku. To zabezpieczenie nie ma
   żadnego skutku, dopóki w kontenerze jest miejsce, więc trzymamy je bez
   media query — wcześniej siedziało w bloku 420 px i dlatego nie łapało
   iPhone’a Pro Max (dokładnie 430 px). */
.contact-grid > *, .vouch-grid > * { min-width: 0; }

/* Karta vouchera. 2×40 px paddingu plus napis ESTETOLOG (2 rem, 0.15em →
   229 px min-content) dają karcie ~420 px szerokości minimalnej. Przy 430 px
   ekranu kontener oferuje 382 px, więc karta wychodziła 14 px za krawędź
   i była ucinana przez `overflow-x: hidden` z body. Powyżej ~470 px miejsca
   wystarcza i karta zostaje w pełnym rozmiarze. */
@media (max-width: 470px) {
  .vouch-card { padding: 1.5rem 1.35rem; }
  .vouch-card__brand { font-size: 1.55rem; letter-spacing: 0.08em; }
  .vouch-card__sub { letter-spacing: 0.16em; }
  .vouch-card__value b { font-size: 2.4rem; }
  .vouch-card__top { gap: 0.75rem; }
}


/* Nagłówki podstron na wąskich ekranach. `.page-hero` ma `overflow: hidden`,
   więc za długie słowo nie wypycha układu — po prostu znika za krawędzią.
   Złapane na /en/gallery: „transformations” (15 znaków) przy 2.8 rem miało
   ~370 px, a w kontenerze przy 320 px jest 272 px — ucinało 45 px.
   Polskie „metamorfozy” mieściło się, więc problem był niewidoczny po polsku.
   Skalujemy nagłówek i dodajemy łamanie jako zabezpieczenie na przyszłe,
   jeszcze dłuższe słowa. */
@media (max-width: 420px) {
  .page-hero h1 { font-size: clamp(1.9rem, 8vw, 3rem); }
}
.page-hero h1 { overflow-wrap: break-word; }

/* ============ 27. OPINIE NA TELEFONIE — KOMPLET, NIE CO TRZECIA ============
   Poniżej 700 px kolumny 2 i 3 są ukryte, więc z trzech przewijanych kolumn
   zostawała JEDNA — a że opinie rozdziela między nie filtr kolumny(3), telefon
   pokazywał tylko co trzecią. Zmierzone: 10 z 28 opinii dostępnych na telefonie,
   pozostałe 18 nieosiągalne w żaden sposób.
   Na wąskich ekranach pokazujemy więc statyczną siatkę z kompletem opinii —
   bez animacji, która na telefonie i tak niczego nie wnosi, a utrudnia czytanie
   długich wpisów. */
@media (max-width: 699px) {
  .testi-cols { display: none; }
  .testi-cols-static { display: grid; }
}

/* ======= 28. VOUCHER POD CENĄ (punkt 4 klientki) ==========================
   „Vouchery" zeszły z menu głównego, więc informacja musi stać tam, gdzie
   decyzja zapada — zaraz pod ceną zabiegu. Celowo cicha: to przypis, nie
   drugie wezwanie do działania, żeby nie konkurowała z przyciskiem rezerwacji. */
.price-box__voucher {
  margin-top: 1.25rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(201,169,110,0.22);
}
.price-box__voucher p {
  margin: 0; font-size: 13px; line-height: 1.6;
  color: var(--stone); font-weight: 400;
}
.price-box__voucher b { font-weight: 600; color: var(--graphite); }
.price-box__voucher a {
  color: var(--gold-dark); text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap;
}
.price-box__voucher a:hover { color: var(--gold); }
/* Na ciemnym wariancie karty (układ zabiegu) tekst musi się przebić. */
.fr-card .price-box__voucher p { color: var(--fr-ink-soft, var(--stone)); }


/* ======= 29. KOTWICE KATEGORII NA /OFERTA (punkt 11 klientki) =============
   Te same pigułki co zakładki w cenniku, ale jako zwykłe odnośniki do kotwic —
   cała lista zostaje widoczna, przyciski tylko przewijają do sekcji.
   Dlatego .tab-anchor, a nie .tab: tamte przełączają panele, te nie chowają
   niczego. Wygląd wspólny, zachowanie inne. */
.tab-anchor {
  display: inline-flex; align-items: center;
  padding: 0.7rem 1.5rem; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid rgba(122,107,85,0.25); color: var(--stone);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.tab-anchor:hover { border-color: var(--gold); color: var(--gold-dark); background: rgba(201,169,110,0.06); }
.fr-theme .tab-anchor { border-color: var(--fr-border); color: var(--fr-ink-soft); }
.fr-theme .tab-anchor:hover { border-color: var(--fr-gold-muted); color: var(--fr-ink); }
/* Kotwica musi zatrzymać się POD przyklejonym paskiem nawigacji. */
.hub-top { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }


/* ======= 30. METAMORFOZY NA GALERII (punkt 9 klientki) ====================
   Z tej sekcji zdjęliśmy zdjęcia przed/po — został nagłówek i jeden przycisk,
   ale zapas pionowy pozostał dobrany pod galerię. Na telefonie dawało to
   ~180 px pustki pod przyciskiem (72 px tej sekcji + padding następnej),
   a że obie mają to samo kremowe tło, wyglądało jak koniec strony.
   Ścieśniamy tylko na wąskich ekranach — na desktopie oddech jest w porządku. */
/* POPRAWKA: wcześniej ścieśniałem tę sekcję tylko do 860 px, z adnotacją
   „na desktopie oddech jest w porządku". To była zła ocena — zmierzone na
   1440 px: od przycisku do nagłówka „Nasza przestrzeń" było 288 px pustki
   (80 px pod nagłówkiem + 128 px dołu sekcji + 128 px góry następnej).
   Sekcja ma dziś tylko nagłówek i jeden przycisk, więc odstępy wyliczone pod
   nieistniejącą już siatkę zdjęć zostawiały dziurę przez pół ekranu — tym
   bardziej, że obie sekcje mają to samo kremowe tło i nic ich nie rozdziela.
   Teraz skala jest płynna: telefon zostaje jak był, desktop schodzi do ~112 px. */
.sec-metamorfozy .sec-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.sec-metamorfozy .mt-3 { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
.sec-metamorfozy { padding-bottom: clamp(1.75rem, 4vw, 3.5rem); }
.sec-metamorfozy + .section { padding-top: clamp(2.25rem, 4vw, 3.5rem); }

/* ============ 28. CENNIK NA BARDZO WĄSKICH EKRANACH ===================
   Zmierzone na 320 px: wiersz „Inne stymulatory / wycena indyw." wystawał
   o 9 px po polsku i o 22 px po angielsku („individual quote"). Przyczyna:
   `.price-item__right` ma `flex-shrink: 0`, a `.price-item__price` ma
   `white-space: nowrap`, więc prawa kolumna nie oddaje ani piksela, a przy
   1.3 rem w kroju nagłówkowym „wycena indyw." zajmuje ~170 px z 272 px
   dostępnych w kontenerze. Nazwa zabiegu zabiera resztę i wiersz nie mieści
   się w ekranie — tekst ceny ginie pod `overflow-x: hidden` z body.

   Nie ruszamy nic powyżej 380 px: tam wiersze mieszczą się bez zmian,
   a cena ma zostać w pełnym rozmiarze. */
@media (max-width: 380px) {
  .price-item__head { gap: 0.75rem; padding-left: 0.25rem; padding-right: 0.25rem; }
  .price-item__price { font-size: 1.05rem; }
  .price-item__right { gap: 0.5rem; }
}

/* ============ 29. CENNIK — ODNOŚNIK DO STRONY PREPARATU ==============
   Pozycje stymulatorów mają własne podstrony. Nagłówek wiersza jest
   przyciskiem (rozwija opis), więc nie da się w niego zagnieździć odnośnika
   — link prowadzący na podstronę siedzi w rozwiniętym panelu, obok
   przycisku rezerwacji. Wiersze bez opisu renderują się od razu jako link. */
.price-item__more {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-right: 1.25rem;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-dark); border-bottom: 1px solid rgba(201,169,110,0.4);
  padding-bottom: 2px; transition: color 0.3s ease, border-color 0.3s ease;
}
.price-item__more:hover { color: var(--graphite); border-color: var(--graphite); }
.price-item__go-arrow { width: 13px; height: 13px; flex-shrink: 0; }
.price-item--link .price-item__head { cursor: pointer; }
.price-item--link .price-item__go-arrow { color: var(--gold); transition: transform 0.3s ease; }
.price-item--link .price-item__head:hover .price-item__go-arrow { transform: translateX(3px); }
@media (max-width: 520px) {
  .price-item__more { margin-right: 0; margin-bottom: 0.75rem; }
}

/* ============ 30. SPIS PREPARATÓW NA STRONIE STYMULATORÓW ============
   Lista powstaje z danych (src/_data/stymulatory.json) przez własny blok
   markdowna, więc PL i EN nie mogą się rozjechać. Wygląd przejmuje po
   pozycjach huba (.hub-item), dochodzi tylko cena po prawej. */
.stym-spis { margin: 2rem 0 2.5rem; }
.stym-spis .hub-grp + .hub-grp { margin-top: 2rem; }
.stym-spis .hub-item__link { display: flex; align-items: baseline; gap: 0.85rem; }
.stym-spis .hub-item__name { flex: 1 1 auto; min-width: 0; }
.stym-spis__cena {
  flex-shrink: 0; font-family: var(--font-head); font-size: 1rem;
  color: var(--stone); white-space: nowrap;
}
.stym-spis .hub-item__link:hover .stym-spis__cena { color: var(--gold-dark); }
@media (max-width: 420px) {
  .stym-spis__cena { font-size: 0.9rem; }
}

/* ============ 31. CENNIK ZWARTY =====================================
   Zmierzone przed zmianą (1280 px, zakładka Medycyna estetyczna):
   strona miała 8384 px, czyli 9,3 ekranu, przy 73 wierszach po 62–67 px.
   Wysokość wiersza brała się głównie z ceny: 1.3 rem w kroju nagłówkowym
   plus 2 × 16 px paddingu. Zbijamy padding i stopień ceny — nazwa zostaje
   czytelna, a wiersz schodzi w okolice 36 px, zgodnie z wzorcem od klientki.
   Rozwijane opisy działają jak dotąd, zmienia się tylko gęstość. */
.price-item__head { padding: 0.5rem 0.5rem; gap: 1rem; }
.price-item__name { font-size: 13px; line-height: 1.45; }
.price-item__price { font-size: 1rem; line-height: 1.3; }
.price-item__right { gap: 0.6rem; }
.price-item__chev { width: 11px; height: 11px; }

/* Nagłówki kategorii: mniejsze i z wyraźnym oddechem NAD sobą, żeby przy
   gęstych wierszach nadal było widać, gdzie zaczyna się nowa grupa. */
.price-cat > h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }

/* Każda kategoria była osobną białą kartą (reguła motywu wyżej: tło, ramka,
   64 px paddingu i 20 px marginesu — razem ~84 px oprawy na kategorię).
   Przy 25 kategoriach, z których 12 ma tylko jeden lub dwa wiersze, sama
   oprawa zajmowała ~2100 px. Wzorzec od klientki pokazuje listę płaską:
   nagłówek, wiersze, światło — bez kart. Zdejmujemy kartę WYŁĄCZNIE
   z cennika; kafelki huba na /oferta korzystają z tej samej reguły motywu
   i mają zostać kartami, dlatego nie ruszamy .hub-cat ani .hub-top. */
.fr-theme .price-cat {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}
.price-cat { margin-bottom: 0; }
.price-cat + .price-cat { margin-top: 2rem; }

/* Rozwinięty opis też był rozstrzelony pod poprzednią gęstość. */
.price-item__inner { padding: 0.15rem 0.5rem 1rem; }
.price-item__dur { margin-bottom: 0.5rem; }

@media (max-width: 520px) {
  .price-item__head { padding: 0.55rem 0.25rem; }
  .price-item__price { font-size: 0.95rem; }
}