/* ==========================================================================
   LOCAL.hair — theme.css  (pixel-perfect, ADR-001)
   Źródło: docs/DESIGN_TOKENS.md + docs/SPEC.md + docs/figma/
   ========================================================================== */

/* 1) FONTY — Geologica self-host (wariant zmienny 200–700), latin + latin-ext */
@font-face{font-family:'Geologica';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('../fonts/geologica-latinext.woff2') format('woff2');
  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:'Geologica';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('../fonts/geologica-latin.woff2') format('woff2');
  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;}

/* 2) TOKENY */
:root{
  --c-cream:#FBF1E0; --c-cream-soft:#F7EFE4; --c-cream-3:#F6F1E9;
  --c-btn-ink:#F9EDD7; --c-btn-ink-2:#FAEACA;
  --c-navy:#1E2F6B; --c-pink:#D86FAC; --c-white:#FFFFFF; --c-img-ph:#D9D9D9;
  /* akapity: projekt Figma miał czerń 80% — klient wybrał granat dla spójności (ADR-002) */
  --c-body:rgba(30,47,107,.88); --c-overlay:rgba(250,234,202,.6);
  --r-btn:12px; --r-img:12px;
  --sh-btn:0 1px 2px 0 rgba(0,0,0,.05);
  --sh-img:3px 6px 5px 0 rgba(0,0,0,.30);
  --sh-img-mobile:8px 4px 0 0 rgba(0,0,0,.62);
  --sh-pill:0 4px 4px 0 rgba(0,0,0,.25);
  --font:'Geologica',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --content:1540px;
  /* skala kanwy: projekt to sztywne 1920px — poniżej tej szerokości renderujemy go proporcjonalnie (ADR-003).
     Bez tego marginesy boczne zjeżdżają z 190px do 24px, a typografia zostaje w skali 1:1 → efekt „przeskalowanej,
     rozciągniętej" strony. main.js doprecyzowuje wartość (clientWidth = bez paska przewijania). */
  --z:1;
}

/* 3) RESET */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;}
h1,h2,h3,h4,h5,h6,p,figure,ul,ol,blockquote{margin:0;padding:0;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
img,svg,picture{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--c-navy);outline-offset:3px;border-radius:3px;}
.site-footer :focus-visible,.testi :focus-visible{outline-color:var(--c-cream);}

/* 4) BAZA */
body{font-family:var(--font);color:var(--c-navy);background:var(--c-cream);font-weight:200;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
/* nadpisanie globalnych stylów wtyczek (np. SoulConnect body{...!important}) na stronach motywu */
body.lh-styled{font-family:var(--font)!important;background:var(--c-cream)!important;color:var(--c-navy)!important;}
/* SoulConnect kapuje header/footer na max-width:1360px (@min-width:1200px, przez :not(.dynamic-*)) —
   przywracamy pełną szerokość GLOBALNIE (nasz parametr, wyższa specyficzność 0,2,1 > 0,2,0 + !important) */
body .site-header:not(.dynamic-header),body .site-footer:not(.dynamic-footer){max-width:none!important;width:auto!important;}
/* SoulConnect wymusza globalnie `h1,h2,h3,h4,h5,h6{font-weight:500!important}` (inc/style.css) — klobruje wagi nagłówków z Figmy.
   Przywracamy pixel-perfect (ADR-001): H1=700, H2=600. Specyficzność 0,2,1 + !important bije 0,0,1 + !important SoulConnectu. (.t-h5 = 500 = zgodne, bez nadpisania) */
body.lh-styled .t-h1{font-weight:700!important;}
body.lh-styled .t-h2{font-weight:600!important;}
.page{position:relative;overflow-x:clip;flex:1 0 auto;display:flex;flex-direction:column;}
.wrap{width:min(var(--content),100% - 48px);margin-inline:auto;}
.section{position:relative;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ==========================================================================
   SKALA KANWY 1920 (desktop) — ADR-003
   Kanwa Figmy ma sztywne 1920px. Zoom sprawia, że wnętrze `.page` liczy się DALEJ w 1920px
   (100% = 1920), a renderuje się przeskalowane do szerokości okna → proporcje 1:1 z projektem
   na każdym desktopie (marginesy 190px, typografia, odstępy — wszystko skaluje się razem).
   Zakres: strony z kanwy Figmy (`lh-scale`: home + /team/). Na stronach funkcjonalnych
   (cennik, panel, koszyk, konto) skalujemy TYLKO header/stopkę — treść wtyczki zostaje 1:1,
   żeby nie zmniejszać tekstu formularzy i cennika.
   `body > .page` — NIE samo `.page`: WordPress dodaje klasę `page` także do <body> (skala nałożyłaby się 2×).
   ========================================================================== */
@media (min-width:900px){
  :root{--z:clamp(.62, 100vw / 1920, 1);}
  body.lh-scale > .page{zoom:var(--z);}
  body:not(.lh-scale) .site-header,
  body:not(.lh-scale) .site-footer{zoom:var(--z);}
}

/* 5) TYPOGRAFIA */
/* łamania rozbieżne między ramkami Figmy: .lh-br-m tylko mobile, .lh-br-d tylko desktop (CTA) */
@media (min-width:900px){.lh-br-m{display:none;}}
@media (max-width:899px){.lh-br-d{display:none;}}
.t-h1{font-weight:700;font-size:72px;line-height:68px;letter-spacing:-.08em;color:var(--c-navy);}
.t-h2{font-weight:600;font-size:48px;line-height:52px;letter-spacing:.1em;color:var(--c-navy);}
.t-h5{font-weight:500;font-size:22px;line-height:26px;letter-spacing:.1em;color:var(--c-navy);}
.t-eyebrow{font-weight:400;font-size:18px;line-height:26px;letter-spacing:.1em;text-transform:uppercase;}
.t-body{font-weight:200;font-size:18px;line-height:1.5;letter-spacing:.1em;color:var(--c-body);}

/* 6) PRZYCISKI */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 32px;min-height:52px;
  border-radius:var(--r-btn);font-weight:500;font-size:20px;line-height:1.5;letter-spacing:.1em;
  box-shadow:var(--sh-btn);white-space:nowrap;transition:background-color .28s ease,color .28s ease,transform .22s ease,box-shadow .28s ease;}
.btn--pink{background:var(--c-pink);color:var(--c-btn-ink);}
.btn--navy{background:var(--c-navy);color:var(--c-btn-ink);}
/* wszystkie przyciski: normal pink, HOVER = navy (+ lift). „Cennik" też pink (był navy = miał być hoverem) */
.btn:hover,.btn:focus-visible{background:var(--c-navy);color:var(--c-btn-ink);transform:translateY(-2px);box-shadow:0 8px 20px rgba(30,47,107,.22);}
.btn:active{transform:translateY(1px);}

/* 7) HEADER / NAV */
.site-header{position:relative;z-index:30;}
.header__inner{display:flex;align-items:center;gap:40px;padding-block:52px 75px;}
.header__logo img{width:199px;height:auto;}
.nav{margin-left:28px;margin-right:auto;}
.nav__list{display:flex;align-items:center;gap:47px;}
.nav__list a{font-weight:400;font-size:22px;line-height:26px;letter-spacing:.1em;text-transform:lowercase;color:var(--c-navy);}
.nav__list a{position:relative;white-space:nowrap;transition:color .15s ease;}
.nav__list a::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-10px;height:12px;opacity:0;transition:opacity .15s ease;
  background:url('../svg/nav-underline.svg') no-repeat center/contain;}
