/* Hairlo — styl domovské stránky. Směr B „Pramen“ (vybral Oliver 21. 10. 2026) v živější podobě („modernější a zajímavější“,
   Oliver 21. 10. večer, DESIGN.md): čisté písmo Albert Sans a rozvržení z B, k tomu energie značky — černá a žlutá jako plochy
   (služby, kontakt), velké černobílé fotky až k okraji, pramen vlasů se smyčkou z loga přes celou stránku.
   Od 27. 10. 2026 místo šedých ploch máslová a Instagram na černé (Oliver vybral variantu 4); od 3. 11. béžová (--bezova,
   Tereza: máslová působila narůžověle, chtěla „něco do hněda/béžová“).
   Barvy jen jako tokeny v :root (shodně v text.css). Web nemá JavaScript — nic nečeká na skript, žádný obsah nezačíná
   na opacity:0; animace mění jen výřez čáry pramene a posun skupin slov v nadpisu úvodu (vždy CSS s both). */
:root{
  --bila:#FFFFFF; --cerna:#000000; --bezova:#E8DDCE; --bezova-svetla:#F3ECE2; --latte:#D8C4AB; --hneda:#3A2A1F; --hneda-svetla:#8C6A4E; --hneda-cislo:#7A5A40; --na-hnede:#E9DDCC; --text-2:#2B2B2B; --sediva:#5F5F5F; --linka:#CFCFCC; --zluta:#FEE601; --zluta-hover:#EBD400;
  --na-cerne:#BDBDBD; --linka-cerna:rgba(255,255,255,.22); --linka-zluta:rgba(0,0,0,.28);
  --ok:#1D6B3A; --chyba:#A3241B;
  --pismo:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --okraj:clamp(16px,4vw,56px);
  --ven:max(var(--okraj),calc((100vw - 1240px) / 2 + var(--okraj)));   /* vzdálenost obsahu od okraje okna — pro fotky „až k okraji“ */
  interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--pismo);font-size:18px;line-height:1.6;color:var(--cerna);background:var(--bila);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--zluta);color:var(--cerna)}
