:root{
    --indigo:#200066;
    --indigo-hover:#2e0a8f;
    --blue:#b3c8e7;
    --ink:#1a1a1a;
    --grey:#d1d1d1;
    --lav:#f3f0fb;
    --pad:44px;
    /* content boxes span full-bleed within section padding, same axis as header (no narrow 1280 cap) */
    --maxw:none;
    /* hero content slightly narrower than full-bleed sections (~95%), centered */
    --herow:90%;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{overflow-x:hidden}
  body{background:var(--lav);font-family:'Montserrat',sans-serif;color:var(--ink)}
  a{text-decoration:none}

  /* ---------- HEADER ---------- */
  /* promo bar (dismissible) */
  .promobar{position:relative;background:#efeafb;display:flex;align-items:center;justify-content:center;padding:0 52px;min-height:46px}
  .promobar.hidden{display:none}
  .promo-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;padding:7px 0}
  .promo-msg{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:4px 8px;font-size:14px;color:#3a2d6e;line-height:1.35;text-decoration:none}
  .promo-msg:hover{color:var(--indigo)}
  .promo-msg b{font-weight:700;color:var(--indigo);white-space:nowrap}
  .promo-arrow{width:16px;height:16px;color:var(--indigo);display:none}
  @media (max-width:640px){.promo-arrow{display:inline-block}}
  .promo-msg svg{width:18px;height:18px;color:var(--indigo);flex:0 0 auto}
  .promo-btn{display:inline-flex;align-items:center;gap:7px;background:var(--indigo);color:#fff;border-radius:8px;
    height:34px;padding:0 16px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;transition:background .2s ease}
  .promo-btn:hover{background:var(--indigo-hover)}
  .promo-btn svg{width:15px;height:15px}
  .promo-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);border:none;background:none;
    color:var(--indigo);font-size:24px;line-height:1;cursor:pointer;opacity:.55;padding:4px}
  .promo-close:hover{opacity:1}
  @media (max-width:640px){
    .promobar{padding:0 44px}
    .promo-msg{font-size:12.5px}
    .promo-btn{display:none}
  }

  /* top utility bar */
  .topbar{
    background:var(--indigo);color:#fff;font-size:12.5px;font-weight:400;
    height:40px;display:flex;align-items:center;justify-content:space-between;
    padding:0 var(--pad);gap:20px;
  }
  .topbar a{color:#fff}
  .topbar .tb-group{display:flex;align-items:center;gap:24px}
  .topbar .tb-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
  .topbar svg{width:15px;height:15px;opacity:.9;flex:0 0 auto}
  .topbar .tb-item a:hover,a.tb-item:hover{text-decoration:underline}
  @media (max-width:1150px){.topbar .hide-narrow{display:none}}

  .site-header{
    height:88px;background:#fff;display:flex;align-items:center;
    padding:0 var(--pad);gap:24px;position:sticky;top:0;z-index:100;
    transition:box-shadow .25s ease,height .25s ease;
  }
  .site-header.scrolled{box-shadow:0 6px 24px rgba(32,0,102,.08);height:66px}
  .logo{flex:0 0 auto;display:flex;align-items:center;border-radius:6px}
  .logo img{height:50px;width:auto;display:block;transition:height .25s ease}
  .site-header.scrolled .logo img{height:40px}

  /* keyboard accessibility */
  a:focus-visible,.btn:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:6px}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

  nav{flex:1 1 auto;display:flex;justify-content:center;align-items:center;gap:40px}
  nav a{
    position:relative;color:var(--ink);font-size:15px;font-weight:500;
    padding:6px 0;white-space:nowrap;transition:color .18s ease;
  }
  /* underline bar (shared by hover + active) */
  nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:-14px;height:2px;
    background:var(--indigo);transform:scaleX(0);transform-origin:center;
    transition:transform .2s ease;
  }
  nav a:hover{color:var(--indigo)}
  nav a:hover::after{transform:scaleX(1)}
  nav a.has-sub,nav a.nav-ext{display:inline-flex;align-items:center;gap:5px}
  nav a.nav-ext .ext-ico{width:13px;height:13px;opacity:.55;margin-left:1px}
  nav a .caret{width:15px;height:15px;transition:transform .2s ease}
  nav a.has-sub:hover .caret{transform:rotate(180deg)}
  .mega a::after,.mega a::before{content:none;display:none}
  nav a.active{color:var(--indigo);font-weight:600}
  nav a.active::after{transform:scaleX(1)}
  /* stan aktywny = sama kreska pod pozycją, bez trójkąta (decyzja Jakuba 24.07) */

  /* ---------- MEGA MENU ---------- */
  .mega-wrap{position:static;display:inline-flex;align-items:center}
  .mega{
    position:absolute;top:100%;left:0;right:0;background:#fff;
    box-shadow:0 24px 44px rgba(32,0,102,.13);border-top:1px solid var(--line);
    opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:90;
  }
  .mega-wrap.open .mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
  .mega-inner{display:grid;grid-template-columns:310px 1fr;gap:44px;padding:34px var(--pad) 26px;max-width:1600px;margin:0 auto}
  .mega-h{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9a8fb5;margin-bottom:16px}

  .mega-cats{display:flex;flex-direction:column;gap:2px}
  .mcat{display:flex;align-items:center;gap:13px;padding:10px 14px;border-radius:10px;
    color:var(--ink);font-size:14.5px;font-weight:500;transition:background .15s ease,color .15s ease}
  .mcat svg,.mcat .mi{color:var(--indigo)}
  .mcat{}
  .mcat-ico{width:21px;height:21px;flex:0 0 auto;color:var(--indigo)}
  .mcat-arrow{margin-left:auto;width:16px;height:16px;opacity:.4}
  .mcat:hover{background:var(--lav);color:var(--indigo)}
  .mcat.active{background:#efeafb;color:var(--indigo);font-weight:600}
  .mcat-combo{color:var(--indigo);font-weight:600}
  .mcat-badge{margin-left:auto;background:var(--indigo);color:#fff;font-size:10px;font-weight:700;
    letter-spacing:.08em;padding:3px 8px;border-radius:999px;line-height:1}
  .mcat-all{margin-top:16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
    background:var(--indigo);color:#fff;border-radius:10px;height:52px;font-size:13px;font-weight:600;
    letter-spacing:.02em;transition:background .2s ease,transform .12s ease}
  .mcat-all:hover{background:var(--indigo-hover);color:#fff}

  /* gift card in left column */
  .mega-right{display:flex;flex-direction:column;min-width:0}
  .mega-right .mega-panels{flex:1 1 auto}
  .mega-gift{margin-top:auto;display:flex;align-items:center;gap:18px;background:var(--lav);
    border:1px solid #e6e0f5;border-radius:16px;padding:22px 26px}
  .mega-gift .mg-ico{width:56px;height:56px;flex:0 0 auto;display:grid;place-items:center;background:#fff;border-radius:50%}
  .mega-gift .mg-ico svg{width:28px;height:28px;color:var(--indigo)}
  .mega-gift .mg-txt{flex:1 1 auto;line-height:1.3}
  .mega-gift .mg-txt b{display:block;font-size:17px;color:var(--ink)}
  .mega-gift .mg-txt span{font-size:14px;color:#6a6480}
  .mg-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;background:#fff;
    color:var(--indigo);border:1.6px solid var(--indigo);border-radius:10px;height:50px;padding:0 24px;
    font-size:14px;font-weight:600;transition:background .2s ease,color .2s ease}
  .mg-btn svg{width:18px;height:18px;transition:transform .2s ease}
  .mg-btn:hover{background:var(--indigo);color:#fff}
  .mg-btn:hover svg{transform:translateX(3px)}

  .mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;align-content:start}
  .mcol-h{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--indigo);margin-bottom:15px}
  .mcol-h svg{width:22px;height:22px;flex:0 0 auto}
  .mcol a{display:flex;align-items:center;gap:9px;color:#3a3550;font-size:14px;padding:6px 0;
    transition:color .15s ease}
  .mcol a svg{width:14px;height:14px;flex:0 0 auto;color:#c3b9df;transition:color .15s ease,transform .15s ease}
  .mcol a:hover{color:var(--indigo)}
  .mcol a:hover svg{color:var(--indigo);transform:translateX(2px)}

  /* dynamic per-category panels */
  .mega-panels{position:relative;min-height:340px}
  .mpanel{display:none}
  .mpanel.active{display:block;animation:mfade .22s ease}
  @keyframes mfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .mp-head{margin-bottom:16px}
  .mp-head h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:25px;color:var(--indigo);line-height:1.1}
  .mp-head p{font-size:14px;color:#6a6480;margin-top:5px}
  .mp-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 40px;align-content:start}
  .mp-list.one{grid-template-columns:minmax(0,340px)}
  .mp-list a{display:flex;align-items:center;gap:10px;color:#3a3550;font-size:14.5px;padding:9px 0;transition:color .15s ease}
  .mp-list a svg{width:14px;height:14px;flex:0 0 auto;color:#c3b9df;transition:color .15s ease,transform .15s ease}
  .mp-list a:hover{color:var(--indigo)}
  .mp-list a:hover svg{color:var(--indigo);transform:translateX(3px)}

  .mega-promo{display:flex;align-items:center;gap:20px;background:var(--lav);margin:0 var(--pad);
    padding:20px 26px;border-radius:14px}
  .mega-promo .pg-ico{width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;background:#fff;border-radius:50%}
  .mega-promo .pg-ico svg{width:26px;height:26px;color:var(--indigo)}
  .mega-promo .pg-txt{flex:1 1 auto}
  .mega-promo .pg-txt b{display:block;font-size:16px;color:var(--ink)}
  .mega-promo .pg-txt span{font-size:13.5px;color:#6a6480}
  .mega-promo .pg-btn{display:inline-flex;align-items:center;gap:9px;background:var(--indigo);color:#fff;
    border-radius:10px;height:48px;padding:0 22px;font-size:13px;font-weight:600;transition:background .2s ease,transform .12s ease}
  .mega-promo .pg-btn:hover{background:var(--indigo-hover);transform:translateY(-1px)}

  .mega-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:22px var(--pad) 28px;margin-top:24px;border-top:1px solid var(--line)}
  .mtrust{display:flex;align-items:flex-start;gap:12px}
  .mtrust svg{width:24px;height:24px;flex:0 0 auto;color:var(--indigo);margin-top:2px}
  .mtrust b{display:block;font-size:14px;color:var(--ink)}
  .mtrust span{font-size:12.5px;color:#6a6480;line-height:1.4}

  .actions{flex:0 0 auto;display:flex;align-items:center;gap:16px}
  .btn{
    display:inline-flex;align-items:center;gap:10px;border-radius:10px;
    font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    height:46px;padding:0 24px;white-space:nowrap;cursor:pointer;
    transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .12s ease;
  }
  .btn svg{width:19px;height:19px;flex:0 0 auto}
  .btn-outline{background:#fff;color:var(--indigo);border:1.6px solid var(--indigo)}
  .btn-outline:hover{background:var(--indigo);color:#fff}
  .btn-fill{background:var(--indigo);color:#fff;border:1.6px solid var(--indigo)}
  .btn-fill:hover{background:var(--indigo-hover);border-color:var(--indigo-hover);
    box-shadow:0 8px 20px rgba(32,0,102,.28);transform:translateY(-1px)}

  /* ---------- HERO ---------- */
  .hero{position:relative;background:#fff;padding:56px 0 0;overflow:hidden}
  .hero::before{content:"";position:absolute;top:-120px;right:-140px;width:620px;height:620px;border-radius:50%;
    border:1.5px solid #efeafb;pointer-events:none}
  .hero::after{content:"";position:absolute;top:120px;right:120px;width:360px;height:360px;border-radius:50%;
    border:1.5px solid #f1ecfb;pointer-events:none}
  .hero-inner{position:relative;max-width:var(--herow);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch}
  .hero-eyebrow{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);margin-bottom:20px}
  /* Hero na home szedł w League Spartan 800, a 30 podstron w DM Serif Display.
     Angelika, 13.08: "na sekcji Hero na Home mamy zupełnie inny font niż na innych
     podstronach, to się mocno wyróżnia i źle wygląda". Ujednolicone w stronę
     podstron, bo tych jest trzydzieści, a home i o-nas dwie.
     Rozmiar zszedł z 80 na 72 px, bo szeryfowy krój przy tej samej wartości
     optycznie waży więcej niż bezszeryfowy grubas. */
  .hero h1{font-family:'DM Serif Display',serif;font-weight:400;font-size:72px;line-height:1.02;letter-spacing:0;color:var(--ink);margin-bottom:24px}
  .hero h1 span{color:var(--indigo)}
  .hero-sub{font-size:17px;line-height:1.6;color:#5a5470;max-width:460px;margin-bottom:32px}
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px}
  .hero-cta .btn{height:54px;font-size:13px}
  .hero-media{position:relative;border-radius:22px;overflow:hidden;background:#e9e4f5;box-shadow:0 20px 50px rgba(32,0,102,.10)}
  .hero-media img{width:100%;height:100%;object-fit:cover;display:block}
  /* Plakat leży jako tło kontenera zawsze, nie tylko przy wyłączonych
     animacjach. Działające wideo przykrywa go w całości, więc wygląd się nie
     zmienia, ale gdy odtwarzanie padnie albo zablokuje je tryb oszczędzania
     energii, w kadrze zostaje zdjęcie salonu zamiast pustej płachty. */
  .hero-media{aspect-ratio:16/10;background:#e9e4f5 url(wideo/salon-v3-poster.webp) center/cover}
  .hero-vid{width:100%;height:100%;object-fit:cover;display:block}
  /* Przy włączonym "Ogranicz ruch" film jest schowany, ale klik w przycisk
     odtwarzania to świadoma decyzja użytkownika, więc wtedy go pokazujemy. */
  @media(prefers-reduced-motion:reduce){.hero-vid{display:none}
    .hero-media.gra .hero-vid{display:block}}
  /* Sam obrys, bez wypełnienia, żeby nie zasłaniać kadru. Kolor biały, bo
     przycisk leży na zdjęciu wnętrza i musi się bronić i na granatowej ścianie,
     i na jasnym marmurze. Cień daje odbicie od tła w obu przypadkach.
     Przycisk startuje z atrybutem hidden i pokazuje się dopiero wtedy, gdy
     skrypt stwierdzi, że film stoi: tryb niskiego zużycia energii na iOS blokuje
     autoodtwarzanie, a "Ogranicz ruch" chowa film naszą regułą. Przy działającym
     autoodtwarzaniu nie mignie ani na chwilę. */
  .hero-play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;
    background:none;border:3px solid rgba(255,255,255,.95);
    display:grid;place-items:center;cursor:pointer;padding:0;
    box-shadow:0 6px 20px rgba(20,10,50,.35);
    transition:transform .2s ease,background .2s ease,border-color .2s ease}
  .hero-play:hover{transform:scale(1.06);background:rgba(255,255,255,.16);border-color:#fff}
  /* Trójkąt liczony środkiem ciężkości, nie ramką: podstawa na x=8, wierzchołek
     na x=20, więc centroid wypada dokładnie na 12, czyli w osi koła. Wcześniej
     ramka trójkąta była przesuwana ręcznie o 4 px i przez to uciekał w prawo. */
  .hero-play svg{width:54px;height:54px;color:#fff;margin:0;
    filter:drop-shadow(0 2px 6px rgba(20,10,50,.45))}
  .hero-play[hidden]{display:none}
  .hero-play:focus-visible{outline:3px solid #fff;outline-offset:4px}
  @media(max-width:560px){.hero-play{width:66px;height:66px;border-width:2.5px}
    .hero-play svg{width:42px;height:42px}}

  .hero-info{position:relative;max-width:var(--herow);margin:38px auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;
    gap:26px 20px;padding:32px 0 30px}
  .hi{display:flex;align-items:flex-start;gap:13px;flex:0 1 auto}
  .hi-ico{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--lav);color:var(--indigo)}
  .hi-ico svg{width:21px;height:21px}
  .hi-txt b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
  .hi-txt,.hi-txt a{font-size:13.5px;color:#6a6480;line-height:1.4}
  .hi-txt a:hover{color:var(--indigo)}
  .hi-social{align-items:center}
  .hi-soc{display:flex;gap:10px}
  .hi-soc a{width:42px;height:42px;display:grid;place-items:center;border:1.5px solid var(--indigo);border-radius:11px;
    background:var(--indigo);color:#fff;transition:background .2s ease,color .2s ease}
  .hi-soc a:hover{background:#fff;color:var(--indigo)}
  .hi-soc svg{width:19px;height:19px}

  @media (max-width:920px){
    .hero{padding:40px var(--pad) 0}
    .hero-inner{grid-template-columns:1fr;gap:32px;max-width:none}
    .hero-media{order:-1;aspect-ratio:16/10}
    .hero h1{font-size:52px}
    .hero::before,.hero::after{display:none}
    .hero-info{display:grid;grid-template-columns:1fr 1fr;gap:24px 24px;max-width:none;margin-top:34px;padding:30px 0 44px}
    .hi-social{grid-column:1/-1;align-items:flex-start}
  }
  @media (max-width:520px){
    .hero h1{font-size:42px}
    .hero-cta{flex-direction:column}
    .hero-cta .btn{width:100%;justify-content:center}
  }
  @media (max-width:560px){
    .hero-info{grid-template-columns:1fr;gap:20px}
  }

  /* ---------- COMBO SECTION ---------- */
  .combo{background:#fff;padding:20px var(--pad) 72px}
  .combo-top{max-width:var(--maxw);margin:0 auto;background:var(--lav);border-radius:26px;padding:42px 40px;
    display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:stretch}
  .combo-card{background:transparent;padding:0;display:flex;flex-direction:column;justify-content:center}
  .combo-eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin-bottom:14px}
  .combo-card h2{font-family:'League Spartan',sans-serif;font-weight:800;font-size:30px;line-height:1.06;color:var(--ink);margin-bottom:16px}
  .combo-card h2 span{color:var(--indigo)}
  .combo-card p{font-size:14px;line-height:1.55;color:#5a5470;margin-bottom:24px}
  .combo-card .btn{height:48px;align-self:flex-start}
  .combo-services{display:flex;align-items:stretch;gap:12px}
  .combo-svc{flex:1 1 0;min-width:0;background:#fff;border-radius:18px;padding:28px 10px;text-align:center;box-shadow:0 12px 30px rgba(32,0,102,.08);display:flex;flex-direction:column;align-items:center;justify-content:center}
  .combo-svc svg{width:47px;height:47px;color:var(--indigo);margin-bottom:16px}
  .combo-svc b{display:block;font-size:14px;letter-spacing:.04em;color:var(--ink);margin-bottom:6px}
  .combo-svc small{font-size:12.5px;color:#8a83a0;line-height:1.4}
  .combo-op{flex:0 0 auto;align-self:center;font-family:'League Spartan',sans-serif;font-size:24px;font-weight:800;color:var(--indigo)}
  .combo-result{flex:1 1 0;min-width:0;background:#e7e0f6;border-radius:18px;padding:28px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .combo-result b{display:block;font-family:'League Spartan',sans-serif;font-size:46px;font-weight:800;color:var(--indigo);line-height:.95}
  .combo-result .zam{font-size:11px;letter-spacing:.1em;color:#8a83a0;text-transform:uppercase;margin:9px 0 4px}
  .combo-result .big8{font-family:'League Spartan',sans-serif;font-size:22px;font-weight:700;color:#b3a9d4}

  .combo-trust{max-width:var(--maxw);margin:24px auto 0;background:var(--lav);border-radius:20px;padding:28px 40px;
    display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .ct{display:flex;align-items:center;gap:16px;position:relative}
  .ct:not(:first-child)::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:1px;height:46px;background:#ddd4f0}
  /* Ikony miały trzy różne rozmiary (66, 52 i 42 px), więc tekst każdej
     pozycji zaczynał się w innym miejscu: 82, 68 i 58 px od lewej krawędzi.
     Na desktopie kolumny stoją obok siebie i rzucało się to w oczy przy
     porównaniu, na telefonie wiersze idą jeden pod drugim i lewa krawędź
     tekstu była schodkowa. Jeden slot 48 px wyrównuje wszystkie cztery.
     Poprawka na prośbę Jakuba 11.08. */
  .ct svg{width:48px;height:48px;color:var(--indigo);flex:0 0 48px}
  .ct b{display:block;font-family:'League Spartan',sans-serif;font-size:25px;font-weight:800;color:var(--ink);line-height:1;margin-bottom:3px}
  .ct span{font-size:13px;color:#6a6480;line-height:1.35}

  @media (max-width:980px){
    .combo{padding:52px var(--pad)}
    .combo-top{grid-template-columns:1fr;gap:24px}
    .combo-services{flex-wrap:wrap;justify-content:center}
    .combo-svc,.combo-result{flex:1 1 150px}
    .combo-trust{grid-template-columns:1fr 1fr;gap:22px 30px}
    .ct::before{display:none}
  }
  @media (max-width:560px){
    .combo{padding:16px var(--pad) 52px}
    .combo-top{padding:28px 22px}
    .combo-op{display:none}
    .combo-services{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .combo-result{display:none}
    .combo-trust{grid-template-columns:1fr;padding:24px 26px}
  }

  /* reusable image placeholder (swap for real photo) */
  .imgph{background:linear-gradient(135deg,#efeafb,#e2dbf3);display:grid;place-items:center;color:#9a8fb5;position:relative;overflow:hidden}
  .imgph img{width:100%;height:100%;object-fit:cover;display:block}
  .imgph .imgph-ico{width:46px;height:46px;opacity:.5}

  /* ---------- BODY MAP ---------- */
  .bodymap{background:#fff;padding:72px var(--pad)}
  .bodymap-inner{max-width:var(--maxw);margin:0 auto;background:#fff;border-radius:26px;border:1px solid #e9e3f5;
    display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:0;overflow:hidden}
  .bm-col{padding:38px 36px;min-width:0}
  .bm-col:last-child{background:#f7f5fd}
  .bm-col+.bm-col{border-left:1px solid #efeafb}
  .bm-step{display:inline-flex;align-items:center;gap:11px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--indigo);margin-bottom:22px}
  .bm-step i{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;background:var(--indigo);color:#fff;border-radius:50%;font-style:normal;font-size:13px;font-weight:700}
  .bm-intro h2{font-family:'League Spartan',sans-serif;font-weight:800;font-size:30px;line-height:1.08;color:var(--ink);margin-bottom:16px}
  .bm-intro p{font-size:14.5px;line-height:1.7;color:#5a5470;margin-bottom:24px}
  .bm-hint{display:flex;align-items:center;gap:14px;background:var(--lav);border-radius:14px;padding:18px 20px;margin-bottom:30px}
  .bm-hint svg{width:30px;height:30px;flex:0 0 auto;color:var(--indigo)}
  .bm-hint span{font-size:14px;color:#5a5470;line-height:1.4}
  .bm-hint b{color:var(--ink)}
  .bm-perso{text-align:center;padding-top:6px}
  .bm-perso .bm-lotus{width:64px;height:64px;margin:0 auto 14px;display:grid;place-items:center;background:var(--lav);border-radius:50%}
  .bm-perso .bm-lotus svg{width:30px;height:30px;color:var(--indigo)}
  .bm-perso p{font-size:13.5px;color:#6a6480;line-height:1.5}

  .bm-map{display:flex;flex-direction:column}
  .bm-figure{position:relative;flex:1 1 auto;min-height:440px;margin:4px 0 8px}
  .bm-mapimg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-height:100%;max-width:220px;width:auto;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}
  .bm-label{position:absolute;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #e6e0f5;color:#3a3550;
    font-family:'Montserrat';font-size:13.5px;font-weight:500;padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;
    transition:border-color .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease;z-index:2}
  .bm-label::before{content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--indigo);transform:translateY(-50%)}
  .bm-label.l-left::before{right:-24px}
  .bm-label.l-right::before{left:-24px}
  .bm-label.l-left::after{content:"";position:absolute;top:50%;right:-20px;width:20px;height:1.5px;background:#d9d0ee}
  .bm-label.l-right::after{content:"";position:absolute;top:50%;left:-20px;width:20px;height:1.5px;background:#d9d0ee}
  .bm-label:hover{border-color:var(--indigo);color:var(--indigo)}
  .bm-label.active{background:#efeafb;border-color:var(--indigo);color:var(--indigo);font-weight:600;box-shadow:0 4px 14px rgba(32,0,102,.12)}
  .bm-label.active::before{box-shadow:0 0 0 5px rgba(32,0,102,.15)}
  .bm-note{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;color:#8a83a0;margin-top:6px}
  .bm-note svg{width:16px;height:16px;flex:0 0 auto;color:var(--indigo)}

  .bm-result-h{display:flex;align-items:center;gap:12px;font-family:'DM Serif Display',serif;font-size:24px;color:var(--ink);margin-bottom:20px}
  .bm-result-h .bm-fico{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;background:var(--lav);border-radius:12px}
  .bm-result-h .bm-fico svg{width:24px;height:24px;color:var(--indigo)}
  .bm-result-h #bm-area{color:var(--indigo)}
  .bm-cards{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
  .bm-card{text-decoration:none;color:inherit;display:flex;align-items:flex-start;gap:14px;background:#faf9fe;border:1px solid #efeafb;border-radius:14px;padding:16px 18px;transition:box-shadow .18s ease,transform .12s ease}
  .bm-card:hover{box-shadow:0 10px 26px rgba(32,0,102,.08);transform:translateY(-1px)}
  .bm-card .bm-cico{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;background:#efeafb;border-radius:11px}
  .bm-card .bm-cico svg{width:22px;height:22px;color:var(--indigo)}
  .bm-card .bm-cbody{flex:1 1 auto;min-width:0}
  .bm-card h4{font-family:'Montserrat';font-size:15px;font-weight:600;color:var(--ink);margin-bottom:4px}
  .bm-card p{font-size:13px;color:#6a6480;line-height:1.45;margin-bottom:8px}
  .bm-more{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--indigo)}
  .bm-more svg{width:13px;height:13px;transition:transform .15s ease}
  .bm-card:hover .bm-more svg{transform:translateX(3px)}
  .bm-card .bm-arrowlink{align-self:center}
  .bm-arrowlink svg{width:16px;height:16px;color:#c3b9df;flex:0 0 auto}
  .bm-all{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--indigo);color:#fff;border-radius:12px;
    height:56px;font-size:13px;font-weight:600;letter-spacing:.03em;transition:background .2s ease,transform .12s ease}
  .bm-all:hover{background:var(--indigo-hover);color:#fff;transform:translateY(-1px)}
  .bm-all svg{width:18px;height:18px}
  .bm-chips{display:none}

  @media (max-width:980px){
    .bodymap{padding:52px var(--pad)}
    .bodymap-inner{grid-template-columns:1fr;gap:0}
    .bm-col+.bm-col{border-left:none;border-top:1px solid #efeafb}
    .bm-figure{position:relative;min-height:320px}
    .bm-chips{display:none}
  }

  /* ---------- OFERTA, selektor (wariant B) ---------- */
  .os{background:#fff;padding:40px var(--pad) 76px}
  .os-inner{max-width:var(--maxw);margin:0 auto}
  .os-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);margin-bottom:14px}
  .os-h2{font-family:'League Spartan',sans-serif;font-weight:800;font-size:40px;line-height:1.04;color:var(--ink);margin-bottom:14px}
  .os-h2 span{color:var(--indigo)}
  .os-lead{font-size:15.5px;line-height:1.7;color:#5a5470;max-width:620px;margin-bottom:38px}
  .os-selector{display:grid;grid-template-columns:320px 1fr;gap:32px;align-items:start}
  .os-tabs{display:flex;flex-direction:column;gap:8px}
  .os-tab{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:14px;cursor:pointer;border:1px solid transparent;
    background:#faf9fe;transition:background .18s,border-color .18s;text-align:left;width:100%}
  .os-tab:hover{background:var(--lav)}
  .os-tab.active{background:var(--indigo);border-color:var(--indigo)}
  .os-tab.active .os-tname,.os-tab.active .os-tcount{color:#fff}
  .os-tab.active .os-tico{background:rgba(255,255,255,.16);color:#fff}
  .os-tico{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:var(--lav);color:var(--indigo)}
  .os-tico svg{width:22px;height:22px}
  .os-tmeta{display:flex;flex-direction:column;min-width:0}
  .os-tname{font-size:15px;font-weight:600;color:var(--ink);line-height:1.2}
  .os-tcount{font-size:12.5px;color:#8a84a0;margin-top:2px}
  .os-phead{display:flex;align-items:center;gap:13px;margin-bottom:22px}
  .os-phico{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:var(--lav);color:var(--indigo)}
  .os-phico svg{width:23px;height:23px}
  .os-phead h3{font-family:'League Spartan',sans-serif;font-weight:700;font-size:27px;color:var(--ink)}
  .os-phead h3 span{color:var(--indigo)}
  .os-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .os-card{text-decoration:none;color:inherit;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid #ece7f7;border-radius:16px;background:#fff;
    transition:border-color .18s,box-shadow .18s,transform .18s;cursor:pointer;position:relative;overflow:hidden}
  .os-card::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--indigo);opacity:0;transition:opacity .18s;z-index:1}
  .os-card:hover{border-color:#cdbff0;box-shadow:0 12px 30px rgba(32,0,102,.08);transform:translateY(-2px)}
  .os-card:hover::before{opacity:1}
  .os-cimg{width:74px;height:74px;flex:0 0 auto;border-radius:12px;overflow:hidden;background:var(--lav);display:block}
  .os-cimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
  .os-card:hover .os-cimg img{transform:scale(1.07)}
  .os-cbody{min-width:0;flex:1 1 auto}
  .os-cbody b{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:5px}
  .os-cbody p{font-size:13px;color:#6a6480;line-height:1.5;margin:0}
  .os-cgo{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;border:1.5px solid #e3ddf2;color:var(--indigo);transition:background .18s,color .18s,border-color .18s}
  .os-card:hover .os-cgo{background:var(--indigo);border-color:var(--indigo);color:#fff}
  .os-cgo svg{width:17px;height:17px}
  .os-pfoot{margin-top:26px}
  @media(max-width:900px){
    .os-selector{grid-template-columns:1fr;gap:22px}
    .os-tabs{flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
    .os-tabs::-webkit-scrollbar{display:none}
    .os-tab{flex:0 0 auto}
    .os-cards{grid-template-columns:1fr}
    .os-cimg{width:62px;height:62px}
    .os-h2{font-size:32px}
  }

  /* ---------- WHY US ---------- */
  .whyus{background:#fff;padding:76px var(--pad)}
  .whyus-inner{max-width:var(--maxw);margin:0 auto;background:var(--lav);border-radius:26px;padding:48px 52px;
    display:grid;grid-template-columns:1.7fr 1fr;gap:44px;align-items:center}
  .wu-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin-bottom:18px}
  .wu-eyebrow .wu-spark{width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;background:#fff;border-radius:50%}
  .wu-eyebrow .wu-spark svg{width:26px;height:26px;color:var(--indigo)}
  .whyus h2{font-family:'League Spartan',sans-serif;font-weight:800;font-size:34px;line-height:1.1;color:var(--ink);margin-bottom:18px}
  .wu-lead{font-size:15px;line-height:1.75;color:#5a5470;margin-bottom:34px;max-width:560px}
  .wu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 22px}
  .wu-item .wu-ico{width:46px;height:46px;margin-bottom:14px;color:var(--indigo)}
  .wu-item .wu-ico svg{width:46px;height:46px}
  .wu-item h4{font-family:'Montserrat';font-size:16px;font-weight:700;line-height:1.25;color:var(--ink);margin-bottom:10px;min-height:2.5em}
  .wu-item p{font-size:13.5px;color:#6a6480;line-height:1.6}
  .wu-media{aspect-ratio:7/5;border-radius:20px;box-shadow:0 20px 50px rgba(32,0,102,.12);overflow:hidden}
  .wu-media img,.rv-media img,.vc-media img{width:100%;height:100%;object-fit:cover;display:block}
  .rv-media,.vc-media{overflow:hidden}
  @media (max-width:920px){
    .whyus{padding:52px var(--pad)}
    .whyus-inner{grid-template-columns:1fr;gap:34px;padding:36px 30px}
    .wu-media{order:-1;aspect-ratio:16/10}
    .whyus h2{font-size:27px}
    .wu-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:520px){
    .wu-grid{grid-template-columns:1fr;gap:24px}
  }

  /* ---------- REVIEWS ---------- */
  .reviews{background:#fff;padding:76px var(--pad)}
  .reviews-inner{max-width:var(--maxw);margin:0 auto;background:#fff;border-radius:26px;overflow:hidden;border:1px solid #e9e3f5;
    display:grid;grid-template-columns:minmax(300px,0.6fr) minmax(0,1fr)}
  .rv-media{position:relative}
  .rv-media img{position:absolute;inset:0}
  .rv-body{padding:46px 48px;min-width:0}
  .rv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:nowrap;margin-bottom:36px}
  .rv-head{flex:1 1 auto;min-width:0}
  .rv-head h2{font-family:'League Spartan',sans-serif;font-weight:800;font-size:28px;color:var(--ink);line-height:1.05;margin-bottom:14px}
  .rv-accent{display:block;width:54px;height:3px;border-radius:3px;background:var(--indigo);margin-bottom:16px}
  .rv-head p{font-size:14.5px;color:#5a5470;line-height:1.6;max-width:380px}
  .rv-stats{display:flex;gap:16px;flex:0 0 auto}
  .rv-stat{display:flex;align-items:center;gap:13px;background:var(--lav);border-radius:16px;padding:16px 22px}
  .rv-stat svg{width:30px;height:30px;flex:0 0 auto;color:var(--indigo)}
  .rv-stat b{display:block;font-family:'League Spartan',sans-serif;font-size:26px;font-weight:800;color:var(--ink);line-height:1}
  .rv-stat span{font-size:12.5px;color:#6a6480}
  .rv-track-wrap{position:relative;min-width:0}
  .rv-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*20px)/3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none}
  .rv-track::-webkit-scrollbar{display:none}
  .rv-card{scroll-snap-align:start;background:#faf9fe;border:1px solid #efeafb;border-radius:18px;padding:26px 24px;display:flex;flex-direction:column}
  .rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
  .rv-stars{display:flex;gap:3px}
  .rv-stars svg{width:18px;height:18px;color:var(--indigo)}
  .rv-g{width:24px;height:24px;flex:0 0 auto}
  .rv-src{flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:block}
  .rv-text{font-size:13.5px;color:#4a4560;line-height:1.6;margin-bottom:22px;flex:1 1 auto}
  .rv-person{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .rv-person svg{width:20px;height:20px;color:var(--indigo)}
  .rv-person b{font-size:14.5px;font-weight:600;color:var(--ink)}
  .rv-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:#efeafb;color:var(--indigo);font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:999px}
  .rv-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--indigo)}
  .rv-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
  .rv-dots{display:flex;gap:8px}
  .rv-dots button{width:9px;height:9px;border-radius:50%;border:none;background:#d9d0ee;cursor:pointer;padding:0;transition:background .2s ease,width .2s ease}
  .rv-dots button.active{background:var(--indigo);width:22px;border-radius:5px}
  .rv-arrow{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;background:#fff;border:1.5px solid #e6e0f5;border-radius:50%;cursor:pointer;color:var(--indigo);transition:all .18s ease}
  .rv-arrow:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}
  .rv-arrow svg{width:18px;height:18px}
  @media (max-width:900px){
    .reviews{padding:52px var(--pad)}
    .reviews-inner{grid-template-columns:1fr}
    .rv-media{height:240px;min-height:0;order:-1}
    .rv-body{padding:34px 26px}
    .rv-track{grid-auto-columns:calc((100% - 20px)/2)}
    .rv-head h2{font-size:26px}
  }
  @media (max-width:560px){
    .rv-track{grid-auto-columns:88%}
    .rv-top{flex-direction:column}
  }

  /* ---------- VOUCHERS ---------- */
  .vouchers{background:#fff;padding:0 var(--pad) 30px}
  .vouchers-inner{max-width:var(--maxw);margin:0 auto;background:#f7f6fc;border-radius:26px;overflow:hidden;border:1px solid #ece7f7;
    display:grid;grid-template-columns:1.05fr 1.15fr .78fr;align-items:center}
  .vc-media{position:relative;align-self:stretch}
  .vc-media img{position:absolute;inset:0}
  .vc-body{padding:36px 42px}
  .vc-body h2{font-family:'League Spartan',sans-serif;font-weight:800;font-size:44px;line-height:1.04;color:var(--ink);margin-bottom:16px}
  .vc-body h2 span{color:var(--indigo)}
  .vc-body p{font-size:14.5px;line-height:1.65;color:#5a5470;margin-bottom:26px;max-width:340px}
  .vc-chips{display:flex;flex-wrap:wrap;gap:10px}
  .vc-chip{display:inline-flex;align-items:center;gap:9px;background:#ece7f7;border-radius:12px;padding:10px 13px;white-space:nowrap}
  .vc-chip svg{width:20px;height:20px;flex:0 0 auto;color:var(--indigo)}
  .vc-chip b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.2}
  .vc-chip span{font-size:12.5px;color:#8a83a0}
  .vc-side{padding:36px 42px 36px 46px;display:flex;flex-direction:column;gap:13px;position:relative}
  .vc-side::before{content:"";position:absolute;left:0;top:40px;bottom:40px;width:1px;background:#e2ddf0}
  .vc-side .btn{width:100%;justify-content:center;height:52px}
  .vc-points{margin-top:12px;display:flex;flex-direction:column;gap:14px}
  .vc-point{display:flex;align-items:center;gap:12px;font-size:14px;color:#4a4560}
  .vc-point svg{width:20px;height:20px;flex:0 0 auto;color:var(--indigo)}
  @media (max-width:980px){
    .vouchers{padding:0 var(--pad) 52px}
    .vouchers-inner{grid-template-columns:1fr}
    .vc-media{height:240px;min-height:0}
    .vc-side{padding:0 42px 44px}
    .vc-side::before{display:none}
    .vc-body{padding:36px 42px 20px}
    .vc-chips{flex-wrap:wrap}
  }
  @media (max-width:520px){
    .vc-body{padding:30px 26px 18px}
    .vc-side{padding:0 26px 34px}
    .vc-body h2{font-size:28px}
  }

  /* ---------- PRE-FOOTER + FOOTER ---------- */
  .prefooter{background:#fff;padding:0 var(--pad)}
  .prefooter-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:40px 0 56px}
  .pf-card{background:#f8f7fc;border:1px solid #ece7f7;border-radius:16px;padding:30px 32px;display:flex;align-items:center;gap:22px}
  .pf-ico{width:64px;height:64px;flex:0 0 auto;display:grid;place-items:center;background:#ece7f7;border-radius:50%}
  .pf-ico svg{width:30px;height:30px;color:var(--indigo)}
  .pf-body{flex:1 1 auto;min-width:0}
  .pf-body h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:22px;color:var(--ink);margin-bottom:6px}
  .pf-body p{font-size:14px;color:#6a6480;line-height:1.45;margin-bottom:16px}
  .pf-body .btn{height:48px}
  /* Pułapka na boty w newsletterze. Na WordPressie build_wp.py wstrzykuje do
     formularza pole `ikh_kot`, którego nikt nie ukrywał, więc nad adresem
     e-mail stało puste pole tekstowe wyglądające jak zepsute pole na imię.
     Zgłoszone przez Jakuba 11.08. Chowamy poza kadr, a nie przez display:none,
     bo pole ma zostać w drzewie formularza, żeby bot je wypełnił. */
  .ikh-kot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
  .pf-form{display:flex;gap:10px;margin-top:14px}
  .pf-form input{flex:1 1 auto;min-width:0;height:48px;border:1.5px solid #e0d9f2;border-radius:10px;padding:0 16px;font-family:'Montserrat';font-size:15px;color:var(--ink)}
  .pf-form input:focus{outline:none;border-color:var(--indigo)}
  .pf-form button{flex:0 0 auto;height:48px;padding:0 22px;background:var(--indigo);color:#fff;border:none;border-radius:10px;font-family:'Montserrat';font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .2s ease}
  .pf-form button:hover{background:var(--indigo-hover)}

  .site-footer{background:#f5f3fb;padding:60px var(--pad) 0}
  /* Proporcje policzone pod najdłuższe etykiety, żeby nazwy kategorii nie łamały się
     na dwie linie: "Makijaż permanentny", "Keratynowe prostowanie", "Warsztaty
     automasażu". Kolumna Salon jest najwęższa, bo ma same krótkie hasła. */
  .footer-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.35fr .8fr 1.35fr 1.4fr 1.2fr 1.45fr;gap:28px}
  .f-brand img{height:56px;margin-bottom:18px;display:block}
  .f-slogan{font-weight:700;font-size:15px;color:var(--ink);margin-bottom:12px}
  .f-accent{display:block;width:54px;height:3px;border-radius:3px;background:var(--indigo);margin-bottom:16px}
  .f-desc{font-size:13.5px;color:#6a6480;line-height:1.5;margin-bottom:22px;max-width:230px}
  .f-social{display:flex;gap:13px}
  .f-social a{width:50px;height:50px;display:grid;place-items:center;border:1.5px solid #d9d0ee;border-radius:13px;color:var(--indigo);transition:background .2s ease,color .2s ease,border-color .2s ease}
  .f-social a:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}
  .f-social svg{width:23px;height:23px}
  .f-col h4{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--indigo);margin-bottom:16px}
  .f-col a{display:block;font-size:14px;color:#4a4560;padding:6px 0;transition:color .15s ease}
  .f-col a:hover{color:var(--indigo)}
  .f-contact .fc{display:flex;gap:11px;font-size:14px;color:#4a4560;padding:7px 0;line-height:1.4}
  .f-contact .fc a{color:#4a4560}
  .f-contact .fc a:hover{color:var(--indigo)}
  .f-contact svg{width:18px;height:18px;color:var(--indigo);flex:0 0 auto;margin-top:2px}
  .footer-bottom{max-width:var(--maxw);margin:44px auto 0;border-top:1px solid #e6e0f5;padding:22px 0 14px;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px}
  /* Przycisk ustawień cookies ma font:inherit, więc bez tego brał bazowe 16 px
     i odstawał wielkością od sąsiednich linków paska prawnego. */
  .footer-bottom a,.footer-bottom .zg-ustawienia{font-size:13px;color:#6a6480}
  .footer-bottom a:hover,.footer-bottom .zg-ustawienia:hover{color:var(--indigo)}
  .footer-bottom .sep{color:#c9bfe0;font-size:12px}
  .footer-credit{max-width:var(--maxw);margin:0 auto;text-align:center;padding:6px 0 30px;font-size:12.5px;color:#8a83a0}
  .footer-credit a{color:var(--indigo);font-weight:600}

  /* Ciaśniejszy podział na węższych laptopach, żeby "Makijaż permanentny"
     i "Keratynowe prostowanie" trzymały się jednej linii jak najdłużej. */
  @media (max-width:1380px){
    .footer-inner{grid-template-columns:1.25fr .75fr 1.35fr 1.4fr 1.2fr 1.4fr;gap:24px}
  }
  /* Sześć kolumn przestaje się mieścić przed progiem tabletu, dlatego 1080, nie 900. */
  @media (max-width:1080px){
    .footer-inner{grid-template-columns:1fr 1fr 1fr;gap:32px 28px}
    .f-brand{grid-column:1/-1}
  }
  @media (max-width:900px){
    .prefooter-inner{grid-template-columns:1fr;padding:40px 0}
  }
  @media (max-width:620px){
    .footer-inner{grid-template-columns:1fr 1fr}
    .f-brand{grid-column:1/-1}
    .pf-card{flex-direction:column;align-items:flex-start}
    .pf-form{flex-direction:column}
    .pf-form button{width:100%}
  }
  @media (max-width:460px){
    /* Dwie kolumny, nie jedna. W jednej kolumnie linki dawały stopkę na dwa pełne
       ekrany telefonu (Jakub 05.08). Logo i kontakt zostają na pełną szerokość,
       bo adres i mail nie mieszczą się w połowie ekranu. Pozostałe cztery kolumny
       układają się w pary: Salon z Kosmetyką, Fryzjerstwo z Warsztatami. */
    .footer-inner{grid-template-columns:1fr 1fr;gap:28px 20px}
    .f-brand,.f-contact{grid-column:1/-1}
    .f-col a{font-size:13.5px;padding:5px 0}
    .footer-bottom{gap:6px 16px;padding:22px 0 14px}
  }

  /* ---------- MOBILE ---------- */
  .menu-toggle,.mobile-cta{display:none}
  .menu-toggle{align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 auto;
    border:none;background:none;color:var(--indigo);cursor:pointer;padding:0}
  .menu-toggle svg{width:34px;height:34px}
  .mobile-cta{align-items:center;justify-content:center;height:46px;padding:0 16px;border-radius:10px;flex:0 0 auto;
    background:var(--indigo);color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;gap:8px}
  .mobile-cta svg{width:18px;height:18px}

  .drawer-overlay{position:fixed;inset:0;background:rgba(20,10,50,.45);opacity:0;visibility:hidden;
    transition:opacity .25s ease,visibility .25s;z-index:200}
  .drawer-overlay.open{opacity:1;visibility:visible}
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(370px,86vw);background:#fff;z-index:210;
    display:none;flex-direction:column;box-shadow:-10px 0 40px rgba(32,0,102,.18)}
  .drawer.open{display:flex;animation:drawerIn .28s cubic-bezier(.4,0,.2,1)}
  @keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
  .drawer-head img{height:38px}
  .drawer-close{width:40px;height:40px;border:none;background:var(--lav);border-radius:10px;color:var(--indigo);
    font-size:20px;cursor:pointer;display:grid;place-items:center}
  .drawer-nav{display:block;flex:1 1 auto;overflow-y:auto;padding:6px 0;-webkit-overflow-scrolling:touch}
  .acc-h{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;
    padding:19px 22px;font-family:'Montserrat',sans-serif;font-size:17.5px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
  .acc-h svg{width:18px;height:18px;transition:transform .25s ease;color:var(--indigo);flex:0 0 auto}
  .acc.open .acc-h svg{transform:rotate(180deg)}
  .acc-body{max-height:0;overflow:hidden;transition:max-height .32s ease;background:var(--lav)}
  .acc.open .acc-body{max-height:720px}
  .acc-body a{display:flex;align-items:center;gap:13px;padding:13px 22px;font-size:15.5px;color:#3a3550}
  .acc-body .d-ico{width:20px;height:20px;flex:0 0 auto;color:var(--indigo)}
  .acc-body a.all{color:var(--indigo);font-weight:600;padding-left:55px}
  .drawer-link{display:block;padding:19px 22px;font-size:17.5px;font-weight:600;color:var(--ink)}
  .drawer-cta{padding:18px 20px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line)}
  .drawer-cta .btn{width:100%;justify-content:center;height:52px}
  .drawer-info{padding:16px 20px 26px;background:var(--lav);display:flex;flex-direction:column;gap:11px}
  .drawer-info .di{display:flex;align-items:center;gap:11px;font-size:13.5px;color:#4a4560}
  .drawer-info a{color:var(--indigo);font-weight:600;text-decoration:none}
  .drawer-info svg{width:17px;height:17px;color:var(--indigo);flex:0 0 auto}
  body.no-scroll{overflow:hidden}

  /* Próg szuflady stał na 992 px, a pełny nagłówek potrzebuje 1304 px, więc
     w całym pasie 992 do 1303 px przycisk rezerwacji wyjeżdżał poza ekran
     i ścinał go overflow-x:hidden. Na tablecie w poziomie główne CTA było
     niewidoczne. Próg podniesiony do 1150 px, czyli do szerokości, przy
     której nagłówek realnie się mieści po lekkiej kompresji niżej.
     Poprawka 11.08, desktop 1440 nietknięty. */
  @media (min-width:1150px){.drawer,.drawer-overlay{display:none}}
  @media (max-width:1149px){
    .topbar{display:none}
    .site-header{gap:12px;padding:0 22px}
    .site-header nav,.site-header .actions{display:none}
    .menu-toggle{display:inline-flex}
    .mobile-cta{display:inline-flex;margin-left:auto}
    .logo img{height:42px}
  }
  @media (max-width:520px){
    .site-header{padding:0 16px}
    .mobile-cta .mc-txt{display:none}
    .mobile-cta{padding:0;width:46px}
  }

/* ================= O NAS (podstrona) ================= */
.on-hero{background:#fff;padding:60px var(--pad) 24px}
.on-hero-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
/* Hero na o-nas, ten sam rozjazd fontu co na home, poprawiony 13.08.2026 razem z nim. */
.on-hero-text h1{font-family:'DM Serif Display',serif;font-weight:400;font-size:58px;line-height:1.02;color:var(--ink);margin:16px 0 24px}
.on-hero-text h1 span{color:var(--indigo)}
.on-hero-lead{font-size:16px;line-height:1.7;color:#5a5470;max-width:490px}
.on-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.on-stat{background:#f8f7fc;border:1px solid #ece7f7;border-radius:14px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.on-stat-ico{width:32px;height:32px;color:var(--indigo);margin-bottom:6px;display:block}
.on-stat-ico svg{width:32px;height:32px}
.on-stat b{font-family:'League Spartan',sans-serif;font-size:21px;font-weight:800;color:var(--ink);line-height:1}
.on-stat>span:last-child{font-size:12px;color:#6a6480;line-height:1.35}
.on-hero-media{display:grid;grid-template-columns:1.32fr 1fr;grid-template-rows:1fr 1fr;gap:16px;height:520px}
.on-hm{width:100%;height:100%;object-fit:cover;border-radius:18px;display:block;box-shadow:0 16px 40px rgba(32,0,102,.10)}
.on-hm1{grid-row:1/3;grid-column:1}
.on-hm2{grid-column:2;grid-row:1}
.on-hm3{grid-column:2;grid-row:2}
@media(max-width:920px){
  .on-hero-inner{grid-template-columns:1fr;gap:32px}
  .on-hero-media{order:-1;height:360px}
  .on-hero-text h1{font-size:46px}
  .on-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.on-hero-text h1{font-size:38px}.on-hero-media{height:300px}}

/* O nas, Poznaj IKHAKIMA */
.on-know{background:var(--lav);padding:64px var(--pad)}
.on-know-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.on-know-text h2{font-family:'League Spartan',sans-serif;font-weight:800;font-size:36px;color:var(--ink);margin-bottom:20px}
.on-know-text p{font-size:15px;line-height:1.75;color:#5a5470;margin-bottom:26px;max-width:440px}
.on-know-sub{display:inline-flex;align-items:center;gap:8px;font-family:'Benedict',cursive;font-style:italic;font-size:20px;color:var(--indigo);margin-bottom:22px}
.on-know-sub svg{width:18px;height:18px}
.on-know-text .btn{display:inline-flex}
.on-know-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.on-fcard{background:#fff;border:1px solid #ece7f7;border-radius:18px;padding:26px 24px}
.on-fico{width:46px;height:46px;display:grid;place-items:center;color:var(--indigo);margin-bottom:16px}
.on-fico svg{width:40px;height:40px}
.on-fcard h4{font-family:'Montserrat';font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px}
.on-fcard p{font-size:13.5px;line-height:1.6;color:#6a6480}
@media(max-width:920px){.on-know-inner{grid-template-columns:1fr;gap:34px}.on-know-text h2{font-size:30px}}
@media(max-width:520px){.on-know-cards{grid-template-columns:1fr}}

/* O nas, Nasza przestrzeń */
.on-space{background:#fff;padding:64px var(--pad)}
.on-space-inner{max-width:var(--maxw);margin:0 auto}
.on-sec-head{text-align:center;margin-bottom:40px}
.on-sec-head h2{font-family:'League Spartan',sans-serif;font-weight:800;font-size:36px;color:var(--ink);margin-bottom:12px}
.on-sec-head p{font-size:15px;color:#5a5470}
.on-space-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.on-scard{background:#fff;border:1px solid #ece7f7;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;cursor:pointer;text-decoration:none;color:inherit}
.on-scard:hover{box-shadow:0 16px 40px rgba(32,0,102,.10);transform:translateY(-3px)}
.on-scard-img{aspect-ratio:16/11;overflow:hidden}
.on-scard-img img{width:100%;height:100%;object-fit:cover;display:block}
.on-scard-body{padding:22px 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex:1 1 auto}
.on-scard-body h4{font-family:'League Spartan',sans-serif;font-weight:700;font-size:20px;color:var(--ink);margin-bottom:8px}
.on-scard-body p{font-size:13.5px;line-height:1.55;color:#6a6480}
.on-scard-arr{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--lav);color:var(--indigo);transition:background .18s,color .18s}
.on-scard:hover .on-scard-arr{background:var(--indigo);color:#fff}
.on-scard-arr svg{width:18px;height:18px}
@media(max-width:900px){.on-space-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.on-space-grid{grid-template-columns:1fr}.on-sec-head h2{font-size:30px}}

/* O nas, Dlaczego (wartości) */
.on-why{background:#fff;padding:20px var(--pad) 64px}
.on-why-inner{max-width:var(--maxw);margin:0 auto}
.on-why-inner>h2{text-align:center;font-family:'League Spartan',sans-serif;font-weight:800;font-size:34px;color:var(--ink);margin-bottom:34px}
.on-why-bar{background:var(--lav);border-radius:24px;padding:40px 36px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.on-wi-ico{width:44px;height:44px;color:var(--indigo);margin-bottom:14px;display:block}
.on-wi-ico svg{width:44px;height:44px}
.on-wi h4{font-family:'Montserrat';font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:9px;min-height:2.5em}
.on-wi p{font-size:13px;line-height:1.6;color:#6a6480}
@media(max-width:900px){.on-why-bar{grid-template-columns:1fr 1fr;gap:26px}.on-why-inner>h2{font-size:28px}}
@media(max-width:520px){.on-why-bar{grid-template-columns:1fr}.on-wi h4{min-height:0}}

/* O nas, Zespół */
.on-team{background:#fff;padding:20px var(--pad) 64px}
.on-team-inner{max-width:var(--maxw);margin:0 auto}
.on-team-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.on-tcard{background:#fff;border:1px solid #ece7f7;border-radius:18px;overflow:hidden}
.on-tph{aspect-ratio:4/5;background:linear-gradient(160deg,#efeafb,#e2dbf3);display:grid;place-items:center;color:#b3a9d4}
.on-tph svg{width:48px;height:48px}
.on-tph img{width:100%;height:100%;object-fit:cover;display:block}
.on-tb{padding:16px 16px 20px}
.on-tb b{display:block;font-family:'League Spartan',sans-serif;font-weight:700;font-size:17px;color:var(--ink);margin-bottom:3px;line-height:1.1}
.on-trole{display:block;font-size:12px;font-weight:600;color:var(--indigo);margin-bottom:10px}
.on-tb p{font-size:12.5px;line-height:1.55;color:#6a6480}
/* ---- Zespół jako slider (05.08). Siatka 6 kolumn rozjeżdżała 11 osób na dwa
   nierówne rzędy, a karty były tak wąskie, że twarze ginęły. ---- */
.on-team-slider{position:relative;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
.on-team-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding:4px 0 6px}
.on-team-track::-webkit-scrollbar{display:none}
.on-team-track .on-tcard{flex:0 0 232px;scroll-snap-align:start}
.on-team-nav{display:flex;align-items:center;gap:14px;margin-top:18px}
.on-tnav{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:#fff;border:1.5px solid #e3ddf2;color:var(--indigo);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,opacity .18s}
.on-tnav:hover:not(:disabled){background:var(--indigo);border-color:var(--indigo);color:#fff}
.on-tnav:disabled{opacity:.35;cursor:default}
.on-tnav svg{width:18px;height:18px}
.on-tprog{flex:1 1 auto;height:3px;background:#ece7f7;border-radius:3px;overflow:hidden}
.on-tprog span{display:block;height:100%;width:12%;background:var(--indigo);border-radius:3px;
  transition:width .18s ease}
@media(max-width:700px){
  .on-team-track .on-tcard{flex:0 0 78%}
  .on-tnav{width:40px;height:40px}
}
@media(max-width:1100px){.on-team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.on-team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.on-team-grid{grid-template-columns:1fr}}

/* O nas, CTA banner + pasek */
.on-cta{background:#fff;padding:20px var(--pad) 56px}
.on-cta-inner{max-width:var(--maxw);margin:0 auto;background:var(--indigo);border-radius:26px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:340px}
.on-cta-text{padding:52px 54px;color:#fff;align-self:center}
.on-cta-text h2{font-family:'League Spartan',sans-serif;font-weight:800;font-size:38px;line-height:1.06;margin-bottom:16px}
.on-cta-text p{font-size:15px;color:rgba(255,255,255,.85);line-height:1.65;margin-bottom:28px;max-width:400px}
.on-cta-btns{display:flex;flex-wrap:wrap;gap:14px}
.on-cta-btns .btn{height:54px}
.btn-white{background:#fff;color:var(--indigo)}
.btn-white:hover{background:#efeafb}
.btn-ghost-white{border:1.5px solid rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-ghost-white:hover{background:rgba(255,255,255,.12)}
.on-cta-media{position:relative}
.on-cta-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.on-strip{background:#fff;padding:0 var(--pad) 64px}
.on-strip-inner{max-width:var(--maxw);margin:0 auto;background:#f7f6fc;border:1px solid #ece7f7;border-radius:20px;padding:30px 34px;display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.on-si{display:flex;align-items:center;gap:13px}
.on-si-ico{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:var(--lav);color:var(--indigo)}
.on-si-ico svg{width:22px;height:22px}
.on-si b{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.2}
.on-si>div>span{font-size:12px;color:#6a6480;line-height:1.35}
@media(max-width:820px){.on-cta-inner{grid-template-columns:1fr}.on-cta-media{height:240px}.on-cta-text{padding:40px 34px}.on-strip-inner{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:520px){.on-strip-inner{grid-template-columns:1fr}}

/* ================= KATEGORIA (podstrona usług) ================= */
.kat-hero{background:#fff;padding:18px var(--pad) 8px}
.kat-hero-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
/* flex-wrap + min-width:0, bo długa nazwa zabiegu na mobile uciekała do prawej krawędzi */
.kat-crumb{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:9px;row-gap:4px;font-size:13px;color:#8a84a0;margin-bottom:22px}
.kat-crumb b{min-width:0}
.kat-crumb a{color:#8a84a0}.kat-crumb a:hover{color:var(--indigo)}
.kat-crumb b{color:var(--indigo);font-weight:600}
.kat-hero-text h1{font-family:'DM Serif Display',serif;font-weight:400;font-size:60px;line-height:1.02;color:var(--indigo);margin-bottom:20px}
.kat-hero-text>p{font-size:16px;line-height:1.7;color:#5a5470;max-width:470px;margin-bottom:30px}
.kat-chips{display:flex;flex-wrap:wrap;gap:14px 26px}
.kat-chip{display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:600;color:#4a4560;line-height:1.25}
.kat-chip svg{width:26px;height:26px;flex:0 0 auto;color:var(--indigo)}
.kat-hero-media{position:relative;aspect-ratio:1/0.7;max-height:46vh;justify-self:end;width:100%}
/* Kadr zdjęcia w hero kategorii. Do 13.08.2026 stał tu organiczny owal plus cztery
   fioletowe kółka. Angelika, 12.08: "wolałabym żeby był kwadrat zaoblony, tak jak
   wszystkie inne elementy, i bez tych jakichś kółek". Zaokrąglenie 20 px zgadza się
   z kartami i przyciskami w reszcie serwisu. Wariant fryzjerski `.kat-hero.fry`
   miał ten kształt od początku, więc teraz cały serwis wygląda tak samo. */
.kat-hero-media img{position:absolute;inset:0;width:100%;height:100%;left:0;top:0;object-fit:cover;border-radius:20px;box-shadow:0 22px 54px rgba(32,0,102,.14)}
.kat-bubble{display:none}
.kat-bubble.b1{width:70px;height:70px;left:-10px;top:22%}
.kat-bubble.b2{width:120px;height:120px;right:-6%;top:6%}
.kat-bubble.b3{width:54px;height:54px;right:14%;bottom:6%}
.kat-bubble.b4{width:34px;height:34px;left:16%;bottom:14%}
.kat-hero-inner>.kat-crumb{grid-column:1/-1;margin-bottom:4px}
@media(max-width:920px){.kat-hero-inner{grid-template-columns:1fr;gap:26px}.kat-hero-media{order:-1;max-width:420px}.kat-hero-inner>.kat-crumb{order:-2;margin-bottom:0}.kat-hero-text h1{font-size:46px}}

/* ---- Kategoria: panel "Odkryj zabiegi" ---- */
.kat-discover{background:#fff;padding:34px var(--pad) 10px}
.kat-discover-inner{max-width:var(--maxw);margin:0 auto;background:#faf9fd;border:1px solid #ece7f7;border-radius:22px;padding:38px 40px 34px}
.kat-discover h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);text-align:center;margin-bottom:8px}
.kat-discover>.kat-discover-inner>p.kd-lead{text-align:center;font-size:14.5px;color:#6a6480;margin-bottom:30px}
.kd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:32px}
.kd-item{padding:0 26px;text-align:center;border-right:1px solid #e7e1f4}
.kd-item:last-child{border-right:0}
.kd-item svg{width:34px;height:34px;color:var(--indigo);margin-bottom:14px}
.kd-item b{display:block;font-size:15px;font-weight:700;color:var(--indigo);line-height:1.3;margin-bottom:9px}
.kd-item span{font-size:13px;color:#6a6480;line-height:1.55}
.kd-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
@media(max-width:900px){.kd-grid{grid-template-columns:1fr 1fr;gap:26px 0}.kd-item:nth-child(2n){border-right:0}}
@media(max-width:560px){.kat-discover-inner{padding:30px 22px}.kd-grid{grid-template-columns:1fr;gap:26px}.kd-item{border-right:0;padding:0}.kd-btns .btn{width:100%}}

/* ---- Kategoria: bloki zabiegów ---- */
.zab{background:#fff;padding:34px var(--pad)}
.zab-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.zab.rev .zab-media{order:2}
.zab-media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/12;background:var(--lav)}
.zab-media img{width:100%;height:100%;object-fit:cover;display:block}
.zab-spec{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:190px;background:#fff;border-radius:14px;box-shadow:0 14px 40px rgba(32,0,102,.16);padding:18px 16px;display:grid;gap:15px}
.zab.rev .zab-spec{right:auto;left:14px}
.zs{display:flex;gap:11px;align-items:flex-start}
.zs svg{width:19px;height:19px;flex:0 0 auto;color:var(--indigo);margin-top:2px}
.zs span{display:block;font-size:11.5px;color:#7a7490;line-height:1.3}
.zs b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35}
.zab-text h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);margin-bottom:12px}
.zab-lead{font-size:15px;line-height:1.7;color:#5a5470;margin-bottom:24px}
.zab-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zc{background:#faf9fd;border:1px solid #ece7f7;border-radius:14px;padding:17px 18px}
.zc-h{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.zc-h svg{width:19px;height:19px;color:var(--indigo);flex:0 0 auto}
.zc-h b{font-size:13.5px;font-weight:700;color:var(--indigo)}
.zc p{font-size:12.5px;line-height:1.6;color:#6a6480}
.zab-more{display:flex;justify-content:center;padding:6px var(--pad) 0}
@media(max-width:980px){.zab-inner{display:flex;flex-direction:column;align-items:stretch;gap:0}.zab-text{display:contents}.zab-text h2{order:1;margin-bottom:10px}.zab-lead{order:2;margin-bottom:22px}.zab-media,.zab.rev .zab-media{order:3;margin-bottom:24px}.zab-cards{order:4}.zab-btns{order:5}.zab-spec{position:static;transform:none;width:auto;grid-template-columns:1fr 1fr;margin-top:14px;box-shadow:0 8px 26px rgba(32,0,102,.1)}.zab-media{aspect-ratio:auto;overflow:visible;background:transparent}.zab-media img{border-radius:18px;aspect-ratio:16/10;height:auto}}
@media(max-width:560px){.zab-cards{grid-template-columns:1fr}.zab-spec{grid-template-columns:1fr}.zab-text h2{font-size:25px}}

/* ---- Kategoria: kafelki kontaktowe ---- */
.kat-help{background:#fff;padding:48px var(--pad) 30px}
.kat-help h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:28px;color:var(--indigo);text-align:center;margin-bottom:26px}
.kh-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kh{background:#faf9fd;border:1px solid #ece7f7;border-radius:16px;padding:22px 22px;display:flex;gap:15px;align-items:flex-start}
.kh>svg{width:34px;height:34px;flex:0 0 auto;color:var(--indigo)}
.kh b{display:block;font-size:14.5px;font-weight:700;color:var(--indigo);margin-bottom:5px}
.kh p{font-size:12.5px;color:#6a6480;line-height:1.5;margin-bottom:11px}
.kh a.kh-link{font-size:12px;font-weight:700;color:var(--indigo);letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px}
.kh a.kh-link:hover{color:var(--indigo-hover)}
.kh a.kh-link svg{width:14px;height:14px}
@media(max-width:1000px){.kh-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kh-grid{grid-template-columns:1fr}}

/* ---- Kategoria: breadcrumb z ikoną domu i chevronami (wg mocka) ---- */
.kat-crumb .crumb-home{display:inline-flex;align-items:center;color:#8a84a0}
.kat-crumb .crumb-home svg{width:16px;height:16px}
.kat-crumb .crumb-sep{width:13px;height:13px;color:#c3bdd4;flex:0 0 auto}

/* ---- Kategoria: przyciski pod zabiegiem ---- */
.zab-btns{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:24px}
.zab-btns .btn{height:50px;gap:10px}
.zab-btns .btn svg{width:17px;height:17px}
.zab-more-link{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--indigo)}
.zab-more-link svg{width:15px;height:15px;transition:transform .18s ease}
.zab-more-link:hover{color:var(--indigo-hover)}
.zab-more-link:hover svg{transform:translateX(4px)}
@media(max-width:560px){.zab-btns{gap:16px;flex-direction:column;align-items:stretch}.zab-btns .btn{width:100%;justify-content:center}.zab-more-link{justify-content:center}}

/* ---- Banner CTA: ikony w przyciskach + równe przyciski na mobile ---- */
.on-cta-btns .btn{gap:10px}
.on-cta-btns .btn svg{width:17px;height:17px;flex:0 0 auto}
@media(max-width:560px){.on-cta-btns{flex-direction:column;align-items:stretch;gap:12px}.on-cta-btns .btn{width:100%;justify-content:center}}

/* ---- Kategoria: banner ratalny (MediRaty) ---- */
.raty{background:#fff;padding:34px var(--pad) 10px}
.raty-inner{position:relative;overflow:hidden;max-width:var(--maxw);margin:0 auto;background:#f3f0fb;border-radius:20px;padding:26px 34px;display:flex;align-items:center;gap:26px}
.raty-ico{width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;border-radius:14px;background:#fff;color:var(--indigo)}
.raty-ico svg{width:26px;height:26px}
.raty-text{position:relative;z-index:2;flex:1 1 auto;min-width:0}
.raty-text b{display:block;font-size:17px;font-weight:700;color:var(--indigo);margin-bottom:6px}
.raty-text p{font-size:13.5px;line-height:1.6;color:#5a5470;max-width:520px}
.raty-logo{position:relative;z-index:2;width:150px;height:auto;flex:0 0 auto;mix-blend-mode:multiply}
.raty .btn{position:relative;z-index:2;flex:0 0 auto;height:50px;gap:9px}
.raty .btn svg{width:15px;height:15px}
.raty-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#efeafb,#d5c9f2);pointer-events:none}
.raty-bubble.r1{width:120px;height:120px;right:-30px;bottom:-50px}
.raty-bubble.r2{width:56px;height:56px;right:120px;top:-24px}
@media(max-width:900px){.raty-inner{flex-wrap:wrap;gap:18px 22px}.raty-text{flex:1 1 100%;order:2}.raty-logo{order:3}.raty .btn{order:4;margin-left:auto}}
@media(max-width:560px){.raty-inner{padding:24px 20px}.raty-text p{font-size:13px}.raty .btn{width:100%;justify-content:center;margin-left:0;order:4}.raty-logo{width:130px;order:3}}

/* ---- Mega menu: pełne listy zabiegów ---- */
.mp-list.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.mega-panels .mp-list{max-height:330px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:#d5cced transparent}
.mega-panels .mp-list::-webkit-scrollbar{width:6px}
.mega-panels .mp-list::-webkit-scrollbar-thumb{background:#d5cced;border-radius:3px}
.mp-list a{line-height:1.3}
.mp-all{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--indigo)}
.mp-all svg{width:15px;height:15px;transition:transform .16s ease}
.mp-all:hover{color:var(--indigo-hover)}
.mp-all:hover svg{transform:translateX(4px)}
@media(max-width:1200px){.mp-list.three{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- Pełna oferta (cennik kategorii) ---- */
.po{background:#fff;padding:44px var(--pad) 10px}
.po-inner{max-width:var(--maxw);margin:0 auto}
.po h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);text-align:center;margin-bottom:8px}
.po-lead{text-align:center;font-size:14px;color:#6a6480;margin-bottom:28px}
.po-table{border:1px solid #ece7f7;border-radius:18px;overflow:hidden;background:#fff}
.po-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 120px;align-items:center;gap:16px;padding:15px 24px;border-bottom:1px solid #f2eefa;transition:background .15s ease}
.po-row:last-child{border-bottom:0}
.po-row:hover{background:#faf9fd}
.po-name{font-size:14.5px;color:var(--ink);line-height:1.4}
.po-dur{font-size:13px;color:#7a7490;text-align:right;white-space:nowrap}
.po-price{font-size:15px;font-weight:700;color:var(--indigo);text-align:right;white-space:nowrap}
.po-cta{display:flex;justify-content:center;margin-top:26px}
.po-cta-2{gap:12px;flex-wrap:wrap}
@media(max-width:560px){.po-cta-2{flex-direction:column;align-items:stretch}.po-cta-2 .btn{width:100%;justify-content:center}}
.po-cta .btn{height:52px;gap:10px}
.po-cta .btn svg{width:17px;height:17px}
@media(max-width:640px){
  .po-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:14px 18px}
  .po-name{grid-column:1/-1;font-weight:600}
  .po-dur{text-align:left;grid-column:1}
  .po-price{grid-column:2}
  .po-cta .btn{width:100%;justify-content:center}
}

/* ---- Hub kategorii (kosmetyka.html) ---- */
.kh{background:#fff;padding:20px var(--pad) 20px}
.kh-inner{max-width:var(--maxw);margin:0 auto}
.kh h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:32px;color:var(--indigo);text-align:center;margin-bottom:8px}
.kh-lead{text-align:center;font-size:14.5px;color:#6a6480;margin-bottom:32px}
.kh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.kh-cat{display:flex;align-items:flex-start;gap:16px;padding:24px 24px;border:1px solid #ece7f7;border-radius:18px;background:#fff;text-decoration:none;color:inherit;transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease}
.kh-cat:hover{border-color:#cdbff0;box-shadow:0 14px 34px rgba(32,0,102,.09);transform:translateY(-2px)}
.kh-cico{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border-radius:13px;background:var(--lav);color:var(--indigo)}
.kh-cico svg{width:24px;height:24px}
.kh-cbody{flex:1 1 auto;min-width:0;display:block}
.kh-cbody b{display:block;font-size:16px;font-weight:700;color:var(--indigo);margin-bottom:5px}
.kh-cdesc{display:block;font-size:13px;line-height:1.55;color:#6a6480;margin-bottom:9px}
.kh-ccount{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a84a0;background:#f6f4fc;border-radius:20px;padding:4px 11px}
.kh-cgo{flex:0 0 auto;color:#c3b9df;transition:color .18s ease,transform .18s ease;align-self:center}
.kh-cgo svg{width:18px;height:18px}
.kh-cat:hover .kh-cgo{color:var(--indigo);transform:translateX(4px)}
@media(max-width:1000px){.kh-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.kh-grid{grid-template-columns:1fr}.kh h2{font-size:26px}}

/* ---- Pełny cennik: domyślnie zwinięty, żeby nie przytłaczać ---- */
.po-table.po-collapsed{position:relative;max-height:340px;overflow:hidden}
.po-table.po-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 82%);pointer-events:none}
.po-table.po-open{max-height:none}
.po-table.po-open::after{display:none}
.po-toggle{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px auto 0;padding:13px 26px;border:1.5px solid var(--indigo);border-radius:999px;background:#fff;color:var(--indigo);font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,color .18s ease}
.po-toggle svg{width:15px;height:15px;transition:transform .2s ease}
.po-toggle:hover{background:var(--indigo);color:#fff}
.po-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}

/* ---- Cennik zbiorczy ---- */
.cen{background:#fff;padding:20px var(--pad) 30px}
.cen-inner{max-width:var(--maxw);margin:0 auto}
.cen-nav{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:38px}
.cen-nav a{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid #ece7f7;border-radius:999px;background:#faf9fd;font-size:13px;color:#4a4560;transition:border-color .16s ease,color .16s ease}
.cen-nav a span{font-size:11px;font-weight:700;color:#8a84a0}
.cen-nav a:hover{border-color:#cdbff0;color:var(--indigo)}
.cen-nav a:hover span{color:var(--indigo)}
.cen-grupa{margin-bottom:34px;scroll-margin-top:110px}
.cen-grupa h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:24px;color:var(--indigo);margin-bottom:14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cen-licznik{font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a84a0;background:#f6f4fc;border-radius:20px;padding:4px 11px}

/* ---- Kontakt ---- */
.kt{background:#fff;padding:20px var(--pad) 40px}
.kt-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:26px;align-items:start}
.kt-box{background:#faf9fd;border:1px solid #ece7f7;border-radius:20px;padding:30px 32px}
.kt-box h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:26px;color:var(--indigo);margin-bottom:20px}
.kt-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #efeafb;font-size:14.5px;color:#4a4560}
.kt-row:last-child{border-bottom:0}
.kt-row b{color:var(--indigo);font-weight:700}
.kt-off b{color:#a29cb8;font-weight:600}
.kt-line{display:flex;align-items:flex-start;gap:15px;padding:14px 0;border-bottom:1px solid #efeafb;color:inherit;text-decoration:none}
.kt-line:last-of-type{border-bottom:0}
.kt-ico{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:#fff;color:var(--indigo)}
.kt-ico svg{width:21px;height:21px}
.kt-line b{display:block;font-size:15px;color:var(--indigo);margin-bottom:3px}
.kt-line small{display:block;font-size:12.5px;color:#6a6480;line-height:1.5}
.kt-line:hover b{color:var(--indigo-hover)}
@media(max-width:900px){.kt-inner{grid-template-columns:1fr}}

/* ---- Płatność ratalna ---- */
.rt{background:#fff;padding:20px var(--pad) 40px}
.rt-inner{max-width:var(--maxw);margin:0 auto}
.rt h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);text-align:center;margin-bottom:28px}
.rt-kroki{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:38px}
.rt-krok{display:flex;gap:14px;background:#faf9fd;border:1px solid #ece7f7;border-radius:16px;padding:22px 20px}
.rt-num{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--indigo);color:#fff;font-size:13px;font-weight:700}
.rt-krok b{display:block;font-size:14.5px;color:var(--indigo);margin-bottom:6px}
.rt-krok p{font-size:12.5px;line-height:1.6;color:#6a6480}
.rt-boxy{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rt-box{background:#f3f0fb;border-radius:20px;padding:28px 30px}
.rt-box img{width:140px;height:auto;margin-bottom:14px;mix-blend-mode:multiply}
.rt-box b{display:block;font-size:18px;color:var(--indigo);margin-bottom:9px}
.rt-box p{font-size:13.5px;line-height:1.65;color:#5a5470}
@media(max-width:1000px){.rt-kroki{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.rt-kroki,.rt-boxy{grid-template-columns:1fr}.cen-nav{justify-content:flex-start}}

/* ---- Pasek prowadzący do cennika (zamiast tabeli na podstronie kategorii) ---- */
.cnb{background:#fff;padding:34px var(--pad) 10px}
.cnb-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:20px;padding:22px 28px;border:1px solid #ece7f7;border-radius:18px;background:#faf9fd;text-decoration:none;color:inherit;transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease}
.cnb-inner:hover{border-color:#cdbff0;box-shadow:0 12px 30px rgba(32,0,102,.08);transform:translateY(-2px)}
.cnb-ico{width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;border-radius:14px;background:#fff;color:var(--indigo)}
.cnb-ico svg{width:23px;height:23px}
.cnb-txt{flex:1 1 auto;min-width:0}
.cnb-txt b{display:block;font-size:16px;color:var(--indigo);margin-bottom:4px}
.cnb-txt span{display:block;font-size:13px;color:#6a6480;line-height:1.5}
.cnb-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--indigo)}
.cnb-go svg{width:15px;height:15px;transition:transform .18s ease}
.cnb-inner:hover .cnb-go svg{transform:translateX(4px)}
@media(max-width:720px){.cnb-inner{flex-wrap:wrap;gap:14px}.cnb-txt{flex:1 1 100%;order:2}.cnb-go{order:3;margin-left:auto}}

/* ---- Hub: karty kategorii ze zdjęciem ---- */
.kc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.kc{display:flex;flex-direction:column;border:1px solid #ece7f7;border-radius:20px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease}
.kc:hover{border-color:#cdbff0;box-shadow:0 16px 38px rgba(32,0,102,.1);transform:translateY(-3px)}
.kc-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--lav)}
.kc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.kc:hover .kc-media img{transform:scale(1.05)}
.kc-badge{position:absolute;left:14px;bottom:14px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--indigo);background:rgba(255,255,255,.94);border-radius:20px;padding:6px 13px}
.kc-body{display:block;padding:22px 24px 24px}
.kc-body b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:22px;color:var(--indigo);margin-bottom:9px}
.kc-desc{display:block;font-size:13.5px;line-height:1.6;color:#6a6480;margin-bottom:16px}
.kc-go{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--indigo)}
.kc-go svg{width:15px;height:15px;transition:transform .18s ease}
.kc:hover .kc-go svg{transform:translateX(4px)}
@media(max-width:1000px){.kc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.kc-grid{grid-template-columns:1fr}}

/* ---- COMBO: dlaczego ma sens ---- */
.dc{background:#f3f0fb;padding:52px var(--pad)}
.dc-inner{max-width:var(--maxw);margin:0 auto}
.dc h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);text-align:center;margin-bottom:8px}
.dc-lead{text-align:center;font-size:14.5px;color:#5a5470;margin-bottom:30px;max-width:620px;margin-left:auto;margin-right:auto}
.dc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dc-item{background:#fff;border-radius:18px;padding:26px 24px}
.dc-item svg{width:30px;height:30px;color:var(--indigo);margin-bottom:14px}
.dc-item b{display:block;font-size:15.5px;color:var(--indigo);margin-bottom:8px}
.dc-item p{font-size:13px;line-height:1.6;color:#6a6480}
@media(max-width:1000px){.dc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dc-grid{grid-template-columns:1fr}}

/* ---- Strony prawne i FAQ: długi tekst do czytania ---- */
.legal{background:#fff;padding:8px var(--pad) 46px}
/* pełna szerokość kontenera, żeby trzymać lewą krawędź H1, a długość wiersza ograniczamy na treści */
.legal-inner{max-width:var(--maxw);margin:0 auto}
.legal p,.legal li,.legal-meta{max-width:880px}
.faq-grupa{max-width:920px}
.legal-meta{background:#faf9fd;border:1px solid #ece7f7;border-radius:16px;padding:18px 22px;margin-bottom:30px;font-size:13.5px;line-height:1.7;color:#5a5470}
.legal-meta b{color:var(--indigo)}
.legal h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:23px;color:var(--indigo);margin:34px 0 14px}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:14px;line-height:1.75;color:#5a5470;margin-bottom:12px}
.legal ol,.legal ul{margin:0 0 12px 20px}
.legal li{font-size:14px;line-height:1.75;color:#5a5470;margin-bottom:8px}
.legal a{color:var(--indigo);text-decoration:underline}
.legal-updated{margin-top:34px;padding-top:18px;border-top:1px solid #ece7f7;font-size:13px;color:#8a84a0}
/* FAQ jako lista sekcji, akordeon reużyty ze strony zabiegu (.uf) */
.faq-grupa{margin-bottom:26px}
.faq-grupa > h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:24px;color:var(--indigo);margin-bottom:12px}
@media(max-width:640px){.legal h2{font-size:20px}}

/* ================= SZABLON FRYZJERSKI (mock Figma 250:5) ================= */
/* hero: zdjęcie prostokątne, nie organiczne jak w kosmetyce */
.kat-hero.fry .kat-hero-media{aspect-ratio:1/0.78;max-height:52vh}
.kat-hero.fry .kat-hero-media img{width:100%;height:100%;left:0;top:0;border-radius:20px;box-shadow:0 22px 54px rgba(32,0,102,.14)}
.kat-hero.fry .kat-hero-text h1::after{content:"";display:block;width:66px;height:3px;border-radius:2px;background:var(--indigo);margin:18px 0 0}

/* galeria realizacji z filtrami */
.gal{background:#faf9fd;padding:52px var(--pad)}
.gal-inner{max-width:var(--maxw);margin:0 auto}
.gal h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);text-align:center;margin-bottom:6px}
.gal h2+.gal-line{width:60px;height:3px;border-radius:2px;background:var(--indigo);margin:0 auto 26px}
.gal-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px}
.gal-f{padding:11px 22px;border:1.5px solid #ece7f7;border-radius:10px;background:#fff;font-family:inherit;font-size:13px;color:#4a4560;cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease}
.gal-f:hover{border-color:#cdbff0;color:var(--indigo)}
.gal-f.active{border-color:var(--indigo);color:var(--indigo);font-weight:600}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gal-item{aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--lav)}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gal-item:hover img{transform:scale(1.05)}
.gal-item[hidden]{display:none}
.gal-cta{display:flex;justify-content:center;margin-top:28px}
@media(max-width:1000px){.gal-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gal-grid{grid-template-columns:1fr 1fr;gap:12px}.gal-f{padding:9px 16px;font-size:12px}}

/* polecamy także */
.rec{background:#fff;padding:52px var(--pad) 10px}
.rec-inner{max-width:var(--maxw);margin:0 auto}
.rec h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:28px;color:var(--indigo);text-align:center;margin-bottom:26px}
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rec-card{display:flex;align-items:stretch;gap:0;border:1px solid #ece7f7;border-radius:18px;overflow:hidden;background:#faf9fd;text-decoration:none;color:inherit;transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease}
.rec-card:hover{border-color:#cdbff0;box-shadow:0 14px 34px rgba(32,0,102,.09);transform:translateY(-2px)}
.rec-media{flex:0 0 42%;background:var(--lav)}
.rec-media img{width:100%;height:100%;object-fit:cover;display:block}
.rec-body{flex:1 1 auto;padding:26px 26px;display:flex;flex-direction:column;justify-content:center}
.rec-body b{display:block;font-size:19px;color:var(--indigo);margin-bottom:9px}
.rec-body p{font-size:13.5px;line-height:1.6;color:#6a6480;margin-bottom:16px}
.rec-go{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--indigo)}
.rec-go svg{width:15px;height:15px;transition:transform .18s ease}
.rec-card:hover .rec-go svg{transform:translateX(4px)}
@media(max-width:820px){.rec-grid{grid-template-columns:1fr}}
@media(max-width:520px){.rec-card{flex-direction:column}.rec-media{flex:0 0 auto;height:180px}}

/* jak wygląda wizyta */
.proc{background:#fff;padding:52px var(--pad) 10px}
.proc-inner{max-width:var(--maxw);margin:0 auto}
.proc h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:28px;color:var(--indigo);text-align:center;margin-bottom:26px}
.proc-box{background:#faf9fd;border:1px solid #ece7f7;border-radius:20px;padding:34px 30px;display:flex;align-items:flex-start;gap:8px}
.proc-step{flex:1 1 0;min-width:0;text-align:center;padding:0 8px}
.proc-step svg{width:34px;height:34px;color:var(--indigo);margin-bottom:14px}
.proc-step b{display:block;font-size:14.5px;color:var(--indigo);margin-bottom:8px}
.proc-step p{font-size:12.5px;line-height:1.6;color:#6a6480}
.proc-arrow{flex:0 0 auto;align-self:center;color:#c3b9df;margin-top:-28px}
.proc-arrow svg{width:20px;height:20px}
@media(max-width:900px){.proc-box{flex-wrap:wrap;gap:22px}.proc-step{flex:1 1 40%}.proc-arrow{display:none}}
@media(max-width:560px){.proc-step{flex:1 1 100%}}

/* ================= SZABLON POJEDYNCZEGO ZABIEGU (mock Figma 250:6) ================= */
.usl{background:#fff;padding:26px var(--pad) 40px}
.usl-inner{max-width:var(--maxw);margin:0 auto}   /* bez lewej kolumny, treść na pełną szerokość (decyzja Jakuba 24.07) */

/* lewa kolumna USUNIĘTA 24.07. Style zostawione, gdyby wróciła w innym miejscu. */
.usl-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.us-box{background:#faf9fd;border:1px solid #ece7f7;border-radius:18px;padding:20px 18px}
.us-box h3{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);margin-bottom:14px}
.us-link{display:flex;align-items:center;gap:11px;padding:10px 10px;border-radius:11px;font-size:13.5px;line-height:1.35;color:#4a4560;text-decoration:none;transition:background .16s ease,color .16s ease}
.us-link svg.us-ico{width:18px;height:18px;flex:0 0 auto;color:#a99ecb}
.us-link .us-go{margin-left:auto;width:14px;height:14px;flex:0 0 auto;color:#c3b9df;opacity:0;transition:opacity .16s ease,transform .16s ease}
.us-link:hover{background:#fff;color:var(--indigo)}
.us-link:hover .us-go{opacity:1;transform:translateX(2px)}
.us-link.active{background:#fff;color:var(--indigo);font-weight:600;box-shadow:0 4px 14px rgba(32,0,102,.06)}
.us-link.active svg.us-ico{color:var(--indigo)}
.us-link.active .us-go{opacity:1}
.us-voucher{background:#f3f0fb;border:0}
.us-voucher b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:19px;color:var(--indigo);margin-bottom:7px}
.us-voucher p{font-size:13px;line-height:1.55;color:#5a5470;margin-bottom:14px}
.us-voucher img{width:100%;border-radius:12px;margin-bottom:14px;display:block}
.us-voucher .btn{width:100%;justify-content:center;height:46px}

/* prawa kolumna */
.usl-main{min-width:0}
.usl-main h1{font-family:'DM Serif Display',serif;font-weight:400;font-size:50px;line-height:1.06;color:var(--indigo);margin:18px 0 16px;max-width:820px}
.usl-lead{font-size:16px;line-height:1.7;color:#5a5470;max-width:720px;margin-bottom:28px}

/* hero: foto + panel parametrów */
.uh{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;border:1px solid #ece7f7;border-radius:18px;overflow:hidden;margin-bottom:22px}
.uh-media{background:var(--lav);min-height:280px}
.uh-media img{width:100%;height:100%;object-fit:cover;display:block}
.uh-spec{padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.uh-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px}
/* align-items:center, nie flex-start: kwadracik ikony ma 38 px, a tekst obok
   to dwa wiersze (etykieta plus wartość). Przy flex-start ikona wisiała u góry
   i nie trzymała środka swojego wiersza. Decyzja Jakuba 04.08. */
.uh-item{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid #f2eefa}
.uh-grid .uh-item:nth-last-child(-n+2){border-bottom:0}
.uh-ico{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:var(--lav);color:var(--indigo)}
.uh-ico svg{width:19px;height:19px}
/* selektor musi być zawężony do kolumny tekstowej. Samo ".uh-item span" łapało
   też <span class="uh-ico"> i jako reguła mocniejsza (klasa plus element bije
   samą klasę) nadpisywało jej display:grid na display:block. Efekt: place-items
   przestawało działać i ikona lądowała przy lewej krawędzi kwadratu. */
.uh-item>div span{display:block;font-size:12px;color:#7a7490;margin-bottom:3px}
.uh-item>div b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.3}
.uh-bar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #f2eefa;margin-top:16px;padding-top:16px}
.uh-b{text-align:center;padding:0 8px;border-right:1px solid #f2eefa}
.uh-b:last-child{border-right:0}
.uh-b svg{width:24px;height:24px;color:var(--indigo);margin-bottom:8px}
.uh-b span{display:block;font-size:11.5px;line-height:1.4;color:#5a5470}

/* na czym polega + korzyści */
.uo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:26px;background:#faf9fd;border:1px solid #ece7f7;border-radius:18px;padding:26px 28px;margin-bottom:20px}
.uo h2,.uk h2,.ud h2,.up h2,.ue h2,.uc h2,.uf h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:22px;color:var(--indigo);margin-bottom:6px}
.uo-line{width:44px;height:2px;background:var(--indigo);border-radius:2px;margin-bottom:14px}
.uo p{font-size:13.5px;line-height:1.75;color:#5a5470;margin-bottom:12px}
.uo-media{border-radius:14px;overflow:hidden;background:var(--lav);min-height:180px}
.uo-media img{width:100%;height:100%;object-fit:cover;display:block}
.uk{background:#faf9fd;border:1px solid #ece7f7;border-radius:18px;padding:24px 28px;margin-bottom:20px}
.uk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:14px}
.uk-i{text-align:center;padding:14px 16px;border-right:1px solid #ece7f7}
.uk-i:last-child{border-right:0}
.uk-i svg{width:26px;height:26px;color:var(--indigo);margin-bottom:9px}
.uk-i span{display:block;font-size:12.5px;line-height:1.45;color:#4a4560}

/* dwie kolumny: dla kogo + przebieg */
.u2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.ud,.up,.ue,.uc{background:#fff;border:1px solid #ece7f7;border-radius:18px;padding:26px 28px}
.ud-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin-top:14px}
.ud-list li,.ue-list li{list-style:none;display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:13px;line-height:1.5;color:#4a4560}
.ud-list svg,.ue-list svg{width:16px;height:16px;flex:0 0 auto;color:var(--indigo);margin-top:2px}
.up-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:18px;position:relative}
.up-steps::before{content:"";position:absolute;left:12%;right:12%;top:15px;height:1.5px;background:#ddd4f2}
.up-s{text-align:center;padding:0 6px;position:relative}
.up-n{width:30px;height:30px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--indigo);background:#fff;color:var(--indigo);font-size:13px;font-weight:700;position:relative;z-index:1}
.up-s b{display:block;font-size:12.5px;color:var(--indigo);margin-bottom:6px;line-height:1.35}
.up-s p{font-size:11.5px;line-height:1.55;color:#6a6480}

/* efekty + przeciwwskazania */
.ue-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:12px}
.ue-cols h4{font-size:13px;font-weight:700;color:var(--indigo);margin-bottom:8px}
.ue-note{display:flex;align-items:flex-start;gap:10px;background:#faf9fd;border-radius:12px;padding:12px 14px;margin-top:14px;font-size:12.5px;line-height:1.5;color:#5a5470}
.ue-note svg{width:16px;height:16px;flex:0 0 auto;color:var(--indigo);margin-top:1px}
.uc{position:relative;overflow:hidden}
.uc ul{margin-top:12px;position:relative;z-index:1}
.uc li{list-style:none;position:relative;padding:7px 0 7px 18px;font-size:13px;line-height:1.5;color:#4a4560}
.uc li::before{content:"";position:absolute;left:2px;top:14px;width:5px;height:5px;border-radius:50%;background:var(--indigo)}

/* pasek podsumowania */
.us{background:#faf9fd;border:1px solid #ece7f7;border-radius:18px;padding:24px 28px;margin-bottom:20px}
.us-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.us-avatar{width:74px;height:74px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--indigo)}
.us-avatar svg{width:36px;height:36px}
.us-meta{flex:1 1 auto;min-width:0}
.us-meta b.us-name{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:22px;color:var(--indigo);margin-bottom:12px}
.us-params{display:flex;gap:34px;flex-wrap:wrap}
.us-p span{display:block;font-size:12px;color:#7a7490;margin-bottom:3px}
.us-p b{display:block;font-size:15px;color:var(--ink)}
.us-cta{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
.us-cta .btn{height:48px;min-width:230px;justify-content:center}
.us-foot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid #ece7f7;font-size:12.5px;color:#5a5470}
.us-foot svg{width:16px;height:16px;color:var(--indigo)}

/* FAQ */
.uf{background:#fff;border:1px solid #ece7f7;border-radius:18px;padding:26px 28px;margin-bottom:10px}
.uf-i{border-bottom:1px solid #f2eefa}
.uf-i:last-child{border-bottom:0}
.uf-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;background:none;border:0;font-family:inherit;font-size:14px;font-weight:600;color:var(--indigo);text-align:left;cursor:pointer}
.uf-plus{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;border:1.5px solid #d5cced;color:var(--indigo);transition:transform .2s ease,background .2s ease}
.uf-plus svg{width:12px;height:12px}
.uf-q[aria-expanded="true"] .uf-plus{transform:rotate(45deg);background:var(--lav)}
.uf-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.uf-a p{font-size:13.5px;line-height:1.7;color:#5a5470;padding:0 0 16px}

@media(max-width:900px){
  .uh{grid-template-columns:1fr}.uh-media{min-height:220px}
  .uo{grid-template-columns:1fr}.uo-media{min-height:200px;order:-1}
  .u2{grid-template-columns:1fr}
  .uk-grid{grid-template-columns:1fr 1fr}.uk-i:nth-child(2n){border-right:0}
  .up-steps{grid-template-columns:1fr 1fr;gap:20px 0}.up-steps::before{display:none}
  .us-cta{width:100%}.us-cta .btn{width:100%}
}
@media(max-width:560px){
  .usl-main h1{font-size:32px}
  .uh-grid{grid-template-columns:1fr}.uh-grid .uh-item{border-bottom:1px solid #f2eefa}
  .uh-bar{grid-template-columns:1fr 1fr;gap:14px 0}.uh-b{border-right:0}
  .uk-grid{grid-template-columns:1fr}.uk-i{border-right:0;border-bottom:1px solid #ece7f7}
  .ud-list,.ue-cols{grid-template-columns:1fr}
  .up-steps{grid-template-columns:1fr}
  .us-params{gap:18px}
}

/* ---- Zabieg: CTA na górze i na dole, bez linku do cennika (cena stoi obok) ---- */
.u-cta{display:flex;gap:12px;flex-wrap:wrap}
.u-cta .btn{height:50px;gap:10px}
.u-cta .btn svg{width:17px;height:17px;flex:0 0 auto}
.u-cta-hero{margin-top:20px;padding-top:20px;border-top:1px solid #f2eefa}
.u-cta-hero .btn{flex:1 1 190px;justify-content:center}
.u-cta-stack{flex-direction:column;flex:0 0 auto}
.u-cta-stack .btn{min-width:236px;justify-content:center}
/* mocniejszy kontrast ikon parametrów */
.uh-ico{background:#efeafb}
.uh-ico svg{width:20px;height:20px;stroke-width:1.8}
.uh-bar{gap:0}
.uh-b svg{width:22px;height:22px}
@media(max-width:900px){.u-cta-stack{width:100%;flex-direction:row}.u-cta-stack .btn{flex:1 1 180px;min-width:0}}
@media(max-width:560px){.u-cta,.u-cta-stack{flex-direction:column}.u-cta .btn{width:100%;flex:0 0 auto;height:52px}}

/* ---- Zabieg: miękka poświata przy nagłówku zamiast kompozycji z kwiatami z mocka ---- */
.usl-main{position:relative}
.usl-main::before{
  content:"";position:absolute;right:-40px;top:-30px;width:420px;height:300px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 62% 38%, rgba(205,191,240,.42) 0%, rgba(239,234,251,.30) 42%, rgba(255,255,255,0) 72%);
}
.usl-main>*{position:relative;z-index:1}
.usl-main .kat-crumb{margin-bottom:16px}
@media(max-width:900px){.usl-main::before{width:280px;height:220px;right:-30px}}


/* Skup włosów, lista kryteriów wyceny */
.skup-lista{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:6px 0 26px;padding:0}
.skup-lista li{background:#fff;border:1px solid #ece7f7;border-radius:999px;padding:9px 18px;font-size:14px;color:var(--ink)}
/* ================= KONTAKT: formularz i mapa ================= */
.kf{background:var(--lav);padding:56px var(--pad)}
/* align-items:stretch, nie start. Lewa kolumna ma dopasować się wysokością do
   formularza, a przy `start` obie stały niezależnie i któraś zawsze wisiała. */
.kf-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:38px;align-items:stretch}
.kf-lead h2{margin:0 0 12px}
.kf-lead p{color:#6a6480;font-size:15px;line-height:1.65;margin:0 0 20px}
/* Zdjęcie i trzy kroki wypełniają 336 px, które zostawało obok formularza.
   Kolumna rozciąga się na wysokość wiersza, a zdjęcie na końcu bierze `flex:1`,
   więc dopasowuje się do formularza samo, zamiast na sztywno ustawionych proporcji.
   Sztywne 16/10 zostawiało 196 px pustki, tyle że po drugiej stronie. */
.kf-lead{display:flex;flex-direction:column;min-height:0}
/* flex-basis:0 jest tu kluczowe. Przy `auto` zdjęcie wnosiło własną wysokość do
   kolumny, więc to lewa strona dyktowała wysokość wiersza i nie miała się już
   do czego dopasować. Z bazą zero rośnie dopiero tym, co zostaje po formularzu. */
.kf-foto{margin:26px 0 0;border-radius:18px;overflow:hidden;background:#fff;flex:1 1 0;min-height:120px}
.kf-foto img{width:100%;height:100%;object-fit:cover;display:block}
.kf-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#fff;border:1px solid #ece7f7;border-radius:22px;padding:26px}
.kf-szer{grid-column:1 / -1}
.kf-pole{display:flex;flex-direction:column;gap:6px}
.kf-pole>span{font-size:13px;font-weight:600;color:var(--indigo)}
.kf-opc{font-weight:500;color:#9a93b0}
.kf-pole input,.kf-pole select,.kf-pole textarea{font:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid #ddd5ee;border-radius:12px;padding:12px 14px;transition:border-color .15s ease,box-shadow .15s ease}
.kf-pole textarea{resize:vertical;min-height:120px}
.kf-pole input:focus,.kf-pole select:focus,.kf-pole textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(32,0,102,.12)}
.kf-zle{border-color:#c0392b!important;box-shadow:0 0 0 3px rgba(192,57,43,.12)!important}
.kf-zgoda{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.55;color:#6a6480}
.kf-zgoda input{margin-top:2px;width:18px;height:18px;accent-color:var(--indigo);flex:0 0 auto}
.kf-zgoda a{color:var(--indigo);text-decoration:underline}
.kf-akcje{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.kf-status{margin:0;font-size:13px;line-height:1.5;flex:1 1 220px}
.kf-status-ok{color:var(--indigo)}
.kf-status-zle{color:#c0392b}
/* Jedna kolumna, więc zdjęcie nie ma się już do czego dopasowywać. Wraca do
   stałych proporcji, inaczej zostawało przy min-height i wyglądało jak pasek. */
@media(max-width:960px){
  .kf-inner{grid-template-columns:1fr}
  /* max-height, bo przy pełnej szerokości tabletu samo 16/9 dawało zdjęcie
     na 491 px i sekcja puchła do 1514 px. Kadr przycina object-fit. */
  .kf-foto{flex:0 0 auto;aspect-ratio:16/9;max-height:320px}
}
@media(max-width:560px){.kf-form{grid-template-columns:1fr;padding:20px}}

.km{background:#fff;padding:10px var(--pad) 56px}
.km-inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.km-lead{max-width:640px;margin:10px auto 22px;color:#6a6480;font-size:15px;line-height:1.65}
.km-box{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/7;background:#e9e4f5;display:grid;place-items:center}
.km-box>img{width:100%;height:100%;object-fit:cover;filter:saturate(.5) brightness(.72)}
.km-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:inherit;font-size:15px;font-weight:600;
  color:var(--indigo);background:#fff;border:none;border-radius:999px;padding:14px 26px;cursor:pointer;
  box-shadow:0 10px 26px rgba(32,0,102,.22);transition:transform .18s ease}
.km-btn:hover{transform:translate(-50%,-50%) scale(1.04)}
.km-info{position:absolute;left:0;right:0;bottom:14px;margin:0;font-size:12px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.km-zaladowana{display:block;aspect-ratio:16/7}
.km-zaladowana iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:700px){.km-box{aspect-ratio:4/3}}


/* Strona 404, skróty do najważniejszych miejsc */
.e404-linki{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:var(--maxw);margin:0 auto}
.e404-link{display:block;background:#fff;border:1px solid #ece7f7;border-radius:18px;padding:22px 20px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.e404-link:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(32,0,102,.10)}
.e404-link svg{width:26px;height:26px;color:var(--indigo)}
.e404-link b{display:block;margin:12px 0 5px;font-family:'League Spartan',sans-serif;font-size:17px;color:var(--ink)}
.e404-link span{font-size:13px;line-height:1.55;color:#6a6480}
@media(max-width:900px){.e404-linki{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.e404-linki{grid-template-columns:1fr}}


/* ================= BANER ZGODY NA CIASTECZKA ================= */
.zg{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:#fff;
  border-top:1px solid #ece7f7;box-shadow:0 -14px 40px rgba(32,0,102,.14);
  transform:translateY(105%);transition:transform .26s ease}
.zg-widoczny{transform:translateY(0)}
.zg-inner{max-width:var(--maxw);margin:0 auto;padding:20px var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.zg-txt{flex:1 1 420px;min-width:0}
.zg-txt b{display:block;font-family:'League Spartan',sans-serif;font-size:16px;color:var(--ink);margin-bottom:5px}
.zg-txt p{margin:0;font-size:13.5px;line-height:1.6;color:#6a6480}
.zg-txt a{color:var(--indigo);text-decoration:underline}
.zg-btny{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}
.zg-b{font:inherit;font-size:14px;font-weight:600;border-radius:999px;padding:12px 22px;cursor:pointer;
  transition:transform .15s ease,background .15s ease,color .15s ease}
.zg-b-niezb{background:#fff;color:var(--indigo);border:1.5px solid var(--indigo)}
.zg-b-niezb:hover{background:var(--lav)}
.zg-b-ok{background:var(--indigo);color:#fff;border:1.5px solid var(--indigo)}
.zg-b-ok:hover{background:var(--indigo-hover);transform:translateY(-1px)}
/* Baner zgody na telefonie. Zmierzone 11.08 na 375 px: 276 z 812 px, czyli ponad
   jedna trzecia ekranu, a na telefonie 667 px ponad 40 procent. To okno, ktore ma
   zniknac po jednym kliknieciu, wiec nie ma prawa zjadac pol strony glownej.
   Tekst skrocony w zgoda.js, tutaj schodzi oddech i skala. Przyciski zostaja
   wysokie na 44 px, bo to dolna granica wygodnego dotyku. */
@media(max-width:700px){
  .zg-inner{padding:14px var(--pad);gap:12px}
  .zg-txt b{font-size:14.5px;margin-bottom:3px}
  .zg-txt p{font-size:12.5px;line-height:1.5}
  .zg-btny{width:100%;gap:8px}
  .zg-b{flex:1 1 140px;font-size:13.5px;padding:12px 16px;min-height:44px}
}


/* ---- Mapa ciała: etykiety na mobile zamieniają się w chipy ---- */
@media (max-width:760px){
  .bm-figure .bm-label{display:none}
  .bm-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 4px}
  .bm-chip{font:inherit;font-size:13px;font-weight:500;color:#3a3550;background:#fff;
    border:1.5px solid #e6e0f5;border-radius:999px;padding:8px 15px;cursor:pointer}
  .bm-chip.active{background:#efeafb;border-color:var(--indigo);color:var(--indigo);font-weight:600}
}


/* ================= CENNIK: sidebar plus akordeony (układ z mockupu 07) ================= */
.cn{background:#fff;padding:16px var(--pad) 40px}
.cn-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:288px minmax(0,1fr);gap:26px;align-items:start}

.cn-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.cn-box{background:#faf9fd;border:1px solid #ece7f7;border-radius:20px;padding:22px}
.cn-box h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:21px;color:var(--indigo);margin:0 0 14px}
.cn-box-lista{max-height:min(58vh,560px);overflow:auto;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 26px),transparent)}
.cn-box-lista::-webkit-scrollbar{width:6px}
.cn-box-lista::-webkit-scrollbar-thumb{background:#ddd5ee;border-radius:6px}
.cn-cat{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;color:#4a4560;
  font-size:13.5px;text-decoration:none;transition:background .15s ease,color .15s ease}
.cn-cat span{flex:1 1 auto;min-width:0}
.cn-cat .cn-ico{width:20px;height:20px;flex:0 0 auto;color:var(--indigo)}
.cn-cat .cn-chev{width:14px;height:14px;flex:0 0 auto;color:#c3b9df}
.cn-cat:hover{background:#efeafb;color:var(--indigo)}
.cn-cat.cn-aktywna{background:#efeafb;color:var(--indigo);font-weight:600}

.cn-box-voucher{display:block;text-decoration:none;color:inherit;overflow:hidden;padding:0}
.cn-box-voucher img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.cn-box-voucher b{display:block;font-family:'League Spartan',sans-serif;font-size:17px;color:var(--ink);margin:18px 22px 6px}
.cn-box-voucher p{margin:0 22px 16px;font-size:13px;line-height:1.55;color:#6a6480}
.cn-box-voucher .btn{margin:0 22px 22px;height:44px;font-size:12.5px}
.cn-box-pytania b{display:block;font-family:'League Spartan',sans-serif;font-size:17px;color:var(--ink);margin-bottom:6px}
.cn-box-pytania p{margin:0 0 12px;font-size:13px;line-height:1.55;color:#6a6480}
.cn-box-pytania a{display:block;font-size:13.5px;font-weight:600;color:var(--indigo);text-decoration:none;padding:3px 0}
.cn-box-pytania a:hover{text-decoration:underline}

.cn-main{display:flex;flex-direction:column;gap:14px}
.cn-grupa{border:1px solid #ece7f7;border-radius:20px;background:#fff;overflow:hidden;scroll-margin-top:100px}
.cn-head{width:100%;display:flex;align-items:center;gap:16px;padding:20px 24px;background:#fff;border:none;
  font:inherit;text-align:left;cursor:pointer;transition:background .15s ease}
.cn-head:hover{background:#faf9fd}
.cn-hico{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;background:#efeafb;border-radius:12px}
.cn-hico .cn-ico{width:22px;height:22px;color:var(--indigo)}
.cn-htxt{flex:1 1 auto;min-width:0}
.cn-htxt b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:21px;color:var(--ink);line-height:1.2}
.cn-htxt span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:#6a6480}
.cn-licznik{flex:0 0 auto;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#8a84a0;background:#f6f4fc;border-radius:20px;padding:5px 11px;white-space:nowrap}
.cn-plus{position:relative;width:30px;height:30px;flex:0 0 auto;border:1.5px solid #ddd5ee;border-radius:50%}
.cn-plus::before,.cn-plus::after{content:"";position:absolute;top:50%;left:50%;background:var(--indigo);
  transform:translate(-50%,-50%);transition:opacity .18s ease,transform .18s ease}
.cn-plus::before{width:12px;height:1.8px}
.cn-plus::after{width:1.8px;height:12px}
.cn-open .cn-plus{border-color:var(--indigo);background:#efeafb}
.cn-open .cn-plus::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.cn-body{display:none;padding:0 24px 24px}
.cn-open .cn-body{display:block}
.cn-open .cn-head{background:#faf9fd}
.cn-uwaga{display:flex;gap:8px;margin:14px 0 0;font-size:12.5px;line-height:1.55;color:#8a83a0}

.cn-dol{background:var(--lav);padding:44px var(--pad) 56px}
.cn-dol-inner{max-width:var(--maxw);margin:0 auto}
.cn-umow{background:#fff;border:1px solid #ece7f7;border-radius:22px;padding:28px 32px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.cn-umow h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:26px;color:var(--indigo);margin:0 0 6px}
.cn-umow p{margin:0;font-size:14.5px;color:#6a6480}
.cn-umow-btny{display:flex;flex-wrap:wrap;gap:12px}
.cn-zaufanie{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.cn-z{display:flex;align-items:flex-start;gap:13px;background:#fff;border:1px solid #ece7f7;border-radius:16px;padding:18px 20px}
.cn-zico{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;background:#efeafb;border-radius:11px}
.cn-zico .cn-ico{width:20px;height:20px;color:var(--indigo)}
.cn-z b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.cn-z span{font-size:12.5px;line-height:1.5;color:#6a6480}

@media(max-width:1080px){
  .cn-inner{grid-template-columns:1fr}
  .cn-side{position:static;flex-direction:row;flex-wrap:wrap}
  .cn-box-lista{flex:1 1 100%;max-height:none}
  .cn-box-lista .cn-cat{display:inline-flex;width:auto;border:1px solid #ece7f7;margin:0 6px 6px 0}
  .cn-box-voucher,.cn-box-pytania{flex:1 1 280px}
  .cn-zaufanie{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .cn-head{padding:16px 18px;gap:12px}
  .cn-hico{width:38px;height:38px}
  .cn-htxt b{font-size:18px}
  .cn-licznik{display:none}
  .cn-body{padding:0 18px 20px}
  .cn-zaufanie{grid-template-columns:1fr}
}


/* ---- Kontakt: pasek pięciu kafli pod hero (mockup 15) ---- */
.kp{background:#fff;padding:6px var(--pad) 26px}
.kp-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);
  background:#faf9fd;border:1px solid #ece7f7;border-radius:20px;overflow:hidden}
.kp-i{display:flex;align-items:flex-start;gap:12px;padding:20px 22px;color:inherit;text-decoration:none;
  border-right:1px solid #ece7f7;transition:background .15s ease}
.kp-i:last-child{border-right:0}
a.kp-i:hover{background:#efeafb}
.kp-ico{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;background:#efeafb;border-radius:11px}
.kp-ico svg{width:19px;height:19px;color:var(--indigo)}
.kp-txt{min-width:0}
.kp-txt b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:3px}
.kp-txt span{font-size:12.5px;line-height:1.5;color:#6a6480;overflow-wrap:break-word}
@media(max-width:1100px){.kp-inner{grid-template-columns:repeat(3,1fr)}
  .kp-i:nth-child(3n){border-right:0}.kp-i{border-bottom:1px solid #ece7f7}}
@media(max-width:720px){.kp-inner{grid-template-columns:1fr 1fr}
  .kp-i:nth-child(3n){border-right:1px solid #ece7f7}.kp-i:nth-child(2n){border-right:0}}
@media(max-width:460px){.kp-inner{grid-template-columns:1fr}.kp-i{border-right:0}}

.kf-bezp{display:flex;align-items:center;gap:9px;margin:2px 0 0;font-size:12.5px;color:#8a83a0}
.kf-bezp svg{width:16px;height:16px;flex:0 0 auto;color:var(--indigo)}


/* Konfigurator voucherów */
/* ====== KONFIGURATOR VOUCHERÓW (kup-voucher.html) ====== */
.kv{background:#fff;padding:8px var(--pad) 72px}
.kv-inner{max-width:1240px;margin:0 auto}
.kv-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:32px;align-items:start}
.kv-krok{background:#fff;border:1px solid #ece7f7;border-radius:20px;padding:26px 28px;margin-bottom:18px}
.kv-krok-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.kv-num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--indigo);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:700;font-family:'League Spartan',sans-serif}
.kv-krok-head h2{font-family:'DM Serif Display',serif;font-size:21px;font-weight:400;color:var(--indigo)}
.kv-krok-head span{display:block;font-family:'Montserrat',sans-serif;font-size:13px;color:#6b6b78;margin-top:2px}
.kv-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kv-tab{border:1.6px solid #ece7f7;background:#fff;border-radius:14px;padding:18px 16px;cursor:pointer;
  text-align:left;font-family:inherit;transition:border-color .18s ease,background .18s ease}
.kv-tab:hover{border-color:var(--blue)}
.kv-tab[aria-pressed="true"]{border-color:var(--indigo);background:var(--lav)}
.kv-tab svg{width:22px;height:22px;color:var(--indigo);margin-bottom:8px}
.kv-tab b{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:3px}
.kv-tab small{font-size:12.5px;color:#6b6b78;line-height:1.4}
.kv-pole{margin-bottom:16px}
.kv-pole:last-child{margin-bottom:0}
.kv-pole label{display:block;font-size:12.5px;font-weight:600;color:#4a4a55;margin-bottom:7px}
.kv-input,.kv-select,.kv-textarea{width:100%;border:1.5px solid #ece7f7;border-radius:12px;background:#fff;
  padding:13px 15px;font-family:inherit;font-size:14.5px;color:var(--ink);transition:border-color .18s ease}
.kv-input:focus,.kv-select:focus,.kv-textarea:focus{outline:none;border-color:var(--indigo)}
.kv-textarea{resize:vertical;min-height:84px;line-height:1.55}
.kv-select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23200066' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}
.kv-licznik{font-size:11.5px;color:#8a8a96;text-align:right;margin-top:6px}
.kv-hint{font-size:11.5px;color:#8a8a96;margin-top:6px}
.kv-hint.blad{color:#b3261e;font-weight:600}
.kv-input.blad{border-color:#b3261e}
.kv-kwoty{display:flex;flex-wrap:wrap;gap:10px}
.kv-kwota{border:1.6px solid #ece7f7;background:#fff;border-radius:12px;padding:12px 20px;cursor:pointer;
  font-family:'League Spartan',sans-serif;font-size:18px;font-weight:700;color:var(--indigo);
  transition:border-color .18s,background .18s}
.kv-kwota:hover{border-color:var(--blue)}
.kv-kwota[aria-pressed="true"]{border-color:var(--indigo);background:var(--indigo);color:#fff}
.kv-radio{display:flex;gap:14px;border:1.6px solid #ece7f7;border-radius:14px;padding:16px 18px;cursor:pointer;
  align-items:flex-start;margin-bottom:12px;transition:border-color .18s,background .18s}
.kv-radio:last-child{margin-bottom:0}
.kv-radio:hover{border-color:var(--blue)}
.kv-radio.wybrany{border-color:var(--indigo);background:var(--lav)}
.kv-radio input{margin-top:3px;accent-color:var(--indigo);width:17px;height:17px;flex:0 0 auto}
.kv-radio b{display:block;font-size:14px;margin-bottom:3px}
.kv-radio small{font-size:12.5px;color:#6b6b78;line-height:1.45}
.kv-dwie{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kv-box{position:sticky;top:24px}
.kv-sum{background:#fff;border:1px solid #ece7f7;border-radius:20px;padding:26px 26px 24px}
.kv-sum h2{font-family:'DM Serif Display',serif;font-size:20px;font-weight:400;color:var(--indigo);margin-bottom:4px}
.kv-sum-lead{font-size:12.5px;color:#6b6b78;margin-bottom:20px}
.kv-sum-row{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;padding:10px 0;color:#6b6b78;
  border-bottom:1px solid #ece7f7}
.kv-sum-row span:last-child{font-weight:600;color:var(--ink);text-align:right}
.kv-sum-row.pusty span:last-child{font-weight:400;color:#a8a8b4;font-style:italic}
.kv-sum-row.suma{border-bottom:none;padding-top:18px;font-size:15px;color:var(--ink);align-items:baseline}
.kv-sum-row.suma span:last-child{font-family:'League Spartan',sans-serif;font-size:30px;font-weight:800;color:var(--indigo)}
.kv-koszyk{width:100%;height:56px;border:none;border-radius:13px;background:var(--indigo);color:#fff;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .2s ease;margin-top:20px}
.kv-koszyk:hover{background:var(--indigo-hover)}
.kv-koszyk:disabled{background:#c9c4d8;cursor:not-allowed}
.kv-koszyk svg{width:18px;height:18px}
.kv-platnosci{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;
  font-size:11.5px;color:#8a8a96;text-align:center;line-height:1.5}
.kv-platnosci svg{width:14px;height:14px;flex:0 0 auto}
.kv-zaufanie{margin-top:16px;background:var(--lav);border-radius:18px;padding:18px 22px}
.kv-z-item{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:#4a4a55;line-height:1.5;margin-bottom:12px}
.kv-z-item:last-child{margin-bottom:0}
.kv-z-item svg{width:17px;height:17px;color:var(--indigo);flex:0 0 auto;margin-top:1px}
@media(max-width:1040px){.kv-grid{grid-template-columns:1fr}.kv-box{position:static}}
@media(max-width:560px){
  .kv{padding-left:18px;padding-right:18px}
  .kv-krok,.kv-sum{padding:22px 18px;border-radius:16px}
  .kv-tabs,.kv-dwie{grid-template-columns:1fr}
}

/* >>> vouchery */
/* Vouchery, galeria kadrów i okazje */
.vg{background:#fff;padding:10px var(--pad) 56px}
.vg-inner{max-width:var(--maxw);margin:0 auto}
.vg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.vg-grid figure{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#f3f0fb}
.vg-grid img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.vg-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vg-grid{grid-template-columns:1fr}}
/* Okazje, na co voucher się nadaje. Sekcja bez tła (decyzja Jakuba 04.08),
   kolor niosą same kafle: lawendowe wypełnienie i indygowa kreska u góry. */
.vok{background:#fff;padding:52px var(--pad)}
.vok-inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.vok-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.vok-i{background:var(--lav);border:1px solid #e2daf5;border-radius:18px;padding:26px 24px;text-align:left;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.vok-i::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--indigo)}
.vok-i:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(32,0,102,.10)}
.vok-i b{display:block;font-family:'DM Serif Display',serif;font-size:19px;font-weight:400;color:var(--indigo);margin:6px 0 7px}
.vok-i span{font-size:13.5px;color:#4a4a55;line-height:1.55}
@media(max-width:900px){.vok-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vok-grid{grid-template-columns:1fr}}
/* <<< vouchery */


/* ============ KONFIGURATOR TERMINU WARSZTATU (warsztaty.html) ============ */
.wk{padding:70px 0;background:var(--lav)}
.wk-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 420px;gap:44px;align-items:start}
.wk-eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin-bottom:10px}
.wk-lead h2{font-family:'DM Serif Display',serif;font-size:38px;line-height:1.15;color:var(--ink);margin:0 0 14px}
.wk-lead p{font-size:16px;line-height:1.65;color:#5c5670;margin:0 0 22px;max-width:56ch}
.wk-plusy{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.wk-plusy li{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--ink)}
.wk-plusy svg{width:22px;height:22px;flex:0 0 auto;color:var(--indigo)}
.wk-panel{background:#fff;border:1px solid #e6e0f5;border-radius:20px;padding:24px;box-shadow:0 18px 44px rgba(32,0,102,.07)}
.wk-tryb{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#f4f1fb;border-radius:12px;padding:5px;margin-bottom:20px}
.wk-t{font:inherit;font-size:14px;font-weight:600;color:#5c5670;background:none;border:0;border-radius:9px;padding:10px 8px;cursor:pointer;transition:background .18s,color .18s}
.wk-t.active{background:#fff;color:var(--indigo);box-shadow:0 2px 8px rgba(32,0,102,.09)}
.wk-box.wk-hide{display:none}
.wk-pole{display:block;margin-bottom:14px}
.wk-pole span{display:block;font-size:13px;font-weight:600;color:#5c5670;margin-bottom:7px}
.wk-pole select{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid #ded7f0;border-radius:11px;padding:13px 14px;cursor:pointer}
.wk-pole select:focus-visible{outline:2px solid var(--indigo);outline-offset:1px}
.wk-miejsca{font-size:13.5px;color:#5c5670;margin-bottom:18px}
.wk-malo{color:#b3560c;font-weight:600}
.wk-suma{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid #ece7f7;padding-top:16px;margin-bottom:16px}
.wk-suma span{font-size:14px;color:#5c5670}
.wk-suma b{font-family:'League Spartan',sans-serif;font-size:28px;color:var(--indigo)}
.wk-cta{width:100%;justify-content:center;margin-bottom:10px}
.wk-mala{font-size:12.5px;line-height:1.5;color:#7b7590;margin:6px 0 0}
.wk-info{font-size:14.5px;line-height:1.6;color:#5c5670;margin:0 0 4px}
@media(max-width:900px){
  .wk{padding:52px 0}
  .wk-inner{grid-template-columns:1fr;gap:28px}
  .wk-lead h2{font-size:31px}
}

.kv-doplata{display:inline-block;margin-top:6px;font-style:normal;font-size:12.5px;font-weight:600;color:var(--indigo);background:#efeafb;border-radius:20px;padding:3px 10px}


/* ============ GALERIA I OPINIE NA PODSTRONACH WARSZTATÓW ============ */
.wg{padding:66px var(--pad);background:#fff}
.wg-inner{max-width:var(--maxw);margin:0 auto}
.wg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.wg-i{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--lav)}
.wg-i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.wg-i:hover img{transform:scale(1.04)}
.wo{padding:66px var(--pad);background:var(--lav)}
.wo-inner{max-width:var(--maxw);margin:0 auto}
.wo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.wo-c{margin:0;background:#fff;border:1px solid #e6e0f5;border-radius:18px;padding:22px 24px}
.wo-star{display:flex;gap:3px;color:#eab308;margin-bottom:12px}
.wo-star svg{width:16px;height:16px;color:#eab308}
.wo-c blockquote{margin:0 0 14px;font-size:15px;line-height:1.6;color:#3a3550}
.wo-c figcaption{font-size:13px;font-weight:600;color:var(--indigo)}
@media(max-width:900px){
  .wg-grid,.wo-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .wg-grid,.wo-grid{grid-template-columns:1fr}
  .wg,.wo{padding:48px var(--pad)}
}

/* Ustawienia cookies to przycisk otwierający baner, ale ma wyglądać jak reszta stopki. */
.zg-ustawienia{font:inherit;background:none;border:0;padding:0;color:inherit;cursor:pointer;text-decoration:none}
.zg-ustawienia:hover{text-decoration:underline}


/* ============================================================
   RYTM PIONOWY SEKCJI
   ============================================================
   Uwaga Jakuba z 05.08: odstępy między sekcjami wyglądały na za duże.
   Pomiar na dziesięciu podstronach potwierdził coś gorszego niż "za duże":
   przerwy wynosiły od 14 do 152 px i nie układały się w żadną skalę, bo każda
   sekcja miała padding wpisany z ręki (8, 10, 16, 18, 20, 26, 34, 40, 48, 52,
   56, 60, 64, 66, 70, 72). Stąd wrażenie, że strona "skacze".

   Teraz są trzy wartości i nic poza nimi:
     --sek-y     zwykła sekcja na białym tle, przerwa między sąsiadami 80 px
     --sek-y-l   sekcja z własnym tłem, potrzebuje oddechu, żeby kolor nie dusił treści
     --sek-y-s   sekcja doklejona do poprzedniej, czytana jako jej ciąg dalszy

   Blok stoi na końcu pliku celowo. Selektory mają tę samą specyficzność co
   pierwotne reguły, więc wygrywają kolejnością i nie trzeba nigdzie !important.
   Poziomy padding zostaje bez zmian, ruszamy wyłącznie pion. */

:root{
  --sek-y: 40px;
  --sek-y-l: 56px;
  --sek-y-s: 24px;
}

/* sekcje samodzielne, białe */
.gal, .proc, .rec, .wg, .usl, .on-space, .on-team, .on-why, .zab, .kat-help,
.kt, .cn, .kv, .km, .raty, .cnb, .kat-discover, .on-cta,
.combo, .os, .whyus, .reviews, .vouchers,
.kp, .kh, .vok, .vg, .cn-dol{
  padding-top: var(--sek-y);
  padding-bottom: var(--sek-y);
}

/* sekcje z własnym tłem, czyli lawendowe i szare pasy */
.kf, .wo, .wk, .on-know{
  padding-top: var(--sek-y-l);
  padding-bottom: var(--sek-y-l);
}

/* Hero na home schodzi bez odstępu w sekcję COMBO, bo pasek informacyjny
   pod hero jest wizualnie jego częścią. Ruszamy tylko górę. */
.hero{ padding-top: var(--sek-y); padding-bottom: 0; }

/* hero podstrony i pasek pod nim czytają się jako jedna całość */
.kat-hero{
  padding-top: var(--sek-y-s);
  padding-bottom: var(--sek-y-s);
}

/* Bloki zabiegów idą jeden za drugim, więc pełny odstęp po obu stronach
   robiłby między nimi 80 px pustki. Sąsiadujące dostają połowę. */
.zab + .zab{ padding-top: var(--sek-y-s); }
.zab:has(+ .zab){ padding-bottom: var(--sek-y-s); }

/* Akordeony cennika stykają się celowo, to jedna lista, nie osobne sekcje. */
.cn-grupa{ padding-top: 0; padding-bottom: 0; }

@media(max-width:900px){
  :root{
    --sek-y: 32px;
    --sek-y-l: 40px;
    --sek-y-s: 20px;
  }
}


/* Pozycja cennika prowadzi do rezerwacji tej usługi w systemie rezerwacji, ale ma wyglądać
   jak zwykły tekst. Decyzja Jakuba 05.08: to ma być drobny udogodnienie dla tych,
   którzy je odkryją, a nie tabela świecąca niebieskimi linkami. Kolor akcentowy
   i podkreślenie pojawiają się dopiero przy najechaniu. */
.po-name a{
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.po-name a:hover,
.po-name a:focus-visible{
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.po-row:hover .po-name a{ color: var(--indigo); }


/* ============================================================
   MOBILE FIXES 2026-08  (audyt 375x812)

   Blok MUSI stać przed znacznikiem build_copy na końcu pliku, bo
   build_copy.py::dopisz_css() wycina wszystko od tego znacznika
   do końca pliku i dokleja swoją wersję. Cokolwiek za znacznikiem
   znika przy pierwszym przebiegu generatora.

   Desktop 1440 jest zaakceptowany i zamrożony, więc wszystkie
   reguły siedzą w @media max-width. Bez shorthandu "padding:"
   na sekcjach z bloku RYTM PIONOWY wyżej, inaczej rozjedzie się
   rytm pionowy, który wygrywa samą kolejnością w pliku.
   ============================================================ */

/* ---- 1. Gutter boczny -------------------------------------
   --pad:44px było zaprojektowane pod desktop i szło żywcem na
   telefon: przy 375 px zostawało 287 px treści, czyli 76,5 %
   ekranu. Clamp schodzi płynnie do ~17 px przy 375 px (treść
   ~91 %) i wraca do 44 px powyżej 900 px, więc desktop stoi.
   Zmienna zasila sekcje, header, mega menu i hero naraz. */
@media(max-width:900px){
  :root{ --pad: clamp(16px, 4.6vw, 44px); }
}

/* ---- 2. Typografia tekstu czytanego ------------------------
   Akapity schodziły do 12,5 px przy interlinii 1,2. To rozmiar
   pod desktopową kartę w siatce, nie pod czytanie z ręki.
   Podnosimy tylko tekst, który się czyta. Etykiety, badge,
   liczniki i eyebrow zostają małe, bo to elementy interfejsu. */
@media(max-width:560px){
  /* lead pod nagłówkiem sekcji */
  .kh-lead, .po-lead, .dc-lead, .kd-lead, .mp-head p,
  .bm-intro p, .rv-head p, .vc-body p, .wk-info,
  .kat-discover>.kat-discover-inner>p.kd-lead{
    font-size: 16px; line-height: 1.6;
  }
  /* tekst ciągły: strony prawne, opisy zabiegów, FAQ */
  .legal p, .legal li, .uo p, .uf-a p, .us-voucher p,
  .uc li, .ud-list li, .ue-list li, .skup-lista li,
  .raty-text p, .zg-txt p, .pf-body p{
    font-size: 16px; line-height: 1.65;
  }
  /* opisy w kartach: siatka na telefonie i tak jest jednokolumnowa,
     więc karta ma miejsce na czytelny stopień */
  .kh p, .kh-cdesc, .on-tb p, .on-wi p, .on-fcard p,
  .on-scard-body p, .proc-step p, .rt-krok p, .rt-box p,
  .bm-card p, .bm-perso p, .os-cbody p, .rv-text,
  .combo-card p, .cn-box-pytania p, .cn-box-voucher p,
  .dc-item p, .zc p, .wu-item p, .rec-body p, .kc-desc,
  .kt-line small, .f-desc, .hi-txt, .hi-txt a{
    font-size: 15px; line-height: 1.6;
  }
  /* podłoga dla drobnicy opisowej, żeby nic nie zostało na 11-12 px */
  .zab-more-link, .kh a.kh-link, .bm-more, .us-foot,
  .cnb-go, .rec-go, .kc-go, .footer-credit, .f-col a{
    font-size: 13.5px;
  }
  /* pasek kroków na stronach zabiegów schodził do 11,5 px, a tytuł kroku
     był tylko o 1 px większy od opisu, więc pasek czytał się jak jeden blok */
  .up-s b{ font-size: 15.5px; margin-bottom: 5px; }
  .up-s p{ font-size: 13px; line-height: 1.5; }
}

/* ---- 2b. Siatki, które nie schodzą poniżej swojej treści -----
   grid-template-columns:1fr to w praktyce minmax(auto,1fr), a auto
   nie schodzi poniżej min-content. Wiersz "Poniedziałek 9:00-19:00"
   rozpychał wtedy kolumnę do 378 px w kontenerze 341 px i prawa
   krawędź karty szła pod obcięcie. minmax(0,1fr) zdejmuje tę podłogę. */
@media(max-width:900px){
  .kt-inner{ grid-template-columns: minmax(0, 1fr); }
  .kt-row{ flex-wrap: wrap; row-gap: 2px; }
}

/* ---- 3. Nagłówki -------------------------------------------
   .hero h1 dziedziczyło line-height .94 zaprojektowane pod 80 px
   display. Przy 42 px polskie ogonki z dolnego wiersza wchodziły
   w górny. Nagłówki kategorii przy 46 px nie mieściły długich słów
   w kolumnie i były przycinane z prawej. */
@media(max-width:560px){
  .hero h1{ font-size: clamp(32px, 9.6vw, 42px); line-height: 1.06; }
  .kat-hero-text h1{ font-size: clamp(30px, 8.8vw, 40px); line-height: 1.08; }
  .on-hero .on-hero-text h1{ font-size: clamp(30px, 8.8vw, 38px); line-height: 1.12; }
  .usl-main h1{ line-height: 1.12; }
  h1, h2, h3{ overflow-wrap: break-word; }

  /* największe H2 nie mają wersji mobilnej i wchodzą na telefon
     w rozmiarze desktopowym */
  .on-cta-text h2{ font-size: 29px; line-height: 1.15; }
  .combo-card h2, .kat-discover h2, .zab-text h2, .po h2,
  .rt h2, .dc h2, .gal h2, .bm-intro h2{
    font-size: 26px; line-height: 1.18;
  }
}

/* ---- 4. Pola dotyku ----------------------------------------
   Liczy się to, co stoi samodzielnie: przyciski, ikony, linki
   kart. Linki wplecione w zdanie zostają jak są, powiększanie ich
   rozerwałoby akapit, a WCAG 2.5.8 je z tego wyjmuje.
   Gdzie 44 px zmieniłoby układ, powiększamy samo pole trafienia
   paddingiem skasowanym ujemnym marginesem. */
@media(max-width:900px){
  .promo-close{ width: 44px; height: 44px; right: 6px; }
  .zg-ustawienia{ padding: 14px 0; margin: -14px 0; display: inline-block; }
  /* Ten sam zabieg co .zg-ustawienia obok, ale zabrakło go tu przy
     poprzednim przebiegu: trzy linki paska prawnego (Polityka prywatności,
     FAQ, Regulamin salonu) zostały z polem trafienia 16 px, podczas gdy
     przycisk cookies tuż obok już miał 14 px paddingu. Wykryte audytem 11.08. */
  .footer-bottom a{ padding: 14px 0; margin: -14px 0; display: inline-block; }
  .crumb-home{ padding: 10px 0; margin: -10px 0; display: inline-flex; align-items: center; }
  /* Linki nawigacyjne w stopce miały 26 px wysokości, czyli ledwo ponad
     minimum WCAG i za ciasno pod kciuk. 38 px kosztuje 156 px na stronie,
     która ma blisko 10 000. */
  .f-col a{ padding-top: 11px; padding-bottom: 11px; }
  /* Kropki karuzeli mają 9 px i inaczej się ich nie trafia. Pole trafienia
     rozszerza niewidoczna nakładka, więc wygląd kropek zostaje bez zmian,
     a odstęp rośnie akurat tyle, żeby sąsiednie pola się nie nachodziły. */
  .rv-dots{ gap: 16px; }
  .rv-dots button{ position: relative; }
  .rv-dots button::after{ content: ""; position: absolute; inset: -14px -8px; }
  .gal-f{ min-height: 44px; }
  .cn-cat, .on-tnav, .os-tab{ min-height: 44px; }
  .po-name a{ display: inline-block; padding: 11px 0; margin: -11px 0; }
  .po-row{ min-height: 44px; }
  .kh a.kh-link, .zab-more-link, .bm-more, .cnb-go, .rec-go{
    display: inline-block; padding: 12px 0; margin: -12px 0;
  }
  /* Telefon i mail dostają pole trafienia pionowym paddingiem skasowanym
     ujemnym marginesem, a nie zmianą display. Wcześniejsza wersja z
     inline-flex nadpisywała display:block tam, gdzie układ go wymagał,
     i skleiła telefon z mailem w jeden ciąg w bocznej karcie cennika.
     Ta wersja nie rusza układu nigdzie, a pole trafienia rośnie do 44 px. */
  a[href^="tel:"], a[href^="mailto:"]{
    padding-top: 12px; padding-bottom: 12px;
    margin-top: -12px; margin-bottom: -12px;
  }
}

/* ---- 5. Drobiazgi ------------------------------------------ */
@media(max-width:900px){
  /* Dekoracyjne kule mają celowo ujemny offset i na desktopie chowa je
     44 px gutteru. Po zwężeniu gutteru wychodziły poza ekran i ścinał je
     overflow-x:hidden. Na telefonie trzymamy je w kadrze. */
  .kat-bubble.b2{ right: 0; }
  .raty-bubble.r1{ right: -6px; bottom: -30px; }
  /* r2 przy 90 px wypadała pośrodku górnej krawędzi karty, czyli w najbardziej
     przypadkowym miejscu. Przy prawym rogu tworzy parę z r1 z rogu dolnego. */
  .raty-bubble.r2{ right: 28px; }

  /* Wariant hero .fry (siedem stron fryzjerskich) ma zdjęcie prostokątne na
     pełną szerokość kolumny, więc kule leżą pod nim. Po zwężeniu gutteru
     z całej kompozycji zostawał 10 px skrawek przyklejony do lewej krawędzi,
     czytany jak błąd renderowania. Miejsca na wysunięcie ich poza obrys
     zdjęcia przy 375 px już nie ma. */
  .kat-hero.fry .kat-bubble{ display: none; }

  .kat-crumb .crumb-sep{ color: #b3abc9; }
}
@media(max-width:560px){
  /* pasek promocyjny miał 44 px wcięcia z obu stron pod jeden
     przycisk stojący tylko z prawej */
  .promobar{ padding: 0 52px 0 16px; }
  /* poziome listy zakładek nie dawały znać, że jest co przewijać */
  .os-tabs{
    -webkit-mask-image: linear-gradient(to right, #000 93%, transparent);
    mask-image: linear-gradient(to right, #000 93%, transparent);
    padding-right: 28px;
  }
}

/* ---- 6. Wąskie telefony, 320-380 px -------------------------
   Karty z ikoną obok tekstu mają własną podłogę min-content:
   ikona plus najdłuższe słowo nie zmieszczą się w 288 px, więc
   karta rozpycha się poza ekran. Zdejmujemy wcięcie karty,
   pozwalamy łamać długie słowa i zwijać pary statystyk. */
@media(max-width:380px){
  .kh{ padding-left: 16px; padding-right: 16px; }
  .kh-cbody, .kt-line span, .kt-line b, .kt-line small,
  .kh b, .kh p{ min-width: 0; overflow-wrap: anywhere; }
  .kt-line{ gap: 12px; }
  /* ta sama podłoga min-content co w .kt-inner: przy 320 px kolumna nie
     schodziła poniżej swojej treści i cała sekcja voucherów wystawała
     o 20 px poza ekran */
  .vouchers-inner{ grid-template-columns: minmax(0, 1fr); }
  .vc-side{ padding-left: 20px; padding-right: 20px; }
  /* hero zabiegu ma tę samą podłogę min-content w siatce */
  .uh{ grid-template-columns: minmax(0, 1fr); }
}

/* ---- 7. Wcięcie kart z tłem --------------------------------
   Zwężenie gutteru sekcji nic nie daje, jeśli karta w środku trzyma
   desktopowe wcięcie. Na stronach zabiegów karty .u* mają 28 px z obu
   stron, więc łam tekstu wracał do 285 px, czyli dokładnie tyle, ile
   był przed całą poprawką. Schodzimy do 20 px: karta dalej czyta się
   jak karta, a tekst dostaje 300 px.
   Tylko padding-left/right, bo część z tych klas to sekcje sterowane
   blokiem RYTM PIONOWY i shorthand skasowałby im odstęp pionowy. */
@media(max-width:560px){
  .uf, .uo, .uk, .ud, .up, .ue, .uc, .us,
  .proc-box, .rt-box, .pf-card,
  .dc-item, .on-fcard, .vok-i{
    padding-left: 20px; padding-right: 20px;
  }
}

/* -- W2: strona główna --------------------------------------- */

@media(max-width:900px){
  /* Kafel kategorii dziedziczył width:100% z pionowego układu desktopowego,
     więc poziomy scroller pokazywał dokładnie jeden kafel i nie dawał znać,
     że są następne. 86 % zostawia widoczny róg kolejnej kategorii. */
  .os-tab{ width: 86%; scroll-snap-align: start; }
  /* Bez snapa kafel zatrzymuje się w losowym miejscu i podgląd raz jest,
     raz go nie ma. */
  .os-tabs{ scroll-snap-type: x proximity; }

  /* Ikona siedziała w spanie inline: pudełko miało 19 px przy SVG 46 px,
     więc odstęp nad tytułem był większy niż zadany i inny w każdej pozycji. */
  .wu-ico{ display: block; line-height: 0; margin-bottom: 16px; }
  .wu-ico svg{ width: 40px; height: 40px; }

}

@media(max-width:560px){
  /* Pasek promocyjny zawijał się flexem na trzy rzędy i strzałka lądowała
     sama w ostatnim, wyśrodkowana, jak zgubiony element. Płynące zdanie
     schodzi z 92 px na 52 px, dzięki czemu główne CTA hero wchodzi
     w całości nad zgięcie. */
  .promo-msg{ display: block; text-align: left; }
  .promo-msg svg{ vertical-align: -4px; margin-right: 6px; }
  .promo-msg .promo-arrow{ margin-left: 6px; margin-right: 0; }

  /* min-height:2.5em wyrównuje cztery kolumny na desktopie. W jednej kolumnie
     zostawiało pustkę pod jednowierszowym tytułem, przez co tytuł czytał się
     jak podpis ikony, a nie jak nagłówek swojego akapitu. */
  .wu-item h4{ min-height: 0; margin-bottom: 8px; }

  /* Karta opinii dokładała 26 px do zwężonego gutteru, więc kolumna miała
     286 px i była najwęższym miejscem na całej stronie. */
  .rv-body{ padding-left: 18px; padding-right: 18px; }
  /* Kafle statystyk zawijały się w drabinkę o dwóch różnych szerokościach,
     a podpis "Ocena klientek" łamał się na trzy wiersze. */
  .rv-stats{ display: grid; align-self: stretch; grid-template-columns: 1fr; gap: 10px; }
  .rv-stat{ gap: 12px; padding: 12px 16px; }
  .rv-stat svg{ width: 26px; height: 26px; }
  /* Podgląd 14 px czytał się jak karta ucięta krawędzią sekcji,
     nie jak karuzela. */
  .rv-track{ grid-auto-columns: 85%; gap: 14px; }

  /* Miniatura wyśrodkowana pionowo odjeżdżała na środek karty przy dłuższym
     opisie i zostawiała tytuł samotnie u góry. */
  .os-card{ align-items: flex-start; }
  .os-cgo{ margin-top: 2px; }

  /* Trzy chipy flexem dawały układ 2+1 o trzech różnych szerokościach, czyli
     rytm wyglądał na przypadkowy. Po zdjęciu twardego łamania (prośba Jakuba
     11.08) podpisy są dłuższe i w dwóch kolumnach już się nie mieszczą,
     więc idą jeden pod drugim, każdy w jednej linii. */
  .vc-chips{ display: grid; grid-template-columns: 1fr; gap: 10px; }
  .vc-chip{ justify-content: flex-start; }

  /* Jedyne CTA niepełnej szerokości wśród wszystkich pozostałych na telefonie. */
  .pf-body .btn{ width: 100%; justify-content: center; }

  /* Separator jest osobnym elementem flexa, więc przy zawijaniu zostawał
     wiszący znak na końcu wiersza. Odstęp sam rozdziela linki. */
  .footer-bottom .sep{ display: none; }
  .footer-bottom{ gap: 10px 18px; }
}

/* -- W2: kategorie i zabiegi --------------------------------- */

@media(max-width:560px){
  /* Separator ścieżki jest osobnym elementem flexa, więc przy zawijaniu
     zostawał wiszący chevron na końcu wiersza, a nazwa zabiegu spadała sama
     do drugiej linii. Znak w pseudo-elemencie pozycji łamie się razem z nią.
     Column-gap zerujemy, odstęp robi teraz margines znaku. */
  .kat-crumb{ column-gap: 0; row-gap: 3px; }
  .kat-crumb .crumb-sep{ display: none; }
  .kat-crumb a:not(.crumb-home)::before,
  .kat-crumb b::before{
    content: "\203A"; margin: 0 9px; color: #b3abc9; font-weight: 400;
  }

  /* Chipsy hero układały się flexem po dostępnej szerokości, więc każda
     kategoria dostawała inny przypadkowy rytm: raz 1+1+2, raz 2+1.
     Kolumna daje jedną listę atutów z równym odstępem. */
  .kat-chips{ flex-direction: column; gap: 13px; }
  .kat-chip{ font-size: 13.5px; line-height: 1.3; }

  /* Bloki zabiegów na desktopie rozdziela naprzemienny układ lewo-prawo,
     który na telefonie znika w jednej kolumnie. Zostawało 40 px przerwy przy
     24 px największego odstępu wewnątrz bloku, za słaby sygnał końca sekcji,
     a na medycynie estetycznej takich bloków jest osiem pod rząd.
     Włosowa linia dokłada sygnał, którego mobile inaczej nie ma. */
  .zab + .zab{ padding-top: 34px; border-top: 1px solid #f2eefa; }
  .zab:has(+ .zab){ padding-bottom: 30px; }

  /* Ostatni punkt listy korzyści zostawał z kreską pod spodem, bo reguła
     mobilna dopisuje border-bottom każdemu .uk-i i nie zdejmuje go
     ostatniemu. Wisząca linia wygląda jak urwana treść. */
  .uk-grid .uk-i:last-child{ border-bottom: 0; }
  .uk-i span{ font-size: 14px; line-height: 1.5; }

  /* Pasek parametrów zabiegu: etykieta miała 11,5 px i kontrast 4,24:1,
     poniżej AA. Wartość zostaje, rośnie etykieta i jej kontrast. */
  .uh-item>div span{ font-size: 12.5px; color: #6f6890; }
  .uh-b span{ font-size: 13px; line-height: 1.45; }
  /* Podpis dwuliniowy dotykał ikony z następnego wiersza. */
  .uh-bar{ row-gap: 20px; }

  /* Kroki stoją teraz jeden pod drugim, a odziedziczony odstęp był liczony
     pod układ dwukolumnowy. */
  .up-steps{ row-gap: 26px; }

  /* Opis karty cennika został na 13 px, gdy reszta opisów kart poszła wyżej. */
  .cnb-txt span{ font-size: 14.5px; line-height: 1.5; }
}

/* -- W2: cennik i vouchery ----------------------------------- */

@media(max-width:560px){
  /* Pozycja cennika siedziała trzy poziomy głęboko: sekcja 17 px, .cn-body
     18 px, .po-row 18 px, przez co nazwa zabiegu dostawała 264 px, czyli
     70,5 % ekranu. Do tego widać było dwie koncentryczne ramki 18 px od
     siebie, co czyta się jak niedokończony layout, nie jak karta w karcie.
     Jedna ramka, nazwa rośnie do 306 px (81,7 %) i mniej pozycji łamie się
     na dwa wiersze. */
  .cn-body{ padding-left: 0; padding-right: 0; }
  .cn-body > .po-table{ border: 0; border-radius: 0; }
  .po-row{ padding-left: 16px; padding-right: 16px; }
  /* przypis stracił wcięcie razem z .cn-body, wracamy je punktowo */
  .cn-uwaga{ padding-left: 16px; padding-right: 16px; }

  /* Panel lawendowy trzymał w środku białą kartę FAQ z własnym wcięciem
     28 px, więc pytanie i odpowiedź dostawały 236 px, czyli 63 % ekranu.
     Węziej niż przed całą poprawką, a tekst podniesiony do 16 px dawał
     tam niecałe 30 znaków w wierszu. Panel zostaje jedyną ramką.
     Na usluga-* i faq .uf stoi samodzielnie i tam nic się nie zmienia. */
  .kat-discover-inner > .uf{
    border: 0; border-radius: 0; background: none;
    padding-left: 0; padding-right: 0;
    padding-top: 4px; padding-bottom: 4px;
  }

  /* Sześć kadrów 4:3 jednego pudełka w kolumnie to dwa pełne ekrany tego
     samego produktu. To zdjęcia opakowania, nie portfolio wymagające detalu. */
  .vg-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }

  /* .zab-spec jest na desktopie małą nakładką na zdjęciu, stąd etykieta
     11,5 px. Na telefonie staje się kartą na pełną szerokość i niesie cenę
     oraz czas zabiegu, czyli dane, po które klientka tu przyszła. */
  .zs span{ font-size: 12.5px; }
  .zs b{ font-size: 16px; line-height: 1.3; }
}

/* ---- 8. Nagłówek na wąskim laptopie, 1150 do 1303 px ---------
   Jedyne reguły w tym bloku, które sięgają powyżej 900 px, i jedyne
   z górnym progiem innym niż mobilny. Górna granica 1303 px jest twarda,
   więc desktop 1440 pozostaje poza ich zasięgiem.
   Poniżej 1150 px nagłówek obsługuje szuflada, powyżej 1303 px mieści się
   bez pomocy. W środku brakowało kilkudziesięciu pikseli i to wystarczało,
   żeby przycisk rezerwacji wyszedł poza ekran. Ścieśniamy odstępy nawigacji
   i przyciski, oba CTA zostają widoczne. */
@media(min-width:1150px) and (max-width:1303px){
  .site-header nav{ gap: 16px; }
  .actions{ gap: 10px; }
  .actions .btn{ padding: 0 14px; letter-spacing: .03em; font-size: 11.5px; gap: 7px; }
}

/* ---- 9. Wideo w hero na tablecie i wąskim laptopie ------------
   .hero-media ma aspect-ratio 16/10 i stoi w siatce z align-items:stretch,
   więc rozciąga się na wysokość wiersza, a szerokość wylicza sobie z tej
   wysokości. Przy 1440 px wideo jest najwyższym elementem i samo wyznacza
   wiersz, więc wszystko gra. Poniżej kolumna z tekstem łamie się na więcej
   wierszy, przerasta wideo i to ono zaczyna dyktować wysokość, przez co
   wideo puchnie wszerz: przy 921 px miało 926 px szerokości w kolumnie
   386 px i było ścinane o 493 px.
   align-self:start zdejmuje rozciąganie, więc wysokość znów wynika
   z szerokości. Górna granica 1439 px, bo przy 1440 ta zmiana dałaby wideo
   620 px zamiast 653 px, czyli ruszyłaby zaakceptowany desktop.
   Powyżej 1440 px błędu nie ma. */
@media(max-width:1439px){
  .hero-media{ align-self: start; }
}

@media(max-width:900px){
  /* Boczna lista kategorii jest na desktopie przyklejonym menu obok cennika
     i tam ma sens. Na telefonie schodzi NAD identyczną listę nagłówków
     akordeonu, więc klientka przewija 900 px tej samej treści, zanim dojdzie
     do pierwszej ceny. Zostaje jedna lista, ta która otwiera ceny w miejscu.
     Decyzja Jakuba 11.08. */
  .cn-side .cn-box-lista{ display: none; }
}

@media(max-width:900px){
  /* .kv-pole:last-child zeruje dolny odstęp. Na desktopie trafia w ostatnie
     pole, bo "Imię obdarowanej" i "Od kogo" stoją obok siebie w .kv-dwie.
     Na telefonie .kv-dwie zwija się do jednej kolumny, "Od kogo" nadal jest
     ostatnim dzieckiem i odstęp do "Dedykacji" wychodził dokładnie zero. */
  .kv-dwie:not(:last-child){ margin-bottom: 16px; }

  /* Safari na iOS powiększa stronę przy dotknięciu pola z czcionką poniżej
     16 px i sam z tego powiększenia nie wraca. Pola konfiguratora miały
     14,5 px, a to jedyna ścieżka zakupowa w serwisie. */
  .kv-input, .kv-select, .kv-textarea, .wk-pole select,
  .kf-pole input, .kf-pole select, .kf-pole textarea,
  .pf-form input{ font-size: 16px; }

  /* Dziewięć par tekstu i tła nie przechodziło AA, najgorsza 2,35:1.
     Jeden szary zamyka wszystkie: 5,14:1 na bieli, 4,68:1 na lawendzie.
     Te same pary nie przechodzą na desktopie, ale 1440 jest zamrożone,
     więc do podmiany w tokenach przy najbliższym odmrożeniu. */
  .po-dur, .zs span, .cn-uwaga, .kv-licznik, .kv-platnosci,
  .kv-sum-row.pusty span:last-child, .footer-credit,
  .cn-licznik, .cen-licznik, .kh-ccount,
  .kat-crumb, .kat-crumb a, .kat-crumb .crumb-home{
    color: #6f6a86;
  }
}

/* -- W2: o-nas + kontakt ------------------------------------- */

/* Karty z własnym tłem zatrzymały desktopowe wcięcie 32-36 px i zjadły
   cały zysk z punktu 1. Zmierzone na 375 px: łam w .on-why-bar kończył
   się na 268 px, w .on-cta-text na 272 px, w .kt-box na 274 px, przy
   340 px tekstu poza kartami. Trzy różne szerokości kolumny na jednej
   stronie to złamana spójność, nie oddech. */
@media(max-width:560px){
  .on-why-bar{ padding: 28px 22px; }
  .on-cta-text{ padding: 32px 22px; }
  .kt-box{ padding: 24px 20px; }
}

/* Trzy nagłówki sekcji nie mają zadeklarowanej interlinii i biorą
   "normal", co dla League Spartan 800 wychodzi 0,93. Na desktopie są
   jednowierszowe, więc nikt tego nie widział. Na telefonie łamią się
   na dwa wiersze i ogonki z górnego siadają na wersalikach dolnego. */
@media(max-width:560px){
  .on-sec-head h2,
  .on-why-inner>h2,
  .on-know-text h2{ line-height: 1.12; }
}

/* Lead sekcji na o-nas wypadł z listy leadów w punkcie 2 i został na
   15 px, przez co dwa z czterech leadów tej podstrony czytały się
   inaczej niż identyczne leady w reszcie serwisu. */
@media(max-width:560px){
  .on-sec-head p{ font-size: 16px; line-height: 1.6; }
}

/* Telefon, mail i adres są główną treścią strony kontakt, a stały
   w najmniejszym stopniu na całej stronie. Na desktopie pasek ma pięć
   wąskich kolumn i drobny stopień ma sens, na telefonie to lista na
   pełną szerokość. */
@media(max-width:560px){
  .kp-txt b{ font-size: 15px; }
  .kp-txt span{ font-size: 14px; line-height: 1.55; }
}

/* Biały podpis 12 px leżał wprost na zdjęciu marmuru. Kontrast mierzony
   z pikseli tła: mediana 3,19:1 przy wymaganych 4,5:1, cień tekstu tego
   nie ratował. Własna plakietka podnosi kontrast do ok. 11:1 i napis
   zaczyna wyglądać jak świadoma informacja, nie jak zapomniany tekst. */
@media(max-width:900px){
  .km-info{
    left: 12px; right: 12px; bottom: 12px;
    padding: 8px 12px;
    background: rgba(26,26,26,.72);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.45;
    text-shadow: none;
  }
}
/* ===== KONIEC MOBILE FIXES ===== */

/* poprawki z copy/, build_copy.py */
.on-why-6{grid-template-columns:repeat(3,1fr)}.on-why-6 .on-wi h4{min-height:0}.on-why-inner>h2+.on-why-6{margin-top:26px}@media(max-width:900px){.on-why-6{grid-template-columns:1fr 1fr}.on-why-6 .on-wi h4{min-height:2.5em}}@media(max-width:520px){.on-why-6{grid-template-columns:1fr}.on-why-6 .on-wi h4{min-height:0}}.on-hero-text h1{font-family:'DM Serif Display',serif;font-weight:400;color:var(--indigo);letter-spacing:0}.on-hero-text h1 span{color:var(--indigo)}

  /* ---------- LANDING MAKIJAŻ (24.09.2026, odstępy poprawione po uwadze Jakuba 24.09) ---------- */
  html{scroll-behavior:smooth}
  .mk-hero{background:#fff;padding:36px var(--pad) 12px}
  .mk-hero-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto 1fr;column-gap:56px;align-items:start}
  .mk-hero-head{grid-column:1;grid-row:1}
  .mk-hero-body{grid-column:1;grid-row:2}
  .mk-hero-media{grid-column:2;grid-row:1 / span 2;align-self:stretch}
  .mk-hero-head h1{font-family:'DM Serif Display',serif;font-weight:400;font-size:46px;line-height:1.08;color:var(--indigo);margin:18px 0 24px}
  .mk-lead{font-size:15.5px;line-height:1.75;color:#4a4560;max-width:640px;margin-bottom:18px}
  .mk-hero-quote{font-family:'DM Serif Display',serif;font-style:italic;font-size:22px;color:var(--indigo);margin:10px 0 20px}
  .mk-hero-btns{margin:28px 0 34px}
  .mk-zajawka{background:var(--lav);border:1.5px solid #d9cdf5;border-left:5px solid var(--indigo);border-radius:14px;padding:22px 26px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;box-shadow:0 6px 20px rgba(32,0,102,.09);margin-top:8px}
  .mk-zajawka b{color:var(--indigo);font-size:15.5px;flex:0 0 100%}
  .mk-zajawka p{font-size:14px;color:#4a4560;margin:0;flex:1 1 260px;line-height:1.6}
  .mk-zajawka a{font-size:13.5px;font-weight:700;color:var(--indigo);white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
  .mk-zajawka-sekcja{padding:8px var(--pad) 56px;background:#fff}
  .mk-zajawka-sekcja-inner{max-width:820px;margin:0 auto}
  .mk-hero-media img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;border-radius:24px;display:block;max-height:640px}
  @media(max-width:900px){
    /* Mobile: nagłówek, zaraz pod nim zdjęcie, dopiero potem reszta tekstu.
       Desktop wyżej zostaje w dwóch kolumnach, tu tylko kolejność dla jednej. */
    .mk-hero-inner{grid-template-columns:1fr;grid-template-rows:auto}
    .mk-hero-head{grid-column:1;grid-row:auto;order:1}
    .mk-hero-media{grid-column:1;grid-row:auto;order:2;max-width:400px;margin:0 auto 28px}
    .mk-hero-body{grid-column:1;grid-row:auto;order:3}
    .mk-hero-head h1{font-size:34px}
  }
  @media(max-width:560px){
    .mk-hero-media{max-width:300px}
  }

  .mk-galeria{padding:60px var(--pad);background:var(--lav)}
  .mk-galeria-inner{max-width:var(--maxw);margin:0 auto}
  .mk-galeria h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:34px;color:var(--indigo);text-align:center;margin-bottom:18px}
  .mk-galeria-sub{text-align:center;font-size:14.5px;color:#5a5470;margin-bottom:34px;margin-top:4px}
  .mk-galeria-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .mk-galeria-item{display:block;padding:0;border:0;background:none;cursor:zoom-in;border-radius:14px;overflow:hidden}
  .mk-galeria-item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .3s ease}
  .mk-galeria-item:hover img{transform:scale(1.05)}
  .mk-galeria-item:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
  .mk-lightbox{display:none;position:fixed;inset:0;z-index:80;background:rgba(20,10,40,.92);align-items:center;justify-content:center;padding:40px}
  .mk-lightbox.otwarty{display:flex}
  .mk-lightbox img{max-width:min(90vw,900px);max-height:86vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.4);object-fit:contain;display:block}
  .mk-lightbox-close{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;background:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--indigo)}
  .mk-lightbox-close svg{width:20px;height:20px}
  .mk-lightbox-close:hover{background:var(--lav)}
  @media(max-width:560px){.mk-lightbox{padding:16px}.mk-lightbox-close{top:10px;right:10px}}
  @media(max-width:900px){.mk-galeria-grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:560px){.mk-galeria-grid{grid-template-columns:repeat(2,1fr);gap:10px}.mk-galeria h2{font-size:27px}}

  .mk-listen{padding:64px var(--pad);background:#fff}
  .mk-listen-inner{max-width:700px;margin:0 auto;text-align:center}
  .mk-listen h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);margin-bottom:24px}
  .mk-listen p{font-size:15px;line-height:1.8;color:#4a4560;margin-bottom:18px}
  .mk-listen p:last-child{margin-bottom:0}
  .mk-listen .btn{margin-top:10px}
  .mk-quote{font-weight:700;color:var(--ink);font-size:15.5px}
  .mk-bold{font-weight:700;color:var(--indigo)}
  .mk-micro{font-size:12.5px;color:#8a84a0;margin-top:18px}
  @media(max-width:560px){.mk-listen h2{font-size:25px}}

  .mk-price{padding:64px var(--pad);background:var(--lav);text-align:center}
  .mk-price-inner{max-width:600px;margin:0 auto}
  .mk-price h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:28px;color:var(--indigo);margin-bottom:20px}
  .mk-price p{font-size:14.5px;color:#4a4560;line-height:1.7;margin-bottom:16px}
  .mk-price-tag{font-family:'DM Serif Display',serif;font-size:34px;color:var(--indigo);margin:20px 0 30px}
  .mk-price-tag--placeholder{display:inline-flex;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;letter-spacing:.02em;color:#8a84a0;border:2px dashed #c9c0e0;border-radius:14px;padding:13px 24px;background:#fbfaff}
  .mk-price-tag--placeholder svg{width:20px;height:20px;flex:0 0 auto;color:#a79fc4}

  .mk-opinie{padding:64px var(--pad);background:#fff;text-align:center}
  .mk-opinie-inner{max-width:var(--maxw);margin:0 auto}
  .mk-opinie h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:32px;color:var(--indigo);margin-bottom:34px}
  .mk-opinie-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left;margin-bottom:32px}
  .mk-opinie-grid .rv-card{scroll-snap-align:unset}
  .mk-opinie-cta-text{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:18px}
  @media(max-width:900px){.mk-opinie-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.mk-opinie-grid{grid-template-columns:1fr}.mk-opinie h2{font-size:26px}}

  .mk-skora{padding:64px var(--pad);background:var(--lav);text-align:center}
  .mk-skora-inner{max-width:820px;margin:0 auto}
  .mk-skora-inner h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:28px;color:var(--indigo);margin-bottom:18px}
  .mk-skora-inner>p{font-size:14.5px;line-height:1.75;color:#4a4560;margin-bottom:16px}
  .mk-skora-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:32px 0;text-align:left}
  .mk-skora-card{background:#fff;border:1px solid #e6e0f5;border-radius:18px;padding:26px 22px}
  .mk-skora-card b{display:block;font-family:'DM Serif Display',serif;font-size:18px;color:var(--indigo);margin-bottom:10px}
  .mk-skora-card p{font-size:13.5px;color:#4a4560;line-height:1.6;margin-bottom:16px}
  .mk-skora-inner>p+p{margin-top:-4px}
  .mk-skora-inner .btn{margin-top:6px}
  .mk-skora-inner .mk-micro{margin-top:14px}
  @media(max-width:700px){.mk-skora-cards{grid-template-columns:1fr}}

  .mk-przygot{padding:64px var(--pad);background:#fff}
  .mk-przygot-inner{max-width:820px;margin:0 auto}
  .mk-przygot-inner>h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);text-align:center;margin-bottom:16px}
  .mk-przygot-lead{text-align:center;font-size:14.5px;color:#5a5470;max-width:480px;margin:0 auto}
  .mk-przygot-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:40px}
  .mk-przygot-cols h3{font-size:16px;color:var(--indigo);margin-bottom:16px}
  .mk-przygot-cols ul{padding-left:20px;font-size:13.5px;color:#4a4560;line-height:1.85}
  .mk-przygot-cols li{margin-bottom:8px}
  .mk-przygot-cols li:last-child{margin-bottom:0}
  @media(max-width:700px){.mk-przygot-cols{grid-template-columns:1fr;gap:32px}}

  .mk-magnet{padding:64px var(--pad);background:var(--indigo);color:#fff}
  .mk-magnet-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
  .mk-magnet-text h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:28px;margin-bottom:18px}
  .mk-magnet-text p{font-size:14px;line-height:1.7;opacity:.92;margin-bottom:14px}
  .mk-magnet-text ul{font-size:13.5px;line-height:1.9;opacity:.92;padding-left:18px;margin-bottom:16px}
  .mk-magnet-text ul li{margin-bottom:5px}
  .mk-magnet-box{display:flex;flex-direction:column;gap:20px}
  .mk-magnet-mock{background:#fff;border-radius:16px;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;color:var(--indigo);text-align:center}
  .mk-mock-title{font-family:'DM Serif Display',serif;font-size:16px;line-height:1.3}
  .mk-mock-line{width:70%;height:6px;border-radius:3px;background:var(--lav)}
  .mk-mock-line.short{width:45%}
  .mk-magnet-form{background:#fff;border-radius:16px;padding:24px}
  .mk-magnet-form label{display:block;font-size:12.5px;color:#5a5470;margin-bottom:8px;font-weight:600}
  .mk-magnet-form input[type=email]{width:100%;height:44px;border:1.5px solid #e6e0f5;border-radius:10px;padding:0 14px;font-size:13.5px;margin-bottom:16px;font-family:inherit;color:var(--ink)}
  .mk-magnet-form button{width:100%;justify-content:center}
  .mk-magnet-micro{font-size:11.5px;color:#8a84a0;margin-top:12px;text-align:center}
  .ikh-kot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  @media(max-width:900px){.mk-magnet-inner{grid-template-columns:1fr}.mk-magnet-mock{aspect-ratio:16/9}}

  #mk-przygotowanie{scroll-margin-top:100px}

  .mk-sticky-cta{display:none}
  @media(max-width:768px){
    /* 07.10.2026: więcej oddechu, wyższy przycisk, wyraźna krawędź i cień, pasek systemowy iPhone'a (Jakub: przycisk ginie względem strony). */
    .mk-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e6e0f5;box-shadow:0 -12px 32px rgba(32,0,102,.18);transform:translateY(110%);transition:transform .25s ease;display:block}
    .mk-sticky-cta.widoczny{transform:translateY(0)}
    .mk-sticky-cta .btn{width:100%;justify-content:center;min-height:54px;font-size:14px}
    body:has(.mk-sticky-cta),body:has(.uszu-sticky){padding-bottom:calc(84px + env(safe-area-inset-bottom))}
    @media (prefers-reduced-motion:reduce){.mk-sticky-cta{transition:none}}
  }

  /* ---- Makijaz: sekcje zebra zdjecie/tekst (.zab wspolny z podstrona kategorii), rytm 64px jak reszta strony ---- */
  .mk-zab{padding:64px var(--pad)}
  .mk-zab .zab-text h2{margin-bottom:18px}
  .mk-zab .zab-lead:last-of-type{margin-bottom:0}
  @media(max-width:980px){.mk-zab{padding:48px var(--pad)}}

/* ---------- LANDING MAKIJAZ, poprawka kadrowania 06.10.2026 (uwaga Angeliki z 01.10: zdjecia bez ucinania) ---------- */
.mk-hero-media{display:flex;justify-content:center;align-items:flex-start}
.mk-hero-media img{width:auto;max-width:100%;height:auto;aspect-ratio:900/1273;max-height:620px;object-fit:contain}
@media(max-width:900px){.mk-hero-media img{max-height:480px}}
.mk-galeria-grid{align-items:start}
.mk-galeria-item img{aspect-ratio:auto;height:auto;object-fit:contain}
.mk-galeria-item:hover img{transform:none}
.mk-zab .zab-media{aspect-ratio:auto;background:var(--lav);display:flex;align-items:center;justify-content:center;padding:28px;overflow:hidden}
.mk-zab .zab-media img{width:auto;max-width:100%;height:auto;max-height:620px;aspect-ratio:auto;object-fit:contain;border-radius:14px;box-shadow:0 14px 40px rgba(32,0,102,.14)}
.on-cta--mk .on-cta-inner{grid-template-columns:1fr 1fr}
.on-cta--mk .on-cta-media{display:flex;align-items:center;justify-content:center;padding:28px}
.on-cta--mk .on-cta-media img{position:static;inset:auto;width:auto;height:auto;max-width:100%;max-height:440px;object-fit:contain;border-radius:16px}
@media(max-width:980px){
  .mk-zab .zab-media{padding:20px;overflow:hidden;background:var(--lav);margin-top:26px}
  .mk-zab .zab-media img{max-height:520px;border-radius:12px}
}
@media(max-width:820px){
  .on-cta--mk .on-cta-inner{grid-template-columns:1fr}
  .on-cta--mk .on-cta-media{height:auto;padding:0 34px 34px}
  .on-cta--mk .on-cta-media img{max-height:420px}
}

/* ---------- LANDING MAKIJAZ, przebudowa sekcji bez wzorcow generatora 06.10.2026 (zajawka, opinie, skora, magnes) ---------- */
.mk-zajawka-sekcja{padding:24px var(--pad) 44px;background:#fff}
.mk-zajawka-sekcja .mk-zajawka{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px 64px;align-items:center;padding:44px 0;background:none;border:0;border-top:1px solid #d9cdf5;border-bottom:1px solid #d9cdf5;border-radius:0;box-shadow:none}
.mk-zajawka-sekcja .mk-zajawka h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:34px;line-height:1.15;color:var(--indigo);margin:0}
.mk-zajawka-sekcja .mk-zajawka-tekst p{font-size:15.5px;line-height:1.7;color:#4a4560;margin:0 0 16px;flex:none}
.mk-zajawka-sekcja .mk-zajawka-tekst a{font-size:14.5px;font-weight:700;color:var(--indigo);text-decoration:underline;text-underline-offset:4px;white-space:normal}
@media(max-width:820px){.mk-zajawka-sekcja{padding:8px var(--pad) 56px}.mk-zajawka-sekcja .mk-zajawka{grid-template-columns:1fr;gap:14px;padding:34px 0}.mk-zajawka-sekcja .mk-zajawka h2{font-size:28px}}

.mk-opinie h2{margin-bottom:44px}
.mk-opinie-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:left;margin-bottom:44px}
.mk-opinia{margin:0;padding:6px 36px;border-left:1px solid #e6e0f5;display:flex;flex-direction:column}
.mk-opinia:first-child{border-left:0;padding-left:0}
.mk-opinia:last-child{padding-right:0}
.mk-opinia .rv-stars{margin-bottom:18px}
.mk-opinia blockquote{margin:0 0 22px;font-family:'DM Serif Display',serif;font-size:19px;line-height:1.5;color:var(--ink);flex:1 1 auto}
.mk-opinia figcaption{font-size:14px;color:#6a6480;line-height:1.5}
.mk-opinia figcaption b{display:block;color:var(--ink);font-weight:600;font-size:15px}
@media(max-width:900px){.mk-opinie-lista{grid-template-columns:1fr}.mk-opinia,.mk-opinia:first-child,.mk-opinia:last-child{padding:28px 0;border-left:0;border-top:1px solid #e6e0f5}.mk-opinia:first-child{border-top:0;padding-top:0}}

.mk-skora{padding:72px var(--pad);background:var(--lav);text-align:left}
.mk-skora .mk-skora-inner{max-width:var(--maxw);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:start}
.mk-skora-lewa h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:34px;line-height:1.15;color:var(--indigo);margin:0 0 22px}
.mk-skora-lewa p{font-size:15px;line-height:1.75;color:#4a4560;margin:0 0 16px}
.mk-skora-lista{list-style:none;margin:0 0 40px;padding:0;border-top:1px solid #d9cdf5}
.mk-skora-lista li{padding:26px 0;border-bottom:1px solid #d9cdf5}
.mk-skora-lista b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:24px;color:var(--indigo);margin-bottom:8px}
.mk-skora-lista p{font-size:14.5px;line-height:1.65;color:#4a4560;margin:0 0 14px}
.mk-skora-pomoc p{font-size:15px;line-height:1.7;color:#4a4560;margin:0 0 14px}
.mk-skora-pomoc .btn{margin:6px 0 20px}
.mk-skora-pomoc .mk-micro{font-size:13px;line-height:1.6;color:#6a6480;margin:0}
@media(max-width:900px){.mk-skora{padding:56px var(--pad)}.mk-skora .mk-skora-inner{grid-template-columns:1fr;gap:36px}.mk-skora-lewa h2{font-size:28px}}

.mk-magnet-text .mk-bold{color:#fff;font-weight:700}

/* ---------- LANDING MAKIJAZ, karuzela opinii dziala (strzalki, kropki), 06.10.2026 ---------- */
.mk-opinie .rv-track-wrap{margin-bottom:36px;text-align:left}
.mk-opinie .mk-opinie-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 40px)/3);gap:20px;margin-bottom:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.mk-opinie .mk-opinie-grid::-webkit-scrollbar{display:none}
.mk-opinie .mk-opinie-grid .rv-card{scroll-snap-align:start}
.mk-opinie .rv-nav[hidden]{display:none}
@media(max-width:900px){.mk-opinie .mk-opinie-grid{grid-template-columns:none;grid-auto-columns:calc((100% - 20px)/2)}}
@media(max-width:560px){.mk-opinie .mk-opinie-grid{grid-template-columns:none;grid-auto-columns:88%}}

/* ---------- LANDING MAKIJAZ, zdjecie w lewej kolumnie "Zacznij od skory" 06.10.2026 ---------- */
.mk-skora-foto{margin:32px 0 0}
.mk-skora-foto img{display:block;width:100%;height:auto;border-radius:18px}
@media(min-width:901px){.mk-skora-foto img{aspect-ratio:2/1;height:auto;object-fit:cover;object-position:50% 55%}}
@media(max-width:900px){.mk-skora-foto{margin-top:26px}}

/* ---------- LANDING MAKIJAZ, ramka ceny ukryta 06.10.2026 (decyzja Jakuba, kwota po odpowiedzi Angeliki) ---------- */
.mk-price-tag--placeholder{display:none}
.mk-price .btn{margin-top:8px}

/* ================= PRZEKLUWANIE USZU, LANDING (Pakiet F, 26.09.2026) =================
   Reuzywa gdzie sie da istniejace klasy: .kat-hero, .zab/.zc, .uf (FAQ), .rv-card,
   .gal, .on-cta, .btn. Nowe klasy tylko dla ukladow, ktorych w bibliotece nie bylo:
   porownanie dwoch kart, lista krokow, cennik dwoch kart, sticky CTA mobile. */
.uszu-pytania{margin:0 0 20px;padding-left:0;list-style:none;display:grid;gap:7px}
.uszu-pytania li{font-size:14.5px;color:#5a5470;line-height:1.6;padding-left:20px;position:relative}
.uszu-pytania li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--indigo)}
.uszu-lead-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;font-weight:600;color:var(--indigo);text-decoration:none}
.uszu-lead-link:hover{color:var(--indigo-hover)}

/* Sekcja 2: klasycznie / na dwie rece */
.uszu-compare{background:#fff;padding:34px var(--pad)}
.uszu-compare-inner{max-width:var(--maxw);margin:0 auto}
.uszu-compare>.uszu-compare-inner>h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);text-align:center;margin-bottom:10px}
.uszu-compare>.uszu-compare-inner>p.kd-lead{text-align:center;font-size:14.5px;color:#6a6480;margin:0 auto 30px;max-width:580px}
.uszu-cards2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:30px}
.uc-card{background:#faf9fd;border:1px solid #ece7f7;border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.uc-media{position:relative;aspect-ratio:16/11;background:var(--lav)}
.uc-media img{width:100%;height:100%;object-fit:cover;display:block}
.uc-badge{position:absolute;top:14px;left:14px;background:var(--indigo);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
.uc-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1 1 auto}
.uc-body h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:20px;color:var(--indigo);margin-bottom:12px}
.uc-body p{font-size:13.5px;line-height:1.7;color:#5a5470;margin-bottom:12px}
.uc-body p:last-child{margin-bottom:0}
.uszu-compare-cta{display:flex;flex-direction:column;align-items:center;gap:10px}
.uszu-compare-cta span{font-size:12.5px;color:#6a6480;text-align:center}
@media(max-width:900px){.uszu-cards2{grid-template-columns:1fr;gap:20px}}

/* Sekcja 4: cala wizyta, krok po kroku */
.uszu-proces{background:#fff;padding:40px var(--pad)}
.uszu-proces-inner{max-width:var(--maxw);margin:0 auto}
.uszu-proces>.uszu-proces-inner>h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);text-align:center;margin-bottom:10px}
.uszu-proces-lead{text-align:center;font-size:14.5px;color:#6a6480;margin:0 auto 34px;max-width:620px;line-height:1.7}
.uszu-kroki{display:grid;gap:18px;margin-bottom:32px}
.uszu-krok{display:flex;gap:22px;align-items:flex-start;background:#faf9fd;border:1px solid #ece7f7;border-radius:18px;padding:20px 24px}
.uk-num{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--indigo);color:#fff;font-family:'League Spartan',sans-serif;font-weight:800;font-size:16px;display:grid;place-items:center}
.uk-body{flex:1 1 auto;min-width:0}
.uk-body h3{font-size:15.5px;font-weight:700;color:var(--indigo);margin-bottom:6px}
.uk-body p{font-size:13px;line-height:1.65;color:#5a5470}
.uk-media{flex:0 0 180px;width:180px;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--lav)}
.uk-media img{width:100%;height:100%;object-fit:cover;display:block}
.uszu-proces-outro{text-align:center;font-size:14.5px;color:#5a5470;max-width:580px;margin:0 auto 22px;line-height:1.7}
.uszu-proces-cta{display:flex;justify-content:center}
@media(max-width:900px){.uszu-krok{flex-wrap:wrap}.uk-media{flex:1 1 100%;width:100%;aspect-ratio:16/9;order:3;margin-top:4px}.uk-body{order:2}.uk-num{order:1}}

/* Sekcja 6: opinie rodzicow */
.uszu-opinie{background:#fff;padding:40px var(--pad)}
.uszu-opinie-inner{max-width:var(--maxw);margin:0 auto}
.uszu-opinie>.uszu-opinie-inner>h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);text-align:center;margin-bottom:10px}
.uszu-opinie>.uszu-opinie-inner>p.kd-lead{text-align:center;font-size:14.5px;color:#6a6480;margin:0 auto 30px;max-width:580px}
.uszu-rv-featured{background:var(--lav);border-radius:22px;padding:32px 36px;margin-bottom:30px;max-width:760px;margin-left:auto;margin-right:auto}
.uszu-rv-featured .rv-stars{margin-bottom:14px}
.uszu-rv-featured .rv-stars svg{width:20px;height:20px}
.uszu-rv-featured .rv-text{font-size:15.5px;line-height:1.75;color:var(--ink);margin-bottom:16px}
.uszu-rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}
.uszu-opinie-cta{display:flex;justify-content:center}
@media(max-width:980px){.uszu-rv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.uszu-rv-grid{grid-template-columns:1fr}.uszu-rv-featured{padding:26px 22px}}

/* Sekcja 7: male bohaterki, galeria */
.uszu-bohaterki{background:#faf9fd;padding:52px var(--pad)}
.uszu-bohaterki-inner{max-width:var(--maxw);margin:0 auto}
.uszu-bohaterki h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);text-align:center;margin-bottom:6px}
.uszu-bohaterki .gal-line{width:60px;height:3px;border-radius:2px;background:var(--indigo);margin:0 auto 22px}
.uszu-bohaterki-lead{text-align:center;font-size:14.5px;color:#6a6480;max-width:640px;margin:0 auto 18px;line-height:1.7}
.uszu-bohaterki-punch{text-align:center;font-family:'League Spartan',sans-serif;font-weight:800;font-size:19px;color:var(--indigo);margin:0 auto 30px}
.uszu-bohaterki h3{text-align:center;font-size:15px;font-weight:700;color:#4a4560;text-transform:uppercase;letter-spacing:.04em;margin-bottom:22px}

/* Sekcja 8: cennik */
.uszu-cennik{background:#fff;padding:40px var(--pad)}
.uszu-cennik-inner{max-width:var(--maxw);margin:0 auto}
.uszu-cennik h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;color:var(--indigo);text-align:center;margin-bottom:30px}
.uszu-cena-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:36px}
.uszu-cena{background:#faf9fd;border:1px solid #ece7f7;border-radius:20px;padding:32px 30px;text-align:center;display:flex;flex-direction:column;align-items:center}
.uszu-cena h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:19px;color:var(--indigo);margin-bottom:10px}
.uszu-cena p{font-size:13.5px;line-height:1.65;color:#5a5470;margin-bottom:18px}
.uszu-cena .price{font-family:'League Spartan',sans-serif;font-weight:800;font-size:38px;color:var(--indigo);margin-bottom:20px}
.uszu-cena .btn{width:100%;max-width:100%;justify-content:center;white-space:normal;height:auto;min-height:48px;line-height:1.3;padding:12px 18px;text-align:center}
.uszu-cennik-help{text-align:center;max-width:580px;margin:0 auto}
.uszu-cennik-help p{font-size:14px;line-height:1.7;color:#5a5470;margin-bottom:4px}
.uszu-cennik-help a{color:var(--indigo);font-weight:600}
@media(max-width:700px){.uszu-cena-grid{grid-template-columns:1fr}}

/* Sticky CTA mobile, widoczny caly czas przewijania na tej podstronie */
.uszu-sticky{position:fixed;left:0;right:0;bottom:0;z-index:400;background:#fff;border-top:1px solid #e6e0f5;box-shadow:0 -12px 32px rgba(32,0,102,.18);padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));display:none}
.uszu-sticky .btn{width:100%;justify-content:center;height:auto;min-height:54px;font-size:14px}
@media(max-width:900px){.uszu-sticky{display:block}}
@media(max-width:900px){body.pg-uszu{padding-bottom:76px}}

.kotwica-stara{display:block;position:relative;top:-90px;height:0;visibility:hidden}

/* ---------- PRZEKLUWANIE USZU, kadrowanie i porzadki po odbiorze 06.10.2026 (regula Angeliki: twarze w calosci, galeria bez ciec) ---------- */
.pg-uszu .kat-hero-media{aspect-ratio:auto;max-height:none;display:flex;justify-content:center;align-items:flex-start}
.pg-uszu .kat-hero-media img{position:static;inset:auto;width:auto;max-width:100%;height:auto;max-height:620px;object-fit:contain}
.pg-uszu #uszu-jola .zab-media{aspect-ratio:auto;display:flex;align-items:center;justify-content:center;padding:28px;background:var(--lav);overflow:hidden}
.pg-uszu #uszu-jola .zab-media img{width:auto;max-width:100%;height:auto;max-height:620px;object-fit:contain;border-radius:14px;box-shadow:0 14px 40px rgba(32,0,102,.14)}
.uszu-krok{align-items:center}
.uk-num{width:auto;height:auto;border-radius:0;background:none;color:var(--indigo);flex:0 0 28px;font-size:15px;display:block;padding-top:2px}
.uk-num::after{content:"."}
.uk-media{flex:0 0 220px;width:220px;aspect-ratio:auto;background:none;overflow:visible}
.uk-media img{height:auto;object-fit:contain;border-radius:14px;box-shadow:0 8px 24px rgba(32,0,102,.10)}
.uszu-bohaterki .gal-line{display:none}
.uszu-bohaterki h2{margin-bottom:18px}
.uszu-bohaterki .gal-grid{align-items:start}
.uszu-bohaterki .gal-item{aspect-ratio:auto;background:none}
.uszu-bohaterki .gal-item img{height:auto;object-fit:contain;transition:none}
.uszu-bohaterki .gal-item:hover img{transform:none}
.uszu-cennik .uc-body>*:nth-last-child(2){margin-top:auto}
.uszu-cennik .uc-body{padding-bottom:28px}
@media(max-width:900px){
  .pg-uszu .kat-hero-media{max-width:none}
  .pg-uszu .kat-hero-media img{max-height:480px}
  .pg-uszu #uszu-jola .zab-media{padding:20px;margin-top:26px}
  .pg-uszu #uszu-jola .zab-media img{max-height:520px}
  .uk-media{flex:1 1 100%;width:100%;max-width:260px;aspect-ratio:auto;margin:10px auto 0;order:3}
}

.uszu-cena .price{margin-top:auto}
.uszu-cena p{margin-bottom:14px}

/* jola aspect auto 06.10 */
.pg-uszu #uszu-jola .zab-media img{aspect-ratio:auto}
.kotwica-stara{top:0;scroll-margin-top:96px}

/* uszy porzadki 4, 06.10 */
.on-cta--mk .on-cta-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.on-cta--mk .on-cta-btns .btn{white-space:normal;height:auto;min-height:54px;line-height:1.3;text-align:center}
@media(max-width:820px){.on-cta--mk .on-cta-inner{grid-template-columns:minmax(0,1fr)}}
.uszu-kroki{counter-reset:krok}
.uk-num{display:none}
.uk-body h3::before{counter-increment:krok;content:counter(krok) ". "}
.uk-media{flex:0 0 170px;width:170px}
.uszu-krok{padding:18px 22px}
@media(max-width:900px){.uk-media{flex:1 1 100%;width:100%;max-width:240px}}

/* ---------- STRONA GLOWNA: Aktualne promocje (06.10.2026) ---------- */
.ap{background:#fff;padding:64px var(--pad)}
.ap-inner{max-width:var(--maxw);margin:0 auto}
.ap h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:34px;line-height:1.15;color:var(--indigo);text-align:center;margin:0 0 40px}
.ap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,320px));gap:24px;justify-content:center}
.ap-card{background:#faf9fe;border:1px solid #efeafb;border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.ap-media{aspect-ratio:4/3;background:var(--lav);overflow:hidden}
.ap-media img{width:100%;height:100%;object-fit:cover;display:block}
.ap-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1 1 auto}
.ap-test{align-self:flex-start;margin-bottom:12px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#fff3cd;color:#7a5b00;padding:5px 10px;border-radius:999px}
.ap-card h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:21px;line-height:1.25;color:var(--indigo);margin:0 0 10px}
.ap-opis{font-size:14px;line-height:1.6;color:#5a5470;margin:0 0 16px}
.ap-ceny{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:0 0 6px}
.ap-reg{font-size:16px;font-weight:600;color:#c0392b}
.ap-cena{font-family:'League Spartan',sans-serif;font-weight:800;font-size:30px;line-height:1;color:#1f8a4c}
.ap-oszcz{font-size:14px;font-weight:600;color:#1f8a4c;margin:0 0 10px}
.ap-omnibus{font-size:12px;line-height:1.5;color:#6a6480;margin:0 0 18px}
.ap-btns{margin-top:auto;display:grid;gap:10px}
.ap-btns .btn{width:100%;justify-content:center;text-align:center;white-space:normal;height:auto;min-height:46px;line-height:1.3;padding:12px 16px}
.ap-wiecej{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--indigo);text-decoration:underline;text-underline-offset:4px;padding:6px 0}
.ap-wiecej svg{width:16px;height:16px}
@media(max-width:700px){.ap{padding:48px var(--pad)}.ap h2{font-size:28px;margin-bottom:28px}.ap-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- SKLEP: zgody, Omnibus (06.10.2026) ---------- */
.ikh-omnibus{display:block;font-size:12px;line-height:1.5;color:#6a6480;font-weight:400;margin-top:4px}
.ikh-zgody-mkt{margin:14px 0 6px;padding-top:12px;border-top:1px solid #ece7f7}
.ikh-zgody-mkt .ikh-reg-wiersz{margin:0 0 8px}
.ikh-zgody-mkt label{font-size:12.5px;line-height:1.55;color:#5a5470}

.ikh-zgody-mkt label{font-weight:400}
.ikh-reg-uslugi label{font-weight:400}

/* uszy: miniatury procesu 4:5, karuzela opinii, CTA 06.10 (2) */
.uk-media{aspect-ratio:4/5;overflow:hidden;border-radius:14px;box-shadow:0 8px 24px rgba(32,0,102,.10);background:var(--lav)}
.uk-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;border-radius:0;box-shadow:none}
@media(max-width:900px){.uk-media{aspect-ratio:4/5;max-width:240px}}
.uszu-rv-wrap{margin:0 0 30px;text-align:left}
.uszu-rv-track{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 40px)/3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 0 0}
.uszu-rv-track::-webkit-scrollbar{display:none}
.uszu-rv-track .rv-card{scroll-snap-align:start}
.uszu-rv-wrap .rv-nav[hidden]{display:none}
@media(max-width:900px){.uszu-rv-track{grid-auto-columns:calc((100% - 20px)/2)}}
@media(max-width:560px){.uszu-rv-track{grid-auto-columns:88%}}
.pg-uszu .on-cta--mk .on-cta-media img{max-height:none;width:100%;height:auto;aspect-ratio:auto}

/* uszy: jedna karuzela 7 opinii, 06.10 (3) */
.uszu-rv-wrap{position:relative;margin-top:6px}
.uszu-rv-wrap .rv-nav{margin-top:26px}


/* uszy: opinie bez etykiet 07.10 */
.uszu-rv-track .rv-person{margin-bottom:0}

/* opinie gwiazdki odstep 07.10 */
.uszu-rv-track .rv-stars{margin-bottom:16px}

/* ---------- USZY: wizyta krok po kroku jako historia przewijana w bok (07.10.2026, wariant C) ----------
   Zdjecia kroku w pionie 4:5, czyli w proporcjach oryginalow, bez ucinania twarzy i uszu.
   Stare klasy .uszu-krok/.uk-* zostaja w pliku bez uzycia na stronie (do sprzatniecia). */
.ukr{margin:0 0 34px}
.ukr-tor{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px var(--pad) 10px;margin:0 calc(-1 * var(--pad));scroll-padding-inline:var(--pad)}
.ukr-tor::-webkit-scrollbar{display:none}
.ukr-tor:focus-visible{outline:2px solid var(--indigo);outline-offset:4px;border-radius:8px}
.ukr-krok{flex:0 0 calc((100% - 60px) / 3.4);scroll-snap-align:start;min-width:0}
.ukr-media{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--lav);margin-bottom:16px;box-shadow:0 8px 24px rgba(32,0,102,.08)}
.ukr-media img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}
.ukr-ikona{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;color:var(--indigo);background:#f3f0fb}
.ukr-ikona svg{width:34%;height:auto}
.ukr-ikona span:not(.ukr-num){font-size:14px;font-weight:600;line-height:1.4;max-width:210px}
.ukr-num{position:absolute;top:14px;left:14px;width:38px;height:38px;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;font-family:'League Spartan',sans-serif;font-weight:800;font-size:16px;box-shadow:0 4px 12px rgba(32,0,102,.25)}
.ukr-krok h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:21px;line-height:1.25;color:var(--indigo);margin:0 0 8px}
.ukr-krok p{font-size:14px;line-height:1.6;color:#5a5470;margin:0}
.ukr-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:22px}
.ukr-str{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--indigo);background:#fff;color:var(--indigo);display:grid;place-items:center;cursor:pointer;transition:background-color .18s ease,color .18s ease,transform .18s ease,opacity .18s ease}
.ukr-str svg{width:18px;height:18px}
.ukr-dalej svg{transform:scaleX(-1)}
.ukr-str:hover:not(:disabled){background:var(--indigo);color:#fff}
.ukr-str:active:not(:disabled){transform:scale(.94)}
.ukr-str:disabled{opacity:.35;cursor:default}
.ukr-str:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
.ukr-kropki{display:flex;gap:8px}
.ukr-kropki button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#d6cff0;cursor:pointer;transition:width .25s ease,background-color .25s ease}
.ukr-kropki button[aria-current="true"]{width:22px;background:var(--indigo)}
.ukr-kropki button:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
@media(max-width:1100px){.ukr-krok{flex-basis:calc((100% - 40px) / 2.4)}}
@media(max-width:640px){.ukr-tor{gap:14px}.ukr-krok{flex-basis:82%}.ukr-str{display:none}.ukr-krok h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){.ukr-str,.ukr-kropki button{transition:none}}

/* Menu mobilne: dlugi napis voucherowy (poprawka 38, 07.10.2026) zawija sie do drugiej linii zamiast wychodzic poza przycisk. */
.drawer .btn{white-space:normal;height:auto;min-height:52px;line-height:1.35;text-align:center;justify-content:center;padding-top:12px;padding-bottom:12px}


/* ---------- VOUCHERY: jedna skala typografii i odstepow (07.10.2026) ----------
   Standard zmierzony na reszcie strony: H2 DM Serif 30/26 px indygo, sekcje 40/32 px, tekst 14-15 px.
   Przed zmiana strona miala 4 warianty H2, 5 rozmiarow tekstu i 5 stylow tytulow kart. */
body.page-id-50 :is(.kat-discover,.rt,.vg,.vok,.proc){padding:40px var(--pad)}
body.page-id-50 :is(.kat-discover,.rt,.vg,.vok,.proc) h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;line-height:1.2;color:var(--indigo);text-align:center;margin:0 auto 12px;max-width:760px;text-wrap:balance}
body.page-id-50 :is(.rt,.vok,.proc,#pytania) h2{margin-bottom:28px}
body.page-id-50 :is(.kd-lead,.vg-lead){font-size:15px;line-height:1.7;color:#5a5470;text-align:center;max-width:620px;margin:0 auto 28px}
body.page-id-50 :is(.kd-item b,.rt-box b,.vok-i b,.proc-step b){font-family:'DM Serif Display',serif;font-weight:400;font-size:20px;line-height:1.25;color:var(--indigo);margin:0 0 8px}
body.page-id-50 :is(.kd-item span,.rt-box p,.vok-i span,.proc-step p){font-size:14px;line-height:1.6;color:#5a5470}
body.page-id-50 .vg-grid{margin-top:0}
body.page-id-50 .vg-grid--4{grid-template-columns:repeat(4,1fr)}
body.page-id-50 .vh-btns{margin:6px 0 24px}
body.page-id-50 .proc-note{text-align:center;font-size:14px;line-height:1.6;color:#5a5470;margin:24px auto 18px}
body.page-id-50 .proc-btns{display:flex;flex-direction:column;align-items:center;gap:14px}
body.page-id-50 .proc-reg{font-size:13.5px;font-weight:600;color:var(--indigo);text-decoration:underline;text-underline-offset:4px}
body.page-id-50 .vf-faq{max-width:820px;margin:0 auto;text-align:left}
body.page-id-50 .vf-faq .uf-q{font-size:15px}
body.page-id-50 .vf-faq .uf-a p{font-size:14.5px;line-height:1.7}
body.page-id-50 .vf-faq .uf-a p+p{margin-top:-6px}
@media(max-width:900px){body.page-id-50 .vg-grid--4{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:640px){
  body.page-id-50 :is(.kat-discover,.rt,.vg,.vok,.proc){padding:32px var(--pad)}
  body.page-id-50 :is(.kat-discover,.rt,.vg,.vok,.proc) h2{font-size:26px}
  body.page-id-50 :is(.kd-item span,.rt-box p,.vok-i span,.proc-step p,.kd-lead,.vg-lead,.proc-note){font-size:15px}
  body.page-id-50 :is(.kd-item b,.rt-box b,.vok-i b,.proc-step b){font-size:19px}
  body.page-id-50 .vh-btns .btn{width:100%;justify-content:center}
  body.page-id-50 .vf-faq .uf-q{font-size:15px}
  body.page-id-50 .vf-faq .uf-a p{font-size:15px}
}
/* Konfigurator: trzy punkty z ptaszkiem na gorze (poprawka Angeliki, 07.10.2026) */
body.page-id-17 .kv-plusy{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px;max-width:560px}
body.page-id-17 .kv-plusy li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:#5a5470}
body.page-id-17 .kv-plusy svg{flex:0 0 22px;width:22px;height:22px;margin-top:1px;padding:4px;border-radius:50%;background:var(--indigo);color:#fff;box-sizing:border-box}
body.page-id-17 .kv-plusy b{color:var(--indigo);font-weight:700}
@media(max-width:640px){body.page-id-17 .kv-plusy li{font-size:15px}}

/* Vouchery, poprawki po odbiorze 07.10.2026: oddech pod tekstem w kartach Na juz i przyciski na jednej wysokosci; lead pod H2 wygrywa ze starsza regula. */
body.page-id-50 .rt-box{display:flex;flex-direction:column}
body.page-id-50 .rt-box p{margin:0 0 22px}
body.page-id-50 .rt-box .btn{margin-top:auto;align-self:flex-start}
body.page-id-50 .kat-discover .kd-lead,body.page-id-50 .vg .vg-lead{font-size:15px;line-height:1.7;color:#5a5470;max-width:620px;margin:0 auto 28px}
@media(max-width:640px){body.page-id-50 .rt-box .btn{align-self:stretch;justify-content:center}}

/* 07.10.2026: Dla kogo? tytuly to cale zdania, DM Serif robil ciemny blok. Montserrat 600 tylko w tej sekcji (decyzja Jakuba). */
body.page-id-50 .vok-i b{font-family:Montserrat,sans-serif;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:0}

/* 07.10.2026: dokumenty prawne (sekcja .legal), kolumna na środku strony (decyzja Jakuba). */
.legal .legal-inner,body:has(.legal) .usl-main{max-width:900px;margin-left:auto;margin-right:auto}

/* 07.10.2026: stopka z 4 linkami, reszta dokumentów podpięta tutaj. */
.legal .legal-cookies{margin:20px 0 4px}
.legal .legal-linki{margin:18px 0 4px;font-size:15px}
.legal .legal-linki a{color:var(--indygo,#200066);text-decoration:underline;text-underline-offset:3px}
.ikh-sklep-info{margin:14px 0 6px;font-size:13px;line-height:1.6;color:#6b6b78}
.ikh-sklep-info a{color:#200066;text-decoration:underline;text-underline-offset:3px}

/* 07.10.2026: cennik z Referly, dopisek o wariantach pod nazwa */
.po-name .po-war{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:#7a7590}

/* 07.10.2026: data konca promocji z pola "Widoczna do", zamiast w opisie */
.ap .ap-termin{margin:8px 0 14px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#7a7590}