/* Estetime — komponenty jako klasy CSS (prefiks es-), bez skryptów.
   Zmienne pochodzą z tokens.css; wartości po przecinku to te same tokeny na wypadek braku tokens.css.
   Motyw z logo: kapsuła 6 : 7, linia 1 px, gwiazdka (czteroramienny błysk), beż jako tło, zieleń w literach.
   v2 (11.10.2026): kapsuła zamiast łuku w hero, łuk czasu (es-czas) zamiast ikony zegara, kursywa Cormorant jako głos marki,
   karty bez pudełek (kolumny rozdzielone linią), opinie bez cudzysłowów, ocena gwiazdkami marki. */

.es-root {
  font-family: var(--font-sans, Manrope, "Segoe UI", system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--zielen, #20302B);
  background: var(--bez, #EEE2D8);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.es-root *, .es-root *::before, .es-root *::after { box-sizing: border-box; }
.es-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.es-num { font-family: var(--font-sans, Manrope, sans-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Ikony (Lucide, obrys 1.5, currentColor) ---------- */
.es-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.es-ic--sm { width: 18px; height: 18px; }
.es-ic--fill { fill: currentColor; stroke: none; }

/* ---------- Gwiazdka marki (Star) ---------- */
/* Czteroramienny błysk o wklęsłych bokach z sygnetu (zmierzony: 188 × 219, czyli też 6 : 7).
   Rysowany maską, więc przyjmuje kolor tekstu (currentColor). Ta sama ścieżka co w <svg class="es-star">. */
.es-star {
  --es-star-w: 10px;
  display: inline-block; flex: none; vertical-align: 0.05em;
  width: var(--es-star-w); height: calc(var(--es-star-w) * 28 / 24);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 0C13.2 7.2 16.2 12.6 24 14C16.2 15.4 13.2 20.8 12 28C10.8 20.8 7.8 15.4 0 14C7.8 12.6 10.8 7.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 0C13.2 7.2 16.2 12.6 24 14C16.2 15.4 13.2 20.8 12 28C10.8 20.8 7.8 15.4 0 14C7.8 12.6 10.8 7.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
svg.es-star { background: none; -webkit-mask: none; mask: none; fill: currentColor; }
.es-star--s { --es-star-w: 8px; }
.es-star--l { --es-star-w: 12px; }
.es-star--accent { color: var(--roz-ciemny, #7A5452); }
.es-star--on-dark { color: var(--roz, #BC9391); }
/* Rząd gwiazdek marki jako ocena (5 × es-star), zamiast ikony Lucide: <span class="es-stars" role="img" aria-label="Ocena 5 na 5"><i class="es-star"></i>…</span> */
.es-stars { display: inline-flex; align-items: center; gap: 3px; color: var(--roz-ciemny, #7A5452); }
.es-stars .es-star { --es-star-w: 11px; }
.es-stars--on-dark { color: var(--roz, #BC9391); }
.es-stars--l .es-star { --es-star-w: 14px; }

/* ---------- Łuk czasu (TimeArc, es-czas) ---------- */
/* Este + time: czas zabiegu jako wypełniony odcinek obrysu kapsuły 6 : 7. Skala: 2 h = pełny obrys (--czas: 100),
   1 h = 50, 75 min = 62, 40 min = 33, 30 min = 25; dłuższe niż 2 h = 100. Ścieżka ma pathLength="100",
   więc --czas to procent. Zastępuje ikonę zegara wszędzie tam, gdzie stoi czas zabiegu.
   <svg class="es-czas" viewBox="0 0 24 28" style="--czas:50" aria-hidden="true"><path class="es-czas__tor" d="M12 1.5A10.5 10.5 0 0 1 22.5 12V16A10.5 10.5 0 0 1 1.5 16V12A10.5 10.5 0 0 1 12 1.5Z"/><path class="es-czas__luk" pathLength="100" d="M12 1.5A10.5 10.5 0 0 1 22.5 12V16A10.5 10.5 0 0 1 1.5 16V12A10.5 10.5 0 0 1 12 1.5Z"/></svg> */
.es-czas { --czas: 50; width: 18px; height: 21px; flex: none; overflow: visible; }
.es-czas__tor { fill: none; stroke: var(--linia-mocna, #7D847E); stroke-width: 1.25; opacity: .55; }
.es-czas__luk { fill: none; stroke: var(--roz-ciemny, #7A5452); stroke-width: 2; stroke-linecap: round; stroke-dasharray: var(--czas) 100; }
.es-czas--l { width: 24px; height: 28px; }
.es-czas--on-dark .es-czas__tor { stroke: var(--bez, #EEE2D8); opacity: .35; }
.es-czas--on-dark .es-czas__luk { stroke: var(--roz, #BC9391); }
.es-czas--on-roz .es-czas__tor { stroke: var(--zielen, #20302B); opacity: .3; }
.es-czas--on-roz .es-czas__luk { stroke: var(--zielen, #20302B); }
/* Czas z łukiem w jednej linii: <span class="es-time"><svg class="es-czas">…</svg>2 h</span> */
.es-time { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans, Manrope, sans-serif); font-size: 15px; line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Lista z gwiazdką jako punktorem */
.es-list { list-style: none; margin: 0; padding: 0; }
.es-list--star > li { position: relative; padding-left: 22px; }
.es-list--star > li::before {
  content: ""; position: absolute; left: 2px; top: calc(0.825em - 6px);
  width: 10px; height: 12px; background-color: var(--roz-ciemny, #7A5452);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 0C13.2 7.2 16.2 12.6 24 14C16.2 15.4 13.2 20.8 12 28C10.8 20.8 7.8 15.4 0 14C7.8 12.6 10.8 7.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 0C13.2 7.2 16.2 12.6 24 14C16.2 15.4 13.2 20.8 12 28C10.8 20.8 7.8 15.4 0 14C7.8 12.6 10.8 7.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Grupa meta: „2 h ✦ 400 zł” */
.es-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); font-size: 15px; line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--zielen, #20302B); }
.es-meta .es-star { color: var(--roz-ciemny, #7A5452); }
.es-meta--on-dark { color: var(--bez, #EEE2D8); }
.es-meta--on-dark .es-star { color: var(--roz, #BC9391); }

/* ---------- Etykieta i nagłówki (Heading) ---------- */
.es-eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 4px; margin: 0; font-family: var(--font-sans, Manrope, sans-serif); font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--zielen, #20302B); }
.es-eyebrow .es-star { color: var(--roz-ciemny, #7A5452); }
.es-eyebrow--on-dark { color: var(--roz, #BC9391); }
.es-eyebrow--on-dark .es-star { color: var(--roz, #BC9391); }
.es-eyebrow--on-roz { color: var(--zielen, #20302B); }
.es-eyebrow--on-roz .es-star { color: var(--zielen, #20302B); }

.es-h { margin: 0; font-family: var(--font-display, Cormorant, "Cormorant Garamond", Garamond, serif); font-weight: 500; color: var(--zielen, #20302B); text-wrap: balance; }
/* Głos marki: jedno słowo nagłówka kursywą Cormorant (ital 500) w roz-ciemny. Jedno na nagłówek, nie w każdym H3. */
.es-h em { font-style: italic; font-weight: 500; color: var(--roz-ciemny, #7A5452); letter-spacing: 0; }
.es-h--xl { font-size: 68px; line-height: 1.02; letter-spacing: -0.01em; }
.es-h--xxl { font-size: 88px; line-height: 0.98; letter-spacing: -0.015em; } /* hero na desktopie; na telefonie jak --xl */
.es-h--l { font-size: 50px; line-height: 1.06; letter-spacing: -0.005em; }
.es-h--m { font-size: 34px; line-height: 1.12; }
.es-h--s { font-size: 26px; line-height: 1.15; }
.es-h--on-dark { color: var(--bez, #EEE2D8); }
.es-h--on-dark em { color: var(--roz, #BC9391); }
.es-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3, 12px); }
.es-head .es-lead { margin-top: var(--space-2, 8px); }
.es-lead { margin: 0; font-size: 19px; line-height: 1.6; color: var(--zielen, #20302B); max-width: 60ch; text-wrap: pretty; }
.es-lead--on-dark { color: var(--bez, #EEE2D8); }
.es-text { margin: 0; font-size: 16px; line-height: 1.65; max-width: var(--kontener-tekst, 680px); text-wrap: pretty; }
@media (max-width: 1079px) { .es-h--xxl { font-size: 64px; line-height: 1.02; } }
@media (max-width: 640px) {
  .es-h--xl, .es-h--xxl { font-size: 44px; line-height: 1.05; }
  .es-h--l { font-size: 36px; line-height: 1.08; }
  .es-h--m { font-size: 28px; line-height: 1.14; }
  .es-h--s { font-size: 24px; }
  .es-lead { font-size: 17px; }
}

/* ---------- Przyciski i linki (Button) ---------- */
/* Pigułka z brandbooka (s. 19): Manrope Bold, zapis zdaniowy. */
.es-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--radius-pill, 999px); font-family: var(--font-sans, Manrope, sans-serif); font-size: 15px; line-height: 1.2; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.es-btn--primary { background: var(--zielen, #20302B); color: var(--bez, #EEE2D8); }
.es-btn--primary:hover { background: var(--zielen-600, #2E4540); }
.es-btn--secondary { background: transparent; color: var(--zielen, #20302B); border-color: var(--linia-mocna, #7D847E); }
.es-btn--secondary:hover { border-color: var(--zielen, #20302B); background: var(--bez-jasny, #F7F1EB); }
.es-btn--light { background: var(--bez, #EEE2D8); color: var(--zielen, #20302B); }
.es-btn--light:hover { background: var(--bialy, #FFFFFF); }
.es-btn--outline-light { background: transparent; color: var(--bez, #EEE2D8); border-color: var(--roz, #BC9391); }
.es-btn--outline-light:hover { border-color: var(--bez, #EEE2D8); }
.es-btn--sm { min-height: 44px; padding: 0 20px; }
.es-btn--block { display: flex; width: 100%; }
.es-btn .es-ic { width: 20px; height: 20px; }

.es-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--zielen, #20302B); font-family: var(--font-sans, Manrope, sans-serif); font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--linia-mocna, #7D847E); transition: text-decoration-color .25s ease; }
.es-link:hover { text-decoration-color: currentColor; }
.es-link .es-ic { width: 18px; height: 18px; transition: transform .25s ease; }
.es-link:hover .es-ic--arrow { transform: translateX(4px); }
.es-link--quiet { font-weight: 600; font-size: 14px; }
.es-link--on-dark { color: var(--bez, #EEE2D8); text-decoration-color: var(--roz, #BC9391); }

.es-btn:focus-visible, .es-link:focus-visible, .es-area__list a:focus-visible, .es-price-row a:focus-visible { outline: 2px solid var(--fokus, #7A5452); outline-offset: 2px; }
.es-btn--light:focus-visible, .es-btn--outline-light:focus-visible, .es-link--on-dark:focus-visible { outline-color: var(--roz, #BC9391); }

/* ---------- Kapsuła i łuk (Capsule) ---------- */
/* Kapsuła sygnetu: 1271 × 1473, półkola u góry i u dołu, prosty bok 19% wysokości. */
.es-kapsula { position: relative; display: block; width: 100%; aspect-ratio: 1271 / 1473; border-radius: var(--kapsula-promien, 50% / 43.1%); overflow: hidden; background: var(--bez-ciemny, #E3D3C6); }
.es-luk { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius-luk, 999px 999px 0 0); overflow: hidden; background: var(--bez-ciemny, #E3D3C6); }
.es-kapsula > img, .es-luk > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Kapsuła z pierścieniem: druga, pusta kapsuła z linii 1 px przesunięta w bok (dwie osoby, dwa kształty — jak pierścienie z brandbooka).
   Jeden taki akcent na ekran. Pierścień wychodzi poza obrys zdjęcia, więc rodzic potrzebuje zapasu (space-5). */
.es-ring { position: relative; isolation: isolate; display: block; }
.es-ring::before { content: ""; position: absolute; inset: 0; z-index: -1; border: var(--linia-grubosc, 1px) solid var(--zielen, #20302B); border-radius: var(--kapsula-promien, 50% / 43.1%); transform: translate(var(--es-ring-x, 24px), var(--es-ring-y, -24px)); pointer-events: none; }
.es-ring--frame::before { inset: -12px; transform: none; }
/* Łuk z pierścieniem: ta sama przesunięta linia, ale w kształcie łuku (hero, szerokie zdjęcia); otwarta u dołu jak framuga. */
.es-ring--luk::before { bottom: var(--es-ring-y, -24px); border-radius: var(--radius-luk, 999px 999px 0 0); border-bottom: 0; } /* dół linii równo z dołem zdjęcia */
.es-ring--on-dark::before { border-color: var(--roz, #BC9391); }
.es-kapsula--line { background: transparent; border: var(--linia-grubosc, 1px) solid var(--linia-mocna, #7D847E); display: grid; place-items: center; }

/* ---------- Karta zabiegu (ServiceCard) ---------- */
/* Odpowiada w 3 sekundy: co to (nazwa + zdanie korzyści), ile trwa, ile kosztuje, jak się umówić.
   Kartą jest <article>; akcje to osobne linki (Umów, Szczegóły, Podaruj ten zabieg), nic nie jest zagnieżdżone. */
/* v2: karta bez pudełka. Zdjęcie w łuku, treść pod nim, a w siatce es-grid--linie kolumny rozdziela linia 1 px.
   Wariant es-service--box przywraca jasne pudełko (do sekcji na zieleni / w panelach). */
.es-service { container-type: inline-size; position: relative; display: flex; flex-direction: column; min-width: 0; background: transparent; border-radius: 0; color: var(--zielen, #20302B); }
.es-service__media { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radius-luk, 999px 999px 0 0); overflow: hidden; background: var(--bez-ciemny, #E3D3C6); }
.es-service__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.es-service:hover .es-service__media img { transform: scale(1.03); }
.es-service__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: var(--space-5, 24px) 0 0; }
.es-service--box { background: var(--bez-jasny, #F7F1EB); border-radius: var(--radius-m, 16px); }
.es-service--box .es-service__media { margin: var(--space-3, 12px) var(--space-3, 12px) 0; }
.es-service--box .es-service__body { padding: var(--space-5, 24px) var(--space-5, 24px) var(--space-3, 12px); }
.es-service__name { margin: 0; font-family: var(--font-display, Cormorant, Garamond, serif); font-size: 26px; line-height: 1.15; font-weight: 500; color: var(--zielen, #20302B); text-wrap: balance; }
.es-service__benefit { margin: var(--space-3, 12px) 0 0; font-size: 16px; line-height: 1.6; color: var(--szary, #5B5B5B); text-wrap: pretty; }
.es-service__foot { margin-top: auto; padding-top: var(--space-5, 24px); }
.es-service__deal { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px); padding-top: var(--space-4, 16px); border-top: var(--linia-grubosc, 1px) solid var(--linia, #20302B29); }
.es-service__facts { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; margin: 0; font-variant-numeric: tabular-nums; }
.es-service__time { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
.es-service__time .es-ic { width: 18px; height: 18px; align-self: center; }
.es-service__time .es-czas { align-self: center; }
.es-service__facts .es-star { color: var(--roz-ciemny, #7A5452); align-self: center; }
.es-service__price { font-size: 22px; line-height: 1.2; font-weight: 700; white-space: nowrap; }
.es-service__links { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--space-4, 16px); margin-top: var(--space-1, 4px); }
.es-service__links .es-link { font-size: 14px; font-weight: 600; }
/* Wąska karta (< 300 px): przycisk Umów pod ceną na całą szerokość. */
@container (max-width: 299px) {
  .es-service__deal { flex-direction: column; align-items: stretch; }
  .es-service__deal .es-btn { width: 100%; }
}
/* Szeroka karta (np. trzecia karta na tablecie na pełną szerokość): od 560 px szerokości zdjęcie w łuku z lewej (40%), treść z prawej. */
@container (min-width: 560px) {
  .es-service--wide .es-service__media { position: absolute; top: 0; bottom: 0; left: 0; width: calc(40% - var(--space-5, 24px)); margin: 0; aspect-ratio: auto; }
  .es-service--wide .es-service__body { margin-left: 40%; min-height: 300px; padding: var(--space-2, 8px) 0 0; }
  .es-service--wide.es-service--box .es-service__media { top: var(--space-3, 12px); bottom: var(--space-3, 12px); left: var(--space-3, 12px); width: calc(40% - var(--space-3, 12px)); }
  .es-service--wide.es-service--box .es-service__body { padding: var(--space-6, 32px) var(--space-6, 32px) var(--space-3, 12px); }
}
/* Biały kafel (es-service--card): zdjęcie w łuku z cienką linią (1 px, zielen) w kształcie tego samego łuku, przesuniętą
   w górę i w prawo – jak obrys es-ring przy zdjęciach zespołu. Linia biegnie za zdjęciem; prawa noga kończy się 30 px nad dołem
   zdjęcia poziomą kreską w lewo, która chowa się za zdjęciem (--kafel-kreska).
   Między zdjęciem a białym blokiem opisu 10 px. Blok opisu: górne rogi ostre, dolne 30 px.
   Układ: es-grid es-grid--3 bez linii między kaflami. Parametry: --es-ring-x / --es-ring-y (przesunięcie linii), --kafel-dol. */
.es-service--card { --es-ring-x: 24px; --es-ring-y: -24px; --kafel-kreska: 30px; --kafel-odstep: 10px; --kafel-dol: 30px; background: transparent; border-radius: 0; }
.es-service--card .es-service__media { position: relative; isolation: isolate; margin-top: calc(-1 * var(--es-ring-y)); overflow: visible; background: transparent; border-radius: 0; }
.es-service--card .es-service__media img { border-radius: var(--radius-luk, 999px 999px 0 0); }
.es-service--card .es-service__media::before { content: ""; position: absolute; inset: 0; bottom: calc(var(--kafel-kreska) + var(--es-ring-y)); z-index: -1; border: var(--linia-grubosc, 1px) solid var(--zielen, #20302B); border-radius: var(--radius-luk, 999px 999px 0 0); transform: translate(var(--es-ring-x), var(--es-ring-y)); pointer-events: none; }
.es-service--card .es-service__body { margin-top: var(--kafel-odstep); padding: var(--space-5, 24px) var(--space-5, 24px) var(--space-6, 32px); background: var(--bialy, #FFFFFF); border-radius: 0 0 var(--kafel-dol) var(--kafel-dol); }
.es-service--card .es-service__deal { border-top-color: var(--linia, #20302B29); }
@media (max-width: 640px) { .es-service--card { --es-ring-x: 12px; --es-ring-y: -12px; } } /* linia nie wychodzi poza margines 16 px */
@container (min-width: 560px) {
  .es-service--card.es-service--wide .es-service__media { position: absolute; overflow: hidden; border-radius: var(--radius-luk, 999px 999px 0 0); top: var(--space-4, 16px); bottom: var(--space-4, 16px); left: var(--space-4, 16px); width: calc(40% - var(--space-4, 16px)); margin: 0; z-index: 1; }
  .es-service--card.es-service--wide .es-service__media::before { content: none; }
  /* @container nie styluje samej karty (to ona jest kontenerem), więc białe tło całego kafla niesie blok opisu rozciągnięty pod zdjęcie */
  .es-service--card.es-service--wide .es-service__body { margin: 0; min-height: 320px; padding: var(--space-6, 32px) var(--space-6, 32px) var(--space-6, 32px) calc(40% + var(--space-6, 32px)); border-radius: 0 0 var(--kafel-dol) var(--kafel-dol); }
}
/* Bez zdjęcia: do cennika, list i panelu „Czego potrzebujesz?” na wąskich ekranach. */
.es-service--plain .es-service__body { padding-top: var(--space-2, 8px); }
.es-service--plain.es-service--box .es-service__body { padding-top: var(--space-6, 32px); }
.es-service--plain .es-service__name::before { content: ""; display: block; width: 12px; height: 14px; margin-bottom: var(--space-4, 16px); background-color: var(--roz-ciemny, #7A5452);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 0C13.2 7.2 16.2 12.6 24 14C16.2 15.4 13.2 20.8 12 28C10.8 20.8 7.8 15.4 0 14C7.8 12.6 10.8 7.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 0C13.2 7.2 16.2 12.6 24 14C16.2 15.4 13.2 20.8 12 28C10.8 20.8 7.8 15.4 0 14C7.8 12.6 10.8 7.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Wiersz listy: na stronie obszaru, jeden zabieg pod drugim, rozdzielone linią 1 px, bez tła. */
.es-service--row { background: transparent; border-radius: 0; border-bottom: var(--linia-grubosc, 1px) solid var(--linia, #20302B29); }
.es-service--row .es-service__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-7, 48px); align-items: center; padding: var(--space-5, 24px) 0; }
.es-service--row .es-service__text { grid-column: 1; }
.es-service--row .es-service__foot { grid-column: 2; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; }
.es-service--row .es-service__deal { border-top: 0; padding-top: 0; gap: var(--space-5, 24px); }
.es-service--row .es-service__links { justify-content: flex-end; }
.es-service--row .es-service__benefit { margin-top: var(--space-2, 8px); max-width: 52ch; }
@container (max-width: 639px) {
  .es-service--row .es-service__body { grid-template-columns: minmax(0, 1fr); }
  .es-service--row .es-service__foot { grid-column: 1; align-items: stretch; margin-top: var(--space-4, 16px); }
  .es-service--row .es-service__deal { justify-content: space-between; }
  .es-service--row .es-service__links { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .es-service__media img, .es-area__media img, .es-link .es-ic, .es-btn, .es-needs__opt { transition: none !important; }
  .es-service:hover .es-service__media img, .es-area:hover .es-area__media img { transform: none; }
}

/* Siatka kart: 3 kolumny na desktopie, 2 na tablecie, 1 na telefonie. */
/* Najwyżej 3 kolumny (tor = max(280 px, ⅓ szerokości)), 2 od ok. 600 px, 1 poniżej. */
.es-grid { --es-gap: var(--space-6, 32px); display: grid; grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 2 * var(--es-gap)) / 3)), 1fr)); gap: var(--es-gap); align-items: stretch; }
@media (max-width: 640px) { .es-grid { --es-gap: var(--space-5, 24px); grid-template-columns: minmax(0, 1fr); } }
/* Siatka z liniami (v2): kolumny rozdziela linia 1 px zamiast pudełek; odstęp wchodzi w padding komórek.
   Na jednej kolumnie (telefon) linia idzie między wierszami. Użycie: <div class="es-grid es-grid--linie es-grid--3">…</div>. */
.es-grid--linie { --es-gap: var(--space-7, 48px); column-gap: 0; row-gap: var(--space-7, 48px); }
.es-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* W siatce z liniami skrajne komórki mają padding z jednej strony, środkowa z dwóch — kolumny wyrównane tak, żeby treść (i zdjęcia) miały tę samą szerokość. */
.es-grid--linie.es-grid--3 { grid-template-columns: minmax(0, calc((100% - 2 * var(--es-gap)) / 3 + var(--es-gap) / 2)) minmax(0, calc((100% - 2 * var(--es-gap)) / 3 + var(--es-gap))) minmax(0, calc((100% - 2 * var(--es-gap)) / 3 + var(--es-gap) / 2)); }
.es-grid--linie > * { padding-inline: calc(var(--es-gap) / 2); border-left: var(--linia-grubosc, 1px) solid var(--linia, #20302B29); }
.es-grid--linie > *:first-child { padding-left: 0; border-left: 0; }
.es-grid--linie > *:last-child { padding-right: 0; }
@media (max-width: 1079px) {
  .es-grid--3, .es-grid--linie.es-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-grid--linie > *:nth-child(odd) { padding-left: 0; border-left: 0; }
  .es-grid--linie > *:nth-child(even) { padding-right: 0; }
}
@media (max-width: 640px) {
  .es-grid--3, .es-grid--linie.es-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .es-grid--linie { row-gap: 0; }
  .es-grid--linie > * { padding: var(--space-6, 32px) 0 0; border-left: 0; border-top: var(--linia-grubosc, 1px) solid var(--linia, #20302B29); margin-bottom: var(--space-6, 32px); }
  .es-grid--linie > *:first-child { padding-top: 0; border-top: 0; }
  .es-grid--linie > *:last-child { margin-bottom: 0; }
}

/* ---------- Obszar (AreaCard) ---------- */
.es-area { container-type: inline-size; display: block; height: 100%; min-width: 0; color: var(--zielen, #20302B); }
.es-area__inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--space-5, 24px); height: 100%; }
.es-area__media { width: 100%; max-width: 360px; }
.es-area__media img { transition: transform .6s ease; }
.es-area:hover .es-area__media img { transform: scale(1.03); }
.es-area__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.es-area__desc { margin: var(--space-3, 12px) 0 0; font-size: 16px; line-height: 1.6; color: var(--szary, #5B5B5B); max-width: 46ch; }
.es-area__list { margin-top: var(--space-4, 16px); width: 100%; }
.es-area__list > li { padding-left: 24px; }
.es-area__list > li::before { top: 16px; }
.es-area__list a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--zielen, #20302B); text-decoration: none; }
.es-area__list a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.es-area__more { margin-top: auto; padding-top: var(--space-3, 12px); }
@container (max-width: 479px) { .es-area__media { max-width: 260px; } }
@container (min-width: 620px) {
  .es-area__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; gap: var(--space-7, 48px); align-items: center; height: auto; }
  .es-area__more { margin-top: var(--space-3, 12px); padding-top: 0; }
  .es-area__media { max-width: none; }
}

/* ---------- Wybór potrzeby (NeedPicker) ---------- */
/* Bez JS: radio + :checked. Kolejność w kodzie: wszystkie <input> (do 8), potem .es-needs__options z <label>,
   potem .es-needs__panels z panelami w tej samej kolejności. */
.es-needs { margin: 0; padding: 0; border: 0; min-width: 0; }
.es-needs__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
/* v2: potrzeby jako spis w Cormorant (jak karta zabiegów w gabinecie), nie pigułki. Wybrana pozycja: gwiazdka przed
   nazwą + kursywa + roz-ciemny (stan nie tylko kolorem). Całość stoi na linii 1 px. Wariant es-needs--pills przywraca pigułki. */
.es-needs__options { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-6, 32px); row-gap: var(--space-1, 4px); padding-bottom: var(--space-4, 16px); border-bottom: var(--linia-grubosc, 1px) solid var(--linia, #20302B29); }
.es-needs__opt { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0; border: 0; border-radius: 2px; background: transparent; font-family: var(--font-display, Cormorant, Garamond, serif); font-size: 26px; line-height: 1.1; font-weight: 500; color: var(--zielen, #20302B); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: color .25s ease; }
.es-needs__opt:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--linia-mocna, #7D847E); }
.es-needs__opt .es-ic { display: none; width: 18px; height: 18px; stroke-width: 2; margin-left: -4px; }
.es-needs__opt .es-star { display: none; --es-star-w: 12px; color: var(--roz-ciemny, #7A5452); }
.es-needs--pills .es-needs__options { gap: var(--space-3, 12px); padding-bottom: 0; border-bottom: 0; }
.es-needs--pills .es-needs__opt { min-height: 52px; padding: 0 24px; border: var(--linia-grubosc, 1px) solid var(--linia-mocna, #7D847E); border-radius: var(--radius-pill, 999px); font-family: var(--font-sans, Manrope, sans-serif); font-size: 15px; line-height: 1.2; font-weight: 600; transition: background-color .25s ease, border-color .25s ease; }
.es-needs--pills .es-needs__opt:hover { text-decoration: none; background: var(--bez-jasny, #F7F1EB); border-color: var(--zielen, #20302B); }
.es-needs__panels { margin-top: var(--space-7, 48px); }
.es-needs__panel { display: none; }
.es-needs__input:nth-of-type(1):checked ~ .es-needs__options .es-needs__opt:nth-child(1),
.es-needs__input:nth-of-type(2):checked ~ .es-needs__options .es-needs__opt:nth-child(2),
.es-needs__input:nth-of-type(3):checked ~ .es-needs__options .es-needs__opt:nth-child(3),
.es-needs__input:nth-of-type(4):checked ~ .es-needs__options .es-needs__opt:nth-child(4),
.es-needs__input:nth-of-type(5):checked ~ .es-needs__options .es-needs__opt:nth-child(5),
.es-needs__input:nth-of-type(6):checked ~ .es-needs__options .es-needs__opt:nth-child(6),
.es-needs__input:nth-of-type(7):checked ~ .es-needs__options .es-needs__opt:nth-child(7),
.es-needs__input:nth-of-type(8):checked ~ .es-needs__options .es-needs__opt:nth-child(8) { font-style: italic; color: var(--roz-ciemny, #7A5452); text-decoration: none; }
.es-needs--pills .es-needs__input:nth-of-type(1):checked ~ .es-needs__options .es-needs__opt:nth-child(1),
.es-needs--pills .es-needs__input:nth-of-type(2):checked ~ .es-needs__options .es-needs__opt:nth-child(2),
.es-needs--pills .es-needs__input:nth-of-type(3):checked ~ .es-needs__options .es-needs__opt:nth-child(3),
.es-needs--pills .es-needs__input:nth-of-type(4):checked ~ .es-needs__options .es-needs__opt:nth-child(4),
.es-needs--pills .es-needs__input:nth-of-type(5):checked ~ .es-needs__options .es-needs__opt:nth-child(5),
.es-needs--pills .es-needs__input:nth-of-type(6):checked ~ .es-needs__options .es-needs__opt:nth-child(6),
.es-needs--pills .es-needs__input:nth-of-type(7):checked ~ .es-needs__options .es-needs__opt:nth-child(7),
.es-needs--pills .es-needs__input:nth-of-type(8):checked ~ .es-needs__options .es-needs__opt:nth-child(8) { font-style: normal; color: var(--zielen, #20302B); background: var(--bez-ciemny, #E3D3C6); border-color: var(--zielen, #20302B); }
.es-needs__input:nth-of-type(1):checked ~ .es-needs__options .es-needs__opt:nth-child(1) .es-ic,
.es-needs__input:nth-of-type(2):checked ~ .es-needs__options .es-needs__opt:nth-child(2) .es-ic,
.es-needs__input:nth-of-type(3):checked ~ .es-needs__options .es-needs__opt:nth-child(3) .es-ic,
.es-needs__input:nth-of-type(4):checked ~ .es-needs__options .es-needs__opt:nth-child(4) .es-ic,
.es-needs__input:nth-of-type(5):checked ~ .es-needs__options .es-needs__opt:nth-child(5) .es-ic,
.es-needs__input:nth-of-type(6):checked ~ .es-needs__options .es-needs__opt:nth-child(6) .es-ic,
.es-needs__input:nth-of-type(7):checked ~ .es-needs__options .es-needs__opt:nth-child(7) .es-ic,
.es-needs__input:nth-of-type(8):checked ~ .es-needs__options .es-needs__opt:nth-child(8) .es-ic,
.es-needs__input:nth-of-type(1):checked ~ .es-needs__options .es-needs__opt:nth-child(1) .es-star,
.es-needs__input:nth-of-type(2):checked ~ .es-needs__options .es-needs__opt:nth-child(2) .es-star,
.es-needs__input:nth-of-type(3):checked ~ .es-needs__options .es-needs__opt:nth-child(3) .es-star,
.es-needs__input:nth-of-type(4):checked ~ .es-needs__options .es-needs__opt:nth-child(4) .es-star,
.es-needs__input:nth-of-type(5):checked ~ .es-needs__options .es-needs__opt:nth-child(5) .es-star,
.es-needs__input:nth-of-type(6):checked ~ .es-needs__options .es-needs__opt:nth-child(6) .es-star,
.es-needs__input:nth-of-type(7):checked ~ .es-needs__options .es-needs__opt:nth-child(7) .es-star,
.es-needs__input:nth-of-type(8):checked ~ .es-needs__options .es-needs__opt:nth-child(8) .es-star { display: inline-block; }
.es-needs__input:nth-of-type(1):focus-visible ~ .es-needs__options .es-needs__opt:nth-child(1),
.es-needs__input:nth-of-type(2):focus-visible ~ .es-needs__options .es-needs__opt:nth-child(2),
.es-needs__input:nth-of-type(3):focus-visible ~ .es-needs__options .es-needs__opt:nth-child(3),
.es-needs__input:nth-of-type(4):focus-visible ~ .es-needs__options .es-needs__opt:nth-child(4),
.es-needs__input:nth-of-type(5):focus-visible ~ .es-needs__options .es-needs__opt:nth-child(5),
.es-needs__input:nth-of-type(6):focus-visible ~ .es-needs__options .es-needs__opt:nth-child(6),
.es-needs__input:nth-of-type(7):focus-visible ~ .es-needs__options .es-needs__opt:nth-child(7),
.es-needs__input:nth-of-type(8):focus-visible ~ .es-needs__options .es-needs__opt:nth-child(8) { outline: 2px solid var(--fokus, #7A5452); outline-offset: 2px; }
.es-needs__input:nth-of-type(1):checked ~ .es-needs__panels > .es-needs__panel:nth-child(1),
.es-needs__input:nth-of-type(2):checked ~ .es-needs__panels > .es-needs__panel:nth-child(2),
.es-needs__input:nth-of-type(3):checked ~ .es-needs__panels > .es-needs__panel:nth-child(3),
.es-needs__input:nth-of-type(4):checked ~ .es-needs__panels > .es-needs__panel:nth-child(4),
.es-needs__input:nth-of-type(5):checked ~ .es-needs__panels > .es-needs__panel:nth-child(5),
.es-needs__input:nth-of-type(6):checked ~ .es-needs__panels > .es-needs__panel:nth-child(6),
.es-needs__input:nth-of-type(7):checked ~ .es-needs__panels > .es-needs__panel:nth-child(7),
.es-needs__input:nth-of-type(8):checked ~ .es-needs__panels > .es-needs__panel:nth-child(8) { display: block; }
@media (max-width: 640px) {
  .es-needs__options { column-gap: var(--space-5, 24px); row-gap: 0; }
  .es-needs__opt { min-height: 44px; font-size: 24px; }
  .es-needs--pills .es-needs__options { gap: var(--space-2, 8px); }
  .es-needs--pills .es-needs__opt { min-height: 48px; padding: 0 18px; font-size: 15px; }
  .es-needs__panels { margin-top: var(--space-6, 32px); }
}

/* ---------- Osoba (PersonCard) ---------- */
.es-person { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; color: var(--zielen, #20302B); }
.es-person__photo { width: 100%; max-width: 320px; margin-bottom: var(--space-5, 24px); }
.es-person__role { margin: var(--space-2, 8px) 0 0; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--roz-ciemny, #7A5452); }
.es-person__bio { margin: var(--space-3, 12px) 0 0; font-size: 16px; line-height: 1.65; color: var(--zielen, #20302B); max-width: 42ch; text-wrap: pretty; }
.es-person--soon .es-kapsula--line .es-star { --es-star-w: 24px; color: var(--roz-ciemny, #7A5452); }
.es-person--soon .es-person__bio { color: var(--szary, #5B5B5B); }
@media (max-width: 640px) {
  .es-person--soon { flex-direction: row; align-items: center; gap: var(--space-5, 24px); }
  .es-person--soon .es-person__photo { width: 96px; flex: none; margin: 0; }
  .es-person--soon .es-kapsula--line .es-star { --es-star-w: 14px; }
  .es-person--soon .es-person__bio { margin: 0; }
}

/* ---------- Opinie (Testimonial) ---------- */
/* v2: bez pudełka i bez cudzysłowu „99”. Cytat w Cormorant (głos klientki), ocena gwiazdkami marki nad cytatem,
   podpis w Manrope. Opinie w kolumnie rozdziela linia 1 px (es-quote + es-quote). Wariant es-quote--box = jasne pudełko. */
.es-quote { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; background: transparent; border-radius: 0; color: var(--zielen, #20302B); min-width: 0; }
.es-quote + .es-quote { margin-top: var(--space-6, 32px); padding-top: var(--space-6, 32px); border-top: var(--linia-grubosc, 1px) solid var(--linia, #20302B29); }
.es-quote__text { margin: 0; font-family: var(--font-display, Cormorant, Garamond, serif); font-size: 24px; line-height: 1.3; font-weight: 500; text-wrap: pretty; }
.es-quote__text p { margin: 0; }
.es-quote__text p + p { margin-top: var(--space-3, 12px); }
.es-quote__author { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--space-4, 16px); font-family: var(--font-sans, Manrope, sans-serif); }
.es-quote__name { font-size: 15px; line-height: 1.5; font-weight: 700; }
.es-quote__stars { display: inline-flex; align-items: center; gap: 3px; margin: 0 0 var(--space-3, 12px); color: var(--roz-ciemny, #7A5452); }
.es-quote__stars .es-ic { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.es-quote__stars .es-star { --es-star-w: 11px; }
.es-quote__src { font-size: 14px; line-height: 1.5; color: var(--szary, #5B5B5B); }
.es-quote--feature .es-quote__text { font-size: 40px; line-height: 1.12; text-wrap: balance; }
.es-quote--feature .es-quote__text p + p { font-size: 24px; line-height: 1.3; margin-top: var(--space-5, 24px); }
.es-quote--feature .es-quote__stars .es-star { --es-star-w: 14px; }
.es-quote--box { padding: var(--space-6, 32px); background: var(--bez-jasny, #F7F1EB); border-radius: var(--radius-m, 16px); }
.es-quote--box + .es-quote--box { margin-top: var(--space-5, 24px); padding-top: var(--space-6, 32px); border-top: 0; }
@media (max-width: 640px) {
  .es-quote__text { font-size: 22px; }
  .es-quote--feature .es-quote__text { font-size: 30px; }
  .es-quote--feature .es-quote__text p + p { font-size: 22px; }
  .es-quote--box { padding: var(--space-5, 24px); }
}
.es-rating { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3, 12px); row-gap: 4px; margin: 0; color: var(--zielen, #20302B); font-variant-numeric: tabular-nums; }
.es-rating__score { font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -0.01em; }
.es-rating__stars { display: inline-flex; align-items: center; gap: 3px; color: var(--roz-ciemny, #7A5452); }
.es-rating__stars .es-ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.es-rating__stars .es-star { --es-star-w: 14px; }
.es-rating--on-dark { color: var(--bez, #EEE2D8); }
.es-rating--on-dark .es-rating__stars, .es-rating--on-dark .es-rating__text .es-star { color: var(--roz, #BC9391); }
.es-rating__text { display: inline-flex; align-items: center; gap: var(--space-2, 8px); font-size: 15px; line-height: 1.4; font-weight: 600; }
.es-rating__text .es-star { color: var(--roz-ciemny, #7A5452); }
.es-rating--inline .es-rating__score { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.es-rating--inline { column-gap: var(--space-2, 8px); }
.es-rating--inline .es-rating__stars .es-ic { width: 16px; height: 16px; }
.es-rating--inline .es-rating__stars .es-star { --es-star-w: 11px; }

/* ---------- Voucher (VoucherCard) i kroki ---------- */
/* Voucher w barwach marki: biel (tło vouchera z tokenów), logotyp zielony, pas różu z zielonym sygnetem (brandbook s. 12).
   Proporcja koperty DL (99 × 210 mm ≈ 1 : 2,12) skrócona do 1 : 1,7, żeby czytać kwotę z daleka. */
.es-voucher { container-type: inline-size; margin: 0; width: 100%; max-width: 560px; }
.es-voucher__card { display: grid; grid-template-columns: minmax(0, 1fr) 30%; aspect-ratio: 1.7 / 1; background: var(--bialy, #FFFFFF); border-radius: var(--radius-m, 16px); overflow: hidden; color: var(--zielen, #20302B); }
.es-voucher__main { display: flex; flex-direction: column; min-width: 0; padding: 7cqi 0 6cqi 7cqi; }
.es-voucher__logo { display: block; width: 46cqi; max-width: 220px; height: auto; }
.es-voucher__label { margin: auto 0 0; font-size: max(10px, 2.2cqi); line-height: 1.3; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--zielen, #20302B); display: inline-flex; align-items: center; gap: 1.6cqi; }
.es-voucher__label .es-star { --es-star-w: max(8px, 1.8cqi); color: var(--roz-ciemny, #7A5452); }
.es-voucher__amount { margin: 1.2cqi 0 0; font-size: 11cqi; line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.es-voucher__amount small { font-size: 0.5em; font-weight: 600; letter-spacing: 0; margin-left: 0.15em; }
.es-voucher__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqi; margin: 5cqi 0 0; padding-right: 5cqi; }
.es-voucher__fields div { min-width: 0; padding-bottom: 1.8cqi; border-bottom: var(--linia-grubosc, 1px) solid var(--szary-linia, #DBDBDB); }
.es-voucher__fields dt { font-size: max(11px, 2.3cqi); line-height: 1.3; font-weight: 600; color: var(--szary, #5B5B5B); }
.es-voucher__fields dd { margin: 0; min-height: 1.2em; }
.es-voucher__side { position: relative; display: grid; place-items: center; background: var(--roz, #BC9391); }
.es-voucher__side img { display: block; width: 48%; height: auto; }
.es-voucher__caption { margin-top: var(--space-3, 12px); font-size: 14px; line-height: 1.5; color: inherit; opacity: 1; }

.es-steps { list-style: none; margin: 0; padding: 0; counter-reset: es-step; color: var(--bez, #EEE2D8); }
.es-steps > li { counter-increment: es-step; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-4, 16px); align-items: start; padding: var(--space-5, 24px) 0; border-top: var(--linia-grubosc, 1px) solid var(--linia-na-zieleni, #EEE2D847); font-size: 16px; line-height: 1.6; }
.es-steps > li:last-child { border-bottom: var(--linia-grubosc, 1px) solid var(--linia-na-zieleni, #EEE2D847); }
.es-steps > li::before { content: counter(es-step); display: grid; place-items: center; width: 38px; aspect-ratio: 1271 / 1473; border: var(--linia-grubosc, 1px) solid var(--roz, #BC9391); border-radius: var(--kapsula-promien, 50% / 43.1%); font-family: var(--font-display, Cormorant, Garamond, serif); font-size: 24px; line-height: 1; font-weight: 600; font-variant-numeric: lining-nums; color: var(--roz, #BC9391); margin-top: -6px; }
.es-steps strong { display: block; font-weight: 700; }
.es-steps--on-light { color: var(--zielen, #20302B); }
.es-steps--on-light > li { border-color: var(--linia, #20302B29); }
.es-steps--on-light > li:last-child { border-color: var(--linia, #20302B29); }
.es-steps--on-light > li::before { color: var(--roz-ciemny, #7A5452); border-color: var(--roz-ciemny, #7A5452); }

/* ---------- Wiersz cennika (PriceRow) ---------- */
.es-price-list { container-type: inline-size; list-style: none; margin: 0; padding: 0; border-top: var(--linia-grubosc, 1px) solid var(--linia, #20302B29); }
.es-price-row { display: grid; grid-template-columns: minmax(0, 1fr) 128px 96px auto; align-items: center; column-gap: var(--space-5, 24px); padding: var(--space-4, 16px) 0; border-bottom: var(--linia-grubosc, 1px) solid var(--linia, #20302B29); color: var(--zielen, #20302B); }
.es-price-row__name { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 700; }
.es-price-row__note { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--szary, #5B5B5B); }
.es-price-row__time { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--szary, #5B5B5B); font-variant-numeric: tabular-nums; white-space: nowrap; }
.es-price-row__time .es-ic { width: 18px; height: 18px; }
.es-price-row__price { font-size: 18px; line-height: 1.3; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.es-price-row .es-btn--secondary:hover { background: var(--zielen, #20302B); color: var(--bez, #EEE2D8); border-color: var(--zielen, #20302B); }
@container (max-width: 599px) {
  .es-price-row { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: var(--space-2, 8px); column-gap: var(--space-4, 16px); }
  .es-price-row__name { grid-column: 1 / -1; }
  .es-price-row__time { grid-column: 1; }
  .es-price-row__price { grid-column: 2; }
  .es-price-row .es-btn { grid-column: 3; }
}

/* ---------- Pierścienie (Rings) ---------- */
/* Dwa przecinające się okręgi 1,5 px wychodzące poza kadr (brandbook s. 1 i 4). Tylko na pełnej sekcji
   zieleni (pierścienie w różu) albo różu (pierścienie w zieleni). Najwyżej dwa razy na stronie. */
.es-rings { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; color: var(--roz, #BC9391); --es-rings: 560px; }
.es-rings::before, .es-rings::after { content: ""; position: absolute; border: var(--pierscien-grubosc, 1.5px) solid currentColor; border-radius: 50%; }
.es-rings::before { width: var(--es-rings); height: var(--es-rings); }
.es-rings::after { width: calc(var(--es-rings) * 1.22); height: calc(var(--es-rings) * 1.22); }
.es-rings--bl::before { left: calc(var(--es-rings) * -0.5); bottom: calc(var(--es-rings) * -0.22); }
.es-rings--bl::after { left: calc(var(--es-rings) * -0.12); bottom: calc(var(--es-rings) * -0.86); }
.es-rings--tr::before { right: calc(var(--es-rings) * -0.42); top: calc(var(--es-rings) * -0.55); }
.es-rings--tr::after { right: calc(var(--es-rings) * -0.92); top: calc(var(--es-rings) * -0.12); }
.es-rings--on-roz { color: var(--zielen, #20302B); }
.es-rings-host { position: relative; isolation: isolate; overflow: hidden; overflow: clip; } /* clip zamiast hidden: przycina pierścienie, ale nie psuje position: sticky w środku */
.es-rings-host > :not(.es-rings) { position: relative; z-index: 1; }
@media (max-width: 640px) { .es-rings { --es-rings: 260px; } }

/* ---------- Dolny pasek na telefonie (BookingBar) ---------- */
.es-bookbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: var(--space-2, 8px); padding: 10px var(--space-4, 16px) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bez-jasny, #F7F1EB); border-top: var(--linia-grubosc, 1px) solid var(--linia, #20302B29); box-shadow: var(--shadow-pasek, 0 -18px 40px -24px rgba(32, 48, 43, 0.35)); }
.es-bookbar .es-btn { min-height: 48px; padding: 0 16px; }
.es-bookbar--inline { position: static; }
@media (min-width: 768px) { .es-bookbar:not(.es-bookbar--inline) { display: none; } }