/* ═══════════════════════════════════════════════════════════════════════
   DETAIL STYLU · pracovní stůl (vlastník V4, SPEC 4.2, 3.7.10, 3.7.11, 6)
   Načítá se jen na /omalovanky, /animak a /kolorovani, po zaklad.css,
   lista.css a komponenty.css. Staví jen z tokenů a materiálů V1:
   žádný syrový HEX ani RGB mimo data: URI (tam vždy komentář, kterému
   tokenu hodnota odpovídá).

   Metafora: vlevo barevný papír s předmětem produktu (plátno), vpravo sada
   (varianty), připnutá fotka a velké tlačítko. Rovně stojí, co se čte
   a kliká; nakřivo jen to, co se lepí (polaroid, páska, arch).

   Stavy řídí tvorba.js atributy, ne třídami na cizích prvcích:
     [data-detail][data-rezim="vyber|fotka|prace|kryt|vysledek"]
     [data-platno][data-stav="ukazka|fotka|tvorba|vysledek|stav"]
     [data-nahrat].je-nad / .ma-fotku, [data-hlavni].je-probuzene …
   Animuje se jen transform, translate, rotate, scale a opacity (SPEC 6.4).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ ROZVRŽENÍ (SPEC 4.2.1) ══════════════════════════════════════════ */

.km-detail{padding-block:var(--s6) var(--s8)}
/* Tři oblasti v pořadí HTML hlava, galerie, tělo. Na počítači galerie vlevo
   přes oba řádky; řádky auto 1fr, aby přebytečná výška lepivé galerie
   (složený panel je nižší než plátno) nespadla mezi hlavu a tělo panelu. */
.km-detail-mriz{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s5)}
.km-detail-mriz > *{min-width:0}
.km-panel-hlava{display:flex;flex-direction:column;gap:var(--s3)}
.km-panel-telo{display:flex;flex-direction:column;gap:var(--s5)}

@media (min-width:1001px){
  .km-detail-mriz{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr;
    grid-template-areas:"galerie hlava" "galerie telo";column-gap:56px;row-gap:var(--s5);align-items:start}
  .km-panel-hlava{grid-area:hlava}
  .km-panel-telo{grid-area:telo}
  /* Lepivá galerie. SPEC píše top:calc(var(--hdr) + 24px); na počítači se ale
     lepí i řádek kategorií pod lištou (lista.css), proto se k odsazení
     přičítá i jeho výška, jinak by kategorie plátnu uřízly horní hranu. */
  .km-galerie{grid-area:galerie;position:sticky;top:calc(var(--hdr,84px) + var(--kat-h) + var(--s5));z-index:var(--z-lepici)}
}
@media (max-height:500px){.km-galerie{position:static}}   /* telefon na šířku, zvětšení 200 %: nic nelepí */

/* ═══ HLAVA PANELU: drobky, název, cena, co dostanete ═════════════════ */

