/* ==========================================================================
   PRZESTRZEŃ PIĘKNA I RELAKSU — fundament
   Ładowany na każdej podstronie. Świat wizualny dokłada się osobnym plikiem.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETA — wartości dosłowne, nigdy się nie zmieniają
   -------------------------------------------------------------------------- */

:root {

  /* --- KANON Z KSIĘGI ZNAKU — nie ruszać ---------------------------------
     Te dwa kolory to jedyne wartości zdefiniowane w identyfikacji wizualnej
     (IdentyfikacjaWizualna_MartaJoszko_v3.pdf, strona „Kolorystyka").
     Wszystko poniżej to zatwierdzone rozszerzenie palety na potrzeby serwisu. */
  --pruski:            #003646;   /* Pruski Niebieski  R0  G54  B70  */
  --proszkowy:         #9BD8DA;   /* Proszkowy Niebieski R155 G216 B218 */

  /* --- Złoto (rozszerzenie) --- */
  --zloto-jasne:       #D9B36A;
  --zloto:             #B6893A;
  --zloto-swiatlo:     #E0BE78;
  --zloto-cien:        #8A6520;
  --zloto-b-jasne:     #EFD5A4;   /* wariant barbera — jaśniejszy, na ciemnym tle */
  --zloto-b:           #C79A4E;
  --zloto-b-swiatlo:   #F1D9A6;
  --zloto-spa:         #A97F35;   /* wariant szałwiowy — cieplejszy */
  --zloto-spa-jasne:   #D3B27A;

  /* --- Granaty --- */
  --granat-2:          #00303E;
  --granat-3:          #00262F;
  --granat-4:          #00212C;
  --granat-5:          #001A22;
  --granat-6:          #0A4053;
  --granat-7:          #0A3040;
  --granat-8:          #0B3B4B;
  --granat-9:          #093442;

  /* --- Róże i kremy (świat Studio) --- */
  --krem:              #FDFAF8;
  --krem-2:            #F7F1EE;
  --roz-1:             #FDF6F4;
  --roz-2:             #F8EAE6;
  --roz-3:             #FBF3EC;
  --roz-4:             #FBEDEA;
  --roz-5:             #F6E2DE;
  --roz-6:             #F0DFDA;
  --roz-7:             #E9D3CE;
  --roz-8:             #EFE3E0;
  --roz-9:             #E8D8D4;
  --roz-akcent:        #EEC4BE;
  --terakota:          #9A5C50;
  --bordo:             #6B3A38;   /* ciemny róż — pasek światów w świecie Beauty */
  --roz-przygaszony:   #D9B8B2;

  /* --- Piasek i karmel (świat Hair, od 0.13) ---
     Wariant B z podglądu palet: Beauty zostaje w różu, Hair dostaje ciepły
     piasek. Żadnego nowego odcienia spoza rodziny ciepłej — złoto i pruski
     granat zostają wspólne. Kontrasty sprawdzone wg WCAG 2.1:
     karmel na tle 5,2:1 · złoto na ciemnym karmelu 5,5:1. */
  --piasek-1:          #FBF7F1;   /* tło główne */
  --piasek-2:          #F3EADC;   /* tło przemienne */
  --piasek-3:          #F8F1E6;
  --piasek-4:          #F5ECDF;
  --piasek-5:          #EFE3D1;
  --piasek-6:          #EEE4D6;   /* paski placeholdera zdjęć */
  --piasek-7:          #E6D9C6;
  --piasek-linia:      #EDE2D2;
  --piasek-linia-2:    #E2D3BE;
  --karmel:            #8A5F38;   /* nadtytuły, grupy zabiegów */
  --karmel-akcent:     #D9B98E;   /* kropka świata, górne kreski kart */
  --karmel-ciemny:     #5A3E26;   /* pasek światów */
  --karmel-przygaszony:#D6C2A6;   /* tekst na pasku */
  --karmel-tekst:      #75644F;   /* link powrotny, etykiety slotów */

  /* --- Szałwia (świat Head Spa) --- */
  --szalwia-tlo:       #F4F5F1;
  --szalwia-1:         #EDEFE9;
  --szalwia-2:         #DDE2D9;
  --szalwia-3:         #D3D9CE;
  --szalwia-4:         #E8E4DA;
  --szalwia-5:         #E2E6DF;
  --szalwia-6:         #D8DDD5;
  --szalwia-ciemna:    #39463C;
  --szalwia-ciemna-2:  #4A5A4E;
  --szalwia-ciemna-3:  #2F3A31;
  --szalwia-akcent:    #9AA89E;
  --szalwia-akcent-2:  #7C8A7A;
  --szalwia-jasna:     #A9B4A5;
  --szalwia-jasna-2:   #C3CBBF;
  --szalwia-jasna-3:   #D3DACF;
  --szalwia-mgla:      #8E9A8B;
  --szalwia-linia:     #E1E5DD;
  --szalwia-tekst:     #54604F;
  --szalwia-tekst-2:   #6B7668;
  --szalwia-tekst-3:   #77836F;
  --szalwia-tekst-4:   #7D897A;
  --szalwia-tekst-5:   #5E6E62;

  /* --- Turkusy (świat Barber) --- */
  --turkus-2:          #A9C4CB;
  --turkus-3:          #9FBAC2;
  --turkus-4:          #C6DDE2;
  --turkus-5:          #7FA2AC;
  --turkus-6:          #5D8B98;
  --turkus-7:          #6E93A0;
  --turkus-8:          #4E7A87;
  --turkus-9:          #8FB4BD;
  --turkus-10:         #5B7C85;
  --kosc:              #F6EFEA;

  /* --- Linie --- */
  --linia:             #F0E6E1;
  --linia-2:           #EFE2DC;
  --linia-3:           #E9DCD6;
  --linia-4:           #E4D7D1;
  --linia-5:           #DFD2CB;
  --linia-b:           #0A3A48;
  --linia-b-2:         #0E404F;
  --linia-b-3:         #1E5769;
  --linia-b-4:         #14495A;

  /* --- Tekst --- */
  --tekst:             #4E6067;
  --tekst-2:           #5B6B70;
  --tekst-3:           #94A5A9;
  --tekst-4:           #9A8F89;
  --tekst-5:           #7A8B8F;
  --tekst-6:           #A79C96;
  --tekst-7:           #93807B;
  --tekst-8:           #00505F;


  /* ------------------------------------------------------------------------
     2. TOKENY SEMANTYCZNE — przemapowywane przez klasę świata na <body>
     Szablony i komponenty używają wyłącznie tych nazw.
     ------------------------------------------------------------------------ */

  --bg:                var(--krem);
  --bg-alt:            var(--krem-2);
  --bg-karta:          #ffffff;

  --naglowek:          var(--pruski);   /* kolor nagłówków Cormorant */
  --tresc:             var(--tekst);    /* akapity */
  --przygaszony:       var(--tekst-3);  /* czasy, metadane */
  --eyebrow:           var(--zloto);    /* nadtytuły wersalikami */

  --akcent:            var(--zloto);
  --akcent-jasny:      var(--zloto-jasne);
  --akcent-grad:       linear-gradient(100deg, var(--zloto-jasne), var(--zloto));
  --akcent-tekst:      #ffffff;         /* tekst na gradiencie złota */

  --kreska:            var(--linia);
  --kreska-mocna:      var(--linia-3);

  --stopka-bg:         var(--pruski);
  --stopka-tekst:      var(--turkus-9);

  /* Kolor ikon socjali w stopce. Złoto jest jedynym akcentem, który
     czyta się na wszystkich czterech ciemnych stopkach — dlatego jeden
     token zamiast czterech nadpisań w plikach światów. */
  --stopka-akcent:     var(--zloto-swiatlo);

  /* Pasek światów ma własne trzy tokeny, a nie te od stopki — świat
     Beauty potrzebuje ciepłego bordo zamiast pruskiego błękitu, a nie
     chcemy przy okazji przemalować stopki.

     UWAGA: każdy świat MUSI ustawić je u siebie na wartość docelową.
     Zapis --pasek-bg: var(--stopka-bg) nie zadziałał, bo zmienne
     rozwijają się na elemencie, na którym je zadeklarowano. Tutaj to
     :root, a klasy światów siedzą na <body> — więc pasek dostawał
     wartość ze studia niezależnie od podstrony. Stąd oliwka na Head Spa
     wyglądała identycznie jak granat u barbera. */
  --pasek-bg:          var(--pruski);
  --pasek-tekst:       var(--turkus-9);
  --pasek-akcent:      var(--zloto-swiatlo);

  --header-bg:         var(--krem);
  --header-kreska:     var(--linia);
  --header-tekst:      var(--pruski);


  /* ------------------------------------------------------------------------
     3. TYPOGRAFIA
     Jost — krój z księgi znaku. Cormorant Garamond — rozszerzenie projektowe.
     ------------------------------------------------------------------------ */

  --font-ui:      'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Skala płynna: wartość minimalna przy 375 px, maksymalna przy 1280 px.
     Dzięki clamp() nie potrzebujemy osobnych rozmiarów w każdym breakpoincie —
     tekst skaluje się w sposób ciągły, bez skoków przy zmianie szerokości. */
  --fs-hero-xl: clamp(2.5rem,   1.516rem + 4.20vw, 4.875rem);  /*  40 → 78 */
  --fs-hero:    clamp(2.25rem,  1.525rem + 3.09vw, 4rem);      /*  36 → 64 */
  --fs-h1:      clamp(2rem,     1.378rem + 2.65vw, 3.5rem);    /*  32 → 56 */
  --fs-h2:      clamp(1.75rem,  1.336rem + 1.77vw, 2.75rem);   /*  28 → 44 */
  --fs-h3:      clamp(1.5rem,   1.241rem + 1.10vw, 2.125rem);  /*  24 → 34 */
  --fs-h4:      clamp(1.375rem, 1.168rem + 0.88vw, 1.875rem);  /*  22 → 30 */
  --fs-h5:      1.625rem;   /* 26 */
  --fs-lead:    clamp(1rem, 0.958rem + 0.18vw, 1.0625rem);     /*  16 → 17 */
  --fs-body:    1rem;       /* 16 */
  --fs-body-s:  0.9375rem;  /* 15 */
  --fs-sm:      0.875rem;   /* 14 */
  --fs-xs:      0.8125rem;  /* 13 */
  --fs-eyebrow: 0.6875rem;  /* 11 */
  --fs-mini:    0.625rem;   /* 10 */

  /* Tracking 200 z księgi znaku = 0.2em. Nadtytuły w projekcie idą dalej. */
  --ls-brand:   0.2em;
  --ls-eyebrow: 0.26em;
  --ls-szeroki: 0.3em;
  --ls-xszeroki: 0.4em;
  --ls-btn:     0.16em;

  --lh-naglowek: 1.1;
  --lh-tresc:    1.8;


  /* ------------------------------------------------------------------------
     4. UKŁAD
     ------------------------------------------------------------------------ */

  --szerokosc:   1280px;
  --header-h:    84px;   /* wysokość paska — panel menu odsuwa się o tyle */
  --margines:    56px;   /* boczny oddech, zmniejszany w breakpointach */
  --sekcja-y:    88px;   /* odstęp pionowy sekcji */
  --gap:         20px;
  --promien:     999px;  /* pigułki */

  --przejscie:   0.18s ease;
}