:focus-visible{outline:2px solid var(--cerna);outline-offset:4px}
.tmava :focus-visible{outline-color:var(--zluta)}
main:focus{outline:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--okraj)}
[id]{scroll-margin-top:24px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* odkaz „Přeskočit na obsah“ — viditelný jen při ovládání klávesnicí */
.skip{position:absolute;left:12px;top:-72px;z-index:100;background:var(--cerna);color:var(--bila);padding:12px 22px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* značka chybějícího údaje — jen v náhledovém buildu (SOUKROMY_NAHLED) */
.doplnit{display:inline-block;border:1px dashed currentColor;border-radius:4px;padding:0 8px;font-size:.78rem;font-weight:500;line-height:1.7;letter-spacing:0;opacity:.75;vertical-align:.15em}

/* tlačítka a odkazy — jemně reagují na najetí */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border:0;border-radius:999px;font:inherit;font-weight:600;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn-zluta{background:var(--zluta);color:var(--cerna)}
.btn-zluta:hover{background:var(--zluta-hover)}
.btn-cerna{background:var(--cerna);color:var(--bila)}
.btn-cerna:hover{background:#262626}
.odkaz{font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .25s}
.odkaz:hover{background-size:100% 2px}

/* hlavička */
.hlava-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px;padding-top:26px;padding-bottom:22px}
.logo{flex:none}
.logo img{width:100px}
.menu{display:flex;gap:32px;margin-left:auto;font-size:15px}
.menu a,.jazyk{color:var(--sediva);text-decoration:none;white-space:nowrap;background:linear-gradient(var(--cerna),var(--cerna)) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:color .2s,background-size .25s}
.menu a:hover,.jazyk:hover{color:var(--cerna);background-size:100% 1px}
.jazyk{font-size:15px}
.hlava-cta{min-height:44px;padding:0 22px;font-size:15px}
/* na počítači zůstává hlavička při scrollování nahoře (Oliver 27. 10. 2026: tlačítko Objednat se pořád po ruce);
   linka pod ní se objeví až po odscrollování (scroll-driven, čisté CSS; bez podpory je linka vidět rovnou) */
@media (min-width:901px){
  .hlava{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--linka)}
  .hlava-in{padding-top:18px;padding-bottom:18px}
  html{scroll-padding-top:96px}   /* kotvy i posun při zaostření (Tab / Shift+Tab) končí pod lepivou hlavičkou */
  @supports (animation-timeline:scroll()){
    .hlava{animation:hlava-linka linear both;animation-timeline:scroll(root);animation-range:0 120px}
  }
}
@keyframes hlava-linka{from{box-shadow:0 1px 0 transparent}to{box-shadow:0 1px 0 var(--linka)}}
/* lepivé nadpisy: u „Jak to probíhá“ a „Otázky“ zůstane levý sloupec s nadpisem na místě, zatímco obsah vpravo jede */
@media (min-width:901px){
  .postup>div:first-child,.otazky>div:first-child{position:sticky;top:120px}
}
/* 901–1099 px: užší mezery, aby se logo, menu, jazyk a tlačítko vešly na jeden řádek (jinak se hlavička na ~901–956 px
   zalomila do dvou řádků a měla 132 px — nález deploy-check 27. 10. 2026) */
@media (min-width:901px) and (max-width:1099px){
  .hlava-in{column-gap:24px}
  .menu{gap:18px}
  .hlava-cta{padding:0 18px}
}

/* ---------- úvod přes celou obrazovku ---------- */
.uvod-in{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;padding-left:var(--ven);min-height:clamp(600px,calc(100svh - 96px),920px)}
.uvod-text{padding:clamp(24px,4vw,56px) 0 clamp(96px,10vw,140px)}
/* nadpis přesahuje do fotky; difference = na bílé černý, přes fotku obrácený (bílý na tmavé, tmavý na světlé) */
/* nadpis úvodu: skupiny slov vyjedou zespodu ze svého ořezu. Jen transform (kompozitor) — ne clip-path, ten se v Safari
   neanimuje na kompozitoru (nález deploy-check 27. 10. 2026). Padding s negativním marginem dává místo háčkům a čárkám nad
   písmeny i dotahům pod nimi (y, p, čárka) — s rezervou i pro náhradní písmo, kdyby se woff2 nenačetlo. Ořez je jen kolem
   skupiny. Výchozí posun 150 % výšky skupiny = text i s háčky začíná celý pod ořezem. Bez animace (reduced motion, tisk,
   starý prohlížeč) je text vidět hned. */
.uvod h1 .radek{display:inline-block;overflow:hidden;overflow:clip;padding:.26em .08em .2em;margin:-.26em -.08em -.2em;vertical-align:top}
.uvod h1 .radek>span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .uvod h1 .radek>span{animation:radek-vyjed .95s cubic-bezier(.2,.7,.2,1) both}
  .uvod h1 .radek:nth-child(2)>span{animation-delay:.08s}
  .uvod h1 .radek:nth-child(3)>span{animation-delay:.16s}
}
@media print{.uvod h1 .radek>span{animation:none}}
@keyframes radek-vyjed{from{transform:translateY(150%)}to{transform:none}}
.uvod h1{position:relative;z-index:2;width:calc(100% + 14vw);font-weight:300;font-size:clamp(52px,8.4vw,140px);line-height:.94;letter-spacing:-.045em;color:var(--bila);mix-blend-mode:difference}
.perex{max-width:34ch;margin-top:36px;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--text-2)}
/* podpis pod perexem: krátká žlutá čárka, jméno tučně, „kadeřnice v Praze“ šedě — odděleně od výčtu služeb */
.podpis{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-top:18px;padding-left:40px;font-size:clamp(15px,1.2vw,17px);line-height:1.4}
.podpis::before{content:"";position:absolute;left:0;top:calc(.7em - 1.5px);width:28px;height:3px;background:var(--zluta)}   /* čárka u prvního řádku; zalomený řádek začne pod jménem */
.podpis strong{font-weight:600;color:var(--cerna)}
.podpis span{color:var(--sediva)}
@media (max-width:360px){.podpis{font-size:14px}}   /* na 320 px se podpis jinak o 6 px nevejde a zalomí se pod čárku */
.akce{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:40px}
.uvod-foto{position:relative;align-self:stretch;margin-left:clamp(24px,4vw,64px)}
.uvod-foto::before{content:"";position:absolute;z-index:-1;left:calc(clamp(28px,4vw,64px) * -1);right:0;top:46%;bottom:calc(clamp(28px,3vw,48px) * -1);background:var(--zluta)}   /* posunutá žlutá plocha */
.uvod-foto picture,.omne-foto picture{display:contents}   /* <picture> nesmí rozbít výšku obrázku (height:100%) */
.uvod-foto img{width:100%;height:100%;min-height:560px;object-fit:cover;object-position:50% 16%;background:var(--bezova)}
.uvod-foto::after{content:"";position:absolute;inset:0 0 52% 0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,0) 46%);-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent);pointer-events:none}   /* ztmavený levý horní okraj fotky: přesahující nadpis je přes něj díky difference světlý a čitelný (do 29. 10. chránil i žluté logo vložené ve fotce) */
.pramen{position:absolute;left:0;width:56%;bottom:clamp(20px,3vw,44px);height:90px;pointer-events:none;overflow:visible}
.pramen path,.pramen-tok path{fill:none;stroke:var(--cerna);stroke-width:1.25;stroke-linecap:round;vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:no-preference){
  .pramen path{stroke-dasharray:1600;animation:nakresli 2.2s cubic-bezier(.45,0,.2,1) .3s both}
}
@keyframes nakresli{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}