.km-drobky{font:500 var(--t-meta)/1.3 var(--f-ui);color:var(--ink-dim)}
.km-drobky-plne{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}
.km-drobky-plne li{display:flex;align-items:center}
.km-drobky-plne li + li::before{content:"/";padding-inline:var(--s2);color:var(--pole-linka)}
/* odkaz drobků je cíl 44 px vysoký (SPEC 4.2.2), text zůstává malý */
.km-drobky a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-dim);text-decoration:none}
.km-drobky a[aria-current]{color:var(--ink)}
@media (hover:hover){.km-drobky a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--kouzlo);text-underline-offset:4px}}
.km-drobky-zpet{display:none!important;gap:6px}
.km-drobky-zpet svg{width:18px;height:18px;rotate:180deg;stroke:currentColor;fill:none;stroke-width:2.4}
@media (max-width:640px){
  .km-drobky-plne{display:none}
  .km-drobky-zpet{display:inline-flex!important;min-height:var(--cil)!important;color:var(--ink)!important;font-weight:600}
}
.km-panel-hlava .km-t-h1{margin:0;max-width:14em}
.km-cena-radek{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:0}
.km-cena-radek .km-t-meta{font-size:15px}
.km-dostanete{display:flex;align-items:flex-start;gap:var(--s2);margin:0;max-width:34em}
.km-dostanete svg{flex:none;width:20px;height:20px;margin-top:1px;stroke:var(--ink-dim);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ═══ GALERIE A PLÁTNO ═════════════════════════════════════════════════ */

.km-galerie{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
/* Plátno: čtverec barevného papíru. Na počítači ho omezuje výška okna tak,
   aby se celá lepivá galerie (plátno + řádek pod ním) vešla pod lištu
   a kategorie i na 1366 × 768 (SPEC 9.1). Na telefonu a tabletu platí
   vzorec ze SPEC 4.2.1. */
.km-platno{position:relative;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;width:min(100%,max(280px,calc(100svh - var(--hdr,56px) - 150px)));
  aspect-ratio:1;margin-inline:auto;overflow:hidden;isolation:isolate;view-transition-name:var(--vt,none)}
@media (min-width:1001px){
  .km-platno{width:min(100%,max(360px,calc(100svh - var(--hdr,84px) - var(--kat-h) - 196px)))}
}
@media (min-width:1001px) and (max-height:500px){.km-platno{width:min(100%,420px)}}
/* vrstvy leží přes sebe v jediné buňce mřížky; vidět je vždy jen jedna ([hidden]) */
.km-vrstva{grid-area:1 / 1;position:relative;display:grid;place-items:center;width:100%;height:100%;min-width:0}

/* ── vrstva UKÁZKA: předmět produktu s porovnáním před a po ─────────── */
.km-vzor{display:grid;place-items:center;width:100%;height:100%}
.km-vzor-predmet{position:relative}
/* omalovánky: arch A4 na 62 % výšky plátna */
.km-vzor--arch .km-arch{height:62%;width:auto;display:grid;place-items:center;
  padding:3.3%}          /* 7,5 % šířky archu; procenta paddingu se ale počítají z plátna (arch má 43,8 % jeho šířky) */
.km-vzor--arch .km-po{width:100%;border-radius:var(--r-papir)}
/* animák: magnetka na 58 % */
.km-vzor--magnetka .km-magnetka{height:58%;width:auto;overflow:hidden}
.km-vzor--magnetka .km-po{width:100%;height:100%}
/* staré fotky: stránka alba na 70 % šířky */
.km-vzor--album .km-album{width:70%}
.km-vzor--album .km-album-foto{aspect-ratio:auto}
.km-vzor--album .km-album-foto .km-po{width:100%}
.km-vzor--album .km-album figcaption{color:var(--ink)}
/* Ukázka „přistane“ při změně varianty (tvorba.js, 380 ms). */
.km-ilustracni .km-il-kratce{display:none}
@container (max-width:159px){.km-ilustracni .km-il-plne{display:none}.km-ilustracni .km-il-kratce{display:inline}}
.km-vzor-predmet{container-type:inline-size}

/* ── vrstva FOTKA: nahraná fotka v polaroidu, dvě pásky přes rohy ────── */
.km-platno-polaroid{height:60%;width:auto;aspect-ratio:88/107}
.km-platno-polaroid .km-polaroid-in{height:100%;box-sizing:border-box}
.km-platno-polaroid img{background:var(--papir-2)}
.km-platno-polaroid figcaption .km-ruka{font-size:clamp(18px,4.2cqi,24px)}
.km-vrstva[data-vrstva="fotka"]{container-type:inline-size}
/* páska přes roh: přesahuje předmět o polovinu své výšky, úhel ±, nikdy 0° */
.km-paska-roh{--w-sirka:74px;--w-vyska:24px;position:absolute;z-index:var(--z-ozdoba);transform-origin:0 50%}
.km-paska-roh--l{left:-22px;top:6px;--w-uhel:-38deg}
.km-paska-roh--p{right:-22px;top:6px;--w-uhel:38deg;transform-origin:100% 50%}
.km-demo-stitek{position:absolute;left:50%;bottom:6%;translate:-50% 0;z-index:var(--z-text);--uhel:-2deg}

/* ── vrstva TVORBA: příběh (SPEC 4.2.5) ─────────────────────────────── */
.km-tvorba{grid-template-rows:auto minmax(0,1fr);gap:var(--s3);padding:7% 8% 8%;align-content:start}
.km-tvorba-texty{text-align:center;min-height:5.2em;display:flex;flex-direction:column;justify-content:flex-end;align-self:end}
.km-tvorba-nadpis{margin:0;font-size:26px;line-height:1.15}
.km-tvorba-mikro{margin:var(--s1) 0 0;min-height:2.9em;font:500 15px/1.45 var(--f-ui);color:var(--ink);max-width:28em}
.km-tvorba-mikro span{display:inline-block}
.km-tvorba-obraz{position:relative;width:100%;height:100%;display:grid;place-items:center;min-height:0;container-type:size}
.km-tvorba-demo{position:absolute;right:6%;top:5%;z-index:var(--z-text);--uhel:3deg}

/* List, na kterém se tvoří: čistý list (fotka leží vždy na --list, SPEC 2.3/5). */
.km-tv-list{position:relative;width:min(100cqw,calc(100cqh * var(--pomer,.75)));aspect-ratio:var(--pomer,3/4);background:var(--list);
  box-shadow:var(--stin-zvednuta);border-radius:var(--r-papir);padding:4.5%;box-sizing:border-box;overflow:hidden}
.km-tv-list > img{position:absolute;inset:4.5%;width:91%;height:91%;object-fit:cover}
.km-tv-list[data-styl="animak"]{border-radius:var(--r-magnetka);padding:4%;rotate:2deg}
.km-tv-list[data-styl="kolorovani"]{rotate:-2deg;padding:5% 5% 12%}
.km-tv-list[data-styl="kolorovani"] > img{inset:5% 5% 12%;width:90%;height:83%}
/* omalovánky: šedá kopie (spočítaná předem na canvasu, žádný filtr) se prolne přes barevnou */
.km-tv-seda{opacity:0;transition:opacity 4s var(--ease)}
.km-tv-list.je-seda .km-tv-seda{opacity:1}
/* pauzák sjede přes fotku; pod ním se „kreslí“ */
.km-tv-pauzak{position:absolute;inset:0;translate:0 -101%;transition:translate 600ms var(--ease-prichod)}
.km-tv-list.je-pauzak .km-tv-pauzak{translate:0 0}
.km-tv-cary{position:absolute;inset:8%;width:84%;height:84%;overflow:visible;fill:none;stroke:var(--ink-dim);
  stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 300ms var(--ease)}
.km-tv-list.je-pauzak .km-tv-cary{opacity:.9}
.km-tv-cary path{stroke-dasharray:1;stroke-dashoffset:1}
/* tři klikyháky za sebou (2,4 s kreslení, 0,8 s pauza), pak znovu: jen v obraze */
.km-tv-list.je-pauzak .km-tv-cary path{animation:km-klikyhak-1 9.6s var(--ease-kresba) infinite}
.km-tv-list.je-pauzak .km-tv-cary path:nth-child(2){animation-name:km-klikyhak-2}
.km-tv-list.je-pauzak .km-tv-cary path:nth-child(3){animation-name:km-klikyhak-3}
@keyframes km-klikyhak-1{0%{stroke-dashoffset:1;opacity:1}25%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes km-klikyhak-2{0%,33.3%{stroke-dashoffset:1;opacity:1}58.3%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes km-klikyhak-3{0%,66.6%{stroke-dashoffset:1;opacity:1}91.6%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
/* animák: klapka jednou klapne, dvě měkká studiová světla plují po elipse */
.km-tv-klapka{position:absolute;left:-6%;top:-5%;width:30%;z-index:var(--z-ozdoba);rotate:-8deg;overflow:visible}
.km-tv-klapka .km-tv-klapka-vrch{transform-origin:6% 60%;rotate:-24deg}
.km-tv-list.je-klapnuto .km-tv-klapka-vrch{rotate:0deg;transition:rotate var(--pruzina-skok-doba) var(--pruzina-skok)}
.km-tv-svetlo{position:absolute;width:80%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--s-lev-rgb) / .30),rgb(var(--s-lev-rgb) / 0))}
.km-tv-svetlo--1{left:-20%;top:-15%;animation:km-svetlo-1 8s linear infinite}
.km-tv-svetlo--2{right:-25%;bottom:-20%;background:radial-gradient(closest-side,rgb(var(--s-neb-rgb) / .30),rgb(var(--s-neb-rgb) / 0));
  animation:km-svetlo-2 8s linear infinite}
@keyframes km-svetlo-1{0%{transform:translate(0,0)}25%{transform:translate(28%,10%)}50%{transform:translate(40%,34%)}75%{transform:translate(12%,26%)}100%{transform:translate(0,0)}}
@keyframes km-svetlo-2{0%{transform:translate(0,0)}25%{transform:translate(-30%,-8%)}50%{transform:translate(-42%,-30%)}75%{transform:translate(-12%,-24%)}100%{transform:translate(0,0)}}
/* staré fotky: akvarelové skvrny se pomalu rozlévají mimo obličeje (okraje), 5 s */
.km-tv-skvrna{position:absolute;width:44%;aspect-ratio:1;border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;pointer-events:none;
  opacity:0;scale:.6;animation:km-skvrna 5s var(--ease-dech) infinite}
.km-tv-skvrna--1{left:-8%;top:-8%;background:radial-gradient(closest-side,rgb(var(--s-ruz-rgb) / .9),rgb(var(--s-ruz-rgb) / 0))}
.km-tv-skvrna--2{right:-10%;bottom:-6%;background:radial-gradient(closest-side,rgb(var(--s-neb-rgb) / .9),rgb(var(--s-neb-rgb) / 0));animation-delay:-1.6s}
.km-tv-skvrna--3{right:-12%;top:-10%;background:radial-gradient(closest-side,rgb(var(--s-mat-rgb) / .9),rgb(var(--s-mat-rgb) / 0));animation-delay:-3.2s}
.km-tv-skvrna--4{left:-10%;bottom:-8%;background:radial-gradient(closest-side,rgb(var(--s-lev-rgb) / .9),rgb(var(--s-lev-rgb) / 0));animation-delay:-4.1s}
@keyframes km-skvrna{0%{opacity:0;scale:.6}45%{opacity:.35}100%{opacity:0;scale:1}}
/* Smyčky tvorby: data-smycka="trvala" neusínají, jen stojí mimo obraz a na skryté kartě (SPEC 6.2) */
.mimo .km-tv-list *,html.km-skryta .km-tv-list *{animation-play-state:paused}
html[data-pohyb="klidna"] .km-tv-list *{animation:none!important}
html[data-pohyb="klidna"] .km-tv-cary path{stroke-dashoffset:0}
html[data-pohyb="klidna"] .km-tv-skvrna{display:none}

/* ── vrstva VÝSLEDEK: předmět produktu, výsledek na čistém listu ──────── */
/* Vrstva je kontejner velikosti: rám obrázku se vejde do 86 % šířky
   a 82 % výšky plátna při jakémkoli poměru stran výsledku (--pomer = w/h). */
.km-vrstva[data-vrstva="vysledek"]{container-type:size}
.km-vysledek-predmet{--pad:3.2cqmin;--pad-y:calc(2 * var(--pad));position:relative;padding:var(--pad);
  background:var(--list);box-shadow:var(--stin-zvednuta);border-radius:var(--r-papir);rotate:var(--uhel,0deg)}
.km-vysledek-predmet[data-predmet="arch"]{--uhel:1deg}
.km-vysledek-predmet[data-predmet="magnetka"]{--pad:2.2cqmin;border-radius:var(--r-magnetka);--uhel:-1.5deg;
  box-shadow:0 0 0 1px var(--linka),var(--stin-zvednuta)}
.km-vysledek-predmet[data-predmet="album"]{--pad-y:calc(4 * var(--pad));padding-bottom:calc(3 * var(--pad));--uhel:-1deg}
.km-vysledek-ram{position:relative;aspect-ratio:var(--pomer,.75);
  width:min(calc(86cqw - 2 * var(--pad)),calc((82cqh - var(--pad-y)) * var(--pomer,.75)))}
.km-vysledek-obr{display:block;width:100%;height:100%;object-fit:contain;background:var(--list)}
.km-vysledek-predmet[data-predmet="magnetka"] .km-vysledek-obr,.km-vysledek-predmet[data-predmet="magnetka"] .km-po{border-radius:calc(var(--r-magnetka) - 4px)}
.km-vysledek-ram > .km-po{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.km-vysledek-sepie,.km-vysledek-stary{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.km-vysledek-nahled{position:absolute;left:calc(var(--pad) - 10px);top:calc(var(--pad) - 10px);z-index:var(--z-ozdoba);--uhel:-4deg}  /* vpravo dole už je samolepka „Náhled zdarma“ z vodoznaku (server) */
/* krycí papír smí při loupání a odletu přes okraj plátna (letí přes stůl, ne za roh krabice) */
.km-platno[data-stav="vysledek"]{overflow:visible}
/* nádech po odhalení: jen scale na obrázku (tvorba.js přes VF.pohyb.animuj) */

/* KRYCÍ PAPÍR (SPEC 4.2.6): omalovánky pauzák (výsledek je pod ním tušit),
   animák levandulový tón se zrnem. Kryt = obal, který se táhne (transform);
   uvnitř papír s natrženým spodkem a přehnutým rohem. Rovnou ho přes
   výsledek skládá tvorba.js; výška a šířka kopíruje obrázek. */
.km-kryt{position:absolute;inset:0;z-index:var(--z-text);touch-action:pan-y;cursor:grab;transform-origin:0 0;
  user-select:none;-webkit-user-select:none}
.km-kryt.je-tazeny{cursor:grabbing}
.km-kryt-papir{position:absolute;inset:0;display:grid;place-items:center;padding:12%;box-sizing:border-box;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 88px),calc(100% - 88px) 100%,0 100%)}
.km-kryt[data-druh="pauzak"] .km-kryt-papir{background:var(--zrno),var(--pauzak);
  box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .06)}
.km-kryt[data-druh="ton"] .km-kryt-papir{background:var(--zrno),var(--t-lev)}
.km-kryt-napis{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;font-size:clamp(22px,6.5cqi,34px)}
.km-kryt-napis .km-ruka svg{height:1.25em}
.km-kryt-obal{position:absolute;inset:0;container-type:inline-size}
/* stín zvedající se hrany: vrstva, jejíž krytí řídí --zdvih (žádný animovaný box-shadow) */
.km-kryt::before{content:"";position:absolute;inset:0;z-index:-1;box-shadow:var(--stin-okno);opacity:var(--zdvih,0);pointer-events:none}
/* přehnutý roh vpravo dole: rub papíru, 88 × 88 px; loupe se v každém směru */
.km-kryt-roh{position:absolute;right:0;bottom:0;width:88px;height:88px;touch-action:none;cursor:grab;transform-origin:100% 100%}
.km-kryt-roh::before{content:"";position:absolute;inset:0;clip-path:polygon(0 100%,100% 0,0 0);
  background:linear-gradient(135deg,rgb(var(--ink-rgb) / .16),rgb(var(--ink-rgb) / .02) 60%)}
.km-kryt-roh::after{content:"";position:absolute;inset:0;clip-path:polygon(100% 0,100% 100%,0 100%);
  background:linear-gradient(315deg,var(--papir-2) 30%,var(--list));box-shadow:inset 1px 1px 0 rgb(var(--ink-rgb) / .1)}
.km-kryt[data-druh="pauzak"] .km-kryt-papir{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 17px) no-repeat,var(--natrzeno) bottom/360px 18px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 17px) no-repeat,var(--natrzeno) bottom/360px 18px repeat-x}
.km-kryt[data-druh="ton"] .km-kryt-papir{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 17px) no-repeat,var(--natrzeno) bottom/360px 18px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 17px) no-repeat,var(--natrzeno) bottom/360px 18px repeat-x}
@media (forced-colors:active){.km-kryt-papir{background:Canvas!important}}

