/* ============================================================
   Reha Beauty — strona główna
   Paleta zamknięta: tła wyłącznie biel i cieliste beże, tekst
   wyłącznie czerń albo brąz. Żadnych innych barw — audyt kolorów
   w CSS ma zwracać tylko te wartości.
   Krój: Onest (SIL OFL) w czterech grubościach, podzbiory latin
   i latin-ext — polskie znaki wchodzą z drugiego pliku.
   ============================================================ */

@font-face{font-family:Onest;src:url(../assets/fonts/onest-400-lat.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;src:url(../assets/fonts/onest-400-ext.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Onest;src:url(../assets/fonts/onest-500-lat.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;src:url(../assets/fonts/onest-500-ext.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Onest;src:url(../assets/fonts/onest-600-lat.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;src:url(../assets/fonts/onest-600-ext.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Onest;src:url(../assets/fonts/onest-700-lat.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;src:url(../assets/fonts/onest-700-ext.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --biel:#fff;
  --ciel-1:#fcfaf7;   /* ciepła biel — tło strony */
  --ciel-2:#f4f0e9;   /* piaskowy — co druga sekcja */
  --ciel-3:#e6ded1;   /* linie i ramki */
  --ciel-4:#d9cebd;   /* mocniejszy piaskowy — stopka, zamknięcie */
  --ciel-5:#cabaa4;   /* najmocniejszy piaskowy */
  --akc:#584434;      /* brąz — nadtytuły, ceny, odnośniki (8,4:1) */
  --akc-2:#cfc2ae;    /* piaskowy ozdobny — kreski, numery */
  --ink:#221e1b;      /* czerń tekstu — 15,8:1 na tle strony */
  --ink-2:#554e46;    /* tekst drugoplanowy — 7,6:1 */
  --wrap:1560px; --gut:clamp(20px,3.4vw,52px);
  --pad-k:var(--s4);   /* wcięcie kolumn stopki */
  --ease:cubic-bezier(.22,.61,.36,1);
  --rzad-h:140px; --rzad-h-mal:108px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* ── WEJŚCIE TREŚCI ─────────────────────────────────────────
   Jeden ruch na całą stronę: treść wchodzi z lekkim uniesieniem,
   zdjęcia dodatkowo osiadają ze zbliżenia. Bez kurtyn, masek
   i przycinania — te czyta się jak szablon, a nie jak strona.
   Zdjęcia dryfują w kadrze wolniej niż strona; to jedyny ruch
   ciągły, reszta zdarza się raz.                                */
.js .rv img{scale:1.03;transition:scale .95s var(--ease);transition-delay:var(--zw,0s)}
.js .rv.on img{scale:1}

/* Dryf na własnej właściwości, żeby nie wchodził w drogę zbliżeniu. */
.fil__f img,.onas__f img,.loc__f img,.dl__f img{translate:0 var(--pl,0px)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--ciel-1);color:var(--ink);
  font-family:Onest,"Onest zapas",system-ui,sans-serif;font-weight:400;font-size:var(--t4);line-height:var(--lh3);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

.w{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:21px;height:21px;flex:none;stroke-width:1.5}
.tylko-cr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--biel);
  padding:14px 22px;font-weight:600}
.skip:focus{left:0}

/* Nagłówki: Onest w grubości 600, ciasny odstęp międzyliterowy. */
.xl,.lg,h1,h2,h3{font-weight:600;color:var(--ink);margin:0;text-wrap:balance}
/* Ostatni wiersz akapitu nie zostaje z jednym słowem — w polszczyźnie
   z długimi wyrazami widać to co drugi akapit. */
p,li,dd,figcaption{text-wrap:pretty}
.xl{font-size:var(--t8);letter-spacing:var(--ls-t);line-height:var(--lh1);text-wrap:balance}
.lg{font-size:var(--t7);letter-spacing:var(--ls-t);line-height:var(--lh1);text-wrap:balance}
h3{letter-spacing:var(--ls-t)}
.nadtytul{font-weight:600;font-size:var(--t1);letter-spacing:var(--ls-x);text-transform:uppercase;
  color:var(--akc);margin:0 0 18px}

/* Pierścień z prześwitem: biała przerwa oddziela go od elementu, więc
   jest widoczny i na jasnym, i na ciemnym tle. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--akc);outline-offset:4px;
  box-shadow:0 0 0 2px var(--biel)}
::selection{background:var(--ciel-4);color:var(--ink)}

/* ── DWA WZORCE KLIKALNE ─────────────────────────────────────
   1. .lnk — odnośnik tekstowy z podkreśleniem i strzałką
   2. przycisk konturowy — przełączniki, filtry, rozwijanie
   Wszystko inne jest wariantem rozmiaru jednego z tych dwóch.
   Strzałka ukośna oznacza wyjście na inną stronę, prosta — ruch
   w obrębie tej. Wciśnięcie zawsze daje ten sam skok o piksel. */
.lnk,.fil__w,.karta__w,
.cen__tryb button,.cen__f button,.cen__wiecej{
  font-family:Onest,"Onest zapas",system-ui,sans-serif;font-weight:600;cursor:pointer}
.lnk:active,.fil__w:active,.karta__w:active,
.cen__tryb button:active,.cen__f button:active,.cen__wiecej:active,
.spis a:active,.okruch a:active{transform:translateY(1px)}

/* Ujawnianie przy przewijaniu. Stan ukryty wchodzi TYLKO przy działającym
   JavaScripcie — inaczej awaria skryptu oznaczałaby pustą stronę. */
.js .rv{opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--zw,0s)}
.js .rv.on{opacity:1;transform:none}

/* ── NAGŁÓWEK ────────────────────────────────────────────────
   Jeden rząd: znak, numer ujęcia, menu w wersalikach, po prawej
   prezent i koszyk. Komplet pozycji jak na produkcyjnym
   obecnego serwisu — „Galeria" siedzi w podmenu „O nas".     */
/* Na starcie nagłówek jest przezroczysty i leży na hero. Kolor bierze
   dopiero po przewinięciu — próg 36 px, ten sam co zwężenie rzędu. */
.top{position:fixed;top:0;left:0;right:0;z-index:100;color:var(--ink);background:transparent;
  transition:box-shadow .4s var(--ease),background .4s var(--ease),color .3s var(--ease)}
.top.przewiniety{background:var(--biel);
  box-shadow:0 14px 34px -26px rgba(34,30,27,.4),0 1px 0 var(--linia)}
/* Nagłówek chodzi po tej samej siatce co sekcje — logo startuje
   dokładnie tam, gdzie tytuły sekcji i pierwsza kolumna stopki. */
.top__in{display:flex;align-items:center;gap:var(--s3);height:var(--rzad-h);
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  transition:height .4s var(--ease)}
.top.przewiniety .top__in{height:var(--rzad-h-mal)}

.znak{display:flex;align-items:center;flex:none}
/* Proporcja podana wprost: <svg> bez atrybutów width/height przyjmuje
   domyślne 300×150 i rozpycha nagłówek, wypychając hamburger poza ekran. */
.znak__l{height:96px;width:auto;aspect-ratio:74/86.137;color:var(--ink);transition:height .4s var(--ease)}
.top.przewiniety .znak__l{height:68px}

.menu{margin-inline:auto}
/* Odstęp między pozycjami rośnie razem z oknem. Stałe 12 px przy wersalikach
   z rozstrzeleniem sprawiało, że „Odmładzanie twarzy" i „Modelowanie sylwetki"
   czytało się jak jeden ciąg — rozstrzelenie wewnątrz wyrazu było niemal
   równe przerwie między pozycjami. */
.menu__l{display:flex;align-items:center;gap:clamp(16px,2.1vw,40px);
  list-style:none;margin:0;padding:0}
.menu__l>li{position:relative;display:flex;align-items:center}
.menu__l a{display:inline-flex;align-items:center;min-height:var(--cel);white-space:nowrap;
  font-size:var(--t1);font-weight:500;letter-spacing:var(--ls-w);text-transform:uppercase;
  transition:color .18s var(--ease)}
.menu__l a[aria-current=page]{font-weight:600;box-shadow:inset 0 -1px 0 var(--ink)}
/* „O nas" schodzi z paska na desktopie — sześć pozycji plus koszyk plus para
   serwisów nie mieściło się i przy 1440 px ostatni przycisk wypadał poza kadr.
   Strona zostaje w panelu mobilnym, w stopce i w dwóch odnośnikach na głównej. */
@media(min-width:1400px){
  .menu__l>li.tylko-panel{display:none}
}


.menu__stopka{display:none}

.top__z{display:flex;align-items:center;gap:var(--s2);flex:none}
/* Prawa grupa jest wyraźnie większa od menu — to inny rejestr:
   zakupy, nie nawigacja po ofercie. */
.top__l{display:inline-flex;align-items:center;gap:11px;min-height:var(--cel);white-space:nowrap;
  font-size:var(--t2);font-weight:600;letter-spacing:var(--ls-w);text-transform:uppercase;
  transition:color .18s var(--ease)}
.top__l .ic{width:21px;height:21px}
.top__n{color:var(--ink-2);letter-spacing:var(--ls-w);margin-left:7px;font-weight:500}
.top__sp{width:1px;height:26px;background:var(--ciel-4)}

.burger{display:none;align-items:center;justify-content:center;width:46px;height:46px;flex:none;
  background:none;border:0;color:inherit;cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(34,30,27,.2)}
.burger .ic{width:26px;height:26px}
.burger__x{display:none}
.burger[aria-expanded=true] .burger__o{display:none}
.burger[aria-expanded=true] .burger__x{display:block}

/* Powyżej 1540 px rząd ma zapas, więc menu i grupa zakupowa idą o stopień
   w górę. Niżej zostają mniejsze — inaczej „Koszyk" wychodzi poza kadr. */
@media(min-width:1541px){
  .menu__l a{font-size:var(--t1)}
    .top__l{font-size:var(--t2)}
  .top__l .ic{width:23px;height:23px}
  .menu__l{gap:var(--s3)}
}

/* Nad ciemnym wideo w hero nagłówek musi być biały, bo tło pod nim
   jest ciemne dopóki nikt nie przewinie. Po przewinięciu wraca czerń
   na piaskowym. */
@media(max-width:1024px){
  /* Nad ciemnym wideo cały nagłówek jest biały, po przewinięciu wraca
     czerń — pas jest wtedy piaskowy i biel by na nim zginęła. */
  .top:not(.przewiniety){color:var(--biel)}
  .top:not(.przewiniety) .znak__l{color:var(--biel)}
  .top:not(.przewiniety) .burger{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
  .top:not(.przewiniety) .top__sp{background:rgba(255,255,255,.55)}
  .top:not(.przewiniety) .top__n{color:rgba(255,255,255,.75)}

  /* Panel menu jest jasny, a leży pod nagłówkiem i dziedziczy jego kolor.
     Przy otwartym menu cała zawartość musi więc wrócić na czerń — inaczej
     biały znak, ikony i pozycje znikają na kremowym tle. */
  body.menu-otwarte .top,
  body.menu-otwarte .top:not(.przewiniety){color:var(--ink)}
  body.menu-otwarte .top:not(.przewiniety) .znak__l{color:var(--ink)}
  body.menu-otwarte .top:not(.przewiniety) .burger{box-shadow:inset 0 0 0 1.5px rgba(34,30,27,.22)}
  body.menu-otwarte .top:not(.przewiniety) .top__sp{background:rgba(34,30,27,.22)}
  body.menu-otwarte .top:not(.przewiniety) .top__n{color:var(--ink-2)}
  .menu{color:var(--ink)}
  .menu__stopka a{color:var(--ink)}
}

/* Menu na wąskim ekranie: panel na pełną wysokość.
   Próg 1400 px — zmierzony: przy 1360 px grupa zakupowa wystawała o 18 px.
   Powyżej 1400 rząd ma zapas. */
/* Przy 1440 px na sześć pozycji menu zostaje 938 px, a same napisy zajmują
   907 — odstępów nie ma z czego zwiększyć. Etykieta „Kup prezent" schodzi
   wtedy do samej ikony i oddaje około 110 px; nazwa zostaje dla czytnika
   ekranu, więc nic nie ginie. Powyżej 1560 px miejsca starcza na obie. */
@media(min-width:1400px) and (max-width:1559px){
  .top__z .top__l:first-child .top__e{position:absolute;width:1px;height:1px;
    margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
    white-space:nowrap;border:0}
  .top__z .top__l:first-child{gap:0}
}

@media(max-width:1399px){
  .burger{display:inline-flex}
  /* Panel przykrywa cały ekran razem z tłem nagłówka, więc znak i przyciski
     muszą stać wyżej w stosie — inaczej zniknęłyby pod nim. */
  .znak,.top__z,.burger{position:relative;z-index:2}
  .top__z{margin-left:auto}
  .menu{position:fixed;inset:0;margin:0;background:var(--ciel-1);z-index:0;
    padding:calc(var(--rzad-h) + 24px) var(--gut) 40px;
    overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
  .menu.otwarte{opacity:1;visibility:visible;transform:none}
  .menu__l{flex-direction:column;align-items:stretch;gap:0}
  .menu__l>li{flex-wrap:wrap;border-bottom:1px solid var(--linia)}
  .menu__l>li:first-child{border-top:1px solid var(--linia)}
  .menu__l>li>a{flex:1;min-height:62px;font-size:var(--t2)}
        .menu__stopka{display:block;margin-top:34px;padding-top:28px;
    border-top:1px solid var(--linia);font-size:var(--t3)}
  .menu__stopka a{display:flex;align-items:center;gap:14px;min-height:54px;color:var(--ink);font-size:var(--t3)}
  .menu__stopka a .ic{color:var(--akc)}
  .menu__stopka p{margin:16px 0 0;color:var(--ink-2);font-size:var(--t3);line-height:var(--lh3)}
  body.menu-otwarte{overflow:hidden}
}
@media(max-width:760px){
  .top__e{display:none}                      /* na wąskim ekranie zostają same ikony */
  .top__l{gap:0;min-width:44px;justify-content:center}
  .top__n{margin-left:5px;font-size:var(--t1)}
  .znak__l{height:76px}
  .top.przewiniety .znak__l{height:54px}
  .top__in{height:100px;gap:10px}
  .top.przewiniety .top__in{height:82px}
  .menu{padding-top:calc(100px + 20px)}
}

/* ── HERO ───────────────────────────────────────────────────
   Lewa kolumna z treścią, po prawej zdjęcie przycięte łukiem.
   Kształt łuku siedzi w <clipPath> w dokumencie, w jednostkach
   pudełka, więc skaluje się razem z panelem.                   */
/* Hero nie zabiera już całego ekranu — pod jego dolną krawędzią widać
   początek następnej sekcji, więc od razu wiadomo, że strona idzie dalej. */
.hero{position:relative;min-height:clamp(660px,88svh,900px);display:flex;align-items:center;
  background:var(--ciel-1);overflow:hidden;
  padding-top:calc(var(--rzad-h) + var(--s7));
  padding-bottom:var(--s5)}
.hero__f{position:absolute;top:0;right:0;bottom:0;width:clamp(320px,41%,660px);z-index:0;
  clip-path:url(#luk)}
.hero__f video,.hero__f img{width:100%;height:100%;display:block;object-fit:cover;object-position:52% 34%}
/* Przezroczysty nagłówek leży częściowo nad wideo, a skóra w kadrze ma
   jasność tła w połowie skali — czerń menu spadała do 3,6:1. Górna krawędź
   kadru rozjaśniona do koloru strony wyłącznie na wysokość nagłówka. */
.hero__f::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(252,250,247,.97) 0,
    rgba(252,250,247,.82) calc(var(--rzad-h) * .55),
    rgba(252,250,247,0) calc(var(--rzad-h) + 44px))}

/* Pionowa szyna z nazwą marki — lewa krawędź kadru. */
.hero__szyna{position:absolute;left:var(--s3);top:clamp(150px,20vh,240px);bottom:0;
  width:1px;background:linear-gradient(var(--ciel-4),var(--ciel-4) 62%,transparent);z-index:1}
.hero__szyna::before{content:"";position:absolute;left:-2.5px;bottom:180px;width:6px;height:6px;
  border-radius:50%;background:var(--akc-2)}

.hero__g{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gut)}
.hero__t{max-width:min(58ch,48.5vw)}
.hero .xl{font-size:var(--t8);font-weight:400;letter-spacing:var(--ls-t);line-height:var(--lh1)}
.hero__kr{display:block;width:52px;height:1px;background:var(--akc-2);
  margin:var(--s6) 0 var(--s4)}
.hero__kto{font-size:var(--t1);font-weight:600;letter-spacing:var(--ls-x);
  text-transform:uppercase;color:var(--akc);margin:0 0 var(--s3)}
.hero__co{margin:0;font-size:var(--t4);line-height:var(--lh3);color:var(--ink)}

.hero__b{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6)}
.lnk,.fil__w,.karta__w{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--cel);
  padding-bottom:10px;border-bottom:1px solid var(--linia-m);font-size:var(--t1);
  letter-spacing:var(--ls-w);text-transform:uppercase;transition:border-color .22s var(--ease)}
.lnk{justify-content:space-between;gap:26px;min-width:118px}
.lnk .ic,.fil__w .ic,.karta__w .ic{width:20px;height:20px}
.lnk--mocny{border-bottom-color:var(--ink);border-bottom-width:2px;padding-bottom:9px}

.hero__k{display:flex;gap:var(--s4) var(--s6);flex-wrap:wrap;
  margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid var(--linia)}
.hero__k a,.hero__adr{display:inline-flex;align-items:center;gap:14px;min-height:48px;margin:0}
.hero__k .ic{width:24px;height:24px;color:var(--ink-2);flex:none}
.hero__k span{display:block;font-size:var(--t2);line-height:var(--lh2)}
.hero__k b{display:block;font-size:var(--t1);font-weight:600;letter-spacing:var(--ls-w);
  text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}

/* Na wąskim ekranie wideo przestaje być kolumną obok tekstu i wchodzi
   pod spód jako tło całego hero. Przyciemnienie liczone tak, żeby biel
   trzymała ponad 7:1 nawet na najjaśniejszej klatce. */
@media(max-width:1024px){
  .hero{min-height:clamp(580px,88svh,780px);flex-direction:column;align-items:stretch;
    justify-content:flex-end;color:var(--biel);
    padding-block:calc(var(--rzad-h) + var(--s5)) var(--s5)}
  .hero__f{position:absolute;inset:0;width:100%;height:100%;margin:0;clip-path:none;z-index:0}
  .hero__f video,.hero__f img{object-position:52% 28%}
  .hero__f::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to top,rgba(34,30,27,.93) 0%,rgba(34,30,27,.82) 34%,
      rgba(34,30,27,.6) 62%,rgba(34,30,27,.55) 84%,rgba(34,30,27,.7) 100%)}
  .hero__g{position:relative;z-index:1;padding-inline:var(--gut)}
  .hero__t{max-width:none}
  .hero__szyna{display:none}

  .hero .xl,.hero__co,.hero__k a,.hero__adr{color:var(--biel)}
  .hero__kto{color:var(--ciel-3)}
  .hero__co{color:rgba(255,255,255,.9)}
  .hero__kr{background:rgba(255,255,255,.55)}
  .hero__b .lnk{color:var(--biel);border-bottom-color:rgba(255,255,255,.45)}
  .hero__b .lnk--mocny{border-bottom-color:var(--biel)}
  .hero__k{border-top-color:rgba(255,255,255,.3)}
  .hero__k b{color:rgba(255,255,255,.76)}
  .hero__k .ic,.hero__adr .ic{color:rgba(255,255,255,.82)}
  .hero a:focus-visible{outline-color:var(--biel)}
}

/* ── NAGŁÓWEK SEKCJI ────────────────────────────────────────
   Ten sam znak rozpoznawczy w każdej sekcji: numer w cielistym,
   pionowa kreska, nadtytuł i tytuł. Zmienia się tylko treść.  */
.glowa{margin:0 0 var(--s5)}
.glowa .nadtytul{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.glowa .nadtytul::after{content:"";width:44px;height:1px;background:var(--akc-2)}

/* ── TRZY OBSZARY ───────────────────────────────────────────
   Naprzemienny rytm: zdjęcie i opis zamieniają się stronami
   w co drugim wierszu. Numer sekcji stoi przy pionowej kresce. */
.fil{padding:var(--s8) 0;background:var(--ciel-1)}
.fil .lg{max-width:26ch}

.fil__g{display:flex;flex-direction:column;gap:var(--s6)}
.fil__r{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:var(--s6);align-items:center}
.fil__r--odwr .fil__f{order:2}
.fil__f{display:block;overflow:hidden;background:var(--ciel-3)}
.onas__f,.loc__f{overflow:hidden}
.fil__f img{width:100%;aspect-ratio:var(--prop);object-fit:cover}
.fil__t{position:relative}
.fil__i{display:flex;align-items:center;gap:14px;margin:0 0 16px;font-variant-numeric:tabular-nums;
  font-size:var(--t2);font-weight:500;letter-spacing:var(--ls-w);color:var(--ink-2)}
.fil__i::after{content:"";width:32px;height:1px;background:var(--ciel-4)}
.fil__t h3{font-size:var(--t6);margin:0 0 8px;line-height:var(--lh1)}
.fil__t h3 a::after{content:"";position:absolute;inset:0}   /* cały wiersz klikalny */
.fil__t b{display:block;font-weight:600;font-size:var(--t2);color:var(--akc);margin-bottom:18px}
.fil__t p{margin:0 0 24px;color:var(--ink-2);font-size:var(--t3);line-height:var(--lh3);max-width:var(--miara)}
.fil__w{display:inline-flex;align-items:center;gap:12px;min-height:var(--cel);padding-bottom:8px;
  border-bottom:1px solid var(--linia-m);font-size:var(--t3)}
.fil__w .ic{width:20px;height:20px}
@media(max-width:940px){
  .fil__r,.fil__r--odwr .fil__f{grid-template-columns:1fr;order:0}
  .fil .lg{max-width:none}
}

/* ── CENNIK ────────────────────────────────────────────────
   Dwa widoki tej samej listy: karty i lista. Dane siedzą w JS,
   więc obie postacie zawsze mówią to samo.                     */
.cen{padding:var(--s8) 0;background:var(--ciel-2);border-top:1px solid var(--linia)}
/* Odstęp trzyma teraz pas filtrów, a nie margines pod nagłówkiem —
   przy zawinięciu rzędu ten margines wypychał przełącznik na filtry. */
.cen__n{display:flex;align-items:flex-start;justify-content:space-between;gap:18px 26px;flex-wrap:wrap}
.cen__n .glowa{margin-bottom:0;flex:1 1 300px}
.cen__n .nadtytul::after{display:none}
.cen__tryb{flex:none}
.cen__ile{font-size:var(--t2);font-weight:400;color:var(--ink-2);letter-spacing:0;
  vertical-align:middle;margin-left:12px}

.cen__tryb{display:flex;flex:none}
.cen__tryb button,.cen__f button,.cen__wiecej{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--cel);
  padding:0 24px;background:transparent;color:var(--ink-2);border:1px solid var(--linia-m);
  font-size:var(--t1);letter-spacing:var(--ls-w);text-transform:uppercase;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.cen__tryb button[aria-pressed=true],.cen__f button[aria-pressed=true]{
  background:var(--ink);color:var(--biel);border-color:var(--ink)}
.cen__tryb button+button{border-left:0}

/* Pigułki kategorii z licznikiem — cennik ma dwadzieścia pozycji,
   bez podziału trzeba przeczytać wszystko, żeby znaleźć jedną. */
.cen__f{display:flex;gap:10px;flex-wrap:wrap;
  margin:var(--s5) 0 var(--s4)}

.cen__f button span{font-size:var(--t1);font-weight:500;color:var(--ink-2);opacity:.8}
.cen__f button[aria-pressed=true] span{color:var(--biel)}

/* Karty — tłem jest zdjęcie, tekst siedzi na przyciemnieniu.
   Gradient trzyma kontrast bieli powyżej 7:1 niezależnie od kadru. */
.cen__w--karty{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--s3)}
.karta{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
  min-height:clamp(330px,27vw,410px);padding:var(--s5);
  background:var(--ink);color:var(--biel);overflow:hidden;isolation:isolate}
.karta__f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.karta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(34,30,27,.9) 0%,rgba(34,30,27,.66) 44%,rgba(34,30,27,.42) 100%)}
.karta__e{margin:0 0 6px;font-size:var(--t1);font-weight:600;letter-spacing:var(--ls-w);text-transform:uppercase;
  color:rgba(255,255,255,.78)}
.karta__n{font-size:var(--t5);font-weight:600;letter-spacing:var(--ls-t);
  line-height:var(--lh1);margin:0;color:var(--biel)}
.karta__t{margin:7px 0 0;font-size:var(--t2);color:rgba(255,255,255,.82)}
.karta__c{margin:16px 0 0;font-size:var(--t5);font-weight:600;color:var(--biel);
  font-variant-numeric:tabular-nums}
/* Podkreślony odnośnik ze strzałką w róg — sygnał, że karta prowadzi dalej. */
.karta__w{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  margin-top:var(--s3);padding-bottom:6px;color:var(--biel);
  border-bottom:1px solid var(--linia-j);font-size:var(--t2);font-weight:600;letter-spacing:var(--ls-w)}
.karta__w .ic{width:17px;height:17px}

/* Lista */
.cen__w--lista{border-top:1px solid var(--linia)}
.poz{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;
  padding:16px 0;border-bottom:1px solid var(--linia)}
.poz__e{margin:0 0 3px;font-size:var(--t1);font-weight:600;letter-spacing:var(--ls-w);text-transform:uppercase;
  color:var(--akc)}
.poz__n{font-weight:600;font-size:var(--t4);margin:0}
.poz__n em{font-style:normal;font-weight:400;color:var(--ink-2);font-size:var(--t3)}
.poz__c{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--akc);font-size:var(--t4)}

