/* ============================================================
   LASER TOUCH LAB — arkusz systemu
   Jedyne miejsce, w którym definiujemy kolory, typografię i odstępy.
   Nie wpisuj hexów ani px-i w HTML — używaj zmiennych i klas stąd.
   ============================================================ */

:root {
  /* --- Kolor ------------------------------------------------ */
  --espresso:      #2B211A;  /* tekst główny, kotwica kompozycji */
  --espresso-deep: #1D1611;  /* hover na tle espresso */
  --cream:         #FAF6F0;  /* tło główne */
  --sand:          #F0E8DC;  /* tło sekcji naprzemiennych */
  --beige:         #DCCBB4;  /* obramowania, linie działowe */
  --beige-deep:    #E4D8C6;  /* placeholdery zdjęć */
  --gold:          #A98449;  /* jedyny akcent — wyłącznie jako kreska */
  --white:         #FFFFFF;

  /* ZŁOTO MA DWA WARIANTY — to nie jest niedopatrzenie, tylko wymóg czytelności.
     --gold      kreski, ramki, ikony, duże cyfry. Nigdy drobny tekst na jasnym tle.
     --gold-text drobny tekst na jasnym tle: kickery, ceny pierwszego zabiegu, podpisy.

     Kontrast zmierzony:
       #A98449 na kremowym 3.21:1, na piaskowym 2.84:1  → za mało (WCAG AA: 4.5:1)
       #7E6032 na kremowym 5.41:1, na piaskowym 4.79:1  → w porządku
       #A98449 na espresso 4.56:1                        → w porządku
       #7E6032 na espresso 2.70:1                        → za mało

     Na ciemnym tle zależność się odwraca, dlatego .section--dark, .footer i .on-dark
     przestawiają --gold-text z powrotem na jaśniejsze złoto. Dzięki temu w kodzie
     wszędzie piszesz var(--gold-text), a właściwy odcień dobiera się sam. */
  --gold-text:     #7E6032;

  --gold-wash:     rgba(169, 132, 73, 0.10);
  --gold-wash-2:   rgba(169, 132, 73, 0.18);
  --line-on-dark:  rgba(220, 203, 180, 0.20);

  /* --- Typografia ------------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-h1:      clamp(2.25rem, 1.35rem + 3.4vw, 4rem);      /* 36 → 64 */
  --fs-h1-sub:  clamp(2rem, 1.35rem + 2.4vw, 3.5rem);       /* 32 → 56 */
  --fs-h2:      clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem);    /* 28 → 44 */
  --fs-h3:      clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);   /* 22 → 28 */
  --fs-quote:   clamp(1.5rem, 1.05rem + 1.7vw, 2.5rem);     /* 24 → 40 */
  /* Dolne stopnie podniesione o krok (12.08.2026, na życzenie Zamawiającego):
     menu, przyciski, stopka i podpisy robiły wrażenie zbyt drobnych. Nagłówki
     zostają — problem był w piśmie użytkowym, nie w tytułach. */
  --fs-lead:    1.1875rem;  /* 19 */
  --fs-body:    1.125rem;   /* 18 */
  --fs-small:   1rem;       /* 16 */
  --fs-ui:      0.9375rem;  /* 15 */
  --fs-caption: 0.875rem;   /* 14 */
  --fs-micro:   0.625rem;   /* 10 */

  --lh-display: 1.15;
  --lh-body: 1.75;

  /* 0.18em, nie 0.30em. Nazwa ma trzy wyrazy i piętnaście znaków — przy dawnym
     rozstrzeleniu znak byłby dwa razy szerszy od nawigacji. Wrażenie „rozstrzelonej
     litery" utrzymuje sam krój i wersaliki. */
  --ls-brand:   0.18em;
  --ls-kicker:  0.22em;
  --ls-caption: 0.20em;
  --ls-button:  0.14em;

  /* --- Odstępy (skala 8/16/24/40/64/96) ---------------------- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;

  /* Marginesy strony — kurczą się na mniejszych ekranach */
  --gutter: 96px;
  --section-y: 96px;

  /* --- Zaokrąglenia: dwie wartości, nic pomiędzy ------------- */
  --r-sm: 2px;   /* przyciski, pola, badge */
  --r-lg: 8px;   /* karty i większe powierzchnie */

  --shadow-card: 0 1px 2px rgba(43, 33, 26, 0.06);

  --page-max: 1440px;
  --board-max: 1240px;  /* plansze: logotyp, design system */
}

@media (max-width: 1200px) { :root { --gutter: 64px; --section-y: 80px; } }
@media (max-width:  900px) { :root { --gutter: 40px; --section-y: 64px; } }
@media (max-width:  600px) { :root { --gutter: 24px; --section-y: 48px; } }

/* ============================================================
   Reset i baza
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  /* iOS w poziomie samo powiększa tekst w wąskich kolumnach i rozjeżdża
     proporcje pisma. Wyłączamy — skalowanie strony szczypaniem zostaje. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@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(--cream);
  color: var(--espresso);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Siatka bezpieczeństwa: żaden długi ciąg bez spacji — adres, długie słowo
     ukraińskie, wklejony link — nie rozepchnie strony w poziomie. */
  overflow-wrap: break-word;
}

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

