/* ───────────────────────────────────────────────────────────
   single-usluga — enhanced overlay
   Tabela cennika pod treścią/FAQ. Baseline single-usluga.css nietknięty.
   ─────────────────────────────────────────────────────────── */

.us-section-cennik {
  margin-top: 8px;
}

.us-cennik-table {
  margin-top: 18px;
  border: 1px solid var(--mag-g);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--white);
}

.us-ct-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--mag-w) 0%, var(--blush) 100%);
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mag-d);
}
.us-ct-head span:last-child { text-align: right; }

.us-ct-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 16px 22px;
  border-top: 1px solid var(--mag-g);
  transition: background var(--tf) var(--eo);
}
.us-ct-row:hover { background: var(--mag-w); }

.us-ct-name {
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.us-ct-lead {
  font-size: 13px;
  font-weight: 400;
  color: var(--gray);
  line-height: 1.4;
}

.us-ct-price {
  font-family: var(--f-ui);
  font-size: 16px;
  white-space: nowrap;
  text-align: right;
  color: var(--ink);
}
.us-ct-price strong { color: var(--mag-d); font-weight: 700; }
.us-ct-price s { color: var(--gray); font-weight: 400; margin-right: 4px; font-size: 14px; }
.us-ct-price em { color: var(--gray); font-style: normal; font-size: 14px; }

.us-ct-note {
  margin-top: 14px;
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--gray);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.us-ct-note i { color: var(--mag); margin-top: 1px; flex-shrink: 0; }
.us-ct-note a { color: var(--mag-d); font-weight: 600; text-decoration: underline; }

@media (max-width: 560px) {
  .us-ct-head, .us-ct-row { padding-left: 16px; padding-right: 16px; gap: 10px; }
  .us-ct-name { font-size: 14px; }
  .us-ct-price { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .us-ct-row { transition: none; }
}

/* ── FAQ: pytanie jako H3 (hierarchia + SEO) — wygląd identyczny jak dawne span ── */
.us-faq-q .us-faq-h {
  flex: 1;
  margin: 0;
  padding: 0;
  font-family: var(--f-ui);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: inherit;
  letter-spacing: 0;
}
@media (max-width: 560px) {
  .us-faq-q .us-faq-h { font-size: 15px; }
}

/* ── Podsekcje H3 (poziom nagłówka w ACF) — mniejsze niż H2 dla hierarchii ── */
.us-section-title-h3 {
  font-size: clamp(20px, 2vw, 25px);
}
.us-section-title-h3 i {
  font-size: 18px;
}

/* ─────── Moduł „Powiązane usługi" (linkowanie wewnętrzne / SEO) ───────
 * Samowystarczalny: .sec/.sec-content NIE są w single-usluga (tylko home.css),
 * więc szerokość/padding definiujemy tu, wyrównane do siatki strony (--max/--px). */
.us-related-sec {
  padding: clamp(40px, 5vw, 64px) var(--px);
}
.us-related-sec .sec-content {
  max-width: var(--max);
  margin-inline: auto;
}

/* Nagłówek — eyebrow nad tytułem (spójny z .doc-head/.sec-head strony).
 * display:block wymuszony na każdym elemencie — home.css ładuje się też tu
 * i nadaje .slbl/.stitle/.ssub własne reguły; wymuszamy pionowy układ. */
.us-related-head {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.us-related-sec .us-related-head .slbl {
  display: block;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mag, #df3ba3);
  margin: 0 0 10px;
}
.us-related-sec .us-related-head .stitle {
  display: block;
  width: 100%;
  font-family: var(--f-serif, Georgia, serif);
  font-size: clamp(24px, 5vw, 36px);
  line-height: 1.15;
  font-weight: 400;
  color: var(--ink, #14143c);
  margin: 0 0 10px;
}
.us-related-sec .us-related-head .stitle .hl {
  font-style: italic;
  color: var(--mag, #df3ba3);
}
.us-related-sec .us-related-head .ssub {
  display: block;
  width: 100%;
  color: var(--slate, #5b5b77);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.6;
  margin: 0;
}

/* Siatka kart */
.us-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.us-related-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  min-height: 44px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.us-related-card:hover,
.us-related-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(20,20,60,.10);
  border-color: rgba(223,59,163,.30);
}
.us-related-card:focus-visible {
  outline: 2px solid var(--mag, #df3ba3);
  outline-offset: 2px;
}
.us-related-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--green-g, #DCFCE7);
  color: var(--green, #22C55E);
  font-size: 23px;
}
.us-related-body { flex: 1 1 auto; min-width: 0; }
.us-related-name {
  display: block;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink, #14143c);
}
.us-related-desc {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--slate, #5b5b77);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.us-related-arrow {
  flex: 0 0 auto;
  color: var(--mag, #df3ba3);
  font-size: 20px;
  transition: transform .2s ease;
}
.us-related-card:hover .us-related-arrow { transform: translateX(4px); }

@media (max-width: 600px) {
  .us-related-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .us-related-card, .us-related-arrow { transition: none; }
  .us-related-card:hover { transform: none; }
}

/* ─────── Mobile: odstępy sekcji + sekcja lekarzy (overlay, baseline nietknięty) ─────── */
@media (max-width: 768px) {
  /* Moduł powiązanych — mniejszy odstęp pionowy na mobile */
  .us-related-sec {
    padding: clamp(28px, 7vw, 40px) var(--px);
  }
  .us-related-head {
    margin-bottom: 18px;
  }
  .us-related-sec .us-related-head .stitle {
    font-size: clamp(22px, 6vw, 28px);
  }
  /* Sekcja lekarzy „Kto wykonuje" — zmniejsz odstęp (baseline .sec = 6vw, za dużo na mobile) */
  .us-doctors-sec.sec {
    padding-top: clamp(28px, 7vw, 44px);
    padding-bottom: clamp(28px, 7vw, 44px);
  }
}

@media (max-width: 600px) {
  /* Karty lekarzy — węższe na małym ekranie (więcej widać, mniej „za duże") */
  .us-doctors-sec .doc-carousel .doc {
    flex-basis: calc((100% - 1 * 16px) / 1.6) !important;
  }
  .us-related-sec {
    padding: 24px var(--px);
  }
}

/* ═══════ HERO IMAGE — ukryty na mobile ═══════
   Na ≤768px ukrywamy zdjęcie/ikonę hero usługi (.us-hero-image, w tym wariant
   .us-hero-image-fallback) — treść hero (H1, lead, CTA) zajmuje wtedy pełną
   szerokość, bez zajmowania pierwszego ekranu obrazem (decyzja 2026-06-11).
   .us-hero-inner jest już 1-kolumnowy ≤768px, więc układ nie wymaga zmian. */
/* 2026-09-30: zdjęcie wraca na mobile (autorytet lekarza/zespołu, decyzja Marco). */
@media (max-width: 768px) {
  .us-hero-image { display: block; order: -1; aspect-ratio: 4/3; max-height: 300px; }
  .us-hero-image img { object-position: center 25%; }
  .us-hero-image-fallback { display: none !important; }
}

/* ───────────────────────────────────────────────────────────
   TrustMate badge w hero usługi — pod CTA, blisko decyzji.
   Per-usługa (usluga_trustmate_widget_id) z fallbackiem na badge firmowy.
   ─────────────────────────────────────────────────────────── */

.us-hero-badge {
  margin-top: 32px;
  margin-bottom: 32px;
  margin-left: 0;
}
.us-hero-badge .tm-badge {
  /* min-height = rezerwacja miejsca przed lazy-load widgetu (anty-CLS) */
  min-height: 96px;
}
/* TrustMate wyśrodkowuje treść. Override TYLKO w hero usługi — treść do lewej,
   spójnie z CTA. Dwa typy widgetu: chupacabra (firma/mix) i produktowy (f23dee3e)
   mają różne klasy → celujemy w obie znane + generycznie po atrybucie [class*=__r1].
   Reszta CSS TrustMate (sekcja opinii, inne miejsca) nietknięta. */
.us-hero-badge .tm-chupacabra2__r1,
.us-hero-badge .tm-chupacabra2__r1--mobile,
.us-hero-badge [class*="__r1"],
.us-hero-badge [class*="__main"] {
  justify-content: flex-start !important;
  text-align: left;
}
/* Karuzela ferret2 ma własny margines boczny (margin:0 1.6em) → wcina ją od lewej.
   Zerujemy lewy margines/padding, by równała się z nagłówkiem i opisem (do lewej). */
.us-hero-badge .tm-ferret2,
.us-hero-badge [class*="tm-ferret2"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.us-hero-badge .tm-carousel,
.us-hero-badge [class*="tm-carousel__track"],
.us-hero-badge [class*="tm-carousel__list"] {
  padding-left: 0 !important;
  margin-left: 0 !important;
  justify-content: flex-start !important;
}
@media (max-width: 768px) {
  .us-hero-badge {
    margin-top: 24px;
    margin-bottom: 24px;
    max-width: 100%;
  }
}
/* Ukrycie brandingu TrustMate (footer „zweryfikowanych przez", „Jak zbieramy
   opinie?", upper-row) jest GLOBALNE → przeniesione do global-enhanced.css. */

/* CTA „Umów wizytę" w hero usługi — zielony #6fc597 zamiast magenty
   (mniej magenty na stronie). Baseline single-usluga.css nietknięty. */
.us-btn-primary {
  background: linear-gradient(135deg, #6fc597 0%, #4fae7d 100%) !important;
  box-shadow: 0 6px 18px rgba(111, 197, 151, 0.32) !important;
}
.us-btn-primary:hover {
  box-shadow: 0 10px 26px rgba(111, 197, 151, 0.45) !important;
}

/* A11y: kontrast pigułki hero (magenta na białym 3,97:1 -> AA) */
.us-hero-pill { color: var(--mag-a11y, #C92F93); }

/* „Gdzie i jak”: dwie karty, prywatnie w Bielanach i NFZ w Smolcu */
.us-where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.us-where-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--white);
  border: 1px solid rgba(223, 59, 163, .18);
  border-radius: 16px;
}
.us-where-card--nfz { border-color: rgba(12, 184, 182, .4); background: linear-gradient(160deg, #f3fbfb 0%, var(--white) 70%); }
.us-where-tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--mag-w);
  color: var(--mag-dim, #B8318A);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.us-where-card--nfz .us-where-tag { background: var(--teal-g); color: #067b79; }
.us-where-body { color: var(--slate); font-size: 15px; line-height: 1.65; }
.us-where-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 48px;
  margin-top: auto;
  padding: 0 22px;
  border-radius: var(--r-btn);
  font: 600 15px/1 var(--f-ui);
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--mag-d);
  background: var(--mag-d);
  color: var(--white);
}
.us-where-card--nfz .us-where-cta { background: transparent; color: #067b79; border-color: #067b79; }
.us-where-cta:focus-visible { outline: 3px solid var(--mag-d); outline-offset: 3px; }
@media (max-width: 768px) { .us-where { grid-template-columns: 1fr; } .us-where-cta { align-self: stretch; } }

/* „Przeczytaj też”: artykuły powiązane z usługą */
.us-articles-sec { padding-block: clamp(28px, 4vw, 48px); }
.us-articles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.us-articles a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  background: var(--white);
  border: 1px solid rgba(27, 16, 32, .08);
  border-radius: 12px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color var(--tf), color var(--tf);
}
.us-articles a i { color: var(--mag-d); font-size: 20px; flex-shrink: 0; }
.us-articles a:hover { border-color: var(--mag-d); color: var(--mag-d); }
.us-articles a:focus-visible { outline: 3px solid var(--mag-d); outline-offset: 3px; }
@media (max-width: 768px) { .us-articles { grid-template-columns: 1fr; } }
.us-related-sec .us-related-head .slbl, .us-articles-sec .us-related-head .slbl { color: var(--mag-dim, #B8318A); }

/* CLS: widżet opinii doładowuje się po load - rezerwacja miejsca w hero */
.us-hero-badge { min-height: 265px; }

/* H2 pod H1 (dłuższa fraza SEO) */
.us-h1-sub{font-family:'Outfit',sans-serif;font-size:clamp(17px,2.2vw,21px);font-weight:500;line-height:1.35;color:var(--teal-a11y,#067b79);margin:-6px 0 14px;letter-spacing:0}
.us-opinie{padding:48px 0}
.us-opinie .sec-content{max-width:1100px;margin:0 auto;padding:0 16px}
.us-opinie .fm-op-track{padding-bottom:16px}
.us-hero-badge .fm-op-head{margin-bottom:0}

/* Hero desktop: treść + duże zdjęcie, opinie na całą szerokość pod spodem */
.us-hero-reviews{max-width:var(--max);margin:clamp(28px,4vw,48px) auto 0 !important;padding:0;min-height:0}
@media (min-width:1025px){
  .us-hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,5vw,72px)}
  .us-hero-image{aspect-ratio:4/5;max-height:600px;justify-self:end;width:100%;max-width:480px}
  .us-hero-reviews .fm-op-card{flex-basis:calc((100% - 42px)/3)}
}

/* ── Hero usługi v3 (desktop): proporcje, typografia, odstępy ── */
.us-hero{padding-top:clamp(28px,3.5vw,56px);padding-bottom:clamp(36px,4vw,56px)}
.us-hero-pill{margin-bottom:20px}
.us-h1{font-size:clamp(32px,3.6vw,54px);line-height:1.08;letter-spacing:-.015em;margin:0 0 12px;max-width:16ch;text-wrap:balance}
.us-h1-sub{margin:0 0 20px}
.us-lead{font-size:clamp(16px,1.25vw,19px);line-height:1.65;color:#3f4652;max-width:58ch;margin:0 0 28px}
.us-hero-cta{gap:12px}
.us-hero-reviews{margin-top:clamp(32px,4vw,56px) !important}
@media (min-width:1025px){
  .us-hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,4vw,80px);align-items:center}
  .us-hero-image{aspect-ratio:auto;height:clamp(460px,34vw,600px);max-height:none;max-width:none;width:100%;justify-self:stretch;border-radius:24px}
  .us-hero-image img{object-position:center 22%}
}
.us-h1{max-width:22ch;margin-bottom:20px}
.us-h1-sub{margin-top:-6px}
.fm-op-track{align-items:flex-start}

/* ── Hero v4: więcej oddechu ── */
.us-hero{padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(48px,6vw,88px)}
.us-hero-pill{margin-bottom:28px}
.us-h1{margin-bottom:18px;line-height:1.1}
.us-h1-sub{margin:0 0 28px;font-size:clamp(18px,1.5vw,22px)}
.us-lead{margin-bottom:40px;line-height:1.75;color:#4a5160;font-weight:400}
.us-hero-cta{gap:16px}
.us-hero-reviews{margin-top:clamp(56px,6vw,96px) !important}
.us-hero-reviews .fm-op{row-gap:20px}
.us-hero-reviews .fm-op-track{gap:20px}
.us-hero-reviews .fm-op-card{padding:26px 28px;gap:16px}
@media (min-width:1025px){
  .us-hero-inner{gap:clamp(56px,6vw,112px)}
  .us-hero-reviews .fm-op-card{flex-basis:calc((100% - 40px)/3)}
}
@media (max-width:768px){
  .us-hero{padding-top:20px;padding-bottom:40px}
  .us-hero-pill{margin-bottom:20px}
  .us-lead{margin-bottom:28px}
  .us-hero-reviews{margin-top:40px !important}
  .us-hero-reviews .fm-op-card{padding:20px}
}

/* Usługa bez zdjęcia: bez różowego panelu z ikoną, treść na pełną szerokość */
.us-hero-image-fallback{display:none !important}
.us-hero-inner:has(.us-hero-image-fallback){grid-template-columns:1fr !important}
.us-hero-inner:has(.us-hero-image-fallback) .us-hero-content{max-width:820px}

.us-hero-alt{display:inline-flex;align-items:center;gap:6px;margin-top:16px;min-height:44px;font-weight:600;font-size:15px;color:var(--teal-a11y,#067b79);text-decoration:none;border-bottom:1px solid rgba(6,123,121,.35)}
.us-hero-alt:hover{color:#055f5d;border-bottom-color:currentColor}

/* Wiersz cennika jako link do pozycji w /cennik/ (tam rozwinięta karta z przyciskiem „Umów") */
a.us-ct-row--link { color: inherit; text-decoration: none; cursor: pointer; grid-template-columns: 1fr auto 18px; align-items: center; }
a.us-ct-row--link::after { content: "\203A"; color: var(--teal, #0CB8B6); font-size: 22px; line-height: 1; justify-self: end; }
a.us-ct-row--link:focus-visible { outline: 2px solid var(--teal, #0CB8B6); outline-offset: -2px; }

/* ═══════ Nagłówki sekcji w treści usług (01.10.2026, Marco: „słabe i nieczytelne”) ═══════
   DM Serif Display to krój do dużych tytułów (H1, hero); w treści przy 20-24 px na telefonie był cienki.
   Nagłówki sekcji: Outfit 700 (drugi font marki), ikona w miętowym kółku jak znaczki list. */
body.single-usluga .us-section-title {
  font-family: var(--f-ui, 'Outfit', sans-serif) !important; font-weight: 700 !important;
  font-size: clamp(23px, 2.2vw, 30px) !important; line-height: 1.25 !important; letter-spacing: -.015em !important;
  color: #1A1523 !important; align-items: center !important; gap: 12px !important; margin-bottom: 18px !important;
}
body.single-usluga .us-section-title span { padding-top: 0 !important; }
body.single-usluga .us-section-title-h3 { font-size: clamp(19px, 1.7vw, 23px) !important; font-weight: 650 !important; }
body.single-usluga .us-section-title i {
  flex: none; display: inline-grid !important; place-items: center; width: 38px !important; height: 38px !important;
  border-radius: 50% !important; background: #EEF8F2 !important; color: #267A52 !important; font-size: 18px !important;
}
body.single-usluga .us-section-title-h3 i { width: 32px !important; height: 32px !important; font-size: 16px !important; }
@media (max-width: 760px) {
  body.single-usluga .us-section-title { font-size: 22px !important; }
  body.single-usluga .us-section-title-h3 { font-size: 19px !important; }
}

/* Oddech tekstu w treści usług (01.10.2026): większy tekst, wyższa interlinia, odstęp między akapitami */
body.single-usluga .us-section-body, body.single-usluga .us-section-body p, body.single-usluga .us-section-body li {
  font-size: 16.5px !important; line-height: 1.75 !important; color: #3F3A47 !important;
}
body.single-usluga .us-section-body p { margin: 0 0 1.1em !important; }
body.single-usluga .us-section-body p:last-child { margin-bottom: 0 !important; }
body.single-usluga .us-section-body ul, body.single-usluga .us-section-body ol { margin: 0 0 1.1em !important; }
body.single-usluga .us-section { margin-bottom: clamp(40px, 6vw, 64px) !important; }
@media (max-width: 760px) {
  body.single-usluga .us-section-body, body.single-usluga .us-section-body p, body.single-usluga .us-section-body li { font-size: 16px !important; line-height: 1.75 !important; }
}

/* Oddech v2 (01.10.2026, Marco: „znowu nie ma oddechu”): szerszy margines boczny na telefonie, 17 px, interlinia 1.8,
   lekko otwarty rozstaw liter Outfit, większe odstępy między akapitami i pod nagłówkiem sekcji. */
@media (max-width: 760px) {
  body.single-usluga .us-wrap { padding-left: 22px !important; padding-right: 22px !important; }
  body.single-usluga .us-section-body, body.single-usluga .us-section-body p, body.single-usluga .us-section-body li {
    font-size: 17px !important; line-height: 1.8 !important; letter-spacing: .005em !important; word-spacing: .03em;
  }
  body.single-usluga .us-section-body p, body.single-usluga .us-section-body ul, body.single-usluga .us-section-body ol { margin-bottom: 1.4em !important; }
  body.single-usluga .us-section-title { margin-bottom: 22px !important; line-height: 1.3 !important; }
  body.single-usluga .us-section { margin-bottom: 56px !important; }
}

/* Cennik w usłudze (01.10.2026): dopisek jako jeden blok tekstu (link nie rozbija go na kolumny), link i strzałki w kolorach marki */
body.single-usluga .us-ct-note { display: flex !important; align-items: flex-start !important; gap: 8px !important; font-size: 14px !important; line-height: 1.6 !important; color: #5A5363 !important; }
body.single-usluga .us-ct-note > i { flex: none; margin-top: 3px; color: #267A52 !important; }
body.single-usluga .us-ct-note > span { display: block; flex: 1; min-width: 0; }
body.single-usluga .us-ct-note a { color: #A8267B !important; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(168, 38, 123, .35); text-underline-offset: 3px; }
body.single-usluga a.us-ct-row--link::after { color: #A8267B !important; }

/* ═══════ Rozdziały usługi (01.10.2026, Marco: „tło całe jedno, odseparować i z jajem”) ═══════
   Klasy z single-usluga.php: us-ch--odd/even (rozdział H2), --sub (podsekcja H3 doklejona do rozdziału),
   --intro (lead bez tytułu), --cennik. Biały i różowy na przemian, FAQ miętowe, numer rozdziału DM Serif,
   na różowych pasach otwarty pierścień z logo. Telefon: pasy na całą szerokość. */
body.single-usluga .us-main { counter-reset: fm-ch; }
body.single-usluga .us-section.us-ch {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 16px 0 0 !important; padding: clamp(32px, 4vw, 48px) clamp(22px, 4vw, 48px);
  border-radius: 24px; background: var(--white, #fff);
}
body.single-usluga .us-section.us-ch--even { background: var(--mag-w, #FDF0FA); }
body.single-usluga .us-section.us-ch.us-section-faq { background: #EEF8F2; }
body.single-usluga .us-section.us-ch--intro { background: transparent; margin-top: 0 !important; padding-top: 0; padding-bottom: 8px; }
body.single-usluga .us-section.us-ch--sub { margin-top: 0 !important; padding-top: 8px; border-top-left-radius: 0; border-top-right-radius: 0; }
body.single-usluga .us-section.us-ch:has(+ .us-ch--sub) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 24px; }
body.single-usluga .us-section.us-ch--cennik { box-shadow: inset 0 4px 0 var(--mag, #DF3BA3); }

/* Numer rozdziału: „01 ───” */
body.single-usluga .us-ch:not(.us-ch--sub):not(.us-ch--intro):not(.us-ch--cennik) { counter-increment: fm-ch; }
body.single-usluga .us-ch:not(.us-ch--sub):not(.us-ch--intro):not(.us-ch--cennik)::before {
  content: counter(fm-ch, decimal-leading-zero); display: block; margin-bottom: 14px; padding-right: 0;
  font: italic 400 24px/1 var(--f-serif, 'DM Serif Display', serif); color: var(--mag, #DF3BA3);
  background: linear-gradient(var(--mag-g, #F7E0F1), var(--mag-g, #F7E0F1)) no-repeat right center / calc(100% - 48px) 1px;
}
body.single-usluga .us-ch.us-section-faq::before { color: #267A52 !important; background-image: linear-gradient(#CDE9D8, #CDE9D8) !important; }

/* Otwarty pierścień z logo jako akcent */
body.single-usluga .us-ch--even:not(.us-ch--sub)::after,
body.single-usluga .us-ch.us-section-faq::after {
  content: ""; position: absolute; z-index: -1; top: -72px; right: -72px; width: 210px; height: 210px;
  border: 16px solid var(--mag, #DF3BA3); border-right-color: transparent; border-radius: 50%;
  transform: rotate(-35deg); opacity: .08; pointer-events: none;
}
body.single-usluga .us-ch.us-section-faq::after { border-color: #5BB985; border-right-color: transparent; opacity: .16; }

/* Elementy w białym pasie odcinają się od tła */
body.single-usluga .us-ch--odd .us-list-item,
body.single-usluga .us-ch--odd .us-faq-item { background: var(--bg, #F8F9FA); }

@media (max-width: 760px) {
  body.single-usluga .us-section.us-ch {
    margin: 0 -22px !important; padding: 40px 22px; border-radius: 0 !important;
    width: calc(100% + 44px) !important; max-width: none !important;
  }
  body.single-usluga .us-section.us-ch--intro { padding: 0 22px 32px; }
  body.single-usluga .us-section.us-ch--sub { padding-top: 4px; }
  body.single-usluga .us-section.us-ch:has(+ .us-ch--sub) { padding-bottom: 20px; }
  body.single-usluga .us-ch--even:not(.us-ch--sub)::after,
  body.single-usluga .us-ch.us-section-faq::after { width: 160px; height: 160px; top: -56px; right: -56px; border-width: 13px; }
}
body.single-usluga .us-ch.us-section-faq .us-section-title i,
body.single-usluga .us-ch--even .us-section-title i { background: var(--white, #fff) !important; }