/* ---------- pás s fakty pod úvodem (includes/sections/fakta.php) ----------
   Tři čísla stejně lehkým písmem jako nadpisy, nad každým popisek a černá linka (jazyk služeb a návodu). Tři sloupce i na
   telefonu; čísla sedí na společné spodní lince, i když se popisky zalomí na různý počet řádků. */
.fakta{padding:clamp(56px,7vw,104px) 0 clamp(64px,8vw,120px)}
.fakta-in{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(14px,3vw,48px)}   /* sloupců tolik, kolik je položek */
.fakta-in>div{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(12px,1.6vw,22px);border-top:1px solid var(--cerna);padding-top:clamp(12px,1.4vw,18px)}
.fakta dt{font-size:clamp(13px,1.2vw,16px);line-height:1.35;color:var(--text-2)}
.fakta dd{margin:0;font-weight:300;font-size:clamp(36px,6.4vw,92px);line-height:.9;letter-spacing:-.05em}   /* „30–60 min“ se vejde na řádek od 561 px (víc než 92 px už ne) */
.fakta .jednotka{font-size:.34em;font-weight:500;letter-spacing:-.01em}
/* telefon: fakta pod sebou jako řádky (popisek vlevo, číslo vpravo) — ve třech úzkých sloupcích by se „30–60 min“ zalomilo */
@media (max-width:560px){
  .fakta-in{grid-auto-flow:row;gap:0}
  .fakta-in>div{flex-direction:row;align-items:baseline;gap:16px;padding:16px 0}
  .fakta dt{max-width:58%}
  .fakta dd{font-size:clamp(32px,10vw,44px)}
}

/* ---------- pramen přes celou stránku (includes/pramen-tok.php) ----------
   Leží pod sekcemi: barevné plochy ho zakrývají, ve světlých sekcích vede levým okrajem a dělá smyčky.
   Při scrollování se odkrývá shora dolů (clip-path s view timeline, čisté CSS) tak, aby konec čáry byl kousek nad spodním
   okrajem okna. Ne přes stroke-dashoffset: SVG je natažené (preserveAspectRatio="none") a s vector-effect se délka čáry
   neshoduje s pathLength — čára se pak kreslila nepravidelně (21. 10. 2026). Kde to prohlížeč neumí, je celá vidět.
   Jen od 1280 px (širší okraj). */