/* --------------------------------------------------------------------------
   5. RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Kotwice nie mogą chować się pod przyklejonym paskiem.
     Wysokość paska mierzy nav.js, więc offset jest zawsze aktualny. */
  scroll-padding-top: calc(var(--header-h) + 24px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tresc);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-tresc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--lh-naglowek);
  color: var(--naglowek);
  text-wrap: balance;
  /* Długie nazwy zabiegów („Oczyszczanie wodorowe + infuzja tlenowa”)
     na wąskim ekranie łamią się zamiast rozpychać stronę w bok. */
  overflow-wrap: break-word;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--przejscie), color var(--przejscie);
}
a:hover { opacity: 0.75; }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Widoczny focus dla osób korzystających z klawiatury.
   Domyślny outline przeglądarki bywa niewidoczny na ciemnym tle barbera. */
:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Treść tylko dla czytników ekranu. */
.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;
}

/* Przeskocz do treści — pierwszy element dla klawiatury. */
.mj-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 14px 22px; background: var(--pruski); color: #fff;
  font-size: var(--fs-sm); letter-spacing: var(--ls-btn); text-transform: uppercase;
}
.mj-skip:focus { left: 0; }


/* --------------------------------------------------------------------------
   6. UKŁAD STRONY
   -------------------------------------------------------------------------- */

.mj-site {
  max-width: var(--szerokosc);
  margin: 0 auto;
  background: var(--bg);
}

.mj-kontener {
  padding-left: var(--margines);
  padding-right: var(--margines);
}

.mj-sekcja {
  padding: var(--sekcja-y) var(--margines);
}

.mj-sekcja--alt { background: var(--bg-alt); }

/* Siatki — nazwy mówią, ile kolumn na desktopie.
   Zwijanie na mniejszych ekranach jest w sekcji 9. */
.mj-siatka       { display: grid; gap: var(--gap); }
.mj-siatka--2    { grid-template-columns: repeat(2, 1fr); }
.mj-siatka--3    { grid-template-columns: repeat(3, 1fr); }
.mj-siatka--4    { grid-template-columns: repeat(4, 1fr); }
.mj-siatka--5    { grid-template-columns: repeat(5, 1fr); }

.mj-stos { display: flex; flex-direction: column; }


/* --------------------------------------------------------------------------
   7. KOMPONENTY
   -------------------------------------------------------------------------- */

/* Nadtytuł — mały wersalik nad nagłówkiem, wraca ok. 20 razy w projekcie. */
.mj-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--eyebrow);
}
.mj-eyebrow--szeroki  { letter-spacing: var(--ls-szeroki); }
.mj-eyebrow--xszeroki { letter-spacing: var(--ls-xszeroki); }
.mj-eyebrow--kreska::before {
  content: ''; width: 44px; height: 1px; background: var(--akcent-jasny);
}

/* Nagłówki */
.mj-hero-xl { font-size: var(--fs-hero-xl); line-height: 1.03; }
.mj-hero    { font-size: var(--fs-hero);    line-height: 1.05; }
.mj-h1      { font-size: var(--fs-h1);      line-height: 1.06; }
.mj-h2      { font-size: var(--fs-h2);      line-height: 1.1; }
.mj-h3      { font-size: var(--fs-h3);      line-height: 1.15; }
.mj-h4      { font-size: var(--fs-h4);      line-height: 1.2; }

/* Złota kursywa w nagłówkach — „i Relaksu”, „i ciepło”, „przestrzeni”.
   Sterowana znacznikiem <em>, który można wpisać w polu tekstowym w panelu.
   Dzięki temu akcent da się przenieść na inne słowo bez dotykania kodu. */
.mj-hero em,
.mj-hero-xl em,
.mj-h1 em,
.mj-h2 em,
.mj-h3 em,
.mj-akcent-italic {
  font-style: italic;
  color: var(--akcent);
}

/* W hero świata spa i barbera akcent jest gradientowy. */
.world-spa .mj-hero-xl em,
.world-barber .mj-hero-xl em,
.mj-akcent-grad {
  font-style: italic;
  background: var(--akcent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Treść */
.mj-lead { font-size: var(--fs-lead); line-height: 1.85; color: var(--tresc); max-width: 47ch; }
.mj-tresc { font-size: var(--fs-body-s); line-height: var(--lh-tresc); color: var(--tekst-2); }

/* Przyciski */
.mj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;               /* wytyczne dostępności dotyku */
  padding: 15px 30px;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-align: center;
  border: 1px solid transparent;
  transition: opacity var(--przejscie), transform var(--przejscie);
}
.mj-btn:hover { opacity: 0.85; }
.mj-btn:active { transform: translateY(1px); }

.mj-btn--zloty   { background: var(--akcent-grad); color: var(--akcent-tekst); border-radius: var(--promien); }
.mj-btn--ciemny  { background: var(--naglowek); color: var(--bg); border-radius: var(--promien); }
.mj-btn--kontur  { border-color: var(--akcent-jasny); color: var(--zloto-cien); border-radius: var(--promien); }
.mj-btn--prosty  { border-color: var(--naglowek); color: var(--naglowek); }
.mj-btn--blok    { width: 100%; }

/* Kropka sygnalizująca inny świat — przy Head Spa i Barberze w menu. */
.mj-kropka {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* Kropki czterech światów w menu — każdy dostaje swój kolor z własnej palety. */
.mj-nav__item--hair   .mj-kropka { background: var(--karmel-akcent); }
.mj-nav__item--beauty .mj-kropka { background: var(--roz-akcent); }
.mj-nav__item--spa    .mj-kropka { background: var(--szalwia-akcent); }
.mj-nav__item--barber .mj-kropka { background: var(--proszkowy); }

/* Slot na zdjęcie — ukośne paski z projektu. Widoczny, dopóki nie ma zdjęcia. */
.mj-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  background: repeating-linear-gradient(135deg, var(--roz-8) 0 11px, var(--roz-9) 11px 22px);
}
.mj-slot__etykieta {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-7);
  text-align: center;
  padding: 0 20px;
}

