/* MONNIE kozmetický salón — farby z ich interiéru: petrolejová stena, mosadz, papier */
:root{
  --teal-900:#10363B; --teal-800:#164950; --teal-700:#1E5A61; --teal-500:#3E7F86; --teal-100:#DCE9E8;
  --brass-700:#7E6030; --brass-500:#A8834A; --brass-300:#D9B67C;
  --paper:#F6F1EA; --paper-2:#EDE5DA; --ink:#1B2A2C; --muted:#4F5D5F; --line:#D8CEC1;
  --serif:'Cormorant Garamond', Georgia, serif; --sans:'Jost', system-ui, sans-serif;
  --prst:44px; --nav-h:4.4rem;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{font-size:clamp(15px, .45vw + 13.3px, 19px); scroll-behavior:smooth; scroll-padding-top:var(--nav-h)}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:380; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:500; line-height:1.08}
h1,h2{font-family:var(--serif); font-weight:500}
h2{font-size:clamp(2.1rem, 4.2vw, 3.3rem); margin-bottom:1.6rem}
h3{font-family:var(--sans); font-weight:500; font-size:1.08rem; letter-spacing:.01em}
p{margin:0 0 1rem}
.wrap{max-width:74rem; margin:0 auto; padding-inline:clamp(1.1rem, 4vw, 2.5rem)}
.skip{position:absolute; left:-999px}
.skip:focus{left:1rem; top:1rem; z-index:99; background:#fff; padding:.6rem 1rem}
:focus-visible{outline:2px solid var(--brass-500); outline-offset:3px}
.eyebrow{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-700); font-weight:500; margin-bottom:.9rem}

/* tlačidlá */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:var(--prst); padding:.55rem 1.35rem; border-radius:999px; text-decoration:none; font-weight:500; font-size:.95rem; letter-spacing:.02em; border:1.5px solid transparent; transition:background .25s, color .25s, border-color .25s, transform .25s}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--teal-700); color:#fff}
.btn--primary:hover{background:var(--teal-900)}
.btn--ghost{border-color:var(--teal-700); color:var(--teal-700)}
.btn--ghost:hover{background:var(--teal-700); color:#fff}
.btn--light{background:var(--paper); color:var(--teal-900)}
.btn--light:hover{background:#fff}
.btn--ghostlight{border-color:var(--paper); color:var(--paper)}
.btn--ghostlight:hover{background:var(--paper); color:var(--teal-900)}

/* navigácia */
.nav{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid transparent; transition:border-color .3s}
.nav.is-scrolled{border-color:var(--line)}
.nav__in{display:flex; align-items:center; gap:1.5rem; height:var(--nav-h)}
.nav__logo{display:flex; align-items:center; min-height:var(--prst); margin-right:auto}
.nav__logo img{height:2.1rem; width:auto}
.nav__links{display:flex; gap:.4rem}
.nav__links a{display:inline-flex; align-items:center; min-height:var(--prst); padding:0 .7rem; text-decoration:none; font-size:.92rem; color:var(--ink)}
.nav__links a:hover{color:var(--teal-700)}
.nav__burger{display:none; width:var(--prst); height:var(--prst); border:0; background:none; cursor:pointer; position:relative}
.nav__burger span{position:absolute; left:11px; right:11px; height:2px; background:var(--ink); transition:transform .25s}
.nav__burger span:first-child{top:17px} .nav__burger span:last-child{top:25px}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.drawer{display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:1rem 1rem 1.6rem; background:var(--paper); border-bottom:1px solid var(--line)}
.drawer a{display:flex; align-items:center; justify-content:center; min-height:48px; min-width:12rem; text-decoration:none; font-size:1.05rem; color:var(--ink)}
.drawer a.btn--primary{color:#fff; margin-top:.6rem}

/* hero */
.hero{min-height:calc(100svh - var(--nav-h)); display:flex; align-items:center; padding-block:clamp(1.5rem, 4vh, 3rem)}
.hero__in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center; width:100%}
.hero__text{min-width:0}
.hero h1{font-size:clamp(2.6rem, min(6.2vw, 9.6vh), 5.6rem); line-height:1.04; letter-spacing:-.01em}
.hero h1 em{font-style:italic; color:var(--teal-700)}
.hero__line{display:block; width:clamp(6rem, 12vw, 9rem); height:auto; margin:.5rem 0 1.1rem}
.hero__line path{fill:none; stroke:var(--brass-500); stroke-width:2.2; stroke-linecap:round}
.lead{font-size:clamp(1.02rem, 1.2vw, 1.15rem); color:var(--muted); max-width:34rem; margin-bottom:clamp(1.2rem, 3vh, 1.8rem)}
.hero__cta{display:flex; flex-wrap:wrap; gap:.7rem}
.facts{list-style:none; padding:0; margin:clamp(1.4rem, 4vh, 2.6rem) 0 0; display:flex; flex-wrap:wrap; gap:.6rem 2rem; border-top:1px solid var(--line); padding-top:1.1rem}
.facts li{display:flex; flex-direction:column}
.facts b{font-family:var(--serif); font-size:1.45rem; font-weight:600; color:var(--teal-800); line-height:1.1}
.facts span{font-size:.82rem; color:var(--muted)}
.hero__photo{margin:0; position:relative}
.hero__photo img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14rem 14rem .6rem .6rem; max-height:calc(100svh - var(--nav-h) - 4rem)}
.hero__photo::after{content:""; position:absolute; inset:-.9rem .9rem .9rem -.9rem; border:1px solid var(--brass-300); border-radius:14rem 14rem .6rem .6rem; z-index:-1}

/* sekcie */
.sec{padding-block:clamp(3.5rem, 9vw, 6.5rem)}
.sec--teal{background:var(--teal-800); color:var(--paper)}
.sec--teal .eyebrow{color:var(--brass-300)}
.sec--paper{background:var(--paper-2); color:var(--ink)}
.sub{color:var(--muted); margin-top:-.8rem}

/* ošetrenia ako očíslovaný zoznam */
.menu{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; border-top:1px solid var(--line)}
.menu li{display:grid; grid-template-columns:3.2rem 1fr; gap:1rem; padding:1.4rem 0; border-bottom:1px solid var(--line); min-width:0}
.menu__n{font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--brass-700); line-height:1.1}
.menu h3{margin-bottom:.35rem; font-size:1.15rem}
.menu p{color:var(--muted); margin:0; max-width:40rem}
@media (min-width:900px){ .menu{grid-template-columns:1fr 1fr; column-gap:3.5rem} }