.tok{position:relative}
.tok>.sekce,.tok>.citat-pas{position:relative}   /* sekce leží nad pramenem (barevné ho zakryjí) */
.pramen-tok{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
@media (min-width:1280px){.pramen-tok{display:block}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .pramen-tok{animation:odkryj-tok linear both;animation-timeline:view();animation-range:cover 3% cover 91%}
  }
}
@keyframes odkryj-tok{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- sekce ---------- */
.sekce{padding:clamp(80px,11vw,152px) 0}
.sede{background:var(--bezova)}   /* béžová plocha (třída se jmenuje historicky „šedá“) */
/* Péče (od 3. 11. 2026, Oliver: „ať to není nuda“): teplý přechod ze světlé béžové do latte a jemné zrno jako ve fotkách.
   isolation: zrno (::before, z-index −1) leží nad pozadím sekce, ale pod obsahem — a multiply u fotek produktů se míchá
   s béžovou, ne s průhledností. */
.sede{isolation:isolate;background:linear-gradient(180deg,var(--bezova-svetla) 0%,var(--bezova) 42%,var(--latte) 100%)}
.sede::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.42;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .11 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)'/%3E%3C/svg%3E") 0 0/180px 180px}
.tmava{background:var(--cerna);color:var(--bila)}
.zluta{background:var(--zluta)}
.sekce-ven{overflow-x:clip}
.sekce h2{font-weight:300;font-size:clamp(38px,5.4vw,76px);line-height:1;letter-spacing:-.04em;max-width:16ch;text-wrap:balance}
.uvodni{max-width:54ch;margin-top:22px;color:var(--text-2)}
.tmava .uvodni{color:var(--na-cerne)}

