/*
  zabiegi.css — wspólny arkusz stron zabiegowych, kierunek „D-Beauty” (ProTrener, wersja testowa).
  Ładowany PO d.css (<link rel="stylesheet" href="/_wspolne/d.css"> + <link ... zabiegi.css>); strona ma <body class="d-page">
  i tę samą ramę co styl D (nawigacja-d, stopka-d, d-sticky, d-closing). Prefiks klas: z-. Zero zewnętrznych zasobów.
  Ikony: maski SVG w CSS (bez sprite'a) — <span class="z-i z-i-check" aria-hidden="true"></span>.

  Paleta (jasna, „beauty”): akcent śliwkowy z ProBeauty #6A4D8A (plakietki, nagłówki tabel, ceny promocyjne, ikony),
  jasny fiolet #F4F0F8 (sekcje i tła ikon), ciepła biel #FAF6F2 (sekcje), linie #E3DAEC. Czerwień #E30613 zostaje
  WYŁĄCZNIE na przyciskach rezerwacji (d-btn-red). Ciemny jest tylko pas zamykający d-closing z d.css.

  Spis komponentów:
    układ        .z-sec (+ .z-white / .z-tint / .z-warm = tło sekcji; + .z-tight = niska sekcja na pas CTA; razem z d-section i d-wrap)  .z-badge  .z-lead
    pasek kotwic .z-anchors > ul > li > a   (lepki, pod nawigacją; na telefonie przewijany w poziomie)
    hero         .z-hero > .d-wrap.z-hero-in > .z-hero-copy (h1 + span, .z-chips, .z-hero-desc, .d-hero-cta, .z-hero-note) + .z-hero-media (img);
                 wariant bez zdjęcia: .z-hero.z-hero-solo
    przyciski    d-btn d-btn-red (rezerwacja) · .z-btn-line (obrys śliwkowy) · d-btn-line-dark
    ikony        .z-i + .z-i-<nazwa>  (check x target sparkle heart shield bolt clock trend pin phone star drop snowflake sun
                 wave lift user users gift info alert calendar arrow handshake home tag flask medal)
                 .z-ico (kółko 56 px na ikonę) · .z-ico-sm (44 px)
    karty cech   .z-cards (4 kol.; .z-cards-3 = 3 kol.) > .z-card > .z-ico + h3 + p                  — korzyści, technologia, cechy
    kroki        .z-steps > .z-step (.z-step-num "01", h3, p)                                           — „jak działa” (3 karty z numerem)
    oś zabiegu   .z-timeline > .z-tl-item (.z-tl-dot, div > h3 + p)                                     — przebieg w krokach
    lista cech   .z-feat > .z-feat-item (.z-ico-sm + div > h3 + p)                                      — efekty, atuty (2 kolumny)
    mini-kafle   .z-minis > .z-mini (.z-i + h3 + p)                                                     — „dlaczego my” (4 kol.)
    tabela cen   .z-table-wrap.z-price-wrap > table.z-table.z-price-table (th, td[data-label], .z-old, .z-new, .z-pack-total, .z-pack-one, .z-th-sub)
                 — poniżej 600 px karty zamiast tabeli (etykiety z data-label); pierwsza komórka wiersza = nazwa (np. obszar)
    porównanie   table.z-table.z-compare  (+ .z-yes / .z-no = ikony tak / nie)
    pakiety      .z-packs > .z-pack (h3, .z-pack-price, .z-pack-old, .z-pack-per, ul.z-list; .z-pack-hl = wyróżniony)
    notatki      .z-info (kolumna 820 px) > .z-note (.z-note-ico + .z-note-body)  ·  .z-key (kluczowa informacja)
                 ·  .z-fine (przypis/zastrzeżenie)  ·  .z-accent (śliwkowy wyróżnik w tekście)
    ostrzeżenie  .z-warn (przeciwwskazania; ikona + lista .z-list.z-list-2 + .z-warn-note)
    listy        .z-list (kropki śliwkowe)  .z-list-2 (2 kolumny)
    statystyki   .z-stats (+ .z-stats-2 / -3) > .z-stat > .z-stat-num + .z-stat-label
    galeria      .z-ba (siatka przed/po 3 kol.) > figure.z-ba-item > img (+ figcaption.z-ba-cap; img.z-top-cut = kadr od dołu, gdy u góry jest napis)  ·  .z-strip (pasek poziomy grafik)  ·  .z-gal-note
    FAQ          .z-faq > details > summary + .z-faq-a     (natywne <details>, bez JS)
    opinie       .z-quotes > .z-quote (.z-stars, .z-quote-text, .z-quote-name)
    kafle-linki  .z-tiles > a.z-tile (.z-ico, h3, p, .z-tile-go)                                        — lista zabiegów z linkami
    lokalizacja  .z-loc (ikona, h3, adres, przyciski)
    pas CTA      .z-band (jasny pas z nagłówkiem i przyciskami, w środku strony)
    zamknięcie   .d-closing.d-dark (z d.css) + .z-closing-tel (linia „lub zadzwoń: numer”)
*/