/* --------------------------------------------------------------------------
   HERO ŚWIATA — wspólny dla Head Spa i Barbera
   Tekst po lewej, zdjęcie po prawej roztapiające się maską w tle.
   -------------------------------------------------------------------------- */

.mj-hero-swiat {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  overflow: hidden;
}
.mj-hero-tresc {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 660px;
  padding: 80px var(--margines);
}
.mj-hero-foto .mj-slot,
.mj-hero-foto .mj-foto { width: 100%; height: 100%; min-height: 100%; }

/* Pas dwukolumnowy: treść + zdjęcie na pełną wysokość. */
.mj-pas-2kol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
}
.mj-pas-2kol__tresc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 88px var(--margines);
}
.mj-pas-2kol__foto { display: flex; }
.mj-pas-2kol__foto .mj-slot,
.mj-pas-2kol__foto .mj-foto { flex: 1; min-height: 100%; }

/* Lista punktów z kropką */
.mj-punkty { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.mj-punkt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--tresc);
}
.mj-punkt .mj-kropka { margin-top: 11px; background: var(--eyebrow); }

/* Blok rezerwacji z mapą */
.mj-rezerwacja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  background: var(--bg-alt);
}
.mj-rezerwacja__tresc { display: flex; flex-direction: column; gap: 22px; }
.mj-rezerwacja__tresc a { border-bottom: 1px solid transparent; }
.mj-rezerwacja__tresc a:hover { opacity: 1; border-bottom-color: var(--akcent-jasny); }
.mj-rezerwacja__mapa { position: relative; display: flex; }
.mj-rezerwacja__mapa .mj-slot,
.mj-rezerwacja__mapa .mj-foto { flex: 1; min-height: 300px; }

/* --------------------------------------------------------------------------
   ZWIJANA KATEGORIA USŁUG
   Komponent wspólny dla cennika i stron świata. Musi być tutaj, a nie
   w studio.css — /beauty i /barber nie pobierają arkusza świata studia,
   a korzystają z tego samego akordeonu.

   Obsługuje dwa warianty znacznikowe:
   przycisk + panel[hidden] (cennik, sterowany skryptem, bo dochodzi
   wyszukiwarka) oraz details/summary (strony świata, gdzie zwijanie
   ma działać także bez JavaScriptu).
   -------------------------------------------------------------------------- */

.mj-kat__tytul { margin: 0 0 6px; }

.mj-kat__przycisk {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
}

.mj-kat__nazwa {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.1;
  color: var(--naglowek);
}
.mj-kat__licznik {
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tekst-4);
}

/* Ikona plus/minus rysowana w CSS — bez pliku graficznego i bez fontu ikon. */
.mj-kat__ikona {
  position: relative;
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--linia-4);
  border-radius: 50%;
  transition: border-color var(--przejscie);
}
.mj-kat__ikona::before,
.mj-kat__ikona::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1px;
  background: var(--akcent);
  transform: translate(-50%, -50%);
  transition: transform var(--przejscie), opacity var(--przejscie);
}
.mj-kat__ikona::after { transform: translate(-50%, -50%) rotate(90deg); }
.mj-kat__przycisk[aria-expanded="true"] .mj-kat__ikona::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
.mj-kat__przycisk:hover .mj-kat__ikona { border-color: var(--akcent-jasny); }

.mj-kat__opis {
  margin: 0 0 14px;
  max-width: 64ch;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--tekst-2);
}

.mj-kat__panel { display: flex; flex-direction: column; }
.mj-kat__panel[hidden] { display: none; }


/* Wariant bez skryptu: <details> + <summary>.
   Chowamy natywny trójkącik i podpinamy tę samą ikonę plus/minus. */
.mj-zwijka > summary.mj-kat__przycisk {
  cursor: pointer;
  list-style: none;
}
.mj-zwijka > summary.mj-kat__przycisk::-webkit-details-marker { display: none; }
.mj-zwijka[open] > summary .mj-kat__ikona::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0);
}
.mj-zwijka > summary:hover .mj-kat__ikona { border-color: var(--akcent-jasny); }

/* --- Oddech zdjęcia w nagłówku ---
   Kadr powoli jedzie w bok w stałej skali. Bez skalowania w czasie, więc
   nic się nie rozmywa i nie „pompuje" — zdjęcie ma sprawiać wrażenie
   żywego, a nie animowanego.

   Trzy rzeczy, które trzymają koszt przy zerze:
   1. Ruszamy wyłącznie transform — to jedyna właściwość, którą przeglądarka
      animuje na karcie graficznej, bez przeliczania układu strony.
   2. Zero dodatkowych plików. Zdjęcie i tak by się wczytało.
   3. Cykl trwa 48 sekund w obie strony. Wszystko szybszego zaczyna wyglądać
      jak przejście w prezentacji.

   Powiększenie o 8% to zapas na przesuw — bez niego przy krańcach ruchu
   odsłoniłaby się krawędź zdjęcia. Oznacza to też, że kadr musi mieć
   margines: kompozycja upakowana po brzegi zostanie po bokach przycięta. */
.mj-hero-home__foto,
.mj-hero-foto,
.mj-slajd__foto { overflow: hidden; }

/* Prawdziwe zdjęcie ma wypełniać kolumnę tak samo jak makieta slotu. */
.mj-hero-home__foto .mj-foto,
.mj-slajd__foto .mj-foto { flex: 1; min-width: 0; }

img.mj-oddech {
  transform: scale(1.08) translate3d(2.2%, 1.2%, 0);
  animation: mj-oddech 24s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes mj-oddech {
  from { transform: scale(1.08) translate3d(2.2%, 1.2%, 0); }
  to   { transform: scale(1.08) translate3d(-2.2%, -1.2%, 0); }
}

/* Kto poprosił system o mniej ruchu, dostaje nieruchome zdjęcie.
   Ruch w tle jest jednym z częstszych wyzwalaczy przy migrenach
   i zaburzeniach przedsionkowych. */
@media (prefers-reduced-motion: reduce) {
  img.mj-oddech {
    transform: none;
    animation: none;
  }
}

/* Przycisk „Wyznacz trasę” leży NA mapie, nie obok niej.
   Reguła musi być tutaj, a nie w studio.css — inaczej na /head-spa
   i /barber przycisk spadał obok mapy, bo tamte podstrony nie pobierają
   arkusza świata studia. */
.mj-mapa__btn {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  box-shadow: 0 6px 24px rgba(0, 33, 44, 0.18);
}

/* Mapa pełnej szerokości na stronie kontaktu — przycisk trzyma się
   marginesu strony, żeby wpisywał się w siatkę pozostałych sekcji. */
.mj-mapa .mj-mapa__btn { left: var(--margines); bottom: 32px; }

/* Duża cena w karcie wariantu */
.mj-cena-duza {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1;
  color: var(--akcent);
}

@media (max-width: 1023px) {
  .mj-hero-swiat { min-height: 0; }
  .mj-hero-tresc { padding: 64px var(--margines); max-width: none; width: 100%; }

  .mj-pas-2kol { grid-template-columns: 1fr; }
  .mj-pas-2kol__tresc { padding: 56px var(--margines); }
  .mj-pas-2kol__foto .mj-slot,
  .mj-pas-2kol__foto .mj-foto { min-height: 300px; }

  .mj-rezerwacja { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 767px) {
  .mj-hero-tresc { padding: 48px var(--margines); gap: 18px; }
  .mj-rezerwacja__mapa .mj-slot,
  .mj-rezerwacja__mapa .mj-foto { min-height: 240px; }
}


/* Nagłówek sekcji — nadtytuł + tytuł, w trzech wariantach ułożenia. */
.mj-naglowek-sekcji { margin-bottom: 38px; }
.mj-naglowek-sekcji .mj-eyebrow { margin-bottom: 12px; }
.mj-naglowek-sekcji p { margin: 0; }

.mj-naglowek-sekcji--srodek {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mj-naglowek-sekcji--srodek .mj-eyebrow { justify-content: center; }

.mj-naglowek-sekcji--rzad {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

/* Na tablecie i telefonie tytuł i tekst boczny jeden pod drugim.
   Do 0.12 ta reguła siedziała w studio.css, przez co na /beauty i /head-spa
   tytuł sekcji ściskał się do kolumny szerokiej na dwa słowa. */
@media (max-width: 1023px) {
  .mj-naglowek-sekcji--rzad {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* Grupa przycisków */
.mj-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* Link ze strzałką — „Zobacz zakres usług →" */
.mj-link-strzalka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--akcent);
}
.mj-link-strzalka::after {
  content: '→';
  transition: transform var(--przejscie);
}
.mj-link-strzalka:hover::after { transform: translateX(4px); }

/* Link z podkreśleniem — „Pełny cennik →" */
.mj-link-podkreslony {
  flex: none;
  padding-bottom: 6px;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--naglowek);
  border-bottom: 1px solid var(--akcent-jasny);
}

/* Zdjęcie wypełniające przydzielone miejsce. */
.mj-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Karta usługi */
.mj-karta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px;
  background: var(--bg-karta);
  border-top: 2px solid var(--roz-akcent);
}
.mj-karta--barber { border-top-color: var(--proszkowy); }

.mj-karta__nazwa {
  font-size: var(--fs-h5);
  line-height: 1.2;
}
.mj-karta__cena {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
}
.mj-karta__cena .mj-pozycja__cena {
  font-size: 1.25rem;
  min-width: 0;
}
.mj-karta__btn { margin-top: 14px; }

/* Nadtytuł w karcie — węższy odstęp niż w nagłówku sekcji. */
.mj-eyebrow--kategoria { letter-spacing: 0.2em; }

/* Wiersz cennika: nazwa · linia kropkowana · czas · cena */
.mj-pozycja {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--kreska);
}
.mj-pozycja__nazwa  { font-size: var(--fs-body); font-weight: 400; color: var(--naglowek); }
.mj-pozycja__dopisek{ font-size: var(--fs-xs); font-weight: 300; color: var(--przygaszony); }
.mj-pozycja__linia  { flex: 1; border-bottom: 1px dotted var(--linia-5); }
.mj-pozycja__czas   { font-size: var(--fs-xs); font-weight: 300; color: var(--przygaszony); white-space: nowrap; }
.mj-pozycja__cena   { font-size: var(--fs-body); font-weight: 500; color: var(--akcent); min-width: 92px; text-align: right; }

/* Krok numerowany 01 / 02 / 03 */
.mj-krok { display: flex; flex-direction: column; gap: 12px; }
.mj-krok__nr {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1;
  color: var(--akcent);
}
/* Tytuł kroku. Komponent „kroków” wraca na Head Spa i na voucherach,
   a te dwie strony ładują różne arkusze światów — całość musi być tutaj. */
.mj-krok__tytul {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--naglowek);
}