.cen__wiecej{display:flex;padding-inline:36px;margin:var(--s5) auto 0;color:var(--ink)}
.cen__wiecej[hidden]{display:none}
.cen__wiecej .ic{width:20px;height:20px}
/* Wezwanie w miejscu, w którym zapada decyzja — zaraz po cenach,
   a nie dopiero w stopce. */
.cen__d{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-top:var(--s5);padding:var(--s4) var(--s4);
  background:var(--biel);border:1px solid var(--linia)}
.cen__d p{margin:0;color:var(--ink-2);font-size:var(--t3);line-height:var(--lh3);max-width:var(--miara)}
.cen__d b{display:block;color:var(--ink);font-size:var(--t4);font-weight:600;margin-bottom:4px}
.cen__z{margin:20px 0 0;color:var(--ink-2);font-size:var(--t2)}
/* Poniżej 720 px nagłówek, przełącznik i filtry idą jeden pod drugim —
   w rzędzie nie mieszczą się bez nachodzenia. */
@media(max-width:720px){
  .cen__n{flex-direction:column;align-items:stretch;gap:20px}
  .cen__n .glowa{flex:none}
  .cen__ile{display:block;margin:10px 0 0}
  .cen__tryb{width:100%}
  .cen__tryb button{flex:1;padding:0 12px}
  .cen__f{margin-top:var(--s3)}
  .cen__f button{flex:1 1 calc(50% - 5px);justify-content:center}
}

