/* ═══════════════════════════════════════════════════════════════════════
   KRESLENÝ PORTRÉT · banner na úvodu, detail /portret, objednávkové okno
   a objednávky v Moje výtvory. Staví jen na tokenech a předmětech ze
   zaklad.css (papír, polaroid, páska, samolepka, visačka, tlačítka) a na
   variantách, drobcích a sekcích z detail.css. Předpona pt- = portrét.
   Barva portrétu je babiččina růže (--p-ruz): stejná jako kostkovaný
   ubrus a závěrečná karta ve videích z dílny.
   ═══════════════════════════════════════════════════════════════════════ */

/* Smyčky videí nejdou chytit myší: Chrome, Opera a Edge jinak při najetí nabízejí přes video tlačítka „obraz v obraze“ a „přeskočit“
   (majitel 6. 10. 2026: odstranit). Celé video se zvukem má vlastní ovládání (atribut controls), to zůstává. */
video:not([controls]){pointer-events:none}
/* smyčky se kreslí na plátno (js/smycky.js): video zůstane 2 px schované v rohu rámečku, plátno má rozměry původního videa */
.km-smycka-skryta{position:absolute!important;left:0;top:0;width:2px!important;height:2px!important;max-height:none!important;aspect-ratio:auto!important;
  opacity:0;pointer-events:none;clip-path:inset(50%)}
.pt-hero-list canvas.km-platno-smycky,.pt-pr-list canvas.km-platno-smycky{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:1px;background:var(--papir-2)}
canvas.km-platno-smycky.pt-video{display:block;width:100%;height:auto;max-height:calc(100svh - var(--hdr,84px) - 220px);object-fit:contain;background:var(--papir-2)}
/* ═══ ÚVOD: velký banner s videem ═════════════════════════════════════ */
.pt-hero .km-hero-telo{max-width:40ch}
.pt-hero-cena{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s5)}
.pt-hero-scena{position:relative;padding:18px 0 34px}
/* papír s videem leží na stole trochu nakřivo, polaroid s fotkou přes roh */
.pt-hero-list{position:relative;rotate:1.5deg;padding:10px 10px 12px;background:var(--list);border-radius:var(--r-papir);box-shadow:var(--stin-zvednuta)}
.pt-hero-list video{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:1px;background:var(--papir-2)}   /* videa z dílny jsou 4:5 */
.pt-hero-polaroid{position:absolute;left:-34px;top:-4px;width:clamp(92px,34%,128px);rotate:-7deg;z-index:var(--z-ozdoba)}
.pt-hero-polaroid .km-polaroid-in{padding:6% 6% 18%}
.pt-hero-polaroid img{height:auto;aspect-ratio:3/4}   /* height:auto: jinak atribut height="960" přebije poměr stran */
.pt-hero-polaroid .pt-paska{position:absolute;top:-10px;left:50%;translate:-50% 0;--w-sirka:64px;--w-uhel:4deg}
.pt-hero-stitek{position:absolute;right:-10px;bottom:10px;z-index:var(--z-ozdoba);--uhel:4deg}
.pt-hero-pod{margin-top:var(--s3)}
@media (max-width:900px){.pt-hero-polaroid{left:-18px}}
@media (max-width:640px){.pt-hero-polaroid{left:-10px;width:30%}.pt-hero-stitek{right:-6px}}
/* Telefon (majitel 6. 10. 2026 večer: první box „moc dlouhý, nehezky zarovnaný“): kratší odstavec, vyrovnané řádky,
   bez řádku pod tlačítkem (termín nese samolepka ve scéně a řádek výhod hned pod boxem). */
.pt-hero-text-telefon{display:none}
@media (max-width:640px){
  .pt-hero .pt-hero-text{display:none}
  .pt-hero .pt-hero-text-telefon{display:block;font-size:17px;line-height:1.5;text-wrap:pretty}
  .pt-hero .pt-hero-pod{display:none}
  .pt-hero .pt-hero-cena{margin-top:var(--s4)}
  .pt-hero .km-hero-tl{margin-top:var(--s4)}}

/* ═══ ÚVOD: malé bannery „Již brzy“ (nejsou odkaz, nic se tu nekupuje) ═══ */
.pt-brzy{cursor:default}
.pt-brzy .km-banner-text > .km-banner-veta{max-width:17em}
.pt-brzy-stitek{align-self:flex-start}
.pt-brzy-pata{grid-area:pata;position:relative;z-index:var(--z-text);margin-top:var(--s3);font:600 15px/1.35 var(--f-ui);color:var(--ink-dim)}
/* Předmět vpravo: hlavní je list omalovánky a magnetka, skutečná fotka, ze které vznikly,
   je jen malý polaroid přelepený přes jejich pravý dolní roh (přání majitele 5. 10. 2026).
   Stojí ve volném sloupci vedle textu a je s textem svisle na středu; šířka je zbytek
   sloupce za mezerou 12 px (nejvýš 168 px), takže se textu nikdy nedotkne. */
.pt-brzy-omal,.pt-brzy-mag{grid-column:2;grid-row:1;align-self:center;justify-self:center;position:relative;z-index:var(--z-predmet);
  width:min(100% - 12px,168px);margin-left:12px}
.pt-brzy-polaroid{position:absolute;z-index:var(--z-ozdoba);right:-11%;width:33%}
.pt-brzy-polaroid .km-polaroid-in{padding:7% 7% 20%}
.pt-brzy-polaroid img{display:block;height:auto;aspect-ratio:3/4}   /* height:auto: jinak atribut height přebije poměr stran */
.pt-brzy-polaroid .pt-paska{top:-6px;left:50%;translate:-50% 0;--w-sirka:30px;--w-vyska:12px;--w-uhel:-6deg;--zub:4px}
.pt-brzy-omal .pt-brzy-polaroid{bottom:-9%}
.pt-brzy-mag .pt-brzy-polaroid{bottom:-17%}

/* Omalovánka: list papíru; barevná verze leží pod maskou z klikaté tlusté čáry (tahy pastelkou přes celý list), která se
   kreslí od shora dolů (stroke-dashoffset 1 → 0 přes pathLength 1). Vybarvená chvíli zůstane, pak se barvy ztratí a jede se znovu. */