.nav__list a:hover{color:var(--c-pink);}
.nav__list a:hover::after,.nav__list .is-active a::after,.nav__list .current-menu-item>a::after,.nav__list .current_page_item>a::after,.nav__list .current-menu-ancestor>a::after{opacity:1;}
.header__actions{display:flex;align-items:center;gap:20px;margin-left:0;}
.header__actions .icon-link img{width:42px;height:42px;}
.hamburger{display:none;}
.mobile-menu{display:none;}

/* 8) HERO — 3 KARTY */
.hero-cards{padding-top:46px;}
.cards{display:flex;justify-content:center;gap:44px;}
.card{flex:0 0 auto;}
.card a{display:block;color:var(--c-navy);}
.card__img{display:flex;justify-content:center;align-items:flex-end;}
/* wysokość z kanwy Figmy (560px); bez `vw` — jednostki viewportu wewnątrz zoomu skalowałyby się drugi raz */
.card__img img{width:auto;height:560px;max-width:100%;}
.card__label{display:block;margin-top:26px;text-align:center;}

/* 9) HERO — NAGŁÓWEK */
.hero-intro{padding-top:118px;padding-bottom:0;}
.hero-intro__inner{max-width:686px;margin-inline:auto;text-align:center;}
.hero-intro__eyebrow{margin-top:33px;color:var(--c-navy);}
.hero-intro__body{margin-top:32px;text-align:center;max-width:599px;margin-inline:auto;}
.hero-intro__actions{display:flex;gap:44px;justify-content:center;margin-top:50px;}
.hero-intro__actions .btn{width:220px;}

/* 10) OTO MY I NASZA HISTORIA */
.history{padding-top:159px;padding-bottom:0;}
.history__inner{position:relative;max-width:1332px;min-height:547px;margin-inline:auto;display:flex;align-items:center;}
.history__blob{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0;pointer-events:none;}
.history__content{position:relative;z-index:1;width:100%;padding:0 150px;}
.history__title{max-width:560px;}
/* R3-4 (2026-08-03): body+link w jednym rzędzie (align-items:flex-end) → link zawsze na wysokości
   ostatniego wersu body, niezależnie od długości treści (wcześniej: position:absolute + stały bottom,
   kalibrowany pod krótszy placeholder Figmy — z realną treścią PL link „pływał" nad tekstem). */
.history__row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;}
.history__body{margin-top:24px;max-width:610px;}
.history__link{display:inline-flex;align-items:center;gap:16px;color:var(--c-pink);flex:0 0 auto;white-space:nowrap;}
.history__link img{width:75px;height:auto;}

/* 11) POZWÓL TWOIM WŁOSOM ZABŁYSNĄĆ (galeria) */
.gallery{padding-top:149px;padding-bottom:0;}
.gallery__title{margin-bottom:97px;max-width:700px;position:relative;z-index:21;}
.gallery__carousel{position:relative;}
/* ramki 1:1 z Figmą (pomiar z eksportu Home_V2E.png): kafel 228×612 (aktywny 488×612), odstęp 34px,
   passe-partout 34px po bokach / 44px góra / 48px dół, kolor #F6F1E9 (NIE biały), radius 10px.
   Suma 488+4×228+4×34 = 1536 ≤ 1540 → cała piątka mieści się w kolumnie treści jak w projekcie. */
.gallery__track{display:flex;gap:34px;align-items:stretch;}
.gallery__slide{position:relative;flex:0 0 228px;height:612px;background:var(--c-cream-3);padding:44px 34px 48px;border-radius:10px;box-shadow:2px 5px 10px rgba(0,0,0,.10);transition:flex-basis .3s ease;}
.gallery__slide img{width:100%;height:100%;object-fit:cover;display:block;}
.gallery__slide::after{content:"";position:absolute;inset:44px 34px 48px;background:var(--c-overlay);}
.gallery__slide.is-active{flex:0 0 488px;box-shadow:var(--sh-img);}
.gallery__slide.is-active::after{opacity:0;}
.dots{display:flex;gap:14px;justify-content:center;margin-top:34px;}
.dot{width:11px;height:11px;border-radius:50%;background:rgba(216,111,172,.4);padding:0;}
.dot.is-active{background:var(--c-pink);}