/* ── DLACZEGO MY ───────────────────────────────────────────
   Dwie kolumny powodów wokół okrągłego zdjęcia. Na wąskim
   ekranie zdjęcie schodzi na dół, a kolumny łączą się w jedną. */
.dl{padding:var(--s8) 0;background:var(--ciel-1);border-top:1px solid var(--linia)}
/* Akapit domykający sekcję — oddzielony włoskowatą linią od siatki powodów. */
.dl__stop{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--linia)}
.dl__stop p{margin:0;color:var(--ink-2);font-size:var(--t4);line-height:var(--lh3);max-width:var(--miara)}
.dl__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px) minmax(0,1fr);
  gap:var(--s6);align-items:center}
.dl__k{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s5)}
.dl__k li{position:relative;padding-left:80px}
.dl__k--p li{padding-left:0;padding-right:80px;text-align:right}
.dl__i{position:absolute;top:0;left:0;width:60px;height:60px;display:grid;place-items:center;
  border-radius:50%;box-shadow:inset 0 0 0 1px var(--ciel-3);color:var(--akc)}
.dl__k--p .dl__i{left:auto;right:0}
.dl__i .ic{width:30px;height:30px}
.dl__k h3{font-size:var(--t4);font-weight:600;margin:6px 0 8px;line-height:var(--lh2)}
.dl__k p{margin:0;color:var(--ink-2);font-size:var(--t3);line-height:var(--lh3)}
.dl__f{position:relative}
.dl__f::before{content:"";position:absolute;inset:-18px;border-radius:50%;
  border:1px dashed var(--akc-2);opacity:.7}