.pt-brzy-arch{position:relative;display:block;rotate:-3deg;padding:6px 6px 8px;background:var(--list);border-radius:var(--r-papir);box-shadow:var(--stin-karta)}
.pt-brzy-svg{display:block;width:100%;height:auto}
.pt-brzy-tah{stroke-dasharray:1;stroke-dashoffset:1;animation:pt-vybarvit 14s linear 1s infinite}
.pt-brzy-barvy{animation:pt-vybarvene 14s linear 1s infinite}
@keyframes pt-vybarvit{0%{stroke-dashoffset:1}6%{stroke-dashoffset:1}62%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes pt-vybarvene{0%,86%{opacity:1}94%,100%{opacity:0}}
/* bez pohybu: napůl vybarvená, ať je vidět kresba i barvy */
html[data-pohyb="klidna"] .pt-brzy-tah{animation:none;stroke-dashoffset:.5}
html[data-pohyb="klidna"] .pt-brzy-barvy{animation:none}
@media (prefers-reduced-motion:reduce){.pt-brzy-tah{animation:none;stroke-dashoffset:.5}.pt-brzy-barvy{animation:none}}

/* Magnetka: jde chytit a přicvakne zpátky (fyzika.js) */
.pt-brzy-magnetka{display:block;width:100%;cursor:grab;-webkit-user-select:none;user-select:none}
.pt-brzy-magnetka.je-zvednuta{z-index:var(--z-text)}   /* chycená jede nad fotkou, ne pod ní */
.pt-brzy-magnetka img{-webkit-user-drag:none;pointer-events:none}
.pt-brzy-magnetka:active{cursor:grabbing}
.pt-brzy-polaroid img{-webkit-user-drag:none}
@media (hover:hover) and (pointer:fine){.pt-brzy:hover{translate:none}}

/* ═══ ÚVOD: ukázky videí (sekce „Podívejte se, jak portrét vzniká“) ═══ */
.pt-ukazky{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7);align-items:start;margin-top:var(--s7)}
.pt-ukazka{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.pt-ukazka-list{position:relative;width:min(100%,440px);padding:12px 12px 14px;background:var(--list);border-radius:var(--r-papir);box-shadow:var(--stin-zvednuta)}
.pt-ukazka:nth-child(odd) .pt-ukazka-list{rotate:-1.2deg}
.pt-ukazka:nth-child(even) .pt-ukazka-list{rotate:1.4deg}
.pt-ukazka video{display:block;width:100%;height:auto;object-fit:contain;background:var(--papir-2)}   /* vlastní poměr videa (atributy width/height), nikdy ořez */
.pt-ukazka figcaption{text-align:center}
.pt-ukazka figcaption b{display:block;font:var(--w-titul) var(--t-h3)/var(--lh-h3) var(--f-titul)}
.pt-ukazka figcaption span{display:block;margin-top:var(--s1);color:var(--ink-dim);font:500 15px/1.45 var(--f-ui)}
.pt-ukazka .pt-paska{position:absolute;top:-12px;left:50%;translate:-50% 0;--w-sirka:110px;--w-uhel:-3deg}
.pt-ukazky-akce{display:flex;justify-content:center;margin-top:var(--s7)}
@media (max-width:900px){.pt-ukazky{gap:var(--s6)}}
@media (max-width:640px){.pt-ukazky{grid-template-columns:minmax(0,1fr);gap:var(--s7)}.pt-ukazka-list{width:min(100%,360px)}}

/* ═══ ÚVOD: ceny portrétu → viz blok „CENY“ v části MODERNÍ PLOCHY na konci souboru ═══ */

/* ═══ DETAIL /portret ═════════════════════════════════════════════════ */
.pt-detail{padding-block:var(--s6) var(--s8)}
.pt-mriz{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"hlava" "galerie" "panel";row-gap:var(--s5)}
.pt-mriz > *{min-width:0}
.pt-hlava{grid-area:hlava;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.pt-hlava .km-t-h1{margin:0;max-width:13em}
.pt-novinka{--uhel:-2deg}
.pt-cena-radek{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:0}
.pt-cena-radek .km-t-meta{font-size:15px}
.pt-galerie{grid-area:galerie;display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.pt-panel{grid-area:panel;display:flex;flex-direction:column;gap:var(--s5)}
/* detail.css na telefonu řadí .km-varianty přes order (pro detail stylu); tady platí pořadí v HTML */
.pt-panel > *{order:0!important}
@media (min-width:1001px){
  .pt-mriz{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto 1fr;
    grid-template-areas:"galerie hlava" "galerie panel";column-gap:clamp(40px,5vw,80px);row-gap:var(--s5)}
  .pt-galerie{position:sticky;top:calc(var(--hdr,84px) + var(--s4));align-self:start}}

/* scéna: růžový akvarelový papír, v něm list s videem nebo portrétem */
.pt-scena{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1/1.08;padding:clamp(20px,4%,40px);overflow:hidden}
.pt-ramecek{position:relative;margin:0;width:min(74%,480px);padding:10px 10px 12px;background:var(--list);border-radius:var(--r-papir);
  box-shadow:var(--stin-zvednuta);rotate:-1.2deg}
.pt-ramecek--po{rotate:1deg}
.pt-video,.pt-obr{display:block;width:100%;height:auto;max-height:calc(100svh - var(--hdr,84px) - 220px);object-fit:contain;background:var(--papir-2)}
.pt-ramecek--video .pt-video{aspect-ratio:4 / 5}   /* videa z dílny jsou 4 : 5; bez toho má <video> do načtení výšku 150 px a scéna při přepnutí poskočí */
.pt-cele{position:absolute;left:0;right:0;bottom:-22px;width:max-content;max-width:calc(100% - 16px);margin-inline:auto;rotate:1.2deg;z-index:var(--z-ozdoba);box-shadow:var(--stin-samolepka)}
/* při najetí se tlačítko jen obarví pastelem své karty (--pr-barva), nikam neodjíždí */
@media (hover:hover) and (pointer:fine){.pt-cele:hover{--bg:var(--pr-barva,var(--p-ruz));translate:none}}
.pt-cele:active{--bg:var(--pr-barva,var(--p-ruz));translate:none;box-shadow:var(--stin-samolepka)}
.pt-cele svg{fill:currentColor;stroke:none}
.pt-ramecek.je-cele .pt-cele{display:none}
.pt-po{border-radius:1px}
/* devět ukázek: na počítači jedna řada přes celou šířku galerie, na telefonu pět a čtyři pod sebou */
.pt-nahledy{display:flex;justify-content:center;gap:var(--s2);flex-wrap:wrap;width:100%}
.pt-nahled{position:relative;display:block;flex:0 1 calc((100% - 8 * var(--s2)) / 9);max-width:88px;min-width:52px;aspect-ratio:4/5;padding:3px;border:0;border-radius:var(--r-mala);background:var(--list);
  box-shadow:var(--stin-karta);cursor:pointer;transition:translate var(--pruzina-magnet-doba) var(--pruzina-magnet)}
.pt-nahled img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-papir);background:var(--papir-2)}
.pt-nahled[aria-pressed="true"]{box-shadow:0 0 0 3px var(--kouzlo),var(--stin-karta);translate:0 -2px}
.pt-nahled:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.pt-nahled-hrat{position:absolute;right:5px;bottom:5px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;   /* v rohu, ať nezakrývá obličeje */
  background:rgb(var(--list-rgb) / .92);box-shadow:var(--stin-samolepka)}
.pt-nahled-hrat svg{width:9px;height:9px;fill:var(--ink);margin-left:1px}
.pt-galerie-veta{display:flex;flex-direction:column;align-items:center;gap:2px;margin:var(--s2) 0 0;text-align:center;min-height:3.2em}
.pt-galerie-veta b{font:var(--w-titul) var(--t-h3)/var(--lh-h3) var(--f-titul)}
.pt-galerie-veta span{color:var(--ink-dim);font:500 16px/1.45 var(--f-ui);max-width:30em}
.pt-galerie-pozn{margin:0;text-align:center}

.pt-perex{margin:0;color:var(--ink-dim);max-width:34em}
.pt-co-dostanete,.pt-duvera{display:flex;flex-direction:column;gap:var(--s3);margin:0;padding:0;list-style:none}
.pt-co-dostanete li{display:flex;align-items:flex-start;gap:var(--s3)}
.pt-co-dostanete svg{flex:none;width:44px;height:44px;padding:11px;border-radius:50%;background:var(--t-ruz);fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pt-co-dostanete b{display:block;font:650 16px/1.3 var(--f-ui)}
.pt-co-dostanete span{display:flex;flex-direction:column;gap:2px;padding-top:2px;font:500 15px/1.4 var(--f-ui);color:var(--ink-dim)}
.pt-co-dostanete span b{color:var(--ink)}
.pt-varianta{min-height:84px}
.pt-varianta-ikona{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-papir);background:var(--t-ruz)}
.pt-varianta-ikona svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Telefon: ikona, název a cena v jednom řádku, popis pod nimi přes celou šířku karty
   (vedle ikony a ceny zbýval popisu úzký sloupec na pět řádků; majitel 6. 10. 2026 večer: mobil celý).
   Dvě třídy: detail.css se načítá až po portret.css a jeho .km-varianta{display:flex} by jinak vyhrálo. */
@media (max-width:640px){
  .km-varianta.pt-varianta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ikona nazev cena" "popis popis popis";gap:10px 12px;align-items:center}
  .pt-varianta .pt-varianta-ikona{grid-area:ikona;width:44px;height:44px}
  .pt-varianta .km-varianta-txt{display:contents}
  .pt-varianta .km-varianta-txt > b{grid-area:nazev}
  .pt-varianta .km-varianta-txt > span{grid-area:popis;margin-top:0;text-wrap:pretty}
  .pt-varianta .km-varianta-cena{grid-area:cena}}
.pt-varianta .km-varianta-cena{font:var(--w-titul) 20px/1 var(--f-titul)}
.pt-hlavni-blok{display:flex;flex-direction:column;gap:var(--s3)}
.pt-souhrn-ceny{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin:0;padding-bottom:var(--s2);border-bottom:1.5px dashed var(--linka)}
.pt-souhrn-ceny b{font:var(--w-titul) 34px/1 var(--f-titul);letter-spacing:-.02em}
.pt-pod-tlacitkem{margin:0;text-align:center}
.pt-duvera li{display:flex;align-items:center;gap:var(--s3);font:500 15px/1.4 var(--f-ui);color:var(--ink-dim)}
.pt-duvera svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--uspech);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* postup ve čtyřech krocích */
.pt-postup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6);margin:0;padding:0;list-style:none;counter-reset:krok}
.pt-postup li{display:flex;flex-direction:column;gap:var(--s2)}
.pt-postup h3{margin:var(--s2) 0 0}
.pt-postup p{margin:0;color:var(--ink-dim);font-size:16px}
.pt-postup-cislo{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--p-ruz);font:var(--w-titul) 24px/1 var(--f-titul);color:var(--ink)}
.pt-postup li:nth-child(2) .pt-postup-cislo{background:var(--p-lev)}
.pt-postup li:nth-child(3) .pt-postup-cislo{background:var(--p-mat)}
.pt-postup li:nth-child(4) .pt-postup-cislo{background:var(--p-mas)}
@media (max-width:900px){.pt-postup{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pt-postup{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}

/* ═══ OKNO OBJEDNÁVKY ═════════════════════════════════════════════════ */
.pt-okno{width:min(620px,calc(100% - 32px))}
.pt-okno .km-okno-in{padding:40px 36px 32px}
.pt-kroky{display:flex;gap:var(--s2);margin:0 0 var(--s4);padding:0 var(--s7) 0 0;list-style:none;counter-reset:pt-krok}
.pt-kroky li{flex:1;display:flex;flex-direction:column;gap:6px;font:600 13px/1.2 var(--f-ui);color:var(--ink-dim);counter-increment:pt-krok}
.pt-kroky li::before{content:"";height:5px;border-radius:var(--r-pill);background:var(--linka);transition:background-color var(--d-kratce) var(--ease)}
.pt-kroky li.je-hotovo::before,.pt-kroky li.je-aktivni::before{background:var(--kouzlo)}
.pt-kroky li.je-aktivni{color:var(--ink)}
.pt-kroky li[hidden]{display:none}
.pt-okno[data-aktivni-krok="hotovo"] .pt-kroky{display:none}
.pt-krok{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s5)}
.pt-krok[hidden]{display:none}
.pt-krok .km-pole{margin-top:0}
.pt-krok-tl{display:flex;justify-content:space-between;gap:var(--s3);margin-top:var(--s2)}
.pt-krok-tl .km-tl{flex:0 1 auto}
.pt-krok-tl .km-tl:last-child{flex:1 1 auto;max-width:320px}
.pt-nepovinne{font:500 var(--t-meta)/1 var(--f-ui);color:var(--ink-dim)}

/* 1 · volba varianty: dvě velké karty s obrázkem */
.pt-volby{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.pt-volba{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s5) var(--s4) var(--s4);
  border-radius:var(--r-ovladani);background:var(--list);box-shadow:inset 0 0 0 1.5px var(--linka);cursor:pointer;text-align:center;
  transition:translate var(--pruzina-magnet-doba) var(--pruzina-magnet),box-shadow var(--d-rychle) var(--ease)}
.pt-volba input{position:absolute;opacity:0;pointer-events:none}
.pt-volba:has(input:checked){background:var(--t-lev);box-shadow:inset 0 0 0 2px var(--kouzlo);translate:0 -2px}
.pt-volba:has(input:checked)::after{content:"";position:absolute;right:-8px;top:-8px;width:26px;height:26px;border-radius:50%;
  background:var(--kouzlo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow:0 0 0 2.5px var(--list)}                                         /* %23FFFDF9 = --list */
.pt-volba:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.pt-volba:not(:has(input:checked)):hover{box-shadow:inset 0 0 0 1.5px var(--pole-linka)}}
.pt-volba-obr{display:grid;place-items:center;height:156px}
.pt-volba-txt b{display:block;font:var(--w-titul) 21px/1.15 var(--f-titul)}
.pt-volba-txt span{display:block;margin-top:4px;font:500 15px/1.4 var(--f-ui);color:var(--ink-dim)}
.pt-volba-cena{font:var(--w-titul) 26px/1 var(--f-titul);letter-spacing:-.01em}
.pt-volba-stitek{position:absolute;top:-12px;left:18px;--uhel:-4deg}
/* telefon s portrétem (digitálně) a obraz v rámu (domů) */
.pt-telefon{position:relative;display:block;width:82px;aspect-ratio:9/16;padding:4px;border-radius:16px;background:var(--ink);box-shadow:var(--stin-karta);rotate:-4deg}
.pt-telefon img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
.pt-telefon-hrat{position:absolute;right:-12px;bottom:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--list);box-shadow:var(--stin-samolepka)}
.pt-telefon-hrat svg{width:15px;height:15px;fill:var(--ink);margin-left:2px}
.pt-ram{display:block;width:118px;padding:8px;background:var(--list);border:7px solid var(--kraft-syty);box-shadow:var(--stin-zvednuta);rotate:3deg}
.pt-ram img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

