/* ═══════════════════════════════════════════════════
   SHEN · spoločné štýly — dizajn v3 „tichá elegancia"
   papier · tuš · hodváb · tenké linky · vzduch
   (zdieľané všetkými stránkami; špecifiká sú v <style> stránok)
═══════════════════════════════════════════════════ */
:root{
  --paper:    #FCF5EC;            /* presná farba pozadia loga */
  --warm:     #FDFBF7;
  --paper-2:  #F5EBDB;
  --paper-3:  #EDE0C9;
  --white:    #FFFFFF;
  --ink:      #232F25;
  --body:     #55614F;
  --green:    #3C5A40;
  --green-deep:#2C4231;
  --sage:     #93A48B;
  --gold:     #A98B58;
  --seal:     #AE3B22;
  --hair:     rgba(35,47,37,.16);
  --hair-soft:rgba(35,47,37,.09);
  /* JEDINÝ font na celom webe — Manrope. Rozlíšenie len hrúbkou: 400 obyčajné, 600 tučné.
     --serif a --it zostávajú len ako aliasy, aby staré pravidlá po webe fungovali;
     nové pravidlá píš rovno s var(--sans). */
  --sans:     "Manrope", "Segoe UI", sans-serif;
  --serif:    var(--sans);
  --it:       var(--sans);
  --cjk:      "Songti SC","SimSun","Noto Serif SC",serif;   /* len čínske znaky — Manrope ich nemá */
  --pad:      clamp(24px, 5vw, 96px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:99px}   /* presne pod prilepeným headerom (100 px) — bez prúžku predošlej sekcie */
body{
  font-family:var(--sans);
  background:var(--white);
  color:var(--body);
  font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* nadpisy — rovnaký font ako text, odlíšené len tučným rezom
   (Manrope má vyšší strednú výšku než pôvodný Garamond, preto tesnejší prestrih a riadkovanie) */
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;color:var(--ink);line-height:1.2;letter-spacing:-.015em}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
/* zvýraznenie v texte — jednotne len tučným písmom, farbu dedí od okolitého textu
   (farebný bold ostáva len v akcentoch: nadpisy, štatistiky, štítky — tie majú vlastné pravidlá) */
strong,b{font-weight:600}
/* jediná povolená kurzíva na webe — prepis čínskych termínov v článkoch (napr. Qi, Fei Re) */
em.it{font-style:italic}

/* papierová textúra */
.tex{position:relative}
.tex::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ——— typografické atómy ——— */
.lbl{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
}
.vtext{
  writing-mode:vertical-rl;font-family:var(--cjk);
  letter-spacing:.6em;font-size:13px;color:var(--ink);opacity:.45;user-select:none;
}
.btn{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid var(--green);color:var(--green);background:transparent;
  padding:10px 26px;border-radius:10px;font-family:var(--sans);
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;transition:.35s;
}
.btn:hover{background:var(--green);color:var(--paper)}
.btn.solid{background:var(--green);color:var(--paper)}
.btn.solid:hover{background:var(--ink);border-color:var(--ink)}
.btn.pale{border-color:rgba(252,245,236,.55);color:var(--paper)}
.btn.pale:hover{background:var(--paper);color:var(--green-deep);border-color:var(--paper)}
.btn.quiet{
  border-color:var(--hair);color:var(--ink);background:rgba(255,255,255,.45);
}
.btn.quiet:hover{border-color:var(--green);background:var(--green);color:var(--paper)}
.link{
  font-size:11.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--green);display:inline-flex;align-items:center;gap:12px;transition:.3s;
}
.link::after{content:"⟶";font-size:14px;transition:.3s}
.link:hover{color:var(--seal)}
.link:hover::after{transform:translateX(6px)}