a { color: var(--espresso); text-decoration: none; }
a:hover { color: var(--gold); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

::selection { background: var(--gold-wash-2); }

h1, h2, h3, h4, p { margin: 0; }

.tnum { font-variant-numeric: tabular-nums; }

/* Widoczne 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;
}

.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: 100;
  background: var(--espresso); color: var(--cream);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  font-size: var(--fs-ui); letter-spacing: var(--ls-button); text-transform: uppercase;
}
.skip-link:focus { top: var(--s-2); color: var(--cream); }

/* ============================================================
   Typografia
   ============================================================ */

.display-1, .display-2, .display-3 {
  font-family: var(--font-display);
  line-height: var(--lh-display);
}
.display-1 { font-size: var(--fs-h1);     font-weight: 300; }
.display-2 { font-size: var(--fs-h2);     font-weight: 300; }
.display-3 { font-size: var(--fs-h3);     font-weight: 400; line-height: 1.3; }
.display-1--page { font-size: var(--fs-h1-sub); }

.kicker {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--gold-text);
}
.kicker--tight { letter-spacing: var(--ls-caption); }

.lead { font-size: var(--fs-lead); line-height: var(--lh-body); max-width: 62ch; }
.body-sm { font-size: 1rem; line-height: var(--lh-body); }
.muted { opacity: 0.75; }

.measure { max-width: 480px; }
.measure-wide { max-width: 620px; }

/* ============================================================
   Layout
   ============================================================ */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--cream);
}

.section { padding: var(--section-y) var(--gutter); }
.section--sand {
  background: var(--sand);
  border-top: 1px solid var(--beige);
  border-bottom: 1px solid var(--beige);
}
.section--dark { background: var(--espresso); color: var(--cream); }
.section--dark a { color: var(--cream); }
.section--dark a:hover { color: var(--gold); }

/* Na espresso ciemne złoto przestaje być czytelne — wracamy do jaśniejszego. */
.section--dark, .footer, .on-dark { --gold-text: var(--gold); }

.stack { display: flex; flex-direction: column; }
.stack-1 { gap: var(--s-1); }
.stack-2 { gap: var(--s-2); }
.stack-3 { gap: var(--s-3); }
.stack-4 { gap: var(--s-4); }
.stack-5 { gap: var(--s-5); }

.row-between {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}

.hairline { height: 1px; background: var(--beige); border: 0; margin: 0; }
.rule-gold { height: 1px; background: var(--gold); border: 0; margin: 0; }

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Marka / logotyp
   ============================================================ */

.brandmark {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-brand);
  text-transform: uppercase;
  /* letter-spacing dokleja odstęp po ostatniej literze — kompensujemy */
  margin-right: calc(var(--ls-brand) * -1);
}

.brand-sub {
  font-size: var(--fs-micro);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* ============================================================
   Nawigacja
   ============================================================ */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--cream);
  border-bottom: 1px solid var(--beige);
  padding: var(--s-3) var(--gutter);
  display: grid;
  /* Dwa rzędy zawsze, na każdej szerokości: marka i przyciski w pierwszym,
     linki w drugim, oddzielone cienką kreską.

     Wcześniej do 1420 px był tu układ jednorzędowy. Przestał się mieścić po
     zmianie nazwy: blok marki urósł z 274 do 410 px, więc rząd potrzebowałby
     1527 px, a strona ma maksymalnie 1440. Zamiast ściskać odstępy do granicy
     czytelności, układ dwurzędowy stał się jedynym — jest przewidywalny
     i nie wymaga przeliczania przy każdej zmianie treści. */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3);
}

/* Bez tego kolumna 1fr nie chce się skurczyć poniżej min-content marki */
.nav > * { min-width: 0; }

/* Kolejność w kodzie to marka → język i CTA → linki, bo na telefonie przycisk
   Menu musi stać obok marki, a linki spadają pod spód. Na desktopie ustawiamy
   kolumny jawnie, żeby wróciła kolejność standardowa: marka, linki, język i CTA. */
.nav__brand { grid-column: 1; grid-row: 1; }
.nav__end   { grid-column: 2; grid-row: 1; }
.nav__links {
  grid-column: 1 / -1;
  grid-row: 2;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--beige);
}

.nav__brand { display: flex; align-items: center; justify-self: start; }
.nav__brand:hover { color: var(--espresso); }
.nav__brand .brandmark { font-size: 22px; }
.nav__divider { width: 1px; height: 28px; background: var(--gold); margin: 0 var(--s-2); flex: none; }
.nav__tagline {
  display: flex; flex-direction: column;
  font-size: var(--fs-micro); line-height: 1.3; letter-spacing: 0.1em; color: var(--gold-text);
  text-transform: uppercase;
}

/* Odstęp 24 zamiast 40: przy sześciu pozycjach rząd potrzebował 1503 px,
   czyli więcej, niż strona ma szerokości. Patrz też punkt zwijania niżej. */
.nav__links {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--s-3);
  font-size: var(--fs-ui); letter-spacing: 0.06em;
}
/* Złota kreska pod linkiem nie zapala się, tylko wjeżdża od lewej.
   Przy zjeżdżaniu kursorem punkt zaczepienia wraca na prawą stronę,
   więc linia ucieka w tę samą stronę, w którą szła — zamiast znikać. */