/* 2 · fotka: pole se stehy a polaroid s náhledem */
.pt-nahrat{display:flex;align-items:center;gap:var(--s5);min-height:140px;padding:var(--s5);border-radius:var(--r-ovladani);background:var(--t-lev);cursor:pointer}
.pt-nahrat-vstup{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pt-nahrat:has(.pt-nahrat-vstup:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.pt-nahrat-polaroid{flex:none;width:96px;rotate:-4deg}
.pt-nahrat-polaroid .km-polaroid-in{position:relative;padding:6px 6px 20px}
.pt-nahrat-polaroid img{height:auto;aspect-ratio:1;object-fit:cover}
.pt-nahrat-plus{display:grid;place-items:center;aspect-ratio:1;background:var(--papir-2)}
.pt-nahrat-plus svg{width:30px;height:30px;fill:none;stroke:var(--kouzlo);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pt-nahrat-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.pt-nahrat-txt b{font:var(--w-titul) 22px/1.15 var(--f-titul)}
.pt-nahrat-txt span{font:500 15px/1.45 var(--f-ui);color:var(--ink-dim)}
.pt-nahrat.je-nahrano{background:var(--t-mat)}
.pt-pravidlo{margin:0}

/* 3 · doručení */
.pt-pole-radek{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:var(--s3)}

/* 4 · shrnutí */
.pt-shrnuti{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s4) var(--s5);padding:var(--s5);border-radius:var(--r-list)}
.pt-shrnuti-foto{width:96px;margin:4px 0 0;align-self:start}
.pt-shrnuti-foto .km-polaroid-in{padding:6px 6px 18px}
.pt-shrnuti-udaje{display:flex;flex-direction:column;gap:var(--s3);margin:0}
.pt-shrnuti-udaje dt{font:600 var(--t-meta)/1.2 var(--f-ui);color:var(--ink-dim)}
.pt-shrnuti-udaje dd{margin:2px 0 0;font:500 16px/1.45 var(--f-ui);overflow-wrap:anywhere}
.pt-shrnuti-cena{grid-column:1 / -1;display:flex;align-items:baseline;justify-content:space-between;margin:0;padding-top:var(--s3);border-top:1.5px dashed var(--linka)}
.pt-shrnuti-cena span{font:600 16px/1 var(--f-ui)}
.pt-shrnuti-cena b{font:var(--w-titul) 32px/1 var(--f-titul);letter-spacing:-.02em}
.pt-platba-pozn{display:flex;align-items:flex-start;gap:var(--s2);margin:0}
.pt-platba-pozn svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--uspech);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 5 · hotovo */
.pt-hotovo{align-items:center;text-align:center}
.pt-hotovo-razitko{display:grid;place-items:center;width:84px;height:84px}
.pt-hotovo-razitko svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pt-hotovo .km-t-lead{margin:0;max-width:30em}

@media (max-width:640px){
  .pt-okno .km-okno-in{padding:28px 20px 24px}
  .pt-kroky{padding-right:var(--s7)}
  .pt-volby{gap:var(--s3)}
  .pt-volba{padding:var(--s4) var(--s3) var(--s3)}
  .pt-volba-obr{height:128px}
  .pt-telefon{width:66px}
  .pt-ram{width:96px;border-width:6px;padding:6px}
  .pt-volba-txt b{font-size:18px}
  .pt-volba-cena{font-size:22px}
  .pt-nahrat{gap:var(--s4);padding:var(--s4)}
  .pt-nahrat-polaroid{width:80px}
  .pt-pole-radek{grid-template-columns:minmax(0,1fr) 112px}
  .pt-shrnuti{grid-template-columns:72px minmax(0,1fr);padding:var(--s4)}
  .pt-shrnuti-foto{width:72px}
  .pt-krok-tl{flex-wrap:wrap}}
@media (max-width:360px){
  .pt-volby{grid-template-columns:minmax(0,1fr)}
  .pt-volba{flex-direction:row;text-align:left}
  .pt-volba-obr{height:auto;width:90px}
  .pt-pole-radek{grid-template-columns:minmax(0,1fr)}}

/* ═══ MOJE VÝTVORY: objednávky portrétů ═══════════════════════════════ */
.pt-objednavky{display:flex;flex-direction:column;gap:var(--s5);margin:0 0 var(--s8);padding:0;list-style:none}
.pt-objednavka{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s5);padding:var(--s5);border-radius:var(--r-list);background:var(--list);box-shadow:var(--stin-karta)}
.pt-objednavka-foto{margin:0;width:120px;rotate:-2deg;align-self:start}   /* jinak se polaroid v mřížce natáhne na výšku karty */
.pt-objednavka-foto .km-polaroid-in{padding:6px 6px 18px}
.pt-objednavka-foto img{height:auto;aspect-ratio:3/4}
.pt-objednavka-telo{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.pt-objednavka-hlava{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3)}
.pt-objednavka-hlava h3{margin:0;font:var(--w-titul) var(--t-h3)/var(--lh-h3) var(--f-titul)}
.pt-objednavka-meta{margin:0;color:var(--ink-dim);font:500 var(--t-meta)/1.4 var(--f-ui)}
.pt-stav{--uhel:-2deg}
.pt-stav--ceka{background:var(--p-mas)}
.pt-stav--kreslime{background:var(--p-lev)}
.pt-stav--hotovo{background:var(--s-mat)}
.pt-stav--zruseno{background:var(--papir-2);color:var(--ink-dim)}
.pt-cesta{display:flex;gap:var(--s2);margin:0;padding:0;list-style:none}
.pt-cesta li{flex:1;display:flex;flex-direction:column;gap:6px;font:600 13px/1.25 var(--f-ui);color:var(--ink-dim)}
.pt-cesta li::before{content:"";height:5px;border-radius:var(--r-pill);background:var(--linka)}
.pt-cesta li.je-hotovo{color:var(--ink)}
.pt-cesta li.je-hotovo::before{background:var(--s-mat)}
.pt-cesta li.je-aktivni{color:var(--ink)}
.pt-cesta li.je-aktivni::before{background:var(--kouzlo)}
.pt-objednavka-text{margin:0;font:500 16px/1.5 var(--f-ui)}
.pt-vysledky{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);align-items:start}
.pt-objednavka > .pt-vysledky{grid-column:1 / -1}   /* přes fotku i text: celá šířka karty */
.pt-vysledek{display:flex;flex-direction:column;gap:var(--s3);margin:0}
.pt-vysledek-media{padding:8px 8px 10px;background:var(--list);border-radius:var(--r-papir);box-shadow:var(--stin-karta)}
/* Hotový portrét a video vždy celé ve vlastním poměru: zákaznice je vidí poprvé.
   Vysoký portrét se zmenší na výšku okna, zbytek plochy je papír. */