.dl__f img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%}
/* Poniżej 1180 px trzecia kolumna zabiera tekstowi tyle miejsca, że akapity
   łamią się co trzy słowa — zdjęcie idzie wtedy nad siatkę powodów. */
@media(max-width:1180px){
  .dl__g{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s5)}
  .dl__f{grid-column:1/-1;order:-1;max-width:min(340px,60vw);margin-inline:auto}
  .dl__k--p li{padding-left:80px;padding-right:0;text-align:left}
  .dl__k--p .dl__i{left:0;right:auto}
}
@media(max-width:760px){
  .dl__g{grid-template-columns:1fr}
  .dl__f{max-width:min(300px,72vw)}
}

/* ── SPRZĘT ────────────────────────────────────────────────
   Wiersze bez zdjęć — odmiana wobec obszarów, ale ten sam
   sposób numerowania i te same włoskowate linie.            */
.sprz{padding:var(--s8) 0;background:var(--ciel-2);border-top:1px solid var(--linia)}
.sprz__g{border-top:1px solid var(--linia)}
.sprz__i{display:grid;grid-template-columns:56px minmax(0,240px) minmax(0,1fr) minmax(0,280px);
  gap:var(--s6);padding:var(--s4) 0;border-bottom:1px solid var(--linia);
  align-items:start}
.sprz__nr{margin:0;font-size:var(--t2);font-weight:500;color:var(--ink-2);padding-top:4px;
  font-variant-numeric:tabular-nums}
.sprz__n{font-size:var(--t5);font-weight:600;letter-spacing:var(--ls-t);line-height:var(--lh1);margin:0}
.sprz__o{margin:0;color:var(--ink-2);font-size:var(--t3);line-height:var(--lh3)}
.sprz__c{margin:0;font-size:var(--t2);color:var(--ink-2)}
.sprz__c i{font-style:normal;display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--linia)}
.sprz__c i:last-child{border-bottom:0}
.sprz__c i::before{content:"";width:14px;height:1px;background:var(--akc-2);flex:none}
@media(max-width:1180px){
  .sprz__i{grid-template-columns:48px minmax(0,1fr);gap:10px 22px}
  .sprz__o,.sprz__c{grid-column:2}
  .sprz__o{margin-top:6px}
  .sprz__c{margin-top:14px;max-width:320px}
}

/* ── O REHA BEAUTY ──────────────────────────────────────────── */
.onas{padding:var(--s8) 0;background:var(--biel);border-top:1px solid var(--linia)}
/* Do góry, nie do środka — przy krótszej kolumnie tekstu wyrównanie
   do środka zostawiało martwe pole pod akapitami. */
.onas__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);
  align-items:start}
.onas__f img{aspect-ratio:var(--prop);object-fit:cover;width:100%}
.onas p{margin:0 0 20px;color:var(--ink-2);font-size:var(--t4);line-height:var(--lh3);max-width:var(--miara)}
.onas p:last-of-type{margin-bottom:30px}
@media(max-width:900px){.onas__g{grid-template-columns:1fr;gap:var(--s4)}}

/* ── PLACÓWKA ───────────────────────────────────────────────── */
.loc{padding:var(--s8) 0;background:var(--ciel-2);border-top:1px solid var(--linia)}
.loc__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);
  align-items:start}
.loc dl{display:grid;grid-template-columns:150px 1fr;margin:0;border-top:1px solid var(--linia)}
.loc dt{padding:16px 0;font-size:var(--t1);letter-spacing:var(--ls-w);color:var(--ink-2);font-weight:600;
  border-bottom:1px solid var(--linia);text-transform:uppercase}
.loc dd{padding:4px 0;margin:0;border-top:1px solid var(--linia);display:flex;align-items:center;min-height:var(--cel)}
.loc dd a{display:inline-flex;align-items:center;min-height:var(--cel);color:var(--akc);font-weight:600;
  overflow-wrap:anywhere}
.loc__f img{aspect-ratio:var(--prop);object-fit:cover;width:100%}
@media(max-width:900px){.loc__g{grid-template-columns:1fr;gap:var(--s4)}
  .loc dl{grid-template-columns:132px 1fr}}

/* ── STOPKA ─────────────────────────────────────────────────
   Siatka w ramce: pionowe kreski między kolumnami, pozioma nad
   paskiem praw. Biała, żeby domykała stronę bez przygaszania. */
.stopka{position:relative;background:var(--biel);color:var(--ink);
  padding:var(--s5) 0;font-size:var(--t3)}
.stopka .w{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.stopka__r{border:1px solid var(--ink);margin-inline:calc(-1 * var(--pad-k))}
.stopka__g{display:grid;grid-template-columns:1.35fr 1fr 1.3fr 1.35fr}
.stopka__k{padding:var(--pad-k);border-left:1px solid var(--ink)}
.stopka__k:first-child{border-left:0}
.stopka__marka p{margin:0;color:var(--ink-2);line-height:var(--lh3);font-size:var(--t3)}
.stopka__z{height:74px;width:auto;aspect-ratio:74/86.137;color:var(--ink);margin-bottom:24px}
.stopka__t{font-weight:600;font-size:var(--t1);letter-spacing:var(--ls-w);text-transform:uppercase;
  color:var(--ink);margin:0 0 18px}
.stopka__t--2{margin-top:34px}
.stopka ul{list-style:none;margin:0;padding:0}
.stopka li a{display:inline-flex;align-items:center;min-height:46px;color:var(--ink);font-size:var(--t3)}
.stopka__kontakt li{color:var(--ink);line-height:var(--lh3)}
.stopka__kontakt li:last-child{padding-top:8px;max-width:26ch}
.stopka__s{display:flex;gap:14px}
.stopka__s a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--ink)}
.stopka__s .ic{width:24px;height:24px}

.stopka__d{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);
  font-size:var(--t2);color:var(--ink-2);line-height:var(--lh2)}
.stopka__d>span{display:block;padding:var(--s4) var(--pad-k)}
.stopka__d>span+span{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  row-gap:6px;border-left:1px solid var(--ink)}
/* Kredyt wykonawcy jest odnośnikiem o wysokości wiersza, czyli 18 px —
   poniżej progu 24 px, jaki WCAG 2.2 stawia celom dotykowym. Dotyczy
   każdej szerokości, więc reguła nie może siedzieć w zapytaniu medialnym. */
.stopka__d a{color:var(--ink);display:inline-flex;align-items:center;min-height:24px}

/* Kryterium 2.5.8 wymaga celu 24×24 px. Odnośniki w pasku miały 18–20 px
   wysokości, więc dostają własne pole zamiast samej wysokości wiersza. */
.stopka__pr a{display:inline-flex;align-items:center;min-height:28px;padding-block:4px;
  margin-left:24px;color:var(--ink);font-size:var(--t1);letter-spacing:var(--ls-w);text-transform:uppercase}
.stopka__pr a:first-child{margin-left:0}

/* Pasek wezwania na telefonie: między hero a placówką nie było
   żadnej drogi do umówienia się, a decyzja zapada przy cenniku. */
.cta-pasek{display:none}
.cta-pasek[hidden]{display:none}
@media(max-width:760px){
  .cta-pasek:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;
    align-items:center;justify-content:space-between;gap:14px;
    padding:12px var(--s2);background:var(--biel);
    border-top:1px solid var(--linia);box-shadow:0 -14px 30px -22px rgba(34,30,27,.7)}
  .cta-pasek span{display:block;font-size:var(--t1);color:var(--ink-2);line-height:var(--lh2)}
  .cta-pasek b{display:block;font-size:var(--t2);font-weight:600;color:var(--ink)}
  .cta-pasek a{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 20px;flex:none;
    background:var(--ink);color:var(--biel);font-size:var(--t1);font-weight:600;
    letter-spacing:var(--ls-w);text-transform:uppercase}
  .cta-pasek .ic{width:19px;height:19px}
  .dogory{bottom:calc(74px + var(--s2));width:46px;height:46px}
  .dogory .ic{width:19px;height:19px}
}

/* Powrót na górę — pojawia się dopiero po zejściu poniżej pierwszego ekranu. */
.dogory{position:fixed;right:var(--s3);bottom:var(--s3);z-index:90;
  width:54px;height:54px;border-radius:50%;border:0;background:var(--ink);color:var(--biel);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 18px 34px -20px rgba(34,30,27,.8)}
.dogory[hidden]{display:none}
.dogory .ic{width:22px;height:22px}

@media(max-width:1000px){
  .stopka__g{grid-template-columns:1fr 1fr}
  .stopka__k:nth-child(3){border-left:0}
  .stopka__k:nth-child(n+3){border-top:1px solid var(--ink)}
}
@media(max-width:640px){
  .stopka__r{margin-inline:0}
  .stopka__g{grid-template-columns:1fr}
  .stopka__k{border-left:0}
  .stopka__k+.stopka__k{border-top:1px solid var(--ink)}
  .stopka__d{grid-template-columns:1fr}
  .stopka__d>span+span{border-left:0;border-top:1px solid var(--ink);justify-content:flex-start}
  .stopka__pr a{margin:0 22px 0 0}
}

/* ── DELIKATNA INTERAKCJA ───────────────────────────────────
   Jedna reguła na wszystko: 240 ms, to samo wygładzenie, żadnego
   powiększenia ponad 1,03 i żadnej zmiany barwy — tylko pogłębienie
   tego, co już jest. Wszystko gaśnie przy „ogranicz ruch".      */