/* Plakietka „Najpopularniejszy" */
.mj-plakietka {
  position: absolute; top: 18px; right: 18px;
  padding: 6px 12px;
  border-radius: var(--promien);
  background: var(--akcent-grad);
  color: var(--akcent-tekst);
  font-size: var(--fs-mini);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   8. NAGŁÓWEK I STOPKA
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   KAFEL ŚWIATA
   Zapowiedź innego świata w kolorach tamtego świata. Wraca na stronie
   głównej, na dole każdej z czterech podstron światów i na 404, więc
   komponent musi być w base.css — /fryzjer, /beauty, /head-spa i /barber
   nie pobierają arkusza świata studia.
   -------------------------------------------------------------------------- */

.mj-swiat-kafel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 46px 38px;
  min-height: 330px;
}
.mj-swiat-kafel__link { margin-top: auto; }

.mj-swiat-kafel--hair {
  background: linear-gradient(150deg, var(--piasek-4), var(--piasek-5));
}
.mj-swiat-kafel--hair .mj-eyebrow { color: var(--karmel); }

.mj-swiat-kafel--beauty {
  background: linear-gradient(150deg, var(--roz-4), var(--roz-5));
}
.mj-swiat-kafel--beauty .mj-eyebrow { color: var(--terakota); }

.mj-swiat-kafel--spa {
  background: linear-gradient(150deg, var(--szalwia-1), #DCE1DA);
}
.mj-swiat-kafel--spa .mj-eyebrow { color: var(--szalwia-tekst-5); }
.mj-swiat-kafel--spa h3         { color: var(--szalwia-ciemna); }
.mj-swiat-kafel--spa .mj-tresc  { color: var(--szalwia-tekst); }
.mj-swiat-kafel--spa .mj-swiat-kafel__link { color: var(--szalwia-akcent-2); }

.mj-swiat-kafel--barber {
  background: linear-gradient(150deg, var(--granat-2), var(--granat-4));
}
.mj-swiat-kafel--barber .mj-eyebrow { color: var(--proszkowy); }
.mj-swiat-kafel--barber h3          { color: var(--kosc); }
.mj-swiat-kafel--barber .mj-tresc   { color: var(--turkus-3); }
.mj-swiat-kafel--barber .mj-swiat-kafel__link { color: var(--zloto-swiatlo); }

/* --------------------------------------------------------------------------
   PASEK ŚWIATÓW
   Cztery filary studia nad nagłówkiem, aktywny podświetlony. Osobny poziom
   nawigacji, nie druga wersja menu — dlatego siedzi ponad nagłówkiem
   i ma własne tło rozciągnięte na całą szerokość ekranu.

   Trzy decyzje, które razem usuwają przeskok przy wejściu do świata:

   1. Pasek jest na KAŻDEJ stronie. Na głównej pusty i w kolorze tła,
      więc niewidoczny — ale zajmuje tę samą wysokość. Nagłówek nigdy
      nie zmienia położenia, więc strona nie skacze.
   2. Wysokość bierze się ze stałej --pasek-h, a nie z zawartości.
      Pusty pasek na głównej ma dokładnie tyle samo, co pełny w świecie.
   3. Wejście to przenikanie, nie wysuwanie. Tło wybarwia się z koloru
      strony do koloru świata, etykiety wchodzą płynnie. Nic się nie
      przesuwa, więc nie ma też przesunięcia układu (CLS).
   -------------------------------------------------------------------------- */
.mj-pasek-swiatow {
  --pasek-h: 38px;

  position: relative;
  z-index: 101;
  min-height: var(--pasek-h);
  display: flex;
  align-items: stretch;
  background: var(--bg);
}

/* Strona główna: pasek jest, tylko go nie widać. */
.mj-pasek-swiatow--cichy { background: var(--bg); }

/* Wewnątrz świata: kolorowe tło nakładamy warstwą, żeby dało się je
   płynnie wprowadzić samą przezroczystością. Animowanie background-color
   też by zadziałało, ale opacity przeglądarka liczy na karcie graficznej. */
.mj-pasek-swiatow--swiat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pasek-bg);
  animation: mj-pasek-tlo 600ms ease-out both;
}

.mj-pasek-swiatow__tor {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--szerokosc);
  margin: 0 auto;
  padding: 0 var(--margines);
  overflow-x: auto;
  scrollbar-width: none;
}
.mj-pasek-swiatow__tor::-webkit-scrollbar { display: none; }

.mj-pasek-swiatow__poz {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 0.6875rem;      /* 11 px */
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pasek-tekst);
  animation: mj-pasek-tekst 640ms ease-out both;
  transition: color var(--przejscie), box-shadow var(--przejscie);
}
.mj-pasek-swiatow__poz:first-child { padding-left: 0; }
.mj-pasek-swiatow__poz:hover { opacity: 1; color: var(--pasek-akcent); }

/* Bieżący świat: złoty podpis i kreska pod spodem. Podkreślenie rysujemy
   cieniem wewnętrznym, a nie obramowaniem — inaczej pozycja robiłaby się
   o 2 px wyższa od pozostałych i pasek by drgał. */
.mj-pasek-swiatow__poz.is-tutaj {
  color: var(--pasek-akcent);
  box-shadow: inset 0 -2px 0 var(--pasek-akcent);
}

/* Etykiety pojawiają się po kolei, z lewej do prawej. Opóźnienia są
   drobne — chodzi o wrażenie, że pasek się „zapala", a nie o defiladę. */
.mj-pasek-swiatow__poz:nth-child(2) { animation-delay: 70ms; }
.mj-pasek-swiatow__poz:nth-child(3) { animation-delay: 140ms; }
.mj-pasek-swiatow__poz:nth-child(4) { animation-delay: 210ms; }