/* ── vrstva STAV: náhled z adresy už neexistuje a podobně (SPEC 4.7.4) ── */
.km-platno-stav-in{max-width:min(92%,380px);padding:var(--s6) var(--s5);border-radius:var(--r-list);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.km-platno-stav-in h2{margin:0}
.km-platno-stav-in p{margin:0;color:var(--ink-dim);font-size:16px}

/* ── Telefon bez fotky: celé plátno otevře výběr souboru (SPEC 4.2.1).
   Samolepka dole uprostřed je viditelná výzva a zároveň tlačítko. */
.km-platno-vybrat{position:absolute;left:50%;bottom:4%;translate:-50% 0;z-index:var(--z-text);display:inline-flex;align-items:center;gap:8px;
  min-height:var(--cil);padding:0 20px 0 14px;border:0;border-radius:var(--r-pill);background:var(--list);color:var(--ink);
  font:var(--w-stitek) 15px/1.1 var(--f-ui);box-shadow:0 0 0 2.5px var(--list),var(--stin-samolepka);rotate:-2deg;cursor:pointer;white-space:nowrap}
.km-platno-vybrat svg{width:22px;height:22px;stroke:var(--kouzlo);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.km-platno[data-vybira]{cursor:pointer}

/* ── pod plátnem: náhledy variant, ukazatel průběhu, Odkrýt ──────────── */
.km-pod-platnem{display:flex;flex-direction:column;align-items:center;gap:var(--s3);width:min(100%,var(--platno-w,100%))}
.km-nahledy{display:flex;justify-content:center;gap:var(--s3);flex-wrap:wrap}
.km-nahled{position:relative;display:block;width:88px;height:88px;padding:4px;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)}
.km-nahled img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-papir);background:var(--pt,var(--papir-2))}
.km-nahled[aria-pressed="true"]{box-shadow:0 0 0 3px var(--kouzlo),var(--stin-karta);translate:0 -2px}
@media (hover:hover) and (pointer:fine){.km-nahled:not([aria-pressed="true"]):hover{translate:0 -3px}}
.km-nahled:focus-visible{outline:3px solid var(--focus);outline-offset:4px}