/* ═══ HLAVIČKA ═══ */
[data-header]{height:100px}   /* rezervované miesto, kým sekcia-header.js hlavičku vloží */
header{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  transition:box-shadow .3s;
}
header.scrolled{box-shadow:0 14px 40px -22px rgba(35,47,37,.35)}
.nav{display:flex;align-items:center;gap:30px;height:100px;padding:0 var(--pad)}
.brand{margin-right:auto}
.brand img{height:78px;width:auto}
nav ul{display:flex;gap:clamp(10px,1.5vw,24px);list-style:none;align-items:center}
nav a{
  color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 0;border-bottom:1px solid transparent;transition:.3s;
}
nav a:hover{color:var(--seal);border-bottom-color:var(--seal)}
nav a.act{color:var(--seal);border-bottom-color:var(--seal)}
/* submenu Diagnostika a liečba */
nav li{position:relative}
.has-sub > a::after{content:"▾";font-size:9px;margin-left:7px;opacity:.6;display:inline-block}
nav .sub{
  display:block;position:absolute;top:100%;left:-20px;min-width:230px;
  background:#FFFFFF;border:1px solid var(--hair);border-radius:14px;
  padding:8px 0;box-shadow:0 34px 70px -28px rgba(35,47,37,.5);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s;
}
nav .sub li + li a{border-top:1px dashed var(--hair-soft)}
nav li:hover > .sub,nav li:focus-within > .sub,nav li.open > .sub{opacity:1;visibility:visible;transform:none}
nav .sub a{display:block;padding:11px 22px;border-bottom:none;white-space:nowrap}
nav .sub a:hover{color:var(--seal)}
/* „Objednať sa" — položka len pre mobilné menu */
nav li.m-only{display:none}
nav li.m-only a{color:var(--green)}
#menu-toggle{display:none}
.hamburger{display:none;cursor:pointer;padding:8px}
.hamburger span{display:block;width:25px;height:1.5px;background:var(--ink);margin:6px 0;transition:.3s}

