/* Psí salon Známka (ukázka FORMA, smyšlený podnik). Motiv: obojek se známkami. */
@font-face{font-family:"Fredoka";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fredoka-600-cs.woff2) format("woff2")}

@font-face{font-family:"Fredoka Fallback";src:local("Arial"),local("Helvetica");font-weight:300 700;size-adjust:93.2%;ascent-override:104%;descent-override:26%;line-gap-override:0%}

:root{
  --cream:#F6EFE3;--cream2:#EDE3CF;--cream3:#FBF7EE;
  --navy:#1F3A5F;--navy2:#16294A;--soft:#44586F;
  --brass:#C79A3B;--brass-d:#8D6A22;--brass-l:#E9C875;
  --coral:#C8431F;--coral-d:#A83617;
  --head:"Fredoka","Fredoka Fallback","SF Pro Rounded",ui-rounded,system-ui,sans-serif;
  --body:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gut:1.25rem;
  --hole:#F6EFE3;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--navy);font:400 1.0625rem/1.6 var(--body);overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.1;margin:0;color:var(--navy)}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.foot :focus-visible,.prep :focus-visible{outline-color:var(--brass-l)}
.skip{position:absolute;left:.5rem;top:-4rem;background:var(--navy);color:var(--cream);padding:.6rem 1rem;border-radius:.5rem;z-index:50;text-decoration:none;font-weight:700}
.skip:focus{top:.5rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:70rem;margin:0 auto;padding:0 var(--gut)}
section{scroll-margin-top:4.5rem}

/* tlačítka */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.1rem;padding:.65rem 1.4rem;border:0;border-radius:99px;font:600 1.05rem/1.2 var(--head);letter-spacing:.01em;text-decoration:none;cursor:pointer;background:var(--navy);color:#fff;transition:transform .2s,background .2s}
.btn:hover{background:var(--navy2);transform:translateY(-1px)}
.btn-call,.btn-sms{background:var(--coral);color:#fff}
.btn-call:hover,.btn-sms:hover{background:var(--coral-d)}
.btn-sms{background:#fff;color:var(--coral-d);box-shadow:inset 0 0 0 2.5px var(--coral)}
.btn-sms:hover{background:var(--cream3);color:var(--coral-d)}
.btn-sm{min-height:2.5rem;padding:.4rem 1rem;font-size:.95rem}
.btn-ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2.5px var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn svg{width:1.15em;height:1.15em;flex:none}

/* hlavička */
.top{position:sticky;top:0;z-index:30;background:rgba(246,239,227,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid var(--brass)}
.top-in{display:flex;align-items:center;gap:1rem;justify-content:space-between;height:3.6rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:600 1.25rem/1 var(--head);color:var(--navy)}
.brand-tag{width:2.1rem;height:2.1rem;flex:none}
.nav{display:none}
.nav a{text-decoration:none;font-weight:600;font-size:.98rem;padding:.4rem .2rem;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--brass)}

/* obojek (pás) */
.strap{height:1.5rem;background:var(--navy);position:relative;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.strap::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,rgba(246,239,227,.75) 55%,transparent 0) 0 0/12px 2px repeat-x}

/* úvod */
.hero{padding-bottom:3rem;overflow:hidden}
.hero .strap{margin-bottom:0}
.hero-in{display:flex;flex-direction:column;align-items:center;gap:1.6rem;position:relative}
.hero-tag{position:relative;margin-top:0;width:13.2rem;flex:none;order:-1}
.hero-link{position:absolute;left:50%;top:-.4rem;width:1.05rem;height:3.2rem;margin-left:-.525rem;border:.28rem solid var(--brass-d);border-radius:99px;background:transparent;z-index:2}
.hero-photo{margin:2.3rem 0 0;position:relative}
.hero-ring{width:13.2rem;height:13.2rem;border-radius:50%;padding:.55rem;background:linear-gradient(160deg,#EFD189,#D8AB4F 45%,#B98A2C);box-shadow:0 .5rem 1.2rem rgba(31,58,95,.28),inset 0 0 0 .22rem var(--brass-d)}
.hero-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:36% 50%;box-shadow:0 0 0 .22rem var(--brass-d)}
.hero-cap{position:absolute;left:50%;bottom:-.9rem;transform:translateX(-50%);white-space:nowrap;background:var(--navy);color:var(--cream);font:600 .78rem/1 var(--head);letter-spacing:.06em;padding:.4rem .8rem;border-radius:.4rem;text-transform:uppercase}
.hero-text{text-align:center;max-width:36rem;padding-top:.5rem}
.kicker{font:600 .9rem/1.2 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:.7rem}
.hero h1{font-size:clamp(2.5rem,11vw,4.6rem);letter-spacing:-.01em}
.hero h1 span{display:block;color:var(--navy);background:linear-gradient(transparent 62%,rgba(199,154,59,.55) 62% 90%,transparent 90%);width:max-content;max-width:100%;margin:0 auto}
.lede{margin-top:1rem;font-size:1.15rem;color:var(--navy)}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem;justify-content:center}
.hero-note{margin-top:1rem;font-size:.95rem;color:var(--soft)}
.hero-note a{font-weight:600}

/* sekce */
.sec{padding:3.6rem 0}
.sec-alt{background:var(--cream2)}
.sec h2{font-size:clamp(1.9rem,6.4vw,2.9rem);margin-bottom:.8rem}
.lead{font-size:1.1rem;color:var(--soft);max-width:40rem}
.eyebrow{display:inline-block;font:600 .85rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:.8rem}

/* známky */
.tags{list-style:none;margin:3.2rem 0 0;padding:0;display:grid;gap:3.6rem 2rem;grid-template-columns:minmax(0,1fr);--gap:2rem}
.tag{position:relative;width:100%;max-width:23rem;margin:0 auto;aspect-ratio:240/210;perspective:1200px}
.tag{--hy:10.5%}
.tag.bone{--hy:22%}
.tag.bone .stitch{display:none}
.tag::before{content:"";position:absolute;left:calc(var(--gap)/-2);right:calc(var(--gap)/-2);top:-2.1rem;height:1.5rem;background:var(--navy);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);z-index:0}
.tag::after{content:"";position:absolute;left:calc(var(--gap)/-2);right:calc(var(--gap)/-2);top:-1.35rem;height:2px;background:linear-gradient(90deg,rgba(246,239,227,.75) 55%,transparent 0) 0 0/12px 2px repeat-x;z-index:0}
.tag-link{position:absolute;left:50%;top:-1.75rem;width:1.05rem;margin-left:-.525rem;height:calc(2.5rem + var(--hy));border:.28rem solid var(--brass-d);border-radius:99px;z-index:3;pointer-events:none}
.tag-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.9,.3,1.05);z-index:1}
.tag.is-flipped .tag-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--navy)}
.tag-back{transform:rotateY(180deg)}
.shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 .45rem .5rem rgba(31,58,95,.26))}
.shape .edge{fill:var(--brass-d);stroke:var(--brass-d);stroke-width:7;stroke-linejoin:round}
.shape .metal{fill:url(#metal);stroke:none}
.shape .stitch{fill:none;stroke:rgba(31,58,95,.32);stroke-width:2.4;stroke-dasharray:1 6;stroke-linecap:round}
.shape .hole{fill:var(--hole);stroke:var(--brass-d);stroke-width:3}
.sec-alt .shape .hole{--hole:#EDE3CF}
.tag-front{all:unset;box-sizing:border-box;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;cursor:pointer;padding:17% 10% 8%;text-align:center;border-radius:1rem}
.tag-front:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.tag-no{font:600 .78rem/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:#4b3710}
.tag-name{font:600 clamp(1.7rem,7.2vw,2.15rem)/1.05 var(--head);text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 0 rgba(0,0,0,.18);text-wrap:balance}
.tag-hint{margin-top:.5rem;font:600 .82rem/1 var(--head);letter-spacing:.04em;color:#3a2c0b;display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.34);padding:.38rem .7rem;border-radius:99px}
.tag-hint svg{width:.95rem;height:.95rem}
.back-in{position:absolute;inset:0;padding:17% 10% 9%;display:flex;flex-direction:column;justify-content:center;gap:.3rem;text-align:left}
.back-in h3{font-size:1.2rem;line-height:1;color:var(--navy);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.back-in p{font-size:.88rem;line-height:1.36;color:var(--navy)}
.back-in .lbl{font:600 .72rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:#4b3710;margin-top:.15rem}
.back-act{display:flex;gap:.45rem;margin-top:.35rem;flex-wrap:nowrap}
.back-act .btn{min-height:2.35rem;padding:.3rem .8rem;font-size:.85rem;white-space:nowrap}
.back-act .btn-ghost{box-shadow:inset 0 0 0 2px var(--navy);background:rgba(255,255,255,.3)}
.back-act .btn-ghost:hover{background:var(--navy)}
.tag.bone .tag-front,.tag.bone .back-in{padding-left:12%;padding-right:12%}
.tag.bone .back-in{padding-top:23%;padding-bottom:12%}
@media (max-width:359px){.tag.bone .back-in{padding-top:23%;padding-bottom:9%}}
.tag.chamfer .tag-front,.tag.chamfer .back-in{padding-left:12%;padding-right:12%}

/* příprava */
.prep{background:var(--navy);color:var(--cream);padding:3.6rem 0}
.prep h2{color:var(--cream);font-size:clamp(1.9rem,6.4vw,2.9rem);margin-bottom:.8rem}
.prep .lead{color:#C9D3E2}
.prep-grid{display:grid;gap:1.6rem;margin-top:2rem}
.prep-grid .col{display:grid;gap:1.6rem;align-content:start;min-width:0}
.prep fieldset{border:0;margin:0;padding:0;min-width:0}
.step{font:600 1.05rem/1.2 var(--head);color:var(--brass-l);margin:0 0 .7rem;padding:0;letter-spacing:.02em}
.step small{font:400 .9rem var(--body);color:#C9D3E2;margin-left:.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:2.9rem;padding:.4rem 1.1rem;border-radius:99px;font:600 1.02rem/1 var(--head);border:2px solid #7f95b3;color:var(--cream);background:transparent;transition:background .2s,color .2s}
.chip input:checked+span{background:var(--brass-l);color:var(--navy);border-color:var(--brass-l)}
.chip input:focus-visible+span{outline:3px solid var(--brass-l);outline-offset:3px}
.chip:hover span{border-color:var(--brass-l)}
.rules{background:rgba(255,255,255,.07);border:2px dashed #7f95b3;border-radius:1rem;padding:1rem 1.15rem}
.rules p{color:var(--cream);font-size:1.05rem}
.rules .step{color:var(--brass-l);font-size:1.05rem}
.rules .sub{margin-top:.5rem;font-size:.95rem;color:#C9D3E2}
.fields{display:grid;gap:.9rem}
.fields .step{grid-column:1/-1;margin:0}
.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.3rem}
.field input{width:100%;min-height:3rem;border-radius:.7rem;border:2px solid #7f95b3;background:var(--cream3);color:var(--navy);padding:.5rem .85rem;font:400 1.0625rem var(--body)}
.field input::placeholder{color:var(--soft);opacity:1}
.field input:focus-visible{outline:3px solid var(--brass-l);outline-offset:2px}
.sms-prev{background:var(--cream3);color:var(--navy);border-radius:.8rem;padding:.8rem 1rem;font-size:.98rem;line-height:1.45;border-left:.4rem solid var(--brass);overflow-wrap:anywhere}
.sms-lbl{font:600 .75rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--brass-l);margin:0 0 .45rem}
.send-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem}
.prep .hint{margin-top:.9rem;font-size:.95rem;color:#C9D3E2}
.linkbtn{all:unset;cursor:pointer;color:var(--brass-l);text-decoration:underline;font-weight:600;font-size:.95rem}
.linkbtn:focus-visible{outline:3px solid var(--brass-l);outline-offset:3px;border-radius:3px}

/* střihy */
.seasons{margin-top:1.8rem;display:grid;gap:1rem}
.season{background:var(--cream3);border:2px solid var(--brass);border-radius:1.2rem;padding:1.1rem 1.25rem}
.season h3{font-size:1.4rem;margin-bottom:.35rem}
.season .btn{margin-top:.8rem}
.tabs{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.tab{all:unset;box-sizing:border-box;cursor:pointer;min-height:2.9rem;padding:.4rem 1.15rem;display:inline-flex;align-items:center;border-radius:99px;font:600 1.02rem/1 var(--head);color:var(--navy);box-shadow:inset 0 0 0 2.5px var(--navy);transition:background .2s,color .2s}
.tab:hover{background:rgba(31,58,95,.08)}
.tab[aria-selected="true"]{background:var(--navy);color:var(--cream)}
.tab:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.is-tabs .seasons{margin-top:1rem}
.is-tabs .season[hidden]{display:none}
.is-tabs .season h3{display:none}

/* jak se objednat */
.steps{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.4rem;counter-reset:s}
.steps li{position:relative;padding-left:4.4rem;min-height:3.4rem;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:3.3rem;height:3.3rem;border-radius:50%;display:grid;place-items:center;font:600 1.5rem/1 var(--head);color:var(--navy);background:linear-gradient(160deg,#EFD189,#D8AB4F 55%,#CDA044);box-shadow:0 0 0 .2rem var(--brass-d),0 .3rem .6rem rgba(31,58,95,.25)}
.steps h3{font-size:1.25rem;margin-bottom:.25rem}
.steps p{color:var(--soft)}
.steps a{font-weight:700;white-space:nowrap}

/* příběh */
.story{display:grid;gap:1.2rem;max-width:40rem}
.story p{font-size:1.12rem}

/* kde nás najdete */
.where{display:grid;gap:1.8rem;margin-top:1.6rem}
.addr{font-style:normal;font-size:1.15rem}
.addr strong{font-family:var(--head);font-size:1.4rem;display:block;margin-bottom:.3rem}
.addr .row{margin-top:.8rem}
.addr .row span{display:block;font:600 .8rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:.2rem}
.addr .btn{margin-top:1rem}

/* hodnocení */

/* patička */
.foot{background:var(--navy);color:var(--cream);padding:2.4rem 0 2.6rem;font-size:.95rem}
.foot .wrap{display:grid;gap:.9rem}
.foot b{font:600 1.3rem var(--head)}
.foot a{color:var(--brass-l)}
.foot .small{color:#C9D3E2;font-size:.88rem}

/* bez JS: obě strany známky pod sebou */
html:not(.js) .needs-js{display:none}
html:not(.js) .tag{aspect-ratio:auto;perspective:none;max-width:26rem}
html:not(.js) .tag-in{position:static;transform:none;transform-style:flat}
html:not(.js) .face{position:relative;inset:auto;aspect-ratio:240/210;margin-bottom:1rem}
html:not(.js) .tag-back{transform:none}
html:not(.js) .tag-link,html:not(.js) .tag-hint{display:none}
html:not(.js) .tag-front{pointer-events:none}
html:not(.js) .rules{display:none}
html:not(.js) .tag-turn,html:not(.js) .tag-pick{display:none}

@media (max-width:359px){
  .back-in{padding-top:15%;padding-bottom:7%;gap:.2rem}
  .back-in p{font-size:.83rem;line-height:1.3}
  .back-act{gap:.3rem;margin-top:.25rem}
  .back-act .btn{padding:.3rem .6rem;font-size:.8rem}
}
@media (min-width:600px){
  .tags{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,1fr);gap:2rem}
  .steps li{padding-left:0;padding-top:4.3rem}
  .fields{grid-template-columns:1fr 1fr}
  .seasons{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:860px){
  .nav{display:flex;gap:1.3rem}
  .hero{padding-bottom:4.5rem}
  .hero-in{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:3rem;padding-top:3.4rem}
  .hero-text{text-align:left;padding-top:1rem;max-width:34rem}
  .hero h1 span{margin:0}
  .cta{justify-content:flex-start}
  .hero-tag{order:2;width:22rem;margin-right:2rem}
  .hero-ring{width:22rem;height:22rem;padding:.8rem}
  .hero-link{height:6.9rem;width:1.3rem;margin-left:-.65rem;top:-3.6rem}
  .hero-photo{margin-top:2.2rem}
  .hero-cap{font-size:.85rem}
  .tags{grid-template-columns:repeat(3,minmax(0,1fr));gap:4rem 2.4rem;--gap:2.4rem}
  .prep-grid{grid-template-columns:1fr 1fr;gap:2.4rem 3rem;align-items:start}
  .where{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:3rem}
  .seasons{grid-template-columns:repeat(2,1fr)}
  .is-tabs .seasons{grid-template-columns:1fr;max-width:40rem}
  .sec{padding:5rem 0}
  .prep{padding:5rem 0}
}
@media (min-width:1100px){
  .hero-tag{margin-right:4rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}


/* ukázka na vizitce FORMA: živý stav salonu */
.live{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.15rem .5rem;margin:1.1rem 0 0;padding:.5rem .95rem;border:2px solid var(--navy);border-radius:999px;background:var(--cream3);font-size:1rem;line-height:1.3;color:var(--navy)}
.live-dot{flex:none;width:.75rem;height:.75rem;border-radius:50%;background:var(--soft)}
.live.is-open .live-dot{background:#2b7a2f;box-shadow:0 0 0 3px rgba(43,122,47,.22)}
.live.is-closed .live-dot{background:transparent;box-shadow:inset 0 0 0 2px var(--soft)}
.live-state{font-weight:700}
.live-sep{color:var(--soft)}

/* otevírací doba a jak to u nás chodí (místo plánku) */
.addr p{margin:0}
.addr .live{display:flex;justify-content:flex-start;border-radius:12px;margin:.9rem 0 1.2rem}
.hours-title,.how-title{font:600 .82rem/1.2 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin:0 0 .3rem;padding-bottom:.45rem;border-bottom:2px solid var(--brass)}
.hours-list{margin:0 0 1rem;font-size:1.05rem}
.hours-list div{display:flex;align-items:baseline;gap:.5rem;padding:.5rem .3rem;border-bottom:1px dotted var(--brass-d)}
.hours-list div::after{content:"";order:1;flex:1;min-width:.5rem}
.hours-list dt{flex:none;font-weight:700}
.hours-list dd{order:2;margin:0;font:600 1.1rem/1.2 var(--head);white-space:nowrap}
.hours-list dd.off{font:600 1rem/1.2 var(--body);color:var(--soft)}
.hours-list .today{background:linear-gradient(90deg,rgba(233,200,117,.45),transparent)}
.today-tag{display:inline-block;margin-left:.45rem;padding:.05rem .45rem;border-radius:4px;background:var(--navy);color:var(--cream);font-size:.78rem;font-weight:700;letter-spacing:.04em;vertical-align:.08em}
.addr .row{font-weight:700}
.fake{font-size:.88rem;font-weight:400;color:var(--soft)}
.addr .row .fake{display:inline;margin:0;font:400 .88rem/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--soft)}
.addr-act{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem!important}
.addr-act .btn{margin-top:0}
.how{min-width:0}
.how-list{margin:0;padding:0;list-style:none}
.how-list li{position:relative;padding:.6rem 0 .6rem 1.7rem;font-size:1.08rem;border-bottom:1px dotted var(--brass-d)}
.how-list li:last-child{border-bottom:0}
.how-list li::before{content:"";position:absolute;left:.1rem;top:1.05rem;width:.75rem;height:.75rem;border-radius:50%;background:linear-gradient(160deg,#EFD189,#D8AB4F 55%,#CDA044);box-shadow:0 0 0 2px var(--brass-d)}

/* tlačítka otevřou vysvětlení ukázky */
.foot-back{font-weight:700}
.pop{max-width:min(27rem,calc(100vw - 2rem));padding:1.4rem 1.4rem 1.5rem;border:3px solid var(--navy);border-radius:1.2rem;color:var(--navy);background:var(--cream3);box-shadow:0 30px 60px -20px rgba(22,41,74,.75)}
.pop::backdrop{background:rgba(22,41,74,.62)}
.pop h2{font-size:clamp(1.5rem,6.5vw,1.9rem);margin:0 0 .7rem;text-wrap:balance}
.pop p{margin:0 0 1.2rem}
.pop .btn{width:100%}
/* bez podpory popover (Safari < 17): okno přepíná script.js třídou; záměrně bez :popover-open, aby starý prohlížeč pravidlo nezahodil */
.no-popover .pop{display:none;position:fixed;inset:0;z-index:100;width:min(27rem,calc(100vw - 2rem));height:-webkit-fit-content;height:fit-content;margin:auto;box-shadow:0 0 0 100vmax rgba(22,41,74,.62)}
.no-popover .pop.is-open{display:block}
@media (max-width:859px){.hero-text .live{justify-content:center}}

/* ---------- tuning 30. 10. 2026: kůže a mosaz z obojku přes celou stránku ---------- */
:root{--okraj:clamp(1.25rem,5vw,4.5rem);--kuze:#16294A;--inkoust:#0E1C34;--bledsi:#C9D3E2;--zarez:rgba(246,239,227,.62)}
html{scroll-padding-top:4.2rem}
body{overflow-x:clip}
.siroka{max-width:calc(84rem + 2*var(--okraj));padding-left:var(--okraj);padding-right:var(--okraj)}
.velky,.sec h2.velky,.prep h2.velky{font-size:clamp(2.75rem,7.4vw,6.75rem);line-height:.98;letter-spacing:-.015em;margin:0;text-wrap:balance}
.lead{font-size:clamp(1.125rem,1.7vw,1.5rem);line-height:1.42;max-width:34rem}
.sec{padding:clamp(4rem,8vw,7.5rem) 0}
.btn:not(.btn-sm){min-height:3.4rem;padding:.75rem 1.7rem;font-size:1.125rem}
.back-act .btn:not(.btn-sm){min-height:2.35rem;padding:.3rem .8rem;font-size:.85rem}
.btn-mosaz{background:linear-gradient(160deg,#F2D68F,#D8AB4F 60%,#C79A3B);color:var(--navy2)}
.btn-mosaz:hover{background:linear-gradient(160deg,#F7E2AC,#E2B85E 60%,#D1A447);color:var(--navy2)}
.btn-obrys{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2.5px var(--brass-l)}
.btn-obrys:hover{background:rgba(233,200,117,.16);color:#fff}
.fake{white-space:normal}

/* kůže: tmavá modř s jemným zrnem, mosaz: broušený kov, steh: dvě řady přes celou šířku */
.kuze{position:relative;background-color:var(--kuze);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='k' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.26 .3' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .62 0 0 0 0 .86 0 0 0 .2 -.058'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23k)'/%3E%3C/svg%3E");color:var(--cream)}
.mosaz{background-color:#D8AB4F;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),linear-gradient(105deg,#E6C274 0,#D8AB4F 38%,#CDA044 72%,#DCB45E 100%);color:var(--navy2)}
.steh::before,.steh::after{content:"";position:absolute;left:0;right:0;height:2px;z-index:1;pointer-events:none;background:repeating-linear-gradient(90deg,var(--zarez) 0 13px,transparent 13px 21px)}
.steh::before{top:.8rem}
.steh::after{bottom:.8rem}
.kuze :focus-visible{outline-color:var(--brass-l)}
.mosaz h2,.mosaz h3{color:var(--navy2)}

@media (min-width:1100px){.hero.hero-obraz{padding-bottom:0}}

/* scéna: pes před a po. Výchozí stav je hotová kompozice (bez JS, omezený pohyb) */
.scena{padding:clamp(4rem,9vw,7rem) 0;overflow:clip}
.scena-pin{display:grid;gap:2.5rem;max-width:calc(84rem + 2*var(--okraj));margin:0 auto;padding:0 var(--okraj)}
.scena-slova{display:grid;gap:2.2rem}
.scena h2,.slovo-h{font:600 clamp(2.9rem,6.6vw,6.1rem)/1 var(--head);letter-spacing:-.015em;color:var(--cream)}
.rozcuch{display:block;white-space:nowrap}
.rozcuch span{display:inline-block}
.rozcuch span:nth-child(3n+1){transform:rotate(-8deg) translateY(.05em)}
.rozcuch span:nth-child(4n+2){transform:rotate(7deg) translateY(-.07em)}
.rozcuch span:nth-child(5n+3){transform:rotate(-5deg) translateY(.08em)}
.cink{font:600 1em var(--head);color:var(--brass-l)}
.slovo p:not(.slovo-h){margin-top:.8rem;font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.3;color:var(--bledsi)}
.scena-pes{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0}
.pes-platno,.scena-stul{display:none}
.pes-obraz{width:100%;height:auto}
.scena-zive .scena{height:420svh;padding:0;overflow:visible}
.scena-zive .scena-pin{position:sticky;top:0;display:block;max-width:none;height:100svh;padding:0;overflow:hidden;background:inherit}
.scena-zive .scena-slova{display:block;position:absolute;left:var(--okraj);right:var(--okraj);top:max(5.1rem,calc((100svh - 124vw)*.5 - 2.4rem))}
.scena-zive .slovo{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(.8rem);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.scena-zive .scena:not([data-krok]) .slovo:first-child,.scena-zive [data-krok="1"] .slovo:nth-child(1),.scena-zive [data-krok="2"] .slovo:nth-child(2),.scena-zive [data-krok="3"] .slovo:nth-child(3){opacity:1;transform:none}
.scena-zive .pes-obraz{display:none}
.scena-zive .scena-pes{display:block;position:static}
.scena-zive .pes-platno{display:block;position:absolute;z-index:2;left:50%;bottom:0;height:min(calc(100svh - 14.5rem),124vw);aspect-ratio:1000/1140;transform:translateX(-50%)}
.scena-zive .scena-stul{display:block;position:absolute;left:0;right:0;bottom:0;height:clamp(3rem,9svh,5.5rem);background:var(--navy);box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
.scena-zive .scena-stul::before{content:"";position:absolute;left:0;right:0;top:.65rem;height:2px;background:repeating-linear-gradient(90deg,var(--zarez) 0 13px,transparent 13px 21px)}
@media (min-width:860px){
  .scena-pin{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:3rem}
  .scena-zive .scena-slova{top:3.6rem;bottom:0;right:auto;width:min(46vw,41rem)}
  .scena-zive .slovo{top:50%;transform:translateY(calc(-50% + .8rem))}
  .scena-zive .scena:not([data-krok]) .slovo:first-child,.scena-zive [data-krok="1"] .slovo:nth-child(1),.scena-zive [data-krok="2"] .slovo:nth-child(2),.scena-zive [data-krok="3"] .slovo:nth-child(3){transform:translateY(-50%)}
  .scena-zive .pes-platno{left:auto;right:clamp(0px,calc(50vw - 44rem),8rem);height:min(calc(100svh - 3.9rem),60vw);transform:none}
}

/* služby: obojek přes celou šířku */
.sluzby{overflow-x:clip}
.hlava-sekce{display:grid;gap:1.1rem}
.tags{margin-top:clamp(3.4rem,6vw,5.4rem)}
.tag{max-width:none}
.tag-link{border-color:var(--brass-d)}
@media (max-width:1099px){
  /* telefon a tablet: známky jedou po pásku do strany, ať služby nezaberou šest obrazovek */
  .tags{--gap:1rem;display:flex;gap:var(--gap);margin:.6rem calc(var(--okraj)*-1) 0;padding:3rem var(--okraj) 1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--okraj);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tags::-webkit-scrollbar{display:none}
  .tag{flex:0 0 min(calc(100vw - 2*var(--okraj) - 1.1rem),26rem);margin:0;scroll-snap-align:center}
  .tag:first-child::before,.tag:first-child::after{left:calc(var(--okraj)*-1)}
  .tag:last-child::before,.tag:last-child::after{right:calc(var(--okraj)*-1)}
}
@media (max-width:359px){
  .tag{flex-basis:calc(100vw - 2*var(--okraj))}
}
@media (min-width:860px){
  .hlava-sekce{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:3rem}
}
@media (min-width:1100px){
  .tags{gap:5.2rem 2.6rem;--gap:2.6rem}
  .tag:nth-child(3n+1)::before,.tag:nth-child(3n+1)::after{left:-100vw}
  .tag:nth-child(3n)::before,.tag:nth-child(3n)::after{right:-100vw}
}
@media (min-width:1280px){
  .tag-no{font-size:.95rem}
  .tag-name{font-size:clamp(2.4rem,3.5vw,3.1rem)}
  .tag-hint{margin-top:.8rem;font-size:1.0625rem;padding:.5rem .95rem}
  .back-in{gap:.35rem}
  .back-in h3{font-size:1.6rem}
  .back-in p{font-size:1.0625rem;line-height:1.34}
  .back-in .lbl{font-size:.85rem;margin-top:.3rem}
  .back-act{margin-top:.5rem}
  .back-act .btn:not(.btn-sm){min-height:2.7rem;padding:.35rem 1rem;font-size:1rem}
}

/* ceník: psi od malého po obřího na mosazi, ceny na kůži */
.cenik{--cm:min(3.9px,calc(100vw/450),calc((100vw - 2*var(--okraj))/286));--popisek:4.9rem;position:relative;overflow-x:clip}
.cenik[data-vel="0"]{--v:34}
.cenik[data-vel="1"]{--v:56}
.cenik[data-vel="2"]{--v:86}
.cenik[data-vel="3"]{--v:116}
.cenik-mosaz{padding-top:clamp(2.8rem,4vw,3.6rem)}
.cenik-rada{position:relative}
.cenik-titul{margin-bottom:1.6rem}
.cenik-titul .lead{margin-top:.8rem;color:var(--navy2)}
.rada{position:relative;z-index:2;display:flex;align-items:stretch;justify-content:space-between;min-width:0;margin:0 0 calc(var(--popisek)*-1);padding:0;border:0}
.vel{position:relative;display:flex;flex:none;flex-direction:column;justify-content:flex-end;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vel input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.vel-pes{display:block;transform-origin:50% 100%;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.vel-pes svg{display:block;width:100%;height:100%;overflow:visible}
.v0.vel{width:calc(50*var(--cm))}
.v1.vel{width:calc(49*var(--cm))}
.v2.vel{width:calc(72*var(--cm))}
.v3.vel{width:calc(85*var(--cm))}
.v0 .vel-pes{width:calc(60*var(--cm));height:calc(34*var(--cm))}
.v1 .vel-pes{width:calc(56*var(--cm));height:calc(56*var(--cm))}
.v2 .vel-pes{width:calc(90*var(--cm));height:calc(86*var(--cm))}
.v3 .vel-pes{width:calc(112*var(--cm));height:calc(116*var(--cm))}
.p-telo{fill:var(--navy);transition:fill .18s}
.p-ucho{fill:var(--navy2);transition:fill .18s}
.p-oko{fill:var(--cream)}
.p-nos{fill:var(--inkoust)}
.p-pas{fill:none;stroke:#E8C877;stroke-width:6;stroke-linecap:round}
.p-zn{fill:#F3D892;stroke:#8D6A22;stroke-width:1.4}
.vel:hover .p-telo{fill:#2C4D7A}
.vel input:checked~.vel-pes .p-telo{fill:#FFFBF2}
.vel input:checked~.vel-pes .p-ucho{fill:#E3B556}
.vel input:checked~.vel-pes .p-oko{fill:var(--inkoust)}
.vel input:checked~.vel-pes .p-pas{stroke:var(--navy)}
.vel input:checked~.vel-pes{transform:translateY(-.3rem)}
.vel input:focus-visible~.vel-pes{outline:3px solid var(--navy2);outline-offset:4px;border-radius:.4rem}
.vel-txt{display:block;height:var(--popisek);padding-top:.85rem;color:var(--cream)}
.vel-txt b{display:block;font:600 1.0625rem/1.15 var(--head)}
.vel-txt small{display:block;font-size:.8rem;line-height:1.25;color:var(--bledsi);white-space:nowrap}
.vel-pl{display:none!important}
.vel input:checked~.vel-txt b{color:var(--brass-l)}
html:not(.js) .vel input{display:none}
html:not(.js) .vel{cursor:default}
.pravitko{display:none}
.cenik-list{padding:calc(var(--popisek) + .6rem) 0 clamp(3.6rem,7vw,6rem)}
.cenik-list .wrap{position:relative}
.cenik-stav{font:600 clamp(1.25rem,2.1vw,1.6rem)/1.2 var(--head);color:var(--brass-l)}
.price{width:100%;margin-top:.5rem;border-collapse:collapse}
.price th{text-align:left;font-weight:400}
.price thead th{padding:.5rem .6rem .7rem 0;font:600 1.0625rem/1.2 var(--head);color:var(--cream)}
.price thead small{display:block;font:400 1rem/1.3 var(--body);color:var(--bledsi)}
.price thead th:not(:first-child),.price td{text-align:right}
.price tbody th,.price td{padding:.75rem .6rem .75rem 0}
.svc{display:block;font:600 clamp(1.45rem,2.7vw,2.3rem)/1.1 var(--head);color:var(--cream)}
.svc-d{display:block;margin-top:.2rem;font-size:1.0625rem;line-height:1.3;color:var(--bledsi)}
.price td{font:600 clamp(1.3rem,2.4vw,2rem)/1 var(--head);color:var(--brass-l);white-space:nowrap}
.cenik[data-vel] .price thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cenik[data-vel] .price,.cenik[data-vel] .price tbody{display:block}
.cenik[data-vel] .price tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 1.2rem;padding:.62rem 0 .68rem;background:repeating-linear-gradient(90deg,rgba(246,239,227,.34) 0 11px,transparent 11px 19px) 0 100%/100% 2px no-repeat}
.cenik[data-vel] .price tbody th,.cenik[data-vel] .price td{padding:0}
.cenik[data-vel] .price td{font-size:clamp(1.85rem,4vw,3.25rem);font-variant-numeric:tabular-nums}
.cenik[data-vel="0"] .price td:not(.v0),.cenik[data-vel="1"] .price td:not(.v1),.cenik[data-vel="2"] .price td:not(.v2),.cenik[data-vel="3"] .price td:not(.v3){display:none}
.jedna-h{margin:2.4rem 0 1rem;font-size:clamp(1.25rem,2vw,1.6rem);color:var(--cream)}
.jedna{display:grid;gap:.8rem;margin:0;padding:0;list-style:none}
.jedna li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 .9rem;align-items:center;padding:.85rem 1.1rem .9rem 2.9rem;border-radius:.9rem;background:linear-gradient(160deg,#EFD189,#D8AB4F 55%,#CDA044);color:var(--navy2);box-shadow:0 0 0 2px var(--brass-d)}
.jedna li::before{content:"";position:absolute;left:1rem;top:50%;width:.95rem;height:.95rem;margin-top:-.475rem;border-radius:50%;background:var(--kuze);box-shadow:0 0 0 2.5px var(--brass-d)}
.jedna b{font:600 1.25rem/1.15 var(--head)}
.jedna span{grid-row:2;font-size:1.0625rem;line-height:1.3}
.jedna strong{grid-row:1/3;grid-column:2;font:600 1.75rem/1 var(--head);white-space:nowrap}
.cenik-pata{display:grid;gap:1.2rem;margin-top:2rem}
.price-note{color:var(--bledsi);max-width:42rem}
.cenik-pata .btn{justify-self:start}
@media (max-width:999px){
  .vel-txt{padding-top:.75rem}
}
@media (min-width:640px){
  .vel-txt b{font-size:1.2rem}
  .vel-txt small{font-size:1.0625rem}
}
@media (min-width:860px){
  .price tbody th{display:flex;align-items:baseline;gap:1.3rem}
  .svc-d{margin:0;font-size:1.125rem}
  .jedna{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
  .cenik-pata{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3rem}
  .cenik-pata .btn{justify-self:end}
}
@media (min-width:1000px){
  .cenik{--popisek:4.7rem}
  .cenik-titul{position:absolute;left:var(--okraj);top:0;z-index:3;width:min(41rem,46vw);margin:0;pointer-events:none}
  .cenik-titul .lead{max-width:27rem}
  .rada{justify-content:flex-end;gap:calc(10*var(--cm));padding-right:4.6rem}
  .vel-pl{display:block!important;margin-top:.1rem}
  .vel-txt{display:grid;grid-template-columns:auto 1fr;gap:0 .55rem;align-items:baseline}
  .vel-txt b{grid-row:1}
  .vel-txt small:not(.vel-pl){grid-row:1;grid-column:2}
  .vel-pl{grid-column:1/-1}
  .pravitko{display:block;position:absolute;right:var(--okraj);bottom:var(--popisek);width:3.8rem;height:calc(120*var(--cm));border-right:2px solid var(--navy2);background:repeating-linear-gradient(to top,var(--navy2) 0 2px,transparent 2px calc(10*var(--cm))) 100% 0/.7rem 100% no-repeat}
  .cm{position:absolute;right:1.05rem;transform:translateY(50%);font:600 .9rem/1 var(--head);color:var(--navy2);white-space:nowrap}
  .c20{bottom:calc(20*var(--cm))}
  .c40{bottom:calc(40*var(--cm))}
  .c60{bottom:calc(60*var(--cm))}
  .c80{bottom:calc(80*var(--cm))}
  .c100{bottom:calc(100*var(--cm))}
  .znacka{position:absolute;right:-.55rem;bottom:0;width:1rem;height:1rem;margin-bottom:-.5rem;border-radius:50%;background:#FFFBF2;box-shadow:0 0 0 2px var(--navy2);transform:translateY(calc(var(--v,0)*var(--cm)*-1));transition:transform .3s cubic-bezier(.2,.7,.2,1)}
}

/* střihy: obří slova místo záložek */
.strihy-in{display:grid;gap:1.2rem}
.strihy-hlava h2{font-size:clamp(2rem,3.9vw,3.4rem);line-height:1.05;margin-bottom:.7rem;text-wrap:balance}
.tabs{gap:.2rem .95rem;margin-top:.8rem}
.tab{min-height:3.1rem;padding:0;border-radius:.3rem;box-shadow:none;font:600 clamp(2.2rem,6.9vw,6.4rem)/1.04 var(--head);letter-spacing:-.015em;color:#8D6A22;transition:color .15s}
.tab:hover{background:none;color:var(--navy)}
.tab[aria-selected="true"]{background:none;color:var(--navy)}
.is-tabs .seasons{margin-top:1.2rem}
.season{padding:0;border:0;border-radius:0;background:none}
.season p{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.38;max-width:32rem}
.season .btn{margin-top:1.3rem}
@media (max-width:859px){
  .tab[aria-selected="true"]{box-shadow:inset 0 -.18em 0 var(--brass-l)}
}
@media (min-width:860px){
  .strihy-in{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-rows:auto 1fr;gap:1.6rem 4rem;align-items:start}
  .strihy-hlava{grid-column:2;grid-row:1}
  #seasons-box{display:contents}
  .tabs{grid-column:1;grid-row:1/3;flex-direction:column;align-items:flex-start;margin:0}
  .is-tabs .seasons{grid-column:2;grid-row:2;margin:0;max-width:none}
  .tab[aria-selected="true"]::after{content:"";display:inline-block;width:.34em;height:.34em;margin-left:.22em;border-radius:50%;background:linear-gradient(160deg,#EFD189,#D8AB4F 55%,#CDA044);box-shadow:0 0 0 .05em var(--brass-d);vertical-align:.14em}
}

/* příprava: pás kůže, služby jako malé známky */
.prep{padding:clamp(4.4rem,8vw,7.5rem) 0}
.prep .lead{margin-top:1rem;color:var(--bledsi);max-width:38rem}
.prep-grid{margin-top:clamp(2.4rem,4vw,3.6rem)}
.step{font-size:clamp(1.25rem,1.8vw,1.5rem);margin-bottom:.8rem}
.step small{font-size:1.0625rem}
.chips{gap:.65rem}
.chip span{position:relative;min-height:3.2rem;padding:.5rem 1.15rem .5rem 2.45rem;border:0;border-radius:.8rem;font-size:1.125rem;color:var(--navy2);background:linear-gradient(160deg,#EFD189,#D8AB4F 55%,#CDA044);box-shadow:0 0 0 2px var(--brass-d);transition:box-shadow .15s,background .15s}
.chip span::before{content:"";position:absolute;left:.95rem;top:50%;width:.85rem;height:.85rem;margin-top:-.425rem;border-radius:50%;background:var(--kuze);box-shadow:0 0 0 2px var(--brass-d)}
.chip:hover span{box-shadow:0 0 0 2px var(--brass-l)}
.chip input:checked+span{color:var(--navy2);background:var(--cream3);box-shadow:0 0 0 3px var(--brass-l)}
.rules{border-color:rgba(246,239,227,.45);background:rgba(255,255,255,.05);padding:1.2rem 1.3rem}
.rules p{font-size:1.125rem}
.rules .step{font-size:clamp(1.25rem,1.8vw,1.5rem)}
.rules .sub{font-size:1.0625rem}
.field label{font-size:1.0625rem}
.field input{min-height:3.3rem;font-size:1.125rem}
.sms-lbl{font-size:1.0625rem;letter-spacing:.04em;text-transform:none}
.sms-prev{position:relative;padding:1.1rem 1.25rem;border:0;border-radius:1.2rem 1.2rem 1.2rem .3rem;font-size:clamp(1.125rem,1.6vw,1.3rem);line-height:1.4}
.prep .hint{font-size:1.0625rem}

html:not(.js) .prep-grid{grid-template-columns:minmax(0,38rem)}
html:not(.js) .prep-grid .col:first-child{display:none}

/* kroky: cvočky na stehu */
.kroky{padding:0 0 clamp(4.4rem,8vw,7rem);overflow-x:clip}
.kroky h2{font-size:clamp(2rem,3.9vw,3.4rem);color:var(--cream);margin:0}
.steps{position:relative;gap:1.8rem;margin-top:2.2rem}
.steps li{padding-left:4.6rem}
.steps li::before{width:3.5rem;height:3.5rem;font-size:1.6rem;color:var(--navy2);box-shadow:0 0 0 .2rem var(--brass-d),inset 0 .15rem .2rem rgba(255,255,255,.5)}
.steps h3{font-size:clamp(1.45rem,2.2vw,1.9rem);color:var(--cream)}
.steps p{margin-top:.3rem;color:var(--bledsi);font-size:1.0625rem}
.steps .fake{color:var(--bledsi);font-size:1rem}
.steps::before{content:"";position:absolute;left:1.72rem;top:0;bottom:0;width:2px;background:repeating-linear-gradient(0deg,var(--zarez) 0 12px,transparent 12px 20px)}
@media (min-width:600px){
  .steps li{padding-left:0;padding-top:0}
}
@media (min-width:860px){
  .steps{gap:3rem;margin-top:3rem}
  .steps::before{left:-100vw;right:-100vw;top:1.72rem;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--zarez) 0 13px,transparent 13px 21px)}
  .steps li{padding-top:5rem}
}
@media (min-width:600px) and (max-width:859px){
  .steps{grid-template-columns:1fr}
  .steps li{padding-left:4.6rem}
}

/* příběh: velká známka */
.pribeh{position:relative;background:var(--cream2);overflow:visible}
.pribeh-in{display:grid;gap:2.4rem;align-items:center}
.story{margin-top:1.4rem;max-width:40rem}
.story p{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.38}
.velka-znamka{position:relative;z-index:2;order:-1;width:min(70%,17rem);height:auto;margin:calc(clamp(4rem,8vw,7.5rem)*-1 - 1.6rem) auto 0;overflow:visible}
.vz-krouzek{fill:none;stroke:var(--brass-d);stroke-width:13}
.vz-stin{fill:rgba(31,58,95,.11)}
.vz-hrana{fill:var(--brass-d)}
.vz-steh{fill:none;stroke:rgba(120,88,26,.6);stroke-width:4;stroke-dasharray:2 11;stroke-linecap:round}
.vz-dira{fill:var(--cream2);stroke:var(--brass-d);stroke-width:5}
.vz-m{font:600 44px/1 var(--head);fill:var(--navy2)}
.vz-v{font:600 118px/1 var(--head);fill:var(--navy2)}
@media (min-width:860px){
  .pribeh-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:4rem;align-items:start}
  .velka-znamka{order:0;width:min(100%,27rem)}
}

/* kontakt: mosazný pás s hodinami */
.kontakt{overflow:clip}
.where{gap:2.4rem;margin-top:clamp(1.8rem,4vw,3.2rem)}
.addr{font-size:inherit}
.addr strong{font-size:clamp(1.45rem,2.2vw,1.9rem);margin-bottom:.1rem}
.addr .live{display:flex;margin:.8rem 0 1.6rem;padding:0;border:0;border-radius:0;background:none;font-size:clamp(1.25rem,2vw,1.6rem);color:var(--navy2)}
.addr .live .live-sep{color:var(--navy2)}
.live.is-open .live-dot{background:#1F6B2A}
.hours-title,.how-title{font-size:1.0625rem;color:var(--navy2);border-bottom:0;padding-bottom:0;margin-bottom:.5rem}
.hours-list{margin:0;font-size:clamp(1.125rem,1.8vw,1.4rem)}
.hours-list div{padding:.6rem .7rem;margin:0 -.7rem;border-bottom:0;border-radius:.6rem;background:repeating-linear-gradient(90deg,rgba(22,41,74,.42) 0 9px,transparent 9px 16px) 0 100%/100% 2px no-repeat}
.hours-list dd,.hours-list dd.off{font-size:1.15em;color:var(--navy2)}
.hours-list .today{background:var(--navy2);color:var(--cream)}
.hours-list .today dd{color:var(--brass-l)}
.today-tag{background:var(--brass-l);color:var(--navy2)}
.how-list li{padding:.75rem 0 .75rem 2rem;font-size:clamp(1.125rem,1.7vw,1.3rem);line-height:1.34;border-bottom:0;background:repeating-linear-gradient(90deg,rgba(22,41,74,.42) 0 9px,transparent 9px 16px) 0 100%/100% 2px no-repeat}
.how-list li:last-child{background:none}
.how-list li::before{left:.1rem;top:1.2rem;width:.85rem;height:.85rem;background:var(--navy2);box-shadow:none}
.kontakt .fake{color:var(--navy2)}

/* konec: velká věta a učesaný pes */
.konec{padding:clamp(4.4rem,9vw,7.5rem) 0 0;overflow:hidden}
.konec-in{position:relative;display:grid;gap:1rem}
.konec h2{font-size:clamp(3.1rem,9.3vw,8.6rem);line-height:.96;letter-spacing:-.02em;color:var(--cream)}
.konec-v{margin-top:1.1rem;font:600 clamp(1.5rem,3vw,2.6rem)/1.1 var(--head);color:var(--brass-l)}
.konec-akce{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.konec-tel{margin-top:1.1rem;font:600 clamp(1.25rem,2vw,1.6rem)/1.2 var(--head);color:var(--cream)}
.konec-tel .fake{display:block;margin-top:.3rem;font:400 1rem/1.3 var(--body);color:var(--bledsi)}
.konec-pes{--w:min(78vw,21rem);justify-self:center;width:var(--w);height:auto;margin-bottom:calc(var(--w)*-.085)}
@media (min-width:860px){
  .konec-in{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0}
  .konec-txt{position:relative;z-index:1;grid-column:1/-1;grid-row:1;padding-bottom:clamp(3rem,6vw,5rem)}
  .konec-pes{--w:clamp(19rem,31vw,28rem);grid-column:2;grid-row:1;justify-self:end;align-self:end}
}

/* patička: obojek se zapne přezkou */
.foot{padding:0 0 2.6rem;font-size:1.0625rem;background-color:var(--inkoust)}
.foot-pas{position:relative;height:3.6rem;background:var(--navy);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),inset 0 -3px 0 rgba(0,0,0,.2)}
.foot-pas::before,.foot-pas::after{content:"";position:absolute;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,var(--zarez) 0 13px,transparent 13px 21px)}
.foot-pas::before{top:.55rem}
.foot-pas::after{bottom:.55rem}
.prezka{position:absolute;left:clamp(1rem,8vw,7rem);top:50%;width:clamp(7.5rem,11vw,10rem);height:auto;transform:translateY(-50%);z-index:1;overflow:visible}
.pz-stin{fill:rgba(0,0,0,.28)}
.pz-ram{fill:url(#pz);stroke:#8D6A22;stroke-width:3}
.pz-okno{fill:var(--navy);stroke:#8D6A22;stroke-width:3}
.pz-trn{fill:none;stroke:#E9C875;stroke-width:10;stroke-linecap:round}
.pz-osa{fill:#D8AB4F;stroke:#8D6A22;stroke-width:3}
.foot-in{display:grid;gap:.8rem;padding-top:2.6rem}
.foot-jm{font:600 clamp(2rem,4vw,3.2rem)/1.05 var(--head);color:var(--cream)}
.foot-o{color:var(--bledsi);max-width:38rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
.foot-nav a{display:inline-block;padding:.45rem 0;color:var(--cream);font-weight:600;text-decoration:none}
.foot-nav a:hover{color:var(--brass-l)}
.foot .small{font-size:1.0625rem}
/* HERO-OBRAZ (generuje vizitka/tools/hero_obraz.py) */
.hero-obraz{--ho-h:max(34rem,min(calc(100svh - 4.5rem),56.25vw))}
.ho-obraz{position:relative;margin:0;overflow:hidden}
.ho-obraz img{display:block;width:100%;height:auto;aspect-ratio:4/5;max-height:max(20rem,48svh);object-fit:cover;object-position:50% 80%}
@media (prefers-reduced-motion:no-preference){.ho-obraz img{animation:ho-zoom 1.2s cubic-bezier(.16,1,.3,1) both}}
@keyframes ho-zoom{from{transform:scale(1.04)}}
@media (max-width:1099px){
.hero-obraz{overflow-x:clip;padding-top:0}
.hero-obraz>.ho-obraz{grid-column:1/-1;width:100vw;max-width:none;margin:0 calc(50% - 50vw) 1.4rem}
}
@media (min-width:760px) and (max-width:1099px){
.ho-obraz img{aspect-ratio:16/9;max-height:60svh;object-position:50% 50%}
}
@media (min-width:1100px){
.hero-obraz{position:relative;isolation:isolate}
.hero-obraz>.ho-obraz{position:absolute;top:0;left:0;right:0;height:var(--ho-h);z-index:-1;margin:0}
.ho-obraz picture{display:contents}
.ho-obraz img{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-position:var(--ho-pos,50% 50%)}
.ho-obraz::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgb(var(--ho-t) / .9) 0,rgb(var(--ho-t) / .72) 30%,rgb(var(--ho-t) / .25) 52%,rgb(var(--ho-t) / 0) 66%)}
}
@media (min-width:1100px){
.hero-obraz{--ho-t:246 239 227}
.hero-obraz .hero-in{min-height:var(--ho-h);align-items:center}
.hero-obraz .hero-text{max-width:34rem}
}
/* /HERO-OBRAZ */
/* FORMA-POLISH (generuje vizitka/tools/ukazky-polish.py) */
::selection{background:#c8431f;color:#ffffff}
:where(html){scrollbar-color:#c8431f #f6efe3}
:where(input,textarea){caret-color:#c8431f}
:where(a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible){outline:3px solid #c8431f;outline-offset:3px}
:where(a){text-underline-offset:.2em}
:where(table,dd,time,data,[class*=cen],[class*=price],[class*=hod],[class*=hours],[class*=doba],[class*=kc]){font-variant-numeric:tabular-nums}
/* /FORMA-POLISH */