/* Ukazatel bez čísel (SPEC 4.2.5): vlnitá pastelková čára. Pás je dvakrát
   širší než okno; duha je v dlaždici přes polovinu pásu (růže → máslová →
   růže, růžová a máslová se nikde nedotýkají) a vlna je maska s dlaždicí
   1/24 pásu, takže posun o −50 % navazuje beze švu. Jen transform. */
.km-prubeh{position:relative;width:min(100%,420px);height:12px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000);mask:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000)}
.km-prubeh-vlna{position:absolute;left:0;top:0;width:200%;height:100%;background:
  linear-gradient(90deg in oklch,var(--s-ruz),var(--s-lev),var(--s-neb),var(--s-mat),var(--s-mas),var(--s-mat),var(--s-neb),var(--s-lev),var(--s-ruz)) 0 0/50% 100% repeat-x;
  /* %23000 = černá maska (jen alfa), vlna sinus, tah 4 */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C 5 1.5 15 1.5 20 6 S 35 10.5 40 6' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/calc(100% / 24) 100% repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C 5 1.5 15 1.5 20 6 S 35 10.5 40 6' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/calc(100% / 24) 100% repeat-x;
  animation:km-vlna 28.8s linear infinite}
@keyframes km-vlna{to{transform:translateX(-50%)}}
.mimo .km-prubeh-vlna,html.km-skryta .km-prubeh-vlna{animation-play-state:paused}
html[data-pohyb="klidna"] .km-prubeh-vlna{animation:none}

.km-odkryt{min-width:220px}
.km-pod-vysledkem{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s2) var(--s3);margin:0;text-align:center}

/* ═══ TĚLO PANELU ══════════════════════════════════════════════════════ */

.km-perex{margin:0;color:var(--ink-dim);max-width:34em}

/* ── Varianty (SPEC 3.7.11, recept doslova + legenda a štítky) ──────── */
.km-varianty{margin:0;padding:0;border:0;min-width:0}
.km-varianty legend{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:0;margin-bottom:var(--s3)}
.km-varianty legend small,.km-foto-blok > .km-pole-nazev small{font:500 var(--t-meta)/1.3 var(--f-ui);color:var(--ink-dim)}
.km-varianty-seznam{display:flex;flex-direction:column;gap:10px}
.km-varianty-rada{margin:var(--s3) 0 0}

.km-varianta{position:relative;display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 18px 14px 14px;border-radius:var(--r-varianta);
  background:var(--list);box-shadow:inset 0 0 0 1.5px var(--linka);cursor:pointer;
  transition:translate var(--pruzina-magnet-doba) var(--pruzina-magnet),opacity var(--d-rychle) var(--ease)}
.km-varianta input{position:absolute;opacity:0;pointer-events:none}
.km-varianta img{flex:none;width:52px;height:52px;border-radius:var(--r-papir);background:var(--pt,var(--papir-2));object-fit:cover}
.km-varianta-txt{flex:1;min-width:0} .km-varianta-txt b{display:block;font:var(--w-karta) var(--t-karta)/1.2 var(--f-titul)}
.km-varianta-txt span{display:block;margin-top:2px;font:500 15px/1.4 var(--f-ui);color:var(--ink-dim)}
.km-varianta-cena{flex:none;font:700 16px/1 var(--f-ui);white-space:nowrap}
.km-varianta:has(input:checked){background:var(--t-lev);box-shadow:inset 0 0 0 2px var(--kouzlo);translate:0 -2px}
.km-varianta:has(input:checked)::after{content:"";position:absolute;right:-8px;top:-8px;width:24px;height:24px;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 */
.km-varianty:has(input:checked) .km-varianta:not(:has(input:checked)){opacity:.8}
.km-varianta:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
/* NAVÍC (V4): cena pod sebou (kredity + „nejvýš … Kč“), vpravo zarovnaná */
.km-varianta-cena{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.km-varianta-cena small{font:500 var(--t-meta)/1.2 var(--f-ui);color:var(--ink-dim)}
/* fajfka se nalepí (--pruzina-skok): vybraná varianta ji dostane znovu jako čerstvou */
.km-varianta.je-nalepeno:has(input:checked)::after{animation:km-nalep var(--pruzina-skok-doba) var(--pruzina-skok) both}
@keyframes km-nalep{from{scale:.4;opacity:0}30%{opacity:1}to{scale:1}}
.km-varianta-stitek{position:absolute;top:-11px;right:26px;--uhel:-3deg;pointer-events:none}
@media (hover:hover) and (pointer:fine){.km-varianta:not(:has(input:checked)):hover{box-shadow:inset 0 0 0 1.5px var(--pole-linka);opacity:1}}
@media (max-width:360px){.km-varianta{gap:10px;padding-right:12px}.km-varianta img{width:44px;height:44px}}

/* Režim tvoření: varianty sbalené do jednoho řádku (56 px) se „Změnit“ */
.km-varianta-souhrn{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding:6px 8px 6px 18px;
  border-radius:var(--r-ovladani);font:500 16px/1.3 var(--f-ui)}
.km-varianta-souhrn b{font:var(--w-karta) 18px/1.2 var(--f-titul)}
.km-varianta-souhrn .km-odkaz{min-height:var(--cil);padding:0 10px;border:0;background:none;cursor:pointer;font-size:15px}

/* ── Vaše fotka: pole pro nahrání (SPEC 3.7.10) ─────────────────────── */
.km-foto-blok{display:flex;flex-direction:column;gap:var(--s3);scroll-margin-top:calc(var(--hdr,84px) + var(--kat-h) + var(--s4))}
.km-foto-blok > .km-pole-nazev{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin:0}
.km-rada-radek{display:none;margin:0}
.km-nahrat-pravidlo{margin:0}

.km-nahrat{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--s4);min-height:132px;padding:var(--s5);
  border-radius:var(--r-ovladani)}
/* Podklad listu je vlastní vrstva: dýchá (scale 1 → 1.018, 10 s, SPEC 6.3 č. 6),
   text ani stehy se nezvětšují. Stín patří k vrstvě, takže dýchá s ní
   a nic se nepřekresluje (jen kompozitor). */
.km-nahrat::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--list);box-shadow:var(--stin-karta);
  transform-origin:50% 60%;animation:km-dech var(--d-dech) var(--ease-dech) infinite}