.nav__link {
  position: relative;
  padding-bottom: 5px;
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav__link:hover { color: var(--espresso); }

/* Strona bieżąca ma kreskę na stałe — nie animuje się przy najechaniu */
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav__end { justify-self: end; display: flex; align-items: center; gap: var(--s-4); }

/* CTA żyje w .nav__end na desktopie; kopia w .nav__links jest tylko dla menu mobilnego */
.nav__links .btn { display: none; }

.lang { display: flex; align-items: center; gap: 12px; }
.lang__sep { width: 1px; height: 12px; background: var(--beige); }
/* Stan nieaktywny był wcześniej złotem na 60% krycia (ok. 2:1) — nieczytelny.
   Nieaktywność niesie teraz kreska pod aktywnym językiem i aria-pressed, nie wyblakły kolor. */
.lang__btn {
  font-family: inherit; font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 0 0 3px; cursor: pointer; color: var(--gold-text);
  position: relative;
}
/* Niewidoczne powiększenie obszaru dotyku do ≥24 px (WCAG 2.5.8)
   bez zmiany układu — sam napis ma ok. 20 px wysokości. */
.lang__btn::after { content: ''; position: absolute; inset: -8px -5px; }
.lang__btn:hover { color: var(--espresso); }
.lang__btn[aria-pressed='true'] { color: var(--espresso); border-bottom-color: var(--gold); }

.nav__toggle {
  display: none;
  font-family: inherit; font-size: var(--fs-ui); letter-spacing: var(--ls-button); text-transform: uppercase;
  background: none; border: 1px solid var(--beige); border-radius: var(--r-sm);
  padding: 10px 14px; cursor: pointer; color: var(--espresso);
}
.nav__toggle:hover { border-color: var(--gold); }

/* Punkt zwijania liczony, nie zgadywany.
   Sześć pozycji menu potrzebuje 540 px przy odstępie 24. Do tego marka 274,
   język z przyciskiem 337, dwa odstępy kolumn po 24 i marginesy strony 2 × 96.
   Razem 1391 px, ale przy tej wartości zapas z każdej strony to ledwie 5 px.
   Przełączamy przy 1420, żeby w momencie przejścia było około 20 px luzu —
   bo drobna różnica w renderowaniu fontu potrafi zjeść mniejszy margines.

   Gdy dojdzie kolejna pozycja menu, tę wartość trzeba przeliczyć od nowa.
   Nachodzenie elementów NIE powoduje przewijania strony, więc test na
   przewijanie tego nie wykryje — trzeba sprawdzać, czy prostokąty na siebie
   nie zachodzą. */
@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto; gap: var(--s-2); }
  .nav__toggle { display: block; }
  .nav__links { display: none; }
  .nav[data-open='true'] .nav__links { display: flex; flex-direction: column; align-items: flex-start; }
  .nav__end .btn { display: none; }
  .nav[data-open='true'] .nav__links .btn { display: inline-flex; }
  .nav__tagline { display: none; }
}

/* ============================================================
   Przyciski — złoto jako kreska, nigdy jako wypełnienie
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  border-radius: var(--r-sm);
  padding: 16px 28px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  color: var(--cream);
  background: var(--espresso);
  border: 1px solid var(--espresso);
  padding: 18px 28px;
}
.btn--primary:hover { color: var(--cream); background: var(--espresso-deep); border-color: var(--gold); }

.btn--outline {
  color: var(--espresso);
  background: transparent;
  border: 1px solid var(--gold);
  padding: 14px 24px;
}
.btn--outline:hover { color: var(--espresso); background: var(--gold-wash); }

.btn--text {
  color: var(--espresso);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--beige);
  border-radius: 0;
  padding: 8px 2px;
}
.btn--text:hover { color: var(--gold); border-bottom-color: var(--gold); }

.btn--on-dark {
  color: var(--cream);
  background: transparent;
  border: 1px solid var(--gold);
  padding: 16px 32px;
}
.btn--on-dark:hover { color: var(--cream); background: var(--gold-wash-2); }

.link-arrow {
  font-size: var(--fs-ui); letter-spacing: var(--ls-button); text-transform: uppercase;
  border-bottom: 1px solid var(--beige); padding-bottom: 4px;
}

/* Na wąskim ekranie długie etykiety muszą się łamać, inaczej rozpychają stronę */
@media (max-width: 600px) {
  .btn, .link-arrow { white-space: normal; text-align: center; }
  .btn { padding-left: var(--s-2); padding-right: var(--s-2); }
}
.link-arrow:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ============================================================
   Karty, chipsy, badge
   ============================================================ */

.card {
  background: var(--white);
  border: 1px solid var(--beige);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.card--tight { padding: 32px; }

.chip {
  border: 1px solid var(--beige);
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-2);
  font-size: var(--fs-ui);
}