.pt-vysledek-media img,.pt-vysledek-media video{display:block;width:100%;height:auto;max-height:min(78svh,760px);object-fit:contain;background:var(--papir-2)}
.pt-vysledek-media a{display:block;cursor:zoom-in}
/* video bez plakátu: do načtení poměr videí z dílny (4 : 5, pak ho ucet.js upřesní), bez levandulových pruhů */
.pt-vysledek-media--video video{aspect-ratio:4/5;background:var(--list)}
/* odpočet do smazání (72 hodin od zveřejnění): máslový lístek nad portrétem a videem */
.pt-objednavka > .pt-odpocet{grid-column:1 / -1}
.pt-odpocet{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 16px;border-radius:var(--r-mala);background:var(--t-mas);
  box-shadow:inset 0 0 0 1.5px color-mix(in oklch,var(--s-mas),transparent 40%);font:500 15px/1.45 var(--f-ui);color:var(--ink);text-wrap:pretty}
.pt-odpocet svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pt-odpocet b{font-weight:800;white-space:nowrap}
.pt-vysledek-media a:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.pt-vysledek .km-tl{align-self:flex-start}
.pt-objednavka-akce{display:flex;flex-wrap:wrap;gap:var(--s3)}
@media (max-width:640px){
  .pt-objednavka{grid-template-columns:72px minmax(0,1fr);gap:var(--s4);padding:var(--s4)}
  .pt-objednavka-foto{width:72px}
  .pt-vysledky{grid-template-columns:minmax(0,1fr)}
  .pt-vysledek .km-tl{align-self:stretch}}
@media (max-width:360px){.pt-objednavka{grid-template-columns:minmax(0,1fr)}.pt-objednavka-foto{display:none}}

html[data-pohyb="klidna"] .pt-nahled,html[data-pohyb="klidna"] .pt-volba{transition:none}
@media (prefers-reduced-motion:reduce){.pt-nahled,.pt-volba{transition:none}}

/* ═══ LIŠTA: samolepka „Již brzy“ u kotvy na omalovánky a magnetky ═════ */
.km-kat-brzy{margin-left:6px;padding:2px 8px 3px;font-size:12px;rotate:-3deg;vertical-align:1px}

/* ═══ STRÁNKA /ucet: Moje výtvory ═════════════════════════════════════ */
.pt-ucet{padding-block:var(--s6) var(--s8)}
.pt-ucet-hlava{margin-bottom:var(--s6)}
.pt-ucet-hlava .km-t-h1{margin:0}
.pt-ucet-mriz{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s7);align-items:start}
.pt-ucet-sek{margin-bottom:var(--s5)}
.pt-ucet-bok{position:sticky;top:calc(var(--hdr,84px) + var(--s4));display:flex;flex-direction:column;gap:var(--s4)}
.pt-ucet-karta{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);border-radius:var(--r-list)}
.pt-ucet-karta p{margin:0}
.pt-ucet-email{font:650 16px/1.4 var(--f-ui);overflow-wrap:anywhere}
.pt-ucet-odhlasit{display:inline-flex;align-items:center;gap:var(--s2);align-self:flex-start;min-height:var(--cil)}
.pt-ucet-odhlasit svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pt-ucet-kredity{font:500 16px/1.2 var(--f-ui)} .pt-ucet-kredity b{font:var(--w-titul) 34px/1 var(--f-titul)}
.pt-pohyby{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s2) 0 0;padding:0;list-style:none}
.pt-pohyby li{display:flex;justify-content:space-between;gap:var(--s3);font:500 14px/1.35 var(--f-ui)}
.pt-pohyby small{display:block;color:var(--ink-dim)}
.pt-pohyby b.plus{color:var(--uspech)}
.pt-ucet-pomoc p{font:500 15px/1.5 var(--f-ui);color:var(--ink-dim)}
.pt-ucet-prazdno{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s7) var(--s5);border-radius:var(--r-list);text-align:center}
.pt-ucet-prazdno h2,.pt-ucet-prazdno h3{margin:0}
.pt-ucet-prazdno p{margin:0;max-width:30em;color:var(--ink-dim)}
.pt-ucet-tl{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-top:var(--s2)}
.pt-objednavka{animation:pt-nastup var(--d-stred) var(--ease-prichod) both}
@keyframes pt-nastup{from{opacity:0;translate:0 12px}}
.pt-vytvory{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s4);margin:0;padding:0;list-style:none}
.pt-vytvor{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3);border-radius:var(--r-list)}
.pt-vytvor-obr img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:var(--papir-2);border-radius:var(--r-papir)}
.pt-vytvor p{margin:0;font:600 15px/1.35 var(--f-ui)} .pt-vytvor small{display:block;font-weight:500;color:var(--ink-dim)}
.pt-vytvor-akce{display:flex;gap:var(--s2)}
.pt-vytvor-akce .km-tl:first-child{flex:1}
@media (max-width:1000px){.pt-ucet-mriz{grid-template-columns:minmax(0,1fr)}.pt-ucet-bok{position:static}}
html[data-pohyb="klidna"] .pt-objednavka{animation:none}
@media (prefers-reduced-motion:reduce){.pt-objednavka{animation:none}}

/* Kategorie s portrétem jsou delší než původní: do 1000 px se řádek posouvá
   vodorovně stejně jako na telefonu (lista.css ≤ 640 px). Panely s rozbalením
   teď v liště nejsou, takže se nic neschová. */