/* služby — velké řádky na černé, celý řádek vede do formuláře s předvybranou službou */
.sluzby{margin-top:clamp(48px,6vw,80px);padding:0;list-style:none;border-bottom:1px solid var(--linka-cerna)}
.sluzba{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.25fr) minmax(0,.6fr);gap:12px 48px;align-items:baseline;padding:36px 0;border-top:1px solid var(--linka-cerna)}
.sluzba::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--zluta);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.sluzba h3{font-weight:300;font-size:clamp(30px,3.4vw,50px);line-height:1.05;letter-spacing:-.03em;transition:color .25s}
/* posouvá se jen vnitřní span — transform na h3 by z něj udělal containing block pro ::after a klikací plocha by se zmenšila na nadpis */
.sluzba-nazev{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sluzba-odkaz{text-decoration:none}
.sluzba-odkaz::after{content:"";position:absolute;inset:0}   /* klikací celý řádek */
.sluzba .popis{font-size:17px;color:var(--na-cerne)}
.sluzba .cena{font-weight:600;text-align:right;color:var(--bila)}
.sluzba .cena small{display:block;font-weight:400;font-size:15px;color:var(--na-cerne)}
.sluzba:hover::before,.sluzba:focus-within::before{width:100%}
.sluzba:hover h3,.sluzba:focus-within h3{color:var(--zluta)}
.sluzba:hover .sluzba-nazev,.sluzba:focus-within .sluzba-nazev{transform:translateX(10px)}
/* proklik místo ceny (data/sluzby.php 'akce'): žlutý text se šipkou, celý řádek je stejně odkazem */
.sluzba-akce{color:var(--zluta)}
.sluzba-akce span{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sluzba:hover .sluzba-akce span,.sluzba:focus-within .sluzba-akce span{transform:translateX(6px)}
.sluzba-odkaz:focus-visible{outline:none}
.sluzba:focus-within{outline:2px solid var(--zluta);outline-offset:6px}

/* postup — skutečná posloupnost, proto čísla */
.postup{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.kroky{padding:0;list-style:none;counter-reset:krok}
.kroky li{counter-increment:krok;display:grid;grid-template-columns:clamp(72px,7vw,104px) 1fr;gap:4px 16px;padding:28px 0;border-top:1px solid var(--linka)}
.kroky li:last-child{border-bottom:1px solid var(--linka)}
.kroky li::before{content:counter(krok,decimal-leading-zero);grid-row:span 2;font-weight:300;font-size:clamp(44px,4.6vw,68px);line-height:.9;letter-spacing:-.05em;color:var(--cerna)}
.kroky strong{font-weight:600;font-size:20px}
.kroky span{font-size:17px;color:var(--text-2)}

/* proměny */
.promeny{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(16px,2vw,24px);margin-top:48px;padding:0;list-style:none}
.promeny img{width:100%;aspect-ratio:4/5;object-fit:cover}
.promeny figcaption{margin-top:10px;font-size:15px;color:var(--sediva)}
/* pozvánka na Instagram, dokud nejsou fotky proměn (a odkaz pod galerií, až budou) — velký typografický odkaz */
.ig-pas h2,.ig-pas h3{max-width:12ch;font-weight:300;font-size:clamp(38px,5.4vw,76px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.ig-pas p{margin-top:20px}
.ig-odkaz{font-weight:300;font-size:clamp(40px,7vw,104px);line-height:1;letter-spacing:-.045em;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:6px;transition:background-size .3s,color .2s}
.ig-odkaz:hover{background-size:100% 6px}
.ig-pod-promenami{margin-top:clamp(64px,8vw,104px)}
/* mřížka vybraných příspěvků (data/instagram.php) — jako profil na Instagramu: 3 sloupce čtverců s úzkou mezerou.
   Najetí / zaostření: fotka se lehce přiblíží a překryje žlutou (multiply = žlutý duotón), uprostřed znak Instagramu.
   Překryv a znak jsou dekorace — fotka sama je vidět vždy. */
.ig-hlava{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.ig-hlava h2,.ig-hlava h3{max-width:14ch;font-weight:300;font-size:clamp(38px,5.4vw,76px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.ig .ig-doplnit{margin-top:16px}
.ig-mrizka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(3px,.6vw,8px);margin-top:clamp(32px,4vw,48px);padding:0;list-style:none}
.ig-dlazdice{position:relative;display:block;overflow:hidden;background:var(--bila)}
.ig-dlazdice picture{display:contents}
.ig-dlazdice img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ig-dlazdice::after{content:"";position:absolute;inset:0;background:var(--zluta);mix-blend-mode:multiply;opacity:0;transition:opacity .3s}
.ig-znak{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:var(--cerna);opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s}
.ig-znak svg{width:clamp(28px,3.4vw,44px);height:auto}
.ig-dlazdice:focus-visible img{transform:scale(1.05)}
.ig-dlazdice:focus-visible::after{opacity:.9}
.ig-dlazdice:focus-visible .ig-znak{opacity:1;transform:none}
.ig-dlazdice:focus-visible{outline:2px solid var(--cerna);outline-offset:-2px}   /* dovnitř — mezera mřížky je na telefonu jen 3 px */
@media (hover:hover){   /* jen pro myš: na dotykovém displeji by první klepnutí ukázalo překryv místo otevření odkazu */
  .ig-dlazdice:hover img{transform:scale(1.05)}
  .ig-dlazdice:hover::after{opacity:.9}
  .ig-dlazdice:hover .ig-znak{opacity:1;transform:none}
}

/* o mně — velká fotka až k pravému okraji okna */
.omne{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"text foto";gap:clamp(40px,6vw,96px);align-items:center}
.omne-text{grid-area:text}
.omne-foto{grid-area:foto;margin-right:calc(var(--ven) * -1)}
.omne-foto img{width:100%;aspect-ratio:5/6;object-fit:cover;object-position:50% 30%;background:var(--bezova)}
.omne p{max-width:50ch;margin-top:20px;color:var(--text-2)}
.omne h2+p{margin-top:32px}
/* pás s citátem — obří lehké písmo na černé, vpravo detail s prameny vlasů přes celou výšku pásu až k okraji okna
   (od 29. 10. 2026); tmavé okraje fotky splývají s černou */
.citat-pas-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);min-height:clamp(480px,48vw,720px)}
.citat-pas blockquote{margin:0}
.citat-pas-citat{align-self:center;margin:0;padding:clamp(72px,10vw,140px) 0}
.citat-pas-text{font-weight:300;font-size:clamp(46px,6.6vw,116px);line-height:.95;letter-spacing:-.05em;text-wrap:balance}
.citat-pas-foto{position:relative;margin:0 calc(var(--ven) * -1) 0 0}
.citat-pas-foto picture{display:contents}
.citat-pas-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%;background:var(--cerna)}   /* absolutně: výšku pásu určuje citát, ne vysoká fotka (Safari by s height:100% pás natáhl na výšku fotky) */
.citat-pas-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cerna),rgba(0,0,0,0) 24%);pointer-events:none}   /* levý okraj fotky plynule do černé */
/* Instagram na černé (od 27. 10. 2026) */
.tmava .promeny figcaption{color:var(--na-cerne)}
.tmava .ig-dlazdice:focus-visible{outline-color:var(--cerna)}   /* černý obrys uvnitř, přes žlutý překryv je vidět */
.tmava .ig-odkaz{color:var(--bila)}

/* návod „Péče o prodloužené vlasy“ (data/pece-navod.php) — bloky s linkou nahoře jako služby, body s tečkou */
.navod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,48px) clamp(24px,3vw,48px);margin-top:clamp(40px,5vw,64px)}
.navod-blok{padding-top:20px;border-top:1px solid var(--cerna)}
.navod-blok h3{font-weight:600;font-size:20px;line-height:1.25}
.navod-blok ul{margin-top:14px;padding:0;list-style:none}
.navod-blok li{position:relative;padding-left:18px;font-size:16.5px;line-height:1.5;color:var(--text-2)}
.navod-blok li+li{margin-top:10px}
.navod-blok li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--cerna)}
/* velká čísla bloků návodu — stejný jazyk jako „Jak to probíhá“, jen v hnědé */
.navod{counter-reset:navod}
.navod-blok{counter-increment:navod}
.navod-blok h3::before{content:counter(navod,decimal-leading-zero);display:block;margin-bottom:14px;font-weight:300;font-size:clamp(40px,4vw,60px);line-height:.9;letter-spacing:-.05em;color:var(--hneda-cislo)}   /* tmavší než --hneda-svetla: kontrast ≥ 3:1 i přes zrno (deploy-check 3. 11.) */
/* bod 7 „Pravidelná údržba“ (Tereza: „hodně důležitý“) — tmavě hnědá karta přes celou šířku, žluté číslo, body ve sloupcích */
.navod-blok-dulezite{grid-column:1/-1;padding:clamp(28px,3.6vw,52px);border-top:0;background:var(--hneda);margin-top:clamp(8px,1.5vw,16px)}
.navod-blok-dulezite h3{color:var(--bila)}
.navod-blok-dulezite h3::before{color:var(--zluta)}
.navod-blok-dulezite li{color:var(--na-hnede)}
.navod-blok-dulezite li::before{background:var(--zluta)}
/* pramen se smyčkou z loga v hnědé kartě (jen dekorace); při scrollování se odkryje zleva doprava (výřez čáry, jako pramen
   přes stránku) — kde prohlížeč view() neumí (Safari 16), je celý vidět hned */