@keyframes km-dech{0%,100%{scale:1}40%{scale:1.018}}
html.smycky-spi .km-nahrat::before,.mimo .km-nahrat::before,html.km-okno-otevreno .km-nahrat::before,
.km-nahrat.ma-fotku::before,.km-nahrat.je-nad::before{animation-play-state:paused}
html[data-pohyb="klidna"] .km-nahrat::before{animation:none}
.km-nahrat.je-nad::before{background:var(--t-lev)}
.km-nahrat > *{position:relative}

.km-nahrat-hlavni{display:flex;flex-direction:column;gap:var(--s3)}
/* celé pole je <label> s <input type="file">: funguje z klávesnice, cíl je celý řádek */
.km-nahrat-cil{display:flex;align-items:center;gap:var(--s5);min-height:112px;cursor:pointer;border-radius:var(--r-ovladani)}
.km-nahrat-vstup{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.km-nahrat-cil:has(.km-nahrat-vstup:focus-visible){outline:3px solid var(--focus);outline-offset:6px}
.km-nahrat-polaroid{position:relative;flex:none;display:grid;place-items:center;width:96px;aspect-ratio:88/107;padding:6px 6px 22px;box-sizing:border-box;
  background:linear-gradient(172deg,var(--list),var(--papir-2));box-shadow:var(--stin-zvednuta);rotate:-4deg;
  transition:rotate var(--pruzina-magnet-doba) var(--pruzina-magnet),translate var(--pruzina-magnet-doba) var(--pruzina-magnet)}
.km-nahrat-plus{display:grid;place-items:center;width:100%;height:100%;background:var(--t-lev);border-radius:1px}
.km-nahrat-plus svg{width:34px;height:34px;stroke:var(--kouzlo);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.km-nahrat-polaroid img{position:absolute;left:6px;top:6px;width:calc(100% - 12px);aspect-ratio:1;object-fit:cover;background:var(--papir-2);
  background-size:cover;background-position:center}
.km-nahrat-polaroid .km-paska-roh{--w-sirka:44px;--w-vyska:16px;scale:0 1;transition:scale 180ms var(--ease-prichod)}
.km-nahrat-polaroid .km-paska-roh--l{left:-14px;top:-4px}
.km-nahrat-polaroid .km-paska-roh--p{right:-14px;top:-4px;transition-delay:90ms}
.km-nahrat.ma-fotku .km-paska-roh{scale:1}
@media (hover:hover) and (pointer:fine){
  .km-nahrat:not(.ma-fotku) .km-nahrat-cil:hover .km-nahrat-polaroid{rotate:3deg;translate:0 -3px}
  .km-nahrat:not(.ma-fotku) .km-nahrat-cil:hover .km-nahrat-nadpis{text-decoration:underline;text-decoration-color:var(--kouzlo);text-decoration-thickness:2px;text-underline-offset:5px}}
.km-nahrat.je-nad .km-nahrat-polaroid{rotate:-6deg;translate:0 -6px;transition-timing-function:var(--pruzina-hrava);transition-duration:var(--pruzina-hrava-doba)}
.km-nahrat-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.km-nahrat-nadpis{font:var(--w-titul) 22px/1.15 var(--f-titul);letter-spacing:-.01em}
.km-nahrat-podtext{font:500 15px/1.45 var(--f-ui);color:var(--ink-dim)}
.km-nahrat-akce{display:flex;gap:var(--s3);padding-left:calc(96px + var(--s5))}

/* rada k fotce nahoře v poli: lísteček se dvěma ukázkami (≥ 641 px) */
.km-rada{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2) var(--s4);margin:0 0 var(--s1);
  padding:14px 16px 14px 50px;--uhel:-.8deg}
.km-rada-text{margin:0;font:var(--w-titul) 17px/24px var(--f-titul);letter-spacing:-.005em}
.km-rada-ukazky{grid-row:span 2;display:flex;gap:var(--s3)}
.km-rada-ukazky figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;font:600 13px/1.2 var(--f-ui);color:var(--ink-dim)}
.km-rada-ukazky img{width:56px;height:56px;border-radius:var(--r-papir);background:var(--papir-2);box-shadow:0 0 0 3px var(--list),var(--stin-samolepka);object-fit:cover}
.km-rada-ukazky figure:first-child img{rotate:-3deg} .km-rada-ukazky figure:last-child img{rotate:2deg}
.km-rada .km-listek-puvod{margin:0;font-size:18px;color:var(--ink-dim)}
.km-rada .km-listek-puvod .km-ruka svg{height:1.05em}

/* štít bezpečí pod vlasovou linkou uvnitř téhož rámečku */
.km-nahrat-stit{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s4);border-top:1.5px solid var(--linka)}
.km-stit{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.km-stit li{display:flex;align-items:flex-start;gap:10px;font:500 15px/1.4 var(--f-ui);color:var(--ink)}
.km-stit b{font-weight:600}
.km-stit svg,.km-stit-kompakt > svg{flex:none;width:20px;height:20px;margin-top:1px;stroke:var(--uspech);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* zámek tiše cvakne, když je fotka připravená (třmen dolů, 160 ms) */
.km-stit svg.je-cvak{animation:km-cvak 160ms var(--ease-stisk)}
@keyframes km-cvak{from{translate:0 -3px}}
.km-jak{font:500 15px/1.5 var(--f-ui)}
.km-jak summary{display:inline-flex;align-items:center;gap:6px;min-height:var(--cil);cursor:pointer;list-style:none;font-weight:600;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--kouzlo);text-decoration-thickness:2px;text-underline-offset:5px}
.km-jak summary::-webkit-details-marker{display:none}
.km-jak summary svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;transition:rotate var(--pruzina-magnet-doba) var(--pruzina-magnet)}
.km-jak[open] summary svg{rotate:180deg}
.km-jak p{margin:var(--s1) 0 0;color:var(--ink-dim);max-width:40em}
.km-stit-kompakt{display:flex;align-items:flex-start;gap:10px;margin:0;font:500 15px/1.45 var(--f-ui)}
.km-stit-kompakt .km-odkaz{padding:0;border:0;background:none;cursor:pointer;font:inherit;font-weight:600;min-height:0}
.km-demo-odkaz{margin:0}
.km-demo-odkaz .km-odkaz,.km-dal-poradte .km-odkaz{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-weight:600}

/* Po nahrání: fotka v polaroidu, text „Fotka je připravená“, Odebrat fotku */
.km-nahrat.ma-fotku .km-nahrat-cil{cursor:default}
.km-nahrat.ma-fotku .km-nahrat-plus{display:none}

/* Kontrola fotky a lísteček pravidel „Než začneme“ (SPEC 4.2.4) */
.km-kontrola{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s3);align-items:start;margin:0;padding:var(--s4) var(--s4) var(--s4) var(--s4);
  border-radius:var(--r-list);background:var(--t-mas);box-shadow:var(--stin-karta);font:500 15px/1.45 var(--f-ui)}