@media (min-width:641px) and (max-width:1000px){
  .km-kat .km-wrap{padding-inline:0}
  .km-kat-in{overflow-x:auto;scrollbar-width:none;padding-inline:calc(var(--okraj) - var(--s3));scroll-padding-inline:var(--okraj);
    -webkit-mask:linear-gradient(90deg,#000 88%,#0000);mask:linear-gradient(90deg,#000 88%,#0000)}   /* alfa maska, ne barvy */
  .km-kat-in::-webkit-scrollbar{display:none}
  .km-kat-in.na-konci{-webkit-mask:none;mask:none}
  .km-kat-seznam{margin:0}}

/* ═══ SLEVOVÝ KÓD v kroku platby ══════════════════════════════════════ */
.pt-shrnuti-castka{display:inline-flex;align-items:baseline;gap:var(--s2)}
.pt-shrnuti-castka s{font:500 17px/1 var(--f-ui);color:var(--ink-dim)}
.pt-kod{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.pt-kod-odkaz{min-height:var(--cil);padding:0;border:0;background:none;cursor:pointer;font:600 15px/1.2 var(--f-ui)}
.pt-kod-pole{display:flex;gap:var(--s2);width:100%}
.pt-kod-pole[hidden]{display:none}
.pt-kod-pole input{flex:1;min-width:0;min-height:var(--cil);padding:0 16px;border:1.5px solid var(--pole-linka);border-radius:var(--r-pole);
  background:var(--list);color:var(--ink);font:600 16px/1.2 var(--f-ui);letter-spacing:.04em}
.pt-kod-pole input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pt-kod-ok{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0;font:600 15px/1.4 var(--f-ui);color:var(--uspech)}
.pt-kod-ok svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pt-kod-ok .km-odkaz{min-height:var(--cil);padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--ink)}

/* Celá obrazovka: prohlížeč videu nechá naše object-fit a rozměry, takže by se
   přiblížilo a ořízlo. Tady vždy celé video v jeho poměru na černém pozadí. */
video:fullscreen{width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;background:#000}   /* #000 = černé kino, žádný token */
video:-webkit-full-screen{width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;background:#000}

/* ═══ SDÍLENÍ NA FACEBOOK A INSTAGRAM (jen dotyk, ucet.js) ══════════════ */
.pt-sdileni{grid-column:1 / -1;display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);padding:var(--s4);border-radius:var(--r-mala);background:var(--t-ruz)}
.pt-sdilet svg{fill:none}
.pt-sdileni-pozn{margin:0;text-align:center}


/* ═══════════════════════════════════════════════════════════════════════
   ÚVOD 10/2026 · stránka postavená kolem čtyř skutečných zakázek:
   porovnání fotka / portrét, videa, důvody, závěrečný pás v barvách outra.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ POROVNÁNÍ fotka / portrét s náhledy čtyř ukázek ═════════════════ */
.pt-srov{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.pt-srov-scena{display:flex;flex-direction:column;align-items:center;gap:var(--s5);min-width:0}
.pt-srov-list{position:relative;margin:0;width:min(100%,540px);padding:12px 12px 14px;background:var(--list);border-radius:var(--r-papir);box-shadow:var(--stin-zvednuta);rotate:-1.2deg}
.pt-srov-list .pt-paska{position:absolute;top:-12px;left:50%;translate:-50% 0;--w-sirka:120px;--w-uhel:-3deg}
.pt-srov-po{background:var(--papir-2)}
.pt-srov-nahledy{display:flex;justify-content:center;gap:var(--s3)}
.pt-srov-nahled{display:block;width:76px;height:76px;padding:4px;border:0;border-radius:var(--r-mala);background:var(--list);box-shadow:var(--stin-karta);cursor:pointer;
  transition:translate var(--d-rychle,.18s) var(--ease-stisk,ease),box-shadow var(--d-rychle,.18s) var(--ease-stisk,ease)}
.pt-srov-nahled img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r-papir);background:var(--papir-2)}
.pt-srov-nahled[aria-pressed="true"]{box-shadow:0 0 0 3px var(--kouzlo),var(--stin-karta);translate:0 -2px}
.pt-srov-nahled:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.pt-srov-nahled:hover{translate:0 -2px}}
.pt-srov-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);min-width:0}
.pt-srov-text .km-titul,.pt-srov-text .km-t-lead{margin:0}
.pt-srov-text .km-t-lead{color:var(--ink-dim);max-width:34em}
.pt-srov-body{display:flex;flex-direction:column;gap:var(--s2);margin:0 0 var(--s2);padding:0;list-style:none}
.pt-srov-body li{display:flex;align-items:flex-start;gap:var(--s2);font:550 17px/1.45 var(--f-ui)}
.pt-srov-body svg{flex:none;width:22px;height:22px;margin-top:2px;fill:none;stroke:var(--uspech);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .pt-srov{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .pt-srov-text{align-items:center;text-align:center}
  .pt-srov-body{align-items:flex-start;text-align:left}}
@media (max-width:560px){.pt-srov-nahled{width:64px;height:64px}.pt-srov-body li{font-size:16px}}

/* ═══ VIDEA: čtyři karty, na telefonu pás posouvaný prstem ═════════════ */
.pt-priklady{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6);align-items:start;margin-top:var(--s7);outline-offset:8px}
.pt-pr{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s7);min-width:0}
.pt-pr-list{position:relative;width:100%;padding:8px 8px 10px;background:var(--list);border-radius:var(--r-papir);box-shadow:var(--stin-zvednuta)}
.pt-pr:nth-child(1){--pr-barva:var(--p-ruz)} .pt-pr:nth-child(2){--pr-barva:var(--p-lev)}
.pt-pr:nth-child(3){--pr-barva:var(--p-neb)} .pt-pr:nth-child(4){--pr-barva:var(--p-mas)}
.pt-pr:nth-child(odd) .pt-pr-list{rotate:-1.2deg}
.pt-pr:nth-child(even) .pt-pr-list{rotate:1.2deg}
.pt-pr-list video{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--papir-2)}
.pt-pr-list .pt-paska{position:absolute;top:-11px;left:50%;translate:-50% 0;--w-sirka:92px;--w-uhel:-3deg}
.pt-pr-list.je-cele{rotate:none}
.pt-pr-list.je-cele .pt-cele{display:none}
.pt-pr figcaption{text-align:center}
.pt-pr figcaption b{display:block;font:var(--w-titul) var(--t-h3)/var(--lh-h3) var(--f-titul)}
.pt-pr figcaption span{display:block;max-width:22em;margin-top:var(--s1);color:var(--ink-dim);font:500 15px/1.45 var(--f-ui)}
@media (max-width:1000px){.pt-priklady{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;gap:var(--s8) var(--s7)}}
@media (max-width:640px){
  /* pás: další karta vykukuje zprava, ať je vidět, že se dá posouvat */
  .pt-priklady{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(72vw,300px);justify-content:start;gap:var(--s5);
    margin-inline:calc(var(--okraj) * -1);padding:24px var(--okraj) 8px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--okraj);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pt-priklady::-webkit-scrollbar{display:none}
  .pt-pr{scroll-snap-align:center}}

/* ═══ ZÁVĚR: pás jako závěrečná karta videí ════════════════════════════
   Stejný růžový přechod s barevnými skvrnami a bílé logo jako v outru
   (KreativniMama_Malba/engine/outro4.py). Text je inkoustem: bílá by na
   pastelové růžové neměla kontrast, logo jako značka bílé být smí. */
#obsah > .pt-zaver-sek{padding-top:var(--sekce)}
/* ═══ ZÁVĚR = NÁSTĚNKA ═══ velký barevný papír jako banner nahoře; nahoře přes celou šířku provázek s prohnutím, po stranách dva
   kratší, na nich kolíčky s fotkami zákazníků (viewBox provázků 1000 × 700 se natahuje na papír, polohy fotek v % sedí na křivky).
   Uprostřed logo v barvách značky, samolepka, nadpis, text, malinové tlačítko a visačka s cenou. */
.pt-zaver{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:var(--s4);text-align:center;
  --H:206px;padding:calc(var(--H) + 34px) var(--s5) clamp(48px,5.6vw,68px);border-radius:56px}   /* velké zaoblení nástěnky (6. 10. 2026), bez šitého lemu */