.navod-blok-dulezite{position:relative;overflow:hidden;overflow:clip}   /* clip, ne hidden: hidden dělá z karty posuvný kontejner a view() by se měřil vůči ní */
.navod-blok-dulezite h3,.navod-blok-dulezite ul{position:relative}
.navod-pramen{position:absolute;right:0;top:clamp(34px,4vw,58px);width:min(64%,720px);height:84px;pointer-events:none;overflow:visible}
.navod-pramen path{fill:none;stroke:var(--hneda-svetla);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .navod-pramen{animation:odkryj-zleva linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
  }
}
@keyframes odkryj-zleva{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:700px){.navod-pramen{top:12px;width:58%;height:60px}}   /* nad nadpis, vedle čísla 07 — jinak by čára šla přes konec nadpisu */
.navod-blok-dulezite ul{columns:3;column-gap:clamp(24px,3vw,48px)}
.navod-blok-dulezite li{break-inside:avoid;margin-bottom:10px}
.navod-blok-dulezite li+li{margin-top:0}
.pece-produkty-nadpis{margin-top:clamp(72px,9vw,120px);font-weight:300;font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.03em}
/* péče — tři stejné sloupce (na tabletu a telefonu řádky, viz media queries níž) */
.produkty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);margin-top:56px;padding:0;list-style:none}
/* produkty bez bílých dlaždic: bílé pozadí fotek se v režimu multiply rozpustí do béžové plochy (žádný katalog e-shopu).
   Fotky mají společnou výšku, ne poměr stran — nadpisy pak sedí v jedné řadě a vysoká fotka S1 nenafoukne plochu. */