.badge {
  display: inline-flex; align-items: baseline; gap: var(--s-1);
  border: 1px solid var(--gold); border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-2);
  font-size: var(--fs-caption); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-text);
}
.badge--muted { border-color: var(--beige); background: var(--sand); color: var(--espresso); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* ============================================================
   Zdjęcia
   Jedna klasa na wszystkie. Kadr robi object-fit, proporcje
   ustawia aspect-ratio — dzięki temu podmiana pliku na inny
   o innych wymiarach niczego nie rozjeżdża.
   ============================================================ */

.photo {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--beige-deep);   /* widoczne zanim zdjęcie się wczyta */
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* --focus-y przesuwa kadr w pionie, gdy zdjęcie jest mocno przycinane.
     50% to środek; wyżej = pokazujemy niższą część zdjęcia. */
  object-position: center var(--focus-y, 50%);
  /* Delikatna ciepła korekta — spina zdjęcia z paletą.
     Zdjęcie z sesji w gabinecie prawdopodobnie jej nie będzie potrzebowało. */
  filter: saturate(0.9) sepia(0.08) contrast(1.02);
}

.photo--portrait { aspect-ratio: 3 / 4; }
.photo--landscape { aspect-ratio: 4 / 3; }
.photo--band { aspect-ratio: 21 / 9; }

@media (max-width: 900px) {
  .photo--band { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .photo--band { aspect-ratio: 3 / 2; }
}

/* Pas zdjęciowy między sekcjami.
   Trzyma ten sam margines boczny co każda inna sekcja — wcześniej szedł
   od krawędzi do krawędzi i był jedynym elementem łamiącym oś strony. */
.photoband {
  margin: 0;
  padding: var(--section-y) var(--gutter);
}

/* Placeholder na zdjęcie — zostaje dla slotów bez fotografii */
.photo-slot {
  background: var(--beige-deep);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--s-3);
  font-size: var(--fs-ui);
  letter-spacing: 0.18em;
  /* Złoto na beżu #E4D8C6 dawało 4.14:1 — tu tło jest ciemniejsze niż kremowe */
  color: var(--espresso);
  opacity: 0.7;
}

/* ============================================================
   Pasek zaufania
   ============================================================ */

.trustbar {
  padding: var(--s-4) var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.trustbar__item {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-4);
  font-size: var(--fs-ui);
  border-left: 1px solid var(--beige);
}
.trustbar__item:first-child { border-left: 0; padding-left: 0; }
.trustbar__item svg { flex: none; transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* Ikona rysuje się sama, gdy kursor wejdzie na pozycję.
   To nie są linki, więc świadomie NIE dajemy tu podkreślenia — kreska pod tekstem
   obiecuje kliknięcie. Rysowana linia czyta się jako ozdoba, nie jako przycisk.

   Każdy kształt w SVG ma pathLength="1", więc niezależnie od rzeczywistej długości
   ścieżki dasharray 1 to zawsze cały kształt — dzięki temu wszystkie ikony rysują
   się w tym samym tempie, mimo że jedna jest kółkiem, a inna łamaną. */
.trustbar__item svg > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

@media (hover: hover) {
  .trustbar__item:hover svg { transform: translateY(-2px); }
  .trustbar__item:hover svg > * {
    animation: rysuj-kreske 0.75s cubic-bezier(0.65, 0, 0.35, 1) backwards;
  }
  /* drobne przesunięcie w czasie — kształty dorysowują się jeden po drugim */
  .trustbar__item:hover svg > *:nth-child(2) { animation-delay: 0.12s; }
  .trustbar__item:hover svg > *:nth-child(3) { animation-delay: 0.24s; }
}

@keyframes rysuj-kreske {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@media (max-width: 1000px) {
  .trustbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) 0; }
  .trustbar__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .trustbar { grid-template-columns: minmax(0, 1fr); }
  .trustbar__item { border-left: 0; padding-left: 0; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--s-6);
  padding: var(--section-y) var(--gutter);
  align-items: center;
}
.hero__media { position: relative; }
.hero__photo { aspect-ratio: 3 / 4; }
.hero__note {
  position: absolute; left: -64px; bottom: 64px;
  background: var(--white);
  border: 1px solid var(--beige);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s-3);
  display: flex; align-items: center; gap: var(--s-2);
}
.hero__note-figure {
  font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1;
  color: var(--gold); font-variant-numeric: tabular-nums;
}

@media (max-width: 1240px) { .hero__note { left: -32px; } }
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .hero__photo { aspect-ratio: 4 / 3; }
  .hero__note { position: static; margin-top: var(--s-3); }
}

/* ============================================================
   Kroki (jak przebiega wizyta)
   ============================================================ */

.steps { position: relative; }
.steps__line {
  position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--beige);
}
.steps__grid {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4);
}
.step__num {
  font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1;
  color: var(--gold); font-variant-numeric: tabular-nums;
  background: var(--cream); padding-right: var(--s-3); align-self: flex-start;
}
.step p { max-width: 32ch; }

@media (max-width: 1000px) {
  .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
  .steps__line { display: none; }
}
@media (max-width: 600px) {
  .steps__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Cennik — tabela
   ============================================================ */

.pricetabs {
  display: flex; justify-content: center; gap: var(--s-5);
  padding: var(--section-y) var(--gutter) 0;
  flex-wrap: wrap;
}
.pricetab {
  font-family: var(--font-ui); font-size: var(--fs-ui);
  letter-spacing: 0.16em; text-transform: uppercase;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: var(--s-1) 4px; cursor: pointer;
  /* było 0.45 — ok. 2.2:1, nieczytelne */
  color: rgba(43, 33, 26, 0.7);
}
.pricetab:hover { color: var(--espresso); }
.pricetab[aria-selected='true'] { color: var(--espresso); border-bottom-color: var(--gold); }

.pricelist { display: flex; flex-direction: column; }

.pricerow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 200px;
  gap: 0 var(--s-4);
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--beige);
}
.pricelist .pricerow:last-of-type { border-bottom: 1px solid var(--beige); }