/* 12) SŁOWO OD CIEBIE (NAVY) */
.testi{background:var(--c-navy);color:var(--c-white);position:relative;margin-top:200px;margin-bottom:150px;}
/* R4-1c (2026-08-07): `?v2` w URL = cache-bust assetu (SVG leci z max-age 1 rok, a doszedł mu
   atrybut preserveAspectRatio="none" — bez tego przy szerokości >1920px SVG był „letterboxowany":
   rysunek zachowywał proporcje 1922:64 i wyśrodkowywał się, zostawiając płaskie brzegi pasa).
   R3-3 (2026-08-03): wave-divider.svg = źródło prawdy (DESIGN_TOKENS.md), nieregularny, 1922×64.
   Poprzednio: kafelek 240px repeat-x → widoczne szwy + zbyt równy wzór (uwaga klienta). Pełna szerokość, bez powtórzeń.
   Wariant cream przez mask (jeden plik SVG, tylko fill navy w źródle) zamiast duplikować asset w innym kolorze. */
/* R4-1 (2026-08-07): maska dawała falę ODWRÓCONĄ (krem nad krzywą, navy pod) — patrz zrzut r4/.
   Teraz bez maski: krem = tło pasa, navy fala = obrazek na wierzchu (fill w SVG = --c-navy 1:1).
   Artwork ma skośną, PRZEZROCZYSTĄ górną krawędź (0→9,9px) — dlatego rysujemy go w naturalnych
   64px, a pas ma 52px: górne 12px artworku jest przycięte poza pudełkiem i krem nie przecieka nad falę. */
.testi::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:52px;background:var(--c-cream) url('../svg/wave-divider.svg?v2') bottom/100% 64px no-repeat;z-index:2;pointer-events:none;}
/* kolumna sekcji = szerokość blobu z Figmy (blob-pink.svg 1058×498, pomiar w eksporcie: 1064px, wyśrodkowany).
   Nagłówek i CTA wyrównane do krawędzi tej kolumny — tak jak w projekcie (a nie do krawędzi treści). */
.testi__inner{position:relative;z-index:1;display:flex;flex-direction:column;padding:120px 0 150px;--testi-col:min(1064px,100%);}
.testi__title{color:var(--c-pink);align-self:center;width:var(--testi-col);}
.testi__card{position:relative;width:var(--testi-col);align-self:center;margin-top:44px;padding:90px clamp(40px,21%,232px);}
.testi__blob{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0;pointer-events:none;}
.testi__carousel{position:relative;z-index:1;text-align:center;}
.testi__name{color:var(--c-cream);margin-bottom:20px;}
.testi__quote{color:var(--c-cream);}
/* karuzela opinii — crossfade + STAŁA wysokość ramki (blob niezależny od długości opinii) */
.testi__track{position:relative;min-height:224px;}
.testi__slide{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .4s ease;}
.testi__slide.is-active{opacity:1;pointer-events:auto;}
.testi .dot{background:rgba(216,111,172,.4);}
.testi .dot.is-active{background:var(--c-pink);}
.testi__cta{align-self:center;width:var(--testi-col);text-align:right;margin-top:48px;}
.testi__cta-text{color:var(--c-btn-ink);max-width:440px;margin-left:auto;}
.testi__cta .btn{margin-top:28px;}

/* 13) CTA — MUSIMY POROZMAWIAĆ */
.cta{text-align:center;padding-block:120px 215px;}
.cta__inner{max-width:1120px;margin-inline:auto;} /* szer. dopasowana do 4-liniowego łamania H1 z Figmy („…Piękno zaczyna się" na jednej linii) */
.cta__body{margin-top:26px;text-align:center;}
.cta__actions{display:flex;gap:34px;justify-content:center;margin-top:40px;}

/* 14) FOOTER */
.site-footer{background:var(--c-navy);color:var(--c-pink);position:relative;padding:112px 0 44px;margin-top:auto;}
.site-footer a,.footer__copy{color:var(--c-pink);}
/* R3-3 (2026-08-03): jw. — wave-divider.svg pełną szerokością zamiast kafelka wave-navy.svg (fill już navy, bez maski).
   R4-1 (2026-08-07): artwork ma falę na DOLE, a nad stopką musi być na GÓRZE → obrót.
   Bez tego pas navy wisiał nad stopką z kremową szczeliną między falą a jej krawędzią (zrzut r4/).
   ROTATE(180°), nie scaleY(-1): pomiar profilu z eksportu Figmy pokazał, że w projekcie fala stopki
   to ten sam artwork obrócony o 180° (odbicie także w poziomie) — samo scaleY dawało średnio 3,7px
   (max 13px) rozjazdu krzywej, obrót daje 0,2px (max 2px) na 1600 kolumnach.
   Wysokość 52px + tło 64px: przycięcie skośnej krawędzi artworku, po obrocie = prosty styk ze stopką. */
.site-footer::before{content:"";position:absolute;left:0;bottom:100%;width:100%;height:52px;background:url('../svg/wave-divider.svg?v2') bottom/100% 64px no-repeat;transform:rotate(180deg);pointer-events:none;}
/* R2-6 (2026-07-31): układ jak w Figmie — klaster menu+konto+ikony wyśrodkowany między logo a social
   (spacery 1fr), legal wyśrodkowany pod nim; wiersz danych salonu (R2-1) pomiędzy. */
.footer__inner{display:grid;grid-template-columns:auto 1fr auto auto auto 1fr auto;
  grid-template-areas:"logo . nav account actions . social" "contact contact contact contact contact contact contact" "copy . legal legal legal . sygnet";
  align-items:center;column-gap:34px;row-gap:56px;}