@media (max-width:640px){.pt-zaver{border-radius:36px}}
.pt-zaver > :not(.pt-zaver-foto):not(.pt-zaver-provazky):not(.pt-zaver-paska){position:relative;z-index:2}
.pt-zaver .km-titul,.pt-zaver .km-t-lead{margin:0}
.pt-zaver .km-titul{max-width:20ch;font-size:clamp(30px,3.3vw,44px);line-height:1.14;text-wrap:balance;margin-bottom:var(--s1)}
.pt-zaver .km-t-lead{max-width:31em;color:var(--ink);font-size:clamp(16px,1.25vw,18px);line-height:1.75;text-wrap:pretty}
.pt-zaver-tl{min-height:60px;padding:14px 36px;font-size:18px;box-shadow:inset 0 -3px 0 var(--hrana),0 14px 22px -12px rgb(var(--akce-rgb) / .55)}
.pt-zaver-paska{position:absolute;top:-13px;left:50%;translate:-50% 0;--w-sirka:150px;--w-vyska:30px;--w-uhel:-2deg;z-index:3}
.pt-zaver-logo{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:9px;margin-bottom:var(--s3);color:var(--ink);--znak:var(--akce)}   /* srdce vedle nápisu, malé: podpis, ne hlavní prvek */
.pt-zaver-znak{width:clamp(30px,3vw,38px);height:auto;aspect-ratio:1}
.pt-zaver-napis{width:clamp(104px,10.5vw,132px);height:auto;aspect-ratio:2.972}
.pt-zaver-tl{margin-top:var(--s5)}
/* provázky: motouz s jemným světlým stínem; horní přes celou šířku nad logem, spodní přes celou šířku za tlačítkem */
.pt-zaver-provazky{position:absolute;left:0;top:0;width:100%;height:var(--H);z-index:0;overflow:visible;fill:none;pointer-events:none}
.pt-provazek{stroke:rgb(var(--ink-rgb) / .42);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 0 rgb(var(--list-rgb) / .5))}
/* fotky: vnější obal se houpe ve větru (pomalu, každá jinak), vnitřní polaroid se při najetí rozhoupe víc; osa otáčení v kolíčku */
.pt-zaver-foto{--w:clamp(72px,6.6vw,94px);position:absolute;z-index:1;margin:0;width:var(--w);margin-left:calc(var(--w) / -2);
  left:calc(var(--x) * 100%);top:calc(var(--H) * (.13 + .52 * var(--x) * (1 - var(--x))) + 10px);
  transform-origin:50% -12px;animation:pt-vitr var(--t,8s) ease-in-out var(--f,0s) infinite alternate;cursor:pointer}
.pt-zaver-pol{transform-origin:50% -12px;rotate:var(--uhel,0deg);transition:scale var(--d-kratce) var(--pruzina-hrava),box-shadow var(--d-kratce) var(--ease);
  animation:pt-vitr2 calc(var(--t,8s) * .41) ease-in-out calc(var(--f,0s) * .7) infinite alternate}
.pt-zaver-pol .km-polaroid-in{padding:6% 6% 20%}
.pt-zaver-pol img{height:auto;aspect-ratio:3/4}
.pt-kolicek{position:absolute;left:50%;top:-19px;translate:-50% 0;z-index:2;width:12px;height:30px;border-radius:3px 3px 4px 4px;
  background:linear-gradient(90deg,var(--s-lev),var(--p-lev) 45%,var(--s-lev));box-shadow:0 1px 2px rgb(var(--ink-rgb) / .25)}
.pt-kolicek::after{content:"";position:absolute;left:50%;top:9px;width:2px;height:16px;translate:-50% 0;background:rgb(var(--ink-rgb) / .22);border-radius:1px}
.pt-kolicek::before{content:"";position:absolute;left:1px;right:1px;top:11px;height:3px;border-radius:2px;background:rgb(var(--ink-rgb) / .4)}
@keyframes pt-vitr{from{rotate:-3.4deg;translate:-2px 0}to{rotate:3.4deg;translate:2px 0}}
@keyframes pt-vitr2{from{rotate:calc(var(--uhel,0deg) - 1.4deg)}to{rotate:calc(var(--uhel,0deg) + 1.4deg)}}
/* rozhoupání (najetí, ťuknutí): rychlé kyvy, které se utlumí; po skončení zase jen vítr */
.pt-zaver-foto.je-houp{z-index:4}
.pt-zaver-foto.je-houp .pt-zaver-pol{animation:pt-houp 1.6s cubic-bezier(.3,.6,.4,1) both;scale:1.06;box-shadow:var(--stin-okno)}
@keyframes pt-houp{0%{rotate:var(--uhel,0deg)}18%{rotate:calc(var(--uhel,0deg) + 11deg)}42%{rotate:calc(var(--uhel,0deg) - 7deg)}
  64%{rotate:calc(var(--uhel,0deg) + 4deg)}84%{rotate:calc(var(--uhel,0deg) - 1.5deg)}100%{rotate:var(--uhel,0deg)}}
@media (hover:hover){.pt-zaver-foto:hover{z-index:4}.pt-zaver-foto:hover .pt-zaver-pol{scale:1.06;box-shadow:var(--stin-okno)}}
/* mobil: čtyři fotky (1., 3., 7., 9.) na kratším provázku, ať se vejdou a nepřekrývají */
@media (max-width:900px){
  .pt-zaver{--H:150px}
  .pt-zaver-foto--2,.pt-zaver-foto--4,.pt-zaver-foto--5,.pt-zaver-foto--6,.pt-zaver-foto--8{display:none}
  .pt-zaver-foto{--w:clamp(58px,17vw,80px)}
  .pt-zaver-foto--1{--x:.15}.pt-zaver-foto--3{--x:.383}.pt-zaver-foto--7{--x:.617}.pt-zaver-foto--9{--x:.85}}
@media (max-width:560px){.pt-zaver{padding-inline:var(--s4)}}
html[data-pohyb="klidna"] .pt-zaver-foto,html[data-pohyb="klidna"] .pt-zaver-pol{animation:none}
@media (prefers-reduced-motion:reduce){.pt-zaver-foto,.pt-zaver-pol{animation:none}}

/* ═══ NÁSTUP ÚVODU (po načtení, SPEC 6.2): velký papír přistane, malé bannery za ním, samolepky vyskočí, papír s videem
   a polaroid dosednou na stůl, texty a tlačítko vyjedou, řádek výhod nastoupí po sobě. Spouští motion.js (.uvod-nastoupil). ═══ */
/* příchod zevnitř webu (html.zevnitr, motion.js): nástup úvodu se neopakuje, jen se objeví to, co je pod obrazem */
html.nastup .km-hero:not(.uvod-nastoupil) .km-hero-velky{opacity:0;translate:0 -22px;rotate:-.8deg}
html.nastup .km-hero:not(.uvod-nastoupil) .km-bannery-male > *{opacity:0;translate:0 -18px;rotate:1deg}
html.nastup .km-hero:not(.uvod-nastoupil) .km-hero-hlava .km-samolepka{opacity:0;scale:.4;rotate:-16deg}
html.nastup .km-hero:not(.uvod-nastoupil) .km-t-h1-uvod > span,html.nastup .km-hero:not(.uvod-nastoupil) .km-t-h1-uvod em{opacity:0;translate:0 18px}
html.nastup .km-hero:not(.uvod-nastoupil) .pt-hero-list{opacity:0;translate:0 -30px;rotate:-3deg;scale:.96}
html.nastup .km-hero:not(.uvod-nastoupil) .pt-hero-polaroid{opacity:0;translate:-36px -30px;rotate:-24deg;scale:.9}
html.nastup .km-hero:not(.uvod-nastoupil) .pt-hero-polaroid .pt-paska{scale:0 1}
html.nastup .km-hero:not(.uvod-nastoupil) .pt-hero-stitek{opacity:0;scale:.4;rotate:-14deg}
html.nastup .km-hero:not(.uvod-nastoupil) .km-hero-telo > *{opacity:0;translate:0 14px}
html.nastup .km-hero:not(.uvod-nastoupil) .km-vyhoda{opacity:0;translate:0 14px}
html.nastup .km-hero.uvod-nastoupil .km-hero-velky,html.nastup .km-hero.uvod-nastoupil .km-bannery-male > *{opacity:1;translate:0;rotate:0deg;
  transition:opacity var(--d-odhal) var(--ease-kryt),translate var(--d-odhal-pohyb) var(--odhal-krivka),rotate var(--d-odhal-pohyb) var(--odhal-krivka)}