.pricehead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 200px;
  gap: 0 var(--s-4);
  padding-bottom: var(--s-2);
  font-size: var(--fs-caption); letter-spacing: var(--ls-caption);
  text-transform: uppercase; color: var(--gold-text);
}
.pricehead span + span,
.pricerow span + span { text-align: right; }

.pricerow__zone { font-family: var(--font-display); font-size: 20px; }

/* Dwie stałe taryfy, nie promocja: cena standardowa wyciszona, cena
   pierwszego zabiegu prowadzi wzrok (złoto, średnia grubość).
   Bez przekreślenia — przekreślenie sugeruje obniżkę, a to osobna taryfa
   (decyzja z 11.08.2026, patrz komentarz w cennik.html i regulamin §5). */
.pricerow__single {
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.pricerow__promo {
  font-size: var(--fs-small); font-weight: 500; color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}

.pricerow--feature {
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: var(--sand);
  border: 1px solid var(--gold);
  border-radius: var(--r-sm);
}
.pricelist .pricerow--feature { border-bottom: 1px solid var(--gold); }

@media (max-width: 900px) {
  .pricehead { display: none; }
  .pricerow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px var(--s-3);
  }
  .pricerow__zone { grid-column: 1 / -1; }
  .pricerow__single,
  .pricerow__promo { text-align: left; font-size: var(--fs-ui); }
  .pricerow__single::before,
  .pricerow__promo::before {
    content: attr(data-label) ' ';
    color: var(--gold-text);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: var(--fs-caption);
  }
  .pricerow__promo { text-align: right; }
}

/* ============================================================
   Stopka
   ============================================================ */

.footer {
  background: var(--espresso);
  color: var(--cream);
  padding: var(--section-y) var(--gutter) var(--s-4);
}
.footer a { color: var(--cream); }
.footer a:hover { color: var(--gold); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--s-5);
}
/* fit-content: blok marki kurczy się do szerokości znaku, dzięki czemu złota
   kreska pod spodem ma dokładnie jego długość — niezależnie od tego, ile znaków
   ma nazwa. Wcześniej szerokość była wpisana na sztywno pod „AKSAMIT". */
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; }
.footer__brand .brandmark { font-size: 26px; color: var(--cream); }
.footer__brand-rule { width: 100%; height: 1px; background: var(--gold); margin: 12px 0; }
.footer__col-title {
  font-size: var(--fs-caption); letter-spacing: var(--ls-caption);
  text-transform: uppercase; color: var(--gold);
}
.footer__links { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-ui); }
.footer__contact { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-ui); line-height: 1.6; }
.footer__divider { height: 1px; background: var(--line-on-dark); margin: var(--s-5) 0 var(--s-3); border: 0; }
.footer__meta {
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  font-size: var(--fs-caption); color: var(--beige);
}
.footer__meta a { color: var(--beige); }