.footer__logo{grid-area:logo;width:170px;height:auto;}
.footer__nav{grid-area:nav;}
.footer__menu{display:flex;gap:34px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.footer__nav a,.footer__account,.footer__legal a,.footer__copy,.footer__contact-item{font-weight:200;font-size:16px;letter-spacing:.05em;color:var(--c-pink);white-space:nowrap;}
.footer__account{grid-area:account;margin-left:104px;} /* Figma: przerwa menu↔„Moje Konto" ~138px (104+gap 34) */
.footer__actions{grid-area:actions;display:flex;gap:21px;}
.footer__social{grid-area:social;display:flex;gap:15px;}
.footer__actions img,.footer__social img{width:42px;height:42px;}
.footer__copy{grid-area:copy;}
.footer__legal{grid-area:legal;justify-self:center;}
.footer__legal-menu{display:flex;gap:40px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
/* R2-1 (2026-07-31): dane salonu w stopce — sekcja docelowa linku „Kontakt" (#kontakt).
   Zamówiona delta: projekt Figma nie zawierał danych; treść od klienta (adres/tel/mail). */
.footer__contact{grid-area:contact;font-style:normal;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:56px;row-gap:14px;}
/* Sygnet Universy (BRAND.md §Sygnet) — prawa krawędź wiersza legal (jak w Figmie); currentColor = wtapia w pink stopki */
.uni-sygnet-link{grid-area:sygnet;justify-self:end;display:inline-flex;align-items:center;line-height:0;}
.uni-sygnet{width:auto;height:18px;fill:currentColor;opacity:.55;transition:opacity .2s ease;}
.uni-sygnet-link:hover .uni-sygnet,.uni-sygnet-link:focus-visible .uni-sygnet{opacity:1;}
@media (prefers-reduced-motion:reduce){.uni-sygnet{transition:none;}}

/* ==========================================================================
   A11Y / ROBUSTNESS (audyt E9)
   ========================================================================== */
body.menu-open{overflow:hidden;}
/* skip-link widoczny na focusie (klasa .sr-only jako baza) */
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;margin:0;padding:10px 18px;clip:auto;clip-path:none;white-space:normal;background:var(--c-navy);color:var(--c-cream);border-radius:8px;z-index:9999;}
/* powiększony cel kliknięcia kropek karuzeli (WCAG 2.5.8 — 24px) bez zmiany wyglądu */
.dot{position:relative;}
.dot::before{content:"";position:absolute;inset:-8px;border-radius:50%;}
/* galeria: przy szerokościach, gdzie kanwa przestaje się skalować (poniżej ~1190px) piątka kafli
   może nie zmieścić się w kolumnie treści — wtedy scroll poziomy zamiast przycięcia (przy pełnej skali nieaktywny) */
@media (min-width:900px){
  .gallery__track{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:6px;}
  .gallery__track::-webkit-scrollbar{display:none;}
  .gallery__slide{scroll-snap-align:start;}
}
/* fallback stron/wpisów (index.php) — treść WP z zachowaniem stylu motywu */
.page-content{padding-block:90px 130px;min-height:46vh;position:relative;z-index:2;}
body.woocommerce-checkout .page-content{padding-block:0;}
@media (min-width:900px){body.woocommerce-checkout .page-content{padding-top:40px;}}
/* Moje konto — logowanie: treść wyżej, luz u dołu (odwrócone odstępy w boksie)
   R3-1 (2026-08-03): + margin-bottom — box siedział tuż przy fali stopki (domyślny margines SoulConnect ~36px). */
body.woocommerce-account .woocommerce-form-login{padding-top:40px!important;padding-bottom:100px!important;margin-bottom:120px;}
.entry__title{margin-bottom:28px;}
.home .entry__content{max-width:840px;}
.entry__content>*{margin-bottom:1.1em;}
.entry__content>*:last-child{margin-bottom:0;}
.entry__content a{color:var(--c-pink);text-decoration:underline;}
.entry__content h2{font-size:clamp(26px,3vw,40px);line-height:1.15;margin:1.4em 0 .5em;color:var(--c-navy);}
.entry__content h3{font-size:22px;margin:1.2em 0 .4em;color:var(--c-navy);}
.entry__content ul,.entry__content ol{padding-left:1.4em;list-style:revert;}
.entry__content img{max-width:100%;height:auto;border-radius:8px;}

/* WC Checkout (/zamowienie/) — ukryty header + stopka (życzenie klienta; header nachodził na modale rezerwacji SoulConnect). Limit 840px .entry__content scope'owany do .home. */
body.woocommerce-checkout .site-header,
body.woocommerce-checkout .site-footer{display:none;}

/* R2-2/3 (uwagi klienta 2026-07-31): desktop — treść podstron nie rozciąga się już na pełne okno.
   Strony tekstowe = kolumna czytelnicza 840px; funkcyjne = szersza kolumna wyśrodkowana.
   Tylko ≥900px — na telefonie klient potwierdził poprawny wygląd. Nowa strona prawna = dopisać page-id. */
@media (min-width:900px){
  body.page-id-163 .entry,body.page-id-164 .entry{max-width:840px;margin-inline:auto;} /* regulamin, polityka prywatności (=cookies) */
  body.page-id-145 .entry,body.woocommerce-account .entry{max-width:1100px;margin-inline:auto;} /* cennik, moje konto */
  body.woocommerce-account .woocommerce-form-login{max-width:660px;margin-inline:auto;} /* box logowania węższy niż pulpit konta */
  body.woocommerce-checkout .entry{max-width:1140px;margin-inline:auto;} /* zamówienie: rezerwacja + voucher */
}
/* R2-4: strona Cennik bez widocznego nagłówka „Cennik" (H1 zostaje dla czytników ekranu/SEO) */
body.page-id-145 .entry__title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ==========================================================================
   ANIMACJE — scroll-reveal (JS: .reveal → .is-in) + hover micro-interakcje
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:var(--rd,0ms);will-change:opacity,transform;}
.reveal.is-in{opacity:1;transform:none;}
/* Hero: karty wchodzą animacją na load — pewne przy KAŻDYM reloadzie (bez wyścigu JS/IO) */
.hero-cards .card{opacity:1;animation:heroIn .7s cubic-bezier(.22,.61,.36,1) backwards;}
.hero-cards .card:nth-child(1){animation-delay:.08s;}
.hero-cards .card:nth-child(2){animation-delay:.20s;}
.hero-cards .card:nth-child(3){animation-delay:.32s;}
@keyframes heroIn{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
@keyframes teamIn{from{opacity:0;transform:translateY(32px) rotate(var(--rot,0deg));}to{opacity:1;transform:translateY(0) rotate(var(--rot,0deg));}}
.card a{transition:transform .38s cubic-bezier(.22,.61,.36,1);}
.card a:hover,.card a:focus-visible{transform:translateY(-8px);}
.card__img img{transition:transform .55s cubic-bezier(.22,.61,.36,1);}
.card a:hover .card__img img,.card a:focus-visible .card__img img{transform:scale(1.05);}
.history__link img{transition:transform .3s ease;}
.history__link:hover img,.history__link:focus-visible img{transform:translateX(10px);}
.gallery__slide.is-active img{transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.gallery__slide.is-active:hover img{transform:scale(1.05);}
/* R4-3 (2026-08-07): kafle galerii przełącza najechanie kursorem (JS: data-hover-select) —
   kursor „rączka" jako sygnał, że kafel reaguje; przygaszenie nieaktywnych schodzi płynnie. */
@media (hover:hover){.gallery__slide{cursor:pointer;}}
.gallery__slide::after{transition:opacity .3s ease;}
.icon-link img{transition:transform .25s ease;}
.icon-link:hover img,.icon-link:focus-visible img{transform:translateY(-3px) scale(1.08);}
@media (prefers-reduced-motion:reduce){.reveal,.hero-cards .card,body.post-type-archive-team .sc-team-card{opacity:1!important;transform:none!important;animation:none!important;}}
@media print{.reveal,.hero-cards .card,body.post-type-archive-team .sc-team-card{opacity:1!important;transform:none!important;animation:none!important;}}

/* SoulConnect renderuje część tekstów własnym #333 (cennik: nazwy usług, nagłówek kategorii głównej).
   Spójność marki = granat (ADR-002) — nadpisujemy na wszystkich stronach ze stylem motywu. */
body.lh-styled .service-name,
body.lh-styled .main-category-title,
body.lh-styled .sc-team-archive{color:var(--c-navy)!important;}

/* ==========================================================================
   TEAM (SoulConnect CPT) — /team/ archiwum + /team/{slug}/ single — 1:1 z Figmą
   (SoulConnect styluje bez !important → nadpisujemy wyższą specyficznością/!important)
   ========================================================================== */
/* ---- Archiwum: scattered polaroidy, 3 kolumny ---- */
/* `width:100%` konieczne: wtyczka daje kontenerowi `margin:0 auto`, a auto-marginesy wyłączają rozciąganie
   elementu we flex-kolumnie `.page` → bez tego szerokość spadała do fit-content (siatka zwężała kafle). */
body.post-type-archive-team .sc-team-archive{width:100%;max-width:1360px;margin-inline:auto;padding:64px 24px 104px;}
body.post-type-archive-team .sc-team-archive-head{display:none;}
body.post-type-archive-team .sc-team-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:74px 56px!important;background:none!important;max-width:none!important;padding:0!important;}
/* polaroid 1:1 z Figmą (pomiar z Team.png, kanwa 1920): karta 360×450, zdjęcie 320×350 (aspect 320/350),
   passe-partout 20px boki / 24px góra = 5,55% / 6,7% szerokości karty, dolna „warga" pod podpis = 20,8%,
   tło #F6F1E9 (NIE białe), podpis wcięty o ~4,2% względem zdjęcia. Wartości procentowe — kafle są u nas
   nieco większe od projektu (życzenie klienta), więc proporcje ramki trzymają się przy każdej szerokości. */
body.post-type-archive-team .sc-team-card{display:block!important;background:var(--c-cream-3)!important;border:0!important;padding:5.55% 5.55% 0!important;border-radius:2px!important;box-shadow:6px 13px 28px rgba(30,47,107,.18)!important;text-decoration:none;--rot:0deg;transform:rotate(var(--rot));opacity:1;animation:teamIn .6s cubic-bezier(.22,.61,.36,1) backwards;transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease;}
body.post-type-archive-team .sc-team-photo,
body.post-type-archive-team .sc-team-card img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:320/350!important;object-fit:cover!important;border-radius:0!important;background:var(--c-img-ph)!important;}
body.post-type-archive-team .sc-team-photo--empty{display:block!important;}
body.post-type-archive-team .sc-team-photo--empty svg{display:none!important;}
body.post-type-archive-team .sc-team-name{display:block!important;color:var(--c-pink)!important;text-transform:lowercase!important;font-family:var(--font)!important;font-weight:500!important;font-size:26px!important;line-height:1.2!important;letter-spacing:.02em!important;text-align:left!important;padding:9.4% 0 5.9% 4.2%!important;}
body.post-type-archive-team .sc-team-card:nth-child(7n+1){--rot:-3.4deg;animation-delay:.06s;}
body.post-type-archive-team .sc-team-card:nth-child(7n+2){--rot:2.2deg;animation-delay:.14s;}
body.post-type-archive-team .sc-team-card:nth-child(7n+3){--rot:-1.3deg;animation-delay:.22s;}
body.post-type-archive-team .sc-team-card:nth-child(7n+4){--rot:2.9deg;animation-delay:.30s;}
body.post-type-archive-team .sc-team-card:nth-child(7n+5){--rot:-2.5deg;animation-delay:.38s;}
body.post-type-archive-team .sc-team-card:nth-child(7n+6){--rot:1.1deg;animation-delay:.46s;}
body.post-type-archive-team .sc-team-card:nth-child(7n){--rot:-2.9deg;animation-delay:.54s;}
body.post-type-archive-team .sc-team-card:hover{transform:rotate(0) translateY(-8px) scale(1.02);box-shadow:8px 18px 34px rgba(30,47,107,.24)!important;position:relative;z-index:3;}