.produkty figure{overflow:hidden}
.produkty img{width:100%;height:clamp(260px,27vw,380px);object-fit:contain;padding:6%;mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (forced-colors:active){.produkty img{mix-blend-mode:normal}}   /* v režimu vysokého kontrastu by multiply fotky zčernal */
@media (hover:hover){.produkty li:hover img{transform:scale(1.04)}}   /* na dotyku by fotka po klepnutí zůstala přiblížená */
.produkty h3,.produkty h4{margin:20px 0 0;font-weight:600;font-size:20px;line-height:1.3}
.produkty p{margin-top:8px;font-size:16px;color:var(--text-2)}

/* otázky — plynulé rozbalení tam, kde ho prohlížeč umí (::details-content), jinak běžné <details> */
.otazky{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.otazky-seznam details{border-top:1px solid var(--linka)}
.otazky-seznam details:last-child{border-bottom:1px solid var(--linka)}
.otazky-seznam summary{display:flex;justify-content:space-between;gap:24px;padding:24px 0;font-weight:600;font-size:20px;cursor:pointer;list-style:none;transition:padding-left .25s}
.otazky-seznam summary:hover{padding-left:8px}
.otazky-seznam summary::-webkit-details-marker{display:none}
.otazky-seznam summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bezova);font-weight:400;font-size:22px;line-height:1;transition:transform .3s,background-color .2s}
.otazky-seznam details[open] summary::after{transform:rotate(45deg);background:var(--zluta)}
.otazky-seznam details p{max-width:60ch;padding-bottom:26px;color:var(--text-2)}
@supports selector(::details-content){
  .otazky-seznam details::details-content{block-size:0;overflow-y:clip;transition:block-size .35s cubic-bezier(.2,.7,.2,1),content-visibility .35s allow-discrete}
  .otazky-seznam details[open]::details-content{block-size:auto}
}