@media (max-width: 1000px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
@media (max-width: 600px)  { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* Na telefonie stopka jest głównym miejscem kontaktu — numer telefonu bywa
   najważniejszym odnośnikiem na całej stronie. Przy wysokości wiersza 17 px
   trafienie kciukiem to loteria, więc odnośniki dostają realną wysokość
   dotyku. Na myszy nic się nie zmienia, bo reguła działa tylko przy dotyku. */
@media (max-width: 700px) {
  .footer__links a,
  .footer__contact a {
    display: inline-flex; align-items: center;
    min-height: 32px;
  }
  .footer__meta { gap: var(--s-2) var(--s-4); }
  .footer__meta a { display: inline-flex; align-items: center; min-height: 32px; }
  /* Zapas na pasek gestów iPhone'a, żeby ostatni wiersz nie chował się pod nim. */
  .footer { padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   Formularz kontaktowy
   ============================================================ */

.form { display: flex; flex-direction: column; gap: var(--s-3); }

/* Pole-pułapka na boty — poza ekranem, poza tab-orderem, poza czytnikami.
   Rozmiar pisma 16 px, bo iOS przybliża stronę przy wejściu w pole mniejsze
   niż 16 px — a pole poza ekranem dałoby wtedy skok widoku bez powodu. */
.hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.hp input { font-size: 16px; }

.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 560px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.field { display: flex; flex-direction: column; gap: var(--s-1); }

.select {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: var(--espresso);
  background: var(--white);
  border: 1px solid var(--beige);
  border-radius: var(--r-sm);
  padding: var(--s-2);
  width: 100%;
  /* własna strzałka — natywna jest szara i psuje spokój palety */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%237E6032' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-2) center;
  padding-right: 40px;
}
.select:hover { border-color: var(--gold); }
.select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--beige); }

textarea.input { resize: vertical; min-height: 96px; font-family: var(--font-ui); line-height: 1.6; }

/* Zgoda — pole wyboru rysowane od zera, bo natywne jest niebieskie */
.zgoda { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2); align-items: start; }
/* 24 px, nie 20 — to dolny próg celu dotykowego z WCAG 2.5.8. Kliknięcie
   w opis też przełącza pole (label ma „for"), ale sam kwadrat musi wystarczyć. */
.zgoda input {
  appearance: none;
  width: 24px; height: 24px; margin: 0;
  border: 1px solid var(--beige); border-radius: var(--r-sm);
  background: var(--white); cursor: pointer; flex: none;
}
.zgoda input:hover { border-color: var(--gold); }
.zgoda input:checked {
  border-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none' stroke='%237E6032' stroke-width='2'%3E%3Cpath d='M1 5.5 5 9.5 13 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.zgoda label { font-size: var(--fs-caption); line-height: 1.5; cursor: pointer; }

/* Wycena pojawia się dopiero po wyborze strefy */
.wycena {
  border: 1px solid var(--gold);
  border-radius: var(--r-sm);
  background: var(--sand);
  padding: var(--s-2) var(--s-3);
  display: flex; flex-direction: column; gap: 4px;
}
.wycena__rzad { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-ui); }
.wycena__promo { color: var(--gold-text); font-weight: 500; }
.wycena__nota { font-size: var(--fs-caption); opacity: 0.8; }

/* Podsumowanie po wysłaniu — bez backendu nie udajemy, że coś poleciało */
.podsumowanie { display: flex; flex-direction: column; gap: var(--s-2); }
.podsumowanie__dane {
  border-left: 1px solid var(--gold);
  padding-left: var(--s-3);
  font-size: var(--fs-ui);
  line-height: 1.7;
}

/* ============================================================
   Nota o zakresie tłumaczenia
   Widoczna tylko w wersji angielskiej (patrz data-only-lang w app.js).
   Zamiast udawać, że strona jest w całości przetłumaczona, mówi wprost,
   dokąd sięga wersja EN — granica ma wyglądać na postawioną, nie na urwaną.
   ============================================================ */

.langnote {
  padding: var(--section-y) var(--gutter);
  background: var(--sand);
  border-top: 1px solid var(--beige);
  border-bottom: 1px solid var(--beige);
}
.langnote__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-align: center;
  align-items: center;
}
.langnote__rule { width: 60px; height: 1px; background: var(--gold); margin-bottom: var(--s-1); }
.langnote p { max-width: 60ch; }
.langnote__lead {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  line-height: 1.35;
}

/* ============================================================
   Opinie
   Kartka bez wypełnienia, cytat złożony krojem nagłówkowym,
   złota kreska oddziela wypowiedź od podpisu.
   ============================================================ */

.opinia {
  background: var(--white);
  border: 1px solid var(--beige);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.opinia__tekst {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.45;
}
.opinia__stopka { display: flex; flex-direction: column; gap: 4px; }
.opinia__kto { font-size: var(--fs-ui); }
.opinia__meta { font-size: var(--fs-caption); color: var(--gold-text); }

/* ============================================================
   Aktualności
   ============================================================ */

.wpisy { display: flex; flex-direction: column; }

.wpis {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--beige);
  align-items: baseline;
}
.wpisy .wpis:last-child { border-bottom: 1px solid var(--beige); }

.wpis__data {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}
.wpis__tytul { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.3; }
.wpis a.wpis__tytul:hover { color: var(--gold-text); }
.wpis__lead { max-width: 62ch; }

.wpis--szkic { opacity: 0.55; }
.wpis--szkic .wpis__tytul { color: var(--espresso); }

@media (max-width: 760px) {
  .wpis { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}

/* Treść artykułu — jedna kolumna o komfortowej mierze */
.artykul { max-width: 720px; }
.artykul h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h2); line-height: var(--lh-display); }
.artykul h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.3; }
.artykul p, .artykul li { line-height: var(--lh-body); }
.artykul ul, .artykul ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-1); }
.artykul a { border-bottom: 1px solid var(--beige); }
.artykul a:hover { border-bottom-color: var(--gold); }

/* ============================================================
   Mapa
   Kafelki z OpenStreetMap, nie z Google. Powód jest praktyczny:
   mapa może się wczytać od razu, bez pytania o zgodę, bo OSM to
   fundacja, która nie profiluje odwiedzających. Osadzony Google
   wysyłałby adres IP każdej osoby, zanim cokolwiek kliknie.
   Przycisk „Nawiguj" prowadzi już do Google Maps — tam decyzję
   podejmuje użytkowniczka świadomie.
   ============================================================ */

.mapa {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--beige);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sand);
}
.mapa .leaflet-container {
  width: 100%; height: 100%;
  background: var(--sand);
  font-family: var(--font-ui);
}

/* Ciepła korekta NA SAMYCH KAFELKACH. Pinezka i podpisy siedzą w innych
   warstwach, więc zostają czyste — inaczej złoto zrobiłoby się mętne.
   Po przejściu na Voyager (żywszy podkład) korekta jest lżejsza: odrobina
   sepii wpisuje mapę w kremową paletę, saturacja lekko w górę zamiast w dół. */
.mapa .leaflet-tile-pane {
  filter: sepia(0.10) saturate(1.15) brightness(1.02);
}