@media(hover:hover){
  /* odnośniki: kreska ciemnieje, strzałka robi krok */
  .lnk,.fil__w,.karta__w{transition:border-color .24s var(--ease)}
  .lnk .ic,.fil__w .ic,.karta__w .ic{transition:transform .24s var(--ease)}
  .lnk:hover,.fil__w:hover,.fil__r:hover .fil__w,.karta:hover .karta__w{border-bottom-color:var(--ink)}
  .lnk:hover .ic,.fil__w:hover .ic,.fil__r:hover .fil__w .ic,.karta:hover .karta__w .ic{transform:translate(3px,-3px)}
  .lnk[href^="tel"]:hover .ic,.lnk[href^="#"]:hover .ic{transform:translateX(3px)}

  /* zdjęcia: ledwo wyczuwalne zbliżenie, bez wyskoku */
  .fil__f,.karta{overflow:hidden}
  .karta__f{transition:scale .5s var(--ease)}
  .karta:hover .karta__f{scale:1.03}
  .karta::after{transition:opacity .3s var(--ease)}
  .karta:hover::after{opacity:.88}

  /* przyciski i pigułki: pogłębienie kreski, nie zmiana koloru */
  .cen__tryb button:hover,.cen__f button:hover,.cen__wiecej:hover{
    color:var(--ink);border-color:var(--ink)}
  .cen__tryb button[aria-pressed=true]:hover,.cen__f button[aria-pressed=true]:hover{color:var(--biel)}

  /* menu: kreska wysuwa się spod pozycji */
  .menu__l>li>a{position:relative}
  .menu__l>li>a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform .24s var(--ease)}
  .menu__l>li>a:hover::after{transform:scaleX(1)}
  .top__l,.burger{transition:color .2s var(--ease),background .2s var(--ease)}
  .top__l:hover{color:var(--akc)}

  /* powody: kółko ikony ciemnieje razem z tytułem */
  .dl__k li{cursor:default}
  .dl__i{transition:box-shadow .24s var(--ease),color .24s var(--ease)}
  .dl__k li:hover .dl__i{box-shadow:inset 0 0 0 1px var(--linia-m);color:var(--ink)}


  /* stopka: podkreślenie wjeżdża od lewej */
  .stopka li a,.stopka__pr a{position:relative}
  .stopka li a::after,.stopka__pr a::after{content:"";position:absolute;left:0;right:0;bottom:10px;
    height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform .24s var(--ease)}
  .stopka li a:hover::after,.stopka__pr a:hover::after{transform:scaleX(1)}
  .stopka__s a{transition:background .24s var(--ease)}
  .stopka__s a:hover{background:var(--ciel-2)}

  .dogory{transition:transform .2s var(--ease),background .2s var(--ease)}
  .dogory:hover{transform:translateY(-3px)}

  /* Znak, hamburger i pozycje panelu mobilnego zostawaly dotad bez
     odpowiedzi — jedyne trzy klikalne rzeczy w naglowku bez stanu. */
  .znak__l{transition:color .2s var(--ease)}
  .znak:hover .znak__l{color:var(--akc)}
  .burger:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
  .menu__stopka a{transition:color .2s var(--ease)}
  .menu__stopka a:hover{color:var(--akc)}

  /* Rozwijane szczegoly: kreska pod calym wierszem ciemnieje razem
     ze strzalka, wiec widac, ze to jeden cel, a nie sam napis. */
  .szcz{transition:border-color .24s var(--ease)}
  .szcz:hover{border-top-color:var(--linia-m)}
  .szcz summary{transition:color .2s var(--ease)}
  .szcz:hover summary{color:var(--ink)}

  /* Pasek zabiegow: kreska wysuwa sie spod pozycji, tak samo jak w menu. */
  .spis a:hover{border-bottom-color:var(--ink)}
}


/* ============================================================
   ZAKŁADKI USŁUG — trzy obszary oferty
   Ten sam rytm co strona główna: nadtytuł z kreską, tytuł, kolumna
   tekstu w jednej mierze. Różnica jest w otwarciu — zamiast hero
   z wideo idzie para „tekst + kadr", żeby od pierwszego ekranu
   było widać, o którym obszarze mowa.
   ============================================================ */

/* Podstrony nie mają ciemnego hero, więc nagłówek stoi na bieli od
   pierwszego piksela. Bez tego poniżej 1024 px reguły pisane pod
   wideo dawałyby biały tekst na kremowym tle. */
body.pod .top{background:var(--biel);box-shadow:0 1px 0 var(--linia)}
body.pod .top.przewiniety{box-shadow:0 14px 34px -26px rgba(34,30,27,.4),0 1px 0 var(--linia)}
@media(max-width:1024px){
  body.pod .top:not(.przewiniety){color:var(--ink)}
  body.pod .top:not(.przewiniety) .znak__l{color:var(--ink)}
  body.pod .top:not(.przewiniety) .burger{box-shadow:inset 0 0 0 1.5px rgba(34,30,27,.2)}
  body.pod .top:not(.przewiniety) .top__sp{background:var(--ciel-4)}
  body.pod .top:not(.przewiniety) .top__n{color:var(--ink-2)}
}

/* ── OTWARCIE ZAKŁADKI ──────────────────────────────────────── */
.pg{padding:calc(var(--rzad-h) + var(--s7)) 0 var(--s7);background:var(--ciel-1)}
.pg__g{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:var(--s7);align-items:center}
.pg__t{max-width:var(--miara)}
/* Polskie zlozenia bywaja dluzsze niz waski ekran: samo
   fizykoterapeutyczne ma przy 40 px okolo 380 px. Dzielenie wyrazu
   robi z tego zlamanie zamierzone, break-word jest zabezpieczeniem. */
.pg .xl{font-size:var(--t8);font-weight:400;hyphens:auto;overflow-wrap:break-word}

/* Okruszki: ścieżka powrotu, nie ozdoba — dlatego stoją nad tytułem
   i są jedynym elementem w tym rozmiarze na całym ekranie. */
.okruch{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  list-style:none;margin:0 0 var(--s5);padding:0;
  font-size:var(--t1);letter-spacing:var(--ls-w);text-transform:uppercase;color:var(--ink-2)}
/* Element listy jest pojemnikiem elastycznym, wiec bez min-width:0 nie zejdzie
   ponizej najdluzszego slowa - FIZYKOTERAPEUTYCZNE ma w wersalikach 180 px. */
.okruch li{display:flex;align-items:center;gap:10px;min-width:0}
.okruch li>*{min-width:0;overflow-wrap:anywhere}
.okruch li+li::before{content:"";width:14px;height:1px;background:var(--ciel-4)}
.okruch a{display:inline-flex;align-items:center;min-height:var(--cel);
  border-bottom:1px solid transparent;transition:border-color .22s var(--ease)}
.okruch a:hover{border-bottom-color:var(--ink-2)}
.okruch [aria-current=page]{color:var(--akc);font-weight:600}

.pg__kr{display:block;width:52px;height:1px;background:var(--akc-2);margin:var(--s5) 0 var(--s4)}
.pg__lead{margin:0;font-size:var(--t4);line-height:var(--lh3);color:var(--ink-2);max-width:var(--miara)}
.pg__b{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6)}

/* Trzy liczby pod przyciskami: ile zabiegów, od ilu złotych, gdzie.
   Wszystkie trzy są potwierdzone, więc mogą stać tak twardo. */
.pg__m{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);margin:var(--s6) 0 0;
  padding-top:var(--s4);border-top:1px solid var(--linia)}