/* kontakt — celý na žluté */
.kontakt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.kontakt h2{font-size:clamp(46px,5.8vw,86px)}
.kanaly{margin-top:40px;padding:0;list-style:none}
.kanaly li{border-top:1px solid var(--linka-zluta)}
.kanaly li:last-child{border-bottom:1px solid var(--linka-zluta)}
.kanaly a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:20px 0;text-decoration:none;transition:padding-left .25s}
.kanaly a:hover{padding-left:8px}
.kanaly a span{color:var(--text-2)}
.kontakt .btn{margin-top:32px}
.kontakt .misto{margin-top:24px;color:var(--text-2)}
.formular{display:grid;gap:24px;align-content:start}
.formular label{display:grid;gap:4px;font-size:15px;color:var(--text-2)}
.formular label small{font-size:inherit}
.formular input,.formular textarea,.formular select{width:100%;font:inherit;font-size:18px;color:var(--cerna);padding:10px 0;border:0;border-bottom:1px solid var(--cerna);border-radius:0;background:transparent}
.formular select{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center;padding-right:28px;cursor:pointer}
.formular input:focus-visible,.formular textarea:focus-visible,.formular select:focus-visible{outline:none;border-bottom-width:2px;padding-bottom:9px;background-color:rgba(0,0,0,.06)}
.formular textarea{min-height:120px;resize:vertical}
.formular .btn{justify-self:start;margin-top:0}
.formular .pozn{font-size:14px;color:var(--text-2)}
.past{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.hlaska{padding:14px 18px;border-left:3px solid currentColor;background:var(--bila);font-weight:500}
.hlaska-ok{color:var(--ok)}
.hlaska-chyba{color:var(--chyba)}

/* patička — černá, na konci velké žluté logo přes celou šířku obsahu (výrazný konec stránky, od 27. 10. 2026) */
.pata{padding:clamp(64px,8vw,112px) 0 clamp(24px,3vw,36px);background:var(--cerna);color:var(--na-cerne);font-size:15px}
.pata-sloupce{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(24px,4vw,64px)}
.pata .pata-nadpis{margin:0 0 14px;color:var(--bila);font-weight:600}   /* .pata .… — jinak ho přebije .pata p{margin:0} */
.pata ul{list-style:none;margin:0;padding:0}
.pata li+li{margin-top:6px}
.pata p{margin:0}
.pata p+p{margin-top:14px}
.pata .pata-nadpis+*{margin-top:0}
.pata-menu{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pata a{text-decoration:none}
.pata a:hover{color:var(--bila);text-decoration:underline}
.pata :focus-visible{outline-color:var(--zluta)}
.pata-logo{display:block;width:100%;height:auto;margin-top:clamp(56px,8vw,112px)}
.pata-spodek{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:clamp(20px,2.4vw,32px);padding-top:18px;border-top:1px solid var(--sediva);font-size:13px}
.pata .nahoru{margin-left:auto}

/* spodní lišta rychlého kontaktu — jen na telefonu */
.lista{display:none}

@media (max-width:900px){
  .hlava-in{padding-top:18px;padding-bottom:14px}
  .jazyk{margin-left:auto}
  /* menu jako vodorovně posuvný řádek; vybledlý pravý okraj napoví, že pokračuje (padding vpravo ≥ šířka přechodu,
     aby se poslední položka dala dorolovat do plné barvy) */
  .menu{order:3;flex-basis:100%;margin:0 calc(var(--okraj) * -1);padding:4px 56px 6px var(--okraj);gap:24px;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
  .menu::-webkit-scrollbar{display:none}
  .uvod-in{grid-template-columns:minmax(0,1fr);min-height:0;padding-right:var(--okraj)}
  .uvod-text{padding-bottom:40px}
  .uvod h1{width:auto}
  .uvod-foto{margin:0 calc(var(--okraj) * -1) 0 0}
  .uvod-foto::before{left:calc(var(--okraj) * -1);top:40%;bottom:-24px;right:24%}
  .uvod-foto img{min-height:0;aspect-ratio:4/5}
  .pramen{display:none}
  .uvod{padding-bottom:24px}
  .postup,.otazky,.kontakt{grid-template-columns:minmax(0,1fr)}
  .hlava-cta{display:none}   /* na telefonu objednání drží spodní lišta */
  .navod{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .navod-blok-dulezite ul{columns:2}
  .sluzba{grid-template-columns:minmax(0,1fr);gap:10px}
  .sluzba .cena{text-align:left}
  .omne{grid-template-columns:minmax(0,1fr);grid-template-areas:"foto" "text"}
  .omne-foto{margin:0 calc(var(--okraj) * -1)}
  .citat-pas-in{grid-template-columns:minmax(0,1fr);gap:0;min-height:0}
  .citat-pas-citat{padding:clamp(72px,12vw,112px) 0 clamp(40px,8vw,64px)}
  .citat-pas-text{font-size:clamp(46px,9.5vw,88px)}
  .citat-pas-foto{margin:0 calc(var(--okraj) * -1)}
  .citat-pas-foto img{position:static;height:auto;aspect-ratio:4/5;max-height:720px}   /* na tabletu by 4:5 přes celou šířku byla přes 1100 px */
  .citat-pas-foto::after{background:linear-gradient(180deg,var(--cerna),rgba(0,0,0,0) 22%)}   /* na telefonu je fotka pod citátem: horní okraj do černé */
  /* na tabletu a telefonu produkty jako řádky s fotkou vlevo — tři úzké sloupce by zmačkaly text, plná šířka by byla hlavně prázdná */
  .produkty{grid-template-columns:minmax(0,1fr);gap:36px}
  .produkty li{display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:auto 1fr;gap:4px 28px;align-items:start}   /* výšku fotky dorovná řádek textu, ne nadpisu */
  .produkty figure{grid-row:span 2}
  .produkty img{height:auto;aspect-ratio:1;padding:6%}
  .produkty h3,.produkty h4{margin-top:12px}
  .produkty p{margin-top:0}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:fixed;inset:auto 0 0 0;z-index:15;background:var(--bila);border-top:1px solid var(--linka);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .lista a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none}
  .lista a:first-child{background:var(--zluta)}
  .pata-sloupce{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pata-sloupce>div:last-child{grid-column:1/-1}
  .pata li+li{margin-top:12px}   /* na dotyku víc místa mezi odkazy */
  .pata-menu{gap:12px}
}
@media (max-width:560px){
  .navod{grid-template-columns:minmax(0,1fr)}
  .navod-blok-dulezite ul{columns:1}
  .navod-blok-dulezite{margin-left:calc(var(--okraj) * -1);margin-right:calc(var(--okraj) * -1);padding-left:var(--okraj);padding-right:var(--okraj)}   /* na telefonu karta až k okrajům */
  .produkty{gap:28px}
  .produkty li{grid-template-columns:112px minmax(0,1fr);gap:4px 18px}
  .produkty img{padding:10%}
  .produkty h3,.produkty h4{margin-top:0;font-size:18px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.btn:hover,.sluzba:hover .sluzba-nazev,.sluzba:hover .sluzba-akce span{transform:none}}