/* prístroje */
.gear{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:1.2rem}
.gear figure{margin:0}
.gear img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:.5rem}
.gear figcaption{margin-top:.6rem; font-family:var(--serif); font-size:1.3rem; color:var(--paper)}
@media (min-width:700px){ .gear{grid-template-columns:repeat(3, 1fr)} }

/* cenník */
.chips{position:sticky; top:var(--nav-h); z-index:5; display:flex; gap:.4rem; overflow-x:auto; padding:.6rem 0; margin-bottom:1.2rem; background:var(--paper); scrollbar-width:none}
.chips a{flex:none; display:inline-flex; align-items:center; min-height:var(--prst); padding:0 1rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-size:.88rem; color:var(--ink); background:var(--paper)}
.chips a:hover, .chips a.is-on{border-color:var(--teal-700); color:#fff; background:var(--teal-700)}
.prices{display:grid; grid-template-columns:1fr; gap:2.2rem 3.5rem}
@media (min-width:900px){ .prices{grid-template-columns:1fr 1fr} }
.pcat{scroll-margin-top:calc(var(--nav-h) + 4.5rem); min-width:0}
.pcat h3{font-family:var(--serif); font-size:1.6rem; font-weight:500; color:var(--teal-800); padding-bottom:.5rem; border-bottom:1.5px solid var(--brass-500); margin-bottom:.3rem}
.pcat dl{margin:0}
.pcat dl > div{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px dotted var(--line)}
.pcat dt{min-width:0}
.pcat dt small, .pcat dd small{display:block; font-size:.8rem; color:var(--muted)}
.pcat dd{margin:0; text-align:right; font-weight:500; white-space:nowrap; color:var(--teal-900)}
.voucher{margin-top:3rem; display:grid; grid-template-columns:auto 1fr; gap:1.2rem 1.6rem; align-items:center; padding:clamp(1.3rem, 3vw, 2rem); border-radius:1rem; background:var(--teal-100); color:var(--ink)}
.voucher svg{width:3.6rem; height:3.6rem; color:var(--teal-700)}
.voucher h3{font-family:var(--serif); font-size:1.6rem; margin-bottom:.3rem}
.voucher p{margin:0; color:var(--muted)}
.voucher .btn{grid-column:1 / -1; justify-self:start}
@media (min-width:800px){ .voucher{grid-template-columns:auto 1fr auto} .voucher .btn{grid-column:auto} }

/* o mne */
.about{display:grid; grid-template-columns:1fr; gap:2rem; align-items:center}
.about__mark{display:flex; justify-content:center}
.about__mark svg{width:min(16rem, 60vw); height:auto; color:var(--teal-700); background:var(--paper); border-radius:50%; padding:12%}
.role{color:var(--brass-700); margin-top:-1rem; letter-spacing:.06em}
blockquote{margin:1.4rem 0; font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem, 2.4vw, 1.9rem); line-height:1.3; color:var(--teal-800); max-width:40rem}
@media (min-width:900px){ .about{grid-template-columns:.8fr 1.2fr; gap:4rem} }