.pg__m div{margin:0;min-width:0}
.pg__m dt{font-size:var(--t1);font-weight:600;letter-spacing:var(--ls-w);
  text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.pg__m dd{margin:0;font-size:var(--t5);font-weight:600;letter-spacing:var(--ls-t);color:var(--ink)}

.pg__f{overflow:hidden;background:var(--ciel-3)}
.pg__f img{width:100%;aspect-ratio:var(--prop);object-fit:cover}

@media(max-width:1024px){
  .pg{padding-top:calc(var(--rzad-h) + var(--s5))}
  .pg__g{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .pg__f{order:-1}
}
@media(max-width:760px){.pg{padding-top:calc(100px + var(--s5))}}

/* ── SPIS ZABIEGÓW ──────────────────────────────────────────
   Pasek przyklejony pod nagłówkiem: na długiej zakładce widać
   z każdego miejsca, co jeszcze jest w obszarze.               */
/* Przykleja się pod nagłówkiem, nie pod krawędzią ekranu — nagłówek
   jest przy przewijaniu wysoki na --rzad-h-mal i przykryłby pasek. */
.spis{position:sticky;top:var(--rzad-h-mal);z-index:80;background:var(--ciel-2);
  border-block:1px solid var(--linia)}
.spis__in{display:flex;align-items:center;gap:var(--s4);
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  overflow-x:auto;scrollbar-width:none}
.spis__in::-webkit-scrollbar{display:none}
.spis__t{flex:none;margin:0;font-size:var(--t1);font-weight:600;letter-spacing:var(--ls-x);
  text-transform:uppercase;color:var(--akc)}
.spis ol{display:flex;align-items:center;gap:var(--s3);list-style:none;margin:0;padding:0}
.spis a{display:inline-flex;align-items:center;min-height:var(--cel);padding:14px 0;
  white-space:nowrap;font-size:var(--t2);font-weight:500;
  border-bottom:2px solid transparent;transition:border-color .22s var(--ease)}
@media(max-width:760px){.spis__t{display:none}.spis{top:82px}
  .zbr__b,.zbr__r{scroll-margin-top:calc(82px + 66px)}}

/* ── ZABIEGI ────────────────────────────────────────────────
   Dwa rejestry w jednej sekcji: bloki ze zdjęciem dla zabiegów
   wiodących i wiersze bez zdjęć dla pozostałych. Nie z oszczędności
   kadrów — dłuższa lista samych bloków ze zdjęciem czyta się jak
   katalog, a nie jak opis obszaru.                              */
.zbr{padding:var(--s8) 0;background:var(--ciel-1)}
.zbr__g{display:flex;flex-direction:column;gap:var(--s8)}

/* Kadr i tekst startują od jednej linii. Przy wyśrodkowaniu każdy blok
   miał inne przesunięcie — zmierzone +65, +34 i −5 px w trzech kolejnych
   — i rząd wyglądał na poskładany z osobnych kawałków. */
.zbr__b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:var(--s7);align-items:start;scroll-margin-top:calc(var(--rzad-h-mal) + 70px)}
.zbr__b:nth-child(even) .zbr__f{order:2}
.zbr__f{overflow:hidden;background:var(--ciel-3)}
.zbr__f img{width:100%;aspect-ratio:4/5;object-fit:cover}

.zbr__nr{display:flex;align-items:center;gap:14px;margin:0 0 16px;
  font-variant-numeric:tabular-nums;font-size:var(--t2);font-weight:500;
  letter-spacing:var(--ls-w);color:var(--ink-2)}
.zbr__nr::after{content:"";width:32px;height:1px;background:var(--ciel-4)}
.zbr__t h2{overflow-wrap:break-word;font-size:var(--t7);line-height:var(--lh1);letter-spacing:var(--ls-t);margin:0 0 8px}
.zbr__t>b{display:block;font-size:var(--t2);font-weight:600;color:var(--akc);margin-bottom:20px}
.zbr__o{margin:0 0 var(--s4);font-size:var(--t3);line-height:var(--lh3);
  color:var(--ink-2);max-width:var(--miara)}

/* Ceny: nazwa wariantu po lewej, kwota po prawej, kreska między nimi.
   Kwota tabularnie, żeby przecinki stały w jednej kolumnie.        */
.cena{list-style:none;margin:0 0 var(--s5);padding:0;max-width:var(--miara)}
/* Czas należy do wariantu, więc stoi tuż przy nim. Kwota odjeżdża
   do prawej krawędzi — wtedy wszystkie ceny czyta się w jednej kolumnie. */
.cena li{display:flex;align-items:baseline;gap:12px;padding:14px 0;
  border-top:1px solid var(--linia);font-size:var(--t3)}
.cena li:last-child{border-bottom:1px solid var(--linia)}
.cena span{min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.cena i{font-style:normal;font-size:var(--t2);color:var(--ink-2);white-space:nowrap}
.cena b{margin-left:auto;padding-left:18px;font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--akc);white-space:nowrap}
.cena--brak li b{color:var(--ink-2);font-weight:500}

/* ── PRZEŁĄCZNIK SERWISÓW ────────────────────────────────────
   Trzy serwisy Reha Medica pod trzema adresami. W nagłówku każdego stoją
   dwa pozostałe, złączone we wspólną ramkę — jedna rzecz do zauważenia
   zamiast dwóch osobnych odnośników, i widać, że to rodzina stron.
   Tu ramka jest ciemna, bo nagłówek Reha Beauty stoi na jasnym tle. */
/* Dwa przyciski jeden pod drugim. Obok siebie zajmowały ćwierć paska
   i przy 1440 px drugi wypadał poza ekran; w kolumnie zajmują tyle,
   co najdłuższy z nich, a nagłówek ma 140 px wysokości i miejsce jest. */
.serwisy{display:inline-flex;flex-direction:column;flex:none;gap:6px}
.serwisy__b{display:flex;align-items:center;gap:8px;
  padding:0 15px;min-height:40px;border:1px solid var(--linia-m);
  font-size:.8rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;color:var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease)}

.serwisy__b:hover{background:var(--ink);color:var(--biel)}
.serwisy__b .ic{width:13px;height:13px;flex:none;margin-left:auto;opacity:.6}
.serwisy__b:hover .ic{opacity:1}

/* Nad ciemnym hero nagłówek jest biały — para musi iść za nim. Podstrony
   (`body.pod`) mają nagłówek na bieli i wyjątku nie biorą; bez tego para
   znikała na stronach sklepu jako biel na kremowym. */
@media(max-width:1024px){
  body:not(.pod) .top:not(.przewiniety) .serwisy__b{color:var(--biel);border-color:rgba(255,255,255,.4)}
}

/* Poniżej progu menu pasek ma jeszcze koszyk, prezent i hamburger, więc
   para idzie na wąsko: bez strzałki, mniejszy tekst. Zostaje widoczna —
   po to jest, żeby nikt nie szukał pozostałych serwisów w stopce. */
@media(max-width:1399px){
  .serwisy{gap:5px}
  .serwisy__b{padding:0 11px;min-height:36px;font-size:.72rem;letter-spacing:.04em}
  .serwisy__b .ic{display:none}
}
/* Poniżej 420 px pasek jest już tak wąski, że każdy piksel odstępu liczy się
   podwójnie — para zostaje duża, kurczy się tylko oddech po bokach. */
@media(max-width:420px){
  .serwisy__b{padding:0 8px;letter-spacing:.02em}
}
/* Na telefonie prezent i tak powtarza się w panelu menu — oddaje miejsce
   parze serwisów, bo obok stoi jeszcze koszyk i hamburger. */
@media(max-width:600px){
  .top__z .top__l:first-child,.top__z .top__sp{display:none}
}

/* ── ZGODA NA CIASTECZKA ─────────────────────────────────────
   Kwadrat w lewym dolnym rogu: biel, czerń, cienka linia. Celowo mały
   i bez przyciemnienia strony — to informacja z wyborem, a nie okno,
   które trzeba zamknąć, żeby cokolwiek przeczytać.
   Odmowa ma tę samą wagę co zgoda: ten sam rozmiar, ten sam rząd. */
.zg{position:fixed;left:var(--s4);bottom:var(--s4);z-index:300;
  width:min(330px,calc(100vw - 2 * var(--s4)));
  background:#fff;color:#000;border:1px solid var(--linia-m);
  padding:var(--s4);display:flex;flex-direction:column;gap:14px;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.45)}
.zg[hidden]{display:none}