@keyframes mj-pasek-tlo {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mj-pasek-tekst {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mj-pasek-swiatow--swiat::before,
  .mj-pasek-swiatow__poz { animation: none; }
}

@media (max-width: 767px) {
  .mj-pasek-swiatow { --pasek-h: 42px; }
  .mj-pasek-swiatow__poz { padding: 0 13px; letter-spacing: 0.12em; }
}

.mj-header {
  position: relative;
  z-index: 100;              /* ponad panelem menu (90), żeby krzyżyk był klikalny */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--margines);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-kreska);
}

/* Logo i przyciski muszą leżeć nad panelem menu (z-index 90), bo panel
   jest ich rodzeństwem wewnątrz nagłówka. Bez tego panel przykrywa
   hamburgera i nie da się go kliknąć. */
.mj-header__logo,
.mj-header__akcje { position: relative; z-index: 95; }

.mj-header__logo { flex: none; color: var(--header-tekst); }
.mj-header__logo .mj-svg { height: 38px; width: auto; }

.mj-nav__lista {
  display: flex;
  align-items: center;
  /* clamp zamiast stałej wartości: przy ciasnym oknie odstępy schodzą
     do 14 px, zanim cokolwiek zdąży się połamać. */
  gap: clamp(14px, 2vw, 28px);
  font-size: 0.75rem;      /* 12 px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--header-tekst);
}

.mj-nav__item { position: relative; }

/* Pozycje menu nigdy się nie łamią.
   „Head Spa" i „← Wróć do studia" to dwa i cztery wyrazy w wersalikach
   z szeroką interlinią — przy ciasnym pasku przeglądarka rozbijała je
   na dwie linie, przez co pozycje przestawały być w jednym rzędzie.
   Zamiast zawijać, pasek zwęża odstępy (niżej), a w ostateczności
   przechodzi w menu mobilne. */
.mj-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  white-space: nowrap;
}

.mj-nav__item.is-aktywny > .mj-nav__link {
  color: var(--akcent);
  border-bottom: 1px solid var(--akcent);
  padding-bottom: 4px;
}

/* Podmenu — rozwijane po najechaniu, dostępne też z klawiatury. */
.mj-nav__item--ma-dzieci > .mj-nav__link::after {
  content: '';
  width: 5px; height: 5px;
  margin-left: 2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.mj-nav__podmenu {
  position: absolute;
  top: 100%; left: -18px;
  min-width: 180px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--header-bg);
  border: 1px solid var(--header-kreska);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--przejscie), transform var(--przejscie), visibility var(--przejscie);
  z-index: 40;
}
.mj-nav__item--ma-dzieci:hover  > .mj-nav__podmenu,
.mj-nav__item--ma-dzieci:focus-within > .mj-nav__podmenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Prawa strona nagłówka: przycisk rezerwacji + hamburger.
   Na desktopie widać tylko przycisk, na mobile oba. */
.mj-header__akcje {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.mj-header__cta { flex: none; }

/* Przycisk rezerwacji wewnątrz panelu — tylko na mobile. */
.mj-nav__cta { display: none; }

/* Hamburger — ukryty na desktopie. */
.mj-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--header-tekst);
}
.mj-burger__kreski,
.mj-burger__kreski::before,
.mj-burger__kreski::after {
  display: block;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform var(--przejscie), opacity var(--przejscie);
}
.mj-burger__kreski { position: relative; }
.mj-burger__kreski::before,
.mj-burger__kreski::after { content: ''; position: absolute; left: 0; }
.mj-burger__kreski::before { top: -7px; }
.mj-burger__kreski::after  { top: 7px; }

body.menu-otwarte .mj-burger__kreski { background: transparent; }
body.menu-otwarte .mj-burger__kreski::before { transform: translateY(7px) rotate(45deg); }
body.menu-otwarte .mj-burger__kreski::after  { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   STOPKA
   Pełne dane firmy na każdej podstronie — sygnał dla wyszukiwarki przy frazach
   lokalnych — plus przejścia między trzema światami i rezerwacja.
   -------------------------------------------------------------------------- */

.mj-footer {
  background: var(--stopka-bg);
  color: var(--stopka-tekst);
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.7;
}

/* Tło stopki sięga krawędzi ekranu, treść trzyma się siatki strony. */
.mj-footer__gora,
.mj-footer__dol {
  width: 100%;
  max-width: var(--szerokosc);
  margin: 0 auto;
}

.mj-footer__gora {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px var(--margines) 44px;
}

.mj-footer__kol { display: flex; flex-direction: column; gap: 10px; }
.mj-footer__kol p { margin: 0; }
/* Kolumna z danymi firmy jest szersza — mieści adres bez łamania w złych miejscach. */
.mj-footer__kol--firma { gap: 4px; }
.mj-footer__kol--akcja { align-items: flex-start; }
.mj-footer__prawa { opacity: 0.75; }

.mj-footer__sygnet { color: currentColor; opacity: 0.9; margin-bottom: 6px; }
.mj-footer__sygnet .mj-svg { height: 34px; width: auto; }

.mj-footer__nazwa {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--naglowek);
}
/* Na ciemnych stopkach nagłówek dziedziczy kolor tekstu — inaczej granat
   na granacie byłby nieczytelny. */
.world-studio .mj-footer__nazwa { color: #fff; }
.world-spa    .mj-footer__nazwa,
.world-barber .mj-footer__nazwa { color: var(--kosc); }

.mj-footer__tagline {
  font-size: var(--fs-mini);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}

.mj-footer__adres { font-style: normal; margin-top: 8px; }

/* Numery rejestrowe — drobne, poniżej adresu. */
.mj-footer__rejestr {
  margin-top: 10px !important;
  font-size: var(--fs-xs);
  opacity: 0.6;
}
.mj-footer__adres a { border-bottom: 1px solid transparent; }
.mj-footer__adres a:hover { opacity: 1; border-bottom-color: currentColor; }

.mj-footer__tytul {
  font-size: var(--fs-mini);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 6px !important;
}

/* Przejścia do czterech światów */
.mj-footer__swiaty { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mj-footer__swiat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-body-s);
}
.mj-footer__swiat:hover { opacity: 1; color: #fff; }
.mj-footer__swiat--hair   .mj-kropka { background: var(--karmel-akcent); }
.mj-footer__swiat--beauty .mj-kropka { background: var(--roz-akcent); }
.mj-footer__swiat--spa    .mj-kropka { background: var(--szalwia-akcent); }
.mj-footer__swiat--barber .mj-kropka { background: var(--proszkowy); }

.mj-footer__linki { display: flex; flex-direction: column; gap: 6px; }
.mj-footer__linki a:hover { opacity: 1; color: #fff; }

.mj-footer__godziny { margin: 0; }
.mj-footer__godziny > div { display: flex; justify-content: space-between; gap: 16px; max-width: 210px; }
.mj-footer__godziny dt { opacity: 0.75; }
.mj-footer__godziny dd { margin: 0; }

.mj-footer__cta { align-self: flex-start; margin-bottom: 6px; }
.mj-footer__social { display: flex; flex-wrap: wrap; gap: 10px; }

/* Ikona w kółku. Rozmiar 44 × 44 px to nie estetyka, tylko minimalne
   pole dotyku zalecane dla ekranów dotykowych — mniejsze kółka na
   telefonie trafia się co drugi raz. */
.mj-social-ikona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--stopka-akcent);
  transition: background var(--przejscie), color var(--przejscie);
}
.mj-social-ikona .mj-svg { width: 20px; height: 20px; display: block; }
.mj-social-ikona:hover {
  opacity: 1;
  background: currentColor;
}
.mj-social-ikona:hover .mj-svg { color: var(--stopka-bg); }

/* Dolny pasek */
.mj-footer__dol {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px var(--margines);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-xs);
}
.mj-footer__dol p { margin: 0; }
.mj-footer__prawne { display: flex; flex-wrap: wrap; gap: 8px; }
.mj-footer__prawne a { border-bottom: 1px solid transparent; }
.mj-footer__prawne a:hover { opacity: 1; border-bottom-color: currentColor; }