/* ═══ HODVÁBNY PÁS — CTA (podstránky) ═══ */
.silk{
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(252,245,236,.08), transparent 50%),
    linear-gradient(160deg,#31492F 0%, var(--green-deep) 55%, #24381F 100%);
  padding:clamp(40px,4.5vw,64px) var(--pad);
  position:relative;overflow:hidden;
}
.silk::before{ /* jemné vertikálne hodvábne vlákna */
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:repeating-linear-gradient(90deg, rgba(252,245,236,.10) 0 1px, transparent 1px 7px);
}
.silk .inner{position:relative;max-width:1500px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.silk h2{font-family:var(--sans);font-size:clamp(20px,2vw,28px);color:#F6EEDF;line-height:1.45;max-width:24em}
.silk h2 em{font-weight:600;color:#D8C9A4}
.silk .cta{display:flex;gap:14px;flex-wrap:wrap}

/* ═══ KONTAKT ═══ */
.contact-sec{
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(60,90,64,.07), transparent 55%),
    linear-gradient(180deg,#FBF7EF 0%, var(--paper-2) 100%);
  padding:clamp(44px,5vw,80px) var(--pad) clamp(80px,9vw,150px);
  position:relative;overflow:hidden;
}
.contact{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,4vw,64px);max-width:1500px;margin:0 auto;position:relative;z-index:1}
.contact .c-list{
  /* bez odsadenia zhora — karta s údajmi začína v rovnakej výške ako formulár
     vedľa nej (odsadenie pôvodne držalo odstup od nadpisu sekcie).
     Vnútorné odsadenie je zladené s .form: zvislé je o 16 px nižšie, pretože
     prvý .c-item si pridáva vlastných 16 px — výsledná biela plocha po text
     je tak v oboch kartách rovnaká. */
  background:#FFFFFF;border:1px solid var(--hair-soft);
  border-radius:22px;padding:clamp(16px,1.8vw,26px) clamp(28px,2.9vw,42px);
  box-shadow:0 30px 70px -52px rgba(35,47,37,.35);
}
.c-item{
  display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:baseline;
  padding:16px 0;border-top:1px dashed var(--hair-soft);font-size:15px;
}
.c-item:first-child{border-top:none}
.c-item .k{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600}
.c-item b{color:var(--ink);font-weight:600}
.c-item span{display:block;font-size:13.5px}
.form{
  background:#FFFFFF;border:1px solid var(--hair-soft);border-radius:26px;
  padding:clamp(28px,2.9vw,42px);   /* zladené s .c-list vedľa */
  box-shadow:0 50px 100px -60px rgba(35,47,37,.45);
}
.form h3{font-size:clamp(21px,1.75vw,26px);margin-bottom:6px}
.form .formnote{font-size:15.5px;line-height:1.6;color:var(--body);margin-bottom:28px}
/* prvý krok formulára — výber dôvodu správy (výberové karty) */
.f-step{
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:12px;
}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px}
.choice label{
  display:flex;gap:12px;align-items:center;cursor:pointer;
  padding:16px 18px;border:1px solid var(--hair);border-radius:14px;
  background:var(--warm);transition:.25s;
}
.choice label:hover{border-color:var(--green)}
.choice input{display:none}
.choice .c-radio{
  flex:none;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--hair);
  display:grid;place-items:center;transition:.25s;
}
.choice .c-radio::after{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--green);transform:scale(0);transition:.25s;
}
.choice label:has(input:checked){
  border-color:var(--green);background:#FFFFFF;
  box-shadow:0 12px 26px -20px rgba(60,90,64,.6);
}
.choice label:has(input:checked) .c-radio{border-color:var(--green)}
.choice label:has(input:checked) .c-radio::after{transform:scale(1)}
.choice .c-txt b{display:block;font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.35}
@media(max-width:560px){.choice{grid-template-columns:1fr}}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{
  width:100%;padding:14px 18px;margin-bottom:16px;
  border:1px solid var(--hair);border-radius:12px;
  background:var(--warm);font-family:var(--sans);font-size:15px;color:var(--ink);
  outline:none;transition:.25s;
}
.form input:focus,.form textarea:focus{border-color:var(--green);background:#FFFFFF}
.form ::placeholder{color:#9FA694;letter-spacing:.02em}
.form textarea{min-height:110px;resize:vertical}
.form .btn{margin-top:10px}
/* honeypot — pasca na spamboty, pole je pre ľudí neviditeľné */
.hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ═══ PÄTIČKA ═══ */
footer{
  background:var(--ink);color:rgba(245,238,224,.66);
  padding:clamp(70px,7vw,110px) var(--pad) 40px;position:relative;overflow:hidden;
}
footer .enso{position:absolute;right:-120px;top:-100px;width:430px;opacity:.05;pointer-events:none}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:clamp(36px,5vw,80px);position:relative;z-index:1;max-width:1500px;margin:0 auto}
.f-brand .flogo{display:inline-block;margin-bottom:22px}
.f-brand .flogo img{height:120px;width:auto;opacity:.96}
.f-brand p{font-size:14px;max-width:34ch;line-height:1.8}
footer h4{
  color:#C9B896;font-size:10.5px;letter-spacing:.38em;text-transform:uppercase;
  margin-bottom:20px;font-family:var(--sans);font-weight:600;
}
footer ul{list-style:none}
footer li{padding:5px 0;font-size:14px;line-height:1.7}
footer a{transition:.25s}
footer a:hover{color:#F5EEE0}
.f-contact ul{
  background:rgba(245,238,224,.05);border:1px solid rgba(245,238,224,.16);
  border-radius:16px;padding:16px 22px;
}
.f-contact li{padding:6px 0}
.f-contact li + li{border-top:1px dashed rgba(245,238,224,.12)}
.f-contact a{color:#F5EEE0;font-weight:600}
footer .vtext{color:#F5EEE0;opacity:.3;font-size:14px;height:180px}
.f-bottom{
  margin-top:clamp(50px,6vw,80px);padding-top:24px;
  border-top:1px solid rgba(245,238,224,.12);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(245,238,224,.4);
  max-width:1500px;margin-left:auto;margin-right:auto;position:relative;z-index:1;
}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.15s}.rv.d2{transition-delay:.3s}.rv.d3{transition-delay:.45s}

/* ═══ spoločná responzivita ═══ */
@media(max-width:1180px){
  .contact{grid-template-columns:minmax(0,1fr);gap:56px}  /* stĺpec sa smie zúžiť pod min-content obsahu */
  /* v jednom stĺpci zostáva rovnaké poradie ako na desktope: najprv údaje
     s mapou, formulár až pod mapou (poradie prevzaté z DOM, bez `order`) */
  .f-grid{grid-template-columns:1fr 1fr;row-gap:44px}
  footer .vtext{display:none}
}
/* pod 1100 px sa menu (8 položiek) už nezmestí do riadku vedľa loga — burger menu */
@media(max-width:1100px){
  nav{
    position:fixed;inset:100px 0 auto 0;background:var(--paper);
    max-height:0;overflow:hidden;transition:max-height .4s ease;
  }
  nav ul{flex-direction:column;gap:0;padding:14px var(--pad) 26px;align-items:flex-start}
  nav li{width:100%}
  nav a{display:block;padding:14px 0;font-size:14px}
  nav .sub{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;background:transparent;
    padding:0 0 6px 20px;min-width:0;
  }
  nav .sub a{padding:10px 0;font-size:13px}
  nav li.m-only{display:list-item}
  /* linka aj tieň patria len otvorenému menu — pri zavretom (max-height:0)
     by z nich pod hlavičkou zostal viditeľný šedý prúžok */
  #menu-toggle:checked ~ nav{
    max-height:720px;
    border-bottom:1px solid var(--hair);box-shadow:0 30px 60px -30px rgba(35,47,37,.4);
  }
  .hamburger{display:block}
  #menu-toggle:checked ~ .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  #menu-toggle:checked ~ .hamburger span:nth-child(2){opacity:0}
  #menu-toggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
@media(max-width:880px){
  .form .row{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr;row-gap:40px}
  .f-brand .flogo img{height:120px}
  .f-bottom{flex-direction:column;gap:6px}
}

/* ═══════════════════════════════════════════════════
   MOBIL — väčšie, čitateľnejšie písmo na celom webe
   (!important prebíja rovnaké selektory v inline štýloch stránok)
═══════════════════════════════════════════════════ */
@media(max-width:880px){
  body{font-size:17px}

  /* nadpisy — v jednotnom Manrope stačí menšia veľkosť než v pôvodnom Garamonde
     (má vyššiu strednú výšku), od textu ich odlišuje tučný rez */
  h1{font-size:clamp(30px,7.8vw,36px) !important;line-height:1.2}
  h2{font-size:clamp(25px,6.6vw,28px) !important;line-height:1.28}
  .pcard h3,.herb h3,.flow h3,.post h3,.edu-card h3{font-size:22px !important}

  /* štítky — na mobile tesnejšie preloženie (na desktope .42em);
     s pôvodným preložením sa krátke štítky lámali na dva riadky
     (napr. „Tradičná čínska medicína" v hlavičke blogu) */
  .lbl{font-size:12.5px !important;letter-spacing:.2em}
  nav a{font-size:15px !important}
  .btn{font-size:13px !important}
  .link{font-size:12.5px !important}

  /* úvodné vety a poznámky — jednotné s bežným textom, bez kurzívy */
  .page-hero .lead-it,.slide .lead-it{font-size:17px !important;line-height:1.6}
  /* poznámka nad formulárom je len sprievodný text — na mobile ju držíme
     menšiu než ostatné úvodné vety, aby netlačila na formulár */
  .form .formnote{font-size:15px !important}
  .ref p{font-size:16px !important}
  .feat .q{font-size:22px !important}

  /* úvody stránok */
  .page-hero .hero-p{font-size:16.5px !important}
  .slide p.tx{font-size:16.5px !important}
  .slide .meta .stat span{font-size:11.5px !important}

  /* bežné odseky, popisy a karty na všetkých podstránkach */
  .intro-left > p,.modes-left > p,.herbs-intro p,
  .pcard > p,.herb p.ds,.m-row .ds,.kids-strip p,.herbs-foot p,.herbs-note,
  .tl span,.feat-post p,.post p,
  .about p,.author p,.edu-card p,.flow p,.pay-strip p,
  .qa-left > p,.step p,.steps-foot p,.tip-box p,
  .pricing .left p,.price-row .desc{font-size:16px !important}
  .pcard .pnote,.certs-note,.cert figcaption{font-size:14.5px !important}
  .pcard .price-line .t{font-size:14px !important}
  .herb .price i{font-size:12px !important}
  .herb .form-name{font-size:16px !important}

  /* malé štítky a metaúdaje */
  .post .tag,.post .meta,.feat-post .tag,.feat-post .meta,
  .ref .who,.feat .who,.author .who,.edu-card .yrs,
  .pcard .p-head .sub{font-size:12.5px !important}

  /* kontakt */
  .c-item{font-size:16px !important}
  .c-item span{font-size:14.5px !important}
  .c-item .k{font-size:12px !important}

  /* formulár — min. 16 px aj kvôli iOS (menšie písmo zväčšuje stránku pri ťuknutí do poľa) */
  .form input,.form textarea{font-size:16px !important}
  .choice .c-txt b{font-size:15.5px !important}
  /* pri zväčšenom písme bolo pôvodné preloženie .26em priveľmi rozpité */
  .form .f-step{font-size:14px !important;letter-spacing:.12em}

  /* pätička */
  .f-brand p,footer li{font-size:15px !important}
  .f-bottom{font-size:13.5px !important}

  /* meta riadok článku (autor · čas čítania · zdroj) — zdroj sa na mobile
     nezmestí na prvý riadok, tak dostane vlastný a bodka pred ním sa skryje,
     inak visela osamotená na konci predošlého riadku.
     Na článkoch bez zdroja (3 položky) selektory nič nechytia. */
  .art-hero .meta .dot:nth-child(4){display:none}
  .art-hero .meta > span:nth-child(5){flex:0 0 100%}
}