.km-kontrola > p{margin:0}
.km-kontrola-ikona{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.km-kontrola[data-druh="chyba"]{background:var(--chyba-bg);color:var(--chyba)}
.km-kontrola[data-druh="chyba"] .km-kontrola-ikona{stroke:var(--chyba)}
.km-kontrola-tl{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.km-kontrola-tl .km-tl{white-space:normal}
.km-kontrola-tl .km-tl[hidden] + .km-tl{grid-column:1 / -1}
.km-kontrola--pravidla{display:block;padding:var(--s3) var(--s4);background:var(--t-lev);box-shadow:none;border-radius:var(--r-mala);font:500 15px/1.5 var(--f-ui)}
.km-kontrola--pravidla b{font-weight:600}

/* ── Mini ukazatel kroků (P2): fajfka se nakreslí, spojnice se dotáhne ─ */
.km-kroky-mini{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none;font:600 14px/1.2 var(--f-ui);color:var(--ink-dim);counter-reset:krok}
.km-kroky-mini li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.km-kroky-mini li + li::before{content:"";display:block;width:28px;height:2px;margin-inline:10px;border-radius:2px;background:var(--linka);
  transform-origin:0 50%}
.km-kroky-mini svg{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--pole-linka);fill:none;stroke:var(--list);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;padding:2px;box-sizing:border-box}
.km-kroky-mini path{stroke-dasharray:1;stroke-dashoffset:1}
.km-kroky-mini li.je-hotovo{color:var(--ink)}
.km-kroky-mini li.je-hotovo svg{background:var(--uspech);box-shadow:none}
.km-kroky-mini li.je-hotovo path{stroke-dashoffset:0;transition:stroke-dashoffset 380ms var(--ease-kresba) 120ms}
.km-kroky-mini li.je-hotovo + li::before{background:var(--uspech)}

/* ── Výsledek v panelu ─────────────────────────────────────────────── */
.km-vysledek-hlava{display:flex;flex-direction:column;gap:var(--s2)}
.km-vysledek-nadpis{margin:0;font-size:clamp(30px,1.6vw + 18px,40px);line-height:1.08}
.km-vysledek-nadpis:focus,.km-platno-stav-in h2:focus{outline:none}   /* nadpis dostane fokus skriptem (tabindex -1), není ovládací prvek */
.km-vysledek-hlava .km-t-lead{margin:0;color:var(--ink-dim)}
.km-vysledek-text,.km-vysledek-dar{margin:0;font:500 16px/1.5 var(--f-ui);max-width:34em}
.km-vysledek-dar{padding:var(--s3) var(--s4);border-radius:var(--r-mala);background:var(--t-lev)}
.km-bez-fotky{margin:0}

/* ── Hlavní tlačítko a mikrotext (SPEC 4.2.3) ───────────────────────── */
.km-hlavni-blok{display:flex;flex-direction:column;gap:var(--s2)}
.km-hlavni{overflow:hidden;isolation:isolate}
.km-hlavni > *{position:relative;z-index:1}
/* „Probuzení“: barva akce se vlije zleva (vrstva scaleX 0 → 1), jednou se
   zvedne o 2 px. Bez záře; pak klid. */
.km-hlavni::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:var(--akce);box-shadow:inset 0 -2px 0 var(--akce-a);
  transform-origin:0 50%;transform:scaleX(0);opacity:0;pointer-events:none}
.km-hlavni.je-probouzeni::before{opacity:1;transform:scaleX(1);transition:transform 500ms var(--ease-prichod)}
.km-hlavni.je-probouzeni{animation:km-zdvih var(--pruzina-magnet-doba) var(--pruzina-magnet) 420ms}
@keyframes km-zdvih{50%{translate:0 -2px}}
.km-hlavni[aria-busy="true"] svg{display:none}
.km-mikro{margin:0;font:500 var(--t-meta)/1.45 var(--f-ui);color:var(--ink-dim);text-align:center;text-wrap:balance}
@media (min-width:1001px){.km-mikro{text-align:left}}

.km-vysledek-akce{display:flex;flex-direction:column;gap:var(--s3)}
.km-vysledek-tl{display:flex;flex-wrap:wrap;gap:var(--s3)}
.km-vysledek-tl .km-tl{flex:1 1 180px;min-height:52px;padding-inline:18px}
.km-vysledek-tl .km-tl[hidden]{display:none}
.km-vysledek-akce > p{margin:0}
.km-vysledek-akce .km-odkaz{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-weight:600}
.km-demo-konec{padding:var(--s4);border-radius:var(--r-mala);background:var(--t-lev)}
.km-demo-konec p{margin:0}
/* nástup tlačítek výsledku po 60 ms (translateY 12px → 0) dělá tvorba.js */

.km-garance{display:flex;align-items:flex-start;gap:var(--s2);margin:0}
.km-garance svg{flex:none;width:20px;height:20px;stroke:var(--uspech);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.km-cenik-odkaz{margin:0}
.km-cenik-tl{display:inline-flex;align-items:center;min-height:var(--cil);padding:0;border:0;background:none;cursor:pointer;border-radius:var(--r-pill)}
.km-cenik-tl:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.km-cenik-tl:hover .km-visacka{translate:0 -2px}}
.km-cenik-tl .km-visacka{transition:translate var(--pruzina-magnet-doba) var(--pruzina-magnet)}

/* Co s ním dál? · Stejná fotka, jiné kouzlo */
.km-dal{padding:var(--s5);border-radius:var(--r-list);display:flex;flex-direction:column;gap:var(--s3)}
.km-dal h2,.km-jine-kouzlo h2{margin:0}
.km-dal-seznam{display:flex;flex-direction:column;gap:var(--s2);margin:0;padding:0;list-style:none}
.km-dal-seznam a{display:flex;align-items:center;gap:var(--s3);min-height:64px;padding:8px 12px 8px 8px;border-radius:var(--r-ovladani);
  color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--linka);transition:translate var(--d-stred) var(--ease-prichod)}
.km-dal-seznam img{flex:none;width:48px;height:48px;border-radius:var(--r-papir);background:var(--papir-2)}
.km-dal-seznam b{display:block;font:var(--w-karta) 17px/1.25 var(--f-titul)}
.km-dal-seznam small{display:block;font:500 var(--t-meta)/1.35 var(--f-ui);color:var(--ink-dim)}
.km-dal-seznam svg{flex:none;margin-left:auto;width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2.2}
@media (hover:hover) and (pointer:fine){.km-dal-seznam a:hover{translate:0 -2px;box-shadow:inset 0 0 0 1.5px var(--pole-linka)}}
.km-dal-tip,.km-dal-poradte{margin:0;font:500 15px/1.5 var(--f-ui)}
.km-jine-kouzlo{display:flex;flex-direction:column;gap:var(--s2)}
.km-jine-kouzlo > p{margin:0}
.km-jine-tl{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}
.km-jine-tl .km-tl{flex:1 1 200px}

/* ═══ REŽIM TVOŘENÍ (SPEC 4.2.2, M30): panel se složí ════════════════
   Skryté části dostanou [hidden] naráz; sbalené řádky nastoupí prolnutím
   160 ms (data-prolni, tvorba.js). Pole pro nahrání v kompaktním řádku. */