.mj-footer a:hover { color: #fff; opacity: 1; }


/* Klasy zarezerwowane — celowo bez własnych reguł.
   Są w HTML jako punkty zaczepienia na wypadek, gdyby któryś świat wymagał
   odstępstwa od wspólnego wyglądu. Pusta klasa nic nie waży, a dopisanie jej
   później do gotowego HTML wymagałoby ruszania szablonów:

     .mj-main
     .mj-header--studio  .mj-header--spa  .mj-header--barber
     .mj-footer--studio  .mj-footer--spa  .mj-footer--barber
     .mj-nav__item--kropka   (styl bierze .mj-kropka; klasa jest hakiem
                              na wypadek innego traktowania tych pozycji)
     .mj-wpis                (opakowanie artykułu — układ robią elementy wewnątrz)
     .mj-pola-admin          (używana wyłącznie w panelu, front jej nie ładuje)
*/


/* --------------------------------------------------------------------------
   9. RESPONSYWNOŚĆ
   Desktop 1:1 wg projektu. Poniżej — układy zaprojektowane od zera.
   -------------------------------------------------------------------------- */

/* --- Duży laptop: kontener przestaje być sztywny --- */
@media (max-width: 1279px) {
  :root { --margines: 40px; }
  .mj-site { max-width: 100%; }
}

/* --- Menu: hamburger poniżej 1280 px (od 0.13) ---
   Do 0.12 menu chowało się dopiero przy 1023 px. Pomiar na kopii serwisu
   pokazał, że przy czterech światach i siedmiu pozycjach w menu świata
   pasek nie mieści się już przy 1100 px — przycisk rezerwacji wyjeżdżał
   nawet 230 px poza ekran (Hair przy 1024 px). Skracanie etykiet tego nie
   naprawi, bo brakuje miejsca na całą pozycję, nie na kilka liter.

   Powyżej 1280 px kontener ma stałą szerokość, więc pasek, który mieści się
   przy 1280, mieści się na każdym większym ekranie. Poniżej — hamburger,
   a przycisk rezerwacji zostaje obok niego, zawsze widoczny.
   Ten sam próg jest w nav.js (zamykanie panelu przy poszerzeniu okna). */
@media (max-width: 1279px) {
  /* Nawigacja chowa się do hamburgera. */
  .mj-burger { display: flex; }

  /* Pasek przykleja się do góry ekranu.
     Dwa powody: krzyżyk jest pod ręką niezależnie od tego, jak daleko
     użytkownik przewinął stronę, a przycisk rezerwacji jest zawsze widoczny.
     Sticky zamiast fixed — element zostaje w układzie, więc przy zamykaniu
     menu treść pod spodem nie podskakuje. */
  .mj-header {
    position: sticky;
    top: 0;
  }

  /* Rytm pionowy menu.
     Odstęp między tekstami pozycji = 13 + 6 + 13 = 32 px.
     Odstęp od paska do pierwszej pozycji = 19 + 13 = 32 px.
     Dzięki temu pierwsza pozycja oddycha tak samo jak wszystkie kolejne —
     zamiast wynikać przypadkowo z sumy paddingów.
     Wysokość paska mierzy nav.js, bo zależy od wielkości logo i breakpointu. */
  .mj-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    /* --menu-gora: dolna krawędź nagłówka w chwili otwarcia (nav.js). Na stronach
       światów nad nagłówkiem jest pasek światów, więc sama wysokość nagłówka nie wystarcza. */
    padding: calc(var(--menu-gora, var(--header-h)) + 19px) var(--margines) 32px;
    background: var(--header-bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    overflow-y: auto;
    overscroll-behavior: contain;   /* przewijanie panelu nie przenosi się na stronę pod spodem */
  }
  body.menu-otwarte .mj-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  body.menu-otwarte { overflow: hidden; }

  /* Duży przycisk rezerwacji domykający listę.
     Ten obok hamburgera jest dla osoby, która wie, po co przyszła.
     Ten tutaj kończy ścieżkę przeglądania menu — dlatego pełna szerokość
     i wyraźniejsza forma. */
  .mj-nav__cta {
    display: block;
    margin-top: auto;
    padding-top: 28px;
  }
  .mj-nav__cta .mj-btn {
    width: 100%;
    padding: 18px 24px;
    font-size: var(--fs-eyebrow);
  }

  .mj-nav__lista {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 1.125rem;      /* 18 px — wygodne pole dotyku */
    letter-spacing: 0.1em;
  }
  .mj-nav__link { padding: 13px 0; }

  /* Podmenu na mobile jest zawsze rozwinięte — chowanie pod dotykiem
     to jedno kliknięcie za dużo. */
  .mj-nav__podmenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    padding: 6px 0 0 20px;   /* ten sam rytm 32 px co pozycje nadrzędne */
    gap: 6px;
    font-size: 0.9375rem;
    color: var(--przygaszony);
  }
  .mj-nav__item--ma-dzieci > .mj-nav__link::after { display: none; }

  /* „← Przestrzeń” — powrót na stronę główną z menu świata.
     Zostaje na dole panelu, wyróżnione. */
  .mj-nav__item--powrot {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--header-kreska);
    width: 100%;
    font-size: 0.9375rem;
    opacity: 0.8;
  }
}

/* --- Tablet: siatki wielokolumnowe schodzą do dwóch --- */
@media (max-width: 1023px) {
  :root {
    --margines: 32px;
    --sekcja-y: 64px;
  }

  .mj-siatka--3,
  .mj-siatka--4,
  .mj-siatka--5 { grid-template-columns: repeat(2, 1fr); }

  /* Nieparzysty ostatni kafel rozciąga się na całą szerokość,
     żeby nie zostawiać dziury w siatce. */
  .mj-siatka--3 > *:last-child:nth-child(odd),
  .mj-siatka--5 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

}

