/* ==========================================================
   AURELIA – HAIR ATELIER | BEM po polsku, flexbox
   ==========================================================

   LEGENDA / SPIS SEKCJI (szukaj po tagach [XX] – ten sam tag jest w HTML):
   [01] USTAWIENIA GLOBALNE - :root (tokeny), reset, body.
   [02] ELEMENTY WSPÓLNE - tytuły i opisy sekcji, przyciski (+ sprite ikon SVG w HTML).
   [03] HERO - zdjęcie z efektem Kena Burnsa, logo, wskaźnik przewijania.
   [04] NAGŁÓWEK + NAWIGACJA - górny pasek, menu, hamburger z nożyczkami.
   [05] O NAS - sekcja wstępu ze zdjęciem salonu.
   [06] PRODUKTY - sekcja „Nasze produkty".
   [07] PRZED I PO - suwak porównania, podpowiedź gestu, strzałki i kreski zestawów.
   [08] ZESPÓŁ - właścicielka i fryzjerki.
   [09] REZERWACJA - pola formularza, wybór usługi, dni i godzin, potwierdzenie.
   [10] STOPKA - fale, kolumny, kontakt, linki.
   [11] RESPONSYWNOŚĆ (STRONA GŁÓWNA) - @media 1100/900/700 px, prefers-reduced-motion.
   [12] PODSTRONA - NAGŁÓWEK I HERO USŁUGI - okruszki, tytuł, meta, grafika.
   [13] PODSTRONA - OPIS USŁUGI - kolumny opisu, lista zakresu.
   [14] PODSTRONA - ETAPY - przebieg wizyty krok po kroku.
   [15] PODSTRONA - CENNIK - wiersze z cenami.
   [16] FAQ - pytania (details/summary); podstrony i strona główna [25].
   [17] PODSTRONA - CTA - wezwanie do rezerwacji.
   [18] PODSTRONA - INNE USŁUGI - lista linków z miniaturami.
   [19] RESPONSYWNOŚĆ (PODSTRONY) - @media 900/700 px.
   [20] OFERTA - KARTY USŁUG - 6 kart na stronie głównej (+ ich @media).
   [21] OPINIE - brązowy pasek z polaroidem, cytat, gwiazdki, kropki (+ @media).
   [22] WIZYTA BEZ POŚPIECHU - 4 zasady pracy salonu pod sekcją „O nas”.
   [23] CENNIK (STRONA GŁÓWNA) - skrót cen z paskiem czasu zabiegu.
   [24] GALERIA - filtry, rzędy dopasowane do proporcji zdjęć, podgląd (lightbox).
   [25] FAQ (STRONA GŁÓWNA) - modyfikator .faq--glowna (bazowe style pytań w [16]).
   [26] DOJAZD - adres, godziny, wskazówki, panel z linkiem do Map Google.
   [27] PASEK CTA - pływający przycisk „Umów wizytę” (+ linki menu bez łamania).
   ========================================================== */

/* ==========================================================
   [01] USTAWIENIA GLOBALNE (:root, reset)
   ========================================================== */
:root {
  --kolor-tlo: #cdc4b6;
  --kolor-biel: #ffffff;
  --kolor-brazowy: #6c5649;
  --kolor-ciemny: #3f342d;
  --kolor-tekst: #1e1a17;
  --kolor-tekst-slaby: #4a423b;
  --kolor-grafit: #4f585d;
  --kolor-papier: #e7e0d5; /* [23] tło cennika, [26] mapa */
  --kolor-noc: #2a211b; /* [24] tło galerii */
  --font-glowny: "Josefin Sans", "Century Gothic", system-ui, sans-serif;
  --font-cytat:
    "Cormorant Garamond", Georgia, "Times New Roman", serif; /* [21] cytaty opinii */
  --odstep-boczny: clamp(1.5rem, 4vw, 3rem);
  --odstep-sekcji: clamp(4rem, 9vw, 7rem);
  /* --kenburns-czas: 24s; */
  /* --kenburns-skala: 1.05; */
  --kenburns-czas: 12s;
  --kenburns-skala: 1.08;
  --szerokosc: 1320px;
  --nachylenie: clamp(24px, 4.6vw, 70px);
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
}
.strona {
  font-family: var(--font-glowny);
  font-weight: 300;
  font-size: 1rem;
  color: var(--kolor-tekst);
  background: var(--kolor-tlo);
  line-height: 1.9;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* ==========================================================
   [02] ELEMENTY WSPÓLNE (tytuły sekcji, przyciski)
   ========================================================== */
.sekcja__tytul {
  font-weight: 200;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.sekcja__tytul--duzy {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 200;
  letter-spacing: 0.1em;
}
.sekcja__tytul--jasny {
  color: #f3ece3;
}
.sekcja__opis {
  max-width: 34rem;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--kolor-tekst-slaby);
}
.sekcja__opis--srodek {
  text-align: center;
  margin-inline: auto;
}
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.6rem 2.1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.3s;
}
.przycisk:hover {
  transform: translateY(-2px);
}
.przycisk--bialy {
  background: var(--kolor-biel);
  color: var(--kolor-tekst);
}
.przycisk--bialy:hover {
  background: #efe8de;
}
.przycisk--brazowy {
  background: var(--kolor-brazowy);
  color: #f3ece3;
}
.przycisk--brazowy:hover {
  background: var(--kolor-ciemny);
}