.km-detail[data-rezim]:not([data-rezim="vyber"]) .km-nahrat{min-height:0;padding:var(--s3) var(--s4);gap:var(--s3)}
.km-detail[data-rezim]:not([data-rezim="vyber"]) .km-nahrat-cil{min-height:0;gap:var(--s4)}
.km-detail[data-rezim]:not([data-rezim="vyber"]) .km-nahrat-polaroid{width:64px;padding:4px 4px 14px}
.km-detail[data-rezim]:not([data-rezim="vyber"]) .km-nahrat-polaroid img{left:4px;top:4px;width:calc(100% - 8px)}
.km-detail[data-rezim]:not([data-rezim="vyber"]) .km-nahrat-nadpis{font-size:19px}
.km-detail[data-rezim]:not([data-rezim="vyber"]) .km-nahrat-podtext{display:none}
.km-detail[data-rezim]:not([data-rezim="vyber"]) .km-nahrat-hlavni{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
.km-detail[data-rezim]:not([data-rezim="vyber"]) .km-nahrat-akce{padding-left:0}
.km-detail[data-rezim]:not([data-rezim="vyber"]) .km-kontrola--pravidla{flex-basis:100%}
.km-detail[data-rezim]:not([data-rezim="vyber"]) .km-nahrat-stit{padding-top:var(--s3)}
.km-detail[data-rezim]:not([data-rezim="vyber"]) .km-foto-blok > .km-pole-nazev{display:none}
.km-detail[data-rezim]:not([data-rezim="vyber"]) .km-panel-telo{gap:var(--s4)}
/* v režimu tvoření karusel pod detailem ztlumí (intimní prostor) */
body[data-tvori] [data-podobne]{opacity:.5;pointer-events:none;transition:opacity var(--d-stred) var(--ease)}
body[data-tvori] [data-podobne] *{animation-play-state:paused!important}
/* posledním krokem je klid: pod výsledkem žádný karusel dalších produktů (SPEC 4.2.6) */
.km-detail[data-rezim="vysledek"] ~ [data-podobne]{display:none}

/* Předlohy letu (VF.pohyb.let klonuje zdroj): zdroj sám je neviditelný,
   letí jen jeho kopie s třídou .km-let. Cílový bod je jen souřadnice. */
.km-let-zdroj,.km-let-bod{position:fixed;pointer-events:none}
.km-let-zdroj:not(.km-let),.km-let-bod{visibility:hidden}
.km-let-pastelka{width:10px;height:34px;border-radius:3px 3px 2px 2px;background:var(--b,var(--s-ruz));box-shadow:inset -3px 0 0 rgb(var(--ink-rgb) / .12)}
.km-let-pastelka::before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;background:inherit;clip-path:polygon(50% 0,100% 100%,0 100%)}
.km-let-bod{width:10px;height:34px}
.km-let-mini{width:80px;height:80px;object-fit:cover;border-radius:var(--r-magnetka);box-shadow:0 0 0 3px var(--list),var(--stin-samolepka)}
.km-turnstile:empty{display:none}
.km-turnstile{display:flex;justify-content:center}

/* ═══ POD DETAILEM (užitkové sekce) ════════════════════════════════════ */
.km-pod-detailem .km-sek-hlava{margin-bottom:var(--s5)}
.km-tipy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin:0;padding:0;list-style:none}
.km-tip{display:flex;align-items:flex-start;gap:var(--s4)}
.km-tip h3{margin:2px 0 var(--s2)}
.km-tip p{margin:0;color:var(--ink-dim);font-size:16px}
.km-napady{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin:0;padding:0;list-style:none}
.km-napad{display:flex;align-items:center;gap:var(--s4);height:100%;padding:var(--s4);border-radius:var(--r-karta);color:var(--ink);text-decoration:none;
  transition:translate var(--d-stred) var(--ease-prichod)}
.km-napad img{flex:none;width:72px;height:72px;border-radius:var(--r-papir);background:var(--papir-2)}
.km-napad > span{display:flex;flex-direction:column;gap:4px;min-width:0}
.km-napad > span > span:not(.km-odkaz){font:500 15px/1.45 var(--f-ui);color:var(--ink-dim)}
.km-napad .km-odkaz{align-self:flex-start;margin-top:2px;font-size:15px}
@media (hover:hover) and (pointer:fine){.km-napad:hover{translate:0 -4px}}
.km-napad:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.km-faq-wrap > *{max-width:880px}
.km-faq{display:flex;flex-direction:column;border-top:1.5px solid var(--linka)}
.km-faq-pol{border-bottom:1.5px solid var(--linka)}
.km-faq-pol summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:64px;padding:var(--s3) 0;cursor:pointer;list-style:none;
  font:var(--w-karta) 19px/1.3 var(--f-titul)}
.km-faq-pol summary::-webkit-details-marker{display:none}
.km-faq-pol summary svg{flex:none;width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:2.2;transition:rotate var(--pruzina-magnet-doba) var(--pruzina-magnet)}
.km-faq-pol[open] summary svg{rotate:180deg}
.km-faq-pol p{margin:0 0 var(--s5);max-width:44em;color:var(--ink-dim);font-size:16px}
.km-faq-pol summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-papir)}

/* ═══ LIŠTA PALCE (≤ 1000 px, SPEC 4.2.3) ══════════════════════════════
   Fixní dole, vyjede z hidden přes @starting-style (z display:none by se
   přechod nepřehrál). Nikdy transform ani will-change na předcích. */
.km-lista-palce{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-palec);display:flex;flex-direction:column;gap:6px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--list);border-top:1.5px solid var(--linka);
  box-shadow:0 -10px 24px -18px rgb(var(--ink-rgb) / .35);
  translate:0 0;transition:translate 280ms var(--ease-prichod),display 280ms allow-discrete}