/* --- Telefon: wszystko w jednej kolumnie --- */
@media (max-width: 767px) {
  :root {
    --margines: 20px;
    --sekcja-y: 56px;
    --gap: 14px;
    --header-h: 64px;
  }

  .mj-siatka--2,
  .mj-siatka--3,
  .mj-siatka--4,
  .mj-siatka--5 { grid-template-columns: 1fr; }
  .mj-siatka > *:last-child:nth-child(odd) { grid-column: auto; }

  .mj-header { padding: 16px var(--margines); }
  .mj-header__logo .mj-svg { height: 30px; }

  /* Rezerwacja zostaje widoczna poza hamburgerem — to główny cel biznesowy,
     nie może chować się za dodatkowym kliknięciem. */
  .mj-header__cta .mj-btn {
    padding: 11px 16px;
    font-size: var(--fs-mini);
    letter-spacing: 0.1em;
  }

  .mj-karta { padding: 26px 22px; }
  .mj-slot  { min-height: 200px; }

  /* Wiersz cennika łamie się na dwie linie: nazwa u góry,
     czas i cena pod spodem po przeciwnych stronach.
     Linia kropkowana znika, bo nie ma czego łączyć. */
  .mj-pozycja {
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 14px 0;
  }
  .mj-pozycja__nazwa { flex: 1 0 100%; }
  .mj-pozycja__linia { display: none; }
  .mj-pozycja__czas  { order: 2; }
  .mj-pozycja__cena  { order: 3; margin-left: auto; min-width: 0; }

  /* Stopka: jedna kolumna, dane firmy na górze. */
  .mj-footer__gora { grid-template-columns: 1fr; gap: 32px; padding: 40px var(--margines) 32px; }
  .mj-footer__godziny > div { max-width: none; }
  .mj-footer__dol { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mj-footer__cta { align-self: stretch; }

  .mj-btn { width: 100%; }
  .mj-btn--auto { width: auto; }
  .mj-header__cta .mj-btn { width: auto; }
}

/* --- Dostępność dotyku ---
   Wytyczne WCAG mówią o polach nie mniejszych niż 44 × 44 px. Elementy
   w kształcie pigułek (chipy kategorii, skróty cennika, przyciski social)
   mają domyślnie ok. 33 px wysokości — na desktopie z myszą to bez znaczenia,
   na telefonie oznacza chybione kliknięcia. --- */
@media (hover: none) {
  .mj-filtr,
  .mj-kotwica,
  .mj-skrot,
  .mj-social__link,
  .page-numbers {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .mj-nav__link,
  .mj-link-strzalka,
  .mj-link-podkreslony { min-height: 44px; align-items: center; }
}

/* --- Bardzo wąskie ekrany --- */
@media (max-width: 380px) {
  :root { --margines: 16px; }

  /* Cena i czas obok siebie nie mieszczą się przy długich nazwach. */
  .mj-pozycja__czas { font-size: var(--fs-mini); }
}


/* --------------------------------------------------------------------------
   10. DRUK — cennik bywa drukowany w salonie
   -------------------------------------------------------------------------- */

@media print {
  .mj-header, .mj-footer, .mj-burger, .mj-btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .mj-pozycja { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   MODUŁ REZERWACJI BOOKSY
   Ramka z aplikacją Booksy wjeżdża tu dopiero po kliknięciu przycisku.
   Style trzymamy oszczędne: wnętrze ramki należy do Booksy i nie mamy
   na nie wpływu, więc ograniczamy się do osadzenia jej w siatce strony.
   -------------------------------------------------------------------------- */
/* Przycisk i nota pod nim leżą na osi sekcji.
   Bez max-width — inaczej środkowałyby się względem lewych 820 px,
   a nie względem całej szerokości, i wyglądałyby na przesunięte. */
.mj-booksy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* Kalendarz wraca do pełnej szerokości i do wyrównania do lewej —
   to już nie nasz komponent, tylko aplikacja Booksy. */
.mj-booksy__ramka { text-align: left; }

/* Wariant „od razu" (strona /rezerwacja): nie ma przycisku ani noty,
   więc centrowanie nie ma czego wyrównywać, a szerokość ma być pełna. */
.mj-booksy[data-od-razu] {
  align-items: stretch;
  max-width: none;
  text-align: left;
}

.mj-booksy__nota {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--tekst-3);
}

.mj-booksy__ramka { width: 100%; }
.mj-booksy__ramka[hidden] { display: none; }

/* Odstęp między sekcją rezerwacji a mapą pod nią. Bez niego ciemna
   krawędź mapy dokleja się do jasnego tła sekcji i wygląda, jakby
   jedno wchodziło w drugie. */
#rezerwacja-online + .mj-mapa { margin-top: var(--sekcja-y); }

/* Booksy wstawia własny pojemnik i sam ustawia wysokość ramki przez
   wiadomości postMessage. Nam zostaje dopilnować szerokości — domyślnie
   ramka ma sztywne 770 px i na telefonie wystawałaby poza ekran. */
.mj-booksy__ramka .booksy-widget-container,
.mj-booksy__ramka iframe {
  width: 100% !important;
  max-width: 100%;
  border: 0;
}

.mj-booksy__start[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* --------------------------------------------------------------------------
   BANER ZGÓD NA COOKIES
   Pasek przy dolnej krawędzi okna. Świadomie nie zaciemniamy strony i nie
   blokujemy przewijania — baner ma pytać, a nie brać stronę na zakładnika.
   Zgoda wymuszona blokadą treści bywa uznawana za wadliwą, bo nie jest
   dobrowolna.
   -------------------------------------------------------------------------- */
.mj-zgody {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;              /* ponad nagłówkiem (100) i paskiem światów (101) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 20px var(--margines);
  background: var(--stopka-bg);
  color: var(--stopka-tekst);
  box-shadow: 0 -8px 32px rgba(0, 33, 44, 0.18);
  animation: mj-zgody-wjazd 320ms ease-out both;
}
.mj-zgody[hidden] { display: none; }

@keyframes mj-zgody-wjazd {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mj-zgody { animation: none; }
}

.mj-zgody__tresc { max-width: 68ch; }

.mj-zgody__tytul {
  margin: 0 0 4px;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stopka-akcent);
}

.mj-zgody__opis {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
}
.mj-zgody__opis a { border-bottom: 1px solid currentColor; }

.mj-zgody__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: none;
}

/* Odnośnik „Ustawienia cookies" w stopce. Ukryty do czasu, aż skrypt
   potwierdzi, że jest czym sterować — martwy odnośnik gorszy niż jego brak. */
.mj-zgody-otworz[hidden] { display: none; }
.mj-zgody-otworz { cursor: pointer; }

/* Odmowa wygląda tak samo mocno jak zgoda — to warunek skuteczności zgody,
   nie kwestia gustu. Różni je kolor, nie waga. */
.mj-zgody__btn { border-color: currentColor; color: var(--stopka-tekst); }
.mj-zgody__btn.mj-btn--zloty { color: var(--granat-4); }

@media (max-width: 767px) {
  .mj-zgody { padding: 18px var(--margines); gap: 14px; }
  .mj-zgody__akcje { width: 100%; }
  .mj-zgody__btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   EKRAN WERYFIKACJI VOUCHERA
   Używany przy kasie, na telefonie, przy kliencie. Wszystko duże:
   wynik ma być czytelny z odległości wyciągniętej ręki, bez przybliżania.
   -------------------------------------------------------------------------- */
.mj-weryfikacja { max-width: 620px; margin: 0 auto; }

.mj-wer-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.mj-etykieta-duza {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-4);
}

/* Prefiks „MJ-” i pole tworzą jedną ramkę, ale prefiks jest osobnym
   napisem — nie da się go skasować ani pomylić ze znakiem kodu. */
.mj-wer-wejscie {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--linia-2);
  transition: border-color var(--przejscie);
}
.mj-wer-wejscie:focus-within { border-color: var(--akcent); }

.mj-wer-prefiks {
  display: flex;
  align-items: center;
  padding: 0 4px 0 20px;
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  color: var(--tekst-4);
  user-select: none;
}

.mj-wer-podpowiedz {
  margin: -4px 0 0;
  font-size: var(--fs-xs);
  color: var(--tekst-3);
}

/* Pole na kod: krój o stałej szerokości znaku i szeroka interlinia.
   Przy stałej szerokości od razu widać, ile znaków już jest — a to
   najczęstszy sposób, w jaki człowiek łapie własną literówkę. */
.mj-wer-pole {
  flex: 1;
  min-width: 0;
  padding: 18px 20px 18px 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  text-align: left;
  color: var(--naglowek);
  -webkit-appearance: none;
          appearance: none;
}
.mj-wer-pole:focus { outline: none; }

.mj-wer-szukaj { width: 100%; padding: 18px; }

/* --- Karta wyniku --- */
.mj-wer-karta {
  padding: 32px 28px;
  border-left: 6px solid var(--linia-2);
  background: var(--bg-alt);
  text-align: center;
}
.mj-wer-karta--ok    { border-left-color: #1D9E75; background: #EDF7F2; }
.mj-wer-karta--stop  { border-left-color: #A32D2D; background: #FBEEEE; }
.mj-wer-karta--uwaga { border-left-color: #BA7517; background: #FBF3E7; }
.mj-wer-karta--info  { border-left-color: var(--akcent); }

.mj-wer-naglowek {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mj-wer-karta--ok    .mj-wer-naglowek { color: #0F6E56; }
.mj-wer-karta--stop  .mj-wer-naglowek { color: #A32D2D; }
.mj-wer-karta--uwaga .mj-wer-naglowek { color: #854F0B; }

/* Kwota to najważniejsza liczba na tym ekranie — to ją pracownica
   odejmuje od rachunku. Stąd rozmiar. */
.mj-wer-kwota {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 12vw, 4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--naglowek);
}
.mj-wer-kwota--przekreslona {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.55;
}

.mj-wer-dane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 22px;
  text-align: left;
}
.mj-wer-dane > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 33, 44, 0.08);
}
.mj-wer-dane dt {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tekst-4);
}
.mj-wer-dane dd { margin: 0; font-size: var(--fs-sm); text-align: right; }
.mj-wer-dane code { font-size: var(--fs-sm); letter-spacing: 0.08em; }

/* Pole dotyku 60 px — kliknięcie „zrealizuj” jest nieodwracalne bez
   administratora, więc przycisk ma być duży i trudny do trafienia
   przypadkiem obok. */
.mj-wer-duzy { width: 100%; padding: 20px; font-size: var(--fs-sm); }
.mj-wer-realizuj { margin: 0; }

/* Wybór osoby realizującej. Stoi nad przyciskiem, więc musi być
   wyraźnie od niego oddzielony — inaczej przy pośpiechu zlewa się
   w jeden element i palec ląduje nie tam, gdzie trzeba. */
.mj-wer-kto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  text-align: left;
}

.mj-wer-kto__etykieta {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tekst-4);
}

/* Wysokość 56 px: lista rozwijana na telefonie otwiera systemowy
   wybór, ale samo dotknięcie musi trafić w cel za pierwszym razem. */
.mj-wer-kto__wybor {
  width: 100%;
  min-height: 56px;
  padding: 14px 44px 14px 16px;
  background: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2300212C' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  border: 1px solid var(--linia-2);
  border-radius: 0;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--naglowek);
  -webkit-appearance: none;
          appearance: none;
}
.mj-wer-kto__wybor:focus {
  outline: none;
  border-color: var(--akcent);
}

.mj-wer-instrukcja { margin: 0; font-size: var(--fs-sm); }

.mj-wer-uwaga {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 33, 44, 0.08);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--tekst-3);
}

/* Komunikat po powrocie z bramki płatności. Stoi nad konfiguratorem,
   bo to pierwsza rzecz, której klient szuka po zapłaceniu. */
.mj-platnosc {
  margin: 0 0 32px;
  padding: 22px 26px;
  border-left: 4px solid var(--akcent);
  background: var(--bg-alt);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--tekst-2);
}
.mj-platnosc--ok   { border-left-color: #1D9E75; background: #EDF7F2; }
.mj-platnosc--blad { border-left-color: #A32D2D; background: #FBEEEE; }

/* Zgoda na regulamin przed płatnością. Okienko jest wyraźnie oddzielone
   od przycisku — to dwie osobne decyzje i nie mogą się zlewać w jedną. */
.mj-zgoda-zakup {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 20px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--tekst-2);
  cursor: pointer;
}

/* 20 px to minimum, w które da się trafić palcem bez celowania. */
.mj-zgoda-zakup input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--akcent);
  cursor: pointer;
}

