/* ====== Roxy Biniek — Global Styles ====== */
:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#5f5f5f;
  --line:#eaeaea;
  --accent:#111111;
  --radius:20px;
  --max:1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
html, body{overflow-x:hidden} /* FIX: zapobiega “wysuwaniu” w prawo */
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--fg);text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-color:var(--fg)}
.container{max-width:var(--max);margin:0 auto;padding:20px}

/* Logo */
.logo{
  font-family:"Antic Didone",serif;
  font-weight:400;
  font-size:75px;          /* desktop */
  letter-spacing:1px;
  line-height:1;
}
@media (max-width:640px){
  .logo{font-size:30px;}   /* mobile */
}

/* Header / Nav */
.header{
  position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
}
.burger{
  -webkit-tap-highlight-color:transparent;
  background:transparent;border:1px solid var(--line);
  width:44px;height:44px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.burger .bar,.burger .bar:before,.burger .bar:after{
  content:"";display:block;width:18px;height:2px;background:var(--fg);position:relative;border-radius:2px;transition:.2s;
}
.burger .bar:before{position:absolute;top:-6px}
.burger .bar:after{position:absolute;top:6px}
.brand{display:flex;align-items:center;justify-content:center}
.spacer{width:44px;height:44px}

/* Drawer Nav */
.nav-drawer{ position:fixed; inset:0; pointer-events:none; }
.nav-drawer .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); opacity:0; transition:.2s; }
.nav-drawer .panel{
  position:absolute; inset:0 auto 0 0; width:min(86%,360px); background:#fff;
  border-right:1px solid var(--line); transform:translateX(-100%); transition:.25s;
  overflow:auto; padding:20px;
}
.nav-drawer[data-open="true"]{ pointer-events:auto }
.nav-drawer[data-open="true"] .overlay{ opacity:1 }
.nav-drawer[data-open="true"] .panel{ transform:none }

.nav-menu{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:10px}
.nav-menu a{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-weight:500}
.nav-menu a.active{border-color:var(--fg)}
.nav-footer{margin-top:14px;font-size:12px;color:var(--muted)}

/* Typography */
h1,h2,h3,h4{line-height:1.2;margin:10px 0 8px}
h1{font-family:"Playfair Display",serif;font-size:44px}
h2{font-size:28px}
h3{font-size:20px}
.lead{color:var(--muted);font-size:18px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--fg);
  padding:10px 14px;border-radius:999px;font-weight:500;cursor:pointer;background:#fff;
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{border-color:var(--line)}

/* Layout helpers */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.section{padding:26px 5px}

@media (max-width:980px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .grid-3{grid-template-columns:1fr}
}

/* Hero (video) */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center}
.video-wrap{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.video-wrap video{width:100%;height:auto;display:block}
.video-controls{position:absolute;right:10px;bottom:10px;display:flex;gap:8px}
.badge{font-size:12px;border:1px solid var(--fg);padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.08em}

/* About – alt layout + reveal */
.alt{
  display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:center;margin:24px 0
}
.alt:nth-child(even){grid-template-columns:1fr 1.05fr}
.alt img{border-radius:16px;border:1px solid var(--line)}
.reveal{opacity:0;transform:translateY(16px);transition:3.0s}
.reveal.inview{opacity:1;transform:none}

/* About – wersja z obrazem pod spodem, wycentrowana */
.alt.alt-center{
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;
}
.alt.alt-center > .reveal{
  width:100%;max-width:920px;margin:0 auto;text-align:left;
}
.alt.alt-center ul{list-style:disc inside;margin:8px auto 0;padding:0;line-height:1.8;font-size:15px;color:var(--muted)}
@media (min-width:900px){ .alt.alt-center ul{font-size:16px} }
.alt.alt-center img{width:100%;height:auto;max-width:1100px;border-radius:14px}

/* ===== HERO SLIDER — ciągłe przewijanie (marquee) ===== */
.hero-slider{position:relative;width:100%}
.hero-slider .slider{
  position:relative; max-width:1200px; margin:20px auto;
  height:clamp(220px, 38vw, 480px); overflow:hidden; border-radius:16px;
}
@media (max-width:900px){
  .hero-slider .slider{ max-width:100%; height:clamp(240px, 52vw, 520px); border-radius:12px; }
}
.hero-slider .slides{
  display:flex; height:100%; will-change:transform; line-height:0;
  gap:0; /* FIX: zero przerwy, + średnik */
}
.hero-slider .slide{ flex:0 0 auto; height:100%; margin:0; padding:0; }
.hero-slider .slide img{
  display:block; width:100%; height:100%; object-fit:cover; image-rendering:auto; transform:translateZ(0);
}
.hero-slider .nav, .hero-slider .dots{ display:none !important; }

/* ===== LAYOUT: TOC + CONTENT (Treatments) ===== */
/* Używaj <div class="layout"><aside class="toc">…</aside><div class="content">…</div></div> */
.layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr); /* FIX: minmax(0,1fr) zapobiega overflow */
  gap:22px;
  align-items:start;
}
.layout > .content{ min-width:0 } /* FIX: pozwala kurczyć się zawartości w gridzie */