/* Sterowanie zoomem w języku systemu: kreska, nie plastik */
.mapa .leaflet-control-zoom { border: 0; box-shadow: none; }
.mapa .leaflet-control-zoom a {
  width: 32px; height: 32px; line-height: 30px;
  background: var(--cream);
  border: 1px solid var(--beige);
  color: var(--espresso);
  font-family: var(--font-ui); font-weight: 300; font-size: 18px;
  border-radius: var(--r-sm);
  margin-bottom: 4px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.mapa .leaflet-control-zoom a:hover { background: var(--gold-wash); border-color: var(--gold); color: var(--espresso); }
.mapa .leaflet-control-zoom a.leaflet-disabled { opacity: 0.4; }

.mapa .leaflet-control-attribution {
  background: rgba(250, 246, 240, 0.88);
  color: var(--espresso);
  font-size: 10px;
  padding: 2px 6px;
  border-top-left-radius: var(--r-sm);
}
.mapa .leaflet-control-attribution a { color: var(--gold-text); }

/* Pinezka rysowana od zera — złoto jako kreska, zgodnie z zasadą systemu */
.pinezka { background: none; border: 0; }

/* Na telefonie proporcja 3:2 dawała mapę wysoką na ~228 px — za mało, żeby
   zobaczyć ulicę wokół pinezki bez przewijania mapy. Dolna granica wysokości
   rozwiązuje to niezależnie od szerokości ekranu. */
@media (max-width: 680px) { .mapa { aspect-ratio: 3 / 2; min-height: 300px; } }

/* ============================================================
   Cytat / pasaż
   ============================================================ */

.pullquote {
  min-height: 380px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-4);
  text-align: center;
}
.pullquote p {
  max-width: 780px;
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-quote); line-height: 1.35;
}
.pullquote__rule { width: 60px; height: 1px; background: var(--gold); }

/* ============================================================
   Plansze (design system, logotyp)
   ============================================================ */

.board {
  max-width: var(--board-max);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter) 120px;
}

.board__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); padding-bottom: var(--s-4); flex-wrap: wrap;
}

.board-section { padding: var(--section-y) 0 0; }
.board-section__head {
  display: flex; align-items: baseline; gap: var(--s-3); padding-bottom: var(--s-4);
}
.board-section__num {
  font-size: var(--fs-caption); letter-spacing: var(--ls-caption);
  color: var(--gold-text); font-variant-numeric: tabular-nums;
}

.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 1000px) { .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.swatch { display: flex; flex-direction: column; gap: var(--s-2); }
.swatch__chip { height: 160px; border-radius: var(--r-sm); border: 1px solid var(--beige); }
.swatch__hex {
  font-size: var(--fs-caption); letter-spacing: 0.1em; color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}
/* było 0.55 — 3.57:1 przy 13 px */
.swatch__use { font-size: var(--fs-caption); line-height: 1.5; opacity: 0.75; }

.typerow {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s-4); align-items: baseline;
}
.typerow > * { border-top: 1px solid var(--beige); padding-top: var(--s-2); }
@media (max-width: 760px) { .typerow { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); } }

.specbox {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: 28px; background: var(--sand);
  border: 1px solid var(--beige); border-radius: var(--r-sm);
}

.field-label { font-size: var(--fs-caption); letter-spacing: 0.18em; text-transform: uppercase; }
.input {
  font-family: var(--font-ui); font-size: var(--fs-body); color: var(--espresso);
  background: var(--white); border: 1px solid var(--beige); border-radius: var(--r-sm);
  padding: var(--s-2); width: 100%;
}
.input:hover { border-color: var(--gold); }
.input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--beige); }

.spacerow {
  display: grid; grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s-3); align-items: center;
  border-top: 1px solid var(--beige); padding-top: var(--s-2);
}
.spacerow__bar { height: 8px; background: var(--beige); border-right: 1px solid var(--gold); }

.logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.logo-cell {
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  border-bottom: 1px solid var(--beige);
  border-right: 1px solid var(--beige);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.logo-cell:nth-child(even) {
  padding: var(--s-5) 0 var(--s-5) var(--s-5);
  border-right: 0;
}
/* flex-wrap: wersja pozioma znaku nie mieści się w jednej linii na telefonie */
.logo-cell__stage { min-height: 160px; display: flex; align-items: center; flex-wrap: wrap; }
.logo-cell__label {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text);
}
@media (max-width: 760px) {
  .logo-grid { grid-template-columns: minmax(0, 1fr); }
  .logo-cell, .logo-cell:nth-child(even) { padding: var(--s-4) 0; border-right: 0; }
}

/* Plansza dzielona 1.6 : 1 — składa się do jednej kolumny */
.board-split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s-6);
  align-items: start;
}
@media (max-width: 900px) { .board-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }

.board__footer {
  margin-top: var(--section-y);
  border-top: 1px solid var(--gold);
  padding-top: var(--s-3);
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  font-size: var(--fs-caption); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text);
}

/* ============================================================
   Stany pola formularza — potrzebne, gdy dojdzie rezerwacja
   ============================================================ */

.input:disabled {
  background: var(--sand);
  color: rgba(43, 33, 26, 0.55);
  cursor: not-allowed;
}
.input:disabled:hover { border-color: var(--beige); }