.mj-zgoda-zakup a { color: var(--naglowek); text-decoration: underline; }
.mj-zgoda-zakup a:hover { color: var(--akcent); }
.mj-platnosc--test { border-left-color: #BA7517; background: #FBF3E7; }

/* ==========================================================================
   11. STRONA ŚWIATA Z DZIEDZINAMI — wspólna dla Hair i Beauty (od 0.13)

   Do 0.12 te reguły siedziały w beauty.css z prefiksem .world-beauty.
   Po wydzieleniu Hair oba światy mają tę samą konstrukcję strony: hero
   ze zdjęciem, kafle dziedzin, przyklejony pasek kotwic, zwijane listy
   usług z cennika. Trzymanie dwóch kopii tych samych reguł gwarantuje,
   że za trzy miesiące będą się różnić — więc komponent jest tu, a światy
   podają mu wyłącznie kolory przez cztery tokeny:

     --swiat-akcent   kropka, górne kreski kart, kontur przycisku
     --swiat-ciemny   nadtytuły grup zabiegów, tekst przycisku konturowego
     --swiat-mgla     link powrotny, etykiety placeholderów zdjęć
     --swiat-slot-1/2 paski placeholdera zdjęcia

   Pamiętaj o pułapce opisanej w sekcji 2: zmienne rozwijają się tam,
   gdzie są zadeklarowane, więc tokeny świata MUSZĄ być ustawione na
   klasie świata (.world-hair, .world-beauty), nie w :root.
   ========================================================================== */

/* Aktywna pozycja menu */
:is(.world-hair, .world-beauty) .mj-nav__item.is-aktywny > .mj-nav__link {
  color: var(--swiat-ciemny);
  border-bottom-color: var(--swiat-akcent);
}

/* Link powrotny — przygaszony, ale zawsze widoczny. */
:is(.world-hair, .world-beauty) .mj-nav__item--powrot .mj-nav__link { color: var(--swiat-mgla); }

/* Przyciski świata */
:is(.world-hair, .world-beauty) .mj-btn--swiat-pelny {
  background: var(--pruski);
  color: var(--bg);
  border-radius: var(--promien);
}
:is(.world-hair, .world-beauty) .mj-btn--swiat-kontur {
  border-color: var(--swiat-akcent);
  color: var(--swiat-ciemny);
  border-radius: var(--promien);
}
:is(.world-hair, .world-beauty) .mj-btn--swiat-kontur:hover { opacity: 1; border-color: var(--swiat-ciemny); }

/* Sloty na zdjęcia w tonacji świata */
:is(.world-hair, .world-beauty) .mj-slot {
  background: repeating-linear-gradient(135deg, var(--swiat-slot-1) 0 11px, var(--swiat-slot-2) 11px 22px);
}
:is(.world-hair, .world-beauty) .mj-slot__etykieta { color: var(--swiat-mgla); }

/* Hero ze zdjęciem roztapiającym się w tle po lewej — jak na Head Spa
   i u barbera. Kadr musi mieć zapas po lewej, inaczej maska utnie temat. */
:is(.world-hair, .world-beauty) .mj-hero-foto {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 44%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%);
          mask-image: linear-gradient(90deg, transparent, #000 32%);
}

/* Kropka w punktach */
:is(.world-hair, .world-beauty) .mj-punkt .mj-kropka { background: var(--swiat-akcent); }

/* Nagłówek sekcji z tekstem po prawej */
:is(.world-hair, .world-beauty) .mj-naglowek-sekcji__boczny { max-width: 340px; text-align: right; }
:is(.world-hair, .world-beauty, .world-spa) .mj-naglowek-sekcji__opis {
  max-width: 62ch;
  margin-top: 14px;
  color: var(--tresc);
}

/* Dziedziny — numerowane kafle z listą usług pod spodem */
:is(.world-hair, .world-beauty) .mj-dziedzina { scroll-margin-top: 140px; }
:is(.world-hair, .world-beauty, .world-spa) .mj-dziedzina__meta {
  margin: 10px 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akcent);
}
:is(.world-hair, .world-beauty, .world-spa) .mj-dziedzina__lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 900px;
}

/* Zwijka na barwnym tle potrzebuje własnej podkładki, inaczej przy
   rozwinięciu nie widać, gdzie kończy się jedna kategoria, a zaczyna druga.
   Head Spa korzysta z tego samego komponentu w sekcji masaży twarzy. */
:is(.world-hair, .world-beauty, .world-spa) .mj-zwijka {
  padding: 22px 26px;
  background: var(--bg-karta);
  border-bottom: 1px solid var(--kreska);
}
:is(.world-hair, .world-beauty, .world-spa) .mj-zwijka[open] { padding-bottom: 30px; }
:is(.world-hair, .world-beauty, .world-spa) .mj-zwijka .mj-kat__nazwa { font-size: var(--fs-h4); }
:is(.world-hair, .world-beauty, .world-spa) .mj-dziedzina__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Kafle dziedzin — skrót nawigacyjny na górze strony */
:is(.world-hair, .world-beauty) .mj-dziedzina-kafel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 26px;
  background: var(--bg-karta);
  border-top: 2px solid var(--swiat-akcent);
  transition: transform var(--przejscie), box-shadow var(--przejscie);
}
:is(.world-hair, .world-beauty) .mj-dziedzina-kafel:hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 54, 70, 0.08);
}
:is(.world-hair, .world-beauty) .mj-dziedzina-kafel__meta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--akcent);
}

/* Podnagłówek kategorii wewnątrz dziedziny (mj_lista_uslug, wariant niezwijany) */
:is(.world-hair, .world-beauty) .mj-podkategoria {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 36px 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--kreska-mocna);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 300;
  color: var(--naglowek);
}
:is(.world-hair, .world-beauty) .mj-podkategoria:first-child { margin-top: 0; }
:is(.world-hair, .world-beauty) .mj-podkategoria span {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tekst-4);
}

/* Nagłówek grupy zabiegu w listach usług */
:is(.world-hair, .world-beauty, .world-spa) .mj-grupa {
  margin: 22px 0 6px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--swiat-ciemny);
}
:is(.world-hair, .world-beauty, .world-spa) .mj-grupa:first-child { margin-top: 8px; }

/* Pasek kotwic — przyklejony pod nagłówkiem */
:is(.world-hair, .world-beauty) .mj-kotwice {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  display: flex;
  gap: 8px;
  padding: 14px var(--margines);
  background: var(--bg);
  border-bottom: 1px solid var(--kreska);
  overflow-x: auto;
  scrollbar-width: none;
}
:is(.world-hair, .world-beauty) .mj-kotwice::-webkit-scrollbar { display: none; }
:is(.world-hair, .world-beauty) .mj-kotwica {
  flex: none;
  padding: 10px 18px;
  border: 1px solid var(--kreska);
  border-radius: var(--promien);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--naglowek);
  white-space: nowrap;
  background: var(--bg-karta);
  transition: border-color var(--przejscie);
}
:is(.world-hair, .world-beauty) .mj-kotwica:hover { opacity: 1; border-color: var(--swiat-akcent); }

/* Kafel świata na barwnym tle jest odrobinę niższy — sekcja ma tu
   nagłówek, którego strona główna nie ma. */
:is(.world-hair, .world-beauty) .mj-swiat-kafel { min-height: 280px; }

@media (max-width: 1023px) {
  /* Zdjęcie hero przestaje być pasem z boku i staje się tłem sekcji. */
  :is(.world-hair, .world-beauty) .mj-hero-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0.4;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
            mask-image: linear-gradient(180deg, transparent, #000 60%);
  }
  :is(.world-hair, .world-beauty) .mj-hero-tresc { position: relative; z-index: 2; }
}

@media (max-width: 767px) {
  :is(.world-hair, .world-beauty) .mj-naglowek-sekcji__boczny { max-width: none; text-align: left; }
}