.toc{ max-width:100% } /* FIX: asekuracja przed wyjechaniem */
.toc .toc-toggle{ display:none } /* nie używamy już przycisku */
.toc .toc-list{
  position:sticky; top:20px;
  border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff;
}
.toc .toc-list ul{ list-style:none; margin:0 0 10px; padding:0 }
.toc .toc-list li{ margin:6px 0 }
.toc .toc-list a{ display:block; padding:6px 8px; border-radius:8px; border:1px solid transparent }
.toc .btn{ width:100%; text-align:center }

@media (max-width:900px){
  .layout{ grid-template-columns:1fr; gap:16px }
  .toc .toc-list{
    position:static; border:0; border-radius:0; padding:0; background:transparent; margin:0 0 10px;
  }
  .toc .toc-list ul{
    display:flex; gap:10px; margin:0; padding:6px 2px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:thin;
  }
  .toc .toc-list ul::-webkit-scrollbar{ height:6px }
  .toc .toc-list ul::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:999px }
  .toc .toc-list li{ flex:0 0 auto; scroll-snap-align:start }
  .toc .toc-list a{
    display:inline-block; padding:8px 12px;
    border:1px solid var(--line); border-radius:999px; background:#fff; white-space:nowrap; font-size:14px;
  }
}
.toc .toc-list a.active{ border-color:var(--fg); box-shadow:0 0 0 2px rgba(0,0,0,.04) }

/* Karty zabiegów */
.priceline{display:flex;justify-content:space-between;gap:12px}

/* Forms */
form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{font-size:13px;color:#4b4b4b}
input,select,textarea{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--fg);font:inherit
}
textarea{min-height:130px;grid-column:1/-1}
.form-row{display:flex;flex-direction:column;gap:6px}
.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.consent{display:inline-flex;align-items:center;gap:8px}
.form-actions .consent input{ width:16px; height:16px; margin:0 }
.small{font-size:12px;color:var(--muted)}
.success{display:none;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:12px}
@media (max-width:640px){ form{grid-template-columns:1fr} }

/* Radios (SALON / MOBILE) */
.radioset{border:0;margin:0;padding:0}
.radioset legend{font-size:14px;color:var(--muted);margin-bottom:6px}
.radio-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.radio-row .radio{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:#fff;
}
.radio-row .radio input[type="radio"]{width:16px;height:16px;margin:0}

/* Salon info blok */
.info-block{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fafafa;margin-bottom:8px;line-height:1.6}
.info-block strong{font-weight:600}