/* ---- Single: granatowy blob + polaroid + bio + cennik pracownika ---- */
.sc-team-single{width:100%;max-width:1200px;margin-inline:auto;padding:36px 24px 72px;}
.sc-team-single .sc-team-back{display:inline-block;color:var(--c-navy)!important;font-weight:400;letter-spacing:.05em;margin-bottom:18px;text-decoration:none;font-size:18px;transition:color .15s ease;}
.sc-team-single .sc-team-back:hover{color:var(--c-pink)!important;}
.sc-team-single .sc-team-single-head{position:relative!important;display:flex!important;flex-direction:row!important;gap:64px!important;align-items:flex-start!important;text-align:left!important;padding:24px 0 0!important;margin:0 0 52px!important;}
/* polaroid jak w Figmie (Team_Member.png): karta 360×450, zdjęcie 320×350, ramka 20/24/75px, obrót −3°,
   ale BEZ podpisu w wardze (życzenie klienta) — dolna warga zostaje jako element formatu, pusta.
   Granatowy blob-ramka z projektu pozostaje pominięty: realne bio (~24 linie) nie mieści się w poziomym blobie. */
.sc-team-single .sc-team-single-photo{position:relative;z-index:1;flex:0 0 360px!important;background:var(--c-cream-3);padding:24px 20px 75px;border-radius:2px;box-shadow:6px 13px 28px rgba(30,47,107,.18);transform:rotate(-3deg);margin-top:12px;}
.sc-team-single .sc-team-single-img{width:100%!important;height:auto!important;aspect-ratio:320/350!important;object-fit:cover!important;border-radius:0!important;}
.sc-team-single .sc-team-single-intro{position:relative;z-index:1;flex:1;max-width:660px;}
.sc-team-single .sc-team-single-name{position:relative;color:var(--c-pink)!important;text-transform:lowercase!important;font-family:var(--font)!important;font-weight:500!important;font-size:30px!important;line-height:1.1!important;margin:0 0 26px!important;padding-bottom:16px!important;}
.sc-team-single .sc-team-single-name::after{content:"";position:absolute;left:2px;bottom:0;width:116px;height:10px;background:url('../svg/nav-underline.svg') no-repeat left center/contain;}
.sc-team-single .sc-team-single-desc{color:var(--c-body);font-weight:300;}
.sc-team-single .sc-team-single-desc p{margin:0 0 1em;}
.sc-team-single .sc-team-single-desc p:last-child{margin-bottom:0;}
.sc-team-single .sc-team-single-cennik{margin-top:56px;}
.sc-team-single .sc-team-single-cennik-title{display:none!important;}
.sc-team-single .main-category-title{text-align:center!important;}
.sc-team-single .book-btn{background:var(--c-pink)!important;color:var(--c-btn-ink)!important;border:0!important;border-radius:var(--r-btn)!important;box-shadow:var(--sh-btn)!important;transition:filter .15s ease,transform .2s ease;}
.sc-team-single .book-btn:hover{transform:translateY(-2px);filter:brightness(1.04);}
.staff-price-btn{text-decoration:none!important;}