html.nastup .km-hero.uvod-nastoupil .km-bannery-male > :nth-child(1){transition-delay:0.12s}
html.nastup .km-hero.uvod-nastoupil .km-bannery-male > :nth-child(2){transition-delay:0.2s}
html.nastup .km-hero.uvod-nastoupil .km-hero-hlava .km-samolepka{opacity:1;scale:1;rotate:var(--uhel,-3deg);
  transition:opacity var(--d-kryt-dlouhe) var(--ease-kryt) 0.28s,scale var(--pruzina-hrava-doba) var(--pruzina-hrava) 0.28s,rotate var(--pruzina-hrava-doba) var(--pruzina-hrava) 0.28s}
html.nastup .km-hero.uvod-nastoupil .km-t-h1-uvod > span,html.nastup .km-hero.uvod-nastoupil .km-t-h1-uvod em{opacity:1;translate:0;
  transition:opacity var(--d-odhal) var(--ease-kryt),translate var(--d-odhal-pohyb) var(--odhal-krivka)}
html.nastup .km-hero.uvod-nastoupil .km-t-h1-uvod > span{transition-delay:0.21s}
html.nastup .km-hero.uvod-nastoupil .km-t-h1-uvod em{transition-delay:0.29s}
html.nastup .km-hero.uvod-nastoupil .pt-hero-list{opacity:1;translate:0;rotate:1.5deg;scale:1;
  transition:opacity var(--d-odhal) var(--ease-kryt) 0.17s,translate var(--d-odhal-pohyb) var(--odhal-krivka) 0.17s,rotate var(--d-odhal-pohyb) var(--odhal-krivka) 0.17s,scale var(--d-odhal-pohyb) var(--odhal-krivka) 0.17s}
html.nastup .km-hero.uvod-nastoupil .pt-hero-polaroid{opacity:1;translate:0;rotate:-7deg;scale:1;
  transition:opacity var(--d-odhal) var(--ease-kryt) 0.48s,translate var(--d-odhal-pohyb) var(--odhal-krivka) 0.48s,rotate var(--d-odhal-pohyb) var(--odhal-krivka) 0.48s,scale var(--d-odhal-pohyb) var(--odhal-krivka) 0.48s}
html.nastup .km-hero.uvod-nastoupil .pt-hero-polaroid .pt-paska{scale:1;transition:scale .55s var(--ease-prichod) 0.81s}
html.nastup .km-hero.uvod-nastoupil .pt-hero-stitek{opacity:1;scale:1;rotate:var(--uhel,-3deg);
  transition:opacity var(--d-kryt-dlouhe) var(--ease-kryt) 0.73s,scale var(--pruzina-hrava-doba) var(--pruzina-hrava) 0.73s,rotate var(--pruzina-hrava-doba) var(--pruzina-hrava) 0.73s}
html.nastup .km-hero.uvod-nastoupil .km-hero-telo > *,html.nastup .km-hero.uvod-nastoupil .km-vyhoda{opacity:1;translate:0;
  transition:opacity var(--d-odhal) var(--ease-kryt),translate var(--d-odhal-pohyb) var(--odhal-krivka)}
html.nastup .km-hero.uvod-nastoupil .km-hero-telo > :nth-child(1){transition-delay:0.31s}
html.nastup .km-hero.uvod-nastoupil .km-hero-telo > :nth-child(2){transition-delay:0.38s}
html.nastup .km-hero.uvod-nastoupil .km-hero-telo > :nth-child(3){transition-delay:0.44s}
html.nastup .km-hero.uvod-nastoupil .km-hero-telo > :nth-child(4){transition-delay:0.51s}
html.nastup .km-hero.uvod-nastoupil .km-hero-telo > :nth-child(5){transition-delay:0.58s}   /* 2 = kratší text pro telefon, vždy jen jeden z textů */
html.nastup .km-hero.uvod-nastoupil .km-vyhoda:nth-child(1){transition-delay:0.56s}
html.nastup .km-hero.uvod-nastoupil .km-vyhoda:nth-child(2){transition-delay:0.63s}
html.nastup .km-hero.uvod-nastoupil .km-vyhoda:nth-child(3){transition-delay:0.69s}
html.nastup .km-hero.uvod-nastoupil .km-vyhoda:nth-child(4){transition-delay:0.76s}
/* ozdoby uvnitř odhalovaných předmětů (SPEC 6.2): samolepka vyskočí, páska se přilepí, polaroid dosedne, tlačítko vyjede */
html.nastup [data-odhal] .km-samolepka{opacity:0;scale:.5;rotate:-14deg}
html.nastup [data-odhal].V .km-samolepka{opacity:1;scale:1;rotate:var(--uhel,-3deg);
  transition:opacity var(--d-kryt-dlouhe) var(--ease-kryt) calc(var(--zpozdeni,0s) + var(--odhal-cekani) + .22s),scale var(--pruzina-hrava-doba) var(--pruzina-hrava) calc(var(--zpozdeni,0s) + var(--odhal-cekani) + .22s),rotate var(--pruzina-hrava-doba) var(--pruzina-hrava) calc(var(--zpozdeni,0s) + var(--odhal-cekani) + .22s)}
html.nastup [data-odhal] .km-washi{scale:0 1}
html.nastup [data-odhal].V .km-washi{scale:1;transition:scale .6s var(--ease-prichod) calc(var(--zpozdeni,0s) + var(--odhal-cekani) + .16s)}
html.nastup [data-odhal] .km-polaroid{opacity:0;translate:0 -14px;scale:.94}
html.nastup [data-odhal].V .km-polaroid{opacity:1;translate:0;scale:1;
  transition:opacity var(--d-odhal) var(--ease-kryt) calc(var(--zpozdeni,0s) + var(--odhal-cekani) + .18s),translate var(--d-odhal-pohyb) var(--pruzina-mekka) calc(var(--zpozdeni,0s) + var(--odhal-cekani) + .18s),scale var(--d-odhal-pohyb) var(--pruzina-mekka) calc(var(--zpozdeni,0s) + var(--odhal-cekani) + .18s)}
html.nastup [data-odhal].V .pt-zaver-foto .km-polaroid{transition-delay:calc(var(--zpozdeni,0s) + var(--odhal-cekani) + .14s + var(--k,0) * 60ms)}
html.nastup [data-odhal].V > .km-vyhoda{opacity:1;translate:0;transition:opacity var(--d-odhal) var(--ease-kryt) var(--odhal-cekani),translate var(--d-odhal-pohyb) var(--pruzina-mekka) var(--odhal-cekani)}
html.nastup [data-odhal].V > .km-vyhoda:nth-child(2){transition-delay:calc(var(--odhal-cekani) + .07s)}
html.nastup [data-odhal].V > .km-vyhoda:nth-child(3){transition-delay:calc(var(--odhal-cekani) + .14s)}
html.nastup [data-odhal].V > .km-vyhoda:nth-child(4){transition-delay:calc(var(--odhal-cekani) + .18s)}
html.nastup [data-odhal] .pt-nahled{opacity:0;translate:0 10px}
html.nastup [data-odhal].V .pt-nahled{opacity:1;translate:0;transition:opacity var(--d-odhal) var(--ease-kryt) calc(var(--i,0) * 45ms + .06s + var(--odhal-cekani)),translate var(--d-odhal-pohyb) var(--pruzina-mekka) calc(var(--i,0) * 45ms + .06s + var(--odhal-cekani))}
html.nastup [data-odhal].V .pt-nahled:nth-child(2){--i:1}html.nastup [data-odhal].V .pt-nahled:nth-child(3){--i:2}html.nastup [data-odhal].V .pt-nahled:nth-child(4){--i:3}
html.nastup [data-odhal].V .pt-nahled:nth-child(5){--i:4}html.nastup [data-odhal].V .pt-nahled:nth-child(6){--i:5}html.nastup [data-odhal].V .pt-nahled:nth-child(7){--i:6}
html.nastup [data-odhal].V .pt-nahled:nth-child(8){--i:7}html.nastup [data-odhal].V .pt-nahled:nth-child(9){--i:8}
/* nástup detailu při každém příchodu (F5, odkaz, klik z úvodu): barevný papír scény dosedne a bílý papír s videem na něj spadne,
   video začne kreslit až po dosednutí (js/smycky.js čeká na tyhle animace). Po přepnutí ukázky náhledem (data-prepnuto) už se
   nový rám nenastupuje, jen se vymění. */