@starting-style{.km-lista-palce{translate:0 100%}}
.km-lista-palce.je-odjizdi{translate:0 100%;transition:translate 200ms var(--ease-odjezd)}
.km-lista-palce-stav{margin:0;font:500 var(--t-meta)/1.3 var(--f-ui);color:var(--ink-dim);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.km-lista-palce .km-tl{width:100%}
@media (min-width:1001px){.km-lista-palce{display:none!important}}
body.ma-palec{scroll-padding-bottom:calc(var(--palec-h) + 24px)}
html:has(body.ma-palec){scroll-padding-bottom:calc(var(--palec-h) + 24px)}
body.ma-palec .km-detail{padding-bottom:calc(var(--palec-h) + var(--s6))}

/* ═══ ZÁVOJ: soubor nad stránkou (SPEC 4.2.4) ══════════════════════════ */
.km-zavoj{position:fixed;inset:0;z-index:var(--z-toast);display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden;
  background:rgb(var(--papir-rgb) / .84);transition:opacity var(--d-kratce) var(--ease),visibility 0s linear var(--d-kratce)}
.km-zavoj p{margin:0;padding:var(--s5) var(--s6);font-size:clamp(28px,3vw,40px);border-radius:var(--r-okno);background:var(--list);box-shadow:var(--stin-okno);
  scale:.96;transition:scale var(--pruzina-mekka-doba) var(--pruzina-mekka)}
html.nese-soubor .km-zavoj{opacity:1;visibility:visible;transition:opacity var(--d-kratce) var(--ease),visibility 0s}
html.nese-soubor .km-zavoj p{scale:1}
/* nad polem se závoj ztiší, aby pole („Pusťte ji sem“) bylo vidět */
html.nese-soubor.nad-polem .km-zavoj{opacity:0}

/* ═══ OKNA DETAILU (vzhled okna dává lista.css V1; tady jen obsah) ═════ */
.km-okno-in > p{margin:var(--s3) 0 0;color:var(--ink-dim)}
.km-okno-tl{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.km-okno-tl .km-tl{flex:1 1 160px}
.km-okno-pozn{margin:var(--s3) 0 0;text-align:center}
.km-okno-zavrit-dole{display:none;margin-top:var(--s4)}
@media (max-width:640px){.km-okno-zavrit-dole{display:flex}}

/* „Jak vytisknout?“: radio karty 72 px s náhledem rozvržení */
.km-tisk-form{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s5)}
.km-tisk-volby{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0;min-width:0}
.km-tisk-volba{position:relative;display:flex;align-items:center;gap:14px;min-height:72px;padding:10px 16px 10px 12px;border-radius:var(--r-ovladani);
  background:var(--list);box-shadow:inset 0 0 0 1.5px var(--linka);cursor:pointer;font:500 15px/1.35 var(--f-ui);
  transition:translate var(--pruzina-magnet-doba) var(--pruzina-magnet)}
.km-tisk-volba input{position:absolute;opacity:0;pointer-events:none}
.km-tisk-volba b{display:block;font:600 16px/1.25 var(--f-ui)}
.km-tisk-volba small{display:block;color:var(--ink-dim);font-size:var(--t-meta)}
.km-tisk-volba:has(input:checked){background:var(--t-lev);box-shadow:inset 0 0 0 2px var(--kouzlo);translate:0 -1px}
.km-tisk-volba:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.km-tisk-volba[hidden]{display:none}
/* schéma rozvržení: malý list A4 (36 × 51 px) s buňkami */
.km-tisk-schema{flex:none;display:grid;gap:3px;width:36px;height:51px;padding:4px;box-sizing:border-box;background:var(--list);
  box-shadow:0 0 0 1.5px var(--pole-linka),1px 2px 4px rgb(var(--ink-rgb) / .12);border-radius:1px}
.km-tisk-schema i{display:block;background:var(--pt,var(--t-lev));box-shadow:inset 0 0 0 1px var(--ink-dim);border-radius:1px}
.km-tisk-schema--4,.km-tisk-schema--prani{grid-template-columns:repeat(2,1fr)}
.km-tisk-schema--12{grid-template-columns:repeat(3,1fr);gap:2px}
.km-tisk-schema--prani i{box-shadow:inset 0 -3px 0 var(--list),inset 0 0 0 1px var(--ink-dim)}

/* „Nepovedlo se?“ a „Než začneme tvořit“ */
.km-nepovedlo-volby{margin:var(--s4) 0 0;padding:0;border:0;display:flex;flex-direction:column}
.km-nepovedlo-volby .km-zaskrt input{accent-color:var(--kouzlo)}
.km-nepovedlo-text{margin:var(--s4) 0 0;font:500 15px/1.5 var(--f-ui);color:var(--ink-dim)}
.km-pravidla-body{margin:var(--s4) 0;padding:0 0 0 var(--s5);display:flex;flex-direction:column;gap:var(--s3);font:500 16px/1.5 var(--f-ui)}
.km-pravidla-body li::marker{color:var(--kouzlo)}
.km-okno [data-pravidla-ok]{margin-top:var(--s4)}

/* „Pochlubte se“ (P2): náhled karty pro Instagram */
.km-pochlubit-format{margin-top:var(--s4)}
.km-pochlubit-nahled{display:grid;place-items:center;margin:var(--s4) 0;padding:var(--s3);border-radius:var(--r-mala);background:var(--papir-2)}
.km-pochlubit-nahled canvas{display:block;max-width:100%;max-height:min(46dvh,380px);width:auto;height:auto;box-shadow:var(--stin-karta);border-radius:var(--r-papir)}
.km-pochlubit-popisek{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);margin-top:var(--s4)}
.km-pochlubit-popisek p{margin:0}
.km-pochlubit-popisek .km-odkaz{border:0;background:none;padding:0;min-height:var(--cil);cursor:pointer;font:inherit;font-weight:600}

/* ═══ TABLET A TELEFON ════════════════════════════════════════════════ */
@media (max-width:1000px){
  .km-detail{padding-top:var(--s4)}
  .km-tipy,.km-napady{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
}
@media (max-width:900px){
  .km-tipy{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .km-detail{padding-top:var(--s2)}
  .km-panel-hlava{gap:var(--s2)}
  .km-panel-hlava .km-t-h1{font-size:clamp(32px,9vw,40px)}
  /* pořadí na telefonu: drobky, H1, cena, plátno, náhledy, varianty, pole, perex, zbytek */
  .km-perex{order:3}
  .km-varianty,.km-varianta-souhrn{order:1}
  .km-foto-blok{order:2}
  .km-panel-telo > :not(.km-perex):not(.km-varianty):not(.km-varianta-souhrn):not(.km-foto-blok){order:4}
  .km-rada{display:none}
  .km-rada-radek{display:block}
  .km-detail[data-rezim]:not([data-rezim="vyber"]) .km-rada-radek{display:none}
  .km-nahrat{padding:var(--s4)}
  .km-nahrat-cil{gap:var(--s4);min-height:96px}
  .km-nahrat-polaroid{width:84px}
  .km-nahrat-nadpis{font-size:20px}
  .km-nahrat-akce{padding-left:0}
  .km-napady{grid-template-columns:minmax(0,1fr)}
  .km-nahledy{gap:var(--s2)}
  .km-nahled{width:76px;height:76px}
  .km-varianty legend{flex-direction:column;gap:2px}
  .km-kontrola-tl{grid-template-columns:minmax(0,1fr)}
  .km-tvorba{padding:6% 6% 7%}
  .km-tvorba-nadpis{font-size:22px}
  .km-tvorba-mikro{font-size:14px}
}
@media (max-width:360px){
  .km-nahledy .km-nahled{width:68px;height:68px}
  .km-nahrat-cil{gap:var(--s3)}
}

/* ═══ POHYB: klidná úroveň a nástupy ══════════════════════════════════ */
html[data-pohyb="klidna"] .km-hlavni.je-probouzeni{animation:none}
html[data-pohyb="klidna"] .km-hlavni::before{transition-duration:.01ms}
/* obsah čitelný bez JS: vrstvy tvorby i výsledku mají smysl jen se skriptem */
.km-vrstva[data-vrstva]:not([data-vrstva="ukazka"]):not([hidden]){animation:none}

/* ═══ Nucené barvy: obrys tlačítek a pole (SPEC 2.3/9) ═════════════════ */
@media (forced-colors:active){
  .km-nahrat,.km-varianta,.km-tisk-volba,.km-nahled{border:2px solid CanvasText}
  .km-prubeh{display:none}
}