/* ---------- zmienne ---------- */
:root{
  --z-plum:#6A4D8A; --z-plum-dark:#54396F; --z-plum-tint:#F4F0F8; --z-plum-line:#E3DAEC;
  --z-warm:#FAF6F2; --z-muted:#5E636A;
}

/* ---------- ikony (maski SVG) ---------- */
.z-i{display:inline-block;width:24px;height:24px;flex:none;background:currentColor;
  -webkit-mask:var(--z-ic) center/contain no-repeat;mask:var(--z-ic) center/contain no-repeat}
.z-ico{width:56px;height:56px;border-radius:50%;background:var(--z-plum-tint);color:var(--z-plum);display:grid;place-items:center;flex:none}
.z-ico .z-i{width:26px;height:26px}
.z-ico-sm{width:44px;height:44px}
.z-ico-sm .z-i{width:22px;height:22px}

/* ikony: maska SVG w kolorze currentColor: <span class="z-i z-i-check" aria-hidden="true"></span> */
.z-i-check{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.z-i-x{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.z-i-target{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E")}
.z-i-sparkle{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.6 5.6 1.9-5.6 1.9L12 18l-1.9-5.6L4.5 10.5l5.6-1.9z'/%3E%3Cpath d='M19 16v4M17 18h4'/%3E%3C/svg%3E")}
.z-i-heart{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E")}
.z-i-shield{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.z-i-bolt{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E")}
.z-i-clock{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")}
.z-i-trend{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 7l-8.5 8.5-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E")}
.z-i-pin{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.z-i-phone{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}
.z-i-star{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E")}
.z-i-drop{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E")}
.z-i-snowflake{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M4.9 7l14.2 10M19.1 7 4.9 17'/%3E%3Cpath d='M9.5 3.5 12 6l2.5-2.5M9.5 20.5 12 18l2.5 2.5'/%3E%3C/svg%3E")}
.z-i-sun{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
.z-i-wave{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12c1.5-4 3-4 4.5 0s3 4 4.5 0 3-4 4.5 0 3 4 4.5 0'/%3E%3Cpath d='M2 7c1.5-3 3-3 4.5 0s3 3 4.5 0 3-3 4.5 0 3 3 4.5 0M2 17c1.5-3 3-3 4.5 0s3 3 4.5 0 3-3 4.5 0 3 3 4.5 0'/%3E%3C/svg%3E")}
.z-i-lift{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E")}
.z-i-user{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3C/svg%3E")}
.z-i-users{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.z-i-gift{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E")}
.z-i-info{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E")}
.z-i-alert{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.z-i-calendar{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")}
.z-i-arrow{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.z-i-handshake{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17l2 2a1.4 1.4 0 0 0 2-2M14 14l2.5 2.5a1.4 1.4 0 0 0 2-2L15 11'/%3E%3Cpath d='M3 8l4-3 4 1 3-1 4 3 3 5-3 2'/%3E%3Cpath d='M3 8l-1 6 7 6'/%3E%3C/svg%3E")}
.z-i-home{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 3l9 8M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E")}
.z-i-tag{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E")}
.z-i-flask{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6M10 2v6L4.5 18.5A2 2 0 0 0 6.3 21.5h11.4a2 2 0 0 0 1.8-3L14 8V2'/%3E%3Cpath d='M7.5 14h9'/%3E%3C/svg%3E")}
.z-i-medal{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14 7 22l5-3 5 3-1.5-8'/%3E%3C/svg%3E")}

/* ---------- układ ---------- */
.d-section.z-sec{padding-block:96px;--z-bg:#fff;background:var(--z-bg)}
.z-sec.z-tint{--z-bg:var(--z-plum-tint)}
.z-sec.z-warm{--z-bg:var(--z-warm)}
.d-section.z-sec.z-tight{padding-block:56px}
.z-sec[id]{scroll-margin-top:136px}
.z-sec .d-sec-head h2{font-weight:700}
.z-sec .d-sec-head h2::after{background:var(--z-plum);width:48px;height:3px}
.z-sec .d-sec-head h2 span,.z-hero h1 span{color:var(--z-plum)}
.z-badge{display:inline-block;margin-bottom:16px;padding:4px 14px;border-radius:999px;background:var(--z-plum);color:#fff;font-weight:700;font-size:14px;letter-spacing:.04em;line-height:1.5}
.z-sec .d-sec-head.d-center .z-badge{display:inline-block}
.z-lead{max-width:62ch;margin-inline:auto;color:var(--ink-2)}
.z-accent{color:var(--z-plum);font-weight:700}
.z-fine{font-size:15px;line-height:1.55;color:var(--z-muted)}

/* ---------- przyciski ---------- */
.d-page .z-btn-line{background:#fff;color:var(--z-plum);border-color:var(--z-plum)}
.d-page .z-btn-line:hover{background:var(--z-plum);color:#fff}

/* ---------- pasek kotwic ---------- */
.z-anchors{position:sticky;top:72px;z-index:15;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.z-anchors ul{display:flex;gap:6px;width:max-content;max-width:100%;margin-inline:auto;overflow-x:auto;scrollbar-width:none;padding:6px 0}
.z-anchors ul::-webkit-scrollbar{display:none}
.d-page .z-anchors a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:.02em;text-decoration:none;color:var(--ink-2);white-space:nowrap;transition:background .2s,color .2s}
.d-page .z-anchors a:hover{background:var(--z-plum-tint);color:var(--z-plum)}
.d-page .z-anchors a:focus-visible{outline-offset:-3px}

/* ---------- hero ---------- */
.z-hero{background:var(--z-warm);overflow:hidden}
.z-hero-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:72px;align-items:center;padding-block:72px 88px}
.d-page .z-hero h1{font-size:clamp(36px,4.4vw,60px);font-weight:700;text-wrap:balance}
.z-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.z-chips li{background:#fff;color:var(--z-plum);border:1px solid var(--z-plum-line);border-radius:999px;padding:6px 16px;font-weight:700;font-size:16px;line-height:1.35}
.z-hero-desc{margin-top:22px;max-width:52ch;color:var(--ink-2)}
.z-hero .d-hero-cta{margin-top:30px}
.z-hero-note{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:16px;font-weight:600;color:var(--z-plum)}
.z-hero-note .z-i{width:20px;height:20px}
.z-hero-media{position:relative;width:100%;max-width:470px;justify-self:end}
.z-hero-media::before{content:"";position:absolute;inset:22px -22px -22px 22px;border-radius:32px;background:var(--z-plum-tint);border:1px solid var(--z-plum-line)}
.z-hero-media picture,.z-hero-media img{display:block;position:relative}
.z-hero-media img{width:100%;height:auto;aspect-ratio:8/9;object-fit:cover;object-position:50% 20%;border-radius:28px;box-shadow:0 14px 40px rgba(0,0,0,.14)}
.z-hero-solo .z-hero-in{grid-template-columns:minmax(0,760px);justify-content:center;text-align:center}
.z-hero-solo .z-hero-desc{margin-inline:auto}
.z-hero-solo .z-chips,.z-hero-solo .d-hero-cta,.z-hero-solo .z-hero-note{justify-content:center}

/* ---------- karty cech ---------- */
.z-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.z-cards-3{grid-template-columns:repeat(3,1fr)}
.z-card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--z-plum-line);padding:32px 28px;transition:transform .2s,box-shadow .2s}
.d-page .z-card h3{font-size:20px;font-weight:700;margin-top:20px}
.z-card p{margin-top:10px;color:var(--ink-2);font-size:17px}
@media (hover:hover){.z-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1)}}

/* ---------- kroki (karty z numerem) ---------- */
.z-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.z-step{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--z-plum-line);padding:32px 28px}
.z-step-num{font-size:48px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--z-plum)}
.z-step-num::after{content:"";display:block;width:36px;height:3px;border-radius:2px;background:var(--z-plum-line);margin-top:14px}
.d-page .z-step h3{font-size:21px;font-weight:700;margin-top:18px}
.z-step p{margin-top:10px;color:var(--ink-2);font-size:17px}

/* ---------- oś zabiegu ---------- */
.z-timeline{max-width:820px;margin-inline:auto;list-style:none}
.z-tl-item{position:relative;padding:0 0 40px 84px}
.z-tl-item:last-child{padding-bottom:0}
.z-tl-item::before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:var(--z-plum-line)}
.z-tl-item:last-child::before{display:none}
.z-tl-dot{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;background:var(--z-plum);color:#fff;font-weight:800;font-size:22px;display:grid;place-items:center;box-shadow:0 0 0 8px var(--z-bg)}
.d-page .z-tl-item h3{font-size:22px;font-weight:700;padding-top:13px}
.z-tl-item p{margin-top:8px;color:var(--ink-2)}

/* ---------- lista cech (2 kolumny) i mini-kafle ---------- */
.z-feat{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.z-feat-item{display:flex;gap:18px;align-items:flex-start;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--z-plum-line);padding:26px 26px}
.d-page .z-feat-item h3{font-size:19px;font-weight:700}
.z-feat-item p{margin-top:6px;color:var(--ink-2);font-size:17px}
.z-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 32px}
.z-mini{padding-top:22px;border-top:2px solid var(--z-plum-line)}
.z-mini .z-i{width:30px;height:30px;color:var(--z-plum)}
.d-page .z-mini h3{font-size:19px;font-weight:700;margin-top:14px}
.z-mini p{margin-top:8px;color:var(--ink-2);font-size:17px}

/* ---------- tabele (cennik, porównanie) ---------- */
.z-table-wrap{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--z-plum-line);overflow:hidden}
.z-table{width:100%;border-collapse:collapse}
.z-table th{background:var(--z-plum-tint);color:var(--z-plum);font-weight:700;font-size:16px;line-height:1.35;padding:18px 22px;text-align:center;vertical-align:bottom}
.z-th-sub{display:block;margin-top:2px;font-weight:500;font-size:14px;color:var(--z-muted)}
.z-table td{padding:16px 22px;border-top:1px solid var(--line);text-align:center;font-size:18px}
.z-table th:first-child,.z-table td:first-child{text-align:left;font-weight:700}
.z-table tbody tr:nth-child(even) td{background:#FCFAFD}
.z-old{margin-right:12px;color:#666B72;font-size:16px;text-decoration:line-through;text-decoration-thickness:1.5px;white-space:nowrap}
.z-new{color:var(--z-plum);font-weight:800;font-size:22px;letter-spacing:-.01em;white-space:nowrap}
.z-pack-total{font-weight:700;white-space:nowrap}
.z-pack-one{color:var(--z-plum);font-weight:700;white-space:nowrap}
.z-compare{max-width:820px;margin-inline:auto}
.z-compare th:not(:first-child),.z-compare td:not(:first-child){text-align:center}
.z-compare td:nth-child(2){background:#FCFAFD;color:var(--z-plum);font-weight:700}
.z-compare td:nth-child(3){color:var(--z-muted)}
.z-yes,.z-no{display:inline-block;width:26px;height:26px;border-radius:50%;vertical-align:middle;position:relative}
.z-yes{background:var(--z-plum);color:#fff}
.z-no{background:#EDEDF0;color:#666B72}
.z-yes::before,.z-no::before{content:"";position:absolute;inset:5px;background:currentColor;-webkit-mask:var(--z-ic) center/contain no-repeat;mask:var(--z-ic) center/contain no-repeat}
.z-yes::before{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.z-no::before{--z-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}

/* ---------- pakiety ---------- */
.z-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.z-pack{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--z-plum-line);border-top:4px solid var(--z-plum);padding:30px 28px}
.z-pack-hl{border-color:var(--z-plum);box-shadow:0 8px 28px rgba(0,0,0,.14)}
.d-page .z-pack h3{font-size:21px;font-weight:700}
.z-pack-price{margin-top:14px;font-size:44px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--z-plum)}
.z-pack-old{margin-top:8px;color:#666B72;font-size:17px;text-decoration:line-through}
.z-pack-per{margin-top:8px;color:var(--ink-2);font-size:17px}
.z-pack .z-list{margin-top:18px;flex:1}
.z-pack .d-btn{margin-top:24px}

/* ---------- notatki, kluczowa informacja ---------- */
.z-info{max-width:820px;margin:40px auto 0;display:flex;flex-direction:column;gap:20px}
.z-note{display:flex;gap:20px;align-items:flex-start;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--z-plum-line);padding:28px 30px}
.d-page .z-note h3{font-size:21px;font-weight:700;color:var(--z-plum)}
.z-note-body{min-width:0}
.z-note-body p{margin-top:10px;color:var(--ink-2);font-size:17px}
.z-note-body p.z-strong{color:var(--ink);font-weight:700}
.z-note-body .z-list{margin-top:12px}
.z-key{display:flex;gap:14px;align-items:flex-start;margin-top:18px;background:var(--z-plum-tint);border-radius:12px;padding:16px 18px}
.z-key .z-i{color:var(--z-plum);margin-top:2px}
.z-note-body .z-key p{margin:0;font-size:16px;color:var(--ink)}
.z-key-line{font-weight:800;font-size:19px;color:var(--ink)}
.z-key p+p{margin-top:4px}
.z-info>.z-fine{text-align:center}

/* ---------- listy ---------- */
.z-list li{position:relative;padding:4px 0 4px 24px;color:var(--ink-2);font-size:17px}
.z-list li::before{content:"";position:absolute;left:3px;top:calc(.62em + 4px);width:8px;height:8px;border-radius:50%;background:var(--z-plum)}
.z-list-2{columns:2;column-gap:48px}
.z-list-2 li{break-inside:avoid}

/* ---------- ostrzeżenie (przeciwwskazania) ---------- */
.z-warn{max-width:820px;margin-inline:auto;display:flex;gap:22px;align-items:flex-start;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--z-plum-line);padding:32px 34px}
.d-page .z-warn h2{font-size:26px;font-weight:700;color:var(--z-plum)}
.z-warn p{margin-top:10px;color:var(--ink-2)}
.z-warn .z-list{margin-top:14px}
.z-warn p.z-warn-note{margin-top:18px;font-weight:700;color:var(--z-plum)}

/* ---------- statystyki ---------- */
.z-stats{--z-n:4;display:grid;grid-template-columns:repeat(var(--z-n),1fr);background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--z-plum-line);overflow:hidden}
.z-stats-2{--z-n:2}.z-stats-3{--z-n:3}
.z-stat{padding:38px 20px;text-align:center;border-left:1px solid var(--line)}
.z-stat:first-child{border-left:0}
.z-stat-num{font-size:clamp(38px,4.2vw,56px);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--z-plum)}
.z-stat-label{margin-top:12px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}

/* ---------- galeria przed/po i pasek grafik ---------- */
.z-ba{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.z-ba-item{margin:0;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--shadow);border:1px solid var(--z-plum-line)}
.z-ba-item img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.z-ba-item img.z-top-cut{object-position:50% 100%}
.z-ba-cap{padding:12px 16px;font-size:15px;color:var(--ink-2)}
.z-strip{display:flex;gap:16px;margin-top:20px;padding-bottom:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-color:var(--z-plum-line) transparent}
.z-strip:focus-visible{outline-offset:2px}
.z-strip img{flex:none;height:340px;width:auto;border-radius:12px;border:1px solid var(--z-plum-line);scroll-snap-align:start}
.z-gal-note{margin-top:24px;text-align:center;font-size:15px;color:var(--z-muted)}

/* ---------- FAQ ---------- */
.z-faq{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.z-faq details{background:#fff;border:1px solid var(--z-plum-line);border-radius:14px;box-shadow:var(--shadow)}
.z-faq details[open]{border-color:var(--z-plum)}
.z-faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:64px;padding:16px 24px;cursor:pointer;font-weight:700;font-size:18px;line-height:1.35;list-style:none}
.z-faq summary::-webkit-details-marker{display:none}
.z-faq summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(var(--z-plum),var(--z-plum)) center/12px 2px no-repeat,linear-gradient(var(--z-plum),var(--z-plum)) center/2px 12px no-repeat,var(--z-plum-tint)}
.z-faq details[open] summary::after{background:linear-gradient(var(--z-plum),var(--z-plum)) center/12px 2px no-repeat,var(--z-plum-tint)}
.d-page .z-faq summary:focus-visible{outline-offset:-3px;border-radius:14px}
.z-faq-a{padding:0 24px 22px;color:var(--ink-2)}

/* ---------- opinie ---------- */
.z-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.z-quote{margin:0;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--z-plum-line);padding:30px 28px;display:flex;flex-direction:column}
.z-stars{color:var(--z-plum);font-size:18px;letter-spacing:3px;line-height:1}
.z-quote-text{margin:16px 0 0;color:var(--ink);font-size:17px;flex:1}
.z-quote-name{margin-top:18px;font-weight:700;color:var(--z-plum);font-size:16px}

/* ---------- kafle-linki ---------- */
.z-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.d-page a.z-tile{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--z-plum-line);padding:30px 28px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.d-page .z-tile h3{font-size:21px;font-weight:700;margin-top:20px}
.z-tile p{margin-top:10px;color:var(--ink-2);font-size:17px;flex:1}
.z-tile-go{margin-top:20px;width:44px;height:44px;border-radius:50%;background:var(--z-plum);color:#fff;display:grid;place-items:center;transition:background .2s}
.z-tile-go .z-i{width:20px;height:20px}
@media (hover:hover){.d-page a.z-tile:hover{transform:translateY(-3px);border-color:var(--z-plum);box-shadow:0 8px 24px rgba(0,0,0,.1)}.z-tile:hover .z-tile-go{background:var(--z-plum-dark)}}

/* ---------- lokalizacja, pas CTA ---------- */
.z-loc{max-width:580px;margin-inline:auto;text-align:center;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--z-plum-line);padding:40px 32px}
.z-loc .z-ico{margin-inline:auto}
.d-page .z-loc h3{font-size:24px;font-weight:700;margin-top:20px}
.z-loc address{font-style:normal;margin-top:10px;color:var(--ink-2)}
.z-loc .d-hero-cta{justify-content:center}
.z-band{text-align:center;background:var(--z-warm);border:1px solid var(--z-plum-line);border-radius:28px;padding:64px 32px}
.d-page .z-band h2{font-size:clamp(28px,3vw,38px);font-weight:700}
.z-band h2::after{content:"";display:block;width:48px;height:3px;border-radius:2px;background:var(--z-plum);margin:18px auto 0}
.z-band p{margin:18px auto 0;max-width:48ch;color:var(--ink-2)}
.z-band .d-hero-cta{justify-content:center}
.z-band .z-hero-note{justify-content:center}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .z-hero-in{gap:48px}
  .z-cards,.z-minis{grid-template-columns:1fr 1fr}
  .z-cards-3,.z-tiles,.z-packs,.z-quotes{grid-template-columns:1fr 1fr}
  .z-ba{grid-template-columns:1fr 1fr}
  .z-steps{grid-template-columns:1fr}
  .z-feat{grid-template-columns:1fr}
}

/* ---------- telefon ---------- */
@media (max-width:760px){
  .z-anchors{top:60px}
  .z-anchors ul{width:auto;margin-inline:0;padding-inline:16px;gap:2px}
  .z-anchors .d-wrap{width:100%}
  .d-section.z-sec{padding-block:60px}
  .d-section.z-sec.z-tight{padding-block:32px}
  .z-sec[id]{scroll-margin-top:112px}
  .z-hero-in{grid-template-columns:1fr;gap:36px;padding-block:32px 52px}
  .z-hero-media{order:-1;max-width:none;justify-self:stretch}
  .z-hero-media::before{inset:14px -10px -14px 10px;border-radius:24px}
  .z-hero-media img{aspect-ratio:16/11;object-position:50% 18%;border-radius:22px}
  .d-page .z-hero h1{font-size:34px}
  .z-chips{margin-top:18px}
  .z-chips li{font-size:15px;padding:5px 13px}
  .z-hero-desc{margin-top:16px}
  .z-hero .d-hero-cta{margin-top:24px}
  .z-hero-solo .z-hero-in{text-align:left}
  .z-hero-solo .z-chips,.z-hero-solo .d-hero-cta,.z-hero-solo .z-hero-note{justify-content:flex-start}
  .z-cards,.z-cards-3,.z-minis,.z-tiles,.z-packs,.z-quotes,.z-ba{grid-template-columns:1fr}
  .z-ba{gap:14px}
  .z-card,.z-step,.z-pack,.z-quote,.z-tile{padding:26px 22px}
  .z-feat-item{padding:22px 20px;gap:14px}
  .z-minis{gap:30px}
  .z-tl-item{padding-left:72px;padding-bottom:32px}
  .z-tl-item::before{left:23px;top:48px}
  .z-tl-dot{width:48px;height:48px;font-size:20px;box-shadow:0 0 0 6px var(--z-bg)}
  .z-note{flex-direction:column;gap:14px;padding:24px 22px}
  .z-warn{flex-direction:column;gap:14px;padding:26px 22px}
  .z-list-2{columns:1}
  .z-stats,.z-stats-3,.z-stats-2{--z-n:2}
  .z-stat{padding:28px 12px}
  .z-stat:nth-child(odd){border-left:0}
  .z-stat:nth-child(n+3){border-top:1px solid var(--line)}
  .z-stat-label{font-size:13px;letter-spacing:.05em}
  .z-strip img{height:280px}
  .z-faq summary{padding:14px 18px;font-size:17px}
  .z-faq-a{padding:0 18px 20px}
  .z-loc{padding:32px 22px}
  .z-band{padding:44px 22px;border-radius:22px}
  .z-pack-price{font-size:40px}
}

/* ---------- tabela cen -> karty (poniżej 600 px) ---------- */
@media (max-width:600px){
  .z-price-wrap{background:transparent;border:0;box-shadow:none;overflow:visible}
  .z-price-table,.z-price-table tbody,.z-price-table tr,.z-price-table td{display:block;width:100%}
  .z-price-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .z-price-table tr{margin:0 0 14px;background:#fff;border:1px solid var(--z-plum-line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
  .z-price-table td,.z-price-table tbody tr:nth-child(even) td{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:12px 18px;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:right;justify-content:flex-end;font-size:17px}
  .z-price-table td:last-child{border-bottom:0}
  .z-price-table td::before{content:attr(data-label);margin-right:auto;padding-right:10px;color:var(--z-muted);font-size:14px;font-weight:500;text-align:left;max-width:46%}
  .z-price-table td:first-child,.z-price-table tbody tr:nth-child(even) td:first-child{background:var(--z-plum-tint);color:var(--z-plum);text-align:left;justify-content:flex-start;font-size:18px}
  .z-price-table td:first-child::before{display:none}
  .z-price-table td{flex-wrap:nowrap}
  .z-price-table td>*{white-space:nowrap}
  .z-old{margin-right:0}
  .z-compare th,.z-compare td{padding:14px 12px;font-size:16px}
}

/* ---------- zamknięcie: linia „lub zadzwoń” (wewnątrz d-closing) ---------- */
.d-closing .z-closing-tel{margin-top:22px;color:#D6D7DC}
.d-page .d-closing .z-closing-tel a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px;display:inline-block;padding:10px 4px}

/* ---------- motywy zabiegów (decyzja Rafała 13.10.2026) ----------
  Każdy zabieg ma kolor swojego landingu z Manusa, przyciemniony do kontrastu z białym tekstem (WCAG):
    .z-onda  zieleń landingu Onda (oklch .65 .18 180 → #008167)
    .z-krio  błękit landingu CoolTech (oklch .75 .16 233 → #006EAE / przycisk #007DBE)
    bez klasy — śliwka (depilacja, strona zbiorcza).
  .z-page (na <body>) — przyciski rezerwacji w kolorze akcentu zamiast czerwieni ProTrenera.
  Klasę motywu można dać też pojedynczemu elementowi (np. kafel na stronie zbiorczej). */
.z-onda{--z-plum:#008167;--z-plum-dark:#00654F;--z-btn:#008167;--z-plum-tint:#E6F6F2;--z-plum-line:#C4E8DF}
.z-krio{--z-plum:#006EAE;--z-plum-dark:#00578C;--z-btn:#007DBE;--z-plum-tint:#E7F3FB;--z-plum-line:#C6E1F2}
.d-page.z-page .d-btn-red{background:var(--z-btn,var(--z-plum));border-color:transparent}
.d-page.z-page .d-btn-red:hover{background:var(--z-plum-dark)}