.input[aria-invalid='true'] { border-color: #9B2C2C; }
.input[aria-invalid='true']:focus { border-color: #9B2C2C; box-shadow: 0 0 0 1px #9B2C2C; }

/* Komunikat błędu: kolor nigdy sam, zawsze z tekstem — daltonizm */
.field-error {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: #9B2C2C;   /* 6.4:1 na kremowym */
}

.field-hint { font-size: var(--fs-caption); line-height: 1.5; opacity: 0.75; }

/* ============================================================
   Druk — cennik bywa drukowany w gabinecie
   ============================================================ */

/* ============================================================
   Pasek akcji na telefonie

   Powód: przycisk „Umów konsultację" z górnego paska jest na wąskich ekranach
   ukryty, a formularz leży jedenaście ekranów niżej. Osoba przekonana po trzecim
   ekranie nie miała jak się zapisać bez otwierania menu. Pasek daje telefon
   i zapis pod ręką przez cały czas czytania.

   Chowa się, gdy sekcja kontaktu jest na ekranie — wtedy jest zbędny i tylko
   zasłaniałby formularz. Ustępuje też banerowi zgód, bo tamten wymaga decyzji.
   ============================================================ */

.mobilebar { display: none; }

@media (max-width: 700px) {
  .mobilebar {
    display: flex; gap: var(--s-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: 10px var(--s-3);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--cream);
    border-top: 1px solid var(--beige);
    box-shadow: 0 -8px 24px rgba(43, 33, 26, 0.08);
    transition: transform 0.25s ease;
  }
  /* Reguła ogólna pozwala przyciskom łamać tekst na wąskich ekranach, co tutaj
     robiło z paska klocek na 108 px — jedną ósmą ekranu telefonu. W pasku
     napisy są krótkie, więc trzymamy je w jednej linii i tniemy odstępy. */
  .mobilebar__btn {
    flex: 1 1 0; min-width: 0;
    text-align: center; justify-content: center;
    white-space: nowrap;
    padding: 13px var(--s-2);
  }
  .mobilebar.is-schowany,
  body.ma-cookiebar .mobilebar { transform: translateY(120%); }

  /* Na najwęższych ekranach (320 px) ukraińskie „Подзвонити" potrzebuje
     jeszcze ~5 px — oddajemy je z odstępów międzyliterowych, nie z pisma. */
  @media (max-width: 350px) {
    .mobilebar__btn { letter-spacing: 1px; padding-left: 8px; padding-right: 8px; }
  }

  /* Zapas, żeby stopka nie kończyła się pod paskiem. */
  .page { padding-bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobilebar { transition: none; }
}

/* ============================================================
   Baner zgód cookie
   Wstrzykiwany z app.js wyłącznie, gdy wpisany jest identyfikator GA4.
   Oba przyciski w tym samym stylu — zgoda i odmowa równorzędne.
   ============================================================ */

.cookiebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--cream);
  border-top: 1px solid var(--gold);
  padding: var(--s-3) var(--s-4);
  /* Dolny zapas na pasek gestów iPhone'a — bez tego przyciski zgody
     lądują dokładnie pod nim i część dotknięć nie dochodzi. */
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 30px rgba(43, 33, 26, 0.10);
}
.cookiebar__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cookiebar__text { margin: 0; font-size: var(--fs-ui); line-height: 1.6; max-width: 640px; }
.cookiebar__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* Baner jest przyklejony do dołu, więc póki wisi, dokładamy tyle miejsca
   pod stopką, żeby nie przykrywał ostatniego wiersza treści. */
body.ma-cookiebar .page { padding-bottom: 180px; }
@media (min-width: 900px) { body.ma-cookiebar .page { padding-bottom: 120px; } }

/* „Ustawienia cookies" w stopce: przycisk, bo nie prowadzi pod żaden adres,
   ale wygląda i zachowuje się jak sąsiednie odnośniki. */
.cookiebar__link {
  font: inherit; font-size: var(--fs-caption);
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--beige); text-decoration: underline; text-underline-offset: 3px;
}
.cookiebar__link:hover { color: var(--cream); }

/* Na telefonie baner ma być możliwie niski: mniejsze odstępy i pismo,
   przyciski dzielą wiersz po połowie zamiast łamać się jeden pod drugi. */
@media (max-width: 600px) {
  .cookiebar { padding: var(--s-2) var(--s-3); }
  .cookiebar__inner { gap: var(--s-2); }
  .cookiebar__text { font-size: var(--fs-caption); line-height: 1.5; }
  .cookiebar__actions { gap: var(--s-2); width: 100%; }
  .cookiebar__actions .btn {
    flex: 1 1 0; min-width: 0; text-align: center; justify-content: center;
    padding-left: var(--s-2); padding-right: var(--s-2);
    /* Etykiety muszą zmieścić się w jednym wierszu — „Nie zgadzam się"
       łamane na dwa wiersze wygląda jak usterka, a nie jak wybór. */
    font-size: var(--fs-caption); letter-spacing: 0.04em; white-space: nowrap;
  }
}

@media print {
  .nav, .footer, .pricetabs, .btn, .skip-link, .cookiebar { display: none !important; }
  body { background: #fff; }
  .section--sand, .section--dark { background: #fff !important; color: #000 !important; border: 0; }
  .pricerow { break-inside: avoid; }
}