/* ==========================================================
   [03] HERO
   ========================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: clip; /* powiększony efektem Kena Burnsa obraz nie wystaje w bok; w pionie menu mobilne zostaje widoczne */
  min-height: clamp(560px, 100svh, 980px);
  padding-inline: var(--odstep-boczny);
  color: #f4eee6;
  background: #343c43;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--nachylenie)), 0 100%);
  isolation: isolate;
}
.hero__obraz {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 82% 40%;
  transform-origin: 78% 45%;
  will-change: transform;
  animation: kenburns var(--kenburns-czas) ease-in-out infinite alternate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 16, 20, 0.55) 0%, rgba(12, 16, 20, 0) 26%),
    linear-gradient(
      90deg,
      rgba(12, 16, 20, 0.5) 0%,
      rgba(12, 16, 20, 0.22) 42%,
      rgba(12, 16, 20, 0) 68%
    ),
    linear-gradient(0deg, rgba(12, 16, 20, 0.3), rgba(12, 16, 20, 0) 30%);
}
.hero__napis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: var(--nachylenie);
  font-weight: 100;
}
.hero__marka {
  font-size: clamp(3.2rem, 11.2vw, 10.6rem);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 2px 36px rgba(0, 0, 0, 0.35);
}
.hero__podpis {
  margin: 1.1rem 0 0 0.35em;
  font-size: clamp(0.7rem, 1.1vw, 0.9rem);
  font-weight: 300;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.hero__przewin {
  position: absolute;
  left: var(--odstep-boczny);
  bottom: calc(var(--nachylenie) + 1.4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.85;
}
.hero__przewin-linia {
  width: 1px;
  height: 44px;
  background: linear-gradient(#f4eee6, transparent);
  transform-origin: top;
  animation: linia 2.4s ease-in-out infinite;
}
@keyframes kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(var(--kenburns-skala));
  }
}
@keyframes linia {
  0% {
    transform: scaleY(0);
  }
  55% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

/* ==========================================================
   [04] NAGŁÓWEK + NAWIGACJA
   ========================================================== */
.naglowek {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: calc(1.8rem + env(safe-area-inset-top, 0px)) var(--odstep-boczny)
    1rem;
}
.naglowek > * {
  flex: 1;
}
.nawigacja__lista {
  display: flex;
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
}
.nawigacja__link {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.nawigacja__link:hover,
.nawigacja__link--aktywny {
  border-color: currentColor;
}
.naglowek {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.naglowek__logo {
  flex: 0 0 auto;
  font-size: 1.7rem;
  font-weight: 200;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
}
.naglowek__prawa {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6rem;
}
.naglowek__prawa .przycisk {
  min-height: 40px;
  padding-inline: 1.7rem;
}
.social {
  display: flex;
  gap: 1.2rem;
}
.social__link {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.social__link:hover {
  opacity: 0.6;
}
.naglowek__przelacznik {
  display: none;
  flex: 0 0 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  --nozyczki-oko: #343c43;
}
.naglowek__linia {
  width: 22px;
  height: 1px;
  background: currentColor;
  transition:
    width 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.3s;
}
.naglowek__linia:last-child {
  width: 14px;
}
.nozyczki {
  position: relative;
  display: block;
  width: 25px;
  height: 28px;
  margin-bottom: 2px;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.nozyczki__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition:
    opacity 0.25s ease,
    transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.nozyczki__svg--otwarte {
  opacity: 0;
  transform: scale(0.82);
}
/* po kliknięciu: pełny obrót i otwarcie nożyczek (zamknięte → otwarte) */
.naglowek__przelacznik[aria-expanded="true"] .nozyczki {
  transform: rotate(360deg);
}
.naglowek__przelacznik[aria-expanded="true"] .nozyczki__svg--zamkniete {
  opacity: 0;
  transform: scale(1.12);
  transition-delay: 0.2s;
}
.naglowek__przelacznik[aria-expanded="true"] .nozyczki__svg--otwarte {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.2s;
}
.naglowek__przelacznik[aria-expanded="true"] .nozyczki + .naglowek__linia {
  width: 22px;
}
.naglowek__przelacznik[aria-expanded="true"] .nozyczki + .naglowek__linia {
  width: 14px;
}
.naglowek__przelacznik[aria-expanded="true"] .naglowek__linia:last-child {
  width: 22px;
}
@media (hover: hover) and (pointer: fine) {
  .naglowek__przelacznik[aria-expanded="false"]:hover .nozyczki {
    transform: rotate(-12deg);
  }
}

/* ==========================================================
   [05] O NAS (wstęp)
   ========================================================== */
.wstep {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-top: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: var(--odstep-sekcji);
  padding-left: max(
    var(--odstep-boczny),
    calc((100% - var(--szerokosc)) / 2 + var(--odstep-boczny))
  );
}
.wstep__tresc {
  flex: 0 0 min(38rem, 44%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.wstep__tytul {
  font-weight: 200;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: 0.1em;
  line-height: 1.55;
}
.wstep__marka {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #000;
}
.wstep__opis {
  max-width: 27rem;
  font-size: 0.85rem;
  line-height: 2.1;
}
.wstep__zdjecie {
  flex: 1;
  align-self: stretch;
  min-height: clamp(320px, 42vw, 580px);
  position: relative;
}
.wstep__obraz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================
   [06] PRODUKTY
   ========================================================== */
.produkty {
  display: flex;
  align-items: center;
  background: var(--kolor-biel);
}
.produkty__zdjecie {
  flex: 0 0 50%;
  position: relative;
  min-height: clamp(340px, 43vw, 620px);
  align-self: stretch;
}
.produkty__obraz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.produkty__tresc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.8rem;
  padding: var(--odstep-sekcji) var(--odstep-boczny);
  padding-left: clamp(2rem, 6vw, 6rem);
  max-width: 40rem;
  margin-right: auto;
}

/* ==========================================================
   [07] PRZED I PO
   Kontener z suwakiem; obrazy w zmiennych --przed / --po.
   ========================================================== */
.przed-po {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: var(--odstep-sekcji) var(--odstep-boczny);
  background: var(--kolor-biel);
}
.przed-po__karuzela {
  display: flex;
  flex-direction: column; /* suwak na górze, pasek nawigacji pod nim */
  width: 100%;
  max-width: 1100px;
  background: #efe8de;
  overflow: hidden;
}
.przed-po__suwak {
  --pozycja: 50%;
  position: relative;
  flex: 1;
  aspect-ratio: 16 / 10; /* = proporcje zdjęć 1600×1000, nic nie jest ucinane */
  min-height: 220px;
  --przed: url("../img/przed-1.webp");
  --po: url("../img/po-1.webp");
}
.przed-po__suwak[data-zestaw="2"] {
  --przed: url("../img/przed-2.webp");
  --po: url("../img/po-2.webp");
}
.przed-po__suwak[data-zestaw="3"] {
  --przed: url("../img/przed-3.webp");
  --po: url("../img/po-3.webp");
}
.przed-po__warstwa {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.przed-po__warstwa--przed {
  background-image: var(--przed);
}
.przed-po__warstwa--po {
  background-image: var(--po);
  clip-path: inset(0 0 0 var(--pozycja));
}
.przed-po__uchwyt {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--pozycja);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #fff;
  color: var(--kolor-brazowy);
  font-weight: 400;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.przed-po__suwak::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pozycja);
  width: 1px;
  background: #fff;
  pointer-events: none;
}
.przed-po__zakres {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}
.znacznik {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 1rem;
  padding: 0.25rem 0.9rem;
  background: var(--kolor-brazowy);
  color: #f3ece3;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.znacznik--prawy {
  left: auto;
  right: 1rem;
  background: var(--kolor-ciemny);
}
/* pulsujący pierścień wokół uchwytu – zaproszenie do przeciągnięcia (do pierwszego ruchu) */
.przed-po__uchwyt::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
}
.przed-po__suwak--podpowiedz .przed-po__uchwyt::before {
  animation: przed-po-pierscien 1.8s ease-out infinite;
}
@keyframes przed-po-pierscien {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* podpowiedź gestu na dole, na środku zdjęcia; znika po pierwszym ruchu suwaka */
.przed-po__podpowiedz {
  position: absolute;
  z-index: 2;
  bottom: clamp(0.8rem, 3vw, 1.4rem);
  left: 50%; /* stały środek – napis nie wyjeżdża poza zdjęcie, gdy uchwyt jest przy krawędzi */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.przed-po__suwak--podpowiedz .przed-po__podpowiedz {
  opacity: 1;
}
.przed-po__palec {
  display: none; /* tylko tablet i telefon – reguła @media niżej */
  width: 2.8rem;
  height: 2.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  animation: przed-po-palec 2.2s ease-in-out infinite;
}
@keyframes przed-po-palec {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-1.4rem);
  }
  75% {
    transform: translateX(1.4rem);
  }
}
.przed-po__podpowiedz-tekst {
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  background: rgba(30, 26, 23, 0.72);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.przed-po__podpowiedz-tekst--dotyk {
  display: none;
}

/* pasek nawigacji: ‹ kreski 01 / 03 › (bez JS ukryty, bo kreski buduje skrypt) */
.przed-po__nawigacja {
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.4rem);
  padding: 0.7rem 1rem;
  color: var(--kolor-brazowy);
}
.js .przed-po__nawigacja {
  display: flex;
}
.js .przed-po__nawigacja[hidden] {
  display: none;
}
.przed-po__strzalka {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition:
    background-color 0.3s,
    color 0.3s;
}
.przed-po__strzalka:hover {
  background: var(--kolor-brazowy);
  color: #f3ece3;
}
.przed-po__strzalka svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* strzałka „dalej” szturcha w prawo, dopóki odwiedzający nie zmieni zestawu */
.przed-po__karuzela:not(.przed-po__karuzela--uzyta)
  .przed-po__strzalka--dalej
  svg {
  animation: przed-po-zacheta 2.4s ease-in-out infinite;
}
@keyframes przed-po-zacheta {
  0%,
  50%,
  100% {
    transform: none;
  }
  25% {
    transform: translateX(4px);
  }
}
.przed-po__kreski {
  display: flex;
  align-items: center;
}
.przed-po__kreska {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 44px; /* cel dotyku 44 px, widoczna jest tylko kreska ::before */
}
.przed-po__kreska::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  transition:
    width 0.4s,
    opacity 0.4s;
}
.przed-po__kreska:hover::before {
  opacity: 0.6;
}
.przed-po__kreska--aktywna::before {
  width: 2.2rem;
  opacity: 1;
}
.przed-po__karuzela:not(.przed-po__karuzela--uzyta)
  .przed-po__kreska--aktywna::before {
  animation: przed-po-puls 1.8s ease-in-out infinite;
}
@keyframes przed-po-puls {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.przed-po__licznik {
  min-width: 3.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-align: center;
}
/* [07] PRZED I PO – tablet i dotyk: animowany palec i tekst „Przesuń palcem” */
@media (hover: none), (max-width: 1100px) {
  .przed-po__palec,
  .przed-po__podpowiedz-tekst--dotyk {
    display: block;
  }
  .przed-po__podpowiedz-tekst--mysz {
    display: none;
  }
}

/* ==========================================================
   [08] ZESPÓŁ
   ========================================================== */
.zespol {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 5.5rem);
  padding: var(--odstep-sekcji) var(--odstep-boczny);
}
.zespol__naglowek {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}
.zespol__rola {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kolor-brazowy);
}
.wlascicielka {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
}
.wlascicielka__zdjecie {
  flex: 0 0 min(460px, 42%);
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
}
.wlascicielka__obraz,
.fryzjerka__obraz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.wlascicielka__zdjecie:hover .wlascicielka__obraz,
.fryzjerka__zdjecie:hover .fryzjerka__obraz {
  transform: scale(1.04);
}
.wlascicielka__tresc {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}
.wlascicielka__imie {
  font-weight: 100;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wlascicielka__opis {
  max-width: 33rem;
  font-size: 0.93rem;
  color: var(--kolor-tekst-slaby);
}
.wlascicielka__fakty {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 34rem;
  margin: 0.4rem 0 0.6rem;
  border-top: 1px solid rgba(30, 26, 23, 0.28);
  border-bottom: 1px solid rgba(30, 26, 23, 0.28);
}
.fakt {
  flex: 1 1 8rem;
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem 0.9rem 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--kolor-tekst-slaby);
}
.fakt__liczba {
  font-size: 1.9rem;
  font-weight: 100;
  letter-spacing: 0.06em;
  color: var(--kolor-tekst);
  line-height: 1.2;
}
.zespol__lista {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
  padding-top: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(30, 26, 23, 0.28);
}
.fryzjerka {
  flex: 1 1 420px;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.fryzjerka__zdjecie {
  flex: 0 0 min(210px, 42%);
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
}
.fryzjerka__tresc {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.fryzjerka__imie {
  font-weight: 200;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.15;
}
.fryzjerka__opis {
  font-size: 0.86rem;
  color: var(--kolor-tekst-slaby);
}
.fryzjerka__specjalnosc {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(30, 26, 23, 0.28);
}

/* ==========================================================
   [09] REZERWACJA
   ========================================================== */
/* pola formularza */
.pole {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.2rem;
}
.pole__etykieta {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}
.pole__wejscie {
  width: 100%;
  min-height: 46px;
  padding: 0.5rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(30, 26, 23, 0.4);
  border-radius: 0;
  font: inherit;
  font-weight: 300;
  color: inherit;
}
.pole__wejscie::placeholder {
  color: rgba(30, 26, 23, 0.45);
}
.pole__wejscie:focus {
  outline: none;
  border-bottom-color: var(--kolor-brazowy);
}
.pole__wejscie--blad {
  border-bottom-color: #b5473a;
}

/* rezerwacja */
.rezerwacja {
  background: var(--kolor-ciemny);
  color: #e9e1d6;
  padding: var(--odstep-sekcji) var(--odstep-boczny);
}
.rezerwacja__wnetrze {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: 1320px;
  margin-inline: auto;
}
.rezerwacja__intro {
  flex: 0 0 min(30rem, 36%);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 2rem;
}
.rezerwacja__etykieta {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.6;
}
.rezerwacja__opis {
  font-size: 0.92rem;
  opacity: 0.82;
  max-width: 28rem;
}
.rezerwacja__zasady {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(233, 225, 214, 0.2);
}
.rezerwacja__zasada {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(233, 225, 214, 0.2);
  font-size: 0.85rem;
}
.rezerwacja__numer {
  font-size: 1.1rem;
  font-weight: 200;
  letter-spacing: 0.1em;
  color: #d1a06c;
}
.rezerwacja__panel {
  flex: 1;
  min-width: 0;
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
}
.formularz,
.potwierdzenie {
  padding: clamp(1.4rem, 4vw, 3rem);
}
.krok {
  border: 0;
  margin: 0 0 2.2rem;
  min-width: 0;
}
.krok__naglowek {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0;
  font-size: 1.15rem;
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.krok__numer {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--kolor-brazowy);
}
.krok__miesiac {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--kolor-tekst-slaby);
}
.kafle,
.godziny,
.dane {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.kafel,
.godzina {
  position: relative;
  cursor: pointer;
}
.kafel {
  flex: 1 1 calc(50% - 0.7rem);
  min-width: 180px;
}
.kafel__wejscie,
.dzien__wejscie,
.godzina__wejscie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.kafel__tresc,
.dzien__tresc,
.godzina__tresc {
  display: flex;
  border: 1px solid rgba(30, 26, 23, 0.35);
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.kafel__tresc {
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.95rem 1.2rem;
}
.kafel__nazwa {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.kafel__opis {
  font-size: 0.78rem;
  opacity: 0.75;
  letter-spacing: 0.04em;
}
.kafel:hover .kafel__tresc,
.dzien:hover .dzien__tresc,
.godzina:hover .godzina__tresc {
  border-color: var(--kolor-brazowy);
}
.kafel__wejscie:checked + .kafel__tresc,
.dzien__wejscie:checked + .dzien__tresc,
.godzina__wejscie:checked + .godzina__tresc {
  background: var(--kolor-brazowy);
  border-color: var(--kolor-brazowy);
  color: #f3ece3;
}
.kafel__wejscie:focus-visible + .kafel__tresc,
.dzien__wejscie:focus-visible + .dzien__tresc,
.godzina__wejscie:focus-visible + .godzina__tresc {
  outline: 2px solid var(--kolor-ciemny);
  outline-offset: 3px;
}
.dni {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.6rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.dzien {
  position: relative;
  flex: 0 0 68px;
  scroll-snap-align: start;
  cursor: pointer;
}
.dzien__tresc {
  flex-direction: column;
  align-items: center;
  padding: 0.7rem 0;
  line-height: 1.25;
}
.dzien__nazwa {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dzien__numer {
  font-size: 1.7rem;
  font-weight: 200;
}
.dzien__wejscie:disabled,
.godzina__wejscie:disabled {
  cursor: not-allowed;
}
.dzien__wejscie:disabled + .dzien__tresc,
.godzina__wejscie:disabled + .godzina__tresc {
  opacity: 0.32;
  border-style: dashed;
}
.godzina {
  flex: 1 1 82px;
  max-width: 120px;
}
.godzina__tresc {
  justify-content: center;
  padding: 0.7rem 0;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
}
.godziny__info {
  font-size: 0.85rem;
  color: var(--kolor-tekst-slaby);
}
.dane .pole {
  flex: 1 1 200px;
  width: auto;
}
.krok--dane > .pole {
  margin-top: 1rem;
}
.formularz .pole__wejscie {
  border-bottom-color: rgba(30, 26, 23, 0.4);
}
.formularz .pole__wejscie:focus {
  border-color: var(--kolor-brazowy);
}
.formularz .pole__etykieta {
  opacity: 0.75;
}
.formularz__stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(30, 26, 23, 0.25);
}
.formularz__podsumowanie {
  flex: 1 1 14rem;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}
.formularz__podsumowanie strong {
  font-weight: 700;
}
.formularz__komunikat {
  min-height: 1.4em;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #9c3b2b;
}
.potwierdzenie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}
.potwierdzenie[hidden] {
  display: none;
}
.potwierdzenie__znak {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 1px solid var(--kolor-brazowy);
  color: var(--kolor-brazowy);
  font-size: 1.3rem;
}
.potwierdzenie__tytul {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 200;
  letter-spacing: 0.08em;
}
.potwierdzenie__lista {
  width: 100%;
  border-top: 1px solid rgba(30, 26, 23, 0.25);
}
.potwierdzenie__lista li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(30, 26, 23, 0.25);
  font-size: 0.92rem;
}
.potwierdzenie__lista span:first-child {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
}
.potwierdzenie__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
/* [02] ELEMENTY WSPÓLNE – przycisk konturowy, tekst tylko dla czytników ekranu */
.przycisk--kontur {
  border: 1px solid var(--kolor-brazowy);
  color: var(--kolor-brazowy);
}
.przycisk--kontur:hover {
  background: var(--kolor-brazowy);
  color: #f3ece3;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================
   [10] STOPKA
   ========================================================== */
.stopka {
  background: #2a211b;
  color: rgba(233, 225, 214, 0.72);
  font-size: 0.88rem;
  overflow: hidden;
}
.stopka__grafika {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  border-bottom: 1px solid rgba(233, 225, 214, 0.12);
}
.stopka__fale {
  width: 100%;
  height: auto;
  min-height: 160px;
  object-fit: cover;
  opacity: 0.95;
}
.stopka__slowo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  text-align: center;
  font-size: clamp(4rem, 17vw, 15rem);
  font-weight: 100;
  line-height: 0.8;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(233, 225, 214, 0.1);
  pointer-events: none;
  white-space: nowrap;
}
.stopka__kolumny {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--odstep-boczny);
}
.stopka__kolumna {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.stopka__kolumna--marka {
  flex: 2 1 280px;
  max-width: 26rem;
}
.stopka__marka {
  font-size: 1.7rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f1e9de;
  line-height: 1;
}
.stopka__opis {
  font-size: 0.85rem;
  line-height: 1.9;
}
.stopka__tytul {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #d1a06c;
}
.stopka__lista {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.stopka__adres {
  font-style: normal;
  line-height: 2;
}
.stopka__godziny {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.stopka__godziny div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 14rem;
}
.stopka__godziny dt {
  opacity: 0.7;
}
.stopka__link {
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px
    no-repeat;
  transition:
    background-size 0.25s,
    color 0.25s;
  padding-bottom: 1px;
}
.stopka__link:hover {
  color: #f1e9de;
  background-size: 100% 1px;
}
.stopka__dol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  max-width: 1320px;
  margin-inline: auto;
  padding: 1.4rem var(--odstep-boczny)
    calc(1.4rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(233, 225, 214, 0.12);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}
.stopka__social {
  display: flex;
  gap: 1.6rem;
}
.stopka__gora {
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.4rem 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.25s;
}
.stopka__gora:hover {
  color: #f1e9de;
}

/* [01] animacja ujawniania sekcji przy przewijaniu (klasy dodaje js/script.js) */
.js .ujawnij {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.js .ujawnij--widoczne {
  opacity: 1;
  transform: none;
}

/* ==========================================================
   [11] RESPONSYWNOŚĆ (STRONA GŁÓWNA)
   ========================================================== */
@media (max-width: 1100px) {
  .wstep__tresc {
    flex-basis: 46%;
  }
} /* [05] O NAS */
@media (max-width: 900px) {
  /* [04] NAGŁÓWEK */
  .naglowek {
    padding-top: calc(1.2rem + env(safe-area-inset-top, 0px));
  }
  .naglowek__przelacznik {
    display: flex;
    order: 3;
    flex: 0 0 44px;
  }
  .naglowek__logo {
    order: 1;
    flex: 1;
    font-size: 1.4rem;
  }
  .naglowek__prawa {
    order: 2;
    flex: 0 0 auto;
  }
  .naglowek__prawa .social {
    display: none;
  }
  /* [04] NAWIGACJA */
  .nawigacja {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex: none;
    background: rgba(40, 34, 30, 0.94);
    backdrop-filter: blur(10px);
    padding: 1rem var(--odstep-boczny) 1.6rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: 0.3s;
  }
  .nawigacja--otwarta {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nawigacja__lista {
    flex-direction: column;
    gap: 0.2rem;
  }
  .nawigacja__link {
    display: inline-block;
    padding-block: 0.6rem;
  }
  /* [03] HERO */
  .hero__obraz {
    object-position: 93% 35%;
    transform-origin: 84% 42%;
  }
  /* [05] O NAS */
  .wstep {
    flex-direction: column;
    align-items: stretch;
    padding-right: 0;
    padding-left: 0;
    gap: 3rem;
  }
  .wstep__tresc {
    flex: none;
    padding-inline: var(--odstep-boczny);
  }
  .wstep__zdjecie {
    flex: none;
    min-height: 0;
    aspect-ratio: 4 / 3.4;
  }
  /* [06] PRODUKTY */
  .produkty {
    flex-direction: column;
  }
  .produkty__zdjecie {
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3.4;
    align-self: auto;
  }
  .produkty__tresc {
    padding: 3.5rem var(--odstep-boczny);
    max-width: none;
    margin: 0;
  }
  /* [08] ZESPÓŁ */
  .wlascicielka {
    flex-direction: column;
    align-items: stretch;
  }
  .wlascicielka__zdjecie {
    flex: none;
    width: min(100%, 460px);
    align-self: center;
  }
  /* [09] REZERWACJA */
  .rezerwacja__wnetrze {
    flex-direction: column;
    align-items: stretch;
  }
  .rezerwacja__intro {
    position: static;
    flex: none;
  }
}
@media (max-width: 700px) {
  /* [02] ELEMENTY WSPÓLNE – na telefonie przyciski w mniejszym rozmiarze (desktop i tablet: 0.95rem) */
  .przycisk {
    font-size: 0.78rem;
  }
  /* [03] HERO */
  .hero {
    min-height: clamp(560px, 92svh, 820px);
    align-items: flex-end;
  }
  .hero__obraz {
    object-position: 88% 25%;
    transform-origin: 80% 38%;
  }
  .hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(12, 16, 20, 0.55) 0%,
        rgba(12, 16, 20, 0) 24%
      ),
      linear-gradient(
        0deg,
        rgba(12, 16, 20, 0.72) 0%,
        rgba(12, 16, 20, 0.25) 38%,
        rgba(12, 16, 20, 0) 62%
      );
  }
  .hero__napis {
    padding-bottom: calc(var(--nachylenie) + 3.4rem);
  }
  .hero__marka {
    font-size: clamp(3rem, 15.5vw, 5rem);
    letter-spacing: 0.08em;
  }
  .hero__podpis {
    letter-spacing: 0.38em;
  }
  .hero__przewin {
    display: none;
  }
  /* [04] NAGŁÓWEK */
  .naglowek__prawa .przycisk {
    display: none;
  }
  /* [08] ZESPÓŁ */
  .fryzjerka {
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
  }
  .fryzjerka__zdjecie {
    flex: none;
    width: min(100%, 320px);
  }
  /* [07] PRZED I PO */
  .przed-po__suwak {
    aspect-ratio: 4 / 3.6;
  }
  .przed-po__kreska {
    width: 2.2rem;
  }
  /* [10] STOPKA */
  .stopka__dol {
    flex-direction: column;
    align-items: flex-start;
  }
  .stopka__fale {
    min-height: 130px;
  }
  /* [09] REZERWACJA */
  .godzina {
    flex: 1 1 70px;
  }
}
/* [01] wszystkie animacje wyłączone, gdy system prosi o ograniczenie ruchu */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  .js .ujawnij {
    opacity: 1;
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================
   [12] PODSTRONA - NAGŁÓWEK I HERO USŁUGI
   ========================================================== */
.strona--podstrona .naglowek {
  position: relative;
  color: var(--kolor-tekst);
  text-shadow: none;
}
.strona--podstrona .naglowek__przelacznik {
  --nozyczki-oko: var(--kolor-tlo);
}
.okruszki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}
.okruszki__link:hover {
  color: var(--kolor-tekst);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.usluga-hero {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--odstep-boczny) var(--odstep-sekcji);
}
.usluga-hero__tresc {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.7rem;
}
.usluga-hero__tytul {
  font-weight: 100;
  font-size: clamp(2.4rem, 4.5vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.usluga-hero__lead {
  max-width: 32rem;
  font-size: 1rem;
  color: var(--kolor-tekst-slaby);
}
.usluga-meta {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 36rem;
  border-top: 1px solid rgba(30, 26, 23, 0.28);
  border-bottom: 1px solid rgba(30, 26, 23, 0.28);
}
.usluga-meta li {
  flex: 1 1 7rem;
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem 0.9rem 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.usluga-meta__etykieta {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
}
.usluga-hero__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.usluga-hero__grafika {
  flex: 1 1 0;
  max-width: 600px;
}
.usluga-hero__obraz {
  width: 100%;
  height: auto;
}

/* ==========================================================
   [13] PODSTRONA - OPIS USŁUGI
   ========================================================== */
.usluga-opis {
  background: var(--kolor-biel);
  padding: var(--odstep-sekcji) var(--odstep-boczny);
}
.usluga-opis__wnetrze {
  display: flex;
  gap: clamp(2rem, 7vw, 7rem);
  max-width: 1320px;
  margin: 0 auto;
}
.usluga-opis__kolumna {
  flex: 1 1 0;
  min-width: 0;
}
.usluga-opis__kolumna p {
  margin-top: 1.3rem;
  max-width: 34rem;
  font-size: 0.95rem;
  color: var(--kolor-tekst-slaby);
}
.usluga-opis__podtytul {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kolor-brazowy);
  margin-bottom: 1.2rem;
}
.lista-zakres {
  border-top: 1px solid rgba(30, 26, 23, 0.25);
}
.lista-zakres__pozycja {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(30, 26, 23, 0.25);
  font-size: 0.95rem;
}
.lista-zakres__pozycja::before {
  content: "";
  flex: 0 0 1.4rem;
  height: 1px;
  background: var(--kolor-brazowy);
  transform: translateY(-0.3em);
}

/* ==========================================================
   [14] PODSTRONA - ETAPY
   ========================================================== */
.usluga-etapy {
  padding: var(--odstep-sekcji) var(--odstep-boczny);
}
.usluga-etapy__wnetrze,
.usluga-cennik__wnetrze,
.faq__wnetrze,
.usluga-inne__wnetrze {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3.5rem);
}
.etapy {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
}
.etap {
  flex: 1 1 210px;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--kolor-tekst);
}
.etap__numer {
  font-size: 2.8rem;
  font-weight: 100;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--kolor-brazowy);
}
.etap__tytul {
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.etap__opis {
  font-size: 0.88rem;
  color: var(--kolor-tekst-slaby);
}

/* [07] PRZED I PO – opis pod tytułem (podstrony) */
.przed-po__opis {
  max-width: 38rem;
  margin-top: -1.2rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--kolor-tekst-slaby);
}

/* ==========================================================
   [15] PODSTRONA - CENNIK
   ========================================================== */
.usluga-cennik {
  padding: var(--odstep-sekcji) var(--odstep-boczny);
}
.usluga-cennik__wnetrze {
  max-width: 880px;
}
.cennik__lista {
  border-top: 1px solid var(--kolor-tekst);
}
.cennik__wiersz {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(30, 26, 23, 0.25);
}
.cennik__nazwa {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.cennik__opis {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.62;
}
.cennik__kropki {
  flex: 1 1 2rem;
  border-bottom: 1px dotted rgba(30, 26, 23, 0.4);
  transform: translateY(-0.35em);
}
.cennik__cena {
  white-space: nowrap;
  letter-spacing: 0.08em;
  color: var(--kolor-brazowy);
}
.cennik__uwaga {
  font-size: 0.8rem;
  color: var(--kolor-tekst-slaby);
}

/* ==========================================================
   [16] PODSTRONA - FAQ
   ========================================================== */
.faq {
  background: var(--kolor-biel);
  padding: var(--odstep-sekcji) var(--odstep-boczny);
}
.faq__wnetrze {
  max-width: 880px;
}
.faq__lista {
  border-top: 1px solid var(--kolor-tekst);
}
.faq__pytanie {
  border-bottom: 1px solid rgba(30, 26, 23, 0.25);
}
.faq__podsumowanie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.02rem;
  letter-spacing: 0.03em;
}
.faq__podsumowanie::-webkit-details-marker {
  display: none;
}
.faq__podsumowanie::after {
  content: "+";
  flex: none;
  font-size: 1.6rem;
  font-weight: 100;
  line-height: 1;
  color: var(--kolor-brazowy);
  transition: transform 0.3s;
}
.faq__pytanie[open] .faq__podsumowanie::after {
  transform: rotate(45deg);
}
.faq__odpowiedz {
  padding: 0 3rem 1.4rem 0;
  font-size: 0.92rem;
  color: var(--kolor-tekst-slaby);
}

/* ==========================================================
   [17] PODSTRONA - CTA
   ========================================================== */
.usluga-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: var(--odstep-sekcji) var(--odstep-boczny);
  text-align: center;
  background: var(--kolor-ciemny);
  color: #e9e1d6;
}
.usluga-cta__tytul {
  font-weight: 100;
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.usluga-cta__opis {
  max-width: 30rem;
  opacity: 0.8;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}

/* ==========================================================
   [18] PODSTRONA - INNE USŁUGI
   ========================================================== */
.usluga-inne {
  padding: var(--odstep-sekcji) var(--odstep-boczny);
}
.inne__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.inna {
  flex: 1 1 320px;
  border-top: 1px solid var(--kolor-tekst);
}
.inna__link {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.2rem 0;
  transition: padding 0.3s;
}
.inna__link:hover {
  padding-left: 0.8rem;
}
.inna__obraz {
  flex: none;
  width: 96px;
  height: 96px;
  object-fit: cover;
}
.inna__tytul {
  flex: 1;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 200;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.inna__strzalka {
  font-size: 1.5rem;
  font-weight: 200;
  color: var(--kolor-brazowy);
}

/* ==========================================================
   [19] RESPONSYWNOŚĆ (PODSTRONY)
   ========================================================== */
@media (max-width: 900px) {
  /* [04] NAWIGACJA (podstrony) */
  .strona--podstrona .nawigacja {
    background: rgba(205, 196, 182, 0.98);
    color: var(--kolor-tekst);
  }
  /* [12] HERO USŁUGI */
  .usluga-hero {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .usluga-hero__grafika {
    align-self: center;
    width: min(100%, 420px);
  }
  .usluga-hero__tytul {
    font-size: clamp(2.4rem, 9vw, 4.6rem);
  }
  /* [13] OPIS USŁUGI */
  .usluga-opis__wnetrze {
    flex-direction: column;
  }
  /* [16] FAQ */
  .faq__odpowiedz {
    padding-right: 0;
  }
}
@media (max-width: 700px) {
  /* [15] CENNIK */
  .cennik__kropki {
    display: none;
  }
  .cennik__wiersz {
    justify-content: space-between;
  }
  /* [18] INNE USŁUGI */
  .inna__obraz {
    width: 72px;
    height: 72px;
  }
  /* [12] HERO USŁUGI – na wąskim telefonie min. 2.4rem było za szerokie („KOLORYZACJA”, „KERATYNOWE”) */
  .usluga-hero__tytul {
    font-size: clamp(1.9rem, 9vw, 3rem);
    overflow-wrap: break-word;
  }
  /* element flex nie może być węższy od najdłuższego słowa (min-width: auto) – długie nazwy usług rozpychały stronę */
  .inna {
    min-width: 0;
  }
  .inna__link {
    gap: 1rem;
  }
  .inna__tytul {
    min-width: 0;
    font-size: clamp(0.85rem, 4vw, 1.2rem); /* „OKOLICZNOŚCIOWE” mieści się w całości od 360 px */
    letter-spacing: 0.06em;
    overflow-wrap: break-word; /* awaryjnie: złam słowo zamiast wychodzić poza ekran */
  }
}

/* ==========================================================
   [20] OFERTA - KARTY USŁUG
   6 kart usług na stronie głównej; ich reguły @media są na końcu bloku.
   ========================================================== */
.oferta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.2rem, 5vw, 3.5rem);
  padding: var(--odstep-sekcji) var(--odstep-boczny);
}
.oferta__naglowek {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}
.oferta__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  max-width: 1500px;
}
.usluga {
  flex: 1 1 calc(16.666% - 1rem);
  min-width: 0; /* 6 kart w rzędzie aż do 1281 px (poniżej 1280 px są 3) */
  display: flex;
  container-type: inline-size; /* karta = kontener: tytuł skaluje się jednostką cqi (% szerokości karty) */
}
.usluga__link {
  flex: 1;
  min-width: 0; /* treść nie może rozepchnąć karty na sąsiednią */
  display: flex;
  flex-direction: column;
  background: #e7e0d5;
  transition:
    transform 0.35s,
    box-shadow 0.35s,
    background-color 0.35s;
}
.usluga__link:hover {
  transform: translateY(-6px);
  background: #f1ece3;
  box-shadow: 0 22px 40px rgba(60, 45, 35, 0.14);
}
.usluga__zdjecie {
  position: relative;
  display: block;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
}
.usluga__obraz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1.1s ease;
}
.usluga__link:hover .usluga__obraz {
  transform: scale(1.05);
}
/* ikona leży POZA .usluga__zdjecie (tam overflow: hidden by ją przycinał);
   ujemne marginesy wsuwają ją do połowy na zdjęcie i do połowy na treść */
.usluga__ikona {
  position: relative;
  z-index: 1;
  align-self: center;
  flex: none;
  margin: -1.55rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: var(--kolor-brazowy);
  color: #f3ece3;
  box-shadow: 0 0 0 5px #e7e0d5;
  transition:
    background-color 0.35s,
    box-shadow 0.35s;
}
.usluga__link:hover .usluga__ikona {
  background: var(--kolor-ciemny);
  box-shadow: 0 0 0 5px #f1ece3;
}
.usluga__ikona svg {
  width: 1.35rem;
  height: 1.35rem;
}
.usluga__tresc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 2.4rem 1.1rem 1.5rem;
  text-align: center;
}
.usluga__tytul {
  /* najdłuższe słowo („OKOLICZNOŚCIOWE”) ma ok. 12 szerokości fontu – 6.8cqi mieści je w każdej karcie */
  font-size: clamp(0.7rem, 6.8cqi, 1rem);
  overflow-wrap: break-word; /* awaryjnie: złam słowo zamiast wychodzić poza kartę */
  hyphens: auto;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
}
.usluga__opis {
  flex: 1;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--kolor-tekst-slaby);
}
.usluga__cena {
  padding-top: 0.7rem;
  border-top: 1px solid rgba(30, 26, 23, 0.25);
  width: 70%;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kolor-brazowy);
}
/* [12] PODSTRONA – długi tytuł hero (pielęgnacja, upięcia) */
.usluga-hero__tytul--dlugi {
  font-size: clamp(2rem, 3.5vw, 3.4rem);
}
@media (max-width: 1280px) {
  .usluga {
    flex-basis: calc(33.333% - 1rem);
  }
} /* [20] OFERTA */
@media (max-width: 900px) {
  .usluga-hero__tytul--dlugi {
    font-size: clamp(1.9rem, 7.2vw, 3.6rem);
  }
} /* [12] HERO USŁUGI */
@media (max-width: 700px) {
  .usluga-hero__tytul--dlugi {
    font-size: clamp(1.6rem, 7.2vw, 2.4rem); /* na wąskim telefonie min. 1.9rem było za szerokie dla „OKOLICZNOŚCIOWE” */
    overflow-wrap: break-word;
  }
} /* [12] HERO USŁUGI */
@media (max-width: 700px) {
  .usluga {
    flex-basis: calc(50% - 0.5rem);
    min-width: 0;
  }
  .oferta__lista {
    gap: 0.8rem;
  }
  .usluga__tresc {
    padding-inline: 0.7rem;
  }
  .usluga__tytul {
    font-size: clamp(0.7rem, 7.2cqi, 0.85rem);
    letter-spacing: 0.06em;
  }
  .usluga__opis {
    font-size: 0.74rem;
  }
} /* [20] OFERTA */
@media (max-width: 359px) {
  .usluga {
    flex-basis: 100%;
  }
} /* [20] OFERTA */

/* ==========================================================
   [21] OPINIE
   Brązowy pasek z odchylonym polaroidem; slajdy leżą jeden na drugim, widoczny jest aktywny.
   ========================================================== */
.opinie {
  padding: calc(var(--odstep-sekcji) * 0.55) var(--odstep-boczny)
    var(--odstep-sekcji);
}
.opinie__karta {
  position: relative;
  max-width: var(--szerokosc);
  margin-inline: auto;
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.5rem, 4vw, 3.5rem)
    clamp(3.8rem, 5vw, 4.4rem); /* dół: miejsce na kropki 44 px */
  background: var(--kolor-brazowy);
  color: #f3ece3;
}
/* slajdy w jednym rzędzie, każdy nachodzi na poprzedni (margin-left: -100%) – wysokość = najwyższy slajd */
.opinie__slajdy {
  display: flex;
}
.opinie__slajd {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.7s ease,
    visibility 0.7s;
}
.opinie__slajd + .opinie__slajd {
  margin-left: -100%;
}
.opinie__slajd--aktywny {
  opacity: 1;
  visibility: visible;
}
.opinie__kropki {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  display: flex;
  gap: 0.2rem;
  transform: translateX(-50%);
}
.opinie__kropka {
  position: relative;
  width: 44px; /* cel dotyku 44 px, widoczne jest tylko kółko ::before */
  height: 44px;
}
.opinie__kropka::before {
  content: "";
  position: absolute;
  inset: 17px;
  border: 1px solid #f3ece3;
  border-radius: 50%;
  transition: background-color 0.3s;
}
.opinie__kropka--aktywna::before,
.opinie__kropka:hover::before {
  background: #f3ece3;
}
.opinie__zdjecie {
  position: relative;
  flex: 0 0 clamp(150px, 17vw, 200px);
  align-self: flex-start;
  margin: calc(-1 * clamp(2.8rem, 5vw, 4rem)) 0
    calc(-1 * clamp(1.6rem, 3vw, 2.6rem)) clamp(0rem, 2vw, 1.6rem);
  padding: 0.6rem 0.6rem 1.9rem;
  background: #fbf8f3;
  box-shadow: 0 10px 28px rgba(30, 20, 14, 0.35);
  transform: rotate(-4deg);
}
/* taśma klejąca polaroid */
.opinie__zdjecie::before {
  content: "";
  position: absolute;
  top: -0.8rem;
  left: 50%;
  width: 4.2rem;
  height: 1.5rem;
  background: rgba(205, 196, 182, 0.85);
  transform: translateX(-50%) rotate(2deg);
}
.opinie__obraz {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.opinie__cudzyslow {
  flex: 0 0 auto;
  align-self: flex-start;
  font-family: var(--font-cytat);
  font-size: clamp(4rem, 7vw, 6rem);
  line-height: 0.8;
  color: var(--kolor-tlo);
  opacity: 0.85;
}
.opinie__tresc {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}
.opinie__naglowek {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 300;
  letter-spacing: 0.04em;
}
.opinie__cytat {
  max-width: 34rem;
  font-family: var(--font-cytat);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.5;
}
.opinie__autor {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.8;
}
.opinie__autor::before {
  content: "— ";
}
.opinie__gwiazdki {
  flex: 0 0 auto;
  display: flex;
  gap: 0.45rem;
  padding-right: clamp(0rem, 2vw, 1.5rem);
  color: #fbf8f3;
}
.opinie__gwiazdka {
  width: 1.15rem;
  height: 1.15rem;
}
@media (max-width: 900px) {
  /* [21] OPINIE – układ kolumnowy, wyśrodkowany */
  .opinie__karta {
    padding-top: 0;
  }
  .opinie__slajd {
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    text-align: center;
  }
  .opinie__zdjecie {
    align-self: center;
    flex: none;
    width: 190px;
    margin: -2.6rem 0 0.6rem;
  }
  .opinie__cudzyslow {
    align-self: center;
    height: 2.4rem;
    font-size: 4rem;
  }
  .opinie__tresc {
    align-items: center;
  }
  .opinie__gwiazdki {
    padding-right: 0;
  }
}

/* ==========================================================
   [22] WIZYTA BEZ POŚPIECHU
   Ciąg dalszy sekcji „O nas”: to samo tło, bez górnego odstępu.
   ========================================================== */
.zasady {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--szerokosc);
  margin-inline: auto;
  padding: 0 var(--odstep-boczny) var(--odstep-sekcji);
}
.zasady__tytul {
  flex: 0 0 min(22rem, 30%);
}
.zasady__lista {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2.6rem clamp(1.5rem, 4vw, 3.5rem);
}
.zasada {
  flex: 1 1 calc(50% - 2rem);
  min-width: 15rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--kolor-tekst);
}
.zasada__tytul {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 200;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
.zasada__opis {
  max-width: 25rem;
  font-size: 0.9rem;
  color: var(--kolor-tekst-slaby);
}
@media (max-width: 1100px) {
  /* [22] WIZYTA BEZ POŚPIECHU */
  .zasady__tytul {
    flex-basis: 34%;
  }
}
@media (max-width: 900px) {
  /* [22] WIZYTA BEZ POŚPIECHU */
  .zasady {
    flex-direction: column;
    align-items: stretch;
    gap: 2.2rem;
  }
  .zasady__tytul {
    flex: none;
  }
}

/* ==========================================================
   [23] CENNIK (STRONA GŁÓWNA)
   Skrót cennika; pasek czasu = --czas × 100% (1 = 3 h), rysuje się po wejściu w widok.
   ========================================================== */
.cennik-skrot {
  background: var(--kolor-papier);
  padding: var(--odstep-sekcji) var(--odstep-boczny);
}
.cennik-skrot__wnetrze {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--szerokosc);
  margin-inline: auto;
}
.cennik-skrot__intro {
  flex: 0 0 min(24rem, 32%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  position: sticky;
  top: 2rem;
}
.cennik-skrot__lista {
  flex: 1;
  min-width: 0;
  border-top: 1px solid var(--kolor-tekst);
}
.cennik-skrot__link {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(30, 26, 23, 0.25);
  transition: padding 0.3s;
}
.cennik-skrot__link:hover {
  padding-left: 0.8rem;
}
.cennik-skrot__nazwa {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.35;
}
.cennik-skrot__opis {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--kolor-tekst-slaby);
}
.cennik-skrot__czas {
  flex: 0 0 8.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--kolor-tekst-slaby);
}
.cennik-skrot__minuty {
  white-space: nowrap;
}
.cennik-skrot__pasek {
  position: relative;
  display: block;
  height: 2px;
  background: rgba(30, 26, 23, 0.16);
}
.cennik-skrot__pasek::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--czas) * 100%);
  background: var(--kolor-brazowy);
}
.cennik-skrot__cena {
  flex: 0 0 6.8rem;
  text-align: right;
  white-space: nowrap;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 200;
  letter-spacing: 0.06em;
  color: var(--kolor-brazowy);
  transition: color 0.3s;
}
.cennik-skrot__link:hover .cennik-skrot__cena {
  color: var(--kolor-ciemny);
}
.js .cennik-skrot__pasek::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.js .ujawnij--widoczne .cennik-skrot__pasek::after {
  transform: none;
}
@media (max-width: 1100px) {
  /* [23] CENNIK (STRONA GŁÓWNA) */
  .cennik-skrot__czas {
    flex-basis: 6.5rem;
  }
}
@media (max-width: 900px) {
  /* [23] CENNIK (STRONA GŁÓWNA) */
  .cennik-skrot__wnetrze {
    flex-direction: column;
    align-items: stretch;
  }
  .cennik-skrot__intro {
    position: static;
    flex: none;
  }
}
@media (max-width: 700px) {
  /* [23] CENNIK (STRONA GŁÓWNA) */
  .cennik-skrot__link {
    flex-wrap: wrap;
    row-gap: 0.8rem;
  }
  .cennik-skrot__nazwa {
    flex-basis: 60%;
  }
  .cennik-skrot__cena {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .cennik-skrot__czas {
    order: 3;
    flex: 0 0 100%;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .cennik-skrot__pasek {
    flex: 1;
  }
  .cennik-skrot__minuty {
    flex: 0 0 4.6rem;
    text-align: right;
  }
}

/* ==========================================================
   [24] GALERIA
   Rzędy dopasowane do proporcji zdjęć (flex + --r); podgląd w <dialog class="lightbox">.
   ========================================================== */
.galeria {
  background: var(--kolor-noc);
  color: #e9e1d6;
  padding: var(--odstep-sekcji) 0;
}
.galeria__naglowek {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.8rem 3rem;
  max-width: var(--szerokosc);
  margin-inline: auto;
  padding-inline: var(--odstep-boczny);
}
.galeria__tytul-blok {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.galeria__opis {
  max-width: 30rem;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  opacity: 0.78;
}
.galeria__sterowanie {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}
.galeria__filtry {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 1.5rem;
}
.galeria__filtr {
  min-height: 44px;
  padding: 0 0.05rem;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  opacity: 0.62;
  background: linear-gradient(currentColor, currentColor) left
    calc(50% + 0.85rem) / 0 1px no-repeat;
  transition:
    opacity 0.25s,
    background-size 0.3s;
}
.galeria__filtr:hover {
  opacity: 1;
}
.galeria__filtr[aria-pressed="true"] {
  opacity: 1;
  background-size: 100% 1px;
}
.galeria__licznik {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.galeria__lista {
  --wiersz: 17rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.galeria__lista::after {
  content: "";
  flex: 999 1 0;
}
.galeria__lista--pelny::after {
  display: none;
}
.galeria__element {
  position: relative;
  flex: var(--r) 1 calc(var(--r) * var(--wiersz));
  min-width: 0;
  aspect-ratio: var(--r);
  overflow: hidden;
  background: #3b2f27;
}
.galeria__element[hidden] {
  display: none;
}
.galeria__przycisk {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.galeria__przycisk:focus-visible {
  outline: 2px solid #f3ece3;
  outline-offset: -6px;
}
.galeria__obraz {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s ease;
}
.galeria__przycisk:hover .galeria__obraz {
  transform: scale(1.05);
}
.galeria__podpis {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 2.6rem 1.1rem 0.9rem;
  text-align: left;
  color: #f6efe6;
  font-size: 0.98rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.35;
  background: linear-gradient(
    to top,
    rgba(20, 14, 10, 0.72),
    rgba(20, 14, 10, 0)
  );
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.35s,
    transform 0.35s;
}
.galeria__podpis small {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  opacity: 0.75;
}
.galeria__przycisk:hover .galeria__podpis,
.galeria__przycisk:focus-visible .galeria__podpis {
  opacity: 1;
  transform: none;
}
.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f3ece3;
}
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox::backdrop {
  background: rgba(24, 17, 12, 0.95);
}
.lightbox__figura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: min(1100px, 100% - 7rem);
  animation: lightbox-wejscie 0.4s ease;
}
.lightbox__obraz {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - 10rem);
  object-fit: contain;
  background: #3b2f27;
}
.lightbox__opis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.06em;
}
.lightbox__opis small {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.lightbox__numer {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  opacity: 0.6;
}
.lightbox__przycisk {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(243, 236, 227, 0.35);
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1;
  transition:
    background-color 0.25s,
    border-color 0.25s;
}
.lightbox__przycisk:hover {
  background: rgba(243, 236, 227, 0.12);
  border-color: rgba(243, 236, 227, 0.7);
}
.lightbox__przycisk--zamknij {
  top: 1.2rem;
  right: 1.2rem;
}
.lightbox__przycisk--poprz {
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__przycisk--nast {
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
}
.bez-przewijania {
  overflow: hidden;
}
@keyframes lightbox-wejscie {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (hover: none) {
  /* [24] GALERIA */
  .galeria__podpis {
    display: none;
  }
}
@media (max-width: 1100px) {
  /* [24] GALERIA */
  .galeria__lista {
    --wiersz: 14rem;
  }
}
@media (max-width: 900px) {
  /* [24] GALERIA */
  .galeria__lista {
    --wiersz: 10.5rem;
  }
  .galeria__sterowanie {
    align-items: flex-start;
  }
  .galeria__filtry {
    justify-content: flex-start;
  }
  .lightbox__figura {
    max-width: calc(100% - 2rem);
  }
  .lightbox__przycisk--poprz,
  .lightbox__przycisk--nast {
    top: auto;
    bottom: 1.2rem;
    transform: none;
  }
  .lightbox__przycisk--poprz {
    left: calc(50% - 4.4rem);
  }
  .lightbox__przycisk--nast {
    right: calc(50% - 4.4rem);
  }
  .lightbox__obraz {
    max-height: calc(100svh - 14rem);
  }
}
@media (max-width: 700px) {
  /* [24] GALERIA */
  .galeria__lista {
    --wiersz: 7rem;
  }
}

/* ==========================================================
   [25] FAQ (STRONA GŁÓWNA)
   Modyfikator .faq--glowna: nagłówek z boku; wspólne style pytań są w [16].
   ========================================================== */
.faq--glowna .faq__wnetrze {
  flex-direction: row;
  align-items: flex-start;
  max-width: var(--szerokosc);
  gap: clamp(2rem, 6vw, 6rem);
}
.faq__intro {
  flex: 0 0 min(24rem, 32%);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  position: sticky;
  top: 2rem;
}
.faq--glowna .faq__lista {
  flex: 1;
  min-width: 0;
}
.faq__link {
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
  transition: color 0.25s;
}
.faq__link:hover {
  color: var(--kolor-brazowy);
}
@media (max-width: 900px) {
  /* [25] FAQ (STRONA GŁÓWNA) */
  .faq--glowna .faq__wnetrze {
    flex-direction: column;
    align-items: stretch;
  }
  .faq__intro {
    position: static;
    flex: none;
  }
}

/* ==========================================================
   [26] DOJAZD
   Panel „mapa” to link do Map Google z tłem SVG dojazd-warstwice (bez zewnętrznych skryptów).
   ========================================================== */
.dojazd {
  padding: var(--odstep-sekcji) var(--odstep-boczny);
}
.dojazd__wnetrze {
  display: flex;
  align-items: stretch;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--szerokosc);
  margin-inline: auto;
}
.dojazd__tresc {
  flex: 0 0 min(30rem, 42%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.7rem;
}
.dojazd__adres {
  font-style: normal;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 200;
  letter-spacing: 0.06em;
  line-height: 1.45;
}
.dojazd__godziny {
  width: 100%;
  max-width: 20rem;
  border-top: 1px solid rgba(30, 26, 23, 0.28);
}
.dojazd__godziny div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(30, 26, 23, 0.28);
  font-size: 0.9rem;
}
.dojazd__godziny dt {
  opacity: 0.7;
}
.dojazd__wskazowki {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 26rem;
  font-size: 0.9rem;
  color: var(--kolor-tekst-slaby);
}
.dojazd__wskazowki strong {
  display: block;
  font-weight: 400;
  color: var(--kolor-tekst);
  letter-spacing: 0.04em;
}
.dojazd__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.dojazd__mapa {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: clamp(340px, 40vw, 540px);
  overflow: hidden;
  background: var(--kolor-papier);
}
.dojazd__tlo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s ease;
}
.dojazd__mapa:hover .dojazd__tlo {
  transform: scale(1.04);
}
.dojazd__pin {
  position: absolute;
  left: 54%;
  top: 46%;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  transform: translate(-1.6rem, -50%);
}
.dojazd__znacznik {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--kolor-brazowy);
  color: #f3ece3;
  box-shadow:
    0 0 0 0.55rem rgba(231, 224, 213, 0.85),
    0 0 0 0.56rem rgba(108, 86, 73, 0.35);
}
.dojazd__znacznik svg {
  width: 1.45rem;
  height: 1.45rem;
}
.dojazd__etykieta {
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  padding: 0.55rem 1rem;
  background: var(--kolor-biel);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  box-shadow: 0 10px 28px rgba(60, 45, 35, 0.16);
}
.dojazd__marka {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dojazd__wskaz {
  position: absolute;
  left: 1.2rem;
  bottom: 1rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}
@media (max-width: 900px) {
  /* [26] DOJAZD */
  .dojazd__wnetrze {
    flex-direction: column;
    align-items: stretch;
  }
  .dojazd__tresc {
    flex: none;
  }
  .dojazd__mapa {
    flex: none;
    min-height: 0;
    aspect-ratio: 4 / 3.2;
  }
  .dojazd__pin {
    left: 9%;
    gap: 1.2rem;
    transform: translateY(-50%);
  }
}

/* ==========================================================
   [27] PASEK CTA
   Pływający przycisk rezerwacji; klasę --widoczny przełącza js/script.js.
   ========================================================== */
.pasek-cta {
  position: fixed;
  z-index: 30;
  right: var(--odstep-boczny);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.35rem 0.35rem 0.5rem;
  background: rgba(42, 33, 27, 0.94);
  backdrop-filter: blur(10px);
  color: #f1e9de;
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(20, 14, 10, 0.35);
  transform: translateY(180%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.55s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.4s,
    visibility 0.55s;
}
.pasek-cta--widoczny {
  transform: none;
  opacity: 1;
  visibility: visible;
}
.pasek-cta__telefon {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  transition: opacity 0.25s;
}
.pasek-cta__telefon:hover {
  opacity: 0.7;
}
.pasek-cta .przycisk {
  min-height: 44px;
  padding-inline: 1.7rem;
  white-space: nowrap;
}
@media (max-width: 900px) {
  /* [27] PASEK CTA */
  .pasek-cta {
    right: auto;
    left: 50%;
    transform: translate(-50%, 180%);
  }
  .pasek-cta--widoczny {
    transform: translateX(-50%);
  }
}

/* [04] NAGŁÓWEK – linki menu nie łamią się na dwie linie (menu ma 6 pozycji) */
.nawigacja__link {
  white-space: nowrap;
}

/* [01] DESKTOP (powyżej 1100 px): wszystkie opisy 1rem – jedna reguła zamiast zmian w każdej sekcji.
   Stoi na końcu arkusza, więc nadpisuje rozmiary z bloków sekcji; tablet i telefon zostają bez zmian. */
@media (min-width: 1101px) {
  .sekcja__opis,            /* [02] opisy pod tytułami sekcji */
  .wstep__opis,             /* [05] */
  .wlascicielka__opis,      /* [08] */
  .fryzjerka__opis,         /* [08] */
  .rezerwacja__opis,        /* [09] */
  .kafel__opis,             /* [09] czas i cena na kafelku usługi */
  .stopka__opis,            /* [10] */
  .usluga-opis__kolumna p,  /* [13] akapity opisu usługi na podstronach */
  .etap__opis,              /* [14] */
  .przed-po__opis,          /* [07] opis pod tytułem na podstronach */
  .cennik__opis,            /* [15] */
  .usluga-cta__opis,        /* [17] */
  .usluga__opis,            /* [20] karty usług */
  .zasada__opis,            /* [22] */
  .cennik-skrot__opis,      /* [23] */
  .galeria__opis,           /* [24] */
  .galeria__filtr,          /* [24] przyciski filtrów kategorii */
  .lightbox__opis {
    /* [24] podpis w podglądzie */
    font-size: 1rem;
  }
}