.zg__n{margin:0;font-size:var(--t1);font-weight:600;letter-spacing:var(--ls-w);
  text-transform:uppercase;color:#000}
.zg__o{margin:0;font-size:var(--t2);line-height:var(--lh2);color:#000}
.zg__o a{color:#000;text-decoration:underline;text-underline-offset:3px}

.zg__k{display:flex;flex-direction:column;gap:12px;
  padding-top:12px;border-top:1px solid var(--linia)}
.zg__k[hidden]{display:none}
.zg__p{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.zg__p input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:#000}
.zg__p input:disabled{opacity:.5;cursor:default}
.zg__p span{font-size:var(--t2);line-height:var(--lh2);color:#000}
.zg__p b{display:block;font-weight:600}

.zg__b{display:flex;flex-wrap:wrap;gap:8px}
/* Zgoda i odmowa dzielą rząd po równo — nierówne przyciski to nierówny wybór. */
.zg__w{flex:1 1 0;min-width:96px;min-height:var(--cel);padding:11px 12px;
  border:1px solid #000;background:#000;color:#fff;cursor:pointer;
  font-family:Onest,"Onest zapas",system-ui,sans-serif;font-size:var(--t1);
  font-weight:600;letter-spacing:var(--ls-w);text-transform:uppercase;
  transition:background .18s var(--ease),color .18s var(--ease)}
.zg__w:hover{background:#fff;color:#000}
.zg__w:active{transform:translateY(1px)}
.zg__w--zapisz{flex:1 1 100%}
.zg__w[hidden]{display:none}

.zg__u{flex:1 1 100%;min-height:36px;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:var(--t2);color:#000;text-decoration:underline;
  text-underline-offset:3px;padding:4px}

.zg :is(button,input):focus-visible{outline:2px solid #000;outline-offset:2px}

/* Odnośnik wycofania zgody w stopce — obok polityki i regulaminu. */
.stopka__zg{border:0;background:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:inherit;color:inherit;
  display:inline-flex;align-items:center;min-height:24px}
.stopka__zg:hover{text-decoration:underline;text-underline-offset:3px}

@media(max-width:560px){
  .zg{left:var(--s3);right:var(--s3);bottom:var(--s3);width:auto}
}

/* ── NEWSLETTER ──────────────────────────────────────────────
   Formularz odwzorowany z pozostałych dwóch serwisów Reha Medica: ten sam
   adres docelowy, te same nazwy pól, ta sama zasada zgody na SMS. */
.nl{padding-block:var(--s8);background:var(--ciel-1);border-top:1px solid var(--linia)}
.nl__b{display:grid;gap:var(--s6);align-items:start}
.nl__t{display:flex;flex-direction:column;gap:var(--s3)}
.nl__t h2{font-size:var(--t6)}
.nl__lead{font-size:var(--t3);line-height:var(--lh3);color:var(--ink-2);
  margin:0;max-width:var(--miara)}

@media(min-width:1000px){
  .nl__b{grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);gap:var(--s8)}
}

.nl__f{display:flex;flex-direction:column;gap:var(--s3)}
.nl__p{display:flex;flex-direction:column;gap:8px}
.nl__p label{font-size:var(--t1);font-weight:600;letter-spacing:var(--ls-w);
  text-transform:uppercase;color:var(--ink-2)}
.nl__opc{font-weight:400;text-transform:none;letter-spacing:0}
.nl__p input{width:100%;min-height:var(--cel);padding:13px 14px;
  border:1px solid var(--linia-m);border-radius:0;background:var(--biel);
  color:var(--ink);font-family:inherit;font-size:var(--t3);line-height:var(--lh2)}
.nl__p input:focus-visible{outline:2px solid var(--akc);outline-offset:2px}
.nl__podp{margin:0;font-size:var(--t2);color:var(--ink-2)}

/* Pole wyboru zostaje natywne — własne zastępniki bywają niefokusowalne,
   a wtedy zgoda przechodzi walidację i przepada po stronie serwera. */
.nl__z{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.nl__z[hidden]{display:none}
.nl__z input{flex:none;width:24px;height:24px;margin-top:1px;accent-color:var(--akc)}
.nl__z span{font-size:var(--t2);line-height:var(--lh2);color:var(--ink-2)}
.nl__z a{color:var(--akc);text-decoration:underline;text-underline-offset:3px}

.nl__w{align-self:flex-start;min-height:var(--cel);padding:14px 30px;
  border:1px solid var(--ink);background:var(--ink);color:var(--biel);
  font-family:Onest,"Onest zapas",system-ui,sans-serif;font-size:var(--t1);
  font-weight:600;letter-spacing:var(--ls-w);text-transform:uppercase;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.nl__w:hover{background:var(--akc);border-color:var(--akc)}
.nl__w:active{transform:translateY(1px)}
.nl__w:disabled{background:var(--ciel-4);border-color:var(--ciel-4);
  color:var(--ink-2);cursor:progress}

.nl__k{margin:0;font-size:var(--t2);color:var(--ink-2)}
.nl__k--blad{color:#9d3b2f}

.nl__ok{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start;
  padding:var(--s5) 0}
.nl__ok-i{width:38px;height:38px;color:var(--akc);stroke-width:1.6}
.nl__ok-h{margin:0;font-size:var(--t5);font-weight:600;color:var(--ink);
  letter-spacing:var(--ls-t)}
.nl__ok-t{margin:0;font-size:var(--t3);color:var(--ink-2)}

@media(max-width:560px){
  .nl__w{width:100%;align-self:stretch}
}

/* ── SKLEP NA STRONIE GŁÓWNEJ ────────────────────────────────
   Trzy pozycje do kupienia od ręki. Voucher dostaje szerszą kartę,
   bo jest jedyną pozycją kupowaną w prezencie — pakiety wybiera się
   dla siebie i po cenie, więc wystarcza im rząd obok. */
.skl{padding-block:var(--s8)}
.skl .glowa{display:flex;align-items:end;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)}
.skl__g{display:grid;gap:var(--s6) var(--s5);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}

/* Karty nie rozciągają się do wspólnej wysokości — karta vouchera jest
   dwa razy wyższa i wyrównanie spychało odnośniki pakietów o pół ekranu
   poniżej ich własnych cen. */
.skl__k{display:flex;flex-direction:column;gap:var(--s3)}
.skl__t{display:flex;flex-direction:column;gap:var(--s2)}
.skl__t>.lnk{align-self:flex-start;margin-top:var(--s1)}

.skl__f{display:block;overflow:hidden;background:var(--ciel-2)}
.skl__f img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  transition:transform .7s var(--ease)}
.skl__k h3{font-size:var(--t5);line-height:var(--lh1);letter-spacing:var(--ls-t)}
.skl__k p{font-size:var(--t2);line-height:var(--lh2);color:var(--ink-2);
  max-width:52ch;margin:0}
.skl__c{font-size:var(--t4)!important;font-weight:600;color:var(--ink)!important;
  font-variant-numeric:tabular-nums;padding-top:var(--s2);
  border-top:1px solid var(--linia)}

/* Voucher zajmuje dwie kolumny tam, gdzie siatka ma ich co najmniej trzy. */
@media(min-width:1000px){
  .skl__g{grid-template-columns:repeat(4,1fr)}
  .skl__k--duza{grid-column:span 2}
  .skl__k--duza h3{font-size:var(--t6)}
}

@media(hover:hover){
  .skl__f:hover img{transform:scale(1.04)}
}

@media(prefers-reduced-motion:reduce){
  .skl__f img{transition:none}
  .skl__f:hover img{transform:none}
}

/* Pakiety do kupienia od ręki. Blok stoi za cennikiem zabiegu i różni się
   od niego tłem, bo tamten informuje, a ten prowadzi do płatności — bez tej
   różnicy „Do koszyka" czytałoby się jak kolejny wiersz z ceną.
   Ukryty do czasu, aż skrypt potwierdzi, że sklep pod tą domeną odpowiada. */
.kup{margin:0 0 var(--s5);padding:var(--s3) var(--s4);background:var(--ciel-1);
  border-left:3px solid var(--akc);max-width:var(--miara)}
.kup[hidden]{display:none}
.kup__t{margin:0 0 var(--s2);font-size:var(--t1);font-weight:600;
  letter-spacing:var(--ls-w);text-transform:uppercase;color:var(--ink-2)}
.kup__l{list-style:none;margin:0;padding:0}
.kup__l li{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 0;
  border-top:1px solid var(--linia)}
.kup__l li:first-child{border-top:0}
/* Bezpośrednie dziecko wiersza, nie „jakikolwiek span w środku" — inaczej
   reguła sięga do etykiety w przycisku i maluje ją atramentem na
   atramentowym tle, czyli napis znika. */
.kup__l li>span{min-width:0;overflow-wrap:anywhere;font-size:var(--t3);color:var(--ink)}
.kup__l b{margin-left:auto;font-variant-numeric:tabular-nums;font-size:var(--t3);color:var(--ink)}
.kup__b{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--cel);padding:11px 20px;border:1px solid var(--ink);background:var(--ink);
  color:var(--biel);font-size:var(--t1);font-weight:600;letter-spacing:var(--ls-w);
  text-transform:uppercase;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.kup__b:hover{background:var(--akc);border-color:var(--akc)}
.kup__b:active{transform:translateY(1px)}
.kup__b .ic{width:20px;height:20px}

/* Trzy stany dodawania. Szerokość przycisku nie skacze przy zmianie etykiety,
   bo obie ikony leżą w tym samym miejscu i przełącza się tylko widoczność —
   podskakujący przycisk pod palcem czyta się jak błąd, nie jak potwierdzenie. */
.kup__b{position:relative}
.kup__e{transition:opacity .2s var(--ease)}
.kup__i,.kup__p{transition:opacity .22s var(--ease),transform .22s var(--ease)}
.kup__p{position:absolute;right:20px;opacity:0;transform:scale(.5) rotate(-12deg)}

.kup__b--wysyla{background:var(--akc);border-color:var(--akc);cursor:progress}
.kup__b--wysyla .kup__e{opacity:.75}
.kup__b--wysyla .kup__i{animation:kup-puls 1s var(--ease) infinite}

.kup__b--dodano{background:var(--akc);border-color:var(--akc)}
.kup__b--dodano .kup__i{opacity:0;transform:scale(.5)}
.kup__b--dodano .kup__p{opacity:1;transform:none}

@keyframes kup-puls{
  0%,100%{opacity:1;transform:none}
  50%{opacity:.45;transform:translateX(3px)}
}

/* Licznik w nagłówku podskakuje, gdy pozycja dojdzie — koszyk jest daleko
   od przycisku i bez tego nie widać, dokąd rzecz poleciała. */
.top__l--bump{animation:kup-bump .5s var(--ease)}
@keyframes kup-bump{
  0%{transform:none}
  30%{transform:translateY(-4px) scale(1.06)}
  60%{transform:translateY(0) scale(.98)}
  100%{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .kup__e,.kup__i,.kup__p{transition:none}
  .kup__b--wysyla .kup__i{animation:none}
  .top__l--bump{animation:none}
}

/* Na wąskim ekranie przycisk schodzi pod kwotę i bierze całą szerokość —
   inaczej przy dłuższej nazwie pakietu zostaje mu kilkadziesiąt pikseli. */
@media(max-width:560px){
  .kup__l li{gap:8px}
  .kup__b{flex:1 0 100%}
}

/* Wiersze bez zdjęcia — ten sam rytm, mniejszy rejestr. */
.zbr__r{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:var(--s6);padding-top:var(--s6);border-top:1px solid var(--linia);
  scroll-margin-top:calc(var(--rzad-h-mal) + 70px)}
.zbr__r h2{overflow-wrap:break-word;font-size:var(--t6);line-height:var(--lh1);letter-spacing:var(--ls-t);margin:0 0 8px}
.zbr__r>div>b{display:block;font-size:var(--t2);font-weight:600;color:var(--akc)}

@media(max-width:1024px){
  .zbr__b,.zbr__r{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .zbr__b:nth-child(even) .zbr__f{order:0}
  .zbr__g{gap:var(--s7)}
}


/* Kadr w wierszu: lewa kolumna miała pod nazwą pustkę na dwie trzecie
   wysokości. Proporcja szersza niż w blokach, żeby wiersz nie urósł
   do wysokości bloku ze zdjęciem. */
.zbr__f--maly{margin-top:var(--s4);max-width:420px}
.zbr__f--maly img{aspect-ratio:3/2}
@media(max-width:1024px){.zbr__f--maly{max-width:none;margin-top:var(--s3)}}


/* ── NAJCZĘSTSZE PYTANIA ────────────────────────────────────
   Pytania stawiam ja, odpowiedzi składam wyłącznie z danych:
   czasy i liczby zabiegów ze stron oferty, kwoty z Booksy, adres
   i godziny z potwierdzonych odpowiedzi. Krótkie, konkretne akapity —
   takie cytują wyszukiwarki odpowiadające zdaniem, nie listą linków. */
.faq{padding:var(--s8) 0;background:var(--ciel-1);border-top:1px solid var(--linia)}
.faq__g{display:grid;gap:var(--s5) var(--s6)}
.faq__p{padding-top:var(--s4);border-top:1px solid var(--linia)}
.faq__p h3{margin:0 0 12px;font-size:var(--t5);line-height:var(--lh1);letter-spacing:var(--ls-t)}
.faq__p p{margin:0;color:var(--ink-2);font-size:var(--t3);line-height:var(--lh3);max-width:var(--miara)}
@media(min-width:900px){.faq__g{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── ZAMKNIĘCIE ZAKŁADKI ────────────────────────────────────── */
.kon{padding:var(--s8) 0;background:var(--ciel-2);border-top:1px solid var(--linia)}
.kon__g{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center}
.kon h2{font-size:var(--t7);line-height:var(--lh1);letter-spacing:var(--ls-t);margin:0 0 16px}
.kon p{margin:0;color:var(--ink-2);font-size:var(--t3);line-height:var(--lh3);max-width:var(--miara)}
.kon__b{display:flex;gap:var(--s4);flex-wrap:wrap}
.kon__z{margin:var(--s6) 0 0;padding-top:var(--s4);border-top:1px solid var(--linia);
  font-size:var(--t2);color:var(--ink-2)}
@media(max-width:880px){.kon__g{grid-template-columns:minmax(0,1fr)}}

/* ── POZOSTAŁE OBSZARY ──────────────────────────────────────── */
.inne{padding:var(--s8) 0;background:var(--ciel-1)}
.inne__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.inne__k{position:relative;display:grid;grid-template-rows:auto 1fr;
  border-top:1px solid var(--linia-m);padding-top:var(--s4)}
.inne__k h3{font-size:var(--t6);line-height:var(--lh1);margin:0 0 10px}
.inne__k h3 a::after{content:"";position:absolute;inset:0}
.inne__k p{margin:0 0 var(--s4);color:var(--ink-2);font-size:var(--t3);line-height:var(--lh3)}
@media(max-width:760px){.inne__g{grid-template-columns:minmax(0,1fr)}}

@media(hover:hover){
  /* Karta obszaru jest klikalna w całości (h3 a::after), więc strzałka
     robi krok razem z pogłębieniem kreski — tak samo jak w wierszach oferty. */
  .inne__k .fil__w{transition:border-color .24s var(--ease)}
  .inne__k:hover .fil__w{border-bottom-color:var(--ink)}
  .inne__k:hover .fil__w .ic{transform:translate(3px,-3px)}
}


/* ── ZABIEG: METRYKA, SZCZEGÓŁY, CENNIK ZBIORCZY ────────────
   Metryka to dwie liczby ze źródła — czas zabiegu i zalecana
   liczba powtórzeń. Stoją nad ceną, bo przy serii zabiegów to
   one decydują o rachunku, a nie kwota jednostkowa.           */
/* Pasma treści rozdziela dokładnie jedna kreska. Metryka rysuje górną,
   cennik własne, szczegóły domykają — inaczej między metryką a ceną
   biegły dwie linie w odstępie 32 px. */
.zbr__meta{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin:0 0 var(--s4);
  padding:var(--s3) 0 0;border-top:1px solid var(--linia)}
.zbr__meta div{margin:0}
.zbr__meta dt{font-size:var(--t1);font-weight:600;letter-spacing:var(--ls-w);
  text-transform:uppercase;color:var(--ink-2);margin-bottom:5px}
.zbr__meta dd{margin:0;font-size:var(--t3);font-weight:600;color:var(--ink)}

/* Wskazania, efekty i przeciwwskazania bywają listą na dwadzieścia
   pozycji. Rozwijane, bo rozwinięte zagłuszyłyby samą ofertę,
   a bez nich strona nie niosłaby tego, co niesie źródło.       */
.szcz{margin:0 0 var(--s5);max-width:var(--miara)}
.szcz summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:var(--cel);padding:14px 0;cursor:pointer;list-style:none;
  font-size:var(--t2);font-weight:600;letter-spacing:var(--ls-w);text-transform:uppercase;
  color:var(--akc)}
.szcz summary::-webkit-details-marker{display:none}
.szcz summary::after{content:"";flex:none;width:11px;height:11px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .24s var(--ease)}
.szcz[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.szcz summary:focus-visible{outline:2px solid var(--akc);outline-offset:4px}
/* Rozwinięty blok niesie całą treść ze strony oferty: dalszy ciąg opisu,
   przebieg zabiegu, wskazania, efekty, zalecenia przed i po, przeciwwskazania.
   Akapity idą pełną szerokością, listy w dwóch kolumnach — inaczej wskazania
   po dwadzieścia pozycji rozciągają blok na trzy ekrany. */
.szcz__g{display:grid;gap:var(--s4);padding:0 0 var(--s4)}
.szcz__p{margin:0 0 var(--s3);color:var(--ink-2);font-size:var(--t3);line-height:var(--lh3)}
.szcz__k{break-inside:avoid}
.szcz__t{margin:0 0 10px;font-size:var(--t1);font-weight:600;letter-spacing:var(--ls-w);
  text-transform:uppercase;color:var(--ink-2)}
.szcz__pod{display:block;margin-top:4px;font-weight:500;letter-spacing:var(--ls-0);
  text-transform:none;font-size:var(--t2);color:var(--akc)}
.szcz ul{margin:0;padding-left:1.15em;color:var(--ink-2);font-size:var(--t3);line-height:var(--lh3)}
.szcz li{margin-bottom:5px}
.szcz li::marker{color:var(--akc-2)}
@media(min-width:900px){
  .szcz__g{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s6)}
  .szcz__p{grid-column:1/-1;max-width:var(--miara)}
}

/* Cennik zbiorczy — tam, gdzie Booksy nie przypisuje pozycji do
   pojedynczego zabiegu (rehabilitacja). Lepiej podać go raz uczciwie,
   niż rozdzielać kwoty na oko.                                  */
.zbr__nota{margin:0 0 var(--s5);padding:14px 0;border-block:1px solid var(--linia);
  font-size:var(--t3);color:var(--ink-2);max-width:var(--miara)}
/* Odnosnik w zdaniu ma z natury wysokosc wiersza; wyscielenie podnosi
   pole trafienia do 30 px, wiec palec nie musi celowac w sam tekst. */
.zbr__nota a{display:inline-block;padding:4px 0;border-bottom:1px solid var(--linia-m);
  color:var(--akc);font-weight:600;transition:border-color .22s var(--ease)}
.zbr__nota a:hover{border-bottom-color:var(--akc)}
.zbr__cennik{scroll-margin-top:calc(var(--rzad-h-mal) + 70px);margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--linia-m)}
.zbr__cennik .cena{max-width:none}
.zbr__cennik .zbr__o{margin-bottom:var(--s4)}

/* Pozostałe obszary: pięć kart bez zdjęć, same nazwy i kierunek. */
.inne__g{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}


/* ── GDZIE JESTEM NA DŁUGIEJ STRONIE ────────────────────────
   Zakładka masaży ma czternaście pozycji i cztery ekrany wysokości.
   Bez zaznaczenia bieżącego zabiegu przyklejony pasek jest tylko
   spisem, a nie nawigacją — nie mówi, gdzie się właśnie jest.     */
.spis a{position:relative;color:var(--ink-2);
  transition:color .22s var(--ease),border-color .22s var(--ease)}
.spis a[aria-current]{color:var(--ink);font-weight:600;border-bottom-color:var(--akc)}

/* Na wąskim ekranie pasek przewija się w bok. Cieniowana krawędź mówi,
   że lista idzie dalej — inaczej ostatnia widoczna pozycja wygląda
   na ostatnią w ogóle. */
@media(max-width:760px){
  .spis{position:sticky}
  .spis::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;
    pointer-events:none;background:linear-gradient(to right,rgba(244,240,233,0),var(--ciel-2))}
}



/* ── GABINETY: DWA KADRY OBOK SIEBIE ────────────────────────
   Dwa zdjęcia w jednym rzędzie zamiast galerii — źródło miało tu
   sześć miniatur, a podstrona galerii z serwisu wypadła.        */
.war{padding:var(--s8) 0;background:var(--ciel-2);border-top:1px solid var(--linia)}
.war__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.war__f{margin:0;overflow:hidden;background:var(--ciel-3)}
.war__f img{width:100%;aspect-ratio:var(--prop);object-fit:cover}
@media(max-width:760px){.war__g{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}


/* ── CZYTELNOŚĆ NA TELEFONIE ────────────────────────────────
   Najmniejszy stopień pisma niesie same wersaliki z szerokim
   światłem: okruchy, nadtytuły, etykiety metryki, licznik koszyka.
   Przy 12,5 px na telefonie to najtrudniejszy do odczytania tekst
   na stronie, więc jeden stopień w górę — zmiana idzie przez token,
   nie przez łatanie pojedynczych reguł.
   Cele dotykowe schodzące poniżej 44 px dostają wysokość palca;
   WCAG wymaga 24, ale kciuk nie czyta norm.                     */
@media(max-width:760px){
  :root{--t1:.84rem}
  .stopka__pr a{display:inline-flex;align-items:center;min-height:44px}
  .inne__k .fil__w{min-height:44px}
  .okruch a,.okruch li>span{letter-spacing:.08em}
}


/* ── DUŻE EKRANY ────────────────────────────────────────────
   Powyżej szerokości kolumny treści kadr hero i pionowa szyna
   przestają trzymać się krawędzi okna, a zaczynają kolumny — inaczej
   przy 3440 px między tekstem a zdjęciem zostaje 940 px pustki,
   a szyna marki odjeżdża na sam brzeg ekranu, w oderwaniu od treści.
   Zdjęcie kończy się na tej samej pionowej linii co logo w nagłówku,
   pierwsza kolumna stopki i tytuły sekcji.                        */
@media(min-width:1660px){
  .hero__f{right:calc((100% - var(--wrap)) / 2)}
  .hero__szyna{left:calc((100% - var(--wrap)) / 2 - 28px)}
}

/* Na bardzo szerokich ekranach kolumna tekstu w hero przestaje rosnąć
   razem z oknem — 58 znaków w wierszu to granica, za którą oko gubi
   początek następnego. */
@media(min-width:2200px){
  .hero{min-height:clamp(660px,72svh,980px)}
  .hero__t{max-width:62ch}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .rv{opacity:1!important;transform:none!important}
  .rv img{scale:1!important}
  .fil__f img,.onas__f img,.loc__f img,.dl__f img{translate:none!important}
}