/* FAQ (compact + accordion) */
.page-title-sm{font-family:"Playfair Display",serif;font-weight:700;line-height:1.15;font-size:28px;margin:8px 0 16px}
@media (min-width:900px){ .page-title-sm{font-size:34px;text-align:center} }
.accordion{max-width:900px;margin:0 auto}
.accordion details{border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin:10px 0;background:#fff}
.accordion details[open]{background:#fafafa}
.accordion summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary h3{margin:8px 0;font-size:16px;font-weight:600;letter-spacing:.2px}
@media (min-width:900px){ .accordion summary h3{font-size:17px} }
.accordion summary::after{content:"▸";transition:transform .2s ease;font-size:16px;line-height:1;margin-left:10px}
.accordion details[open] summary::after{transform:rotate(90deg)}
.accordion .answer{padding:6px 4px 10px;color:var(--muted);font-size:14px;line-height:1.7}
.accordion .answer a{text-decoration:underline}

/* Footer */
footer{border-top:1px solid var(--line);padding:18px 0;margin-top:24px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.social{display:flex;gap:12px}
.icon{width:22px;height:22px;display:inline-block}

/* Utilities */
.muted{color:var(--muted)}
.kicker{font-size:13px;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hr{height:1px;background:var(--line);margin:16px 0}

/* Honeypot (dostępne ukrycie) */
.visually-hidden{
  position:absolute !important; left:-10000px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}
/* === INDEX: hero na mobile – wideo na górze, pełna szerokość === */
@media (max-width: 900px){
  .hero { grid-template-columns: 1fr; align-items: stretch; }
  .hero .video-wrap { order: -1; width: 100%; }
  .hero .card { width: 100%; }
}

/* === TREATMENTS: siatka bez overflowu (TOC + content) === */
.layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr); /* ważne: minmax(0,1fr) */
  gap: 22px;
  align-items: start;
}
.layout > .content { min-width: 0; }            /* pozwala się „kurczyć” kolumnie */
@media (max-width: 900px){
  .layout { grid-template-columns: 1fr; }
}

/* TOC – sticky na desktopie; na mobile pasek poziomy już masz, to tylko uściślenia */
.toc { max-width: 100%; }
@media (min-width: 901px){
  .toc .toc-list { position: sticky; top: 20px; }
}

/* === Slider: ZERO odstępów między slajdami (i średnik!) === */
.hero-slider .slides {
  gap: 0;                 /* ← pilnuj średnika tutaj */
  line-height: 0;         /* usuwa białe piksele pod obrazami */
}
.hero-slider .slide { margin: 0; padding: 0; flex: 0 0 auto; }
.hero-slider .slide img { display: block; }

/* === LOCATIONS: mapa pełnej szerokości, bez przewijania pod footerem === */
.map-embed iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: min(60vh, 420px);
  border: 0;
}

/* Footer bez „ogona” */
.site-footer { margin-bottom: 0; }

/* Globalny bezpiecznik przed h-scroll (zostaw) */
html, body { overflow-x: hidden; }

/* ==== MOBILE FIX 1: .layout bez grida (konkretnie to, co testowałeś w DevTools) ==== */
@media (max-width: 900px){
  .layout{
    display:block !important;          /* ← wymusza blok zamiast grid */
  }
  .toc{ margin-bottom: 12px; }         /* oddech pod paskiem TOC */
}

/* ==== MOBILE FIX 2: karty zabiegów bez overflowu ==== */
/* Na mniejszych ekranach zamiast minmax(260px,1fr) jedziemy na 1 kolumnę */
@media (max-width: 900px){
  .grid.grid-auto{
    grid-template-columns: 1fr !important;
  }
}

/* Opcjonalnie – jeśli chcesz 2 kolumny na średnich ekranach (np. 600–900px) */
@media (min-width: 600px) and (max-width: 900px){
  .grid.grid-auto{
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Drobne zabezpieczenia przed “rozsadzaniem” siatki */
.layout > .content{ min-width: 0; }
.card{ min-width: 0; }

/* ===== Desktop: TOC klei się pod headerem ===== */
:root{ --header-h: 72px; }  /* fallback; JS nadpisze realną wysokością */

@media (min-width: 901px){
  .toc .toc-list{
    position: sticky;
    top: calc(var(--header-h, 72px) + 12px); /* tuż pod logo */
  }

  /* gdy skaczesz do sekcji z TOC – nie chowaj tytułów pod headerem */
  .section[id]{ scroll-margin-top: calc(var(--header-h, 72px) + 20px); }
}
/* ===== DESKTOP: prawdziwy sticky sidebar TOC pod headerem ===== */
:root { --header-h: 72px; } /* JS podmieni realną wysokość */

@media (min-width: 901px){
  /* rodzice nie mogą blokować sticky */
  .container, .section, .layout { overflow: visible !important; }

  /* przyklejamy CAŁE .toc (a nie .toc-list) */
  .toc{
    position: sticky !important;
    top: calc(var(--header-h,72px) + 12px) !important; /* tuż pod logo */
    align-self: start;            /* grid nie „wyrówna” go inaczej */
    height: fit-content;          /* tylko własna wysokość */
    z-index: 2;                   /* ponad obrazkami */
    background: #fff;             /* żeby nie prześwitywał slider pod spodem */
  }

  /* wnętrze nie musi być sticky – zapobiega konfliktom */
  .toc .toc-list{ position: static !important; top: auto !important; }

  /* skoki z TOC do sekcji – nie chowaj nagłówków pod headerem */
  .section[id]{ scroll-margin-top: calc(var(--header-h,72px) + 20px); }
}

/* ===== MOBILE: TOC normalnie nad treścią (jak masz) ===== */
@media (max-width: 900px){
  .toc{ position: static !important; top: auto !important; height: auto; }
}
/* Marquee: zero przerw i minimalne nakładanie slajdów */
.hero-slider .slides{
  gap: 0 !important;
  line-height: 0;
  font-size: 0;                 /* extra pewność, że nic inline nie ‘dorzuca’ spacji */
}
.hero-slider .slide{
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  /* subtelne sklejenie krawędzi (usuwa mikro-‘białe kreski’ na niektórych DPI) */
  margin-right: -0.5px;
}
.hero-slider .slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  backface-visibility: hidden;  /* anty-artefakty */
  transform: translateZ(0);
  image-rendering:auto;
}

/* --- Treatments: czytelne czasy i ceny jako 'chip-y' --- */
.card.treatment h3 {
  margin: 0 0 8px;
}

.t-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.t-badges .chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--line, #eaeaea);
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;   /* nie łamie 60 min — £80 */
  line-height: 1;
  background: #fff;
  color: var(--fg, #111);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

/* wersja z jedną parą (czas + cena) w rzędzie */
.t-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  font-weight: 600;
}
.t-meta .t-time { color: var(--muted, #5f5f5f); font-weight: 500; }

/* nadpisanie starej linii ceny, jeśli gdzieś została */
.priceline { display: none !important; }
/* ===== Footer (Roxy Biniek) ===== */
.rb-footer {
  border-top: 1px solid var(--line, #eaeaea);
  background: var(--bg, #fff);
  margin-top: 28px;
}

.rb-footer__wrap { padding-block: clamp(14px, 3vw, 26px); }

/* TOP: ikony + cytat */
.rb-footer__top {
  display: grid;
  align-items: center;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-bottom: clamp(8px, 2.4vw, 14px);
}

.rb-footer__social {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.2vw, 16px);
}

.rb-footer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 3.6vw, 34px);
  height: clamp(28px, 3.6vw, 34px);
  border: 1px solid var(--line, #eaeaea);
  border-radius: 12px;
  padding: clamp(6px, 1vw, 8px);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
  background: #fff;
}
.rb-footer__icon:hover { transform: translateY(-1px); border-color: var(--fg,#111); }
.rb-footer__icon img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: invert(0%); /* zostaw kolor z pliku SVG; usuń jeśli masz kolorowe */
}

.rb-footer__quote {
  margin: 0;
  line-height: 1.35;
  text-wrap: balance;
  /* większy niż dotąd, skaluje się na urządzeniu */
  font-size: clamp(16px, 2.6vw, 22px);
  text-align: left;
}

/* BOTTOM: copyright + powered */
.rb-footer__bottom {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 8px;
  padding-top: clamp(8px, 2vw, 12px);
  border-top: 1px dashed var(--line, #eaeaea);
}

.rb-footer__copy { color: var(--muted, #666); font-size: clamp(12px, 1.9vw, 13.5px); }
.rb-footer__powered {
  color: var(--muted, #777);
  font-size: clamp(11px, 1.7vw, 12px);
  justify-self: start; /* mobile: pod spodem po lewej */
}
.rb-footer__powered a { text-decoration: none; border-bottom: 1px solid transparent; }
.rb-footer__powered a:hover { border-color: currentColor; }

/* DESKTOP układ */
@media (min-width: 900px) {
  .rb-footer__top {
    grid-template-columns: auto 1fr; /* ikony po lewej, cytat obok */
    gap: 18px;
  }
  .rb-footer__quote { text-align: center; font-size: clamp(18px, 1.8vw, 24px); }

  .rb-footer__bottom {
    grid-template-columns: 1fr auto; /* copyright lewo, powered prawo */
  }
  .rb-footer__powered { justify-self: end; }
}
/* Single hero photo (replaces slider) */
.hero-photo{
  display:flex;
  justify-content:center;
  padding: 12px 0 6px;
}
.hero-photo__frame{
  margin:0;
  /* mniejsze na desktopie: węższy max i mniej % szerokości */
  width: min(1000px, 45vw);
}
.hero-photo__img{
  display:block;
  width:100%;
  /* mniejsza wysokość na desktopie */
  
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* TEMP: ukryj FAQ w menu (header/drawer) */
.nav-menu a[href$="faq.html"] { display: none !important; }
/* ===== Home: quote pod wideo ===== */
.home-quote {
  padding: 24px 0 8px;
}
.home-quote p {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  /* responsywna wielkość — od 28px do 56px */
  font-size: clamp(28px, 6vw, 56px);
  letter-spacing: .2px;
}