/* ---- Team mobile ---- */
@media(max-width:899px){
  body.post-type-archive-team .sc-team-archive{padding:44px 10px 80px;}
  body.post-type-archive-team .sc-team-grid{grid-template-columns:1fr 1fr!important;gap:26px 18px!important;}
  body.post-type-archive-team .sc-team-name{font-size:19px!important;padding:12px 2px 16px!important;}
  body.post-type-archive-team .sc-team-card:hover{transform:rotate(var(--rot))!important;box-shadow:5px 12px 26px rgba(30,47,107,.16)!important;}
  .sc-team-single .sc-team-single-head{flex-direction:column!important;align-items:center!important;text-align:center!important;padding:8px 0 0!important;gap:28px!important;}
  .sc-team-single .sc-team-single-head::before{display:none;}
  /* ramka proporcjonalna do węższej karty na telefonie (5,55% / 6,7% / 20,8% z ~280px) */
  .sc-team-single .sc-team-single-photo{flex:0 0 auto!important;width:min(280px,82%);padding:19px 16px 58px;transform:rotate(-2deg);}
  .sc-team-single .sc-team-single-name{text-align:center!important;}
  .sc-team-single .sc-team-single-name::after{left:50%!important;transform:translateX(-50%);}
  .sc-team-single .main-category-title{text-align:left!important;}
}

/* ==========================================================================
   RESPONSIVE — mobile (<900px)
   ========================================================================== */