html.nastup .pt-scena:not([data-prepnuto]){animation:pt-scena-nastup var(--d-odhal-pohyb) var(--pruzina-mekka) both}
/* přepnutí ukázky v galerii (js/portret.js → vymenUkazku): nová ukázka se připraví neviditelně ve stejné buňce scény (scéna se
   nezvětší) a pak se vymění najednou s barvou papíru, bez prolínání */
.pt-scena > [data-pt-ramecek]{grid-area:1 / 1}
.pt-scena > .je-cekajici{visibility:hidden}
html.nastup .pt-scena:not([data-prepnuto]) .pt-ramecek{animation:pt-ramecek-nastup var(--d-odhal-pohyb) var(--pruzina-mekka) .35s both}
@keyframes pt-scena-nastup{from{opacity:0;translate:0 -22px}}
@keyframes pt-ramecek-nastup{from{opacity:0;translate:0 -34px;rotate:-5deg;scale:.96}}
/* přechod úvod ↔ detail už papír nepřenáší (js/pohyb.js přechod mezi dokumenty pro /portret vypíná), proto tu nejsou jména přechodu */


/* ═══════════════════════════════════════════════════════════════════════
   JEDNOTNÝ STYL SPODNÍCH SEKCÍ (5. 10. 2026) · majitel chce celou stránku
   ve stylu horní části: barevné papíry s akvarelem (km-akvarel-*), washi
   pásky, bílé samolepky, polaroidy. Žádné nové materiály, jen tyto předměty.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ VIDEA: důvody jako řádek výhod (stejná komponenta jako pod úvodem) ═══ */
.pt-videa-duvody{margin-top:var(--s8)}

/* ═══ CENY: dva barevné papíry s páskou a samolepkou ═════════════════════ */
.pt-ceny{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);max-width:900px;margin:var(--s7) auto 0;align-items:stretch}
.pt-cena-karta{position:relative;display:flex;flex-direction:column;gap:var(--s3);padding:44px 36px 36px;color:var(--ink)}
.pt-cena-karta .pt-paska{position:absolute;top:-12px;left:50%;translate:-50% 0;--w-sirka:110px;--w-uhel:-3deg}
.pt-cena-karta--obraz .pt-paska{--w-uhel:3deg}
.pt-cena-stitek{align-self:flex-start;--uhel:-3deg}
/* hotový portrét jako malý polaroid v pravém horním rohu karty (přesahuje okraj papíru, jako přicvaknutý) */
.pt-cena-foto{position:absolute;top:-26px;right:22px;width:108px;rotate:5deg;box-shadow:var(--stin-samolepka);z-index:var(--z-ozdoba)}
.pt-cena-karta--digital .pt-cena-foto{rotate:-4deg}
.pt-cena-foto .km-polaroid-in{display:block;padding:6px 6px 20px}
.pt-cena-foto img{display:block;height:auto}
.pt-cena-karta:has(.pt-cena-foto) h3{padding-right:104px}          /* nadpis nesmí zajet pod připnutý portrét */
.pt-cena-karta h3{margin:var(--s2) 0 0}
.pt-cena-karta .pt-cena-castka{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0;font:var(--w-titul) clamp(40px,2.4vw + 20px,54px)/1 var(--f-titul);letter-spacing:-.02em}
.pt-cena-castka small{font:600 14px/1.2 var(--f-ui);letter-spacing:0;color:var(--ink-dim)}
.pt-cena-karta ul{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s2) 0 var(--s4);padding:0;list-style:none}
.pt-cena-karta li{display:flex;align-items:flex-start;gap:var(--s2);font:550 16px/1.45 var(--f-ui)}
.pt-cena-karta li svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--uspech);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pt-cena-karta .km-tl{margin-top:auto}
.pt-ceny-pozn{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s6);text-align:center}
.pt-ceny-pozn svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--uspech);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* dvě možnosti na první pohled jinou barvou: digitální = nebeská, obraz = babiččina růže (bez fialového nádechu) */
.pt-cena-karta--digital{background:
    radial-gradient(60% 80% at 100% 0% in oklch,color-mix(in oklch,var(--s-mat) 30%,transparent),transparent 72%),
    radial-gradient(55% 70% at 0% 100% in oklch,color-mix(in oklch,var(--s-neb) 34%,transparent),transparent 70%),
    var(--zrno),var(--p-neb)}
.pt-cena-karta--obraz{background:
    radial-gradient(60% 80% at 100% 0% in oklch,color-mix(in oklch,var(--s-mas) 26%,transparent),transparent 72%),
    radial-gradient(55% 70% at 0% 100% in oklch,color-mix(in oklch,var(--s-ruz) 40%,transparent),transparent 70%),
    var(--zrno),var(--p-ruz)}
@media (max-width:640px){.pt-ceny{grid-template-columns:minmax(0,1fr);gap:var(--s7)}.pt-cena-karta{padding:40px 24px 28px}
  /* polaroid jako na počítači (majitel 7. 10. 2026: „na mobilu divně pozičně“): dál od pravého rohu, aby pod ním nevykukoval zaoblený
     roh karty, a páska posunutá doleva, aby se na úzké kartě s polaroidem netlačila */
  .pt-cena-foto{width:96px;top:-26px;right:22px}.pt-cena-foto .km-polaroid-in{padding:6px 6px 18px}
  .pt-cena-karta .pt-paska{left:38%;--w-sirka:96px}
  .pt-cena-karta:has(.pt-cena-foto) h3{padding-right:100px}}

/* ═══ DETAIL /portret: tlačítko s cenou hned pod výběrem, popis níž ═══ */
.pt-hlavni-blok .km-hlavni b{font:inherit;font-weight:800}
.pt-panel .pt-perex{margin-top:var(--s3);padding-top:var(--s5);border-top:1px solid var(--linka);color:var(--ink-dim)}

/* ═══ OKNO OBJEDNÁVKY: text pod polaroid (náhled pod fotkou, jako ve videu) ═══ */
.pt-nahrat-polaroid,.pt-shrnuti-foto{position:relative}
.pt-nahrat-popisek{position:absolute;left:6%;right:6%;bottom:3%;overflow:hidden;text-align:center;white-space:nowrap;text-overflow:ellipsis;
  font:italic var(--w-titul-kurziva) 11px/1.3 var(--f-titul);color:var(--ink)}
.pt-nahrat-popisek:empty{display:none}
.pt-shrnuti-foto .pt-nahrat-popisek{font-size:9px}

/* ═══ DETAIL /portret: výhody pod tlačítkem, dva sloupce na bílém lístku ═══ */
/* uvod.css se na detailu nenačítá, proto tu jsou i základní pravidla řádku výhod */
.pt-panel-vyhody{display:grid;list-style:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s5);margin:var(--s3) 0 0;padding:var(--s6) var(--s5);
  border-radius:var(--r-list);background:var(--list);box-shadow:var(--stin-karta)}
@media (max-width:560px){.pt-panel-vyhody{grid-template-columns:minmax(0,1fr);padding:var(--s5) var(--s4)}}
.pt-panel-vyhody .km-vyhoda{display:flex;align-items:flex-start;gap:var(--s3);min-width:0}
.pt-panel-vyhody .km-vyhoda b{display:block;font:550 16px/1.3 var(--f-ui);color:var(--ink)}
.pt-panel-vyhody .km-vyhoda b + span{display:block;margin-top:2px;font:500 15px/1.4 var(--f-ui);color:var(--ink-dim)}
.pt-pole-pozn{margin:6px 0 0}

@media (max-width:640px){html.nastup .pt-priklady .pt-pr[data-odhal]{opacity:1;transform:none}}

/* ═══ TELEFON: úvodní odstavce sekcí na střed (majitel 6. 10. 2026 večer: „nehezky zarovnaný text“) ═══
   Na střed sázené odstavce mají na telefonu čtyři až pět řádků s roztřepenými okraji na obou stranách.
   Vyrovnané řádky (balance) z nich udělají úhledný blok, o chlup menší písmo ubere řádek. */
@media (max-width:640px){
  .km-sek-hlava--stred .km-t-lead,.pt-srov-text .km-t-lead,.pt-zaver .km-t-lead{font-size:16px;line-height:1.55;text-wrap:balance}}