/* recenzie */
.reviews{display:grid; gap:1.5rem; align-items:end}
.reviews h2{margin-bottom:.6rem}
.big{font-size:1.6em; color:var(--teal-700)}
.link{display:inline-flex; align-items:center; min-height:var(--prst); color:var(--teal-700); font-weight:500}
@media (min-width:900px){ .reviews{grid-template-columns:1fr 1fr} }

/* kontakt */
.contact{display:grid; grid-template-columns:1fr; gap:2.5rem}
.info{margin:0 0 1.8rem}
.info > div{display:grid; grid-template-columns:6.5rem 1fr; gap:1rem; padding:.8rem 0; border-bottom:1px solid rgba(246,241,234,.22)}
.info dt{color:var(--brass-300); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; padding-top:.2rem}
.info dd{margin:0}
.info a{display:inline-flex; align-items:center; min-height:var(--prst); margin-block:-.6rem; color:var(--paper)}
.social{margin-top:1.4rem; display:flex; gap:1.4rem}
.social a{display:inline-flex; align-items:center; min-height:var(--prst); color:var(--paper)}
.map iframe{width:100%; height:100%; min-height:22rem; border:0; border-radius:.8rem; filter:saturate(.8)}
@media (min-width:900px){ .contact{grid-template-columns:1fr 1fr; gap:4rem} }

/* pätička */
.foot{background:var(--teal-900); color:var(--paper); padding-block:3rem 6rem}
.foot__in{display:grid; gap:1.4rem}
.foot img{width:15rem}
.foot p{margin:0; font-size:.88rem; color:#CFDAD9}
.foot__links{display:flex; gap:1.5rem}
.foot__links a{display:inline-flex; align-items:center; min-height:var(--prst); color:var(--paper)}
@media (min-width:900px){ .foot{padding-bottom:3rem} .foot__in{grid-template-columns:auto 1fr auto; align-items:center; gap:3rem} }

/* lepiaca lišta na mobile */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:none; gap:.6rem; padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line)}
.bar .btn{flex:1}

/* značka doplniť — vysoká špecificita, aby ju neprebili pravidlá typu .card p */
.sec p.doplnit, .wrap p.doplnit, p.doplnit{display:block; margin:1.5rem 0 0; padding:.7rem 1rem; border:1.5px dashed #B4462B; border-radius:.5rem; background:#FFF1EC; color:#8A2E17; font-size:.9rem; font-weight:500; font-family:var(--sans); font-style:normal}

@media (max-width:899px){
  .nav__links, .nav__cta{display:none}
  .nav__burger{display:block}
  .hero{min-height:auto}
  .hero__in{grid-template-columns:1fr}
  .hero__photo{order:-1}
  .hero__photo img{aspect-ratio:16/11; border-radius:8rem 8rem .6rem .6rem; max-height:none}
  .hero__photo::after{display:none}
  .bar{display:flex}
  .foot{padding-bottom:6.5rem}
}

/* pohyb: len ak ho návštevník nevypol; obsah je bez JS celý viditeľný */
@media (prefers-reduced-motion:no-preference){
  .js .hero__line path{stroke-dasharray:1; stroke-dashoffset:1; animation:ciara 1.4s .4s cubic-bezier(.6,.1,.2,1) forwards}
  @keyframes ciara{to{stroke-dashoffset:0}}
  .js .rise{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease}
  .js .rise.is-in{opacity:1; transform:none}
}