@media (max-width:899px){
  /* łamania nagłówków 1:1 z Figmą — TAKŻE na mobile (projekt mobilny ma te same łamania; ukrywanie sklejało słowa) */
  .t-h1{font-size:36px;line-height:34px;}
  .t-h2{font-size:32px;line-height:36px;}
  .t-h5{font-size:18px;line-height:26px;}
  .t-eyebrow{font-size:14px;line-height:26px;}
  .t-body{font-size:14px;}
  .btn{font-size:16px;min-height:48px;padding:16px 28px;}

  /* header */
  .header__inner{gap:16px;width:100%;padding:0;}
  .header__logo img{width:110px;}
  .nav{display:none;}
  .header__actions{margin-left:auto;gap:14px;}
  .header__actions .icon-link img{width:32px;height:32px;}
  .hamburger{display:inline-flex;}
  .hamburger img{width:28px;height:22px;}
  .mobile-menu{display:none;margin-top:14px;margin-inline:-20px;background:var(--c-cream);border-top:1px solid rgba(30,47,107,.12);box-shadow:0 16px 26px -12px rgba(30,47,107,.18);}
  .mobile-menu.is-open{display:block;animation:mm-in .22s ease;}
  @keyframes mm-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
  .mobile-menu ul{display:flex;flex-direction:column;gap:0;padding:4px 24px 16px;list-style:none;margin:0;}
  .mobile-menu li{border-bottom:1px solid rgba(30,47,107,.08);}
  .mobile-menu li:last-child{border-bottom:none;}
  .mobile-menu a{display:block;padding:16px 2px;font-size:19px;text-transform:lowercase;letter-spacing:.06em;color:var(--c-navy);transition:color .15s ease;}
  .mobile-menu a:focus-visible,.mobile-menu .current-menu-item>a{color:var(--c-pink);}
  /* :hover tylko tam, gdzie istnieje wskaźnik. Na dotyku hover „przykleja się" po tapnięciu
     i pozycja zostaje różowa do kolejnego dotknięcia — wyglądało to jak stałe podświetlenie. */
  @media (hover:hover){.mobile-menu a:hover{color:var(--c-pink);}}

  /* karty: 2 w rzędzie + zespół (lewa) */
  .hero-cards{padding-top:50px;}
  .cards{flex-wrap:wrap;justify-content:flex-start;gap:16px;max-width:none;}
  .card{flex:0 0 calc(50% - 8px);}
  .card a:hover,.card a:focus-visible,.card a:hover .card__img img,.card a:focus-visible .card__img img{transform:none!important;}
  .card__img img{width:100%;height:auto;}
  .card__label{text-align:center;}

  /* hero heading (wyśrodkowany, tylko „Nasza oferta") */
  .hero-intro{padding-top:96px;}
  .hero-intro__inner{max-width:none;text-align:center;}
  .hero-intro__eyebrow{margin-top:24px;}
  .hero-intro__body{text-align:center;margin-top:24px;max-width:none;}
  .hero-intro__actions{justify-content:center;gap:16px;margin-top:32px;}
  .hero-intro__actions .btn{width:auto;}
  .hero-intro__actions .btn:first-child{display:none;}

  /* historia — ramka blob (CSS klienta: szeroki blob przesunięty w lewo, prawa krawędź = obrys) */
  .history{padding-top:150px;}
  /* R4-2 (2026-08-07): blob był kotwiczony do LEWEJ (left:-975px) przy stałej szerokości 1350px,
     więc jego prawa krawędź stała w miejscu (x=399) niezależnie od szerokości ekranu, a tekst rósł
     z viewportem → od ~400px tekst wchodził na ramkę (zrzut r4/mobile-430-przed.png).
     Teraz kotwica po PRAWEJ (jak w projekcie: ramka dochodzi do krawędzi kanwy) → prześwit
     tekst↔ramka jest taki sam na każdym telefonie. */
  .history__blob{display:block;position:absolute;inset:auto;width:1350px;height:auto;object-fit:fill;z-index:0;pointer-events:none;max-width:unset;left:auto;right:-22px;top:50%;transform:translateY(-50%);}
  .history__inner{min-height:0;max-width:none;}
  /* R3-4 (2026-08-03): +padding-top — tytuł (3 wersy w PL, dłuższy niż placeholder) dotykał górnej
     krawędzi blobu w tym oknie kadrowania (blob szerszy niż viewport, wycinek ~1/4 artworku). */
  .history__content{padding:34px 40px 0 0;text-align:left;}
  .history__title{max-width:none;}
  /* R4-2: +26px prawego marginesu TYLKO dla treści i linku (razem 66px = proporcja z projektu:
     kolumna tekstu 24…311 na kanwie 402). Tytuł zostaje przy 40px, bo leży w pasie, w którym łuk
     ramki jest szerszy (obrys ~vw−34 zamiast ~vw−70) — dzięki temu „i nasza historia" mieści się
     w jednym wersie tak jak w projekcie. */
  .history__row{display:block;padding-right:26px;}
  .history__body{max-width:none;}
  /* R4-2: strzałka miała rozmiar desktopowy (75px). Projekt mobilny: 49px, odstęp 21px
     (pomiar Home_Mobile_V2E.png: tekst do x=200, strzałka 221→270). Link ma nowrap i stałą
     szerokość, więc krótsza strzałka to też zapas dla ramki na najwęższych ekranach (≤360px). */
  .history__link{margin-top:24px;gap:21px;}
  .history__link img{width:49px;}

  /* R4-2: poniżej 360px kanwa projektu (402) jest tak dużo szersza od ekranu, że kolumna tekstu
     robi się wąska, treść rośnie w pionie i wychodzi poza ramkę (blob ma stałą wysokość 557px),
     a prawy obrys nie ma już gdzie się zmieścić obok tekstu. Na takich ekranach zostaje kadr
     sprzed R4-2: ramka otwarta z prawej (obrys poza ekranem), tekst na pełnej szerokości.
     Pomiar na 320px: kolizja tytułu z obrysem 1124px² (kadr sprzed) vs 4872px² (kadr nowy). */
  @media (max-width:359px){
    .history__blob{left:-975px;right:auto;}
    .history__row{padding-right:0;}
  }

  /* galeria: 1 na raz — crossfade (animacja) */
  .gallery{padding-top:210px;}
  .gallery__title{margin-bottom:40px;}
  .gallery__track{gap:0;display:block;position:relative;}
  .gallery__slide{flex:0 0 100%!important;height:auto;aspect-ratio:301/372;box-shadow:none;display:block;position:absolute;top:0;left:0;width:100%;opacity:0;pointer-events:none;transition:opacity .45s ease;}
  .gallery__slide.is-active{position:relative;opacity:1;pointer-events:auto;box-shadow:var(--sh-img);}
  .gallery__slide::after{display:none;}

  /* navy — ramka blob (CSS klienta, centrowany 800px). Różowe falbanki usunięte (decyzja klienta 2026-07-30). */
  .testi{margin-top:100px;margin-bottom:90px;position:relative;overflow:hidden;}
  .testi__inner{display:flex;flex-direction:column;gap:100px;padding-block:70px;position:relative;z-index:2;}
  .testi__title,.testi__cta{position:static;left:auto;top:auto;width:auto;margin-left:0;align-self:stretch;}
  .testi__cta-text{max-width:none;margin-left:0;}
  .testi__title{padding-left:44px;}
  .testi__card{position:relative;padding:8px 0 0;margin-top:0;text-align:center;}
  .testi__blob{display:block;position:absolute;inset:0;width:800px;height:auto;object-fit:fill;z-index:0;pointer-events:none;max-width:unset;left:50%;top:50%;transform:translate(-50%,-50%);}
  .testi__track{min-height:230px;}
  /* R3-7 (2026-08-03): mobile ma dużo mniej paddingu w karcie niż desktop (8px vs 90px) → kropki
     kończyły się tuż przy dolnej krawędzi bloba. Dodatkowy odstęp tylko w sekcji opinii (nie galeria). */
  .testi .dots{margin-bottom:28px;}
  .testi__carousel{position:relative;z-index:1;}
  .testi__cta{margin-top:0;text-align:center;}

  /* cta (wyśrodkowany) */
  .cta{text-align:center;padding-block:60px 100px;}
  .cta__inner{max-width:none;}
  .cta__body{text-align:center;}
  .cta__actions{flex-direction:column;align-items:center;gap:16px;}
  .cta__actions .btn{width:100%;max-width:190px;}
  .cta__actions .btn:nth-child(2){order:-1;}

  /* footer — 2 kolumny wg projektu (menu | konto+ikony), potem wyśrodkowane: legal, copy, sygnet */
  .site-footer{padding:56px 0 28px;}
  /* R4-1 (2026-08-07): było `background-size:120px 34px` bez repeat (pozostałość po kafelku 120px
     z wersji sprzed R3-3) → na telefonie wyświetlał się TYLKO 120-px strzępek fali przy lewej krawędzi.
     Projekt mobilny (Home_Mobile_V2E.png, kanwa 402): amplituda 21px, fala co ~97px → artwork
     (1922×64, amplituda 44) skalujemy do 920×31 i powtarzamy w poziomie; pas = 25px (te same 19%
     przycięcia skośnej krawędzi co na desktopie). Szew kafla wypada dopiero za 920px, czyli poza
     zakresem tego breakpointu (<900px). */
  .testi::after,.site-footer::before{height:25px;background-size:920px 31px;background-repeat:repeat-x;}
  .footer__logo,.footer__nav,.footer__account,.footer__actions,.footer__social,.footer__copy,.footer__legal{position:static;left:auto;top:auto;}
  .footer__inner{min-height:0;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:38px;align-items:start;
    grid-template-areas:"logo logo" "nav account" "nav actions" "nav social" "contact contact" "legal legal" "copy copy" "sygnet sygnet";}
  .footer__logo{justify-self:center;margin-bottom:8px;}
  .footer__account{justify-self:start;margin-left:0;}
  .footer__contact{flex-direction:column;gap:12px;justify-self:center;text-align:center;}
  .footer__contact-item{white-space:normal;} /* adres musi móc się złamać na wąskich ekranach */
  .footer__legal{justify-self:center;}
  .footer__copy{justify-self:center;text-align:center;}
  .uni-sygnet-link{grid-area:sygnet;justify-self:center;margin-top:4px;}
  .footer__menu{flex-direction:column;gap:22px;}
  .footer__legal-menu{flex-direction:column;gap:18px;align-items:center;}
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

/* ================================================================================
   KREATOR REZERWACJI + KASA — czytelność elementów (P-002)

   Zmierzone na żywo: pola, kafle i godziny mają tło #F6F1E9 na tle strony #FBF1E0
   (kontrast 1.00:1), a obwódkę #EFE5D2 (1.11:1) — element praktycznie znika.
   Wypełnieniem tego się nie naprawi: biel na tym kremie to 1.12:1. Separację niesie
   LINIA w granacie marki. Stan wybrany zostaje nietknięty (granat + krem = 11.2:1).

   Naprawiamy na poziomie ZMIENNYCH wtyczki, nie pojedynczych reguł: SoulConnect trzyma
   wszystkie obwódki w --sc-border-color (17 użyć) i --sc-other-border-color (42 użycia),
   a wstrzykuje je na :root z !important. Część jego reguł ma selektory z ID
   (#beauty-calendar, #beauty-calendar-hours), więc nadpisywanie element po elemencie
   i tak by przegrało. Zmienna dziedziczy się z body i wygrywa niezależnie od specyficzności.
   ================================================================================ */
:root{
  --lh-line:rgba(30,47,107,.55);      /* obrys elementu interaktywnego — 3.2:1 na kremie (WCAG 1.4.11) */
  --lh-line-soft:rgba(30,47,107,.20); /* separator dekoracyjny */
  --lh-tint:rgba(30,47,107,.06);      /* welon pod kursorem */
}

body.lh-styled{
  --sc-other-border-color:var(--lh-line)!important;
  --sc-border-color:var(--lh-line)!important;
}

/* Cztery miejsca używają --sc-other-border-color jako TŁA, nie obwódki (odznaki statusu
   i pasek postępu pakietów w panelu klienta) — tam zostaje pierwotny krem. */
body.lh-styled .sc-pakiet-badge--depleted,
body.lh-styled .sc-pakiet-progress-bar,
body.lh-styled .reservation-status-badge--pending,
body.lh-styled .reservation-status-badge--other{background:#EFE5D2!important;}

/* Dni kalendarza jako jedyne rysują obwódkę kolorem TŁA strony (--sc-background-color),
   więc zmienna obwódki ich nie dotyczy — trzeba wprost. Puste komórki zostają nieme. */
body.lh-styled .calendar-day.available:not(.selected):not(.active){border-color:var(--lh-line)!important;}
body.lh-styled .calendar-day.empty{border-color:transparent!important;}

/* Hover: delikatny granatowy welon + mocniejsza linia. Bez skoku układu. */
body.lh-styled .hour-slot:not(.selected):not(.active):hover,
body.lh-styled .calendar-day.available:not(.selected):not(.active):hover,
body.lh-styled .beauty-staff-tile:not(.active):hover{background:var(--lh-tint)!important;border-color:var(--c-navy)!important;}

/* Fokus klawiaturą: róż marki poza obrysem — nie myli się z granatem stanu wybranego. */
body.lh-styled .hour-slot:focus-visible,
body.lh-styled .calendar-day:focus-visible,
body.lh-styled .beauty-staff-tile:focus-visible,
body.lh-styled input:not([type=hidden]):focus,
body.lh-styled select:focus,
body.lh-styled textarea:focus{outline:2px solid var(--c-pink)!important;outline-offset:2px!important;border-color:var(--c-navy)!important;}

/* Checkbox regulaminu i radia płatności — systemowy błękit przeglądarki na granat marki. */
body.lh-styled input[type=checkbox],
body.lh-styled input[type=radio]{accent-color:var(--c-navy)!important;}

/* Podpowiedzi w polach były systemową szarością #757575 — poza paletą marki. */
body.lh-styled input::placeholder,
body.lh-styled textarea::placeholder{color:rgba(30,47,107,.62)!important;opacity:1!important;}

/* Wiersze usług: separator dekoracyjny, nie ramka przycisku. */
body.lh-styled .service-row{border-bottom-color:var(--lh-line-soft)!important;}