@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,300;1,9..144,400&family=Inter:wght@600&display=swap');
/* TEMPERIA — studie a kalkulačky.
   Generuje 5-showroom/studie.py. Ručně needituj.
   Nahrát mezi soubory e-shopu a odkázat z pole Záhlaví.
   PŘED NAHRÁNÍM SMAZAT STAROU VERZI. */

/* ═══ TEMPERIA · kalkulačky ═══════════════════════════════════
   Tokeny na každé kalkulačce zvlášť. Na Shoptetu kolem ní žádná
   obálka nebude a bez vlastní deklarace by přišla o všechno.
   ═══════════════════════════════════════════════════════════ */
.ftz-dny, .ftz-vykon, .ftz-energie, .ftz-wbgt, .ftz-stupne, .ftz-aklim {
  --ftz-warm:#FF8A4C; --ftz-warm-ink:#B14A18;
  --ftz-cold:#7FB3CC; --ftz-cold-ink:#1F5A75;
  --ftz-ember:#F0A868; --ftz-glacier:#8FCEDD;
  --ftz-paper:#F5F2ED; --ftz-bone:#FFFCF8; --ftz-slate:#1C2024;
  --ftz-graphite:#1C1B1A; --ftz-body:#413D39; --ftz-stone:#544D46;
  --ftz-rule:#E0D9CE; --ftz-line:#333B42; --ftz-dim:#C6CDD3;
  --ftz-ok:#1F6B49; --ftz-pozor:#8F5411; --ftz-stop:#A33A22;
  --ftz-ui:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --ftz-data:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --ftz-di:Fraunces,Georgia,'Times New Roman',serif;
  --ftz-1:4px; --ftz-2:8px; --ftz-3:12px; --ftz-4:16px;
  --ftz-5:24px; --ftz-6:32px; --ftz-7:48px;
  font-family:var(--ftz-ui); color:var(--ftz-body); line-height:1.6;
  font-size:16px; background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); padding:var(--ftz-5);
  max-width:960px; margin:var(--ftz-6) auto;
  -webkit-text-size-adjust:100%;
}
@media (min-width:768px) {
  .ftz-dny,.ftz-vykon,.ftz-energie,.ftz-wbgt,.ftz-stupne,.ftz-aklim
    { padding:var(--ftz-7) }
}
.ftz-dny *,.ftz-vykon *,.ftz-energie *,.ftz-wbgt *,.ftz-stupne *,
.ftz-aklim *,.ftz-dny,.ftz-vykon,.ftz-energie,.ftz-wbgt,.ftz-stupne,
.ftz-aklim { box-sizing:border-box }

/* ── hlavička kalkulačky ── */
.ftz-stitek { font-family:var(--ftz-data); font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ftz-stone);
  margin:0 0 var(--ftz-2); display:block }
/* `text-wrap:balance` rozdělí nadpis na řádky tak, aby byly
   podobně dlouhé — bez něj zůstává na druhém řádku často jediné
   slovo. Kde to prohlížeč neumí, prostě se nic nestane.
   `pretty` u odstavců hlídá totéž na posledním řádku. */
.ftz-nadpis { font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto; font-variation-settings:'opsz' 72;
  font-size:clamp(22px,3.6vw,34px); line-height:1.12;
  letter-spacing:-.012em; color:var(--ftz-graphite);
  margin:0 0 var(--ftz-3); text-wrap:balance }
.ftz-lead { margin:0 0 var(--ftz-5); max-width:64ch; font-size:16px;
  text-wrap:pretty }
/* Zvýraznění nese váhu i barvu. Samotná tučnost se v Interu ztrácí,
   samotná barva se plete s odkazem. */
.ftz-lead b,.ftz-omezeni b,.ftz-podnadpis b { font-weight:600;
  color:var(--ftz-graphite) }
.ftz-vysledek b,.ftz-podnadpis b { color:var(--ftz-bone) }
.ftz-omezeni { text-wrap:pretty }
.ftz-h3 { font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 48,'wght' 500; font-size:19px;
  color:var(--ftz-graphite); margin:var(--ftz-5) 0 var(--ftz-3) }

/* ── ovládání ── */
.ftz-vstupy { display:grid; gap:var(--ftz-4) var(--ftz-6);
  grid-template-columns:1fr }
@media (min-width:700px) { .ftz-vstupy--2 { grid-template-columns:1fr 1fr }
  .ftz-vstupy--3 { grid-template-columns:repeat(3,1fr) } }
.ftz-pole { display:block; margin:0 0 var(--ftz-3) }
.ftz-popis { display:flex; justify-content:space-between;
  align-items:baseline; gap:var(--ftz-3); margin-bottom:var(--ftz-2) }
.ftz-popis > span:first-child { font-size:15px; font-weight:500;
  color:var(--ftz-graphite) }
.ftz-hodnota { font-family:var(--ftz-data); font-size:17px;
  color:var(--ftz-graphite); white-space:nowrap;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1 }

.ftz-slider { -webkit-appearance:none; appearance:none; width:100%;
  height:44px; background:transparent; cursor:pointer; margin:0;
  display:block }
.ftz-slider::-webkit-slider-runnable-track { height:5px;
  background:linear-gradient(90deg,var(--ftz-cold),#A9A29A,var(--ftz-warm)) }
.ftz-slider::-moz-range-track { height:5px;
  background:linear-gradient(90deg,var(--ftz-cold),#A9A29A,var(--ftz-warm)) }
.ftz-slider--neutral::-webkit-slider-runnable-track
  { background:var(--ftz-rule) }
.ftz-slider--neutral::-moz-range-track { background:var(--ftz-rule) }
.ftz-slider::-webkit-slider-thumb { -webkit-appearance:none; width:26px;
  height:26px; margin-top:-10px; border-radius:50%;
  background:var(--ftz-graphite); border:3px solid var(--ftz-bone);
  box-shadow:0 0 0 1px var(--ftz-graphite) }
.ftz-slider::-moz-range-thumb { width:26px; height:26px; border-radius:50%;
  background:var(--ftz-graphite); border:3px solid var(--ftz-bone) }
.ftz-slider:focus-visible { outline:3px solid var(--ftz-warm);
  outline-offset:4px }

.ftz-cislo { width:100%; min-height:48px; font-family:var(--ftz-data);
  font-size:17px; padding:0 var(--ftz-3); color:var(--ftz-graphite);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:0; font-variant-numeric:tabular-nums }
.ftz-cislo:focus-visible { outline:3px solid var(--ftz-warm);
  outline-offset:2px }

.ftz-volby { display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--ftz-rule) }
.ftz-volby--2 { grid-template-columns:1fr 1fr }
.ftz-volby button { min-height:48px; font-family:var(--ftz-ui);
  font-size:14px; background:var(--ftz-bone); color:var(--ftz-body);
  border:0; border-right:1px solid var(--ftz-rule); cursor:pointer;
  padding:var(--ftz-2) var(--ftz-1); line-height:1.25 }
.ftz-volby button:last-child { border-right:0 }
.ftz-volby button[aria-pressed="true"] { background:var(--ftz-graphite);
  color:var(--ftz-bone) }
.ftz-volby button:focus-visible { outline:3px solid var(--ftz-warm);
  outline-offset:-3px }

/* ── výsledek ── */
.ftz-vysledek { margin-top:var(--ftz-5); background:var(--ftz-slate);
  color:var(--ftz-paper); padding:var(--ftz-5) }
@media (min-width:768px) { .ftz-vysledek { padding:var(--ftz-6) } }
.ftz-vysledek .ftz-stitek { color:var(--ftz-ember) }
.ftz-velke { display:flex; align-items:baseline; gap:var(--ftz-2);
  flex-wrap:wrap; margin:var(--ftz-1) 0 }
/* Číslo, které se při každém posunu přepočítá, je v MONO —
   ne v serifu. Dva důvody, oba věcné:
   · brand manuál dává čísla do IBM Plex Mono a je to tak správně;
     mono číslice se čtou jako odečet z přístroje, což je přesně to,
     čím tahle značka je;
   · v proporcionálním řezu má „1“ jinou šířku než „8“, takže se
     výsledek při tažení posuvníkem viditelně cuká. `tabular-nums`
     to u mono jistí i tam, kde by se řez choval jinak. */
.ftz-velke strong { font-family:var(--ftz-data); font-weight:400;
  font-size:clamp(38px,8.4vw,66px); line-height:1;
  color:var(--ftz-bone); letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1 }
.ftz-velke span { font-family:var(--ftz-data); font-size:17px;
  color:var(--ftz-ember); font-variant-numeric:tabular-nums }
.ftz-podnadpis { margin:0; font-size:15px; color:#D3D8DC;
  max-width:56ch }

.ftz-radky { margin-top:var(--ftz-5) }
/* Popisek vlevo, hodnota vpravo, obojí na stejné účaří.
   Flex s `space-between` nechával krátké popisky viset uprostřed;
   mřížka se dvěma sloupci drží čísla pod sebou. */
.ftz-radek { display:grid; grid-template-columns:1fr auto;
  gap:var(--ftz-1) var(--ftz-4); padding:11px 0; align-items:baseline;
  border-bottom:1px solid var(--ftz-line) }
.ftz-radek:last-child { border-bottom:0 }
.ftz-radek > span:first-child { font-size:14.5px; color:var(--ftz-dim) }
.ftz-radek > span:last-child { font-family:var(--ftz-data);
  font-size:14.5px; color:#EDEAE5; text-align:right; flex:1 1 auto;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1 }

.ftz-akce { display:flex; gap:var(--ftz-3); flex-wrap:wrap;
  margin-top:var(--ftz-5) }
.ftz-cta { display:inline-block; min-height:48px; padding:14px 26px;
  background:var(--ftz-warm); color:var(--ftz-graphite);
  font-family:var(--ftz-ui); font-size:16px; font-weight:600;
  text-decoration:none; border:0; cursor:pointer; border-radius:0 }
.ftz-cta:hover { background:var(--ftz-ember) }
.ftz-cta:focus-visible { outline:3px solid var(--ftz-bone);
  outline-offset:3px }
.ftz-cta2 { display:inline-block; min-height:48px; padding:13px 22px;
  background:transparent; color:var(--ftz-bone);
  border:1px solid var(--ftz-dim); font-family:var(--ftz-ui);
  font-size:15px; font-weight:500; text-decoration:none; cursor:pointer }
.ftz-cta2:hover { border-color:var(--ftz-bone) }

/* ── graf ve výsledku ── */
.ftz-pruh { position:relative; height:8px; background:var(--ftz-line);
  margin:var(--ftz-4) 0 var(--ftz-2) }
.ftz-pruh i { position:absolute; top:0; left:0; height:100%;
  background:var(--ftz-ember); transition:width .35s ease; display:block }
.ftz-skala { display:flex; justify-content:space-between;
  font-family:var(--ftz-data); font-size:11px; color:var(--ftz-dim) }

.ftz-osa { position:relative; height:52px; margin:var(--ftz-5) 0 0 }
.ftz-osa-cara { position:absolute; top:24px; left:0; right:0; height:6px;
  background:linear-gradient(90deg,var(--ftz-glacier) 0%,#6F675F 45%,
              #6F675F 55%,var(--ftz-ember) 100%) }
.ftz-osa-bod { position:absolute; top:14px; width:26px; height:26px;
  margin-left:-13px; border-radius:50%; background:var(--ftz-bone);
  border:3px solid var(--ftz-slate); transition:left .25s ease }
.ftz-osa-popis { display:flex; justify-content:space-between;
  font-family:var(--ftz-data); font-size:11px; color:var(--ftz-dim) }

/* ── zdroj a omezení ── */
.ftz-zdroj { margin-top:var(--ftz-4); font-size:13px }
.ftz-zdroj summary { cursor:pointer; font-family:var(--ftz-data);
  font-size:12px; color:var(--ftz-stone); display:inline-block;
  padding:var(--ftz-1) 0 }
.ftz-zdroj summary:hover { color:var(--ftz-graphite) }
.ftz-zdroj summary:focus-visible { outline:2px solid var(--ftz-warm) }
.ftz-zdroj p { margin:var(--ftz-2) 0 0; padding:var(--ftz-3);
  background:var(--ftz-paper); font-size:13.5px; line-height:1.55;
  color:var(--ftz-body); border-left:2px solid var(--ftz-rule) }
.ftz-omezeni { margin:var(--ftz-4) 0 0; padding:var(--ftz-3) var(--ftz-4);
  background:var(--ftz-paper); border-left:3px solid var(--ftz-stone);
  font-size:13.5px; line-height:1.6; color:var(--ftz-body) }
@media (prefers-reduced-motion:reduce) {
  .ftz-dny *,.ftz-vykon *,.ftz-energie *,.ftz-wbgt *,.ftz-stupne *,
  .ftz-aklim * { transition:none !important }
}

/* ═══ TEMPERIA · grafy ═══════════════════════════════════════
   HTML a CSS, ne SVG s textem. Popisek zůstane textem ve své
   velikosti i na displeji o šířce 320 px — v SVG se zmenšoval
   spolu s kresbou na 4,5 px a nedal se přečíst. Změřeno.

   Barvy se dědí z kalkulaček a studií; graf vlastní paletu nemá,
   jinak by se po změně značky rozešel se zbytkem.
   ═══════════════════════════════════════════════════════════ */
/* Graf se měří podle sebe, ne podle okna. Uvnitř karty studie má
   k dispozici ~290 px z 727px sloupce Waltzu; s `@media` by se při
   širokém okně přepnul do tří sloupců, které se do karty nevejdou,
   a dráha by měla nulovou šířku. */
.ftg { margin:var(--ftz-4) 0; container-type:inline-size }
.ftg-r { display:grid; grid-template-columns:1fr; gap:2px;
  padding:var(--ftz-2) 0; align-items:center }
/* `minmax(72px,1fr)` na dráze: když se nevejde všechno, ustoupí
   jméno. Pruh je to, kvůli čemu graf je. */
/* Všechny řádky sdílejí JEDNU mřížku. Dokud byl mřížkou každý řádek
   zvlášť, měl každý svoji šířku dráhy — dlouhý popisek dráhu zkrátil
   a stejná hodnota se o dva řádky níž nakreslila delší. Naměřeno
   72 px proti 117 px v jednom grafu. */
/* ⚠️ Mřížka je na `.ftg-telo`, ne na `.ftg`. Kontejnerový dotaz se
   vyhodnocuje proti PŘEDKOVI — prvek, který je sám kontejnerem, se
   sám sebe zeptat nemůže a pravidlo by tiše neplatilo. */
@container (min-width:260px) {
  .ftg-telo { display:grid; align-items:center;
    grid-template-columns:fit-content(9em) minmax(72px,1fr)
      fit-content(6.5em);
    gap:var(--ftz-2) var(--ftz-3) }
  .ftg-telo .ftg-r { display:contents }
  .ftg-telo .ftg-jmeno { text-align:right }
}
@container (min-width:460px) {
  .ftg-telo { grid-template-columns:fit-content(11em)
    minmax(72px,1fr) fit-content(8em) }
}
.ftg-jmeno { font-size:13.5px; line-height:1.35; color:var(--ftz-body);
  text-wrap:pretty }
.ftg-drah { display:block; background:transparent; min-width:0 }
.ftg-pruh { display:block; height:14px; background:var(--ftz-stone);
  min-width:3px }
.ftg-pruh--chlad { background:var(--ftz-cold) }
/* ── ZVÝRAZNĚNÝ ŘÁDEK GRAFU ──────────────────────────────────────
   ⚠️ NA KARTĚ PRODUKTU MUSÍ BÝT VIDĚT, KDE STOJÍ TENHLE KUS.
      Bez toho je srovnávací graf obecná informace, kterou zákazník
      nepřenese na produkt, který má právě před sebou. Převzato
      z Aktinu: na každé stránce proteinu je tatáž škála DIAAS
      s vyznačeným vlastním produktem, a je to nejsilnější prvek
      celé jejich stránky.

   ⚠️ ZVÝRAZŇUJE SE JMÉNO A ČÍSLO, NE BARVA PRUHU. Pruh nese
      pólovou barvu a ta v téhle soustavě znamená „mluví se o změně
      teploty" — druhý význam by z ní udělal dekoraci. Váha písma
      a plná barva textu stačí: grafit na papíře má 15,00 : 1. */
.ftg-r--nas .ftg-jmeno { color:var(--ftz-graphite); font-weight:600 }
.ftg-r--nas .ftg-cislo { color:var(--ftz-graphite); font-weight:600 }
.ftg-r--nas .ftg-pruh { box-shadow:inset 0 0 0 1px var(--ftz-graphite) }
.ftg-pruh--warm { background:var(--ftz-warm) }
.ftg-pruh--stone { background:#C9C2B8 }
.ftg-pruh--graphite { background:var(--ftz-graphite) }
/* Zalamuje se schválně. Číslo od jednotky neutrhne — mezi nimi je
   nezlomitelná mezera z české sazby; zlomí se jen popisky jako
   „srovnávací základ“, které s nowrap přetékaly kartu o 35 px. */
.ftg-cislo { font-family:var(--ftz-data); font-size:12.5px;
  color:var(--ftz-graphite); text-wrap:pretty;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1 }

/* ── křivka ── */
.ftg--krivka { display:flex; gap:var(--ftz-3); align-items:stretch }
.ftg-osa-y { display:flex; flex-direction:column;
  justify-content:space-between; font-family:var(--ftz-data);
  font-size:11px; color:var(--ftz-stone); padding-bottom:22px;
  text-align:right; flex:0 0 auto }
.ftg-plocha { flex:1 1 auto; min-width:0 }
.ftg-plocha svg { display:block; width:100%; height:120px }
.ftg-mrizka { stroke:var(--ftz-rule); stroke-width:.4;
  vector-effect:non-scaling-stroke }
.ftg-cara { fill:none; stroke:var(--ftz-graphite); stroke-width:2;
  stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke }
.ftg-znacka { fill:var(--ftz-warm); stroke:var(--ftz-bone);
  stroke-width:1; vector-effect:non-scaling-stroke }
.ftg-osa-x { display:flex; justify-content:space-between;
  font-family:var(--ftz-data); font-size:11px; color:var(--ftz-stone);
  margin-top:var(--ftz-1) }

/* ── pásmo ── */
.ftg--pasmo { display:flex; border:1px solid var(--ftz-rule) }
.ftg-usek { padding:var(--ftz-3); border-right:1px solid var(--ftz-rule);
  min-width:0 }
.ftg-usek:last-child { border-right:0 }
.ftg-usek b { display:block; font-family:var(--ftz-data); font-size:15px;
  color:var(--ftz-graphite); font-variant-numeric:tabular-nums }
.ftg-usek span { font-size:12.5px; color:var(--ftz-stone);
  line-height:1.35; display:block }
.ftg-usek--ok { background:#F1F6F2 }
.ftg-usek--pozor { background:#FBF3EA }
.ftg-usek--stop { background:#FBF2EF }
.ftg-usek--chlad { background:#F0F5F8 }

/* ── velká čísla ── */
.ftg--cisla { display:flex; flex-wrap:wrap; gap:var(--ftz-4) }
.ftg--cisla > div { flex:1 1 130px }
/* Čísla v mono, ne v serifu — stejné pravidlo jako u výsledků
   kalkulaček a stejný důvod: číslo je údaj, ne nadpis. */
.ftg--cisla b { display:block; font-family:var(--ftz-data);
  font-size:29px; line-height:1; color:var(--ftz-graphite);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.ftg--cisla span { font-size:12.5px; color:var(--ftz-stone) }

/* ══ GRAFY PRO PRODUKTOVÉ KARTY — 29. 9. 2026 ═════════════════════
   Barvy naměřené validátorem skillu `dataviz` na ploše #FFFCF8 —
   viz komentář u funkcí. Pruh ≤ 24 px, datový konec zaoblený 4 px,
   u základny rovný; mřížka vlasová, plná, nikdy čárkovaná. */
.ftg--emf, .ftg--roz { --ftg-a:#4E8BA8; --ftg-g:#DDD6CB; --ftg-krok:25% }
.ftg--emf.ftg--teplo, .ftg--roz.ftg--teplo { --ftg-a:#E27438 }
/* Chlad je výchozí, ale třída ho říká výslovně — kontrola tříd by
   jinak hlásila `.ftg--chlad` bez stylu, a měla by pravdu. */
.ftg--emf.ftg--chlad, .ftg--roz.ftg--chlad { --ftg-a:#4E8BA8 }
/* ⚠️ MEZI ŘÁDKY ŽÁDNÁ MEZERA MŘÍŽKY. S `row-gap` by se svislé vlasy
      mezi řádky přerušovaly a četly by se jako čárkovaná čára —
      a čárkovaná mřížka znamená „projekce" nebo „práh". Výšku
      řádku dává dráha sama. */
.ftg--emf .ftg-telo, .ftg--roz .ftg-telo { row-gap:0 }
.ftg--emf .ftg-drah, .ftg--roz .ftg-drah { position:relative;
  display:flex; align-items:center; min-height:32px;
  background-image:linear-gradient(to right,var(--ftz-rule) 1px,
    transparent 1px);
  background-size:var(--ftg-krok) 100%; background-repeat:repeat-x }
.ftg--emf .ftg-pruh { height:16px; border-radius:0 4px 4px 0;
  background:var(--ftg-g); box-shadow:none }
.ftg--emf .ftg-r--nas .ftg-pruh { background:var(--ftg-a) }
.ftg--roz .ftg-pruh--roz { height:16px; border-radius:4px;
  background:var(--ftg-a); min-width:6px }
/* Zvýrazněný řádek: jméno a číslo v grafitu a tučně, štítek
   „princip téhle vesty" jako tichá pilulka. Text NIKDY v barvě
   série — skill i projekt to mají shodně. */
.ftg--emf .ftg-r--nas .ftg-jmeno,
.ftg--emf .ftg-r--nas .ftg-cislo { color:var(--ftz-graphite);
  font-weight:600 }
.ftg-tento { display:inline-block; margin:0 0 0 6px; padding:1px 7px;
  font-style:normal; font-family:var(--ftz-data); font-size:10.5px;
  font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ftz-graphite); background:#E8F0F4;
  border-radius:var(--ftz-r-p); white-space:nowrap; vertical-align:1px }
.ftg--teplo .ftg-tento { background:#FBEDE3 }
/* Osa: popisky pod mřížkou, jednotka ve sloupci jmen. */
.ftg-r--osa .ftg-drah { background:none; min-height:22px;
  border-top:1px solid var(--ftz-rule) }
.ftg-r--osa .ftg-jmeno { font-family:var(--ftz-data); font-size:11px;
  color:var(--ftz-stone) }
.ftg-tik { position:absolute; top:4px; transform:translateX(-50%);
  font-style:normal; font-family:var(--ftz-data); font-size:11px;
  color:var(--ftz-stone); white-space:nowrap;
  font-variant-numeric:tabular-nums }
.ftg-tik:first-child { transform:none }
/* Popisek na samém konci osy se zarovná doprava — na středu by na
   úzkém displeji vyčníval z grafu o půl šířky čísla. */
.ftg-tik--k { transform:translateX(-100%) }
/* Najetí zvýrazní řádek — jediná interakce. Hodnoty stojí
   u všech pruhů, takže tooltip by jen opakoval, co je vidět. */
.ftg--emf .ftg-r:not(.ftg-r--osa):hover .ftg-pruh,
.ftg--roz .ftg-r:not(.ftg-r--osa):hover .ftg-pruh { filter:brightness(.92) }

/* ── škála kůže prstů ─────────────────────────────────────────── */
.ftg--skala { margin:var(--ftz-4) 0 0 }
.ftg-sk-drah { position:relative; height:44px;
  background:linear-gradient(to right,var(--ftz-rule) 1px,transparent 1px)
    0 0 / 20% 100% repeat-x;
  border-bottom:1px solid var(--ftz-rule) }
.ftg-sk-pas { position:absolute; top:6px; bottom:0; display:flex;
  align-items:center; justify-content:center;
  background:rgba(226,116,56,.16); border-radius:4px 4px 0 0;
  box-shadow:inset 0 3px 0 #E27438; font-style:normal }
.ftg-sk-bod { position:absolute; top:0; bottom:0; width:2px;
  background:var(--ftz-graphite); font-style:normal }
.ftg-sk-pas b, .ftg-sk-bod b { font-family:var(--ftz-data);
  font-size:12px; font-weight:500; color:var(--ftz-graphite);
  white-space:nowrap; font-variant-numeric:tabular-nums }
/* ⚠️ POPISEK PRAHU MÁ VLASTNÍ PODKLAD. Stojí vedle grafitové čáry,
      ne na ní — ale měřidlo kontrastu hledá pozadí u předka a tím
      je právě ta čára. Naměřilo 1,00 : 1. Podklad v barvě plochy
      to řeší pro měření i pro oko, kdyby popisek na čáru najel. */
.ftg-sk-bod b { position:absolute; top:2px; right:6px; padding:0 3px;
  background:var(--ftz-bone); border-radius:2px }
.ftg-sk-tiky { position:relative; height:20px }
.ftg-sk-tiky i { position:absolute; top:4px; transform:translateX(-50%);
  font-style:normal; font-family:var(--ftz-data); font-size:11px;
  color:var(--ftz-stone) }
.ftg-sk-tiky i:first-child { transform:none }
.ftg-sk-tiky i:last-child { transform:translateX(-100%) }
.ftg-sk-leg { display:flex; flex-wrap:wrap; gap:6px 18px; margin:8px 0 0;
  font-size:12.5px; color:var(--ftz-body) }
.ftg-sk-l { display:inline-flex; align-items:center; gap:7px }
.ftg-sk-l::before { content:""; display:inline-block }
.ftg-sk-l--p::before { width:14px; height:10px; border-radius:2px;
  background:rgba(226,116,56,.16); box-shadow:inset 0 2px 0 #E27438 }
.ftg-sk-l--b::before { width:2px; height:12px; background:var(--ftz-graphite) }
.ftg-sk-j { margin-left:auto; font-family:var(--ftz-data); font-size:11px;
  color:var(--ftz-stone) }

/* ═══ TEMPERIA · mini-studie ═════════════════════════════════ */
.ftm {
  --ftz-warm:#FF8A4C; --ftz-warm-ink:#B14A18;
  --ftz-cold:#7FB3CC; --ftz-cold-ink:#1F5A75;
  --ftz-ember:#F0A868; --ftz-glacier:#8FCEDD;
  --ftz-paper:#F5F2ED; --ftz-bone:#FFFCF8; --ftz-slate:#1C2024;
  --ftz-graphite:#1C1B1A; --ftz-body:#413D39; --ftz-stone:#544D46;
  --ftz-rule:#E0D9CE; --ftz-ok:#1F6B49; --ftz-pozor:#8F5411;
  --ftz-stop:#A33A22;
  --ftz-ui:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --ftz-data:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --ftz-di:Fraunces,Georgia,'Times New Roman',serif;
  --ftz-1:4px; --ftz-2:8px; --ftz-3:12px; --ftz-4:16px;
  --ftz-5:24px; --ftz-6:32px; --ftz-7:48px;
  font-family:var(--ftz-ui); color:var(--ftz-body); line-height:1.6;
  font-size:16px; background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-top:3px solid var(--ftz-rule);
  padding:var(--ftz-5); display:flex; flex-direction:column;
  -webkit-text-size-adjust:100%;
}
.ftm *,.ftm { box-sizing:border-box }
.ftm--chlad { border-top-color:var(--ftz-cold) }
.ftm--teplo { border-top-color:var(--ftz-warm) }
.ftm--chybi { border-top-color:var(--ftz-stop); background:#FBF2EF }
@media (min-width:768px) { .ftm { padding:var(--ftz-6) } }

.ftm-titulek { font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto; font-variation-settings:'opsz' 60;
  font-size:clamp(19px,2.6vw,25px); line-height:1.2;
  letter-spacing:-.008em; color:var(--ftz-graphite);
  margin:0 0 var(--ftz-3); text-wrap:balance }
.ftm-uvod { margin:0 0 var(--ftz-4); font-size:15px; max-width:62ch;
  text-wrap:pretty }
/* Zvýraznění v kartě: váha i barva, aby se nepletlo s odkazem. */
.ftm b { font-weight:600; color:var(--ftz-graphite) }
.ftm-cislo { display:flex; align-items:baseline; gap:var(--ftz-3);
  flex-wrap:wrap; margin:0 0 var(--ftz-2);
  padding-top:var(--ftz-3); border-top:1px solid var(--ftz-rule) }
.ftm-cislo b { font-family:var(--ftz-data);
  font-size:clamp(30px,5.2vw,46px); line-height:1;
  color:var(--ftz-graphite); letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1 }
.ftm-cislo span { font-size:13.5px; color:var(--ftz-stone);
  flex:1 1 150px }
/* Spojka uvnitř velkého čísla ustupuje: menší řez, barva popisku,
   normální prostrkání. Bez toho se „až“ četlo jako součást údaje. */
/* Selektor musí být `.ftm-cislo b .ftm-spojka`, ne jen `.ftm-spojka`:
   o kus výš stojí `.ftm-cislo span` s pevnou velikostí 13,5 px a to je
   specifičtější. Změřeno — spojka se vykreslovala v 13,5 px místo 25,8. */
.ftm-cislo b .ftm-spojka { font-size:.56em; color:var(--ftz-stone);
  letter-spacing:0; font-family:var(--ftz-ui); font-weight:400 }
.ftm-znamena { margin:var(--ftz-3) 0 0; font-size:14.5px;
  line-height:1.55; color:var(--ftz-graphite); text-wrap:pretty }
.ftm-zdroj { margin-top:var(--ftz-3); font-size:13px }
.ftm-zdroj summary { cursor:pointer; font-family:var(--ftz-data);
  font-size:12px; color:var(--ftz-stone); display:inline-block;
  padding:var(--ftz-1) 0 }
.ftm-zdroj summary:hover { color:var(--ftz-graphite) }
.ftm-zdroj summary:focus-visible { outline:2px solid var(--ftz-warm) }
.ftm-zdroj p { margin:var(--ftz-2) 0 0; padding:var(--ftz-3);
  background:var(--ftz-paper); font-size:13px; line-height:1.55;
  border-left:2px solid var(--ftz-rule) }
.ftm-zdroj p + p { margin-top:var(--ftz-2);
  border-left-color:var(--ftz-pozor) }
/* 44 px na výšku. Naměřeno 40 — pro palec málo, a je to hlavní
   akce karty. Odsazení nese odkaz, ne mezera pod ním, aby byl
   dotykový cíl opravdu tak velký, jak vypadá. */
.ftm-cta { display:inline-flex; align-items:flex-end; min-height:44px;
  align-self:flex-start; margin:auto 0 0;
  padding-top:var(--ftz-4); font-size:15px;
  font-weight:500; color:var(--ftz-graphite); text-decoration:none }
.ftm-cta span { border-bottom:1px solid var(--ftz-graphite);
  padding-bottom:2px }
.ftm-cta:hover span { border-color:var(--ftz-warm-ink);
  color:var(--ftz-warm-ink) }
.ftm-cta:focus-visible { outline:3px solid var(--ftz-warm);
  outline-offset:3px }
/* ⚠️ `.ftm-url` dřív žilo v CSS stránky showroomu, ne v komponentě.
   Na showroomu vypadal odkaz správně, ale do exportovaného stylopisu
   se nedostal — a na Shoptetu by se vykreslil bez vlastních stylů.
   Každá třída použitá v bloku patří k dané komponentě.
   Výšku měl 16 px; `inline-block` s odsazením z něj udělá 24px cíl. */
.ftm-url { display:inline-block; padding:4px 0;
  color:var(--ftz-warm-ink); font-size:12px; word-break:break-all }

/* ═══ TEMPERIA · stránková vrstva v2 ═════════════════════════════
   Generuje 5-showroom/stranky_styl.py. Ručně needituj.
   ═══════════════════════════════════════════════════════════════ */
/* ⚠️ TOKENY NESE I `body`, KDYŽ JE NA STRÁNCE NÁŠ BLOK. Dlaždice
      Shoptetu, pruh výhod i patička stojí MIMO `.ftp` — a stylopis
      je od verze 31 ostyluje. Naměřeno na přípravku: pólový vlásek
      na dlaždici vyšel `rgba(0,0,0,0)` a šířka pruhu výhod se
      vůbec neuplatnila, protože `var(--ftz-cold)` i `var(--ftz-4)`
      byly prázdné. Je to táž past jako u okna detailu ve verzi 26,
      jen o patro výš.

   ⚠️ DEKLARACE SAMA NIC NEOBARVÍ. Vlastní proměnná se projeví
      teprve tam, kde ji někdo přečte — a čtou ji jen naše zápisy.
      `body:has(.ftp)` je navíc táž podmínka, pod kterou stojí
      všechny zásahy do cizích prvků, takže se rozsah nerozšiřuje.

   ⚠️ NA `:root` TO NEPATŘÍ. Stylopis se načítá na KAŽDÉ stránce
      obchodu; na `:root` by tokeny visely i tam, kde náš blok
      není, a příští „drobná" úprava by se svezla s nimi. */
.ftp, body:has(.ftp), .ftp-pata {
  --ftz-warm:#FF8A4C; --ftz-warm-ink:#B14A18;
  --ftz-cold:#7FB3CC; --ftz-cold-ink:#1F5A75;
  --ftz-ember:#F0A868; --ftz-glacier:#8FCEDD;
  --ftz-paper:#F5F2ED; --ftz-bone:#FFFCF8; --ftz-slate:#1C2024;
  --ftz-graphite:#1C1B1A; --ftz-body:#413D39; --ftz-stone:#544D46;
  --ftz-rule:#E0D9CE; --ftz-line:#333B42; --ftz-dim:#C6CDD3;
  /* --ftz-stone od 30. 9. 2026 #544D46, dřív #6F675F. Majitel:
     „písmo je často moc světle šedé a jde špatně vidět". Na bílé
     8,31 : 1 (dřív 5,55), na papíře 7,44 (dřív 4,97). */
  --ftz-ok:#1F6B49; --ftz-pozor:#8F5411; --ftz-stop:#A33A22;
  --ftz-ui:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --ftz-data:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --ftz-di:Fraunces,Georgia,'Times New Roman',serif;
  --ftz-mira:60ch;        /* míra řádku dokumentu — ZMĚŘENO,
     ne odhadnuto: `ch` je šířka číslice „0", a ta je v Interu
     širší než průměrný znak. Při 68ch vyšlo 78 znaků na řádek,
     tedy nad pohodlným pásmem 65–75. Změřeno projitím textového
     uzlu po znacích a čtením, kde se zlomí řádek. */
  --ftz-okraj:68px;      /* okraj pro visící číslici */
  --ftz-1:4px; --ftz-2:8px; --ftz-3:12px; --ftz-4:16px;
  --ftz-5:24px; --ftz-6:32px; --ftz-7:48px; --ftz-8:64px;
  --ftz-9:96px;
  --ftz-r:4px; --ftz-r-k:8px; --ftz-r-v:14px; --ftz-r-p:999px;
  --ftz-e1:0 1px 2px rgba(28,27,26,.05), 0 1px 3px rgba(28,27,26,.04);
  --ftz-e2:0 2px 4px rgba(28,27,26,.06), 0 8px 20px -6px rgba(28,27,26,.10);
  --ftz-e3:0 3px 6px rgba(28,27,26,.07), 0 18px 40px -12px rgba(28,27,26,.16);
  --ftz-cas-r:120ms; --ftz-cas:180ms; --ftz-cas-p:280ms;
  --ftz-krivka:cubic-bezier(.2,.7,.3,1);
  --ftz-prsten:0 0 0 3px rgba(255,138,76,.45);
  --ftz-osa:linear-gradient(90deg,var(--ftz-cold),#6F675F 46%,
            #6F675F 54%,var(--ftz-warm));

}
.ftp {
  font-family:var(--ftz-ui); color:var(--ftz-body); line-height:1.6;
  font-size:16.5px; -webkit-text-size-adjust:100%;
  font-feature-settings:'kern' 1,'liga' 1;
}
.ftp *,.ftp *::before,.ftp *::after { box-sizing:border-box }
/* Čeština má slova, která se do úzkého sloupce nevejdou celá
   („Neaklimatizovanému" má 123px popisek a slovo 133). Bez tohohle
   text vyleze z karty. Zlomí se jen tehdy, když jinak nelze. */
.ftp p,.ftp span,.ftp b,.ftp em,.ftp h1,.ftp h2,.ftp h3,.ftp td,
.ftp th,.ftp button,.ftp a { overflow-wrap:break-word }
.ftp img,.ftp svg { max-width:100% }

/* Ikony. Velikost dědí z rodiče, barvu z textu. */
.ftp-ikona { width:1em; height:1em; flex:0 0 auto; display:block }

/* ── nadpisy a rytmus ────────────────────────────────────────────
   Mobile-first: sekce mají na telefonu 56 px, na desktopu 96.
   Vzdušnost je to jediné, co dělá prémiový dojem zadarmo. */
.ftp-sekce { margin:var(--ftz-8) 0 }
@media (min-width:760px) { .ftp-sekce { margin:var(--ftz-9) 0 } }
/* Ovladac patri k tomu, co ovlada. Sekce s prepinacem mela pod sebou
   tutez mezeru jako kterakoli jina (96 px), takze prepinac stal 24 px
   pod nadpisem a 96 px nad seznamem, ktery filtruje -- opticky patril
   k nadpisu, ne ke kartam. Po odstraneni perexu to bylo videt jeste
   vic, protoze v te mezere uz nic nebylo. */
.ftp-sekce--ovladac { margin-bottom:var(--ftz-7) }
@media (min-width:760px) { .ftp-sekce--ovladac {
  margin-bottom:var(--ftz-7) } }
.ftp-h1 { font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto; font-variation-settings:'opsz' 144;
  font-size:clamp(34px,7.4vw,64px); line-height:1.02;
  letter-spacing:-.028em; color:var(--ftz-bone);
  margin:0 0 var(--ftz-4); text-wrap:balance }
.ftp-h2 { font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto; font-variation-settings:'opsz' 96;
  font-size:clamp(26px,4.6vw,40px); line-height:1.1;
  letter-spacing:-.02em; color:var(--ftz-graphite);
  margin:0 0 var(--ftz-3); text-wrap:balance }
.ftp-h3 { font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 48; font-size:clamp(20px,3vw,26px);
  line-height:1.2; letter-spacing:-.012em; color:var(--ftz-graphite);
  margin:0 0 var(--ftz-4) }
.ftp-p { margin:0 0 var(--ftz-4); max-width:62ch; text-wrap:pretty }
/* Sekce se symetrickým obsahem. Nadpis a perex se na střed hodí
   jen tam, kde je pod nimi mřížka stejně velkých karet — jinak text
   „plave". Proto je to modifikátor, ne výchozí stav. */
.ftp-sekce--stred { text-align:center }
.ftp-sekce--stred .ftp-p { margin-left:auto; margin-right:auto;
  max-width:56ch }
.ftp-sekce--stred .ftp-h2 { margin-left:auto; margin-right:auto }
/* Perex, který nese prodejní tvrzení, ne popis sekce. „Protože pár
   stupňů může změnit víc, než čekáte" je věta, kvůli které čtenář
   čísla pod ní vůbec přečte — v drobném šedém odstavci se ztrácela.
   ⚠️ Pořád je to odstavec, ne druhý nadpis: `<h2>` na stránce zůstává
      jeden a osnova se nemění. */
.ftp-p--silny { font-size:18px; line-height:1.45; font-weight:500;
  color:var(--ftz-graphite); max-width:36ch }
@media (min-width:560px) { .ftp-p--silny { font-size:20px } }
/* Osa pod nadpisem. Je to jediný podpis, který se na stránce
   opakuje — a opakuje se schválně: prvek, který se objeví jednou,
   je efekt, prvek, který se objeví u každé kapitoly, je systém.
   Krátký a tenký, aby dělil, ne troubil. */
.ftp-sekce--stred .ftp-h2::after { content:""; display:block;
  width:44px; height:2px; margin:var(--ftz-4) auto 0;
  background:var(--ftz-osa); border-radius:2px }
/* ⚠️ ZAROVNÁNÍ NA STŘED SE NESMÍ PROPADNOUT DO OBSAHU. Nadpis sekce
   ano; otázka, odpověď ani karta zdroje ne — souvislý text na střed
   se čte špatně a při každém překladu řádku skáče levý okraj. */
.ftp-sekce--stred .ftp-faq, .ftp-sekce--stred .ftp-z-seznam,
.ftp-sekce--stred .ftp-zb { text-align:left }
.ftp-p b { color:var(--ftz-graphite); font-weight:600 }
.ftp-drobne { font-size:13px; line-height:1.55; color:var(--ftz-stone) }
/* ── PRUH UJIŠTĚNÍ ───────────────────────────────────────────────
   Tři věci, které chce vědět každý, kdo má do formuláře zadat čísla
   o svém provozu. Byly poslední větou odstavce, kde je nikdo
   nečetl.

   ⚠️ FAJFKA SE KRESLÍ V CSS. Tři vložená SVG by stála přes 600 znaků
      z bloku, který má limit 8192 — a je to čtverec otočený o 45°
      se dvěma hranami, na to stačí pseudoprvek.

   ⚠️ ZELENÁ JE STAVOVÁ BARVA, NE TŘETÍ BARVA ZNAČKY. Pólová soustava
      se jí netýká; `--ftz-ok` se stejně používá u štítku „koruny". */
/* Pruh ujištění (`.ftp-uj`) je pryč i se svým stylem — tatáž tři
   tvrzení stála na stránce dvakrát. Zůstávají v perexu hlavičky. */
/* ⚠️ VÁHA 500 JE STROP. IBM Plex Mono se ze služby stahuje jen ve
   váhách 400 a 500 — `font-weight:600` by prohlížeč NAKRESLIL SÁM
   (falešný tučný řez) a v monospace při 13 px to vypadá rozmazaně.
   Skutečná šestistovka by znamenala další soubor v odkazu na písmo,
   tedy i nové vložení řádku do Záhlaví obchodu. */
/* ⚠️ VÝCHOZÍ BARVA JE PRO SVĚTLOU PLOCHU, NA TMAVÉ SE PŘEPÍNÁ.
      Do 28. 9. 2026 to bylo naopak: `--ftz-ember` je barva NA
      TMAVÉM (na břidlici 8,20 : 1) a na papíře má **2,00 : 1**.
      Naměřeno na produktové kartě, kde štítek stojí na světlém —
      byl prakticky neviditelný, a bylo jich tam třicet.

   ⚠️ JE TO POTŘETÍ TÁŽ CHYBA. Projekt ji má zapsanou u štítku
      v návodu („Ember je barva na tmavé; výchozí musí být
      warm-ink a na tmavém se přepíná") a u popisku pruhu
      institucí. Pokaždé se opravila JEDNA komponenta místo
      výchozí hodnoty, takže čtvrté použití spadlo znovu.
      Proto se mění VÝCHOZÍ barva, ne další výjimka.

   ⚠️ SEZNAM TMAVÝCH PLOCH JE TENTÝŽ jako `TMAVE_PLOCHY`
      v `test_stranek.py`. Přidat tmavou plochu znamená dopsat ji
      na obě místa — hlídá to test. */
.ftp-stitek { font-family:var(--ftz-data); font-size:13px;
  font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ftz-warm-ink); margin:0 0 var(--ftz-4) }
.ftp-hero .ftp-stitek,
.ftp-zaver .ftp-stitek,
.ftp-tmavy .ftp-stitek,
.ftp-uvod-s .ftp-stitek { color:var(--ftz-ember) }

/* ── HERO ────────────────────────────────────────────────────────
   Jediný přechod na stránce. Záře jsou radiální a velmi slabé:
   .13 a .11. Při .16/.14 měl Ember pod jejich překryvem 4,44 : 1,
   tedy pod prahem — na oko žádný rozdíl, v tom, co se dá doložit,
   celý. */
/* ── nadpis stránky, který Shoptet tiskne navíc ───────────────────
   ⚠️ NA STRÁNCE TYPU „type-page" JE NÁZEV TŘIKRÁT. Naměřeno na
      /kalkulacka/ 13. 9. 2026:

        h1.header-title      y=82    „Kalkulačka"   (pruh s fotkou)
        header > h1          y=380   „Kalkulačka"   (259 px nad obsahem)
        .breadcrumbs                 „Kalkulačka"   (drobečky)
        h1.ftp-h1            y=1249  náš skutečný nadpis

      Tři `<h1>` na jedné stránce jsou vada i pro vyhledávač.
      Kategorie `/chlazeni/` má přitom `<h1>` jediný — je to zvláštnost
      stránek, ne šablony.

   ⚠️ SKRÝVÁ SE JEN TEN PROSTŘEDNÍ. Drobečky jsou navigace a patří tam;
      štítek v pruhu s fotkou nese název na KAŽDÉ stránce toho typu
      a bez něj by pruh zůstal prázdný. Ten nad obsahem neříká nic,
      co by o dva řádky níž neřekl hero — a zabírá 259 px první
      obrazovky.

   ⚠️ `body:has(.ftp)` JE POJISTKA, NE OZDOBA. Stylopis se načítá na
      každé stránce obchodu; bez té podmínky by nadpis zmizel i tam,
      kde je jediný a nutný. Když prohlížeč `:has()` neumí, nadpis
      prostě zůstane — degraduje se do dnešního stavu, nic se
      nerozbije. */
body:has(.ftp) .pageArticleDetail > header { display:none }
/* ⚠️ DROBEČKY TAKY — ROZHODNUTÍ MAJITELE, NE MOJE ÚSPORA.
      Doporučoval jsem je nechat: jsou to navigace a vyhledávač
      z nich čte strukturu webu. Majitel je chce pryč, ať nad
      herem nestojí „Studie" potřetí — a je to jeho obchod.
      Zapsáno, aby to příště nikdo „neopravil" zpátky.

      Platí jen na stránkách s naším blokem. Na kategorii
      a na produktu drobečky zůstávají; tam je hledá
      i zákazník.

   ⚠️ 29. 9. 2026 — PODMÍNKA PŘESTALA ŘÍKAT TO, CO SLIBUJE VĚTA NAD
      NÍ. `body:has(.ftp)` platilo, dokud byl náš blok jen na
      stránkách. Úvod kategorie a třicet produktových karet jsou
      taky `.ftp` — a drobečky by zmizely právě tam, kde podle
      téhle poznámky zůstávají. Ověřeno na živém obchodě: všech
      osm našich stránek má `type-page`, kategorie `type-category`,
      produkt `type-product`. Rozhodnutí majitele tím platí dál
      a beze změny; jen se nerozlézá na stránky, o kterých nebylo.

   ⚠️ 1. 10. 2026 — PRYČ I NA PRODUKTU A KATEGORII. Majitel na snímku
      produktu: „je tam odkaz, ale nevidím … ten bych tam vůbec
      nechtěl". Naměřeno: odkaz domů je ikona v barvě
      `--color-primary`, tedy bílá — z drobečků zbylo jen „/ Vyhřívání".
      Název kategorie nese tmavý pás, produkt svůj nadpis. Strukturovaná
      data drobečků zůstávají ve zdroji stránky. */
body:has(.ftp) .breadcrumbs { display:none }

/* ── štítek v pruhu s fotkou ──────────────────────────────────────
   ⚠️ TOHLE OTÁČÍ ROZHODNUTÍ O DVA ODSTAVCE VÝŠ. Výše je zapsáno, že
      `h1.header-title` zůstane, „protože bez něj by pruh zůstal
      prázdný". Naměřeno 13. 9. 2026 na živém obchodě to neplatí:

        /studie/   hlavička 199 px, z toho štítek 26 px
                   po skrytí    144 px, obsah o 55 px výš
        /          hlavička 391 px, štítek 247 px — a uvnitř
                   `<span></span>`, tedy PRÁZDNÝ

      Pruh s fotkou drží pozadí hlavičky (8-foto-1920x392.jpg), ne
      ten štítek. Po skrytí zůstane 144 px fotky, pruh se nerozpadne.
      Štítek je přitom druhý VIDITELNÝ `<h1>` na stránce — přesně to,
      co se na /studie/ a /kalkulacka/ mělo odstranit a neodstranilo.

   ⚠️ 1. 10. 2026 — UŽ I NA TITULCE. Dřív tu stála výjimka
      `:not(.type-index)`, protože fotka v záhlaví byla hero titulky.
      Fotka odešla (pole Obrázek v záhlaví je prázdné, viz
      `_zahlavi_titulka()`) a hero je náš `.ftp-uvod` s vlastním
      obrazem. Zůstal prázdný štítek, který držel 247 px — majitel:
      „strašně hodně prostoru mezi horní lištou … a úvodním bannerem".
      Naměřeno na živé titulce: hlavička 389 px, z toho 247 px prázdno.

   ⚠️ CO TATO OPRAVA NEUDĚLÁ: v HTML zdroji zůstanou `<h1>` tři.
      Skrývá se jen to, co vidí návštěvník. Duplicitu ve zdroji
      neodstraní stylopis, jen nastavení stránky v administraci. */
body:has(.ftp) .header-title { display:none }

/* ── patička ─────────────────────────────────────────────────────
   ⚠️ NAMĚŘENO 3,61 : 1 NA DEVÍTI TEXTECH. Patička Shoptetu tiskne
      #767676 na #1C2024. Práh pro text do 18 px je 4,5 : 1, takže
      „Jak nakupovat", „Obchodní podmínky", „Podmínky ochrany
      osobních údajů" i telefon jsou pod ním — a jsou to zrovna ty
      odkazy, kvůli kterým si zákazník obchod prověřuje.

      #CFCAC2 dává 10,05 : 1 (do 30. 9. 2026 #A8A49E, 6,61 : 1 —
      majitel: „písmo je často moc světle šedé"). Je to týž teplý
      odstín jako papír značky (#F5F2ED), jen o kus níž.

   ⚠️ PLATÍ TAM, KDE JE NÁŠ BLOK NEBO NAŠE PATIČKA. Patička z pole
      Zápatí (`.ftp-pata`) je od 30. 9. 2026 na každé stránce, takže
      `body:has(.ftp-pata)` opraví šedou v celém obchodě, i v košíku. */
/* ⚠️ PŘEPISUJE SE PROMĚNNÁ, NE BARVA. První pokus zněl
      `body:has(.ftp) footer a { color:#A8A49E }` a NEFUNGOVAL:
      Shoptet barví patičku pravidlem
        #footer a:not(.login-btn):not(.btn) { color:var(--colors-…-tertiary) }
      se specifičností (1,2,1). Náš zápis má (0,1,3) a prohrál.

      Přepsat tutéž proměnnou o úroveň výš je silnější i čistší:
      platí na všechno, co ji uvnitř patičky čte, a nemusí se
      uhánět specifičnost ani sahat po `!important`.

      Ověřeno v prohlížeči 13. 9. 2026: 11 textů v patičce,
      nejnižší poměr 6,61 : 1, pod prahem nic. */
body:has(.ftp) footer,
body:has(.ftp-pata) footer { --colors-foregrounds-content-tertiary:#CFCAC2 }

.ftp-hero { position:relative; overflow:hidden;
  border-radius:var(--ftz-r-v); margin-bottom:var(--ftz-8);
  background:
    radial-gradient(120% 150% at 0% 100%, rgba(127,179,204,.13), transparent 55%),
    radial-gradient(120% 150% at 100% 0%, rgba(255,138,76,.11), transparent 55%),
    linear-gradient(158deg,#23282D 0%,#1C2024 62%);
  color:var(--ftz-paper) }
/* Jemná mřížka. Je to textura, ne dekorace — drží tmavou plochu,
   aby nevypadala jako prázdný obdélník. */
.ftp-hero::before { content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,252,248,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,252,248,.028) 1px,transparent 1px);
  background-size:52px 52px; mask-image:radial-gradient(120% 90% at 50% 0%,
    #000 30%,transparent 78%); pointer-events:none }
/* Osa na spodní hraně. Podpis, ne stupnice k odečtu. */
.ftp-hero::after { content:""; position:absolute; left:0; right:0;
  bottom:0; height:3px; background:var(--ftz-osa) }
/* ⚠️ CELÝ HERO JE NA STŘED. Nadpis na levý praporek a pod ním
   symetrický pruh statistik se navzájem perou: oko vidí dvě různé
   osy. Na střed má hero jednu osu a tlačítka i statistiky na ní
   sedí. Text na střed se hůř čte v dlouhých odstavcích — proto má
   perex nejvýš dvě věty a je omezený na 46 znaků na řádek. */
.ftp-hero-in { position:relative; text-align:center;
  padding:var(--ftz-8) var(--ftz-5) var(--ftz-7) }
@media (min-width:760px) {
  .ftp-hero-in { padding:var(--ftz-9) var(--ftz-8) var(--ftz-8) }
}
/* ⚠️ TÉŽ VÝCHOZÍ PRO SVĚTLOU. `--ftz-dim` je popisková barva NA
      TMAVÉM (10,20 : 1 na břidlici); na papíře má **1,61 : 1**.
      Naměřeno na produktové kartě i v úvodu kategorie — a ten
      úvod se chystal vložit do obchodu.

   ⚠️ MÉ VLASTNÍ MĚŘENÍ TU CHYBU ZAKRYLO. Úvod kategorie jsem
      ověřoval injekcí CSS do živé stránky a do té injekce jsem
      barvu ručně dopsal (`color:#413D39`). Naměřil jsem tedy svůj
      odhad, ne vygenerovaný stylopis. **Ověřovat se musí tím
      souborem, který se nahrává, ne jeho ruční napodobeninou.** */
.ftp-lead { margin:0 auto; font-size:clamp(16.5px,2.2vw,19px);
  line-height:1.55; color:var(--ftz-body); max-width:46ch;
  text-wrap:balance }
.ftp-lead b { color:var(--ftz-graphite); font-weight:500 }
.ftp-hero .ftp-lead,
.ftp-zaver .ftp-lead,
.ftp-tmavy .ftp-lead,
.ftp-uvod-s .ftp-lead { color:var(--ftz-dim) }
.ftp-hero .ftp-lead b,
.ftp-zaver .ftp-lead b,
.ftp-tmavy .ftp-lead b,
.ftp-uvod-s .ftp-lead b { color:var(--ftz-bone) }

/* Statistiky. Sklo, protože leží přes spodní hranu hera. */
/* ⚠️ Tlačítka jsou STEJNĚ ŠIROKÁ a mají TOTOŽNOU šířku jako pruh
   statistik pod nimi. `flex-wrap` je nechával různě dlouhá podle
   délky textu; teď drží mřížka a obě sloupcové stopy jsou `1fr`.
   Díky shodné šířce s pruhem statistik má celý hero jednu svislou
   hranu vlevo i vpravo — to je to, čemu se říká „uklizený box". */
.ftp-hero .ftp-akce { display:grid; grid-template-columns:1fr;
  gap:var(--ftz-3); margin:var(--ftz-6) 0 0; width:100% }
@media (min-width:560px) {
  .ftp-hero .ftp-akce { grid-template-columns:1fr 1fr }
}
.ftp-hero .ftp-akce .ftp-cta,
.ftp-hero .ftp-akce .ftp-cta2 { width:100%; text-align:center }

/* ⚠️ `minmax(0,1fr)`, NE `1fr`. `1fr` je zkratka za
   `minmax(auto,1fr)` a `auto` znamená „aspoň tak široký, jak je
   nejdelší nezalomitelné slovo". Popisky v mono verzálkách jsou
   širší než v Interu, takže si sloupce vynutily 259 px v pruhu
   širokém 230 — a protože pruh má kvůli vláskové ose
   `overflow:hidden`, 29 px popisku se tiše oříznulo. */
.ftp-staty { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  /* Mezera je v proměnné, protože z ní počítá polohu dělítko.
     Napsaná dvakrát by se při první změně rozešla. */
  --mezera:var(--ftz-2);
  gap:var(--mezera); margin-top:var(--ftz-6);
  padding:var(--ftz-5) var(--ftz-4); border-radius:var(--ftz-r-k);
  background:rgba(255,252,248,.055);
  border:1px solid rgba(255,252,248,.13);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,252,248,.07);
  position:relative; overflow:hidden }
/* Bez `backdrop-filter` by pruh splynul s pozadím. Neprůhledná
   plocha místo skla — vypadá jinak, čte se stejně. */
@supports not ((backdrop-filter:blur(1px)) or
               (-webkit-backdrop-filter:blur(1px))) {
  .ftp-staty { background:rgba(255,252,248,.10) }
  .ftp-modal-pozadi { background:rgba(20,22,25,.78) }
}
/* Osa u paty pruhu. Tři pixely a plná sytost — stejně jako nad
   tmavou deskou a nad kartou důvodu, aby to byl jeden podpis
   a ne tři různě silné čárky. */
.ftp-staty::after { content:""; position:absolute; left:0; right:0;
  bottom:0; height:3px; background:var(--ftz-osa) }
@media (min-width:760px) { .ftp-staty { --mezera:var(--ftz-5);
  padding:var(--ftz-5) var(--ftz-6) } }
/* Statistiky jsou zarovnané na střed na každé šířce. Na levý
   praporek vypadaly rozsypaně, protože každé číslo má jinou šířku. */
.ftp-stat { text-align:center; display:block; padding:var(--ftz-2) 0;
  border-radius:var(--ftz-r-k) }
/* Vlásková příčka mezi údaji. Bez ní to byla tři čísla, která jen
   náhodou stojí vedle sebe; s ní je to jeden přístroj. Kreslí se
   na levé hraně druhého a třetího údaje, takže se nepočítá, kolik
   jich je — přibude-li čtvrtý, příčka se objeví sama. */
/* ⚠️ DĚLÍTKO JE SVISLÝ KUS OSY, NE BÍLÁ LINKA. Chladná nahoře,
   teplá dole — týž přechod jako všude jinde, jen otočený. Bílá
   příčka byla jen předěl; tahle nese značku.

   Kreslí se pseudoprvkem, ne `border-left`: barevný rámeček by
   šel jedině přes `border-image`, a ten vypíná zaoblení, které
   potřebuje podbarvení při najetí. */
.ftp-stat { position:relative }
.ftp-stat + .ftp-stat::before { content:""; position:absolute;
  left:calc(var(--mezera) * -0.5); top:14%; bottom:14%; width:1px;
  background:linear-gradient(180deg,var(--ftz-cold),
    #6F675F 48%,#6F675F 52%,var(--ftz-warm)) }
/* Statistika, na kterou se dá kliknout, si při najetí rozsvítí
   vlastní kousek osy. Stav ale nenese jen ta linka — nese ho
   i podbarvení, takže je poznat i bez rozlišení barev. */
.ftp-stat--odkaz::after { content:""; position:absolute; left:16%;
  right:16%; bottom:-1px; height:2px; background:var(--ftz-osa);
  opacity:0; transition:opacity var(--ftz-cas) var(--ftz-krivka) }
.ftp-stat--odkaz:hover::after,
.ftp-stat--odkaz:focus-visible::after { opacity:1 }
/* Statistika, která někam vede. „22 ověřených zdrojů" je slib —
   musí jít kliknout a seznam opravdu uvidět. */
.ftp-stat--odkaz { text-decoration:none; color:inherit;
  transition:background var(--ftz-cas) var(--ftz-krivka) }
.ftp-stat--odkaz:hover { background:rgba(255,252,248,.07) }
.ftp-stat--odkaz:focus-visible { outline:none;
  box-shadow:var(--ftz-prsten) }
/* ⚠️ `--ftz-bone`, ne Ember. Ember má na tmavém pozadí 4,91 : 1,
   jenže tenhle popisek leží ve SKLENĚNÉM pruhu, který je světlejší —
   naměřeno 4,18, tedy pod prahem. Na skle platí jen kost.

   Pod 520 px se popisek schová a odkaz se podtrhne: „ZOBRAZIT"
   se šipkou má 72 px a ve sloupci širokém 70 px přetékal. */
/* `padding-right` je kvůli prostrkání: `letter-spacing` přidá
   mezeru i ZA poslední písmeno a obsah je o ty 2 px širší než
   obsahový rámec. Naměřeno — 72 proti 70. */
.ftp-stat-v { display:none; align-items:center; gap:5px;
  margin-top:6px; padding-right:2px; font-style:normal;
  font-family:var(--ftz-data); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ftz-bone) }
@media (min-width:520px) { .ftp-stat-v { display:inline-flex } }
@media (max-width:519px) {
  .ftp-stat--odkaz span { text-decoration:underline;
    text-underline-offset:3px; text-decoration-color:var(--ftz-ember) }
}
.ftp-stat-v::after { content:""; width:5px; height:5px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-stat--odkaz:hover .ftp-stat-v::after {
  transform:rotate(45deg) translate(2px,-2px) }
/* ⚠️ ČÍSLO NENÍ MALOVANÉ PŘECHODEM. Bylo — `background-clip:text`
   s průhlednou výplní vypadalo efektně, jenže:

     · `-webkit-text-fill-color:transparent` znamená, že text sám
       nemá barvu. Kontrast pak nejde změřit: měření četlo 1,00 : 1,
       protože `color` už nic nemaluje.
     · Kdyby `background-clip:text` kdekoli selhal, zůstane
       nejdůležitější číslo na stránce průhledné. Záložní `color`
       to nezachrání, protože `text-fill-color` ho přebíjí.

   Přechod je proto pod pruhem statistik jako vlásková osa — je
   to podpis značky na místě, kde nemůže nic shodit. */
.ftp-stat-c { display:block; font-family:var(--ftz-data);
  font-size:clamp(26px,6vw,42px); line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; color:var(--ftz-bone);
  /* ⚠️ VÁHA JE NAPSANÁ, NE ZDĚDĚNÁ. `<b>` nese od prohlížeče 700,
     jenže IBM Plex Mono se stahuje jen ve 400 a 500 — sedmistovka
     se tiše srazí na 500. Nekreslí se nic falešného (ověřeno
     `font-synthesis:none`), ale soubor tvrdil něco, co se
     nevykreslí. Kdyby někdo do odkazu na písmo přidal 700, čísla
     v heru by ztloustla, aniž by to kdokoli chtěl. */
  font-weight:500 }
/* Popisek v mono verzálkách — táž řeč jako popisek měřidla,
   patička zdrojů a popisky vstupů v kalkulačce. Hero tím mluví
   stejně jako zbytek stránky.

   ⚠️ PROSTRKÁNÍ MUSÍ BÝT MALÉ. Ve sloupci širokém 90 px (320 px
      displej) se „institucí a časopisů" ve verzálkách na .12em
      nevejde; na .05em ano. Měřeno, ne odhadnuto.

   ⚠️ BARVA `--ftz-dim`. Na skleněném pruhu má 5,52 : 1; Ember by
      měl 4,18 — pod prahem. Na skle platí jen kost a dim. */
.ftp-stat span { display:block; margin-top:var(--ftz-3);
  font-family:var(--ftz-data); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.4; color:var(--ftz-dim);
  overflow-wrap:break-word; text-wrap:balance }
/* Pod 420 px je sloupec 61 px a „OVĚŘENÝCH" se do něj na 11 px
   s prostrkáním nevejde. Menší stupeň a těsnější prostrkání ano —
   změřeno, ne odhadnuto. */
@media (max-width:419px) { .ftp-stat span { font-size:10px;
  letter-spacing:.02em } }

/* ── PRUH INSTITUCÍ ──────────────────────────────────────────────
   Býval v heru pod statistikami, kde zabíral celý řádek a rozbíjel
   je. Je to důkaz, ne úvod — patří pod tvrzení, které dokládá. */
.ftp-inst { margin-top:var(--ftz-6); padding-top:var(--ftz-5);
  border-top:1px solid var(--ftz-rule) }
.ftp-inst-n { margin:0 0 var(--ftz-3); font-family:var(--ftz-data);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ftz-stone); text-align:center }
.ftp-inst-s { display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--ftz-2) var(--ftz-4) }
.ftp-inst-s span { font-size:13px; font-weight:500;
  color:var(--ftz-body) }
/* Oddělovač mezi jmény. Tečka, ne čárka — čárka by vypadala jako
   pokračování věty. */
.ftp-inst-s span + span::before { content:"·"; margin-right:var(--ftz-4);
  color:var(--ftz-rule) }

/* ── SEGMENTOVÝ PŘEPÍNAČ ─────────────────────────────────────────
   Jezdec je samostatný prvek a posouvá ho skript proměnnými
   `--x` a `--w`. Bez skriptu se nezobrazí a tlačítka vypadají
   jako obyčejné přepínače — pořád použitelné. */
.ftp-seg { position:relative; display:flex; gap:var(--ftz-1);
  padding:var(--ftz-1); margin:var(--ftz-5) 0;
  background:#EAE4DA; border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-p) }
.ftp-seg-jezdec { display:none }
.ftp--js .ftp-seg-jezdec { display:block; position:absolute;
  top:4px; bottom:4px; left:0; width:var(--w,33%);
  transform:translateX(var(--x,0)); border-radius:var(--ftz-r-p);
  background:var(--ftz-bone); box-shadow:var(--ftz-e2);
  transition:transform var(--ftz-cas-p) var(--ftz-krivka),
             width var(--ftz-cas-p) var(--ftz-krivka) }
.ftp-seg-b { position:relative; z-index:1; flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center;
  gap:var(--ftz-2); min-height:48px; padding:0 var(--ftz-3);
  font-family:var(--ftz-ui); font-size:15px; font-weight:600;
  /* Ne `--ftz-stone`: na podkladu #EAE4DA má 4,39 : 1, tedy pod
     prahem. Změřeno. `--ftz-body` má 8,3. */
  color:var(--ftz-body); background:transparent; border:0;
  border-radius:var(--ftz-r-p); cursor:pointer; white-space:nowrap;
  transition:color var(--ftz-cas) var(--ftz-krivka) }
/* ⚠️ POČTY V TLAČÍTKU JSOU PRYČ A NEVRACEJÍ SE. Stálo tam
   Vše 12 · Horko 10 · Zima 2 a byla to pravda o CELÉ stránce —
   jenže v karuselu hned pod přepínačem je jen šest studií (4 + 2)
   a zbytek je v mřížce o kus níž. Číslo sedělo s daty a nesedělo
   s tím, co má čtenář před očima. Kdo si to přepočítá, dostane jiné
   číslo než my — a takový údaj důvěru bourá, ne buduje.

   Se zkrácenými štítky (Vše / Horko / Zima) se navíc přepínač vejde
   na 320 px bez jakéhokoli zužování. Změřeno. */
/* Aktivní stav nese barva, tučnost A nakreslená fajfka. Informace
   nesmí viset jen na barvě — a při vysokém kontrastu nebo na
   černobílém displeji barva zmizí úplně. */
.ftp-seg-b[aria-pressed="true"] { color:var(--ftz-graphite) }
.ftp-seg-b[aria-pressed="true"]::before { content:""; width:9px;
  height:5px; flex:0 0 auto; margin-top:-3px;
  border-left:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor; transform:rotate(-45deg) }
.ftp:not(.ftp--js) .ftp-seg-b[aria-pressed="true"] {
  background:var(--ftz-bone); box-shadow:var(--ftz-e1) }
.ftp-seg-b:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }
/* Strana osy se propisuje do přepínače: vlásek pod jezdcem má barvu
   zapnutého pólu, u Vše celou osu. Je to táž linka, jaká vede pod
   nadpisy sekcí a nad tmavou deskou — značka má jeden grafický
   motiv a tenhle je jeho nejmenší podoba.

   ⚠️ NIC SE NA BARVU NEVĚŠÍ. Co je zapnuté, říká `aria-pressed`
      a nakreslená fajfka. Na černobílém displeji ani při vysokém
      kontrastu se tím nic neztratí. */
.ftp--js .ftp-seg-jezdec::after { content:""; position:absolute;
  left:16px; right:16px; bottom:7px; height:2px; border-radius:2px;
  background:var(--ftz-osa) }
.ftp-seg[data-a="chlad"] .ftp-seg-jezdec::after {
  background:var(--ftz-cold) }
.ftp-seg[data-a="teplo"] .ftp-seg-jezdec::after {
  background:var(--ftz-warm) }
/* Pólová barva zůstává na vlásku pod jezdcem — jediné místo, kde
   se v přepínači propisuje strana osy. */

/* ── KARUSEL ─────────────────────────────────────────────────────
   Posouvá CSS (`scroll-snap`), ne skript. Bez JS je to funkční
   vodorovný posuv prstem; skript přidává šipky, tečky a zvětšení
   aktivní karty.

   ⚠️ Dráha je JEDEN prvek a musí zůstat v jednom bloku. Kdyby ji
      předěl rozdělil, vznikly by dva nezávislé posuvy vedle sebe. */
.ftp-kar { position:relative; margin:var(--ftz-5) 0 }
/* ⚠️ Zarážka je `start`, ne `center`. Při `center` se karta
   širší než půlka dráhy nikdy nedostane doprostřed, takže na
   PRVNÍ kartu nešlo přepnout a první tečka se nikdy nerozsvítila
   — změřeno: v klidu byla aktivní karta č. 2. */
/* ⚠️ POSUVNÍK JE SCHOVANÝ, POSOUVÁNÍ NE. Šedá lišta pod kartami
   byla jediný prvek karuselu, který vypadal jako součást
   prohlížeče, ne stránky. Polohu ukazují tečky a počítadlo,
   ovládání šipky, prst a šipky na klávesnici — dráha má
   `tabindex="0"` a vlastní obsluhu kláves. Nic se neztrácí, jen
   zmizela lišta.

   S ní se dole uvolnilo 32 px, které tam byly jen kvůli ní. */
.ftp-kar-drah { display:flex; gap:var(--ftz-4);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-left:var(--ftz-1);
  padding:var(--ftz-4) var(--ftz-1) var(--ftz-4);
  scrollbar-width:none }
.ftp-kar-drah:focus-visible { outline:none; border-radius:var(--ftz-r-k);
  box-shadow:var(--ftz-prsten) }
.ftp-kar-drah::-webkit-scrollbar { display:none }
/* Obtočení z konce na začátek. Je to skok, ne jízda přes všechny
   karty — ta by trvala vteřiny a vypadala jako závada. Krátké
   probliknutí řekne, že se něco stalo. */
.ftp-kar-drah--skok { animation:ftp-obtoc 260ms var(--ftz-krivka) }
@keyframes ftp-obtoc {
  0% { opacity:.25 }
  100% { opacity:1 } }
.ftp-kar-drah > [hidden] { display:none }

.ftp-kar-ovl { display:flex; align-items:center; gap:var(--ftz-4);
  justify-content:center }
.ftp:not(.ftp--js) .ftp-kar-ovl { display:none }
.ftp-kar-s { display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; font-size:20px; color:var(--ftz-graphite);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-p); cursor:pointer; box-shadow:var(--ftz-e1);
  transition:box-shadow var(--ftz-cas) var(--ftz-krivka),
             border-color var(--ftz-cas) var(--ftz-krivka),
             opacity var(--ftz-cas) var(--ftz-krivka) }
.ftp-kar-s:hover { border-color:#CFC6B8; box-shadow:var(--ftz-e2) }
.ftp-kar-s:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }
.ftp-kar-s[disabled] { opacity:.32; cursor:default; box-shadow:none }
.ftp-kar-tecky { display:flex; gap:6px; align-items:center }
.ftp-kar-tecky b { display:block; width:6px; height:6px; border-radius:50%;
  background:var(--ftz-rule);
  transition:width var(--ftz-cas) var(--ftz-krivka),
             background var(--ftz-cas) var(--ftz-krivka) }
.ftp-kar-tecky b.je { width:22px; border-radius:var(--ftz-r-p);
  background:var(--ftz-graphite) }
/* Počítadlo „3 / 6". Na mobilu místo teček: šest teček o šesti
   pixelech je na dotyk k nepoznání, číslo se přečte hned.
   Na desktopu vedou tečky, protože ukazují i polohu. */
.ftp-kar-poc { font-family:var(--ftz-data); font-size:13px;
  color:var(--ftz-stone); font-variant-numeric:tabular-nums;
  min-width:4.5em; text-align:center }
@media (min-width:560px) { .ftp-kar-poc { display:none } }
@media (max-width:559px) { .ftp-kar-tecky { display:none } }

/* ── KARTA STUDIE ────────────────────────────────────────────────
   Zavřená karta ukazuje jen číslo, titulek, značky a CTA. Všechno
   ostatní je v detailu. Dvanáct otevřených karet je devět
   obrazovek textu a zákazník odejde dřív, než dojde ke zboží. */
/* ⚠️ JEDEN TVAR KARTY NA CELÉ STRÁNCE. Karta v karuselu, karta
   v mřížce „Další ověřená zjištění" i karta v „Proč to vůbec
   řešit?" dnes stojí stejně: obsah na střed, pól na horní hraně,
   patička přilepená dolů. Tři různé tvary pro tři mřížky vypadaly
   jako tři různé weby pod sebou. */
.ftp-k { position:relative; display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap:var(--ftz-3); flex:0 0 auto; width:min(86vw,340px); min-width:0;
  scroll-snap-align:start; padding:var(--ftz-5);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-top:3px solid var(--ftz-rule);
  border-radius:var(--ftz-r-v); box-shadow:var(--ftz-e1);
  transition:box-shadow var(--ftz-cas-p) var(--ftz-krivka),
             border-color var(--ftz-cas-p) var(--ftz-krivka),
             transform var(--ftz-cas-p) var(--ftz-krivka) }
/* Aktivní karta je větší, ostatní ustoupí. Dělá to skript —
   bez něj jsou si karty rovné, což je taky v pořádku. */
.ftp--js .ftp-kar-drah .ftp-k { transform:scale(.94); opacity:.62 }
.ftp--js .ftp-kar-drah .ftp-k.je { transform:scale(1); opacity:1;
  box-shadow:var(--ftz-e3) }
.ftp-k:hover { border-color:#CFC6B8 }
/* ⚠️ POLOVINA OSY ZMIZELA Z KARTY, A TO ZÁMĚRNĚ. V hlavičce stálo
   „Chlazení" nebo „Vyhřívání" a k tomu barevná tečka — jenže filtr
   nad kartami se ptá „Horko, nebo zima?". Čtenář tak na jedné
   obrazovce dostával dvě různá slovní zásoby na tutéž věc: filtruje
   podle PROBLÉMU, karta odpovídá ZBOŽÍM. Mezi „horko" a „chlazení"
   si ten překlad musí udělat sám a chvíli váhá, jestli jde
   o totéž.

   Nic se neztratilo: o které straně osy studie mluví, říká rovnou
   titulek („V horku…", „Chlad bere…"), a v detailu je kategorie
   vypsaná slovem dál. Na kartě zůstává pólová barva na horní hraně
   — jako ozdoba, ne jako jediný nosič informace.

   Hlavička je dnes jeden štítek typu důkazu, vystředěný. */
.ftp-k-h { display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:var(--ftz-2); min-width:0 }
.ftp-k[data-smer="chlad"] { border-top-color:var(--ftz-cold) }
.ftp-k[data-smer="teplo"] { border-top-color:var(--ftz-warm) }
/* Fajfka ze dvou hran otočeného obdélníku. Znak ✓ se nepoužívá:
   projekt už jednou najel na to, že U+2715 v IBM Plex Mono není
   a vykreslil se prázdný čtvereček. Nakreslený tvar je vždycky. */
.ftp-zn--ok::before { content:""; width:9px; height:5px; flex:0 0 auto;
  margin-top:-3px; border-left:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor; transform:rotate(-45deg) }
/* Číslo. Největší prvek na kartě, protože je to jediné, co si
   zákazník odnese. Mono kvůli tabulárním číslicím — v proporcionálním
   řezu má „1“ jinou šířku než „8“ a čísla by se kývala. */
/* Číslo už nevede kartu, tak nesmí vést ani velikostí. Pořád je
   to největší mono údaj na kartě — jen se nečte dřív než nadpis. */
.ftp-k-c { font-family:var(--ftz-data); font-weight:500;
  font-size:clamp(26px,5.2vw,32px); line-height:1; letter-spacing:-.04em;
  color:var(--ftz-graphite); font-variant-numeric:tabular-nums;
  text-wrap:balance }
.ftp-k-t { font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 36; font-size:20px; line-height:1.2;
  letter-spacing:-.008em; color:var(--ftz-graphite); margin:0;
  text-wrap:pretty }
.ftp-k-p { margin:0; font-size:14px; line-height:1.5;
  color:var(--ftz-stone); text-wrap:pretty }
/* Kategorie slovem. Informace nesmí viset jen na barvě — a
   „Chlazení" se čte rychleji než modrý puntík, který si musíte
   přeložit. Tečka zůstává jako druhý, rychlejší signál.

   ⚠️ Tady dřív byl ukazatel „účinek velký / střední / malý" s pruhem
      na 34, 62 nebo 88 procentech. Vypadalo to jako údaj ze studie,
      ale byl to odhad s prahy zvolenými od oka. Pryč; místo něj
      nese karta TYP ZDROJE, který se dá ověřit. */

.ftp-k-z { font-family:var(--ftz-data); font-size:11px;
  color:var(--ftz-stone); letter-spacing:.02em }
/* Dvě akce: detail studie a kontextový odkaz, který u každé studie
   už dávno je v datech (pole `cta` a `cil`). Obecné „Zobrazit
   sortiment" na každé kartě by bylo slepé místo. */
.ftp-k-a { display:flex; flex-direction:column; gap:var(--ftz-2);
  width:100%; margin-top:auto }
.ftp-k-o { display:inline-flex; align-items:center; justify-content:center;
  gap:6px; min-height:47px; padding:0 var(--ftz-3); font-size:14.5px;
  font-weight:600; text-decoration:none; color:var(--ftz-warm-ink);
  border-radius:var(--ftz-r-k) }
.ftp-k-o::after { content:""; width:6px; height:6px;
  border-top:1.7px solid currentColor; border-right:1.7px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-k-o:hover { background:#F3EDE4 }
.ftp-k-o:hover::after { transform:rotate(45deg) translate(2px,-2px) }
.ftp-k-o:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }
.ftp-k-b { display:inline-flex; align-items:center; justify-content:center;
  gap:var(--ftz-2); width:100%; min-height:47px; padding:0 var(--ftz-4);
  font-family:var(--ftz-ui); font-size:15px; font-weight:600;
  color:var(--ftz-graphite); background:transparent;
  border:1px solid var(--ftz-graphite); border-radius:var(--ftz-r-k);
  cursor:pointer;
  transition:background var(--ftz-cas) var(--ftz-krivka),
             color var(--ftz-cas) var(--ftz-krivka) }
/* Šipka z rohu obdélníku. Mikrointerakce: při najetí popojede
   o 3 px. Nakreslená, ne SVG — viz hlavička karty. */
.ftp-k-b::after { content:""; width:7px; height:7px;
  border-top:1.8px solid currentColor; border-right:1.8px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-k-b:hover { background:var(--ftz-graphite); color:var(--ftz-bone) }
.ftp-k-b:hover::after { transform:rotate(45deg) translate(3px,-3px) }
.ftp-k-b:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }

/* ── ZNAČKY ──────────────────────────────────────────────────────
   Tři stavy: co je prokázané, co studie neumí, jak velký je účinek.
   Poslední dvě jsou v detailu — na kartě by se z nich stal šum. */
.ftp-zn { display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ftz-data); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 10px; border-radius:var(--ftz-r-p);
  border:1px solid var(--ftz-rule); background:#EFE9E0;
  color:var(--ftz-body); white-space:nowrap }
.ftp-zn .ftp-ikona { width:13px; height:13px }
.ftp-zn--ok { background:#EEF5F0; color:var(--ftz-ok); border-color:#CFE3D7 }
.ftp-zn--pozor { background:#FAF1E4; color:var(--ftz-pozor);
  border-color:#EBD9BE }
.ftp-zn--graf { background:#EDF3F7; color:var(--ftz-cold-ink);
  border-color:#CFE0EA }
/* Typ zdroje. Není to hodnocení kvality, je to údaj — proto
   neutrální barva, ne zelená ani červená. */
/* ⚠️ ŽÁDNÝ `nowrap`. Na rozdíl od krátkých stavových značek je
   tenhle štítek věta („Laboratorní studie · malý vzorek") a na
   320px displeji roztahoval kartu o 89 px. Změřeno. */
.ftp-zn--typ { background:var(--ftz-bone); color:var(--ftz-body);
  border-color:var(--ftz-rule); text-transform:none; letter-spacing:.02em;
  font-size:11px; white-space:normal; text-align:left }
/* Karty jsou na střed, takže i štítek v nich. */
.ftp-m .ftp-zn--typ, .ftp-k .ftp-zn--typ { text-align:center }
.ftp-zn--kat { background:#EFE9E0; color:var(--ftz-body);
  text-transform:none; letter-spacing:.02em; font-size:11px }

/* ── DALŠÍ OVĚŘENÁ ZJIŠTĚNÍ ──────────────────────────────────────
   Kompaktní mřížka pro studie, které nejsou v showroomu. Dvanáct
   dlouhých karet v jednom karuselu je nepřehledných; šest v něm
   a šest tady se projde rychleji. */
.ftp-mriz { display:grid; gap:var(--ftz-3); grid-template-columns:1fr;
  margin:var(--ftz-5) 0 }
@media (min-width:560px) { .ftp-mriz { grid-template-columns:1fr 1fr } }
@media (min-width:980px) { .ftp-mriz {
  grid-template-columns:repeat(3,1fr) } }
/* ⚠️ `[hidden]` SÁM O SOBĚ NESTAČÍ. Prohlížeč ho dělá pravidlem
   o nejnižší váze, takže vlastní `display:grid` ho přebije — mřížka
   zůstala vidět i po `m.hidden = true`. Naměřeno. Proto má každý
   prvek s vlastním `display` i svůj zápis pro `[hidden]`. */
.ftp-mriz[hidden] { display:none }
.ftp-mriz > [hidden] { display:none }
/* ⚠️ ŠTÍTEK A TLAČÍTKO V PATIČCE PŘILEPENÉ DOLŮ. Volně za sebou je
   posouval různě dlouhý titulek a v mřížce tří karet vedle sebe
   začínal každý štítek jinde. */
/* ⚠️ SYMETRIE PŘED ÚSPOROU MÍSTA. Patička (štítek + Detail) stála
   vedle sebe u krátkého štítku a pod sebou u dlouhého — v mřížce tří
   karet vedle sebe začínalo „Detail" u každé karty jinde a vypadalo
   to jako chyba sazby. Dnes je patička VŽDYCKY pod sebou a karta je
   zarovnaná na střed; všech šest karet je stejných.

   ⚠️ PÓLOVÁ BARVA SE PŘESTĚHOVALA ZLEVA NAHORU. Levý vlásek vedle
      textu na střed vypadá jako nedopatření. Pruh nahoře je tentýž
      prvek, jaký nesou karty v „Proč to vůbec řešit?" — stránka má
      pro pól jeden tvar, ne dva. */
.ftp-m { display:flex; flex-direction:column; align-items:center;
  text-align:center;
  gap:var(--ftz-2); padding:var(--ftz-5); background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-k);
  border-top:3px solid var(--ftz-rule);
  transition:box-shadow var(--ftz-cas) var(--ftz-krivka),
             border-color var(--ftz-cas) var(--ftz-krivka) }
.ftp-m:hover { border-color:#CFC6B8; box-shadow:var(--ftz-e1) }
.ftp-m:hover { border-top-color:var(--ftz-rule) }
.ftp-m[data-smer="chlad"]:hover { border-top-color:var(--ftz-cold) }
.ftp-m[data-smer="teplo"]:hover { border-top-color:var(--ftz-warm) }
.ftp-m-f { display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--ftz-3); width:100%;
  margin-top:auto; padding-top:var(--ftz-4) }
.ftp-m[data-smer="chlad"] { border-top-color:var(--ftz-cold) }
.ftp-m[data-smer="teplo"] { border-top-color:var(--ftz-warm) }
.ftp-m-c { font-family:var(--ftz-data); font-weight:500; font-size:22px;
  line-height:1; letter-spacing:-.035em; color:var(--ftz-graphite);
  font-variant-numeric:tabular-nums }
.ftp-m-t { font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 30; font-size:17px; line-height:1.25;
  color:var(--ftz-graphite); margin:0; text-wrap:pretty }
.ftp-m-b { min-height:44px; padding:0 var(--ftz-3); margin-top:auto;
  font-family:var(--ftz-ui); font-size:14.5px; font-weight:600;
  color:var(--ftz-graphite); background:transparent; border:0;
  border-bottom:1px solid var(--ftz-graphite); border-radius:0;
  cursor:pointer }
.ftp-m-b:hover { color:var(--ftz-warm-ink);
  border-bottom-color:var(--ftz-warm-ink) }
.ftp-m-b:focus-visible { outline:none; border-radius:var(--ftz-r);
  box-shadow:var(--ftz-prsten) }

/* ── DETAIL A MODÁLNÍ OKNO ───────────────────────────────────────
   ⚠️ Detail je v HTML VIDITELNÝ. Schová ho až skript třídou
      `ftp--js`. Obráceně by při chybě skriptu zmizel obsah — a to
      je tady obsah, který prodává. */
.ftp-detail { margin:var(--ftz-5) 0; padding:var(--ftz-5);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-v) }
.ftp--js .ftp-detail { display:none }
.ftp-detail-hl { display:flex; flex-wrap:wrap; gap:var(--ftz-2);
  margin-bottom:var(--ftz-4) }
.ftp-detail-typ { margin:0 0 var(--ftz-4); font-size:14.5px;
  line-height:1.55; color:var(--ftz-stone) }
/* Na čem se to měřilo. Nejdůležitější odstavec detailu hned
   za typem — bez vzorku a prostředí je číslo jen číslo. */
.ftp-detail-vzorek { margin:0 0 var(--ftz-5); padding:var(--ftz-4);
  background:#F3EDE4; border-radius:var(--ftz-r-k); font-size:14.5px;
  line-height:1.55 }
.ftp-detail-vzorek b { display:block; font-family:var(--ftz-data);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ftz-stone); margin-bottom:var(--ftz-2) }

.ftp-modal { position:fixed; inset:0; z-index:9000; display:flex;
  align-items:flex-end; justify-content:center }
@media (min-width:760px) { .ftp-modal { align-items:center;
  padding:var(--ftz-5) } }
.ftp-modal[hidden] { display:none }
.ftp-modal-pozadi { position:absolute; inset:0;
  background:rgba(20,22,25,.58);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:ftp-vstup var(--ftz-cas) var(--ftz-krivka) }
.ftp-modal-okno { position:relative; width:100%; max-width:680px;
  max-height:92vh; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--ftz-6) var(--ftz-5) var(--ftz-7);
  background:var(--ftz-paper);
  border-radius:var(--ftz-r-v) var(--ftz-r-v) 0 0;
  box-shadow:var(--ftz-e3);
  animation:ftp-zdola var(--ftz-cas-p) var(--ftz-krivka) }
@media (min-width:760px) {
  .ftp-modal-okno { border-radius:var(--ftz-r-v);
    padding:var(--ftz-7) var(--ftz-7) var(--ftz-8);
    animation-name:ftp-vstup }
}
.ftp-modal-okno:focus { outline:none }
.ftp-modal-x { position:sticky; top:0; float:right; display:flex;
  align-items:center; justify-content:center; width:40px; height:40px;
  margin:calc(var(--ftz-3) * -1) calc(var(--ftz-2) * -1) 0 0;
  font-size:18px; color:var(--ftz-graphite); background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-p);
  cursor:pointer }
.ftp-modal-x:hover { border-color:#CFC6B8 }
.ftp-modal-x:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }
.ftp-modal-t { font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 48; font-size:clamp(21px,3.4vw,28px);
  line-height:1.18; letter-spacing:-.014em; color:var(--ftz-graphite);
  margin:0 var(--ftz-6) var(--ftz-5) 0; text-wrap:balance }
.ftp-modal-telo .ftp-detail { margin:0; padding:0; background:none;
  border:0; display:block }
.ftp-modal-telo .ftm { border:0; padding:0; background:none;
  box-shadow:none }
/* ⚠️ TITULEK V OKNĚ JEN JEDNOU. Hlavička okna nese tentýž text jako
   karta uvnitř detailu — ověřeno měřením u všech dvanácti, shoduje
   se do znaku. Bez tohohle stojí táž věta v okně dvakrát, pět řádků
   po sobě, a vypadá to jako chyba vykreslení. */
.ftp-modal-telo .ftm-titulek { display:none }
@keyframes ftp-vstup { from { opacity:0 } to { opacity:1 } }
@keyframes ftp-zdola {
  from { opacity:0; transform:translateY(18px) }
  to { opacity:1; transform:none } }

/* ══════════════════════════════════════════════════════════════
   TITULKA · PRÉMIOVÉ DOLADĚNÍ
   ══════════════════════════════════════════════════════════════
   Všechno níž je NAMĚŘENÉ, ne dojem. Co se na titulce našlo:

   · **Hero nedominoval.** 648 px, tedy MÍŇ než sekce „Pár stupňů"
     (672 px), a `h1`/`h2` bylo 64/40 = 1,6. Na titulce musí být
     hlavní nadpis nezpochybnitelně největší věc na stránce; když
     je poměr plochý, čte se stránka jako seznam odstavců.

   · **Perex hera byl menší než perexy sekcí** — 19 px proti 20 px.
     Obrácená hierarchie: to první, co člověk po nadpisu přečte,
     bylo drobnější než text uprostřed stránky.

   · **Dvě skoro stejná velká čísla** — 42 px v heru, 40 px
     u důvodů. Rozdíl 2 px nečte nikdo jako záměr, čte se jako
     nepořádek.

   · **Karta „Co Vám neslíbíme" neměla stín ani přechod**, jako
     jediná skupina karet na stránce. Nehybná karta vedle tří
     pohyblivých vypadá jako nedodělek.

   · **Nástup měly 2 sekce z 9.**

   · **Panel a tmavá deska měly 64 px svisle, ale jen 32 vodorovně**
     na ploše široké 932 px. Text se táhl přes celou šířku.

   ⚠️ VŠECHNO JE POD `--tit`. Hero na podstránce a hero na titulce
      nemají stejnou práci a Studie ani Kalkulačka se tím nesmějí
      pohnout — jsou odměřené a odsouhlasené. */

/* ── rytmus ──────────────────────────────────────────────────────
   96 px mezi sekcemi je na podstránku dost, na titulku málo.
   Vzdušnost je jediná věc, která dělá prémiový dojem zadarmo. */
@media (min-width:760px) {
  .ftp-sekce--tit { margin:128px 0 }
}

/* ── hero ────────────────────────────────────────────────────────
   ⚠️ VE VERZI 28 SE HERO ZVĚTŠILO NA 948 px, VE VERZI 33 SE ZASE
      ZMENŠILO — a obojí bylo správně, protože se mezitím změnilo,
      co je nad ním. Ve verzi 28 byly nad obsahem čtyři NEPOPSANÉ
      fotky a hero bylo jediné místo, kde se návštěvník dozvěděl,
      co obchod prodává; muselo tedy dominovat. Od verze 33 nesou
      dlaždice vypálený nápis, takže totéž sdělení stojí nad
      herem už dvakrát. Majitel to pojmenoval přesně: „moc velký
      a nevím vlastně k čemu."

   ⚠️ NENÍ TO ÚSTUP Z HIERARCHIE, JE TO PŘESUN. Dominantou první
      obrazovky je dnes pás dlaždic; hero je věta, která ho
      vysvětlí. `h1`/`h2` je 50/34 = 1,47 — na stránce, kde `h1`
      není největší věcí, je to v pořádku.

   ⚠️ NADPIS ROSTE, PEREX ROSTE, ALE ŠTÍTEK NE. Štítek je popisek
      kategorie, ne sdělení; kdyby rostl s nadpisem, soutěžil by
      s ním. */
.ftp-hero--tit { padding:var(--ftz-7) var(--ftz-5) var(--ftz-6) }
@media (min-width:760px) {
  .ftp-hero--tit { padding:var(--ftz-7) var(--ftz-6) var(--ftz-7) }
}
.ftp-hero--tit .ftp-h1 { font-size:clamp(32px,4.2vw,50px);
  line-height:1.06; letter-spacing:-.026em }
.ftp-hero--tit .ftp-lead { max-width:32em;
  font-size:clamp(16.5px,1.45vw,19px); line-height:1.6;
  color:var(--ftz-dim) }
.ftp-hero--tit .ftp-akce { margin-top:var(--ftz-7) }
.ftp-hero--tit .ftp-staty { margin-top:var(--ftz-7) }
.ftp-hero--tit .ftp-stat-c { font-size:clamp(30px,3.6vw,46px) }

/* ── nadpisy sekcí ───────────────────────────────────────────────
   Dolů, ne nahoru: hierarchie se dělá rozdílem, a ten se zvětší
   spíš ztišením druhého stupně než překřičením prvního. */
.ftp-sekce--tit .ftp-h2 { font-size:clamp(25px,3vw,34px);
  letter-spacing:-.018em }
.ftp-sekce--tit .ftp-p { font-weight:400; max-width:36em;
  margin-left:auto; margin-right:auto }
.ftp-sekce--tit .ftp-p--silny { font-weight:500 }

/* ── plochy ──────────────────────────────────────────────────────
   Vodorovné odsazení na úroveň svislého. Text přes celou šířku
   932px plochy se čte hůř a vypadá lacino. */
@media (min-width:760px) {
  .ftp-sekce--tit .ftp-panel,
  .ftp-sekce--tit .ftp-tmavy { padding:var(--ftz-8) var(--ftz-7) }
}

/* ── velká čísla ─────────────────────────────────────────────────
   Hero 46, důvody 38. Rozdíl musí být vidět na první pohled,
   jinak to nečte jako dva stupně, ale jako chybu. */
/* ⚠️ ČÍSLO JE JEDINÝ DŮVOD, PROČ TA KARTA EXISTUJE. Ve verzi 28
   se na titulce ZMENŠILO na 38 px, aby nesoutěžilo s tehdejším
   herem (76 px). Hero má dnes 50 px a dominantou je pás dlaždic,
   takže číslo může být zase největší věcí v sekci.

   ⚠️ NAŠEL JSEM TO AŽ MĚŘENÍM. Zvětšil jsem ZÁKLAD `.ftp-duv b`
   a na stránce se nic nezměnilo — tenhle zápis ho přebíjí
   specificitou. A zvětšený základ by navíc pohnul Studiemi,
   které jsou odměřené a odsouhlasené. Proto je změna tady. */
.ftp-sekce--tit .ftp-duv b { font-size:clamp(40px,5.6vw,66px);
  line-height:.98; letter-spacing:-.05em }
/* Kroužek pod číslem té velikosti soutěží; na titulce zůstává
   jen značka. Na Studiích kroužek zůstává — tam je číslo menší. */
.ftp-sekce--tit .ftp-duv-i { width:24px; height:24px;
  background:none; margin-bottom:var(--ftz-5) }

/* ── karta „Co Vám neslíbíme" ────────────────────────────────────
   Dorovnání do zbytku stránky: stín, přechod a zvednutí při
   najetí. Zvedá se jen to, na co se dá kliknout — tahle karta
   odkaz není, takže se nezvedá, jen zesílí hrana a stín. */
.ftp-poc { box-shadow:var(--ftz-e1);
  transition:box-shadow var(--ftz-cas) var(--ftz-krivka),
             border-color var(--ftz-cas) var(--ftz-krivka) }
.ftp-poc:hover { box-shadow:var(--ftz-e2);
  border-color:var(--ftz-line) }
@media (min-width:760px) {
  .ftp-poc { padding:var(--ftz-6) var(--ftz-5) }
}

/* ── závěr ───────────────────────────────────────────────────────
   Poslední obrazovka má mít stejnou váhu jako první. Na podstránce
   je závěr shrnutí, na titulce je to výzva — a ta si zaslouží
   tolik vzduchu co hero. */
@media (min-width:760px) {
  .ftp-zaver--tit { padding:var(--ftz-9) var(--ftz-6) }
}
.ftp-zaver--tit .ftp-h2 { font-size:clamp(26px,3.4vw,40px) }
.ftp-zaver--tit .ftp-p { max-width:32em; margin-left:auto;
  margin-right:auto }

/* ── otázky kalkulaček ───────────────────────────────────────────
   Čtená položka dostane vlásek v pólové barvě zleva. Je to
   jediné místo v seznamu, kde se barva objeví — a mluví se tam
   o teplotě, takže na to má nárok. */
.ftp-otazky li { transition:padding var(--ftz-cas) var(--ftz-krivka) }
.ftp-otazky li:hover { padding-left:var(--ftz-2) }

/* ── TITULKA · DVĚ BRÁNY — ODSTRANĚNO ────────────────────────────
   Sekce „Kde to u Vás pálí?" zmizela z titulky ve verzi 33 (viz
   `stranky_titulka.py`). S ní odešly `.ftp-brany`, `.ftp-brana*`,
   vlásková osa pod oběma bránami i sezónní štítek. */

/* ── TITULKA · ZBOŽÍ ZE SHOPTETU (od 30. 9. 2026) ─────────────────
   Zboží na titulce vybírá majitel v „Zboží → Titulní strana" a kreslí
   ho Shoptet: skutečné produkty s fotkou z produktu, živou cenou
   a odkazem na detail. Náš blok nese jen nadpis sekce; skript posadí
   blok 2 titulky ZA zboží (`titulka()` ve `stranky_js.py`).
   ⚠️ NADPIS JEN SE ZBOŽÍM. `ftp-tit-zbozi` přidá kořeni skript, až
      skupinu zboží najde — bez ní by nadpis visel nad ničím.
   ⚠️ SCHOVÁVÁ HO JEN `.ftp--js`. Bez skriptu zůstane vidět, takže
      „Prohlédnout sortiment" (kotva na něj) má kam skočit; skrytý
      cíl kotvy by z tlačítka udělal mrtvé kliknutí.
   ⚠️ ZNAČKA BLOKU 2 JE `<span>`, skrytý: editor Shoptetu maže
      prázdné blokové prvky, řádkové nechá. */
.ftp--js .ftp-tit-vyber { display:none }
.ftp-tit-zbozi .ftp-tit-vyber { display:block; margin-bottom:var(--ftz-5) }
.ftp-tit-dolni { display:none }
/* Blok 2 po přesunu za zboží: odstup od mřížky Shoptetu. */
.ftp-tit-za { margin-top:var(--ftz-8) }
/* ── Dvě tlačítka pod nadpisem „Vyberte si svůj komfort" ─────────
   Karta v barvě kosti s pólovým vláskem vlevo, štítkem v inkoustu
   pólu a nadpisem ve Fraunces — tatáž řeč jako dlaždice pod úvodem. */
.ftp-tit-dal { display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--ftz-3); margin:var(--ftz-5) 0 0 }
.ftp .ftp-tit-dal-o { position:relative; display:flex;
  flex-direction:column; align-items:flex-start; gap:2px;
  min-width:min(100%,236px); padding:14px 56px 15px 24px;
  text-align:left; text-decoration:none; background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-v);
  box-shadow:var(--ftz-e2); overflow:hidden;
  transition:transform var(--ftz-cas) var(--ftz-krivka),
    box-shadow var(--ftz-cas) var(--ftz-krivka) }
.ftp-tit-dal-o::before { content:""; position:absolute; left:0; top:0;
  bottom:0; width:4px; background:var(--ftz-cold) }
.ftp-tit-dal-o--chlad::before { background:var(--ftz-cold) }
.ftp-tit-dal-o--teplo::before { background:var(--ftz-warm) }
.ftp-tit-dal-o::after { content:"→"; position:absolute; right:20px;
  top:50%; margin-top:-12px; font-size:20px; line-height:24px;
  color:var(--ftz-cold-ink); transition:transform var(--ftz-cas)
    var(--ftz-krivka) }
.ftp-tit-dal-o--teplo::after { color:var(--ftz-warm-ink) }
.ftp-tit-dal-o i { font-style:normal; font-family:var(--ftz-data);
  font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ftz-cold-ink) }
.ftp-tit-dal-o--teplo i { color:var(--ftz-warm-ink) }
.ftp-tit-dal-o b { font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto; font-size:21px; line-height:1.2;
  color:var(--ftz-graphite) }
.ftp .ftp-tit-dal-o:hover { transform:translateY(-2px);
  box-shadow:var(--ftz-e3) }
.ftp-tit-dal-o:hover::after { transform:translateX(4px) }
.ftp .ftp-tit-dal-o:focus-visible { outline:none;
  box-shadow:var(--ftz-prsten) }

/* ── Jména skupin zboží v barvě pólu ─────────────────────────────
   Třídu přidá skript podle jména, které majitel skupině dal. Kapsle
   v tónu pólu, inkoust pólu a tečka — místo šedého štítku. */
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title.ftp-skup--chlad,
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title.ftp-skup--teplo,
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title.ftp-skup--psi {
  display:table; margin-left:auto; margin-right:auto;
  padding:9px 20px 9px 16px; border-radius:999px; font-size:13px;
  font-weight:600; letter-spacing:.16em }
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title.ftp-skup--chlad {
  background:#E7F0F5; color:#1F5A75 }
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title.ftp-skup--teplo {
  background:#FDF1E9; color:#B14A18 }
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title.ftp-skup--psi {
  background:#F5F2ED; color:#1C1B1A; border:1px solid #E0D9CE }
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title.ftp-skup--chlad::before,
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title.ftp-skup--teplo::before,
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title.ftp-skup--psi::before {
  content:""; display:inline-block; width:8px; height:8px;
  margin:0 10px 0 0; vertical-align:1px; border-radius:50%;
  background:#7FB3CC }
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title.ftp-skup--teplo::before {
  background:#FF8A4C }
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title.ftp-skup--psi::before {
  background:linear-gradient(90deg,#7FB3CC 50%,#FF8A4C 50%) }

/* ── TITULKA · BANNER POD ÚVODEM (od 30. 9. 2026 v noci) ────────────
   ⚠️ JEDEN BANNER V ADMINISTRACI = PÁS POD ÚVODEM. Majitel chce
      banner, který vymění sám (akce, novinky) — a jinak univerzální
      bez textu. Shoptet ho kreslí do `.banners-top` NAD obsah
      stránky. Majitel 30. 9. v noci: „když si někdo otevře web, uvidí
      první obrázek a neví, co se prodává". Skript ho proto posadí
      hned ZA náš úvod a stylopis ho ukáže JEN TAM. Na původním místě
      zůstává schovaný (`body:has(.ftp-vst) .banners-top` níž), takže
      nad úvodem neproblikne. Bez skriptu se neukáže — je to reklama,
      ne obsah; úvod a dlaždice stojí i bez ní.
   ⚠️ 1. 10. 2026 — ČTYŘI STARÉ DLAŽDICE ZŮSTÁVAJÍ. Majitel:
      „nechci mazat ty čtyři bannery, chci přidat akorát ten, co se
      má měnit". Skript proto v umístění najde ten ŠIROKÝ (poměr
      stran aspoň 2 : 1 podle `width`/`height`, které Shoptet píše do
      `<img>` — dlaždice mají 432 × 324) a přestěhuje JEN JEHO OBAL
      do `.ftp-banner` za úvod. Dlaždice zůstávají schované na svém
      místě; rozcestník pod úvodem kreslí náš blok (`.ftp-vst`).
      Je-li v umístění banner jediný, vezme se ten.
   ⚠️ `.ftp-banner`, NE `.ftp-pas` — to je pás přes celé okno.
   ⚠️ ŠÍŘE, ROHY A MEZERY JAKO DLAŽDICE POD NÍM (`.ftp-vst`), aby pás
      seděl do sloupce. Úvod je přes celou šířku okna, dlaždice ne.
   ⚠️ POMĚR BERE OBRÁZEK, NEOŘEZÁVÁ SE. Doporučení je 2000 × 500 px
      (4 : 1); text v obrázku se tak nikdy neusekne. */
.ftp-banner { margin:var(--ftz-5) 0 0 }
.ftp-uvod:has(+ .ftp-banner) { margin-bottom:0 }
.ftp-banner + .ftp-vst { margin-top:var(--ftz-5) }
.ftp-banner .banner-wrapper { margin:0 }
.ftp-banner a { display:block; overflow:hidden;
  border-radius:var(--ftz-r-k); background:var(--ftz-slate) }
.ftp-banner a:focus-visible { outline:none;
  box-shadow:var(--ftz-prsten) }
.ftp-banner img { display:block; width:100%; height:auto }
.ftp-banner .extended-banner-texts { display:none }
/* Jméno skupiny zboží (Shoptet: `.homepage-group-title`) jako štítek
   pod naším nadpisem — kapitálky v monu na střed. Jméno píše majitel
   v administraci. ⚠️ Doslovné hodnoty: mimo `.ftp` proměnné
   `--ftz-*` neplatí. Dvojitá třída přebíjí Waltz
   (`.type-index .content-wrapper .h4`, specificita 0,3,0). */
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title {
  margin:6px 0 20px; padding:0; border:0; text-align:center;
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:12.5px; font-weight:500; line-height:1.4;
  letter-spacing:.16em; text-transform:uppercase; color:#544D46 }
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title::before,
body:has(.ftp-tit-zbozi) .homepage-group-title.homepage-group-title::after {
  content:none; display:none }
/* Druhá skupina (třeba „Vyhřívání" pod „Chlazení") odsazená jako
   nový odstavec, ne nalepená na mřížku nad sebou. */
body:has(.ftp-tit-zbozi) .products + .homepage-group-title.homepage-group-title {
  margin-top:48px }

/* ── TITULKA · LETÁK — když běží akce ────────────────────────────
   Samostatný blok, který majitel vloží na začátek titulní strany
   (nebo mezi blok 1 a 2, tedy nad výběr zboží) a po akci smaže.
   Tři šablony jsou v návodu: sleva, slevový kód, oznámení.
   ⚠️ TMAVÁ DESKA ZNAČKY S OSOU, jako úvod stránek: akce je sdělení,
      ne zboží. Teplá je jen hlavní tlačítko (`.ftp-cta`).
   ⚠️ ŽÁDNÝ VYMYŠLENÝ TLAK. Šablony nemají odpočet ani „posledních
      pár kusů"; platnost akce píše majitel do štítku.
   ⚠️ LETÁK NESMÍ ODSUNOUT TITULKU POD OKRAJ. První verze měla se
      slevovým kódem 356 px a dlaždice pod úvodem spadly z první
      obrazovky. Kód proto stojí VEDLE tlačítka (mřížka 1fr auto auto
      1fr; ostatní řádky přes celou šířku) a pod sebe jdou až na
      úzkém displeji, kde by se vedle sebe nevešly. */
.ftp-letak { position:relative; overflow:hidden; display:grid;
  grid-template-columns:1fr auto auto 1fr; gap:var(--ftz-2) var(--ftz-3);
  align-items:center; justify-items:center; margin:0 0 var(--ftz-7);
  padding:clamp(22px,3vw,32px) clamp(20px,4vw,44px) clamp(24px,3.2vw,34px);
  text-align:center; color:var(--ftz-paper);
  background:
    radial-gradient(90% 140% at 0% 100%,rgba(127,179,204,.16),transparent 60%),
    radial-gradient(90% 140% at 100% 0%,rgba(255,138,76,.13),transparent 60%),
    linear-gradient(158deg,#23282D 0%,#1C2024 62%);
  border-radius:var(--ftz-r-v); box-shadow:var(--ftz-e2) }
.ftp-letak::after { content:""; position:absolute; left:0; right:0;
  bottom:0; height:3px; background:var(--ftz-osa) }
.ftp-letak > * { grid-column:1 / -1 }
.ftp-letak-s { margin:0; font-family:var(--ftz-data); font-size:12px;
  font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ftz-ember) }
.ftp-letak-t { margin:0; max-width:24ch; font-family:var(--ftz-di);
  font-weight:400; font-optical-sizing:auto;
  font-size:clamp(24px,3vw,34px); line-height:1.12;
  letter-spacing:-.02em; color:var(--ftz-bone); text-wrap:balance }
.ftp-letak-p { margin:0; max-width:60ch; font-size:15px;
  line-height:1.55; color:var(--ftz-dim); text-wrap:pretty }
/* Slevový kód: přerušovaný rámeček jako vystřižený kupón. Se skriptem
   se dá kliknout a zkopíruje se. Stojí vlevo od tlačítka.
   ⚠️ DLOUHÝ KÓD SE ZALAMUJE (`overflow-wrap:anywhere`). Kód píše
      majitel a na 375 px by dvanáct znaků s potvrzením vytlačilo
      rámeček z desky — naměřeno 347 px v desce o 303 px. */
.ftp-letak-kod { grid-column:2; justify-self:end; position:relative;
  display:inline-flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:4px 12px; max-width:100%;
  margin:var(--ftz-2) 0 0; padding:10px 18px;
  border:1.5px dashed rgba(240,168,104,.75); border-radius:var(--ftz-r-k);
  background:rgba(255,252,248,.04) }
.ftp-letak-kod span { font-family:var(--ftz-data); font-size:11px;
  font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ftz-dim) }
.ftp-letak-kod b { font-family:var(--ftz-data); font-size:20px;
  font-weight:500; letter-spacing:.12em; color:var(--ftz-bone);
  overflow-wrap:anywhere }
.ftp-letak-kod[role="button"] { cursor:pointer }
.ftp-letak-kod[role="button"]:focus-visible { outline:none;
  box-shadow:var(--ftz-prsten) }
/* Potvrzení PŘEKRYJE obsah rámečku, nepřidá mu šířku. */
.ftp-letak-kod[data-hotovo] > * { visibility:hidden }
.ftp-letak-kod[data-hotovo]::after { content:"Zkopírováno";
  position:absolute; top:0; right:0; bottom:0; left:0; display:flex;
  align-items:center; justify-content:center;
  font-family:var(--ftz-data); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ftz-ember) }
.ftp-letak .ftp-cta { margin-top:var(--ftz-2) }
.ftp-letak-kod + .ftp-cta { grid-column:3; justify-self:start }
@media (max-width:540px) {
  .ftp-letak-kod, .ftp-letak-kod + .ftp-cta { grid-column:1 / -1;
    justify-self:center }
}

/* ── TITULKA · ZBOŽÍ ─────────────────────────────────────────────
   ⚠️ TADY PÓLOVÁ BARVA SMÍ. Chladicí a vyhřívané zboží mluví
      přímo o změně teploty — je to jediné místo v sekci, kde se
      barva objeví, a nese ji vlásek na horní hraně, stejně jako
      na kartě studie. Ne text, ne plocha.

   ⚠️ ŽÁDNÁ CENA. Blok je statické HTML; cena by při první změně
      katalogu začala lhát. Od živých cen je nativní blok
      Shoptetu.

   ⚠️ FOTKA MÁ PEVNÝ POMĚR A ROZMĚR V ZÁPISU. Zdroje jsou 4 : 3
      a zmenšené na 600 px, tedy dvojnásobek zobrazení — jinak by
      byly na jemném displeji rozmazané. `aspect-ratio` drží místo
      ještě před načtením, takže mřížka po dotažení fotek
      nepoposkočí. */
.ftp-zbozi-m { display:grid; gap:var(--ftz-4);
  grid-template-columns:1fr; margin:var(--ftz-6) 0 0;
  text-align:left }
@media (min-width:680px) {
  .ftp-zbozi-m { grid-template-columns:repeat(3,1fr) }
}
.ftp-zk { display:flex; flex-direction:column; text-decoration:none;
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-top:3px solid var(--ftz-line);
  border-radius:0 0 var(--ftz-r-v) var(--ftz-r-v); overflow:hidden;
  color:var(--ftz-graphite); box-shadow:var(--ftz-e1);
  transition:transform var(--ftz-cas) var(--ftz-krivka),
             box-shadow var(--ftz-cas) var(--ftz-krivka) }
.ftp-zk--chlad { border-top-color:var(--ftz-cold) }
.ftp-zk--teplo { border-top-color:var(--ftz-warm) }
.ftp-zk:hover { transform:translateY(-2px); box-shadow:var(--ftz-e2) }
.ftp-zk:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }
.ftp-zk-f { position:relative; display:block; aspect-ratio:4 / 3;
  overflow:hidden; background:var(--ftz-paper) }
.ftp-zk-f img { display:block; width:100%; height:100%;
  object-fit:cover;
  transition:transform 420ms var(--ftz-krivka) }
.ftp-zk:hover .ftp-zk-f img { transform:scale(1.03) }
/* ⚠️ ŠTÍTEK NESE DOLOŽITELNOU VLASTNOST, NE PRODEJNOST. „Doložený
      účinek" a „Nejvyšší odvod tepla" mají oporu v tabulce zdrojů;
      „Nejprodávanější" by bylo tvrzení o objemu prodeje v obchodě
      bez jediného prodeje. Hlídá to kontrola nad katalogem. */
.ftp-zk-s { position:absolute; top:var(--ftz-3); left:var(--ftz-3);
  z-index:1; font-family:var(--ftz-data); font-size:10.5px;
  font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:.3em .6em; border-radius:var(--ftz-r);
  background:var(--ftz-slate); color:var(--ftz-paper) }
.ftp-zk-t { display:flex; flex-direction:column; gap:var(--ftz-2);
  padding:var(--ftz-4) }
.ftp-zk-t b { font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto; font-variation-settings:'opsz' 36;
  font-size:17.5px; line-height:1.25; letter-spacing:-.01em;
  color:var(--ftz-graphite) }
.ftp-zk-p { font-size:14.5px; line-height:1.6; color:var(--ftz-body) }
/* ⚠️ DOSTUPNOST TU BYLA A JE PRYČ — ROZHODNUTÍ MAJITELE
      (verze 34). Skladová situace se mění a grafika se kvůli ní
      nemá předělávat. Na jejím místě je výzva; drží spodní hranu
      karty stejně jako předtím údaj, takže se řady nerozjedou. */
.ftp-zk-v { margin-top:auto; padding-top:var(--ftz-3);
  border-top:1px solid var(--ftz-rule);
  display:inline-flex; align-items:center; gap:var(--ftz-2);
  font-family:var(--ftz-ui); font-size:13.5px; font-weight:600;
  color:var(--ftz-warm-ink) }
.ftp-zk-v::after { content:"→";
  transition:transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-zk:hover .ftp-zk-v::after { transform:translateX(3px) }

/* Poznámka o skladu pod sortimentem — drobná schválně, je to
   upřesnění, ne slib. */
.ftp-p--drobne { font-size:14.5px; line-height:1.65;
  color:var(--ftz-stone); margin-top:var(--ftz-5) }
.ftp-p--drobne b { color:var(--ftz-body) }

/* ── TITULKA · PRO PROVOZY ───────────────────────────────────────
   ⚠️ FOTKA A TEXT VEDLE SEBE, NE POD SEBOU. Sekce mluví o celém
      provozu; hala vedle textu dá tomu tvrzení měřítko lépe než
      tři ikony v řadě, které tu byly do verze 32.

   ⚠️ NA FOTCE NESTOJÍ ANI PÍSMENO. Text je vedle ní na papíře,
      takže se kontrast nemusí hádat. Je to totéž pravidlo jako
      u hera prototypu, kde nadpis nad světlým pólem vyšel
      2,03 : 1.

   ⚠️ ČÍSLOVANÝ SEZNAM, PROTOŽE JE TO POŘADÍ. Napsat → vybereme →
      pošleme. Kdyby to pořadí nebylo, byly by to odrážky. */
.ftp-pv { display:grid; gap:0; grid-template-columns:1fr;
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-v); overflow:hidden;
  box-shadow:var(--ftz-e1); text-align:left }
@media (min-width:760px) {
  .ftp-pv { grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    align-items:stretch }
}
.ftp-pv-f { display:block; position:relative; overflow:hidden;
  background:var(--ftz-paper); aspect-ratio:4 / 3 }
@media (min-width:760px) { .ftp-pv-f { aspect-ratio:auto } }
.ftp-pv-f img { display:block; width:100%; height:100%;
  object-fit:cover; object-position:center }
.ftp-pv-t { display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--ftz-4); padding:var(--ftz-6) var(--ftz-5) }
@media (min-width:760px) {
  .ftp-pv-t { padding:var(--ftz-7) var(--ftz-7) var(--ftz-7)
    var(--ftz-6); justify-content:center }
}
.ftp-pv-t .ftp-h2 { text-align:left }
/* Osa pod nadpisem je na středových sekcích; tady by visela
   nad textem zarovnaným vlevo a četla by se jako škrt. */
.ftp-pv-t .ftp-h2::after { display:none }
.ftp-pv-s { display:flex; flex-direction:column; gap:var(--ftz-4);
  margin:0; padding:0; list-style:none; counter-reset:ftp-pv }
.ftp-pv-s li { counter-increment:ftp-pv; display:grid;
  grid-template-columns:auto 1fr; gap:.1rem var(--ftz-4) }
.ftp-pv-s li::before { content:counter(ftp-pv,decimal-leading-zero);
  grid-row:1 / span 2; font-family:var(--ftz-data); font-size:12px;
  font-weight:500; color:var(--ftz-stone); padding-top:.3em }
.ftp-pv-s b { font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto; font-variation-settings:'opsz' 36;
  font-size:18px; line-height:1.3; letter-spacing:-.01em;
  color:var(--ftz-graphite) }
.ftp-pv-s span { font-size:14.5px; line-height:1.6;
  color:var(--ftz-body) }

/* ══════════════════════════════════════════════════════════════
   DLAŽDICE A PRUH VÝHOD SHOPTETU
   ══════════════════════════════════════════════════════════════
   ⚠️ TOHLE NEJSOU NAŠE PRVKY. Vykresluje je šablona Waltz a obsah
      se jim plní v administraci. Proto všechno níž stojí pod
      `body:has(.ftp)` — bez našeho bloku se nic z toho neuplatní
      a obchod vypadá přesně jako dnes.

   ⚠️ ZŮSTÁVAJÍ PŘES CELOU ŠÍŘKU. Nabízelo se zarovnat je na
      obsahový sloupec (932 px) a spravit tím nález „stránka má tři
      šířky". Neděje se to: široký obrazový pás nad úzkým čtecím
      sloupcem je záměr, ne nepořádek — je to týž rytmus jako pruh
      se záhlavím nad ním. Zúžit by znamenalo zmenšit jediné fotky
      na první obrazovce.

   ⚠️ CO STYLOPIS NEOPRAVÍ: tři mrtvé odkazy. Adresy jsou vyplněné
      v administraci (`/chladici-vybaveni`, `/vyhrivane-vybaveni`,
      `/psi`) a správné jsou `/chlazeni/`, `/vyhrivani/`,
      `/pro-psy/`. **Čím líp dlaždice vypadají, tím dráž ta chyba
      stojí.** */

/* ── dlaždice ────────────────────────────────────────────────────
   ⚠️ TEXT JE OD VERZE 33 VYPÁLENÝ V OBRÁZKU, ne v HTML. Důvod je
      v `stranky_dlazdice.py`: popisek v HTML se ukáže jedině tam,
      kde je na stránce náš blok, takže na kategorii a na produktu
      by dlaždice zůstaly němé. Stylopis proto NEPŘIDÁVÁ ani
      zástin, ani nápis, ani pólový vlásek — všechno tři je
      v obrázku a druhá vrstva by stála přes první.

   ⚠️ POLE POPISKU V ADMINISTRACI SE NECHÁ PRÁZDNÉ. Kdyby se
      vyplnilo, stál by nápis na dlaždici dvakrát. Zápis níž ho
      pro jistotu skryje — rozhoduje obrázek.

   ⚠️ SPÁRA JE VLÁSKOVÁ, NE 24 px. Čtyři karty s velkou mezerou se
      čtou jako čtyři nabídky; vlásková spára z nich udělá JEDEN
      prvek — rozcestník. Šířka spáry je v `stranky_dlazdice.SPARA`,
      protože se z ní počítají zlomy sloupců.

   ⚠️ POMĚR SE BERE Z GENERÁTORU DLAŽDIC, takže `cover` nic
      neořezává. Kdyby se poměry rozešly, ořízl by se vypálený
      nápis — a to je přesně ta vada, kterou u textu v obrázku
      nikdo nečeká. Stalo se to: natvrdo psaných 16 : 9 proti
      slotu 4 : 3 bralo 31 px zdola, přes jméno kategorie.
      `cover` tu zůstává jako pojistka pro případ, že by majitel
      nahrál v administraci obrázek jiného poměru — tehdy je
      ořez menší zlo než rozházená řada. */
body:has(.ftp) .banners-top { display:grid; gap:2px;
  grid-template-columns:1fr; background:var(--ftz-slate) }
@media (min-width:599px) {
  body:has(.ftp) .banners-top { grid-template-columns:repeat(2,1fr) }
}
@media (min-width:1200px) {
  body:has(.ftp) .banners-top { grid-template-columns:repeat(4,1fr) }
}
body:has(.ftp) .banners-top .banner-wrapper { min-width:0; margin:0 }
body:has(.ftp) .banners-top a { position:relative; display:block;
  overflow:hidden; background:var(--ftz-slate); text-decoration:none }
body:has(.ftp) .banners-top img { display:block; width:100%;
  height:auto; aspect-ratio:864 / 648; object-fit:cover;
  transition:transform 420ms var(--ftz-krivka) }
body:has(.ftp) .banners-top a:hover img { transform:scale(1.04) }
body:has(.ftp) .banners-top a:focus-visible { outline:none;
  box-shadow:inset var(--ftz-prsten) }
body:has(.ftp) .banners-top .extended-banner-texts { display:none }

/* ⚠️ NA MOBILU ZABÍRALY DLAŽDICE 1 131 px Z 2 085 px CESTY KE ZBOŽÍ
      — tedy 54 %. Čtyři kusy pod sebou v poměru 4 : 3 mají při
      šířce 355 px po 266 px. Jeden sloupec je přitom ZÁMĚR: text je
      v obrázku vypálený a při dvou sloupcích na 375 px měl popisek
      7 px. Zůstává tedy jeden sloupec, jen nižší.

   ⚠️ OŘEZÁVÁ SE SHORA, PROTOŽE TEXT JE DOLE. Sazba dlaždice ho
      kotví ke spodní hraně (`y_nad = VYSKA − okraj − výška`), takže
      shora je nad ním jen obraz. Změřeno: text zabírá spodních
      31,3 % výšky, ořez ponechává 66 % — dvojnásobná rezerva.

   ⚠️ POMĚR SE POČÍTÁ Z TÉ SAZBY, ne z oka. Kdyby se text v dlaždici
      posunul výš, `pomer_uzky()` se posune s ním. Dvě čísla, která
      MUSÍ souhlasit, nesmí stát na dvou místech — projekt na tom
      jednou najel u poměru 16 : 9 proti slotu 4 : 3 a ořez tehdy
      vzal 31 px přes jméno kategorie.

   ⚠️ `object-position` SE MUSÍ NASTAVIT SPOLU S POMĚREM. Bez něj
      `cover` ořízne symetricky shora i zdola a spodní řádek nápisu
      zmizí. */
@media (max-width:598px) {
  body:has(.ftp) .banners-top img {
    aspect-ratio:1.935;
    object-position:bottom }
}

/* ── pruh výhod ──────────────────────────────────────────────────
   ⚠️ BYLY TO IKONY 75 px S POPISKEM VEDLE A JEDEN Z POPISKŮ SE
      LÁMAL NA DVA ŘÁDKY — položky pak neseděly na účaří (40 px
      proti 20). Dnes je to mřížka se čtyřmi stejnými sloupci,
      ikona nad textem a vlásková dělítka mezi sloupci.

   ⚠️ IKONA SE ZMENŠILA NA 34 px, PROTOŽE NENÍ SDĚLENÍ. Sdělení je
      text; ikona je záložka, podle které oko v pruhu skáče. */
body:has(.ftp) .benefitBanner { display:grid; gap:1px;
  grid-template-columns:repeat(2,1fr);
  width:min(932px,100% - 2 * var(--ftz-4));
  margin:var(--ftz-5) auto var(--ftz-4);
  background:var(--ftz-rule);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-v);
  overflow:hidden }
@media (min-width:760px) {
  body:has(.ftp) .benefitBanner { grid-template-columns:repeat(4,1fr) }
}
/* ⚠️ IKONA DOSTALA PLOCHU, ABY PRUH NEBYL ŘADA DROBKŮ. Ve verzi
      31 se zmenšila na 34 px bez pozadí a pruh tím zešedl —
      čtyři malé značky a čtyři popisky splynuly s papírem.
      Kroužek v barvě papíru na kostěném podkladu drží každou
      položku pohromadě, aniž by přidal barvu navíc. */
/* ⚠️ PRUH VÝHOD SE ZMENŠIL Z 182 NA ~110 px. Zabíral druhou
      obrazovku nad zbožím a přitom nic neprodává — je to podpis
      pod nabídku, ne nabídka. Sloupec s ikonou NAD textem je na
      to zbytečně vysoký; ikona vedle textu drží tutéž informaci
      v půlce výšky. Číslo není odhad: v obchodě, kterým se
      majitel inspiroval (mycoolingstore.com), má týž pruh 110 px
      a stojí na témž místě — hned pod herem. */
body:has(.ftp) .benefitBanner__item { display:flex;
  flex-direction:row; align-items:center; gap:var(--ftz-3);
  margin:0; padding:var(--ftz-5) var(--ftz-4);
  background:var(--ftz-bone); text-align:left;
  transition:background var(--ftz-cas) var(--ftz-krivka) }
body:has(.ftp) .benefitBanner__item:hover { background:var(--ftz-paper) }
body:has(.ftp) .benefitBanner__picture { flex:0 0 auto; width:38px;
  height:38px; margin:0; display:flex; align-items:center;
  justify-content:center; border-radius:50%;
  background:var(--ftz-paper); border:1px solid var(--ftz-rule) }
body:has(.ftp) .benefitBanner__img { width:20px; height:20px;
  object-fit:contain }
body:has(.ftp) .benefitBanner__content { margin:0; text-align:left }
body:has(.ftp) .benefitBanner__data { font-family:var(--ftz-di);
  font-weight:400; font-optical-sizing:auto;
  font-variation-settings:'opsz' 30; font-size:14.5px;
  line-height:1.3; letter-spacing:-.01em;
  color:var(--ftz-graphite); max-width:none; margin:0 }



/* ══════════════════════════════════════════════════════════════════
   TITULKA · RYCHLÉ VSTUPY DO NABÍDKY
   ⚠️ SHOPTETOVY DLAŽDICE A PRUH VÝHOD SE SKRÝVAJÍ. Vykresluje je
      NAD obsahem stránky, takže s nimi nešlo poskládat pořadí, které
      majitel zadal (hero → vstupy → výhody). Náš blok se nad ně
      dostat nemůže.

   ⚠️ SKRÝVÁ SE JEN TAM, KDE STOJÍ NÁHRADA. Podmínka je
      `body:has(.ftp-vst)`, ne třída stránky od Shoptetu: kdyby se
      blok jednou nevložil, zůstanou původní dlaždice a stránka není
      prázdná. Na názvy tříd šablony se tím taky nespoléhá.
   ══════════════════════════════════════════════════════════════════ */
body:has(.ftp-vst) .banners-top,
body:has(.ftp-vst) .benefitBanner { display:none !important }

/* ⚠️ MŘÍŽKA JE 2 × 2 UŽ NA MOBILU. Dřív to nešlo: text byl vypálený
   v obrázku, takže se zmenšoval s dlaždicí a při dvou sloupcích na
   375 px měl 7 px. V HTML se nezmenšuje. */
.ftp-vst { display:grid; gap:var(--ftz-3);
  grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:760px) {
  .ftp-vst { grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--ftz-4) }
}
.ftp-vst-k { position:relative; display:block; overflow:hidden;
  border-radius:var(--ftz-r-k); background:var(--ftz-slate);
  text-decoration:none; color:var(--ftz-paper);
  transition:transform var(--ftz-cas) var(--ftz-krivka),
             box-shadow var(--ftz-cas) var(--ftz-krivka) }
.ftp-vst-k img { display:block; width:100%; height:auto;
  aspect-ratio:4 / 3; object-fit:cover;
  transition:transform 420ms var(--ftz-krivka) }
/* ⚠️ CLONA JE PLNÁ TAM, KDE LEŽÍ TEXT, a teprve nad ním mizí.
   Krytí si nese každá dlaždice v atributu `style` a je změřené na
   JEJÍ fotce — viz `kryti_pasma()` v generátoru. Hranice 52 % musí
   souhlasit s `VSTUP_PASMO`, proti kterému se měřilo. */
.ftp-vst-k::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--ftz-clona) 0,
    var(--ftz-clona) 52%, transparent 100%) }
.ftp-vst-t { position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; flex-direction:column; gap:2px;
  padding:var(--ftz-3) var(--ftz-4) }
@media (min-width:760px) {
  .ftp-vst-t { padding:var(--ftz-4) }
}
.ftp-vst-p { font-family:var(--ftz-data); font-size:10.5px;
  line-height:1.3; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ftz-ember) }
.ftp-vst-t b { font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto; font-variation-settings:'opsz' 36;
  font-size:clamp(17px,2.2vw,23px); line-height:1.1;
  letter-spacing:-.015em; color:var(--ftz-paper) }
.ftp-vst-k:hover { transform:translateY(-2px);
  box-shadow:var(--ftz-e2) }
.ftp-vst-k:hover img { transform:scale(1.04) }
.ftp-vst-k:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }
@media (prefers-reduced-motion:reduce) {
  .ftp-vst-k, .ftp-vst-k img { transition:none }
  .ftp-vst-k:hover { transform:none }
  .ftp-vst-k:hover img { transform:none }
}

/* ══════════════════════════════════════════════════════════════════
   TITULKA · KONKURENČNÍ VÝHODY
   ⚠️ PRUH JE PODPIS POD NABÍDKU, NE NABÍDKA. Měl 200 px na desktopu
      a 438 px na mobilu — tedy skoro jako pás dlaždic nad ním, což
      majitel pojmenoval přesně („je to velké jak ty bannery"). Po
      vyhození vět a destiček zbývá nadpis a ryska.

   ⚠️ MINI ZNAČKA, NE OBRÁZEK A NE DESTIČKA. Nejdřív tu byly tmavé
      destičky 56 px kreslené značkou — majitel je odmítl („je to
      velké jak ty bannery"). Pak sama ryska osy. Teď je tu značka,
      o kterou si majitel řekl: 20 px, kresba v barvách webu, táž
      mřížka 24 × 24 jako `IKONY` po celém webu. Ve 22 px nemůže
      přerůst text vedle sebe, což byla přesně vada destiček. Kresba leží ve stylopisu, ne v bloku — čtyři vložené
      SVG by titulku roztrhly na dva bloky.

   ⚠️ KARTY MÍSTO DVOU LINEK — ZADÁNÍ MAJITELE 19. 9. 2026: „ted
      je to tam jen tak hozené". Předtím tu byl pruh mezi dvěma
      vlásky a čtyři sloupce v něm plavaly bez vlastní hranice.
      Karta z kosti s vláskem dá každé výhodě vlastní plochu, aniž
      by přibyla jediná barva navíc.

   ⚠️ KOST, NE TMAVŠÍ TÓN. Zkoušelo se ztmavit podklad (#EDE6DB)
      a každý tmavší tón shodil kontrast: kámen 4,48 a teplý
      inkoust 4,39, tedy pod práh. Kost jde OPAČNÝM směrem — proti
      papíru zvedá kontrast na 5,43 a 5,32. Karta je proto světlejší
      než stránka, ne tmavší.

   ⚠️ NA STŘED, PROTOŽE O TO MAJITEL ŽÁDAL A SEDÍ TO. Dlaždice nad
      pruhem i oba panely pod ním jsou na střed; čtyři sloupce
      zarovnané vlevo byly jediné místo, kde se osa symetrie lámala.
   ══════════════════════════════════════════════════════════════════ */
.ftp-vyh { display:grid; gap:var(--ftz-4);
  grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:860px) {
  .ftp-vyh { grid-template-columns:repeat(4,minmax(0,1fr)) }
}
.ftp-vyh-p { display:flex; flex-direction:column; align-items:center;
  gap:var(--ftz-3); text-align:center;
  padding:var(--ftz-5) var(--ftz-4);
  background:var(--ftz-bone);
  border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-k) }
.ftp-vyh-p::before { content:""; display:block; width:22px; height:22px;
  background-repeat:no-repeat; background-position:center;
  background-size:22px 22px }

/* Na uzkem displeji stoji karty ve dvou radach, takze se odsazeni
   scita dvakrat: pruh vysel na 281 px proti 270 px dlazdic a poprve
   byl vyssi nez zbozi nad nim. Hierarchie se tim obraci — pruh je
   podpis pod nabidku, ne nabidka. Uzsi odsazeni to vraci zpet. */
@media (max-width:859px) {
  .ftp-vyh-p { padding:var(--ftz-4) var(--ftz-3) }
}

/* ⚠️ KOTVA POTŘEBUJE ODSTUP OD HORNÍ HRANY. Tlačítko „Prohlédnout
   sortiment" v úvodu skáče na sekci zboží; bez odstupu skončí
   nadpis nalepený na okraji okna — a pod lepivou hlavičkou
   Shoptetu by zmizel úplně. */
.ftp-sekce { scroll-margin-top:var(--ftz-6) }
.ftp-vyh-p--obe::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203.5a8.5%208.5%200%200%200%200%2017z%22%20fill=%22%231F5A75%22/%3E%3Cpath%20d=%22M12%203.5a8.5%208.5%200%200%201%200%2017z%22%20fill=%22%23B14A18%22/%3E%3C/svg%3E") }
.ftp-vyh-p--overeno::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4.8%2012.6l4.6%204.6L19.2%207.4%22%20stroke=%22%231C1B1A%22%20stroke-width=%222.4%22/%3E%3C/svg%3E") }
.ftp-vyh-p--rychle::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9.8%206.2L19%2012l-9.2%205.8z%22%20fill=%22%23B14A18%22/%3E%3Cpath%20d=%22M3.2%209.4h4.2M4.8%2014.6h2.6%22%20stroke=%22%231F5A75%22%20stroke-width=%221.8%22/%3E%3C/svg%3E") }
.ftp-vyh-p--firmy::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%226.6%22%20y=%227%22%20width=%223.6%22%20height=%2212%22%20rx=%221.8%22%20fill=%22%23B14A18%22/%3E%3Crect%20x=%2213.8%22%20y=%2211.6%22%20width=%223.6%22%20height=%227.4%22%20rx=%221.8%22%20fill=%22%231F5A75%22/%3E%3Cpath%20d=%22M3.4%2019.8h17.2%22%20stroke=%22%231C1B1A%22%20stroke-width=%221.8%22/%3E%3C/svg%3E") }
.ftp-znak--odpar { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M24%2021c5%206%207.8%209.4%207.8%2012.6a7.8%207.8%200%200%201-15.6%200c0-3.2%202.8-6.6%207.8-12.6z%22%20fill=%22%231F5A75%22/%3E%3Cpath%20d=%22M15.6%2017c0-2.2%202.4-2.2%202.4-4.4s-2.4-2.2-2.4-4.4M22.8%2015.4c0-2.2%202.4-2.2%202.4-4.4s-2.4-2.2-2.4-4.4M30%2017c0-2.2%202.4-2.2%202.4-4.4s-2.4-2.2-2.4-4.4%22%20stroke=%22%236F675F%22%20stroke-width=%222.4%22/%3E%3C/svg%3E") }
.ftp-znak--vlozky { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%2210.9%22%20y=%2210.9%22%20width=%2226.2%22%20height=%2226.2%22%20rx=%226%22%20stroke=%22%236F675F%22%20stroke-width=%222.2%22/%3E%3Cpath%20d=%22M12%2025h24v6.1a5.9%205.9%200%200%201-5.9%205.9H17.9a5.9%205.9%200%200%201-5.9-5.9z%22%20fill=%22%231F5A75%22/%3E%3C/svg%3E") }
.ftp-znak--proudeni { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2224%22%20cy=%2224%22%20r=%2213.2%22%20stroke=%22%236F675F%22%20stroke-width=%222.2%22/%3E%3Cg%20fill=%22%231F5A75%22%3E%3Cpath%20d=%22M24%2022.4c-1.4-4.6.4-8.4%204.2-9%202.6-.4%203.8%202.4%201.4%204.4-1.8%201.5-4%202.5-5.6%204.6z%22/%3E%3Cpath%20d=%22M24%2022.4c-1.4-4.6.4-8.4%204.2-9%202.6-.4%203.8%202.4%201.4%204.4-1.8%201.5-4%202.5-5.6%204.6z%22%20transform=%22rotate(120%2024%2024)%22/%3E%3Cpath%20d=%22M24%2022.4c-1.4-4.6.4-8.4%204.2-9%202.6-.4%203.8%202.4%201.4%204.4-1.8%201.5-4%202.5-5.6%204.6z%22%20transform=%22rotate(240%2024%2024)%22/%3E%3C/g%3E%3Ccircle%20cx=%2224%22%20cy=%2224%22%20r=%222.6%22%20fill=%22%236F675F%22/%3E%3C/svg%3E") }
.ftp-znak--teplo { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%2016c3.8-3.4%207.6%203.4%2011.4%200s7.6%203.4%2011.4%200%207.6%203.4%207.2%200M9%2027c3.8-3.4%207.6%203.4%2011.4%200s7.6%203.4%2011.4%200%207.6%203.4%207.2%200%22%20stroke=%22%23B14A18%22%20stroke-width=%222.8%22/%3E%3Crect%20x=%228%22%20y=%2238.2%22%20width=%2232%22%20height=%225%22%20rx=%222.5%22%20fill=%22%236F675F%22/%3E%3C/svg%3E") }
.ftp-znak--tym { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%229%22%20y=%2220%22%20width=%227%22%20height=%2219%22%20rx=%223.5%22%20fill=%22%236F675F%22/%3E%3Crect%20x=%2220.5%22%20y=%2213%22%20width=%227%22%20height=%2226%22%20rx=%223.5%22%20fill=%22%23B14A18%22/%3E%3Crect%20x=%2232%22%20y=%2224%22%20width=%227%22%20height=%2215%22%20rx=%223.5%22%20fill=%22%236F675F%22/%3E%3Cpath%20d=%22M6%2042.6h36%22%20stroke=%22%236F675F%22%20stroke-width=%222.4%22/%3E%3C/svg%3E") }
.ftp-znak--potisk { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M16%209l-6%203.2V25h5.4v14h17.2V25H38V12.2L32%209l-4%203.4h-8z%22%20stroke=%22%236F675F%22%20stroke-width=%222.2%22/%3E%3Ccircle%20cx=%2224%22%20cy=%2223.5%22%20r=%223.8%22%20fill=%22%23B14A18%22/%3E%3C/svg%3E") }
.ftp-znak--zasilka { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M24%207l15%207.6v18.8L24%2041%209%2033.4V14.6z%22%20stroke=%22%236F675F%22%20stroke-width=%222.2%22/%3E%3Cpath%20d=%22M9%2014.6%2024%2022l15-7.4M24%2022v19%22%20stroke=%22%236F675F%22%20stroke-width=%222.2%22/%3E%3Cpath%20d=%22M16.5%2010.4%2031.5%2018%22%20stroke=%22%23B14A18%22%20stroke-width=%222.8%22/%3E%3C/svg%3E") }
.ftp-znak--sezona { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%226%22%20y=%2221.4%22%20width=%2215%22%20height=%225.2%22%20rx=%222.6%22%20fill=%22%231F5A75%22/%3E%3Crect%20x=%2227%22%20y=%2221.4%22%20width=%2215%22%20height=%225.2%22%20rx=%222.6%22%20fill=%22%23B14A18%22/%3E%3Cpath%20d=%22M24%2013.5v21%22%20stroke=%22%236F675F%22%20stroke-width=%222.6%22/%3E%3C/svg%3E") }
.ftp-znak--uprava { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M8%2018h32M8%2030h32%22%20stroke=%22%236F675F%22%20stroke-width=%222.4%22/%3E%3Ccircle%20cx=%2218%22%20cy=%2218%22%20r=%224.8%22%20fill=%22%23B14A18%22/%3E%3Ccircle%20cx=%2232%22%20cy=%2230%22%20r=%224.8%22%20fill=%22%23B14A18%22/%3E%3C/svg%3E") }
.ftp-znak--domluva { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%2011h20a4.5%204.5%200%200%201%204.5%204.5v9A4.5%204.5%200%200%201%2029%2029H18l-6.5%205.5V29H9a4.5%204.5%200%200%201-4.5-4.5v-9A4.5%204.5%200%200%201%209%2011z%22%20stroke=%22%236F675F%22%20stroke-width=%222.2%22/%3E%3Cpath%20d=%22M30%2019h9a4.5%204.5%200%200%201%204.5%204.5v6A4.5%204.5%200%200%201%2039%2034h-.5v4.5L33%2034h-3a4.5%204.5%200%200%201-4.5-4.5v-6A4.5%204.5%200%200%201%2030%2019z%22%20fill=%22%23B14A18%22/%3E%3C/svg%3E") }
.ftp-znak--cas { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M24%2024V10.8A13.2%2013.2%200%200%201%2035.4%2030.6z%22%20fill=%22%231F5A75%22/%3E%3Ccircle%20cx=%2224%22%20cy=%2224%22%20r=%2213.2%22%20stroke=%22%236F675F%22%20stroke-width=%222.2%22/%3E%3Ccircle%20cx=%2224%22%20cy=%2224%22%20r=%222.4%22%20fill=%22%236F675F%22/%3E%3C/svg%3E") }
.ftp-znak--vlhko { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M24%209c5%206%207.8%209.4%207.8%2012.4a7.8%207.8%200%200%201-15.6%200c0-3%202.8-6.4%207.8-12.4z%22%20fill=%22%231F5A75%22/%3E%3Cpath%20d=%22M8%2032c4-3.4%208%203.4%2012%200s8%203.4%2012%200%204-3.4%204-3.4M8%2040c4-3.4%208%203.4%2012%200s8%203.4%2012%200%204-3.4%204-3.4%22%20stroke=%22%236F675F%22%20stroke-width=%222.4%22/%3E%3C/svg%3E") }
.ftp-znak--ticho { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2213.5%22%20cy=%2224%22%20r=%223.4%22%20fill=%22%236F675F%22/%3E%3Cpath%20d=%22M21%2016.6a10.4%2010.4%200%200%201%200%2014.8%22%20stroke=%22%236F675F%22%20stroke-width=%222.4%22/%3E%3Cpath%20d=%22M28.6%2010.4a18.6%2018.6%200%200%201%200%2027.2%22%20stroke=%22%23B14A18%22%20stroke-width=%222.6%22/%3E%3C/svg%3E") }
.ftp-vyh-p b { font-family:var(--ftz-ui); font-size:14.5px;
  line-height:1.35; font-weight:600; letter-spacing:-.005em;
  color:var(--ftz-graphite) }

/* ══════════════════════════════════════════════════════════════════
   TITULKA · DVA PANELY — PORADENSTVÍ A FIRMY
   ⚠️ JEDNA SOUSTAVA, DVA AKCENTY. Táž geometrie, tytéž rozestupy,
      jen jiná plocha: rada na kosti, firmy na břidlici. Kdyby byly
      obě stejné, není poznat, že mluví na dvě různé skupiny; kdyby
      byly každá jinak, rozpadne se stránka.
   ══════════════════════════════════════════════════════════════════ */
/* ⚠️ SPODNÍ MEZERA JE NUTNÁ, NE KOSMETICKÁ. Naměřeno 19. 9. 2026
   na titulce: dvojice panelů končí na y=2732 a NÁSLEDUJÍCÍ SEKCE
   tam svým pozadím v barvě kosti začíná — na pixel přesně. Levý
   panel je přitom taky kostní, takže se do toho pásu vlil a vypadal
   jako useknutý; pravý (břidlicový) měl tvrdou hranu.

   Majitel to popsal jako „špatně vykreslený přechod, jak kdyby tam
   chyběla mezera" — a přesně tak to je. Nic nepřetékalo, kontrast
   seděl, žádná kontrola se neozvala: dvě sousední plochy prostě
   nemají mezi sebou co měřit. */
.ftp-dvoj2 { display:grid; gap:var(--ftz-4);
  grid-template-columns:minmax(0,1fr); margin-bottom:var(--ftz-8) }
@media (min-width:820px) {
  .ftp-dvoj2 { grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--ftz-5) }
}
.ftp-pan { position:relative; display:flex; flex-direction:column;
  align-items:flex-start; gap:var(--ftz-3); text-align:left;
  padding:var(--ftz-7) var(--ftz-6);
  border-radius:var(--ftz-r-k); overflow:hidden }
.ftp-pan::before { content:""; position:absolute; left:0; right:0;
  top:0; height:3px }
.ftp-pan--rada { background:var(--ftz-bone);
  border:1px solid var(--ftz-rule) }
.ftp-pan--rada::before { background:var(--ftz-cold) }
.ftp-pan--firmy { background:var(--ftz-slate);
  color:var(--ftz-paper) }
.ftp-pan--firmy::before { background:var(--ftz-warm) }
.ftp-pan-n { margin:0; font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto; font-variation-settings:'opsz' 36;
  font-size:clamp(21px,2.3vw,27px); line-height:1.15;
  letter-spacing:-.02em; color:inherit }
.ftp-pan--rada .ftp-pan-n { color:var(--ftz-graphite) }
.ftp-pan-p { margin:0; max-width:40ch; font-size:15.5px;
  line-height:1.6; color:var(--ftz-body) }
.ftp-pan--firmy .ftp-pan-p { color:var(--ftz-dim) }
.ftp-pan .ftp-akce { display:flex; flex-wrap:wrap;
  justify-content:flex-start; align-items:center;
  gap:var(--ftz-3); margin-top:var(--ftz-2); width:auto }
.ftp-pan .ftp-cta, .ftp-pan .ftp-cta2 { width:auto }
/* Sekundární cesta je tichý odkaz, ne druhé tlačítko — dvě
   tlačítka vedle sebe soutěží stejnou silou. */
.ftp-pan .ftp-k-o { min-height:44px; display:inline-flex;
  align-items:center }

/* ══════════════════════════════════════════════════════════════════
   TITULKA · PORADNA
   🚫 KARTA NENÍ ODKAZ, DOKUD ČLÁNEK NEEXISTUJE. Vymyšlená adresa je
      přesně ta chyba, kvůli které tu kdysi vedlo 28 odkazů na 404.
      Místo odkazu nese karta značku `[DOPLŇTE …]` v tiché barvě —
      viz `.ftp-dopl`.
   ══════════════════════════════════════════════════════════════════ */
.ftp-cl-m { display:grid; gap:var(--ftz-4); margin:var(--ftz-6) 0 0;
  grid-template-columns:minmax(0,1fr); text-align:left }
@media (min-width:720px) {
  .ftp-cl-m { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
.ftp-cl-k { display:flex; flex-direction:column; gap:var(--ftz-2);
  padding:var(--ftz-5); background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-k) }
.ftp-cl-k::before { content:""; display:block; width:28px; height:2px;
  background:var(--ftz-osa); margin-bottom:var(--ftz-2) }
.ftp-cl-k b { font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto; font-variation-settings:'opsz' 36;
  font-size:17.5px; line-height:1.25; letter-spacing:-.01em;
  color:var(--ftz-graphite) }
.ftp-cl-k > span { font-size:14.5px; line-height:1.55;
  color:var(--ftz-body) }
.ftp-cl-k-o { margin-top:var(--ftz-2) }


/* ══════════════════════════════════════════════════════════════════
   TITULKA · SYMETRIE
   ⚠️ ZADÁNÍ MAJITELE 18. 9. 2026: panely, karty poradny i zdroje na
      střed, „ať je celá stránka symetrická".

   ⚠️ JE TO VÝJIMKA Z PRAVIDLA PROJEKTU, a proto stojí tady. Projekt
      má zapsané, že „zarovnání na střed se nepropadá do obsahu" —
      otázka, odpověď, karta zdroje i dlaždice zboží zůstávají
      vlevo. Platí to dál pro TEXT, KTERÝ SE ČTE PO ŘÁDCÍCH:
      obchodní podmínky, studie, karty zboží. Tyhle tři prvky jsou
      jiné — nadpis a jedna až dvě věty, tedy útvar, který se čte
      celý naráz a na střed nic neztratí.
   ══════════════════════════════════════════════════════════════════ */
.ftp-pan { align-items:center; text-align:center }
.ftp-pan .ftp-pan-p { margin-inline:auto }
.ftp-pan .ftp-akce { justify-content:center }

.ftp-cl-m { text-align:center }
.ftp-cl-k { align-items:center; text-align:center }
.ftp-cl-k::before { margin-inline:auto }

/* ⚠️ NADPIS, POD KTERÝM UŽ NIC NENÍ, POTŘEBUJE VÍC MÍSTA POD SEBOU.
   Perex odsud odešel a bez něj seděl nadpis na kartách. */
.ftp-h2--sam { margin-bottom:var(--ftz-3) }
.ftp-h2--sam + .ftp-cl-m { margin-top:var(--ftz-7) }

/* ── TITULKA · ZBOŽÍ PO PÓLECH ───────────────────────────────────
   ⚠️ OSA MEZI PÓLY JE PSEUDOPRVEK. Prázdný `div` by editor Shoptetu
      smazal (maže blokové prvky bez textu v celém podstromu) —
      stejná past jako u šipek karuselu a okna detailu.

   ⚠️ HLAVIČKA PÓLU JE VLEVO, I KDYŽ JE SEKCE NA STŘED. Zarovnání
      na střed se v tomhle projektu nepropadá do obsahu: nadpis
      a perex na střed, karty a jejich popisky vlevo. Je to totéž
      pravidlo jako u karet studií a otázek.

   ⚠️ TŘI KARTY V ŘADĚ UŽ OD 680 px. Mřížka měla tři sloupce od
      860 px, což bylo správně pro ŠEST karet; u tří by mezi 560
      a 860 px vznikla řada 2 + 1, tedy osamocená karta pod dvěma.
      Při 680 px má karta ještě 211 px vnitřní šířky. */
.ftp-pol { position:relative; text-align:left }
.ftp-pol + .ftp-pol { margin-top:var(--ftz-8);
  padding-top:var(--ftz-8) }
.ftp-pol + .ftp-pol::before { content:""; position:absolute;
  left:0; right:0; top:0; height:3px; background:var(--ftz-osa) }
.ftp-pol-h { display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:var(--ftz-2) var(--ftz-5);
  margin-bottom:var(--ftz-4) }
.ftp-pol-n { margin:0; font-family:var(--ftz-data); font-size:12.5px;
  line-height:1.3; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ftz-stone) }
/* ⚠️ PÓLOVÁ BARVA SMÍ BÝT JEN TAM, KDE SE MLUVÍ O ZMĚNĚ TEPLOTY.
   Tady to platí doslova — vedle značky stojí slovo „Chlazení",
   případně „Vyhřívání". Je to KRESBA, ne text: pólová barva má na
   papíře 2,28 : 1 a na písmo se v tomhle projektu nikdy nedá.
   Úsek 18 × 2 px je týž prvek jako ryska pod nadpisy sekcí, jen
   v barvě svého pólu — půlka osy, u své půlky sortimentu. */
.ftp-pol-n::before { content:""; display:inline-block;
  vertical-align:middle; width:18px; height:2px;
  margin-right:var(--ftz-3); background:var(--ftz-stone) }
.ftp-pol--chlad .ftp-pol-n::before { background:var(--ftz-cold) }
.ftp-pol--teplo .ftp-pol-n::before { background:var(--ftz-warm) }
.ftp-pol-o { font-family:var(--ftz-ui); font-size:14.5px;
  font-weight:600; color:var(--ftz-warm-ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:var(--ftz-2);
  min-height:44px }
.ftp-pol-o::after { content:"→";
  transition:transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-pol-o:hover { text-decoration:underline;
  text-underline-offset:5px }
.ftp-pol-o:hover::after { transform:translateX(3px) }
.ftp-pol .ftp-zbozi-m { margin:0 }

.ftp-pol-c { display:inline-flex; flex-wrap:wrap; align-items:center;
  gap:var(--ftz-2) var(--ftz-5) }
/* Druhá cesta je tišší — kdo ví, co chce, má jít do kategorie. */
.ftp-pol-r { font-family:var(--ftz-ui); font-size:14px;
  font-weight:500; color:var(--ftz-stone); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
  text-underline-offset:5px }
.ftp-pol-r:hover { color:var(--ftz-graphite);
  text-decoration:underline }


/* ⚠️ MEZERA POD ÚVODEM JE MENŠÍ NEŽ MEZI SEKCEMI. Rytmus 128 px
   je správný MEZI sekcemi; hned pod úvodem odsouvá zboží, a to je
   jediná věc, kterou návštěvník na titulce hledá. První produkt
   byl 1 363 px od horní hrany stránky, tedy 1,5 obrazovky. */
/* ⚠️ RYTMUS TŘÍ NOVÝCH PÁSŮ JE ZÁMĚR, NE ZBYTEK PO MARGINECH.
   Naměřeno po prvním složení: vstupy a výhody se DOTýkaly (0 px)
   a před zbožím bylo 143 px. Zadání říká „bezprostředně pod hero“,
   takže vstupy mají těsnou mezeru; výhody jsou jiná věc, takže
   dostanou vlastní; a před zbožím je řez sekce. Tam, kde bylo 143,
   stačí 80 — je to jediné místo, které odsouvá produkty. */
.ftp-uvod + .ftp-vst { margin-top:var(--ftz-5) }
.ftp-uvod:has(+ .ftp-vst) { margin-bottom:0 }
.ftp-vst + .ftp-vyh { margin-top:var(--ftz-5) }
.ftp-vyh + .ftp-sekce--tit { margin-top:80px }
/* Zůstává pro případ, že by se vstupy nevložily. */
.ftp-uvod + .ftp-sekce--tit { margin-top:56px }

/* ── TITULKA · OTÁZKY KALKULAČEK ─────────────────────────────────
   ⚠️ ČÍSLOVANÝ SEZNAM, NE DLAŽDICE. Dlaždice jsou na
      `/kalkulacka/` a měly by titulku vizuálně zdvojit. Tady stačí
      říct, NA CO kalkulačky odpovídají — a otázka je nejlepší
      forma, protože si na ni čtenář odpoví sám a tím se rozhodne
      kliknout. */
/* ⚠️ ŽÁDNÝ ZÁPORNÝ OKRAJ. Odkaz uvnitř řádku ho chvíli měl, aby
   se podbarvení táhlo o kus dál než text — a přetekl tím seznam
   i každou položku o 12 px. Naměřeno na pěti prvcích. Výplň má
   dnes odkaz sám a nikam nepřečnívá. */
.ftp-otazky { display:grid; gap:0; margin:var(--ftz-5) 0 0;
  padding:0; list-style:none; text-align:left;
  counter-reset:ftp-o; max-width:620px;
  margin-left:auto; margin-right:auto }
/* ⚠️ BYL TO SEZNAM, TEĎ JSOU TO ŘÁDKY, NA KTERÉ SE DÁ KLIKNOUT.
      Čtyři otázky pod sebou vypadaly jako výčet v dokumentu —
      majitel to pojmenoval „suché a nezajímavé". Každá otázka
      přitom VEDE na kalkulačku, která na ni odpoví; tak to teď
      i vypadá: celá řádka je odkaz, při najetí se podbarví
      a šipka popojde.

   ⚠️ ŘÁDKA JE VYSOKÁ 56 px, ne 44. Je to dotykový cíl přes celou
      šířku sloupce a zároveň to dává číslu i otázce vzduch. */
.ftp-otazky li { counter-increment:ftp-o;
  border-bottom:1px solid var(--ftz-rule) }
.ftp-otazky li:last-child { border-bottom:0 }
.ftp-otazky a { display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--ftz-4); min-height:56px;
  padding:var(--ftz-3); border-radius:var(--ftz-r);
  text-decoration:none;
  color:var(--ftz-graphite);
  transition:background var(--ftz-cas) var(--ftz-krivka) }
.ftp-otazky a::before { content:counter(ftp-o,decimal-leading-zero);
  font-family:var(--ftz-data); font-size:12px; font-weight:500;
  color:var(--ftz-stone) }
.ftp-otazky a:hover { background:var(--ftz-bone) }
.ftp-otazky a:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }
.ftp-otazky span { font-size:clamp(15.5px,1.5vw,17.5px);
  line-height:1.4; color:var(--ftz-graphite) }
.ftp-otazky .ftp-ikona { color:var(--ftz-stone);
  transition:transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-otazky a:hover .ftp-ikona { transform:translateX(3px) }

/* ── TITULKA · CO NESLIBUJEME — ODSTRANĚNO ───────────────────────
   Sekce zmizela z titulky ve verzi 33 na pokyn majitele; obsahově
   totéž nese `/studie/` u každého zdroje. Zápisy `.ftp-poc*` tím
   přestaly mít co obarvovat. */

/* ── PRUH DŮVĚRY ─────────────────────────────────────────────────
   Žádné hvězdičky. Čtyři tvrzení, která jdou ověřit kliknutím. */
.ftp-duvera { display:grid; gap:var(--ftz-3);
  grid-template-columns:1fr; margin:var(--ftz-6) 0 }
@media (min-width:560px) { .ftp-duvera {
  grid-template-columns:1fr 1fr } }
@media (min-width:980px) { .ftp-duvera {
  grid-template-columns:repeat(4,1fr) } }
/* ⚠️ TŘI KARTY VE MŘÍŽCE PRO ČTYŘI nechávaly vpravo prázdný sloupec
   a sekce vypadala, jako by se něco nenačetlo. Modifikátor drží
   symetrii i tehdy, když karta přibude nebo ubude.
   Selektor je zdvojený schválně: musí přebít `.ftp-duvera`
   v mediálním dotazu bez ohledu na pořadí v souboru. */
.ftp-duvera.ftp-duvera--3 { grid-template-columns:1fr }
@media (min-width:680px) { .ftp-duvera.ftp-duvera--3 {
  grid-template-columns:repeat(3,1fr) } }
/* Na střed. Čtyři karty s různě dlouhými popisky vypadaly na levý
   praporek rozsypaně; symetrie je tady levnější než cokoli jiného. */
.ftp-du { display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:var(--ftz-5); background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-k) }
.ftp-du-i { display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; font-size:19px; margin-bottom:var(--ftz-4);
  color:var(--ftz-graphite); background:#EFE9E0;
  border-radius:var(--ftz-r-p) }
.ftp-du b { display:block; font-family:var(--ftz-data);
  /* Váha napsaná, ne zděděná z <b> — viz `.ftp-stat-c`. */
  font-weight:500;
  font-size:clamp(30px,5vw,38px); line-height:1; letter-spacing:-.045em;
  color:var(--ftz-graphite); font-variant-numeric:tabular-nums }
/* ⚠️ DVĚ POUŽITÍ, DVA VZHLEDY. V „Proč tomu věřit" je karta jen
   tvrzení bez odstavce — chytne se za dvě vteřiny, nebo vůbec.
   V „Proč to vůbec řešit" odstavec zůstává, protože tam nese
   samotné číslo ze studie a bez něj by tvrzení viselo ve vzduchu. */
.ftp-du em { display:block; font-style:normal; font-size:14px;
  font-weight:500; line-height:1.35; color:var(--ftz-body);
  margin-top:var(--ftz-2); text-wrap:balance }
.ftp-du--siroky { align-items:flex-start; text-align:left;
  padding:var(--ftz-4) var(--ftz-5) }
.ftp-du--siroky b { font-size:clamp(26px,4vw,34px) }
.ftp-du--siroky em { max-width:34ch }
.ftp-du--siroky .ftp-du-p { max-width:68ch }
/* ⚠️ `<b>` UVNITŘ ODSTAVCE NENÍ VELKÉ ČÍSLO. `.ftp-du b` je
      nastavené jako headline číslo karty (mono, až 38 px) —
      a jméno autora v citaci se kvůli tomu vykreslilo
      v 34px monu. Naměřeno 28. 9. 2026 na produktové kartě:
      „Park, Pankratz & Behrer (2021)" přes celý panel.

      Zdědit styl headline čísla nesmí nic, co číslo není. */
.ftp-du-p b { font-family:var(--ftz-ui); font-size:inherit;
  font-weight:600; letter-spacing:normal; line-height:inherit;
  color:var(--ftz-body) }
.ftp-du-p { display:block; margin-top:var(--ftz-3);
  padding-top:var(--ftz-3); border-top:1px solid var(--ftz-rule);
  font-size:13.5px; line-height:1.6; color:var(--ftz-stone);
  text-wrap:pretty }
/* Panel „Proč to vůbec řešit". Táž úprava jako „Čím se to řeší" —
   tónovaná plocha s vláskovou osou nahoře. Obě sekce odpovídají na
   dvě půlky téže otázky, takže mají vypadat jako pár. */
.ftp-panel { position:relative; overflow:hidden;
  padding:var(--ftz-7) var(--ftz-5); background:#EFE9E0;
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-v) }
@media (min-width:760px) { .ftp-panel {
  padding:var(--ftz-8) var(--ftz-6) } }
.ftp-panel::before { content:""; position:absolute; top:0; left:0;
  right:0; height:3px; background:var(--ftz-osa) }
.ftp-panel .ftp-duvera { margin-bottom:0 }

/* ── PROČ TO VŮBEC ŘEŠIT · KARTA DŮVODU ──────────────────────────
   Svislé pořadí: znak → číslo → co to číslo je → tvrzení → věta.
   Číslo je největší, protože je to jediná věc, kterou si čtenář
   odnese; věta je nejmenší, protože ji přečte jen ten, koho číslo
   zastavilo. Dřív tu byly tři odstavce a čísla v nich byla
   schovaná uprostřed věty — četla se jako text, ne jako údaj.

   ⚠️ PÓLOVÁ BARVA NESE VÝZNAM, NENÍ TO OZDOBA. Vlásek nahoře
      a kroužek ikony říkají, o kterou stranu osy jde: teplý pól,
      obě strany, chladný pól. Barva TEXTU se tím nemění — pólová
      barva na světlém je pro text nepoužitelná (na #FF8A4C má
      2,28 : 1). Hlídá to `kontrola_polu()` ve `stranky.py`. */
.ftp-duv { position:relative; overflow:hidden; display:flex;
  flex-direction:column; align-items:center; text-align:center;
  padding:var(--ftz-6) var(--ftz-4) var(--ftz-5);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-k) }
.ftp-duv::before { content:""; position:absolute; top:0; left:0;
  right:0; height:3px }
.ftp-duv--teplo::before { background:var(--ftz-warm) }
.ftp-duv--chlad::before { background:var(--ftz-cold) }
.ftp-duv--osa::before { background:var(--ftz-osa) }
.ftp-duv-i { display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:var(--ftz-4);
  border-radius:var(--ftz-r-p) }
.ftp-duv-i .ftp-ikona { width:22px; height:22px }
.ftp-duv--teplo .ftp-duv-i { color:var(--ftz-warm-ink);
  background:#FBEDE3 }
.ftp-duv--chlad .ftp-duv-i { color:var(--ftz-cold-ink);
  background:#E7F0F5 }
.ftp-duv--osa .ftp-duv-i { color:var(--ftz-body); background:#EFE9E0 }
.ftp-duv b { display:flex; align-items:baseline; justify-content:center;
  font-family:var(--ftz-data); font-weight:400;
  font-size:clamp(30px,4.4vw,40px); line-height:1;
  letter-spacing:-.045em; color:var(--ftz-graphite);
  font-variant-numeric:tabular-nums }
/* ⚠️ SPOJKA UVNITŘ ČÍSLA JE PODŘÍZENÁ. „+6 až 9 %" mělo „až" ve
   stejné velikosti jako číslici a slovo se četlo jako údaj. Táž
   past jako u `.ftm-spojka` v knihovně studií. */
.ftp-duv b i { font-style:normal; font-family:var(--ftz-ui);
  font-size:.4em; font-weight:500; letter-spacing:0;
  color:var(--ftz-stone); margin:0 .22em }
/* Jednotka je menší a odsazená STYLEM, ne mezerou — mezera mezi
   číslem a procentem by se na úzké kartě dala zalomit. */
.ftp-duv b span { font-size:.55em; letter-spacing:0;
  color:var(--ftz-stone); margin-left:.14em }
/* ⚠️ TOHLE NENÍ POPISKA, JE TO PŮLKA TVRZENÍ. „2,6 %" samo o sobě
   neznamená nic — teprve „VÝKONU NA KAŽDÝ STUPEŇ" z toho dělá údaj.
   V kamenné šedi na 11 px se ta půlka ztrácela a nahoře zůstalo
   číslo bez jednotky. Tmavší, větší, o váhu silnější.
   Změřeno: `--ftz-body` na kostní bílé 9,4 : 1 proti 5,9 u kamenné. */
.ftp-duv-j { display:block; margin-top:var(--ftz-3);
  font-family:var(--ftz-data); font-size:12px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.45;
  color:var(--ftz-body); text-wrap:balance }
.ftp-duv em { display:block; width:100%; font-style:normal;
  font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 30; font-size:17px; line-height:1.24;
  color:var(--ftz-graphite); margin-top:var(--ftz-4);
  padding-top:var(--ftz-4); border-top:1px solid var(--ftz-rule);
  text-wrap:balance }
.ftp-duv-p { display:block; margin-top:var(--ftz-2); font-size:13px;
  line-height:1.55; color:var(--ftz-stone); text-wrap:pretty }

/* ── PROČ TOMU VĚŘIT · TMAVÁ DESKA ───────────────────────────────
   Stránku otevírá tmavé hero s osou. Kdyby sekce, která má říct
   „proč tomu věřit", stála na papíře jako každá jiná, byla by to
   jen další mřížka karet. Takhle je protějškem hera a obě půlky
   stránky drží pohromadě. Barvy jsou značkové a jenom značkové:
   břidlice, osa nahoře, čísla v Emberu, jména v kosti.

   ⚠️ PLOCHA JE JEDNOBAREVNÁ, NE PŘECHOD. Kontrast nad přechodem se
      musí číst po vrstvách a po každé změně znovu; jednobarevná
      břidlice se změří jednou a platí. Signaturu nese vlásková osa
      nahoře, ne pozadí. */
/* ⚠️ TMAVÁ PLOCHA SI MUSÍ NASTAVIT BARVU TEXTU SAMA. `.ftp-hero`
   i `.ftp-zaver` to dělají a `.ftp-tmavy` ne — text v ní propadl
   na globální `.ftp-p`, tedy na barvu pro papír. Naměřeno 14. 9.
   2026 v závěru stránky Péče: **1,52 : 1**, prakticky neviditelný
   odstavec. Vzniklo to tím, že nové stránky mají jako obal závěru
   `.ftp-tmavy`, kdežto starší `.ftp-zaver` — a pravidlo pro text
   viselo jen na tom druhém.

   Hlídací test tu byl, ale ptal se jen na to, jestli TLAČÍTKO
   stojí na tmavé ploše. Text se neptal nikdo. */
.ftp-tmavy { position:relative; overflow:hidden; color:var(--ftz-paper);
  padding:var(--ftz-7) var(--ftz-5); background:var(--ftz-slate);
  border-radius:var(--ftz-r-v) }
.ftp-tmavy .ftp-p { color:var(--ftz-dim) }
@media (min-width:760px) { .ftp-tmavy {
  padding:var(--ftz-8) var(--ftz-6) } }
.ftp-tmavy::before { content:""; position:absolute; top:0; left:0;
  right:0; height:3px; background:var(--ftz-osa) }
.ftp-tmavy .ftp-h2 { color:var(--ftz-bone) }
/* Karta na tmavém je sklo bez `backdrop-filter` — pod deskou není
   co rozostřovat, takže by to byl jen výkon navíc. */
.ftp-duvera--znacka .ftp-du { background:rgba(255,255,255,.05);
  border-color:var(--ftz-line) }
.ftp-duvera--znacka .ftp-du-i { color:var(--ftz-glacier);
  background:rgba(143,206,221,.10) }
.ftp-duvera--znacka .ftp-du b { color:var(--ftz-ember) }
.ftp-duvera--znacka .ftp-du em { color:var(--ftz-bone) }
.ftp-duvera--znacka .ftp-du-p { color:var(--ftz-dim);
  border-top-color:var(--ftz-line) }
/* ⚠️ POPISEK PRUHU INSTITUCÍ MÁ NA TMAVÉM VLASTNÍ BARVU. `--ftz-stone`
   je nejsvětlejší přípustná barva NA PAPÍŘE; na břidlici má 2,5 : 1
   a je prakticky nečitelná. */
.ftp-tmavy .ftp-inst { border-top-color:var(--ftz-line) }
.ftp-tmavy .ftp-inst-n { color:var(--ftz-dim) }
.ftp-tmavy .ftp-inst-s span { color:var(--ftz-bone) }
.ftp-tmavy .ftp-inst-s span + span::before { color:var(--ftz-stone) }

/* ── CESTA KE ZBOŽÍ ──────────────────────────────────────────────
   Po každé kalkulačce. Zákazník nemá přemýšlet, kam kliknout. */
.ftp-cesta { margin:var(--ftz-6) 0 0; padding:var(--ftz-6) var(--ftz-5);
  background:#EFE9E0; border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-v); position:relative; overflow:hidden }
.ftp-cesta::before { content:""; position:absolute; top:0; left:0;
  right:0; height:3px; background:var(--ftz-osa) }
@media (min-width:760px) { .ftp-cesta { padding:var(--ftz-7) var(--ftz-6) } }
/* ⚠️ JEDNA MEZERA PRO VŠECHNY MŘÍŽKY NA STRÁNCE. Naměřeno
   19. 9. 2026 na „Jak vybrat" při 1280 px: karty rozcestníku měly
   mezeru 24 px a šířku 295, karty otázek mezeru 12 px a šířku 303.
   Vnější hrany obou mřížek seděly (166 → 1099), ale VNITŘNÍ sloupce
   ne — druhá karta začínala na 485, druhá otázka na 481. Čtyři
   pixely, které se nedají pojmenovat a které dělají ze stránky
   „nějak to nesedí". Majitel to popsal přesně takhle.

   24 px je mezera rozcestníku a zůstává; přebírají ji ostatní.
   Se třemi sloupci v 932px pásu vyjde karta 295 px u obou. */
.ftp-zbozi { display:grid; gap:var(--ftz-5); grid-template-columns:1fr }
@media (min-width:620px) { .ftp-zbozi {
  grid-template-columns:repeat(3,1fr) } }
.ftp-zb { display:flex; flex-direction:column; gap:var(--ftz-2);
  padding:var(--ftz-5); text-decoration:none; color:var(--ftz-body);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-k); box-shadow:var(--ftz-e1);
  transition:box-shadow var(--ftz-cas) var(--ftz-krivka),
             border-color var(--ftz-cas) var(--ftz-krivka),
             transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-zb:hover { border-color:#CFC6B8; box-shadow:var(--ftz-e2);
  transform:translateY(-2px) }
.ftp-zb:focus-visible { outline:none;
  box-shadow:var(--ftz-e2),var(--ftz-prsten) }
.ftp-zb > .ftp-ikona { width:26px; height:26px; color:var(--ftz-warm-ink) }

/* ── KARTY NA STŘED SE ZNAČKOU ───────────────────────────────────
   ⚠️ MODIFIKÁTOR, NE GLOBÁLNÍ ZMĚNA. `.ftp-zb` používá i „Cesta
      ke zboží" na kalkulačce a studiích — tam jsou to ODKAZY se
      šipkou „Zobrazit" a ty se na střed nezarovnávají, protože
      šipka patří na konec řádku, ne doprostřed. Zarovnání dostane
      jen mřížka, která si o něj řekne.

   ⚠️ PODLOŽKA JE NEUTRÁLNÍ, NE PÓLOVÁ. Otázky „Jak dlouho v tom
      budete?" a „Je kolem Vás ticho?" o teplotě nemluví; pólová
      barva podložky by z údaje udělala dekoraci, což manuál
      zakazuje. Kresba uvnitř dvoutónovou paletu značky má —
      stejně jako mini značky v pruhu výhod na titulce. */
.ftp-zbozi--stred .ftp-zb { align-items:center; text-align:center }
.ftp-zb-i { display:block; width:56px; height:56px;
  margin-bottom:var(--ftz-2); border-radius:var(--ftz-r-p);
  background-color:#EFE9E0; background-repeat:no-repeat;
  background-position:center; background-size:34px 34px }
/* ⚠️ ZKRATKA `background:` BY KRESBU SMAZALA. Obrázek nese pravidlo
   `.ftp-znak--*` se stejnou specificitou; zkratka v pozdějším
   pravidle by ho přepsala na `none` a podložka by zůstala prázdná.
   Proto jen dlouhé zápisy — týž důvod jako u `.ftp-zp-i`. */
.ftp-zb b { font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 36; font-size:18px; line-height:1.2;
  color:var(--ftz-graphite) }
.ftp-zb span { font-size:13.5px; line-height:1.5 }
.ftp-zb-v { display:inline-flex; align-items:center; gap:6px;
  margin-top:auto; padding-top:var(--ftz-2); font-style:normal;
  font-size:14px; font-weight:600; color:var(--ftz-warm-ink) }
.ftp-zb-v .ftp-ikona { transition:transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-zb:hover .ftp-zb-v .ftp-ikona { transform:translateX(3px) }

/* ── VOLBA KALKULAČKY ────────────────────────────────────────────
   Ne číslovaný seznam. Každá dlaždice nese JEDNOTKU VÝSTUPU —
   podle toho si zákazník vybírá, ne podle pořadí. */
/* ⚠️ DVĚ KRÁT DVĚ, NE ČTYŘI VEDLE SEBE. Ve čtyřech sloupcích má
   dlaždice v 727px sloupci 115 px vnitřní šířky — tam se nevejde
   věta ani štítek a každá dlaždice si text zalomí jinak, takže
   mřížka vypadá rozsypaně. Ve dvou sloupcích má 300 px, text se
   vejde na dva řádky a čtveřice drží čtverec. */
.ftp-volba { display:grid; gap:var(--ftz-3); grid-template-columns:1fr;
  margin:var(--ftz-5) auto 0 }
/* ⚠️ `grid-auto-rows:1fr` SROVNÁ I ŘÁDKY MEZI SEBOU. Bez toho si
   mřížka vyrovnává výšku jen uvnitř řádku: první dvě dlaždice měly
   272 px, druhé dvě 293 px a na širokém displeji to bylo vidět jako
   schod uprostřed. Změřeno. */
@media (min-width:560px) { .ftp-volba {
  grid-template-columns:1fr 1fr; grid-auto-rows:1fr } }
/* Obsah dlaždice je na střed. Čtyři dlaždice s různě dlouhými
   nadpisy vypadaly na levý praporek jako čtyři různé prvky;
   souměrná dlaždice čte jako jedna sada. */
.ftp-dlazdice { position:relative; display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap:var(--ftz-2); padding:var(--ftz-5); text-decoration:none;
  overflow:hidden; background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-k);
  box-shadow:var(--ftz-e1); color:var(--ftz-body);
  transition:box-shadow var(--ftz-cas) var(--ftz-krivka),
             border-color var(--ftz-cas) var(--ftz-krivka),
             transform var(--ftz-cas) var(--ftz-krivka) }
/* ⚠️ VLÁSEK NAHOŘE NESE STRANU OSY, NE JEDNU TEPLOU PRO VŠECHNY.
   Kalkulačka výkonu platí pro obě strany, takže nese celou osu;
   ostatní tři počítají tepelnou zátěž a patří k chladicí půlce
   sortimentu. Je to táž soustava jako u karet zjištění
   (`.ftp-m[data-smer]`) a u karet důvodů (`.ftp-duv--*`), takže
   modrý vlásek znamená na celém webu totéž.

   Manuál to dovoluje: pólová barva se smí objevit tam, kde se
   mluví o změně teploty — a kalkulačka tepelné zátěže je přesně
   ten případ. */
.ftp-dlazdice::before { content:""; position:absolute; top:0; left:0;
  right:100%; height:2px; background:var(--ftz-cold);
  transition:right var(--ftz-cas-p) var(--ftz-krivka) }
.ftp-dlazdice[data-smer="teplo"]::before { background:var(--ftz-warm) }
.ftp-dlazdice[data-smer="osa"]::before { background:var(--ftz-osa) }
.ftp-dlazdice:hover::before { right:0 }
.ftp-dlazdice:hover { border-color:#CFC6B8; box-shadow:var(--ftz-e2);
  transform:translateY(-2px) }
.ftp-dlazdice:focus-visible { outline:none;
  box-shadow:var(--ftz-e2),var(--ftz-prsten) }
/* Ikona v kroužku, ne nahá čárová kresba. Na dlaždici o 300 px je
   samotná 24px ikona ztracená; kroužek jí dá váhu a zopakuje tvar
   odznaku z „Proč tomu věřit". */
.ftp-dlazdice > .ftp-ikona { box-sizing:content-box; width:24px;
  height:24px; padding:9px; color:var(--ftz-body); background:#EFE9E0;
  border-radius:var(--ftz-r-p); margin:0 0 var(--ftz-1) }
/* Kroužek ikony drží tutéž stranu osy jako vlásek. Barva je INKOUST,
   ne pólová plocha — pólová barva na světlém je pro kresbu i text
   nepoužitelná (na #FF8A4C má 2,28 : 1). */
.ftp-dlazdice[data-smer="chlad"] > .ftp-ikona { color:var(--ftz-cold-ink);
  background:#E7F0F5 }
.ftp-dlazdice[data-smer="teplo"] > .ftp-ikona { color:var(--ftz-warm-ink);
  background:#FBEDE3 }
.ftp-dlazdice b { font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 36; font-size:19px; line-height:1.22;
  color:var(--ftz-graphite); text-wrap:balance }
.ftp-dlazdice span { font-size:13.5px; line-height:1.5;
  text-wrap:pretty }
.ftp-jednotka { align-self:flex-start; margin-top:auto;
  font-family:var(--ftz-data); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding:5px 10px;
  border-radius:var(--ftz-r-p); background:#EFE9E0;
  color:var(--ftz-body); border:1px solid var(--ftz-rule) }
.ftp-jednotka--cas { background:#EDF3F7; color:var(--ftz-cold-ink);
  border-color:#CFE0EA }
.ftp-jednotka--penize { background:#EEF5F0; color:var(--ftz-ok);
  border-color:#CFE3D7 }
/* Patička dlaždice: jednotka výsledku a pod ní čas na vyplnění.
   Obojí je údaj, podle kterého se člověk rozhoduje, jestli do toho
   vůbec jde — a obojí je proto oddělené vlásčitou linkou od textu,
   aby se to nečetlo jako pokračování věty. */
.ftp-dl-p { display:flex; flex-direction:column; align-items:center;
  gap:var(--ftz-2); margin-top:auto; padding-top:var(--ftz-3) }
.ftp-dl-p::before { content:""; width:32px; height:1px;
  background:var(--ftz-rule); margin:0 auto var(--ftz-2) }
.ftp-dl-p .ftp-jednotka { margin-top:0; align-self:center }
/* ⚠️ CELÁ VĚTA, NE HOLÁ JEDNOTKA. Stálo tu „asi minuta" a nikdo
   nevěděl, čeho se ta minuta týká — doby čtení, platnosti výsledku,
   čehokoli. Text se skládá v `volba_kalkulacek()`. */
.ftp-dl-cas { font-style:normal; font-family:var(--ftz-data);
  font-size:11px; letter-spacing:.03em; color:var(--ftz-stone);
  text-wrap:balance }
/* Vybraná kalkulačka. Stav nese rámeček, plná linka nahoře
   A ztmavené pozadí — ne jenom barva. */
.ftp-dlazdice.je { border-color:var(--ftz-graphite);
  background:#F3EDE4; box-shadow:var(--ftz-e2) }
/* Vybraná dlaždice drží svou stranu osy i v rámečku. Stav ale
   nenese barva sama — nese ho rámeček, plná linka nahoře
   A ztmavené pozadí, aby byl poznat i bez rozlišení barev. */
.ftp-dlazdice.je[data-smer="chlad"] { border-color:var(--ftz-cold-ink) }
.ftp-dlazdice.je[data-smer="teplo"] { border-color:var(--ftz-warm-ink) }
.ftp-dlazdice.je::before { right:0 }
.ftp-kal[hidden] { display:none }

/* ── OTÁZKY ──────────────────────────────────────────────────────
   Bez `<details>`. Editor Shoptetu zahazuje `dl`/`dt`/`dd` a u
   `details` to ověřené nemáme; `div` a `button` přežijí prokazatelně.
   Bez skriptu je odpověď vidět.

   Otázky jsou číslované. Číslo tu není ozdoba: dává seznamu rytmus
   a při zavřených odpovědích říká, kolik jich je, aniž by je člověk
   musel počítat. */
.ftp-faq { counter-reset:ftp-q; border-top:1px solid var(--ftz-rule) }
.ftp-faq-p { border-bottom:1px solid var(--ftz-rule);
  transition:background var(--ftz-cas) var(--ftz-krivka) }
.ftp-faq-p:hover { background:var(--ftz-bone) }
.ftp-faq-o { display:flex; align-items:center; gap:var(--ftz-4);
  width:100%; min-height:72px; padding:var(--ftz-4) var(--ftz-4);
  font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 30; font-size:clamp(16.5px,2.4vw,19px);
  line-height:1.3; text-align:left; color:var(--ftz-graphite);
  background:transparent; border:0; cursor:pointer }
/* Pořadové číslo. Mono, aby se dvojciferná nekývala. */
.ftp-faq-o::before { counter-increment:ftp-q; content:counter(ftp-q);
  flex:0 0 auto; width:30px; font-family:var(--ftz-data);
  font-size:12.5px; color:var(--ftz-stone);
  font-variant-numeric:tabular-nums }
.ftp-faq-o .ftp-ikona { width:22px; height:22px; margin-left:auto;
  color:var(--ftz-stone);
  transition:transform var(--ftz-cas-p) var(--ftz-krivka) }
.ftp-faq-o[aria-expanded="true"] { color:var(--ftz-warm-ink) }
.ftp-faq-o[aria-expanded="true"] .ftp-ikona { transform:rotate(180deg);
  color:var(--ftz-warm-ink) }
.ftp-faq-o:focus-visible { outline:none; border-radius:var(--ftz-r);
  box-shadow:var(--ftz-prsten) }
/* Odpověď je odsazená na svislici čísla, takže seznam drží mřížku. */
.ftp-faq-t p { margin:0 0 var(--ftz-5);
  padding:0 var(--ftz-4) 0 calc(30px + var(--ftz-4) + var(--ftz-4));
  max-width:68ch; font-size:15.5px; line-height:1.65;
  color:var(--ftz-body); text-wrap:pretty }
.ftp-faq-t b { color:var(--ftz-graphite); font-weight:600 }
.ftp--js .ftp-faq-t { display:none }
.ftp--js .ftp-faq-t.je { display:block;
  animation:ftp-rozbal var(--ftz-cas-p) var(--ftz-krivka) }
@keyframes ftp-rozbal {
  from { opacity:0; transform:translateY(-4px) }
  to { opacity:1; transform:none } }

/* ── ZDROJE ──────────────────────────────────────────────────────
   ⚠️ TABULKA PRYČ. Měla `min-width:620px`, takže v 727px sloupci
      rolovala do strany a na mobilu tím spolu s obsahem zmizela
      i hlavička sloupců. Karta funguje na každé šířce.

   Seznam je sbalený: zdroje nejsou hlavní obsah, ale možnost
   ověření. Bez skriptu je otevřený — ověřitelnost nesmí viset
   na JavaScriptu. */
/* ⚠️ OVLÁDÁNÍ STOJÍ NA STŘED A HLEDÁNÍ JE POD TLAČÍTKEM. Vedle
   sebe to byl široký pruh, ve kterém tlačítko uhýbalo doleva
   a pole se roztahovalo přes celý sloupec — v sekci, která je
   jinak celá souměrná, to byla jediná křivá věc. */
.ftp-z-ovl { display:flex; flex-direction:column; align-items:center;
  gap:var(--ftz-4); margin:var(--ftz-5) 0 var(--ftz-3) }
.ftp-z-vic { display:inline-flex; align-items:center; gap:var(--ftz-2);
  min-height:48px; padding:0 var(--ftz-5); font-family:var(--ftz-ui);
  font-size:15px; font-weight:600; color:var(--ftz-graphite);
  background:var(--ftz-bone); border:1px solid var(--ftz-graphite);
  border-radius:var(--ftz-r-k); cursor:pointer }
.ftp-z-vic::after { content:""; width:7px; height:7px;
  border-bottom:1.8px solid currentColor;
  border-right:1.8px solid currentColor; transform:rotate(45deg);
  margin-top:-3px;
  transition:transform var(--ftz-cas-p) var(--ftz-krivka) }
.ftp-z-vic[aria-expanded="true"]::after { transform:rotate(-135deg);
  margin-top:3px }
.ftp-z-vic:hover { background:var(--ftz-graphite); color:var(--ftz-bone) }
.ftp-z-vic:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }
/* Hledání se ukáže, až je seznam otevřený — hledat v zavřeném
   seznamu nedává smysl a prázdné pole jen zabírá místo. */
.ftp-z-hledat { display:none; width:100%; max-width:26rem }
.ftp-z-hledat.je { display:block }
.ftp-z-hledat span { display:block; font-family:var(--ftz-data);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ftz-stone); margin-bottom:var(--ftz-2);
  text-align:center }
.ftp-z-hledat input { width:100%; min-height:48px; padding:0 var(--ftz-4);
  font-family:var(--ftz-ui); font-size:16px; color:var(--ftz-graphite);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-k) }
.ftp-z-hledat input:focus { outline:none; border-color:var(--ftz-warm);
  box-shadow:var(--ftz-prsten) }
.ftp-z-pocet { margin:0 0 var(--ftz-4); font-family:var(--ftz-data);
  font-size:12.5px; color:var(--ftz-stone); min-height:1.2em }

.ftp-z-seznam { display:grid; gap:var(--ftz-3) }
@media (min-width:760px) { .ftp-z-seznam {
  grid-template-columns:1fr 1fr } }
.ftp--js .ftp-z-seznam { display:none }
.ftp--js .ftp-z-seznam.je { display:grid }
.ftp-z-seznam > [hidden] { display:none }
.ftp-z { position:relative; display:flex; flex-direction:column;
  padding:var(--ftz-5); background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-v);
  transition:border-color var(--ftz-cas) var(--ftz-krivka),
             box-shadow var(--ftz-cas) var(--ftz-krivka) }
.ftp-z:hover { border-color:#CFC6B8; box-shadow:var(--ftz-e1) }
.ftp-z-h { display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--ftz-2); margin-bottom:var(--ftz-2) }
.ftp-z-h b { font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 30; font-size:17px; line-height:1.25;
  color:var(--ftz-graphite) }
.ftp-z-rok { font-family:var(--ftz-data); font-size:12px;
  padding:2px 8px; border-radius:var(--ftz-r-p);
  background:#EFE9E0; color:var(--ftz-body) }
.ftp-z-kde { margin:0 0 var(--ftz-4); padding-bottom:var(--ftz-4);
  border-bottom:1px solid var(--ftz-rule); font-size:13px;
  line-height:1.5; color:var(--ftz-stone); font-style:italic }
.ftp-z-r { margin:0 0 var(--ftz-3); font-size:14px; line-height:1.55 }
.ftp-z-r b { display:block; font-family:var(--ftz-data); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ftz-stone);
  margin-bottom:4px }
/* „Co z toho neplyne" je na kartě to nejcennější — má proto
   vlastní plochu, ne jen linku. */
.ftp-z-r--ne { margin-top:auto; padding:var(--ftz-3) var(--ftz-4);
  background:#FAF4EA; border-left:3px solid var(--ftz-pozor);
  border-radius:0 var(--ftz-r) var(--ftz-r) 0 }
/* Kde zdroj najdete. Je to TEXT, ne odkaz — dvaadvacet odkazů na
   cizí weby je dvaadvacet příležitostí, jak skončit na chybové
   stránce, a rozbitý odkaz u zdroje vypadá, jako by zdroj
   neexistoval. DOI je trvalé a najde se vždycky. */
.ftp-z-u { margin:var(--ftz-4) 0 0; padding-top:var(--ftz-3);
  border-top:1px dashed var(--ftz-rule); font-family:var(--ftz-data);
  font-size:12px; color:var(--ftz-body); word-break:break-word;
  -webkit-user-select:all; user-select:all }
.ftp-z-u span { display:block; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ftz-stone); margin-bottom:4px;
  -webkit-user-select:none; user-select:none }

/* ── ZÁVĚR ───────────────────────────────────────────────────── */
.ftp-zaver { position:relative; overflow:hidden;
  border-radius:var(--ftz-r-v); margin-top:var(--ftz-8);
  background:
    radial-gradient(110% 140% at 100% 0%, rgba(255,138,76,.11), transparent 55%),
    linear-gradient(158deg,#23282D,#1C2024 62%);
  color:var(--ftz-paper) }
.ftp-zaver::after { content:""; position:absolute; left:0; right:0;
  bottom:0; height:3px; background:var(--ftz-osa) }
/* Závěr zrcadlí hero: tatáž osa, tatáž šířka tlačítek. Stránka
   tím začíná i končí symetricky a mezi tím může být cokoli. */
.ftp-zaver-in { position:relative; text-align:center;
  padding:var(--ftz-8) var(--ftz-5) }
@media (min-width:760px) { .ftp-zaver-in {
  padding:var(--ftz-9) var(--ftz-8) } }
.ftp-zaver .ftp-h2 { color:var(--ftz-bone) }
.ftp-zaver .ftp-p { color:var(--ftz-dim); max-width:52ch;
  margin-left:auto; margin-right:auto }
/* ⚠️ ZMĚŘENO AŽ OKEM ZÁKAZNÍKA, NE SKENEM. `.ftp-p b` je globálně
   v grafitu (#1C1B1A) — na světlém podkladu správně. Uvnitř tmavého
   závěru to ale znamenalo skoro černou na #1F2429: poměr 1,05 : 1,
   tedy „Váš" bylo v té větě neviditelné.

   ⚠️ SKEN KONTRASTU TO MINUL, PROTOŽE ZÁVĚR MÁ PŘECHOD NA POZADÍ
      a prvky nad přechodem se přeskakovaly. Měřidlo dnes rozebere
      barevné zarážky přechodu a zkouší text proti nejhorší z nich. */
.ftp-zaver .ftp-p b { color:var(--ftz-bone) }
.ftp-tmavy .ftp-p b { color:var(--ftz-bone) }
/* ⚠️ `justify-content` PATŘÍ DO ZÁKLADNÍHO PRAVIDLA, NE DO ŠESTÉ
   ZÁPLATY. `text-align:center` na rodiči NEcentruje flexové
   položky, takže v každém novém bloku na střed seděla tlačítka
   u levé hrany. Stalo se to PĚTKRÁT — v heru titulky, v závěru,
   v sekci se zbožím, v rotujícím úvodu — a pokaždé se to spravilo
   zvlášť, takže šestý výskyt byl jen otázkou času. Celý web je od
   15. 9. 2026 na střed, takže střed je správná VÝCHOZÍ hodnota;
   kdo bude chtít jinou, napíše si ji. Hlídá test, který projde
   všechny `.ftp-akce` na všech stránkách a změří je. */
.ftp-akce { display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--ftz-3); margin-top:var(--ftz-6) }
.ftp-zaver .ftp-akce { display:grid; grid-template-columns:1fr;
  width:100% }
@media (min-width:560px) {
  .ftp-zaver .ftp-akce { grid-template-columns:1fr 1fr }
}
.ftp-cta,.ftp-cta2 { display:inline-flex; align-items:center;
  justify-content:center; gap:var(--ftz-2); min-height:52px;
  padding:14px 28px; font-family:var(--ftz-ui); font-size:16px;
  font-weight:600; text-decoration:none; border-radius:var(--ftz-r-k);
  cursor:pointer;
  transition:background var(--ftz-cas) var(--ftz-krivka),
             box-shadow var(--ftz-cas) var(--ftz-krivka),
             transform var(--ftz-cas-r) var(--ftz-krivka) }
.ftp-cta { background:var(--ftz-warm); color:var(--ftz-graphite);
  border:1px solid transparent; box-shadow:var(--ftz-e2) }
.ftp-cta .ftp-ikona { transition:transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-cta:hover { background:var(--ftz-ember); box-shadow:var(--ftz-e3);
  transform:translateY(-1px) }
.ftp-cta:hover .ftp-ikona { transform:translateX(3px) }
.ftp-cta:focus-visible { outline:none;
  box-shadow:var(--ftz-e2),var(--ftz-prsten) }
.ftp-cta2 { background:transparent; color:var(--ftz-bone); font-weight:500;
  border:1px solid rgba(255,252,248,.42) }
.ftp-cta2:hover { background:var(--ftz-bone); color:var(--ftz-graphite) }
.ftp-cta2:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }

/* ── POZNÁMKA O POCTIVOSTI ───────────────────────────────────── */
.ftp-mez { margin:var(--ftz-5) 0; padding:var(--ftz-5);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-left:3px solid var(--ftz-stone);
  border-radius:0 var(--ftz-r-k) var(--ftz-r-k) 0;
  font-size:14.5px; line-height:1.6 }
.ftp-mez b { color:var(--ftz-graphite) }

/* ── NÁSTUP PRVKŮ ────────────────────────────────────────────────
   Jemné, jednou, jen svisle o 14 px. Prvek, který se na stránce
   rozjíždí pokaždé, když ho minete, je otravný — ne prémiový. */
.ftp--js .ftp-nastup { opacity:0; transform:translateY(14px);
  transition:opacity var(--ftz-cas-p) var(--ftz-krivka),
             transform var(--ftz-cas-p) var(--ftz-krivka) }
.ftp--js .ftp-nastup.je { opacity:1; transform:none }

@media (prefers-reduced-motion:reduce) {
  .ftp *,.ftp *::before,.ftp *::after {
    transition:none !important; animation:none !important }
  .ftp--js .ftp-nastup { opacity:1; transform:none }
  .ftp--js .ftp-kar-drah .ftp-k { transform:none; opacity:1 }
  .ftp-kar-drah { scroll-behavior:auto }
}

/* ── TITULNÍ HERO: TYPOGRAFICKÝ, NE FORMULÁŘOVÝ ──────────────────
   ⚠️ VŠECHNO NA STŘED SE ČTE JAKO ŠABLONA. Vzorové weby mají hero
      zarovnaný vlevo: oko má kam se vrátit na začátek řádku a text
      dostane hranu, o kterou se opře. Střed je správný u sekce,
      ne u úvodní plochy.

   ⚠️ DVĚ STEJNĚ ŠIROKÁ TLAČÍTKA VEDLE SEBE VYPADAJÍ JAKO FORMULÁŘ.
      Na snímku od majitele to byly dva shodné obdélníky přes celou
      šířku. Prémiový hero má JEDNU hlavní akci; druhá je textový
      odkaz se šipkou, ne druhý rámeček.

   ⚠️ SAZBA JE NA STŘED — ROZHODNUTÍ MAJITELE, 15. 9. 2026.
      Verze 34 měla hero zarovnaný vlevo s ryskou u levé hrany.
      Majitel chce obě plochy na střed a souměrné. Souměrnost se
      nedělá `text-align`em: řádek akcí je `display:flex`, a na
      flexové položky `text-align` nepůsobí vůbec — musí to být
      `justify-content`. Závěr tak vypadal vycentrovaně, ale
      tlačítka v něm seděla vlevo.

      Na obsah uvnitř karet se střed NEPROPADÁ: otázka, odpověď,
      karta zdroje i dlaždice zboží zůstávají vlevo. Vycentrovaný
      odstavec o pěti řádcích se čte hůř a v manuálu je to tak
      napsané.

   ⚠️ NADPIS BYL MALÝ NA TO, ŽE JE TO JEDINÁ VĚTA STRÁNKY.
      Na titulce se ve verzi 33 zmenšil, protože pod ním stála tři
      velká čísla a soutěžila s ním. Čísla jsou pryč, nadpis se
      vrací nahoru. */
.ftp-hero--tit .ftp-hero-in { text-align:center; max-width:none;
  padding-block:clamp(56px,7vw,104px) }
@media (min-width:760px) {
  .ftp-hero--tit .ftp-lead,
  .ftp-hero--tit .ftp-h1 { margin-left:auto; margin-right:auto }
  .ftp-hero--tit .ftp-h1 { max-width:15ch }
  .ftp-hero--tit .ftp-lead { max-width:46ch }
}
.ftp-hero--tit .ftp-h1 { font-size:clamp(38px,5.6vw,64px);
  line-height:1.03; letter-spacing:-.03em }
.ftp-hero--tit .ftp-stitek { margin-bottom:var(--ftz-5) }

/* Osa značky nad štítkem — tenká ryska, ne plocha. Prvek, který se
   objeví jednou, je efekt; tenhle je i pod každým nadpisem sekce. */
.ftp-hero--tit .ftp-stitek::before { content:""; display:block;
  width:44px; height:2px; background:var(--ftz-osa);
  margin:0 auto var(--ftz-4) }

/* Jedna hlavní akce, druhá jako odkaz

   ⚠️ SPECIFICITA: TŘI TŘÍDY PROTI DVĚMA. Zápisy níž musí mít
      `.ftp-akce` uprostřed, protože obecné pravidlo pro hero zní
      `.ftp-hero .ftp-akce .ftp-cta2` a dává `width:100%`. Bez
      něj prémiová varianta prohrála a textový odkaz se roztáhl
      na celý sloupec: text měl 81 px, klikací plocha 740 —
      **660 px neviditelného cíle** vedle odkazu. Změřeno, na
      pohled to vidět není.

   ⚠️ TEXTOVÝ ODKAZ SI NECHÁVÁ 44 px NA VÝŠKU. Bylo tu
      `min-height:0`, takže cíl měl 26 px. Výšku nese výplň,
      ne velikost písma — podtržení zůstává na textu a vzhled
      se nemění, jen se dá trefit prstem. */
.ftp-hero--tit .ftp-akce { display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:var(--ftz-3) var(--ftz-6);
  margin-top:var(--ftz-7); width:auto }
.ftp-hero--tit .ftp-akce .ftp-cta { width:auto }
.ftp-hero--tit .ftp-akce .ftp-cta2 { background:none; border:0;
  padding:0 2px; min-height:44px; width:auto; text-align:center;
  color:var(--ftz-bone); font-weight:500;
  text-underline-offset:6px;
  text-decoration:underline solid rgba(255,252,248,.32) }
.ftp-hero--tit .ftp-akce .ftp-cta2:hover { background:none;
  color:var(--ftz-ember);
  text-decoration-color:var(--ftz-ember) }

header#header {
  padding-top:0; height:auto; background-image:none;
  background-color:#FFFFFF }
#header .header-navigation,
#header .navigation-in a,
#header .navigation-in a b,
#header .site-name a,
#header .site-name a b,
#header .navigation-buttons,
#header .navigation-buttons a,
#header .navigation-buttons button {
  color:#1C1B1A }
#header .navigation-in a:hover,
#header .navigation-in a:hover b,
#header .navigation-in a:focus-visible,
#header .navigation-in a:focus-visible b,
#header .navigation-buttons a:hover,
#header .navigation-buttons button:hover,
#header .navigation-buttons a:focus-visible,
#header .navigation-buttons button:focus-visible {
  color:#B14A18 }
#header .header-navigation {
  position:sticky; top:0; z-index:55;
  background:#FFFCF8; border-bottom:1px solid #E0D9CE;
  border-image:linear-gradient(#FFFCF8 calc(100% - 1px),#E0D9CE 0)
    fill 0 / 0 / 0 100vmax }
#header .header-title,
#header .header-title span {
  color:#1C1B1A }
body .products { --zb-plocha:linear-gradient(180deg,#F8F4EF,#F1ECE4);
  --zb-ink:#1C1B1A; --zb-pol:linear-gradient(90deg,#7FB3CC,#FF8A4C) }
.in-chlazeni .products { --zb-plocha:linear-gradient(180deg,#F3F7F9,#E4EEF3);
  --zb-ink:#1F5A75; --zb-pol:#7FB3CC }
.in-vyhrivani .products { --zb-plocha:linear-gradient(180deg,#FCF6F1,#F9E9DC);
  --zb-ink:#B14A18; --zb-pol:#FF8A4C }
body .products.products-page { gap:0 }
body .products.products-page > .product { padding:0 }
body .products .product > .p {
  height:100%; display:flex; flex-direction:column;
  padding:10px 10px 18px; border:1px solid transparent;
  border-radius:14px; background:transparent;
  text-align:center;
  transition:box-shadow 240ms cubic-bezier(.2,.7,.3,1),
             border-color 240ms cubic-bezier(.2,.7,.3,1),
             background 240ms cubic-bezier(.2,.7,.3,1),
             transform 240ms cubic-bezier(.2,.7,.3,1) }
body .products .product > .p:hover {
  transform:translateY(-2px); background:#FFFCF8;
  border-color:#E0D9CE;
  box-shadow:0 1px 2px rgba(28,27,26,.05),
             0 18px 36px -14px rgba(28,27,26,.18) }
body .products .product .p-image {
  display:block; overflow:hidden; border-radius:10px;
  background:var(--zb-plocha); aspect-ratio:4/3 }
body .products .product .p-image img {
  width:100%; height:100%; object-fit:cover;
  mix-blend-mode:multiply;
  transition:transform 700ms cubic-bezier(.2,.7,.3,1) }
body .products .product > .p:hover .p-image img {
  transform:scale(1.04) }
body .products .product .p-in {
  position:relative; padding:30px 6px 0; flex:1 1 auto;
  display:flex; flex-direction:column }
body .products .product .p-in::before {
  content:""; position:absolute; top:14px; left:50%;
  width:28px; height:2px; margin-left:-14px;
  background:var(--zb-pol);
  transition:width 320ms cubic-bezier(.2,.7,.3,1),
             margin 320ms cubic-bezier(.2,.7,.3,1) }
body .products .product > .p:hover .p-in::before {
  width:56px; margin-left:-28px }
body .products .product .p-name {
  display:block; margin:0; font-family:Fraunces,Georgia,'Times New Roman',serif;
  font-size:19px; font-weight:400; line-height:1.25;
  font-optical-sizing:auto; letter-spacing:-.012em;
  color:#1C1B1A; text-decoration:none;
  text-wrap:balance }
body .products .product .p-name:hover { color:var(--zb-ink) }
body .products .product .p-bottom { display:contents }
body .products .product .p-desc {
  order:2; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
  font-size:13.5px; line-height:1.5; color:#544D46;
  margin:8px 0 0 }
body .products .product .prices {
  order:3; display:flex; justify-content:center;
  margin:auto 0 0; padding:16px 0 0 }
body .products .product .price-final,
body .products .product .price-final strong {
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace; font-size:17px; font-weight:400;
  font-variant-numeric:tabular-nums; color:#1C1B1A;
  letter-spacing:-.02em }
body .products .product .availability { order:4; margin:6px 0 0 }
body .products .product .availability strong {
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:#544D46 !important }
body .products .product .p-tools {
  order:5; display:flex; justify-content:center;
  align-items:center; gap:8px; margin:14px 0 0;
  transition:opacity 240ms cubic-bezier(.2,.7,.3,1),
             transform 240ms cubic-bezier(.2,.7,.3,1) }
@media (hover:hover) {
  body .products .product .p-tools {
    position:absolute; left:0; right:0; top:-58px;
    z-index:1; margin:0 }
  body .products .product > .p:not(:hover):not(:focus-within) .p-tools {
    opacity:0; transform:translateY(4px) }
}
body .products .product .p-tools > * {
  flex:1 1 50%; min-width:0; max-width:140px; margin:0 }
body .products .product .p-tools .btn {
  display:flex; align-items:center; justify-content:center;
  box-sizing:border-box; width:100%; height:38px; margin:0;
  padding:0 12px; font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif; font-size:13px;
  font-weight:600; line-height:1; letter-spacing:.02em;
  white-space:nowrap; text-decoration:none;
  background:#FFFCF8;
  border:1px solid #1C1B1A; color:#1C1B1A;
  border-radius:999px; box-shadow:none;
  transition:background 180ms cubic-bezier(.2,.7,.3,1),
             border-color 180ms cubic-bezier(.2,.7,.3,1) }
body .products .product .p-tools
  .btn:is(:hover,:focus-visible) {
  background:#FF8A4C; border-color:#FF8A4C;
  color:#1C1B1A }
@media (hover:none) {
  body .products .product .p-tools .btn-primary {
    display:none }
}
body .products .product :is(.stars-placeholder,
  .p-tools.advanced .quantity) { display:none }

/* ── ÚVODNÍ OBRAZ, KTERÝ SE MĚNÍ ─────────────────────────────────
   ⚠️ DRÁHA JE `scroll-snap`, NE `display:none`. Bez JavaScriptu
      zůstane posuvný pás: každý snímek je vidět, každý odkaz jde
      kliknout. Kdyby se snímky skrývaly v CSS a ukazoval je skript,
      při jeho chybě by zmizel obsah, který prodává — projekt má
      tohle pravidlo od karuselu studií.

   ⚠️ SNÍMEK SI NESE BARVU TEXTU SÁM. Není uvnitř `.ftp-hero`, takže
      nic nezdědí; na tmavé fotce by text propadl na barvu pro papír.
      Je to táž vada, která byla na `.ftp-tmavy` a měřila 1,52 : 1.

   ⚠️ ŠÍŘKA SLOUPCE JE TÁŽ JAKO U HER NA FOTCE a bere se z téže
      konstanty. Zástin je zapečený v JPEGu a měří se pásmo, kde
      text leží — kdyby si úvod zavedl vlastní šířku, text by z toho
      pásma vylezl a nikdo by si toho nevšiml. */
.ftp-uvod { position:relative; margin-bottom:var(--ftz-7) }
.ftp-uvod-drah { display:flex; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x mandatory; border-radius:var(--ftz-r-v);
  background:var(--ftz-slate) }
.ftp-uvod-drah::-webkit-scrollbar { width:0; height:0 }
.ftp-uvod-s { flex:0 0 100%; min-width:0; scroll-snap-align:start;
  color:var(--ftz-paper); background-size:cover;
  background-position:center; background-repeat:no-repeat }
/* ⚠️ TEXT STOJÍ NA DESCE, NE PŘÍMO NA FOTCE. Do 16. 9. 2026 byl
   v JPEGu zapečený zástin a kontrast se měřil z pixelů každé
   fotky. Jenže vycentrovaný text nutí ztmavit STŘED obrazu — tam,
   kde je motiv — takže snímek skončil skoro černý a majitel to
   poznal na první pohled. Deska dává záruku spočítanou předem
   a platí pro každou fotku; snímek pod ní může zůstat světlý. */
/* ⚠️ 214 z 592 px ÚVODU BYLA ČISTÁ VÝPLŇ — 36 %. Změřeno po
   částech: 48 px výplň snímku nahoře, 59 px výplň desky, 59 dole,
   48 dole; text sám měl 329 px. Majitel chtěl zboží dřív vidět
   a tohle byla nejlevnější půlka toho úkolu: ubral se vzduch,
   ne obsah. */
/* ⚠️ ÚVOD JE OD 19. 9. 2026 JEDINÝ OBRAZ NA ZAČÁTKU STRÁNKY.
   Dokud nad ním stál pás záhlaví, mohl být nízký — nesl půlku
   otevření. Teď nese celé, a snímek vysoký jako proužek by na
   první obrazovce vypadal jako banner, ne jako úvod. Minimální
   výška je proto sázená, ne ponechaná obsahu.

   ⚠️ STROP JE ZÁMĚRNĚ NÍZKO. `56vh` na notebooku dá kolem 400 px
      a zboží zůstane na dosah; majitel opakovaně chtěl vidět
      produkty dřív. Celá obrazovka by to vrátila zpátky. */
.ftp-uvod-s { display:flex; align-items:stretch;
  justify-content:center; padding:0;
  min-height:clamp(340px,56vh,520px) }
/* ⚠️ KRYTÍ SI NESE KAŽDÝ SNÍMEK SÁM a je změřené na něm — viz
   `deska_kryti_pro()` v generátoru fotek. Hodnota ve `var()` je
   ZÁCHRANA pro případ, že by se proměnná ztratila: je to původní
   0,88, tedy záruka proti bílé fotce. Slabší nikdy být nesmí. */
/* ⚠️ CLONA KRYJE CELOU FOTKU, NE JEN STŘED. Dřív to byla deska
   o šířce 72 % sloupce — tedy viditelný tmavý obdélník NA fotce,
   uvnitř tmavého pásu. Box v boxu v boxu.

   Záruka kontrastu se tím NEOSLABILA, naopak přesně sedí:
   `deska_kryti_pro()` počítá krytí z nejhoršího vzorku CELÉHO
   snímku, ne z výřezu pod textem. Dokud kryla jen střed, byla ta
   záruka přísnější než potřeba; teď kryje přesně to, co se měří.

   ⚠️ TMAVŠÍ SMÍ BÝT, SVĚTLEJŠÍ NIKDY. Cokoli, co se na clonu ještě
      přidá (vinětace, přechod), smí kontrast jen zvýšit. Kdo by
      chtěl clonu někde zesvětlit, musí přeměřit `deska_kryti_pro`. */
.ftp-uvod-in { flex:1; min-width:0; display:flex;
  flex-direction:column; justify-content:center; text-align:center;
  background:var(--ftz-deska,rgba(28,32,36,0.88));
  border-radius:var(--ftz-r-v);
  --uvod-pv:clamp(34px,5vw,64px);
  --uvod-ph:clamp(22px,4vw,56px);
  padding:var(--uvod-pv) var(--uvod-ph) }

/* ⚠️ CLONA SLÁBNE JEN TAM, KAM TEXT NEDOSÁHNE.
   Plošná clona 0,66 přes celou fotku držela kontrast, ale z obrazu
   udělala tmavý obdélník — přestal to být obraz. Zesvětlit ji
   plošně ale NEJDE a měření to říká jasně:

       krytí   papír (h1 56px)   dim (perex 19px)
       0,45         4,37              3,04
       0,55         5,45              3,79
       0,66         7,03              4,89

   `h1` je VELKÉ písmo, kde WCAG žádá 3,0 — to platí už od 0,35.
   Binding je PEREX: 19 px je normální text, potřebuje 4,5, a to si
   vynutí krytí kolem 0,63. Plošně se tedy ušetřit nedá skoro nic.
   (Napoprvé jsem si myslel, že to drží nadpis a stačí povolit jeho
   práh. Měření to otočilo.)

   Clona proto zůstává v plné, změřené síle v JÁDRU a vybledá jen
   v pásmu odsazení. Maska se skládá ze dvou přechodů a PRŮNIKEM —
   plná krytí je tam, kde jsou plné oba, tedy přesně uvnitř
   odsazení. Text tam nikdy nezasahuje, protože hranice přechodu je
   TÁŽ proměnná jako `padding`.

   ⚠️ PŘECHOD MUSÍ DOBĚHNOUT DŘÍV, NEŽ TEXT ZAČNE. Napoprvé končil
      přesně na hranici odsazení a na mobilu se to dotklo: perex měl
      levou hranu na 22 px a plné krytí začínalo taky na 22 px.
      Doběhne proto na 70 % odsazení — text pak stojí celý v jádru,
      ne na hraně přechodu.

   ⚠️ SELŽE-LI MASKA, ZŮSTANE PLNÁ CLONA. To je ta bezpečná strana:
      prohlížeč bez masek dostane rovnoměrné krytí 0,66, tedy
      PŘÍSNĚJŠÍ než záruka. Nikdy ne světlejší. */
.ftp-uvod-in {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 calc(var(--uvod-pv) * .7),
      #000 calc(100% - var(--uvod-pv) * .7), transparent 100%),
    linear-gradient(to right, transparent 0, #000 calc(var(--uvod-ph) * .7),
      #000 calc(100% - var(--uvod-ph) * .7), transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 calc(var(--uvod-pv) * .7),
      #000 calc(100% - var(--uvod-pv) * .7), transparent 100%),
    linear-gradient(to right, transparent 0, #000 calc(var(--uvod-ph) * .7),
      #000 calc(100% - var(--uvod-ph) * .7), transparent 100%);
  mask-composite:intersect }
/* Text drží míru sám, v pixelech. `ch` se tu použít nesmí —
   rozpouští se proti písmu KONKRÉTNÍHO prvku, takže by nadpis
   a perex dostaly jinou šířku, i když by v CSS stálo totéž. */
.ftp-uvod-in > * { margin-inline:auto }
.ftp-uvod-in .ftp-h1 { max-width:760px }
.ftp-uvod-in .ftp-lead { max-width:560px }
/* ⚠️ ŠIRŠÍ DESKA JE KRATŠÍ ÚVOD. Při 60 % sloupce měla deska
   501 px a perex se do ní lámal na TŘI řádky; při 72 % se vejde na
   dva. Je to 29 px a nic to nestojí — široká míra řádku by vadila
   u souvislého textu, tohle jsou dvě věty.

   ⚠️ ÚVOD SI TÍM ZAVEDL VLASTNÍ ŠÍŘKU, JINOU NEŽ HERA NA FOTCE,
      a je to v pořádku POUZE proto, že se mezitím změřilo krytí
      desky. Dřív u toho stálo varování, že rozejít ty dvě šířky
      nesmíme, protože zástin byl zapečený v JPEGu jako PÁSMO
      a text mimo něj by ztratil kontrast. Dnes je zástin
      rovnoměrný přes celou fotku (`_zastin_lehky`) a krytí desky
      se počítá ze VŠECH pixelů snímku, takže platí pro jakoukoli
      šířku desky.

   ⚠️ NADPIS A TLAČÍTKA SE ŘÍDÍ ODSUD, NE ZE SPOLEČNÉHO PRAVIDLA.
      `.ftp-h1` a `.ftp-akce` používají i hera podstránek, která
      jsou odměřená a odsouhlasená; zmenšit je globálně by
      znamenalo přeměřovat Studie i Kalkulačku. */
/* Strop 72 % odešel s deskou — clona musí dosáhnout k okrajům
   fotky, jinak se vrátí viditelný obdélník uvnitř obrázku. */
.ftp-uvod-in .ftp-h1 { font-size:clamp(32px,4.6vw,56px) }
.ftp-uvod-in .ftp-akce { margin-top:var(--ftz-5) }
/* Ryska osy nad štítkem — týž prvek jako pod nadpisy sekcí. */
.ftp-uvod-in .ftp-stitek::before { content:""; display:block;
  width:44px; height:2px; background:var(--ftz-osa);
  margin:0 auto var(--ftz-4) }
.ftp-uvod-s .ftp-lead { color:var(--ftz-dim) }
/* Nadpis druhého a třetího snímku je `<p>`, aby na stránce zůstal
   jediný `<h1>`. Vypadat musí stejně. */
.ftp-uvod-n { margin-top:0 }

/* Tečky staví skript — editor Shoptetu maže prvky bez textu. */
.ftp-uvod-tecky { display:flex; justify-content:center; gap:var(--ftz-2);
  margin-top:var(--ftz-4) }
.ftp-uvod-t { width:44px; height:44px; padding:0; border:0;
  background:none; cursor:pointer; position:relative }
.ftp-uvod-t::before { content:""; position:absolute; inset:50% 8px auto 8px;
  height:2px; background:var(--ftz-rule);
  transition:background var(--ftz-cas) var(--ftz-krivka) }
.ftp-uvod-t--je::before { background:var(--ftz-warm-ink) }
.ftp-uvod-t:focus-visible { outline:none; box-shadow:var(--ftz-prsten);
  border-radius:var(--ftz-r) }

/* Dvě cesty do sortimentu — osa značky se nedělí na jednu stranu.
   ⚠️ `.ftp-akce` je `display:flex` BEZ `justify-content`, takže se
      zarovnání sekce na tlačítka nepropíše. Je to počtvrté tatáž
      příčina, proto má řádek vlastní modifikátor. */
.ftp-akce--stred { justify-content:center; margin-top:var(--ftz-6) }
.ftp-cta3 { display:inline-flex; align-items:center;
  justify-content:center; min-height:47px; padding:0 var(--ftz-5);
  font-family:var(--ftz-ui); font-size:15px; font-weight:600;
  color:var(--ftz-graphite); background:transparent;
  border:1px solid var(--ftz-graphite); border-radius:var(--ftz-r);
  text-decoration:none;
  transition:background var(--ftz-cas) var(--ftz-krivka) }
.ftp-cta3:hover { background:rgba(28,27,26,.06) }
.ftp-cta3:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }

/* ── DOKUMENT ────────────────────────────────────────────────────
   Kontakty, Jak nakupovat, Obchodní podmínky a Ochrana údajů.

   ⚠️ TOHLE NENÍ PRODEJNÍ STRÁNKA A NESÁZÍ SE JAKO ONA. Zbytek webu
      je na střed, protože prodává; tady se čte. Verze z 16. 9. 2026
      měla podmínky vysázené jako sekce — vycentrované, s ikonami
      u kontaktů — a majitel to odmítl. Měl pravdu: vycentrovaný
      odstavec o šesti řádcích se čte hůř, protože každý řádek
      začíná jinde.

   ⚠️ MÍRA ŘÁDKU 68 ZNAKŮ. Sloupec 932 px by při 17px písmu dal přes
      sto znaků a oko by na konci řádku ztrácelo začátek dalšího.

   ⚠️ ČÍSLO ČLÁNKU VISÍ V OKRAJI. Na podmínky se odkazuje článkem,
      takže musí jít najít očima — ale nesmí přetlačit nadpis. Proto
      je v monu, menší a tišší, a na širokém okně stojí VEDLE textu,
      ne v něm. Pod 900 px se vrací nad nadpis: 68 px okraje by
      na mobilu sežralo třetinu šířky.

   ⚠️ ŽÁDNÉ IKONY A ŽÁDNÉ KARTY SE STÍNEM. Dokument nemá co
      zdůrazňovat; má se dát přečíst. Vzory, které to dělají dobře
      (Stripe, Apple), používají jen vlásky a mezery. */
/* ⚠️ DOKUMENT ZAČÍNAL NA DORAZ POD MENU. Naměřeno 19. 9. 2026 na
   „Jak nakupovat": mezi spodní hranou hlavičky obchodu a štítkem
   „NÁKUP KROK ZA KROKEM" bylo **0 px**. Majitel to na snímku
   zakroužkoval — a měl pravdu, nebylo to zarovnání, byl to doraz.

   Vzniklo to spojením dvou správných rozhodnutí: pás záhlaví se
   sráží na všech našich stránkách (jinak visí prázdná fotka nad
   obsahem) a hlava dokumentu záměrně není hero. Každé zvlášť dává
   smysl, dohromady nechaly stránku začít bez nádechu.

   ⚠️ OSA NAD ŠTÍTKEM JE TÝŽ PODPIS JAKO NA TITULCE. Ryska 44 × 2 px
      stojí nad štítkem hera (`.ftp-hero--tit .ftp-stitek::before`)
      a pod každým nadpisem sekce. Prvek, který se objeví jednou, je
      efekt; tenhle je systém — a dokument tím dostane totéž otevření
      jako zbytek webu, aniž by si musel půjčovat hero. */
.ftp-dok-h { max-width:var(--ftz-mira); margin:0 auto var(--ftz-8);
  padding-top:clamp(40px,5vw,72px);
  padding-bottom:var(--ftz-6);
  border-bottom:1px solid var(--ftz-rule) }
.ftp-dok-h::before { content:""; display:block; width:44px; height:2px;
  background:var(--ftz-osa); margin-bottom:var(--ftz-5) }
.ftp-dok-pop { margin:0 0 var(--ftz-4); font-family:var(--ftz-data);
  font-size:11.5px; line-height:1.3; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ftz-warm-ink) }
.ftp-dok-n { margin:0; font-family:var(--ftz-di); font-weight:400;
  font-size:clamp(32px,4.4vw,52px); line-height:1.06;
  letter-spacing:-.028em; color:var(--ftz-graphite) }
.ftp-dok-l { margin:var(--ftz-5) 0 0; max-width:52ch;
  font-size:clamp(16.5px,1.5vw,19px); line-height:1.5;
  color:var(--ftz-body) }


/* ⚠️ DVA VLÁSKY 64 px OD SEBE A NIC MEZI NIMI. Změřeno na Kontaktech:
   hlavička dokumentu končí linkou na 394 px a hned pod ní začíná
   blok spojení vlastní linkou na 458 px — tedy dvě stejné linky
   v téže barvě a šířce, mezi nimi prázdno. Na Podmínkách a Ochraně
   údajů je to totéž s pruhem „návrh".

   Na stránce je patnáct vlásků a všechny jsou `--ftz-rule` v 1 px;
   dvojitá linka v takové sadě nečte jako hierarchie, ale jako
   překlep. Hranici drží ta horní — zavírá hlavičku — a ta druhá
   odchází i s odsazením, které by po ní zbylo viset. */
.ftp-dok-h + .ftp-spoj, .ftp-dok-h + .ftp-navrh {
  border-top:0; padding-top:0 }

/* ⚠️ CO CHYBÍ, SE NESMÍ TVÁŘIT JAKO ÚDAJ. Na Kontaktech je sedm
   míst `[DOPLŇTE …]` a všechna se vykreslovala přesně tak jako
   skutečná data — patkovým písmem v grafitu. Stránka pak vypadá
   rozbitě (šest řádků pod sebou, každý „DOPLŇTE") a hlavně: čtenář
   nepozná, co je údaj a co je poznámka pro majitele.

   Značka je proto tišší než data, ne hlasitější: mono a kámen.
   Hierarchie je tím jasná — patkové v grafitu je ÚDAJ, mono
   v kameni je MÍSTO NA ÚDAJ.

   ⚠️ ŽÁDNÁ ČÁRKOVANÁ LINKA POD ZNAČKOU. Zkusil jsem ji a změřil
      následek: na stránce, kde je patnáct vlásků a kde jsem právě
      jeden rušil jako zdvojený, by přibylo sedm dalších linek.
      Závorky `[ ]` a mono řeknou totéž a nic nepřikreslí.

   ⚠️ NEVYPLŇUJE SE ZA MAJITELE. Projekt má zapsané, že IČO, sídlo,
      e-mail ani dopravce se nevymýšlejí; tohle mění POUZE to, jak
      chybějící údaj vypadá. */
.ftp-dopl { font-family:var(--ftz-data); font-size:.86em;
  font-weight:500; color:var(--ftz-stone) }
/* ⚠️ NA TMAVÉM NEPLATÍ BARVY PRO PAPÍR. Jedna značka
   `[DOPLŇTE …]` stojí na břidlici a v kameni měla 2,95 : 1
   (naměřeno). Projekt to má zapsané od pruhu institucí: kámen je
   nejsvětlejší přípustná NA PAPÍŘE, na tmavém se přepíná na `dim`
   (10,20 : 1). Platí to i pro značku, která má být tichá. */
.ftp-hero .ftp-dopl, .ftp-zaver .ftp-dopl, .ftp-tmavy .ftp-dopl,
.ftp-panel .ftp-dopl, .ftp-pan--firmy .ftp-dopl {
  color:var(--ftz-dim) }


/* ══════════════════════════════════════════════════════════════════
   INFORMAČNÍ STRÁNKY · ROZCESTNÍK, POZNÁMKA, POMOC

   ⚠️ ŽÁDNÁ DRUHÁ SADA TŘÍD. Zadání žádalo prefix `info-page__`.
      Nezavádím ho a je to rozhodnutí, ne přehlédnutí: projekt má
      test, který projde KAŽDÝ zápis ve stylopisu a vyžaduje, aby
      začínal naší třídou (`.ftp` / `.ftz` / `.ftg` / `.ftm`) nebo
      podmínkou `body:has(.ftp…)`. Druhá předpona by polovinu
      zápisů z té pojistky vyvedla a izolaci by tím OSLABILA, ne
      posílila. Požadavek zadání — „styly informačních stránek
      izoluj od ostatního webu, nepoužívej obecné třídy" — je
      `.ftp-*` splněný a navíc vynucený testem.
   ══════════════════════════════════════════════════════════════════ */

/* ⚠️ ROZCESTNÍK JE ŘADA ODKAZŮ, NE PĚT KARET. Karty by odsunuly
   první sekci pod ohyb — a rozcestník má být cesta k obsahu, ne
   obsah sám. */
.ftp-rozc { display:flex; flex-wrap:wrap; gap:var(--ftz-2);
  max-width:var(--ftz-mira); margin:0 auto var(--ftz-8);
  padding:var(--ftz-4) 0;
  border-top:1px solid var(--ftz-rule);
  border-bottom:1px solid var(--ftz-rule) }
.ftp-rozc a { display:inline-flex; align-items:center;
  min-height:44px; padding:0 var(--ftz-3);
  font-family:var(--ftz-ui); font-size:14.5px; font-weight:500;
  color:var(--ftz-body); text-decoration:none;
  border-radius:var(--ftz-r);
  transition:background var(--ftz-cas) var(--ftz-krivka),
             color var(--ftz-cas) var(--ftz-krivka) }
.ftp-rozc a:hover { background:var(--ftz-bone);
  color:var(--ftz-graphite) }
.ftp-rozc a:focus-visible { outline:none;
  box-shadow:var(--ftz-prsten) }

/* Cesta zpátky na rozcestník. Tichá — je to služba, ne sdělení. */
.ftp-zpet { max-width:var(--ftz-mira); margin:var(--ftz-5) auto 0 }
.ftp-zpet a { font-family:var(--ftz-data); font-size:11.5px;
  line-height:1.3; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ftz-stone);
  text-decoration:none; display:inline-flex; align-items:center;
  min-height:44px }
.ftp-zpet a:hover { color:var(--ftz-graphite);
  text-decoration:underline; text-underline-offset:5px }

/* ⚠️ POZNÁMKA POD MŘÍŽKOU ÚDAJŮ JE TIŠŠÍ NEŽ ÚDAJE SAMY. Říká, co
   z nich NEPLYNE („sídlo není prodejna") — a to je doplněk, ne
   další údaj. */
.ftp-dok-pozn { max-width:var(--ftz-mira); margin:var(--ftz-4) auto 0;
  font-size:14px; line-height:1.6; color:var(--ftz-stone) }
.ftp-dok-pozn a { color:var(--ftz-warm-ink);
  text-underline-offset:4px }

/* ⚠️ SVĚTLÝ A KLIDNÝ, NE PRODEJNÍ PRUH. Zadání: „blok má být
   světlý, klidný a vizuálně nenásilný." Kost s vláskem, žádná
   tmavá plocha ani barevný box. */
.ftp-pomoc { max-width:var(--ftz-mira); margin:var(--ftz-8) auto 0;
  padding:var(--ftz-7) var(--ftz-6);
  background:var(--ftz-bone);
  border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-k) }
.ftp-pomoc .ftp-dok-h2 { margin-top:0 }
.ftp-pomoc .ftp-p { max-width:52ch }
.ftp-pomoc .ftp-dok-o { margin-top:var(--ftz-5) }

/* ⚠️ DLOUHÝ E-MAIL A ADRESA SE MUSÍ ZALOMIT. Na 360 px vyteče
   `objednavky@fajnteplota.cz` z mřížky údajů — a značka
   `[DOPLŇTE odkaz na formulář pro odstoupení]` je ještě delší. */
.ftp-udaj-h, .ftp-dok-pozn, .ftp-spoj-t { overflow-wrap:anywhere }


/* Účinnost dokumentu — datum, ne nadpis. Stojí pod perexem
   hlavičky, takže se nesmí prát o pozornost s nadpisem. */
/* ⚠️ `ch` SE POČÍTÁ Z PÍSMA TOHO PRVKU, NE DOKUMENTU. `--ftz-mira`
   je `60ch` a u řádku s účinností to byl 12,5px mono, takže sloupec
   vyšel 450 px místo 625 — a dokument měl o jednu levou hranu víc
   (naměřeno 454 proti 434). Je to past celé té jednotky: token
   vypadá jako sdílená míra, ale každý prvek si ji přepočítá po
   svém.

   Písmo proto sedí na VNITŘNÍM `span`u a `<p>` si nechává velikost
   dokumentu — `60ch` pak dá touž šířku jako u perexu a obsahu.
   Řešit to natvrdo v pixelech by znamenalo opsat číslo, které
   `60ch` zrovna dává, a po první změně písma by se to rozešlo. */
.ftp-dok-ucin { max-width:var(--ftz-mira); margin:var(--ftz-4) auto 0 }
.ftp-dok-ucin span { font-family:var(--ftz-data); font-size:12.5px;
  line-height:1.3; font-weight:500; letter-spacing:.06em;
  color:var(--ftz-stone) }

/* Přiznání, že dokument ještě není hotový. Tenký pruh, ne karta. */
.ftp-navrh { display:flex; align-items:baseline; gap:var(--ftz-4);
  max-width:var(--ftz-mira); margin:0 auto var(--ftz-8);
  padding:var(--ftz-4) 0;
  border-top:1px solid var(--ftz-warm-ink);
  border-bottom:1px solid var(--ftz-rule) }
.ftp-navrh span { flex:0 0 auto; font-family:var(--ftz-data);
  font-size:11.5px; line-height:1.3; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ftz-warm-ink) }
.ftp-navrh p { margin:0; font-size:15px; line-height:1.6;
  color:var(--ftz-body) }

/* Obsah dokumentu. Čísla v monu, názvy v běžném písmu. */
.ftp-obsah { display:grid; max-width:var(--ftz-mira);
  margin:0 auto var(--ftz-8) }
.ftp-obsah a { display:flex; align-items:baseline; gap:var(--ftz-4);
  padding:var(--ftz-3) 0; font-size:16px; line-height:1.4;
  color:var(--ftz-graphite); text-decoration:none;
  border-bottom:1px solid var(--ftz-rule) }
.ftp-obsah a:first-child { border-top:1px solid var(--ftz-rule) }
.ftp-obsah a span { flex:0 0 2.5em; font-family:var(--ftz-data);
  font-size:12.5px; line-height:1.3; font-weight:500;
  letter-spacing:.06em; color:var(--ftz-stone) }
.ftp-obsah a:hover { color:var(--ftz-warm-ink) }
.ftp-obsah a:hover span { color:var(--ftz-warm-ink) }
.ftp-obsah a:focus-visible { outline:none;
  box-shadow:var(--ftz-prsten); border-radius:var(--ftz-r) }


/* ══════════════════════════════════════════════════════════════════
   DOKUMENT · OBSAH VE DVOU SLOUPCÍCH
   ⚠️ JEDENÁCT ŘÁDKŮ POD SEBOU MĚLO 522 px. Obsah má na stránku
      ukázat, ne ji zabrat — po dvou sloupcích je to zhruba polovina
      a celý dokument je vidět naráz, bez rolování.

   ⚠️ SVISLE, NE VODOROVNĚ. `grid-auto-flow:column` s pevným počtem
      řádků drží pořadí 01–06 vlevo a 07–11 vpravo. Kdyby se čísla
      střídala po řádcích (01 02 / 03 04), čte se obsah jako
      tabulka a pořadí se ztratí.
   ══════════════════════════════════════════════════════════════════ */
/* ⚠️ POČET ŘÁDKŮ MUSÍ BÝT ZADANÝ, JINAK JE KAŽDÁ POLOŽKA SLOUPEC.
   `grid-auto-flow:column` sám o sobě neví, kde zalomit — z jedenácti
   kapitol udělal jedenáct sloupců a stránka přetekla o 587 px
   (naměřeno). `grid-template-columns` to nespraví: u toku po
   sloupcích rozhoduje počet ŘÁDKŮ. Posílá ho generátor v
   `--radku`, protože v CSS se z počtu položek spočítat nedá. */
@media (min-width:760px) {
  .ftp-obsah--2 { grid-auto-flow:column;
    grid-template-rows:repeat(var(--radku,6),auto);
    column-gap:var(--ftz-7) }
  /* Vlásek nahoře patří první položce KAŽDÉHO sloupce — tedy i té,
     která je první ve druhém sloupci. Bez toho visí pravý sloupec
     bez horní linky. */
  /* ⚠️ HORNÍ VLÁSEK DRUHÉHO SLOUPCE NESE TŘÍDA, NE SELEKTOR.
     Zkusil jsem `:nth-child(var(--prvni-vpravo))` a je to rovnou
     dvakrát špatně: `nth-child` custom property nepřijímá, takže
     by to nefungovalo, a čárka uvnitř závorky navíc rozsekla
     selektor testu, který projíždí všechny zápisy. Kterou položku
     označit, ví generátor — tak ať to řekne rovnou. */
  .ftp-obsah--2 .ftp-obsah-h { border-top:1px solid var(--ftz-rule) }
}

/* ══════════════════════════════════════════════════════════════════
   DOKUMENT · CESTA ZPĚT JE ZNAČKA NA OKRAJI, NE ŘÁDEK TEXTU
   ⚠️ JEDENÁCT ODKAZŮ „ZPĚT NA OBSAH" ZABÍRALO 484 px. Každý byl
      vlastní řádek mono verzálek — tedy jedenáctkrát text, který
      nikdo nečte a který přesto rozbíjí sazbu mezi kapitolami.
      Zůstává (je to navigace v dlouhém dokumentu), ale čte se jako
      značka na okraji: menší, tišší, u pravé hrany.

   ⚠️ DOTYKOVÝ CÍL ZŮSTÁVÁ 44 px. Zmenšuje se písmo, ne plocha.
   ══════════════════════════════════════════════════════════════════ */
.ftp-zpet { display:flex; justify-content:flex-end; margin-top:0 }
/* ⚠️ TICHÝ NEZNAMENÁ NEVIDITELNÝ. Dal jsem zpětným odkazům
   `--ftz-rule`, tedy barvu VLÁSKU — a naměřil na nich 1,25 : 1,
   dvaadvacetkrát. Vlásková barva je na linku, ne na písmeno;
   nejsvětlejší přípustná na papíře je `--ftz-stone` (4,97 : 1)
   a pod ni se nesmí ani u prvku, který má být nenápadný. */
.ftp-zpet a { font-size:10.5px; letter-spacing:.12em;
  color:var(--ftz-stone) }
.ftp-zpet a:hover { color:var(--ftz-graphite) }
/* ⚠️ −12 px, NE −24 px — 30. 9. 2026. S −24 px lícovala 44px plocha
      odkazu s koncem odstavce a „Zpět na obsah" stálo 4 px pod
      posledním řádkem textu; revize to hlásila jako překryv
      a na pohled to bylo namačkané. */
.ftp-cl .ftp-zpet { margin-top:calc(0px - var(--ftz-3)) }

/* Článek s visící číslicí. */
.ftp-cl { max-width:var(--ftz-mira); margin:0 auto;
  padding-block:var(--ftz-7); scroll-margin-top:24px;
  border-top:1px solid var(--ftz-rule) }
.ftp-cl-n { display:flex; align-items:baseline; gap:var(--ftz-4);
  margin:0 0 var(--ftz-5); font-family:var(--ftz-di);
  font-weight:400; font-size:clamp(20px,2.1vw,26px); line-height:1.2;
  letter-spacing:-.018em; color:var(--ftz-graphite) }
.ftp-cl-c { flex:0 0 auto; font-family:var(--ftz-data);
  font-size:12.5px; line-height:1.3; font-weight:500;
  letter-spacing:.08em; color:var(--ftz-warm-ink) }
.ftp-cl .ftp-p { max-width:none; margin:0 0 var(--ftz-4) }
.ftp-cl .ftp-p:last-child { margin-bottom:0 }
@media (min-width:900px) {
  /* Číslo ven z řádku nadpisu do okraje. Míra textu zůstává 68 ch,
     proto se o tutéž šířku rozšiřuje i celý článek. */
  .ftp-cl { max-width:calc(var(--ftz-mira) + var(--ftz-okraj));
    padding-left:var(--ftz-okraj) }
  .ftp-cl-n { position:relative }
  .ftp-cl-c { position:absolute; left:calc(0px - var(--ftz-okraj));
    top:.35em }
}

/* Oddíl dokumentu — vlevo, bez ozdob. */
.ftp-dok-s { max-width:var(--ftz-mira); margin:0 auto var(--ftz-8) }
.ftp-dok-h2 { margin:0 0 var(--ftz-5); font-family:var(--ftz-di);
  font-weight:400; font-size:clamp(22px,2.4vw,30px); line-height:1.15;
  letter-spacing:-.02em; color:var(--ftz-graphite) }
.ftp-dok-p { margin:0 0 var(--ftz-6); max-width:56ch; font-size:16.5px;
  line-height:1.65; color:var(--ftz-body) }

/* Údaje: název vlevo, hodnota vpravo, mezi nimi vlásek. */
.ftp-udaje { display:grid }
.ftp-udaj { display:grid; gap:var(--ftz-1); padding:var(--ftz-4) 0;
  align-items:baseline; border-top:1px solid var(--ftz-rule) }
.ftp-udaj:last-child { border-bottom:1px solid var(--ftz-rule) }
@media (min-width:640px) {
  .ftp-udaj { grid-template-columns:minmax(0,13em) minmax(0,1fr);
    gap:var(--ftz-5) }
}
.ftp-udaj-n { font-family:var(--ftz-data); font-size:12.5px;
  line-height:1.3; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ftz-stone) }
.ftp-udaj-h { font-size:16.5px; line-height:1.6;
  color:var(--ftz-graphite) }

/* Telefon jako hlavní kontakt — jediný potvrzený údaj na stránce. */
.ftp-spoj { max-width:var(--ftz-mira); margin:0 auto var(--ftz-8);
  padding-block:var(--ftz-6);
  border-top:1px solid var(--ftz-rule);
  border-bottom:1px solid var(--ftz-rule) }
.ftp-spoj-p { margin:0 0 var(--ftz-3); font-family:var(--ftz-data);
  font-size:11.5px; line-height:1.3; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ftz-stone) }
.ftp-spoj-t { display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--ftz-di); font-weight:400;
  font-size:clamp(30px,4vw,46px); line-height:1.1;
  letter-spacing:-.02em; color:var(--ftz-graphite);
  text-decoration:none }
.ftp-spoj-t:hover { color:var(--ftz-warm-ink) }
.ftp-spoj-k { margin:var(--ftz-3) 0 0; font-size:14.5px; line-height:1.6;
  color:var(--ftz-body) }

/* ── E-mail, který se kliknutím zkopíruje (od 30. 9. 2026) ─────────
   Štítek „Kopírovat" přidá jen skript (`ftp-mail--js`) — bez něj je
   adresa obyčejný odkaz na poštu a štítek by sliboval, co se nestane. */
.ftp-mail { cursor:pointer }
.ftp-mail--js::after { content:"Kopírovat"; display:inline-block;
  margin:0 0 0 10px; padding:3px 9px; vertical-align:2px;
  font-family:var(--ftz-data); font-size:10px; font-weight:500;
  line-height:1.4; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ftz-stone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-p) }
.ftp-mail--js[data-hotovo]::after { content:"Zkopírováno";
  color:var(--ftz-ok); border-color:var(--ftz-ok) }

/* ══ PATIČKA OBCHODU (30. 9. 2026) — pole Zápatí, každá stránka ═══
   ⚠️ KOŘEN `.ftp-pata`, NE `.ftp` — patička je na každé stránce
      a `body:has(.ftp)` musí dál znamenat „stránka s naším blokem".
      Tokeny nese sama (viz první řádek tokenů).
   Tmavá deska značky s osou nahoře; pod ní zůstává Shoptetův řádek
   s platbami, copyrightem a nastavením cookies. */
.ftp-pata { position:relative; background:var(--ftz-slate);
  color:var(--ftz-dim); font-family:var(--ftz-ui); text-align:left }
.ftp-pata::before { content:""; position:absolute; top:0; left:0;
  right:0; height:3px; background:var(--ftz-osa) }
.ftp-pata-in { display:grid; gap:var(--ftz-6) var(--ftz-5);
  grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1100px;
  margin:0 auto; padding:var(--ftz-7) var(--ftz-5) var(--ftz-6);
  border-bottom:1px solid var(--ftz-line) }
.ftp-pata-znacka { grid-column:1 / -1 }
@media (min-width:900px) {
  .ftp-pata-in { grid-template-columns:1.5fr repeat(4,minmax(0,1fr)) }
  .ftp-pata-znacka { grid-column:auto }
}
.ftp-pata-logo { margin:0 0 var(--ftz-3); font-family:var(--ftz-di);
  font-weight:400; font-size:26px; letter-spacing:-.01em;
  color:var(--ftz-bone) }
/* Kousek osy pod doménou — týž znak jako pod nadpisy stránek. */
.ftp-pata-logo::after { content:""; display:block; width:44px;
  height:2px; margin:var(--ftz-3) 0 0; background:var(--ftz-osa) }
/* Heslo z úvodu titulky (majitel 30. 9. 2026: pod doménu „to, co je
   nahoře"), v řezu jeho nadpisu. */
.ftp-pata-claim { margin:0; font-family:var(--ftz-di); font-weight:400;
  font-size:19px; line-height:1.35; letter-spacing:-.01em;
  color:var(--ftz-bone) }
.ftp-pata-n { margin:0 0 var(--ftz-3); font-family:var(--ftz-data);
  font-size:11.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ftz-ember) }
.ftp-pata-sl a { display:block; padding:5px 0; font-size:14.5px;
  line-height:1.4; color:var(--ftz-bone); text-decoration:none;
  overflow-wrap:anywhere;
  transition:color var(--ftz-cas) var(--ftz-krivka) }
.ftp-pata-sl a:hover { color:var(--ftz-ember) }
.ftp-pata-sl a:focus-visible { outline:none; box-shadow:var(--ftz-prsten);
  border-radius:2px }
/* ⚠️ V `#footer` NAŠE ODKAZY PŘEBÍJÍ SHOPTET. Jeho
      `#footer a:not(.login-btn):not(.btn)` (1,2,1) je barví šedou
      z proměnné a Inter má v patičce řez 300 — přečteno na živém
      DOM 30. 9. 2026 (náhled to pravidlo do té doby neměl). */
body:has(.ftp-pata) #footer .ftp-pata-sl a { color:var(--ftz-bone);
  font-weight:400 }
body:has(.ftp-pata) #footer .ftp-pata-sl a:hover {
  color:var(--ftz-ember) }
.ftp-pata-ico { margin:var(--ftz-3) 0 0; font-family:var(--ftz-data);
  font-size:12.5px; color:var(--ftz-dim) }
/* ── Patička Shoptetu, když v ní naše sedí (od 30. 9. 2026) ───────
   Skript naši patičku posadí na ZAČÁTEK `#footer`, nad Shoptetův
   řádek s logy karet; pod ním zůstává copyright a „Upravit nastavení
   cookies". Pořadí je tedy: značka a odkazy → platby → copyright.
   Do té doby stál řádek s platbami NAD doménou (snímek majitele).
   ⚠️ SELEKTOR NESE ID (`body:has(.ftp-pata) #footer`). Shoptetova
      pravidla patičky jsou v cizím stylopisu a přečíst nejdou —
      nespoléhá se na to, že prohrají se dvěma třídami.
   ⚠️ MIMO `.ftp-pata` PROMĚNNÉ NEPLATÍ, hodnoty jsou doslova: Plex
      Mono a Ember jako nadpisy našich sloupců, linka #333B42.
   ⚠️ Shoptet dává patičce i spodnímu řádku SVĚTLOU linku #DADADA
      (přečteno z živého DOM) — na tmavé desce řezala. */
body:has(.ftp-pata) #footer.ftp-pata-je { border-top:0 }
body:has(.ftp-pata) #footer.ftp-pata-je .custom-footer__articles {
  display:none }
body:has(.ftp-pata) #footer .custom-footer { display:flex;
  flex-wrap:wrap; justify-content:center; margin:0; padding:22px 0 4px }
body:has(.ftp-pata) #footer .custom-footer::before,
body:has(.ftp-pata) #footer .custom-footer::after { content:none }
body:has(.ftp-pata) #footer .custom-footer__onlinePayments {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:10px 18px; float:none; width:auto;
  max-width:100%; padding:0 }
body:has(.ftp-pata) #footer .custom-footer__onlinePayments .pageElement__heading {
  margin:0;
  font:500 11.5px/1.4 'IBM Plex Mono',ui-monospace,Consolas,monospace;
  letter-spacing:.14em; text-transform:uppercase; color:#F0A868 }
body:has(.ftp-pata) #footer .pageElement__heading span {
  font:inherit; color:inherit }
body:has(.ftp-pata) #footer .custom-footer__onlinePayments p {
  margin:0 }
body:has(.ftp-pata) #footer .footer-bottom { border-top-color:#333B42 }
.ftp-spoj-t:focus-visible { outline:none; box-shadow:var(--ftz-prsten);
  border-radius:var(--ftz-r) }
/* E-mail na kontaktech je odkaz, ale nemá vypadat jako odkaz
   v textu — je to ta největší věc na stránce, podtržení by ji jen
   zašpinilo. Barvu dědí, podtrhne se až pod kurzorem. */
.ftp-spoj-a { color:inherit; text-decoration:none;
  border-bottom:2px solid var(--ftz-rule) }
.ftp-spoj-a:hover { border-bottom-color:var(--ftz-warm) }
.ftp-spoj-d { margin:var(--ftz-3) 0 0; font-size:15px;
  color:var(--ftz-stone) }

/* Číslovaný postup — táž visící číslice jako u článků. */
.ftp-krok-s { display:grid }
.ftp-krok { display:grid; grid-template-columns:2.5em minmax(0,1fr);
  gap:var(--ftz-4); padding-block:var(--ftz-5); align-items:baseline;
  border-top:1px solid var(--ftz-rule) }
.ftp-krok:last-child { border-bottom:1px solid var(--ftz-rule) }
.ftp-krok > div > b { display:block; margin-bottom:var(--ftz-2);
  font-size:17px; font-weight:600; color:var(--ftz-graphite) }
.ftp-krok .ftp-p { margin:0; max-width:none }
/* ⚠️ VLASTNÍ ČÍSLICE, NE `.ftp-cl-c`. Vypadá stejně, ale ta z článku
   od 900 px odchází z toku do okraje a mřížce kroku by tím sebrala
   buňku — text by spadl do sloupce 2,5 em a lámal se po slovech.
   Tahle zůstává v buňce vždycky. */
.ftp-krok-c { font-family:var(--ftz-data); font-size:12.5px;
  line-height:1.3; font-weight:500; letter-spacing:.08em;
  font-variant-numeric:tabular-nums; color:var(--ftz-warm-ink) }

/* Dvě věci, které se pletou, vedle sebe. */
.ftp-dvoj { display:grid; gap:var(--ftz-5); margin-bottom:var(--ftz-6) }
@media (min-width:700px) {
  .ftp-dvoj { grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--ftz-6) }
}
.ftp-dvoj-p { padding-top:var(--ftz-4);
  border-top:2px solid var(--ftz-warm-ink) }
.ftp-dvoj-p > b { display:block; margin:0 0 var(--ftz-3);
  font-family:var(--ftz-di); font-weight:400; font-size:21px;
  line-height:1.2; color:var(--ftz-graphite) }
.ftp-dvoj-p .ftp-p { margin:0; max-width:none; font-size:16px }

/* Kam dál — na konci dokumentu, ne nahoře. */
.ftp-dok-k { max-width:var(--ftz-mira); margin:var(--ftz-8) auto 0;
  padding-top:var(--ftz-6); border-top:1px solid var(--ftz-rule) }
.ftp-dok-k .ftp-p { max-width:52ch; margin:0 0 var(--ftz-5) }
.ftp-dok-o { display:flex; flex-wrap:wrap; gap:var(--ftz-3) var(--ftz-6) }
/* ⚠️ DVA ZPŮSOBY ZAROVNÁNÍ, PROTOŽE JSOU TO DVA DRUHY STRÁNEK.
   Na titulce a na obsahových stránkách je všechno na střed, takže
   i pás „kam dál". Na dokumentech (podmínky, údaje, nákup) zůstává
   vlevo — čtou se jako souvislý text, ne jako rozcestník, a střed
   by z nich udělal leták. */
.ftp-dok-k--stred { text-align:center }
.ftp-dok-k--stred .ftp-p { margin-left:auto; margin-right:auto }
.ftp-dok-k--stred .ftp-dok-o { justify-content:center }
/* ⚠️ ODKAZ NA KONCI DOKUMENTU NENÍ ODKAZ VE VĚTĚ. Výjimka WCAG
   pro odkaz uvnitř souvislého textu na něj neplatí — tohle je
   navigace a musí se do ní dát trefit prstem. Naměřeno 26 px. */
.ftp-dok-o .ftp-odkaz { display:inline-flex; align-items:center;
  min-height:44px }

/* Odkaz uvnitř textu. Podtržení zůstává — v souvislém textu je
   barva sama o sobě nedostatečný signál.

   ⚠️ PLATÍ I NA ODKAZ BEZ TŘÍDY. Do 19. 9. 2026 barvil jen `a`
      s třídou `.ftp-odkaz` a v perexech stálo prosté `<a href=
      "/studie/">studiích</a>` — takový odkaz si obarvil Waltz
      svou modrou. Majitel to našel na snímku dřív než kterýkoli
      test: „je tam modrým odkaz na studie, to nechci modré".
      Přidat třídu na tři místa by opravilo tři místa; tohle
      opraví i čtvrtý odkaz, který někdo napíše příště.

   ⚠️ NA TMAVÉ PLOŠE INKOUST NESTAČÍ. `--ftz-warm-ink` je barva
      pro kresbu NA PAPÍŘE: na kosti má 5,32 : 1, na břidlici jen
      3,01 : 1 — pod hranicí 4,5. Ember na břidlici má 8,20 : 1
      (změřeno 19. 9. 2026 ze `znacka.py`). Dnes žádný odkaz na
      tmavé ploše není; pravidlo je tu proto, že první takový
      odkaz by jinak vznikl neviditelný a nikdo by to nehlásil.
      Projekt na to najel dvakrát — tlačítko v barvě kosti na
      světlé sekci (1,09) a odstavec závěru (1,52). */
.ftp-odkaz,
.ftp-p a, .ftp-lead a, .ftp-faq-t a, .ftp-zp-d a, .ftp-tst-r a {
  color:var(--ftz-warm-ink); font-weight:500;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px }
.ftp-hero .ftp-lead a, .ftp-zaver .ftp-p a, .ftp-tmavy .ftp-p a,
.ftp-tmavy .ftp-odkaz { color:var(--ftz-ember) }
.ftp-odkaz:hover { text-decoration-thickness:2px }
.ftp-odkaz:focus-visible { outline:none; box-shadow:var(--ftz-prsten);
  border-radius:2px }
.ftp-odkaz--cil { display:inline-flex; align-items:center;
  min-height:44px }

/* ── DŮKAZ NA TITULCE ────────────────────────────────────────────
   Tvrzení → doklad → cesta dál, a nic navíc. Jména institucí jsou
   jediný sociální důkaz, který tenhle obchod poctivě má; hvězdičky
   ani počty zákazníků tu být nesmějí, protože je nemáme.

   ⚠️ JMÉNA JSOU TIŠŠÍ NEŽ VĚTA, KTEROU DOKLÁDAJÍ. Kdyby měla
      stejnou váhu, četla by se jako logo wall a ze sekce by byla
      dvě sdělení místo jednoho.

   ⚠️ ODKAZ NEMÁ FLEXOVÝ OBAL. Předchozí verze ho měla v
      `.ftp-akce`, což je `display:flex` bez `justify-content` —
      vycentrovaná sekce a odkaz u levé hrany. Tady stojí přímo
      v bloku s `text-align:center`, takže ho centruje samo
      zarovnání textu. */
.ftp-dukaz { max-width:38rem; margin-inline:auto; text-align:center }
.ftp-dukaz::before { content:""; display:block; width:44px; height:2px;
  background:var(--ftz-osa); margin:0 auto var(--ftz-6) }
.ftp-dukaz-v { margin:0; font-family:var(--ftz-di); font-weight:400;
  font-size:clamp(23px,2.7vw,34px); line-height:1.28;
  letter-spacing:-.02em; color:var(--ftz-graphite) }
.ftp-dukaz-v b { font-weight:400; color:var(--ftz-warm-ink) }
.ftp-dukaz-p { margin:var(--ftz-4) 0 0; font-size:16.5px;
  line-height:1.65; color:var(--ftz-body) }
.ftp-dukaz-i { margin:var(--ftz-5) 0 0; font-family:var(--ftz-data);
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  line-height:2; color:var(--ftz-stone) }
/* ⚠️ ZALOMIT SE SMÍ MEZI JMÉNY, NE UVNITŘ. „Český hydrometeorologický
   ústav" se lámal na „ČESKÝ / HYDROMETEOROLOGICKÝ ÚSTAV" a četlo se
   to jako dvě různé instituce. `nowrap` je tu bezpečný, protože
   nejdelší jméno má na 375 px pořád rezervu — měřeno; v projektu
   už jednou `nowrap` přetekl o 163 px, tak se to neodhaduje. */
.ftp-dukaz-i span { white-space:nowrap }
.ftp-dukaz-o { margin-top:var(--ftz-5) }

/* ── ZÁVĚR: MENŠÍ A TIŠŠÍ ────────────────────────────────────────
   ⚠️ ZÁVĚR BYL STEJNĚ VELKÝ JAKO HERO. Dvě plochy téže váhy na
      jedné stránce znamenají, že ani jedna není hlavní. Poslední
      sekce má doprovodit ven, ne začít znovu. */
.ftp-sekce--tit ~ .ftp-zaver .ftp-zaver-in,
.ftp-zaver--tit .ftp-zaver-in { padding-block:clamp(44px,5vw,72px) }
.ftp-zaver--tit .ftp-h2 { font-size:clamp(23px,2.6vw,32px) }
.ftp-zaver--tit .ftp-p { max-width:44ch }
.ftp-zaver--tit .ftp-akce { display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:var(--ftz-3) var(--ftz-6); width:auto }
.ftp-zaver--tit .ftp-akce .ftp-cta { width:auto }
.ftp-zaver--tit .ftp-akce .ftp-cta2 { background:none; border:0;
  padding:0 2px; min-height:44px; width:auto; text-align:center;
  font-weight:500;
  text-underline-offset:6px;
  text-decoration:underline solid rgba(255,252,248,.32) }
.ftp-zaver--tit .ftp-akce .ftp-cta2:hover { background:none;
  color:var(--ftz-ember); text-decoration-color:var(--ftz-ember) }


/* ── PÁSY PŘES CELOU ŠÍŘKU ───────────────────────────────────────
   ⚠️ NÁŠ BLOK JE 81 % TITULKY A CELOU DOBU JEN 952 px. Změřeno
      16. 9. 2026 na `nahled-titulka-cela.html`: stránka má 3 464 px
      a náš blok z toho 2 810 px — zatímco oba cizí pásy nad ním
      (obrázek v záhlaví a dlaždice) jdou přes celých 1 330 px.
      Stránka se tedy pod dlaždicemi zúží a už se nikdy nerozšíří.
      Je to táž vada, kterou má projekt zapsanou z auditu živého
      obchodu („stránka má tři šířky"), jen o patro níž — a je to
      první věc, kterou má titulka jinak než vzory ve složce
      `Vzor/`: tam se světlé a tmavé pásy střídají přes celé okno.

   ⚠️ PLOCHA SE ROZTAHUJE STÍNEM, NE ŠÍŘKOU. Obvyklý recept je
      `margin-inline:calc(50% - 50vw)` a tady by byl chyba: `vw`
      počítá i posuvník. Změřeno v tomhle okně — `innerWidth` 1345,
      `clientWidth` 1330 — takže by každá stránka obchodu jela
      o 15 px do strany. `box-shadow` do rozvržení nemluví vůbec:
      po zapnutí zůstala šířka prvku 932 px a přetečení 0.

   ⚠️ `clip-path` NENÍ OZDOBA, TEPRVE ON DĚLÁ Z PLOCHY PÁS. Stín se
      šíří do všech čtyř stran, takže bez svislého ořezu by 100vmax
      přebarvilo celou stránku. Kdo sáhne na jedno, musí sáhnout
      i na druhé — hlídá test.

   ⚠️ SVISLÝ OŘEZ NEZABRÁNÍ PŘETEČENÍ, JEN PŘEKRESLÍ. Zkoušel jsem
      protáhnout osovou rysku závěru přes celý pás
      (`::after { left:-100vmax; right:-100vmax }`) a spoléhal na
      to, že ji `clip-path` rodiče udrží. Neudrží: `clip-path` je
      ořez při kreslení, ne při počítání posuvu. **Naměřeno 1 146 px
      vodorovného přetečení.** Ryska proto zůstává v sloupci a čte
      se jako značka pod textem, ne jako podtržení pásu.

   ⚠️ PÁS MUSÍ BÝT JEDNOBAREVNÝ. Stín umí jedinou barvu, takže vedle
      přechodu vznikne svislý šev — na závěru byl vidět na první
      pohled. Závěr proto na titulce přechod ani jantarovou záři
      nemá; jantar na té ploše zůstává tam, kde něco dělá, tedy
      na tlačítku. */
.ftp-zaver--tit { clip-path:inset(0 -100vmax) }
/* O pixel víc, aby se vešel vlásek pásu — viz níž. */
.ftp-pas { clip-path:inset(-1px -100vmax) }

/* ⚠️ ÚVOD JDE PŘES CELOU ŠÍŘKU — 19. 9. 2026, a je to konečně
   měřené. Dvakrát předtím tu stálo, že to nejde: `100vw` počítá
   i posuvník (změřeno `innerWidth` 1440 vs `clientWidth` 1425),
   takže pás přeteče o 15 px a stránka jede do strany. To platí —
   jen z toho plynul špatný závěr.

   Přetečení se totiž dá OŘÍZNOUT. `overflow-x:clip` nedělá
   posuvnou schránku (na rozdíl od `hidden`), takže nerozbíjí
   `position:sticky` ani lepivou hlavičku Shoptetu, která je
   `fixed`. Naměřeno ve čtyřech variantách:

       clip na body        přetečení 8 px
       clip na html        přetečení 8 px
       clip na obojím      přetečení 0 px   ← tohle
       jen záporné okraje  přetečení 8 px

   Ořezat se musí OBOJE. Samotné `<body>` nestačí, protože
   dokument se roztáhne na `<html>`; samotné `<html>` nestačí taky.

   ⚠️ CO SE OŘÍZNE: pás sahá od −8 px do 1432 px při okně 1425.
      Z fotky tedy zmizí osm pixelů vlevo a sedm vpravo — na
      fotografii je to neznatelné a text stojí uprostřed, daleko
      od obou krajů.

   ⚠️ ROZSAH JE JEN TITULKA. Visí to na `:has(.ftp-uvod)`, což je
      prvek, který má jen ona. Ostatní stránky obchodu se ořezu ani
      nedotknou. Projekt se o `:has()` opírá i jinde (skrývání
      cizích pásů), takže to není nová závislost.

   ⚠️ ŽÁDNÉ ZAOBLENÍ. Pás přes celou šířku se zaoblenými rohy
      vypadá jako nedopatření — roh by se lámal o okraj okna. */
html:has(.ftp-uvod), body:has(.ftp-uvod) { overflow-x:clip }
.ftp-uvod { width:100vw; margin-inline:calc(50% - 50vw) }
.ftp-uvod .ftp-uvod-drah, .ftp-uvod .ftp-uvod-in { border-radius:0 }

/* ⚠️ PÁS DOSEDÁ NA MENU. `.container.content-wrapper` má na
   Shoptetu `padding-top:40px` (opsáno ze živého obchodu) a nad
   pásem přes celou šířku by z něj byl proužek papíru, který
   vypadá jako mezera po něčem odstraněném. Na titulce se proto
   ruší — odstup si nese úvod sám dole. Číslo 40 se sem nepíše:
   ruší se celé odsazení, takže se nemá s čím rozejít. */
body:has(.ftp-uvod) .content-wrapper { padding-top:0 }

/* Pás důvěry. Mezi mřížkou zboží a závěrem bylo 1 448 px
   nepřerušeného papíru a nejdůležitější věta stránky v něm stála
   jako poznámka pod čarou. */
/* ⚠️ PÁS SE ODLIŠUJE VLÁSKEM, NE TÓNEM — A ROZHODLO O TOM MĚŘENÍ.
      Chtěl jsem teplejší, tmavší plochu, jakou mají vzory. Spočítal
      jsem proto kontrast všech barev, které pás nese, proti šesti
      kandidátům. Každý tmavší tón shodí ty dvě, na kterých pás
      stojí:

        plocha    kámen   teplý inkoust
        papír     4,97    4,87   (dnešek)
        #EFE9E0   4,60    4,51   (těsně)
        #EDE6DB   4,48    4,39   ← PROPADLO
        #E0D9CE   3,96    3,88   ← PROPADLO

      Jména institucí jsou `--ftz-stone` v 11,5 px a odkaz na studie
      je `--ftz-warm-ink`; projekt má zapsané, že kámen je
      NEJSVĚTLEJŠÍ PŘÍPUSTNÁ barva na papíře. Tmavší pás tu rezervu
      spotřebuje hned. Kost jde opačným směrem a kontrast ZVEDÁ
      (4,97 → 5,43 a 4,87 → 5,32), jenže proti papíru má jen
      1,09 : 1 — plochu v tom rozdílu nepoznám ani na snímku.

      Řeší to vlásek: druhý stín je o pixel větší a vykreslí se pod
      prvním, takže kolem pásu vznikne linka v barvě `--ftz-rule`.
      Svislý ořez ji proto musí pustit ven — `inset(-1px …)`, ne
      `inset(0 …)`. Kost je navíc táž plocha jako karty zboží;
      zvednutý povrch je v systému vždycky kost, takže se tím
      nezavádí nová barva. */
.ftp-pas { margin:0; padding-block:clamp(56px,7vw,96px);
  background:var(--ftz-bone);
  box-shadow:0 0 0 100vmax var(--ftz-bone),
             0 0 0 calc(100vmax + 1px) var(--ftz-rule) }

/* Závěr: pás navazuje rovnou na pás důvěry, proto `margin-top:0`
   a nulové zaoblení — dva pásy se v předloze dotýkají, pruh papíru
   mezi nimi vypadá jako nedodělek. */
.ftp-zaver--tit { margin-top:0; border-radius:0;
  background:var(--ftz-slate);
  box-shadow:0 0 0 100vmax var(--ftz-slate) }

/* ── HERO NA FOTCE ───────────────────────────────────────────────
   ⚠️ ZÁSTIN JE ZAPEČENÝ V JPEGU, NE V CSS. Kontrast textu na fotce
      se musí měřit z pixelů toho, co se vydá — a to jde jedině
      tehdy, když je ztmavení součástí souboru. Generátor měří
      nejhorší pixel pod textem a pod 4,5 : 1 spadne; naměřeno
      9,72 · 9,72 · 8,45 : 1.

   ⚠️ JEN NA OBSAHOVÝCH STRÁNKÁCH. Na titulce je nad obsahem
      obrázek v záhlaví 391 px a pod ním čtyři dlaždice; pátý obraz
      v řadě by byl zmatek. Na obsahové stránce má záhlaví 199 px
      (změřeno 14. 9. 2026), takže hero je první velký obraz. */
.ftp-hero--foto { background-size:cover; background-position:center;
  background-repeat:no-repeat }
.ftp-hero--foto .ftp-hero-in { padding-block:var(--ftz-8) }
.ftp-hero--foto { display:flex; align-items:center;
  justify-content:center; padding:clamp(24px,3.6vw,52px) }
.ftp-hero--foto .ftp-hero-in { width:100%;
  background:rgba(28,32,36,0.88); border-radius:var(--ftz-r-v);
  padding:clamp(34px,4.4vw,60px) clamp(22px,3.2vw,44px) }
/* ⚠️ DELŠÍ PEREX POTŘEBUJE MENŠÍ PÍSMO A ŠIRŠÍ MÍRU. Perex pro firmy
   vyrostl na tři věty (zadání majitele 20. 9. 2026) a v 19 px na
   46 znaků se lámal na pět řádků — deska pak byla vyšší než nadpis
   nad ní a hero přestalo být hero. 17,5 px na 58 znaků jsou tři
   řádky. Je to táž úvaha jako u desky úvodu: šířka a stupeň se
   ladí spolu, ne každé zvlášť. */
.ftp-hero--foto .ftp-lead { font-size:clamp(15.5px,1.5vw,17.5px);
  max-width:58ch; text-wrap:pretty }
@media (min-width:760px) {
  .ftp-hero--foto .ftp-hero-in { max-width:60%;
    margin-left:auto; margin-right:auto }
}

/* ── KARTY PŘES HRANU HERA ───────────────────────────────────────
   Podpis vzorových webů: řada karet s obrázkem, která přesahuje
   spodní hranu hera a táhne oko dolů.

   ⚠️ ZÁPORNÝ OKRAJ JEN SVISLE. Projekt už jednou naměřil přetečení
      12 px na pěti prvcích, protože se záporný okraj dal i do
      stran. Svislý přetéct nemůže. */
.ftp-prekryv { display:grid; gap:var(--ftz-5);
  grid-template-columns:1fr; margin-top:calc(-1 * var(--ftz-8));
  position:relative; z-index:2 }
@media (min-width:700px) {
  .ftp-prekryv { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
/* ⚠️ V SEKCI SE KARTY NEPŘEKRÝVAJÍ. Od 30. 9. 2026 stojí karty
   kategorií na „Jak vybrat" dole pod nadpisem „Máte vybráno?"
   (majitel: nahoře výběr, zboží až dole). Záporný okraj by je tam
   vtáhl do nadpisu sekce. */
.ftp-sekce .ftp-prekryv { margin-top:0 }
.ftp-pk { display:flex; flex-direction:column; overflow:hidden;
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-k); box-shadow:var(--ftz-e2);
  text-decoration:none; color:inherit;
  transition:transform var(--ftz-cas) var(--ftz-krivka),
             box-shadow var(--ftz-cas) var(--ftz-krivka) }
/* ⚠️ SELEKTOR ZAČÍNÁ NAŠÍ TŘÍDOU, NE PRVKEM. Napoprvé tu stálo
   `a.ftp-pk:hover` a test to shodil — pravidlo projektu zní, že
   zápis mimo naše třídy musí mít `body:has(.ftp)`. Zvedá se jen
   to, na co se dá kliknout, takže na to má karta vlastní třídu. */
.ftp-pk--odkaz:hover { transform:translateY(-3px);
  box-shadow:var(--ftz-e3) }
.ftp-pk-f { display:block; position:relative; aspect-ratio:4/3;
  background:#EAE4DA; overflow:hidden }
.ftp-pk-f img { display:block; width:100%; height:100%;
  object-fit:cover }
/* Karta bez obrázku: štítek stojí na kosti, ne na fotce. Plocha
   po obrázku se nenechává prázdná — karta se prostě zkrátí. */
.ftp-pk-f--bez { display:block; padding:var(--ftz-5) var(--ftz-5) 0;
  background:var(--ftz-bone); aspect-ratio:auto; min-height:0 }
.ftp-pk-f--bez .ftp-pk-s { position:static; color:var(--ftz-warm-ink) }

.ftp-pk-s { position:absolute; left:var(--ftz-4); top:var(--ftz-4);
  background:var(--ftz-paper); color:var(--ftz-graphite);
  border-radius:100px; padding:5px 11px;
  font-family:var(--ftz-data); font-weight:500; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase }
/* ⚠️ TEXT KARTY JE NA STŘED — ZADÁNÍ MAJITELE 19. 9. 2026.
   Celá stránka stojí na ose: nadpis, perex, osa pod nadpisem
   i závěr jsou na střed a tyhle tři karty jako jediné začínaly
   u levé hrany. Majitel chtěl „alespoň ten nadpis"; na střed jde
   celý obsah, protože nadpis na střed nad větou u kraje vypadá
   jako omyl v sazbě, ne jako záměr.

   ⚠️ NEPLATÍ TO NA DLOUHÝ TEXT. Karty otázek („Jak dlouho v tom
   budete?") mají tři až čtyři řádky výkladu a na střed by z nich
   byl roztřepený blok. Zůstávají vlevo — je to táž hranice, kterou
   má projekt zapsanou od verze 7: zarovnání na střed se nepropadá
   do souvislého textu.

   Štítek na fotce zůstává vlevo nahoře. Je to popisek snímku,
   ne řádek sazby. */
.ftp-pk-t { padding:var(--ftz-5); display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap:var(--ftz-3); flex:1 }
.ftp-pk-t b { font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto;
  font-size:18px; line-height:1.25; color:var(--ftz-graphite);
  letter-spacing:-.01em }
.ftp-pk-t span { font-size:14.5px; line-height:1.6;
  color:var(--ftz-body) }
.ftp-pk-v { margin-top:auto; display:inline-flex; align-items:center;
  gap:7px; font-family:var(--ftz-data); font-weight:500; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ftz-warm-ink) }
.ftp-pk-v .ftp-ikona { width:15px; height:15px }

/* ── DROBNÝ TEXT NA TMAVÉ PLOŠE ──────────────────────────────────
   ⚠️ `--ftz-stone` JE NEJSVĚTLEJŠÍ PŘÍPUSTNÁ **NA PAPÍŘE**. Na
      břidlici z ní vyjde 2,5 : 1 — a přesně to se stalo poznámce
      pod deskou „Co chlazení nenahradí": naměřeno **2,95 : 1**.
      Projekt má tuhle past zapsanou od pruhu institucí, kde se
      řešila úplně stejně. */
.ftp-tmavy .ftp-p--drobne,
.ftp-zaver .ftp-p--drobne { color:var(--ftz-dim) }

/* ── ČÍSLOVANÝ POSTUP ────────────────────────────────────────────
   Číslo je součást sdělení, ne ozdoba: říká, co je první. Kreslí
   se počítadlem, ne ručně psanou číslicí — po vložení položky by
   se ručně psaná řada rozešla se skutečností. */
.ftp-kroky { display:grid; gap:var(--ftz-4); margin:0; padding:0;
  list-style:none; counter-reset:ftp-kr }
.ftp-kroky li { counter-increment:ftp-kr; display:grid;
  grid-template-columns:auto 1fr; gap:.15rem var(--ftz-5);
  align-items:baseline; padding:var(--ftz-4) 0;
  border-top:1px solid var(--ftz-line) }
.ftp-kroky li:first-child { border-top:0; padding-top:0 }
.ftp-kroky li::before { content:counter(ftp-kr);
  grid-row:1 / span 2; font-family:var(--ftz-data); font-weight:500;
  font-size:15px; font-variant-numeric:tabular-nums;
  color:var(--ftz-stone); min-width:1.4em }
.ftp-kroky li b { font-size:16px; font-weight:600;
  color:var(--ftz-graphite) }
.ftp-kroky li span { grid-column:2; font-size:14.5px; line-height:1.6;
  color:var(--ftz-body) }

/* ── ŘÁDKY POJEM — HODNOTA ───────────────────────────────────────
   Na 760 px a výš dva sloupce, níž pod sebou. Není to tabulka:
   editor Shoptetu zahazuje `dl`, a `table` by se na 320 px
   nezalomila. */
/* ── PRODUKTOVÁ KARTA ────────────────────────────────────────────
   ⚠️ DVĚ NOVÉ KOMPONENTY, A OBĚ AŽ TEĎ. Do 21. 9. 2026 neměl
      projekt prostý odrážkový seznam vůbec — všechno byly
      strukturované prvky (řádky, kroky, karty, rozbalovátka).
      U produktové karty to nestačí: „proč to koupit" jsou čtyři
      věty bez dvojice pojem–hodnota, takže `.ftp-radky` by je
      nutily do tvaru, který nemají.

   ⚠️ ODRÁŽKA JE RYSKA OSY, NE PUNTÍK. Značka projektu je vodorovná
      ryska mezi studeným a teplým pólem; puntík by byl první
      cizí tvar na stránce. */
.ftp-body { list-style:none; margin:0; padding:0; display:grid;
  gap:var(--ftz-3) }
.ftp-body li { position:relative; padding-left:var(--ftz-5);
  font-size:15.5px; line-height:1.6; color:var(--ftz-body) }
.ftp-body li::before { content:""; position:absolute; left:0;
  top:.65em; width:14px; height:2px; background:var(--ftz-osa) }

/* ⚠️ CITACE NESE I TO, CO STUDIE NEŘÍKÁ. Samotné zjištění by byl
      marketingový výkřik; teprve druhá věta z něj dělá důkaz.
      Proto jsou to dva různé stupně a druhý je tišší, ne menší —
      pod 14 px by se přestal číst.

   ⚠️ NEUTRÁLNÍ, NE CHLADNÁ. Do 29. 9. 2026 měla citace chladný
      rámeček a podklad — i na kartě vyhřívaných rukavic. Pólová
      barva patří k teplotě, o které se mluví, ne k citaci. */
.ftp-cit { border:1px solid var(--ftz-rule);
  border-left:3px solid var(--ftz-stone); background:var(--ftz-bone);
  padding:var(--ftz-4) var(--ftz-5);
  border-radius:0 var(--ftz-r-k) var(--ftz-r-k) 0;
  margin:var(--ftz-5) 0 0; font-size:15px; line-height:1.6 }
.ftp-cit b { color:var(--ftz-graphite) }
.ftp-cit-z { display:block; margin-top:var(--ftz-3);
  padding-top:var(--ftz-3); border-top:1px solid var(--ftz-rule);
  font-size:14px; color:var(--ftz-stone) }
.ftp-cit-z b { color:var(--ftz-body) }

/* ══ PRODUKTOVÁ KARTA v4 · 29. 9. 2026 — na střed, jazykem webu ═════
   Karta je v záložkách jako u Aktinu. Popis produktu má 932 px
   (707 při okně 961) a na telefonu kolem 345.

   Majitel po v3: „boxy bych zarovnal na střed, i písmo — vše na střed,
   ať je to symetrické … fonty udělej lepší, ale jednoduché … dole ten
   box bych odstranil."

   ⚠️ SAZBA JE TÁŽ JAKO NA PRODEJNÍCH STRÁNKÁCH WEBU. Ty stojí na střed
      (`.ftp-sekce--stred`) a nadpis sekce nese pod sebou osu 44 × 2 px.
      Karta v3 měla vlastní lehký řez 300 s kurzívou a stála vlevo —
      četla se jako jiný web. Teď dědí `.ftp-h2` bez úprav řezu.

   ⚠️ ZVÝRAZNĚNÍ JE BARVA PÓLU, NE KURZÍVA. Manuál značky: „Tučné se
      nepoužívá — na zdůraznění stačí barva a mezera." Slovo v nadpisu
      („Co Vám přinese") stojí v inkoustu svého pólu.

   ⚠️ NA STŘED JEN KRÁTKÉ VĚCI. Karty, kroky, štítky, parametry,
      studie, péče — věty do dvou řádků. Otázky a odpovědi zůstávají
      vlevo jako na celém webu (viz `.ftp-sekce--stred .ftp-faq`):
      rozbalovací seznam na střed se čte špatně a šipka by neměla kam
      patřit. Sloupec otázek je ale užší a stojí na střed.

   ⚠️ JE Z MATERIÁLU WEBU, NE NOVÁ. Pólová linka nahoře jako karty na
      titulce a v Jak vybrat, kolečko se značkou `.ftp-zb-i`, štítek
      v kapitálkách, tlačítko `.ftp-cta3`. Zákazník má poznat, že je
      pořád v témž obchodě.

   ⚠️ PREFIX `ftp-pd-`. `.ftp-pk`, `.ftp-dvoj` i `.ftp-mez` už
      v projektu jsou a znamenají něco jiného.

   ⚠️ PÓL SE BERE Z RODINY KUSU, NE Z KATEGORIE. Vyhřívaná podložka
      pro psy je v kategorii Pro psy, ale mluví o teple — pólová
      barva patří k teplotě, o které karta mluví. */
.ftp-pd, .ftp-pd--chlad { --pd-pol:var(--ftz-cold);
  --pd-ink:var(--ftz-cold-ink); --pd-tint:#E7F0F5;
  --pd-zar:rgba(127,179,204,.18); --pd-zar2:rgba(127,179,204,.08);
  --pd-fajfka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.4l2.7 2.7 5.7-6' fill='none' stroke='%231F5A75' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.ftp-pd--teplo { --pd-pol:var(--ftz-warm); --pd-ink:var(--ftz-warm-ink);
  --pd-tint:#FBEDE3;
  --pd-zar:rgba(255,138,76,.13); --pd-zar2:rgba(255,138,76,.06);
  --pd-fajfka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.4l2.7 2.7 5.7-6' fill='none' stroke='%23B14A18' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
/* ⚠️ v5 · 30. 9. 2026 — „ještě více luxusně, s hezkými prvky, vše
      kompatibilní se Shoptetem" (majitel). Všechno nové je ve
      stylopisu: bloky narostly jen o dva znaky v medailonu, takže
      limit 8 192 znaků zůstává daleko.
   ⚠️ ZÁŘE (`--pd-zar`) JE PÓL V KRESBĚ, NE V PÍSMU. Prstence kolem
      znaku a slabý přechod nahoře úvodu — text leží na kosti.
      U tepla je záře slabší (.13), protože teplý inkoust má na kosti
      nejmenší rezervu (4,87 : 1).
   ⚠️ PÓL JEN TAM, KDE SE MLUVÍ O TEPLOTĚ. Medailon úvodu a „Jak to
      funguje" (princip chlazení nebo hřátí) ano; kroky použití, štítky
      „pro koho" a dotaz k produktu mají neutrální kresbu a osu. */
.ftp-pd { text-align:center }
.ftp-pd .ftp-h2 { margin:0 auto var(--ftz-6);
  font-size:clamp(26px,3.2vw,34px) }
.ftp-pd .ftp-h2::after { content:""; display:block; width:44px;
  height:2px; margin:var(--ftz-4) auto 0; background:var(--ftz-osa);
  border-radius:2px }
.ftp-pd em { font-style:normal; color:var(--pd-ink) }

/* ── ÚVOD v5 — panel se znakem principu a září pólu ──────────────
   Kost, vlásek, stín e2 a osa na spodní hraně jako hero stránek.
   Přechod je jen nahoře a slabý; text leží na kosti. */
.ftp-pd-uvod { position:relative; overflow:hidden;
  padding:clamp(34px,5vw,56px) clamp(18px,4vw,48px) clamp(32px,4.4vw,50px);
  background:radial-gradient(120% 70% at 50% 0%,var(--pd-zar),
    transparent 60%),var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-v);
  box-shadow:var(--ftz-e2) }
.ftp-pd-uvod::after { content:""; position:absolute; left:0; right:0;
  bottom:0; height:3px; background:var(--ftz-osa) }
/* Štítek mezi dvěma vlásky — kapitálky, jak se sází titulní list. */
.ftp-pd-uvod .ftp-stitek { display:flex; align-items:center;
  justify-content:center; gap:14px; margin:0 0 var(--ftz-4);
  color:var(--pd-ink) }
.ftp-pd-uvod .ftp-stitek::before,
.ftp-pd-uvod .ftp-stitek::after { content:""; flex:0 0 28px; height:1px;
  background:currentColor; opacity:.45 }
/* Medailon se znakem. Dva prstence jsou „záře" — teplota, která se
   šíří od zdroje. ⚠️ Jen dlouhé zápisy pozadí: kresbu nese
   `.ftp-znak--*` a zkratka `background:` by ji smazala. */
.ftp-pd-znak { width:64px; height:64px; margin:0 auto var(--ftz-6);
  background-color:var(--ftz-bone); background-size:34px 34px;
  box-shadow:0 0 0 1px var(--ftz-rule),0 0 0 10px var(--pd-zar),
    0 0 0 21px var(--pd-zar2) }
.ftp-pd-t { margin:0 auto var(--ftz-4); max-width:18ch;
  font-family:var(--ftz-di); font-weight:400; font-optical-sizing:auto;
  font-variation-settings:'opsz' 144; font-size:clamp(34px,5vw,52px);
  line-height:1.04; letter-spacing:-.028em; color:var(--ftz-graphite);
  text-wrap:balance }
.ftp-pd-uvod .ftp-lead { margin:0 auto; max-width:54ch;
  font-size:clamp(17px,1.9vw,19px); line-height:1.6;
  color:var(--ftz-body); text-wrap:pretty }
/* ⚠️ ZVÝRAZNĚNÍ OSOU ZNAČKY. Klíčové sdělení úvodu podtrhává tatáž
      osa ze studeného do teplého, která stojí pod nadpisy webu. Je
      to jediný podpis, který se na stránkách opakuje — tady ukazuje
      to podstatné. `clone`, aby se podtržení nerozpadlo na dvou
      řádcích. */
.ftp-pd-uvod .ftp-lead b { font-weight:500; color:var(--ftz-graphite);
  background:var(--ftz-osa) 0 100% / 100% 2px no-repeat;
  padding-bottom:2px; -webkit-box-decoration-break:clone;
  box-decoration-break:clone }
/* ⚠️ CO ŠABLONA V POPISU NASTAVÍ A MY NE — 1. 10. 2026, naměřeno
      v Edge na zrcadle živého produktu. Předpona `.ftp .ftp-pd` (viz
      „POPIS: co Vám přinese") vyhraje jen u vlastností, které naše
      zápisy uvádějí. Odrážka šablony má navíc `position:absolute;
      left:0; top:3px` a položka `padding-left:15px` — naše odrážky
      to neuváděly, a tak číslo karty sedělo v rohu a fajfky a tečky
      ležely přes text. Ruší se to tady, PŘED seznamy: kde seznam
      odsazení uvádí, vyhraje pořadím při stejné specificitě. */
.ftp .ftp-pd :is(.ftp-pd-usp,.ftp-pd-plus,.ftp-pd-ano,.ftp-pd-tagy,
  .ftp-pd-kroky,.ftp-pd-list) li { padding-left:0 }
.ftp .ftp-pd :is(.ftp-pd-usp,.ftp-pd-plus,.ftp-pd-ano,.ftp-pd-tagy,
  .ftp-pd-kroky,.ftp-pd-list) li::before { position:static; left:auto;
  top:auto }
.ftp-pd-usp { list-style:none; display:flex; flex-wrap:wrap;
  justify-content:center; gap:var(--ftz-2); margin:var(--ftz-5) 0 0;
  padding:0 }
.ftp .ftp-pd .ftp-pd-usp li { display:inline-flex; align-items:center; gap:10px;
  margin:0; padding:8px 16px 8px 14px; font-size:14px; font-weight:500;
  color:var(--ftz-graphite); background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-p);
  box-shadow:var(--ftz-e1) }
/* Fajfka kreslená v CSS — dvě hrany otočeného obdélníku. */
.ftp .ftp-pd .ftp-pd-usp li::before { content:""; flex:0 0 auto; width:9px;
  height:5px; margin-top:-3px; border-left:2px solid var(--pd-ink);
  border-bottom:2px solid var(--pd-ink); transform:rotate(-45deg) }

/* ── ZÁLOŽKY ─────────────────────────────────────────────────────
   ⚠️ BEZ SKRIPTU LIŠTA NENÍ A PANELY STOJÍ POD SEBOU, každý se svým
      nadpisem. Skript přidá `ftp--js` a teprve pak skrývá. Kdyby
      se nenačetl, zákazník uvidí všechno, ne nic.
   ⚠️ AKTIVNÍ ZÁLOŽKU PODTRHÁVÁ OSA, ne pólová barva. Záložka „Péče"
      o teplotě nemluví; osa je podpis značky, pól údaj. */
.ftp-zal { margin:var(--ftz-7) 0 0 }
.ftp-zal-l { display:none }
/* ⚠️ v5: TENTÝŽ TVAR JAKO SEGMENTOVÝ PŘEPÍNAČ NA STUDIÍCH (`.ftp-seg`)
      — kapsle na #EAE4DA, aktivní volba na kosti se stínem. Zákazník
      ho zná z webu. Na počítači široká podle obsahu a na střed, na
      telefonu přes celou šířku a roluje. */
.ftp--js .ftp-zal-l { display:flex; width:fit-content; max-width:100%;
  gap:4px; margin:0 auto var(--ftz-7); padding:5px;
  background:#EAE4DA; border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-p); overflow-x:auto; scrollbar-width:none }
.ftp-zal-l::-webkit-scrollbar { display:none }
/* Popisky záložek v monu jako řazení na kategorii a štítky webu —
   je to navigace, ne text. */
/* ⚠️ `--ftz-body`, NE `--ftz-stone`: na #EAE4DA má šedá 4,39 : 1,
      tedy pod prahem (změřeno u `.ftp-seg-b`). Tělo textu má 8,3. */
.ftp-zal-o { position:relative; flex:0 0 auto; margin:0;
  padding:12px 18px 14px; font-family:var(--ftz-data);
  font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ftz-body); background:none;
  border:0; border-radius:var(--ftz-r-p); cursor:pointer;
  white-space:nowrap;
  transition:color var(--ftz-cas) var(--ftz-krivka),
    background var(--ftz-cas) var(--ftz-krivka),
    box-shadow var(--ftz-cas) var(--ftz-krivka) }
.ftp-zal-o:hover { color:var(--ftz-graphite) }
.ftp-zal-o[aria-selected="true"] { color:var(--ftz-graphite);
  background:var(--ftz-bone); box-shadow:var(--ftz-e2) }
/* Pod aktivní volbou krátká osa — podpis značky, ne pól. */
.ftp-zal-o[aria-selected="true"]::after { content:""; position:absolute;
  left:50%; bottom:6px; width:18px; height:2px; margin-left:-9px;
  border-radius:2px; background:var(--ftz-osa) }
.ftp-zal-o:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }
/* Na telefonu se lišta roluje do strany a začíná vlevo — na střed
   by první záložka utekla z obrazovky. */
@media (max-width:620px) { .ftp--js .ftp-zal-l { width:auto;
  justify-content:flex-start; gap:2px } }
.ftp-zal-p { margin:0 0 var(--ftz-8) }
.ftp--js .ftp-zal-p { display:none; margin:0 }
.ftp--js .ftp-zal-p.je { display:block;
  animation:ftp-rozbal var(--ftz-cas-p) var(--ftz-krivka) }

/* ⚠️ SEZNAMY V POPISU PRODUKTU MAJÍ PŘED SEBOU `.ftp .ftp-pd`.
      Naměřeno 1. 10. 2026 na živém produktu — šablona Waltz má
         .p-detail .tab-content ul li { display:block;
             padding-left:15px; position:relative }        (0,2,2)
         …ul li:before { content:(ikona šablony); position:absolute;
             left:0; top:3px; color:var(--color-primary) } (0,2,3)
      a přebíjela tím naše `.ftp-pd-plus li` (0,1,1): karty „Co Vám
      přinese" měly místo čísla prázdné kolečko v levém horním rohu
      a text posunutý doleva, odrážky ostatních seznamů ležely přes
      text. Majitel: „absolutně nesymetrické … text se překrývá".
      V náhledu nic vidět nebylo — ten šablonu Shoptetu nenačítá.
      S předponou je to (0,3,1) a (0,3,2). Předponu nesou VŠECHNY
      zápisy `li` a `li::before` seznamů karty, ať se mezi sebou
      přebíjejí ve stejném pořadí jako dřív; hlídá test. */
/* ── POPIS: co Vám přinese ───────────────────────────────────────
   Karty jako na titulce: kost, vlásek, pólová linka nahoře. Číslo
   v kolečku v barvě pólu na jeho světlém tónu — nad větou, na střed. */
/* ⚠️ OD 30. 9. 2026 VEČER NADPIS A VĚTA. Majitel: „zvýrazni to, co je
      marketingově důležité". Zvýrazněný je nadpis přínosu (Fraunces),
      věta pod ním ho dokládá (Inter). Čtyři karty stojí 2 × 2 — ve
      čtyřech sloupcích by se věta lámala po dvou slovech. */
.ftp-pd-plus { list-style:none; counter-reset:ftp-pl; display:grid;
  gap:var(--ftz-4); margin:0; padding:0; grid-template-columns:1fr }
@media (min-width:620px) {
  .ftp-pd-plus { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
.ftp .ftp-pd .ftp-pd-plus li { position:relative; overflow:hidden;
  counter-increment:ftp-pl; display:flex; flex-direction:column;
  align-items:center; margin:0;
  padding:var(--ftz-6) var(--ftz-5) var(--ftz-5);
  background:radial-gradient(120% 60% at 50% 0%,var(--pd-zar2),
    transparent 70%),var(--ftz-bone);
  border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-v); box-shadow:var(--ftz-e2);
  font-family:var(--ftz-ui); font-size:15px; line-height:1.55;
  color:var(--ftz-body); text-wrap:pretty }
.ftp-pd-plus li b { display:block; margin:0 0 var(--ftz-2);
  font-family:var(--ftz-di); font-weight:400; font-optical-sizing:auto;
  font-size:20px; line-height:1.25; letter-spacing:-.01em;
  color:var(--ftz-graphite); text-wrap:balance }
.ftp-pd-plus li span { display:block; max-width:34ch }
/* Číslo v prstenci pólu se slabou září — ne plný kotouč. */
.ftp .ftp-pd .ftp-pd-plus li::before { content:counter(ftp-pl,decimal-leading-zero);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:40px; height:40px; margin:0 0 var(--ftz-4);
  border-radius:50%; background:var(--ftz-bone);
  border:1px solid var(--pd-pol); box-shadow:0 0 0 5px var(--pd-zar2);
  font-family:var(--ftz-data); font-size:12px; font-weight:500;
  letter-spacing:.04em; color:var(--pd-ink) }
.ftp-pd-plus li::after { content:""; position:absolute; top:0; left:0;
  right:0; height:3px; background:var(--pd-pol) }
@media (max-width:519px) {
  .ftp .ftp-pd .ftp-pd-plus li { padding:var(--ftz-5) var(--ftz-4) var(--ftz-4) }
}
/* Jak to funguje: jeden rámeček — kresba, princip, vysvětlení a pod
   vláskem co princip umí. Ve v3 to byly tři kusy pod sebou a nebylo
   poznat, co k čemu patří. */
.ftp-pd-jak { margin:var(--ftz-7) 0 0;
  padding:var(--ftz-8) var(--ftz-5) var(--ftz-6);
  background:radial-gradient(90% 55% at 50% 0%,var(--pd-zar2),
    transparent 70%),var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-v);
  box-shadow:var(--ftz-e2) }
/* ⚠️ JEN DLOUHÉ ZÁPISY POZADÍ. Kresbu nese `.ftp-znak--*` jako
      `background-image`; zkratka `background:` by ji smazala. */
.ftp-pd-jak .ftp-zb-i { width:60px; height:60px;
  margin:0 auto var(--ftz-6); background-color:var(--ftz-bone);
  background-size:32px 32px;
  box-shadow:0 0 0 1px var(--ftz-rule),0 0 0 9px var(--pd-zar),
    0 0 0 19px var(--pd-zar2) }
.ftp-pd-jak > b { display:block; margin:0 0 var(--ftz-3);
  font-family:var(--ftz-di); font-weight:400; font-optical-sizing:auto;
  font-variation-settings:'opsz' 48; font-size:clamp(21px,2.6vw,25px);
  line-height:1.2; letter-spacing:-.012em; color:var(--ftz-graphite) }
.ftp-pd-jak > p { margin:0 auto; max-width:54ch; font-size:16px;
  line-height:1.65; color:var(--ftz-body); text-wrap:pretty }
/* Co princip umí: fajfka v barvě pólu nad krátkou větou. */
.ftp-pd-ano { list-style:none; display:grid; gap:var(--ftz-4);
  margin:var(--ftz-6) 0 0; padding:var(--ftz-6) 0 0;
  border-top:1px solid var(--ftz-rule);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)) }
.ftp .ftp-pd .ftp-pd-ano li { display:flex; flex-direction:column; align-items:center;
  gap:var(--ftz-3); margin:0; padding:0 var(--ftz-4); font-size:15px;
  line-height:1.5; color:var(--ftz-body); text-wrap:balance }
/* Fajfka v kolečku tónu pólu; kresba je v proměnné pólu, takže se
   s ním přebarví sama. Mezi třemi sděleními svislý vlásek. */
.ftp .ftp-pd .ftp-pd-ano li::before { content:""; flex:0 0 auto; width:32px;
  height:32px; border-radius:50%;
  background:var(--pd-tint) var(--pd-fajfka) center / 18px 18px no-repeat }
/* ⚠️ 1. 10. 2026 VEČER, snímek rukavic v Edge: po zrušení
      `padding-left:15px` šablony (reset u „co šablona nastaví") neměly
      položky žádné vodorovné odsazení. Delší věta ležela na vlásku
      zleva a zprava ji od něj dělila mezera mřížky. U vlásků je proto
      mezera sloupců nulová a odsazení položky souměrné — vlásek stojí
      přesně uprostřed. */
@media (min-width:620px) {
  .ftp-pd-ano { column-gap:0 }
  .ftp-pd-ano li + li { border-left:1px solid var(--ftz-rule) }
}
.ftp-pd-mini { margin:var(--ftz-6) 0 var(--ftz-3);
  font-family:var(--ftz-data); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ftz-stone) }
.ftp-pd-tagy { list-style:none; display:flex; flex-wrap:wrap;
  justify-content:center; gap:var(--ftz-2); margin:0; padding:0 }
.ftp .ftp-pd .ftp-pd-tagy li { display:inline-flex; align-items:center; gap:9px;
  margin:0; padding:8px 16px 8px 14px; font-size:14px;
  color:var(--ftz-body); background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-p);
  box-shadow:var(--ftz-e1) }
/* ⚠️ TEČKA, NE ČÁRKA. Vodorovná ryska osy se před textem četla jako
      minus („− Slévárny…" = „ne pro slévárny"). Tečka v barvách osy
      je neutrální značka položky. */
.ftp .ftp-pd .ftp-pd-tagy li::before { content:""; flex:0 0 auto; width:7px;
  height:7px; border-radius:50%; background:var(--ftz-osa) }

/* ── POUŽITÍ ─────────────────────────────────────────────────── */
/* Tři kroky vedle sebe, číslo nad větou — postup se čte zleva
   doprava jako na titulce. Na telefonu pod sebou. */
.ftp-pd-kroky { list-style:none; counter-reset:ftp-kr2; display:grid;
  gap:var(--ftz-4); margin:0; padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)) }
/* ⚠️ v5: KROKY JSOU ČASOVÁ OSA, NE TŘI KRABIČKY. Kolečka s číslem
      spojuje vlásek — postup se čte jako jedna cesta. Spojnice jen
      tam, kde kroky stojí v jedné řadě (od 760 px); na telefonu jsou
      pod sebou a čára by nevedla nikam. Neutrální: použití není
      údaj o teplotě. */
.ftp .ftp-pd .ftp-pd-kroky li { position:relative; counter-increment:ftp-kr2;
  display:flex; flex-direction:column; align-items:center;
  gap:var(--ftz-4); margin:0; padding:0 var(--ftz-3);
  font-size:15.5px; line-height:1.55; color:var(--ftz-body);
  text-wrap:balance }
.ftp .ftp-pd .ftp-pd-kroky li::before { content:counter(ftp-kr2,decimal-leading-zero);
  flex:0 0 auto; display:inline-flex; align-items:center;
  justify-content:center; width:48px; height:48px; border-radius:50%;
  background:var(--ftz-bone); color:var(--ftz-graphite);
  border:1px solid #CFC6B8;
  box-shadow:0 0 0 6px rgba(28,27,26,.035),var(--ftz-e1);
  font-family:var(--ftz-data); font-size:13px; font-weight:500;
  letter-spacing:.04em }
@media (min-width:760px) {
  .ftp-pd-kroky { grid-template-columns:none; grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr); gap:var(--ftz-5) }
  .ftp-pd-kroky li + li::after { content:""; position:absolute;
    top:24px; right:calc(50% + 36px);
    width:calc(100% + var(--ftz-5) - 72px); height:1px;
    background:var(--ftz-osa); opacity:.55 }
}
.ftp-pd-tip { max-width:640px; margin:var(--ftz-7) auto 0;
  padding:var(--ftz-6) var(--ftz-6) var(--ftz-4);
  background:radial-gradient(100% 120% at 50% 0%,rgba(255,252,248,.7),
    transparent 70%),var(--pd-tint);
  border-radius:var(--ftz-r-v) }
/* Štítek „Tip" v kapsli na kosti — nad textem, ne v řádku. */
.ftp-pd-tip b { display:inline-block; margin:0 0 var(--ftz-3);
  padding:5px 14px; font-family:var(--ftz-data); font-size:11.5px;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pd-ink); background:var(--ftz-bone);
  border-radius:var(--ftz-r-p); box-shadow:var(--ftz-e1) }
.ftp-pd-tip p { margin:0 0 var(--ftz-3); font-size:15.5px;
  line-height:1.6; color:var(--ftz-graphite); text-wrap:pretty }
@media (max-width:519px) { .ftp-pd-tip {
  padding:var(--ftz-5) var(--ftz-4) var(--ftz-3) } }

/* ── PARAMETRY: tabulka bez tabulky ──────────────────────────────
   Editor Shoptetu zahazuje `dl` a `table` se na 320 px nezalomí.
   ⚠️ SYMETRICKY KOLEM OSY: popisek doprava, hodnota doleva, mezi
      nimi mezera. Tak se na střed dá sázet i seznam údajů, aniž by
      každý řádek začínal jinde. Hodnota je text (Inter), číslo mono. */
/* ⚠️ v5: TECHNICKÝ LIST — kost, stín, osa nahoře a svislý vlásek
      mezi popiskem a hodnotou. Osa souměrnosti zůstává uprostřed. */
.ftp-pd-par { position:relative; overflow:hidden; max-width:680px;
  margin:0 auto; padding:var(--ftz-2) clamp(16px,4vw,40px);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-v); box-shadow:var(--ftz-e2) }
.ftp-pd-par::before { content:""; position:absolute; top:0; left:0;
  right:0; height:3px; background:var(--ftz-osa) }
.ftp-pd-par > div { display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--ftz-6);
  align-items:baseline; padding:var(--ftz-4) 0;
  border-bottom:1px solid var(--ftz-rule) }
.ftp-pd-par span { text-align:right; font-family:var(--ftz-data);
  font-size:11.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ftz-stone) }
.ftp-pd-par b { text-align:left; font-size:16px; font-weight:500;
  line-height:1.4; color:var(--ftz-graphite) }
.ftp-pd-par .ftp-pd-n b { font-family:var(--ftz-data);
  font-variant-numeric:tabular-nums }
.ftp-pd-par > div { background:linear-gradient(var(--ftz-rule),
  var(--ftz-rule)) 50% 50% / 1px 52% no-repeat }
.ftp-pd-par > div:last-child { border-bottom:0 }
@media (max-width:519px) { .ftp-pd-par > div { grid-template-columns:1fr;
  gap:4px; background:none } .ftp-pd-par span, .ftp-pd-par b {
  text-align:center } }
.ftp-pd-pozn { max-width:56ch; margin:var(--ftz-4) auto 0;
  font-size:14.5px; line-height:1.6; color:var(--ftz-body) }

/* ── STUDIE: jedno číslo, jedno sdělení ──────────────────────────
   Tentýž tvar jako karty „Proč to vůbec řešit?" na stránce Studie:
   velké mono číslo, popisek jednotky, věta pod vláskem. Karty mají
   nejvýš 340 px a stojí na střed — jedna i dvě. */
.ftp-pd-st { display:grid; gap:var(--ftz-4); justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),340px)) }
.ftp-pd-st-k { position:relative; overflow:hidden;
  padding:var(--ftz-6) var(--ftz-5) var(--ftz-5);
  background:radial-gradient(120% 60% at 50% 0%,var(--pd-zar2),
    transparent 70%),var(--ftz-bone);
  border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-v); box-shadow:var(--ftz-e2) }
.ftp-pd-st-k::before { content:""; position:absolute; top:0; left:0;
  right:0; height:3px; background:var(--pd-pol) }
.ftp-pd-st-k b { display:flex; justify-content:center;
  align-items:baseline; gap:6px;
  font-family:var(--ftz-data); font-weight:400;
  font-size:clamp(38px,5vw,52px); line-height:1; letter-spacing:-.04em;
  color:var(--ftz-graphite); font-variant-numeric:tabular-nums }
.ftp-pd-st-k b i { font-style:normal; font-size:.4em; letter-spacing:0;
  color:var(--ftz-stone) }
.ftp-pd-st-k span { display:block; margin:var(--ftz-2) 0 var(--ftz-4);
  font-size:13.5px; font-weight:500; color:var(--ftz-body) }
.ftp-pd-st-k p { margin:0 0 var(--ftz-4); padding-top:var(--ftz-4);
  border-top:1px solid var(--ftz-rule); font-size:15.5px;
  line-height:1.6; color:var(--ftz-graphite) }
.ftp-pd-st-k small { display:block; font-family:var(--ftz-data);
  font-size:11px; letter-spacing:.06em; color:var(--ftz-stone) }
/* ⚠️ SPECIFICITA `.ftp-pd .ftp-pd-dal`: šablona obarvuje
      `a:visited` (0,1,1) a samotná třída by prohrála. */
.ftp-pd .ftp-pd-dal { display:inline-flex; align-items:center; gap:10px;
  margin:var(--ftz-5) 0 0; font-size:15px; font-weight:600;
  color:var(--ftz-warm-ink); text-decoration:none }
.ftp-pd .ftp-pd-dal::after { content:""; width:7px; height:7px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-pd .ftp-pd-dal:hover::after { transform:translateX(3px) rotate(45deg) }
.ftp-pd .ftp-pd-dal:focus-visible { outline:none;
  box-shadow:var(--ftz-prsten); border-radius:2px }

/* ── PÉČE — dvě karty, věty na střed oddělené vláskem ─────────── */
.ftp-pd-pece { display:grid; gap:var(--ftz-4); grid-template-columns:1fr }
@media (min-width:620px) { .ftp-pd-pece { grid-template-columns:1fr 1fr } }
.ftp-pd-pece > div { padding:var(--ftz-6) var(--ftz-5) var(--ftz-3);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-v); box-shadow:var(--ftz-e1) }
.ftp-pd-pece .ftp-pd-mini { margin:0 0 var(--ftz-2) }
.ftp-pd-list { list-style:none; margin:0; padding:0 }
.ftp .ftp-pd .ftp-pd-list li { margin:0; padding:var(--ftz-3) 0; font-size:15px;
  line-height:1.55; color:var(--ftz-body); text-wrap:balance }
.ftp-pd-list li + li { border-top:1px solid var(--ftz-rule) }

/* ══ KARTA v6 (30. 9. 2026 pozdě večer) — tabulky v barvách značky ══
   Majitel: „někde jsou tabulky s barvou brandu, to je správně, ale
   někdy jsou jen šedé, nijaké … každou tabulku luxusně". Pól karty
   (`--pd-pol`, `--pd-tint`, `--pd-ink`) teď nesou i Použití,
   Parametry a Péče; písmo textu je 16 px, aby se četlo pohodlně. */
.ftp .ftp-pd .ftp-pd-kroky li { font-size:16px; color:var(--ftz-graphite) }
.ftp .ftp-pd .ftp-pd-kroky li::before { background:var(--pd-tint); color:var(--pd-ink);
  border-color:var(--pd-pol);
  box-shadow:0 0 0 6px var(--pd-zar2),var(--ftz-e1) }
.ftp-pd-par { padding:0 }
.ftp-pd-par > div { padding:var(--ftz-4) clamp(16px,4vw,40px) }
.ftp-pd-par > div:nth-child(odd) {
  background:linear-gradient(var(--ftz-rule),var(--ftz-rule))
    50% 50% / 1px 52% no-repeat,var(--pd-tint) }
.ftp-pd-par span { color:var(--pd-ink) }
@media (max-width:519px) {
  .ftp-pd-par > div:nth-child(odd) { background:var(--pd-tint) }
}
.ftp-pd-pece > div { position:relative; overflow:hidden;
  background:radial-gradient(120% 60% at 50% 0%,var(--pd-zar2),
    transparent 70%),var(--ftz-bone); box-shadow:var(--ftz-e2) }
.ftp-pd-pece > div::before { content:""; position:absolute; top:0;
  left:0; right:0; height:3px; background:var(--pd-pol) }
.ftp-pd-pece .ftp-pd-mini { display:inline-block; padding:5px 14px;
  border-radius:var(--ftz-r-p); background:var(--pd-tint);
  color:var(--pd-ink) }
.ftp .ftp-pd .ftp-pd-list li { font-size:16px; color:var(--ftz-graphite) }
.ftp .ftp-pd .ftp-pd-list li::before { content:""; display:block; width:6px;
  height:6px; margin:0 auto var(--ftz-2); border-radius:50%;
  background:var(--pd-pol) }
.ftp-pd .ftp-faq-p { margin:0 0 var(--ftz-2); padding:0 var(--ftz-4);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-k); box-shadow:var(--ftz-e1) }
.ftp-pd .ftp-faq-p:has(.ftp-faq-o[aria-expanded="true"]) {
  border-color:var(--pd-pol) }

/* ── DOTAZY — otázky ze stránek, užší sloupec na střed ────────── */
.ftp-pd .ftp-faq { max-width:720px; margin:0 auto; text-align:left }
.ftp-pd .ftp-faq-o { font-weight:400; font-optical-sizing:auto;
  font-size:clamp(17px,2.2vw,19px) }
/* Otázky bez SVG. Šipka jsou dvě hrany otočeného čtverce. */
.ftp-faq--lehke .ftp-faq-o::after { content:""; flex:0 0 auto;
  width:9px; height:9px; margin:0 6px 0 auto;
  border-right:1.5px solid var(--ftz-stone);
  border-bottom:1.5px solid var(--ftz-stone);
  transform:translateY(-3px) rotate(45deg);
  transition:transform var(--ftz-cas-p) var(--ftz-krivka) }
.ftp-faq--lehke .ftp-faq-o[aria-expanded="true"]::after {
  border-color:var(--ftz-warm-ink); transform:translateY(2px) rotate(225deg) }
.ftp-pd .ftp-faq--lehke .ftp-faq-o[aria-expanded="true"]::after {
  border-color:var(--pd-ink) }

/* ── DOTAZ K PRODUKTU — pod kartou, jako u Aktinu ────────────────
   ⚠️ ŽÁDNÝ BOX A ŽÁDNÝ KOŠÍK. Majitel 29. 9. 2026: tmavý závěr
      s „Přidat do košíku" pryč, košík patří nahoru k ceně. Dole
      zůstal dotaz — vlásek, otázka a obrysové tlačítko. */
.ftp-pd-dotaz { position:relative; margin:var(--ftz-8) 0 0;
  padding:var(--ftz-8) 0 0 }
/* Vlásek, který se ke krajům ztrácí — konec karty, ne rámeček
   (majitel 29. 9. 2026: „dole ten box bych odstranil"). */
.ftp-pd-dotaz::before { content:""; position:absolute; top:0; left:8%;
  right:8%; height:1px; background:linear-gradient(90deg,transparent,
  var(--ftz-rule) 22%,var(--ftz-rule) 78%,transparent) }
/* Znak rozhovoru — neutrální prstence: dotaz není údaj o teplotě. */
.ftp-pd-dotaz .ftp-pd-znak { width:56px; height:56px;
  margin-bottom:var(--ftz-5); background-size:28px 28px;
  box-shadow:0 0 0 1px var(--ftz-rule),0 0 0 9px rgba(28,27,26,.035),
    0 0 0 19px rgba(28,27,26,.02) }
.ftp-pd-dotaz .ftp-h3 { margin:0 0 var(--ftz-2) }
.ftp-pd-dotaz .ftp-p { margin:0 auto var(--ftz-5); max-width:46ch;
  color:var(--ftz-body) }
/* ⚠️ SPECIFICITA DVOU TŘÍD: šablona obarvuje `a:visited` (0,1,1)
      a samotné `.ftp-cta3` by barvu prohrálo — týž případ jako
      `.ftp-pd .ftp-pd-dal`. */
/* ⚠️ v5: PLNÉ GRAFITOVÉ TLAČÍTKO V KAPSLI. Oranžová patří košíku
      nahoře u ceny; tady je druhá, tišší akce — ale ne obrys, který
      na konci dlouhé karty zanikal. Kost na grafitu 15,4 : 1. */
.ftp-pd .ftp-pd-zeptat { min-width:240px; min-height:50px;
  padding:0 var(--ftz-6); color:var(--ftz-bone);
  background:var(--ftz-graphite); border-color:var(--ftz-graphite);
  border-radius:var(--ftz-r-p); box-shadow:var(--ftz-e2) }
.ftp-pd .ftp-pd-zeptat:hover { background:#34312E; border-color:#34312E }

/* ── ÚVOD KATEGORIE ──────────────────────────────────────────────
   ⚠️ JEN ODKAZ, NIC VÍC — zadání majitele 29. 9. 2026: „nahoře bych
      nepsal, co tam je, když to člověk vidí … jen odkaz na stránku
      jak vybrat … stránku chceme co nejjednodušší, ať se zákazník
      soustředí jen na nákup." Věta o sortimentu a odkaz na
      kalkulačku odešly. Zbyla jedna pilulka: kolečko se značkou
      rozhovoru, drobný štítek a serifový slib.
   ⚠️ NADPIS KATEGORIE KRESLÍ SHOPTET (`h1.category-title`), náš blok
      proto žádný nemá — jinak by byly dva `<h1>`.
   ⚠️ 29. 9. 2026 — NA STŘED A S PODTITULEM Z TITULKY. Majitel:
      „to pomoc vybrat je super, ale to ostatní je takové nijaké."
      Podtitul („Pro mrazivé dny") je tentýž, který nese dlaždice
      kategorie na titulce, a bere se z `stranky_dlazdice.DLAZDICE` —
      zákazník klikne na dlaždici a nahoře ho přivítají stejná slova.
      Tmavý pás kolem kreslí oddíl „Hlavička kategorie" níž. */
.ftp-kat-h { margin:0 0 var(--ftz-4); text-align:center }
.ftp-kat-s { display:flex; align-items:center; justify-content:center;
  gap:var(--ftz-3); margin:0 0 var(--ftz-5); font-family:var(--ftz-data);
  font-size:12px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ftz-warm-ink) }
.ftp-kat-s::before, .ftp-kat-s::after { content:""; flex:0 0 auto;
  width:24px; height:1px; background:currentColor; opacity:.55 }
.ftp .ftp-kat-o { display:inline-flex; align-items:center;
  gap:var(--ftz-3); padding:7px 22px 7px 7px; color:var(--ftz-graphite);
  text-decoration:none; background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-p);
  transition:border-color var(--ftz-cas) var(--ftz-krivka),
             box-shadow var(--ftz-cas) var(--ftz-krivka) }
.ftp .ftp-kat-o:hover { border-color:#CFC6B8; box-shadow:var(--ftz-e2) }
.ftp .ftp-kat-o:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }
.ftp-kat-o .ftp-zb-i { flex:0 0 auto; width:40px; height:40px; margin:0;
  background-size:24px 24px }
.ftp-kat-o i { display:block; font-style:normal;
  font-family:var(--ftz-data); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ftz-stone) }
.ftp-kat-o b { display:flex; align-items:center; gap:10px;
  font-family:var(--ftz-di); font-weight:400; font-optical-sizing:auto;
  font-size:18px; line-height:1.25 }
.ftp-kat-o b::after { content:""; width:7px; height:7px;
  border-top:2px solid var(--ftz-warm-ink);
  border-right:2px solid var(--ftz-warm-ink); transform:rotate(45deg);
  transition:transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-kat-o:hover b::after { transform:translateX(3px) rotate(45deg) }

/* ══ STRÁNKA PRODUKTU A KATEGORIE — prvky Shoptetu ══════════════════
   ⚠️ JEN TAM, KDE STOJÍ NÁŠ BLOK (`body:has(.ftp)`). Produkt s naší
      kartou a kategorie s naším úvodem; jinde se nic nemění.
      Značkování je opsané ze živého obchodu 29. 9. 2026:

        .p-info-wrapper > .p-detail-top > .p-code        „Kód: 58"
                        > h1
                        > .stars-wrapper > .star.star-off ×5
                        > .price-table .price-final-holder
                          .availability-label[style=background…]
                        > .add-to-cart > .quantity + .add-to-cart-button
        #p-detail-tabs > .shp-tab[data-testid=tabDescription|…]
        h1.category-title · #category-header .listSorting__control
        .category-top > .products-top-wrapper    „Nejprodávanější"

   ⚠️ KÓD SE SKRÝVÁ NA PŘÁNÍ MAJITELE: „číslo položky zatím nemáme …
      to bych neuváděl". Kód je v obchodě dál — v administraci,
      v objednávce i v exportu.
   ⚠️ PRÁZDNÉ HVĚZDIČKY SE SKRÝVAJÍ, DOKUD NENÍ PRVNÍ HODNOCENÍ.
      „Neohodnoceno" u každého kusu je sociální důkaz naruby. Jakmile
      dorazí hodnocení (`.star-on`), ukážou se samy.
   ⚠️ DISKUZE PRYČ — přání majitele. Čistá cesta je vypnout ji
      v administraci; tohle je pojistka, dokud se to nestane.
   ⚠️ „NEJPRODÁVANĚJŠÍ" NAD VÝPISEM SE SKRÝVÁ. Obchod neprodal jediný
      kus, takže nadpis není pravda, a pás opakuje zboží, které je
      o řádek níž. Vypnout ho má smysl i v administraci. */
/* ⚠️ BOKY STRÁNKY V BARVĚ OBSAHU — majitel 29. 9. 2026: „změnit ty
      boky stránek (takové ty do žluta) … horní obrázek je široký,
      ale obsah není tak široký a jde tam vidět jiná barva."
      Obsah Waltzu je bílá plocha 952 px, pás obrázku v záhlaví jde
      přes celé okno a `vlastni-css.css` barví `body` papírem — vedle
      obsahu proto zůstaly krémové pruhy. S bílým `body` splyne obsah
      s okrajem a pásy přes celou šířku (úvod titulky, pás důvěry,
      závěr) si barvu nesou samy.
   ⚠️ JEN S NAŠÍM BLOKEM. Globální styl `body` se nemění (zadání
      projektu). Košík, hledání a účet mají boky, jak je nastaví
      `vlastni-css.css` — tam se to mění jedním řádkem. */
body:has(.ftp) { background:#fff }
body:has(.ftp) .p-detail .p-code { display:none }
/* ⚠️ U CENY JEN „DO KOŠÍKU" — majitel 29. 9. 2026: „možnost tisku
      bych tam také nedával, to je zbytečné. A možnost zeptat se bych
      dal někde jinde, třeba dole … ať u možnosti nákupu je pouze do
      košíku a zákazníka nic nerozptyluje." Pod košíkem stály Tisk,
      Zeptat se, sdílení na Twitter a Facebook a tabulka s jediným
      řádkem „Kategorie" (naměřeno na živém produktu 29. 9. 2026).
      Kategorie je v drobečcích, parametry v naší záložce a dotaz pod
      kartou.
   ⚠️ „ZEPTAT SE" SE SCHOVÁVÁ, NEMAŽE. Tlačítko pod kartou na něj
      skriptem klikne a otevře tím Shoptetův formulář s tímhle
      zbožím (`stranky_js.py`).
   ⚠️ JEN NA PRODUKTU S NAŠÍ KARTOU (`.ftp-pd`). */
body:has(.ftp-pd) .p-detail .link-icons { display:none }
body:has(.ftp-pd) .p-detail .social-icons { display:none }
body:has(.ftp-pd) .p-detail .p-details-bottom { display:none }
/* Galerie: zaoblení karet webu a podklad v barvě pólu kusu — tentýž
   jako v mřížce zboží. `multiply` nechá bílé pozadí produktové fotky
   splynout s podkladem, takže kus stojí na ploše značky, ne v bílém
   obdélníku. Pól se bere z naší karty, ne z kategorie. */
/* ⚠️ DVA ZÁPISY NA KAŽDÝ PÓL. `.p-detail:has(…)` platí, když popis
      stojí uvnitř `.p-detail` (tak ho má náhled); `body:has(…):not(
      :has(druhý pól))` platí v obchodě, kde je na stránce jediný kus,
      i kdyby popis stál mimo. V náhledu je v jednom `<body>` třicet
      kusů obou pólů, takže tam druhý zápis mlčí a nepřebarví je. */
body:has(.ftp) .p-detail .p-image { overflow:hidden;
  border-radius:var(--ftz-r-v); background:#F2EDE6 }
body:has(.ftp) .p-detail:has(.ftp-pd--chlad) .p-image,
body:has(.ftp-pd--chlad):not(:has(.ftp-pd--teplo)) .p-detail .p-image {
  background:linear-gradient(180deg,#F3F7F9,#E4EEF3) }
body:has(.ftp) .p-detail:has(.ftp-pd--teplo) .p-image,
body:has(.ftp-pd--teplo):not(:has(.ftp-pd--chlad)) .p-detail .p-image {
  background:linear-gradient(180deg,#FCF6F1,#F9E9DC) }
body:has(.ftp) .p-detail .p-image img { mix-blend-mode:multiply }
body:has(.ftp) .p-detail .stars-wrapper:not(:has(.star-on)):not(:has(.star-half)) {
  display:none }
/* Název produktu řezem nadpisů webu (`.ftp-h2`: 400, optická
   velikost 96), ne lehkou třístovkou — „fonty lepší, ale jednoduché". */
body:has(.ftp) .p-detail .p-info-wrapper h1 { margin:.1em 0 .5em;
  font-family:var(--ftz-di); font-weight:400; font-optical-sizing:auto;
  font-variation-settings:'opsz' 96; font-size:clamp(30px,3.2vw,40px);
  line-height:1.08; letter-spacing:-.02em; color:var(--ftz-graphite);
  text-wrap:balance }
body:has(.ftp) .p-detail .price-final-holder { font-family:var(--ftz-data);
  font-weight:400; font-size:clamp(26px,2.8vw,32px); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--ftz-graphite) }
/* ⚠️ BÍLÝ TEXT NA BARVĚ Z ADMINISTRACE. Naměřeno na živém produktu:
      grafitový text na #d00000, tedy 2,07 : 1. Barvu stavu (červená,
      zelená) nastavuje obchod inline a nechává se — mění se jen
      text a tvar. */
body:has(.ftp) .p-detail .availability-label { display:inline-block;
  padding:5px 12px; border-radius:var(--ftz-r-p);
  font-family:var(--ftz-data); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:#fff }
/* ⚠️ VÝBĚR MNOŽSTVÍ A „DO KOŠÍKU" STEJNĚ VYSOKÉ — 1. 10. 2026.
      Naměřeno na živém produktu: výběr 36 px, tlačítko 26 px. Naše
      `padding:0 36px` zrušilo svislé odsazení šablony a výšku nic
      nedrželo. Obojí teď 48 px vedle sebe, stejné rohy; tlačítko
      zabere zbytek řádku. */
body:has(.ftp) .p-detail .add-to-cart { display:flex; flex-wrap:wrap;
  align-items:stretch; gap:12px }
body:has(.ftp) .p-detail .add-to-cart .quantity { display:inline-flex;
  align-items:center; height:48px; padding:0 40px;
  border:1px solid #CFC6B8; border-radius:var(--ftz-r-k);
  background:var(--ftz-bone) }
body:has(.ftp) .p-detail .add-to-cart .quantity input { width:44px;
  height:46px; padding:0; border:0; background:none;
  font-family:var(--ftz-data); font-size:16px;
  color:var(--ftz-graphite); text-align:center }
body:has(.ftp) .p-detail .add-to-cart .quantity .increase,
body:has(.ftp) .p-detail .add-to-cart .quantity .decrease {
  width:40px; height:46px; border:0; border-radius:0;
  background:none; color:var(--ftz-graphite) }
body:has(.ftp) .p-detail .add-to-cart .quantity .increase::before,
body:has(.ftp) .p-detail .add-to-cart .quantity .decrease::before {
  line-height:46px }
/* „Do košíku" je hlavní tlačítko značky: jantar s grafitem (7,4 : 1),
   jako `.ftp-cta` na všech stránkách webu — a jediné tlačítko u ceny. */
body:has(.ftp) .p-detail .add-to-cart-button { flex:1 1 auto;
  width:auto; min-height:48px; padding:0 36px;
  border:1px solid transparent; border-radius:var(--ftz-r-k);
  background:var(--ftz-warm); color:var(--ftz-graphite);
  font-family:var(--ftz-ui); font-size:16px; font-weight:600;
  letter-spacing:.01em; box-shadow:var(--ftz-e2);
  transition:background var(--ftz-cas) var(--ftz-krivka),
             box-shadow var(--ftz-cas) var(--ftz-krivka) }
body:has(.ftp) .p-detail .add-to-cart-button:hover {
  background:var(--ftz-ember); color:var(--ftz-graphite);
  box-shadow:var(--ftz-e3) }
body:has(.ftp) .p-detail .add-to-cart-button:focus-visible {
  outline:none; box-shadow:var(--ftz-e2),var(--ftz-prsten) }
body:has(.ftp) .p-detail-tabs .shp-tab[data-testid="tabDiscussion"],
body:has(.ftp) .p-detail-tabs .shp-tab:has(a[href="#productDiscussion"]) {
  display:none }
/* Zbyla-li jen záložka Popis, lišta Shoptetu zmizí celá — naše karta
   má vlastní záložky a „Popis" nad „Popis" by se četl jako chyba.
   Přibude-li v administraci další záložka, lišta se vrátí sama. */
body:has(.ftp) .p-detail-tabs-wrapper .shp-tabs-row:not(:has(
  .shp-tab:not([data-testid="tabDescription"]):not([data-testid="tabDiscussion"]))) {
  display:none }
body:has(.ftp) .category-title { margin:.15em 0 .5em; text-align:center;
  font-family:var(--ftz-di); font-weight:400; font-optical-sizing:auto;
  font-variation-settings:'opsz' 144; font-size:clamp(34px,4.6vw,54px);
  line-height:1.02; letter-spacing:-.028em; color:var(--ftz-graphite) }

/* ── POSTRANNÍ PANEL KATEGORIE (1. 10. 2026) ──────────────────────
   Majitel: „vlevo je kontakt — prázdný … to bych tam nechtěl. Text
   (volba kategorie) je bílá na bílém. Šlo by tato sekce udělat lépe,
   víc prémiově?" Naměřeno na živé kategorii:
     · aktivní kategorie i odkaz při najetí mají barvu
       `--color-primary` — v administraci #ffffff, tedy 1,00 : 1;
     · v Kontaktu je jen ikona telefonu a ukázkové 123 456 789;
     · nadpisy „Kategorie" a „Cena" leží na šedé lince šablony.
   ⚠️ `#categories` V SELEKTORU: šablona stylizuje přes
      `.categories .topic.active>a` (0,3,1); s ID vyhrajeme bez
      `!important`.
   ⚠️ TEČKA V BARVĚ PÓLU jako u pilulek v hlavičce kategorie —
      Chlazení a Vyhřívání jsou údaj o teplotě, pól tam patří; Pro psy
      nese obě poloviny. */
body:has(.ftp) .sidebar .box-contact { display:none }
body:has(.ftp) .sidebar .box { margin:0 0 28px; padding:0;
  background:none }
body:has(.ftp) .sidebar .pageElement__heading,
body:has(.ftp) .sidebar .filters h4 { margin:0 0 10px;
  padding:0 0 10px; border-bottom:1px solid var(--ftz-rule);
  font-family:var(--ftz-data); font-size:11.5px; font-weight:500;
  line-height:1.4; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ftz-stone) }
body:has(.ftp) .sidebar .pageElement__heading::before { display:none }
body:has(.ftp) .sidebar .pageElement__heading span,
body:has(.ftp) .sidebar .filters h4 span { padding:0; background:none;
  font:inherit; letter-spacing:inherit; color:inherit }
body:has(.ftp) #categories .topic > a { display:flex;
  align-items:center; gap:12px; margin:0 0 2px; padding:10px 12px;
  border-radius:var(--ftz-r-k); font-family:var(--ftz-ui);
  font-size:15px; font-weight:500; line-height:1.3;
  color:var(--ftz-graphite); background:none; text-decoration:none;
  transition:background var(--ftz-cas) var(--ftz-krivka) }
body:has(.ftp) #categories .topic > a::before { content:"";
  flex:0 0 8px; height:8px; border-radius:50%;
  background:linear-gradient(90deg,var(--ftz-cold) 50%,
    var(--ftz-warm) 50%) }
body:has(.ftp) #categories .topic > a[href$="/chlazeni/"]::before {
  background:var(--ftz-cold) }
body:has(.ftp) #categories .topic > a[href$="/vyhrivani/"]::before {
  background:var(--ftz-warm) }
body:has(.ftp) #categories .topic > a:hover,
body:has(.ftp) #categories .topic > a:focus-visible {
  color:var(--ftz-graphite); background:#F4EFE8 }
body:has(.ftp) #categories .topic.active > a,
body:has(.ftp) #categories .topic.active > a:hover {
  color:var(--ftz-graphite); font-weight:600;
  background:var(--ftz-bone);
  box-shadow:inset 0 0 0 1px var(--ftz-rule),var(--ftz-e1) }
body:has(.ftp) #categories .cat-trigger { display:none }
/* Filtr ceny: dráha vlásek, rozsah osa značky, úchyty grafit. */
body:has(.ftp) .sidebar .slider-header { font-family:var(--ftz-data);
  font-size:13px; font-variant-numeric:tabular-nums;
  color:var(--ftz-graphite) }
body:has(.ftp) .sidebar .ui-slider { background:var(--ftz-rule) }
body:has(.ftp) .sidebar .ui-slider .ui-slider-range {
  background:var(--ftz-osa) }
body:has(.ftp) .sidebar .ui-slider-handle {
  background:var(--ftz-graphite);
  box-shadow:0 0 0 3px #FFFFFF,0 1px 4px rgba(28,27,26,.28) }

/* ── HLAVIČKA KATEGORIE — tmavý pás jako na titulce ──────────────────
   Majitel 29. 9. 2026: „to pomoc vybrat je super, ale to ostatní je
   takové nijaké … něco nepřidat (jen třeba nějaké jednoduché logo/
   obrázek) … pokud by bylo moc složité nebo velké přidat obrázek,
   tak třeba jen něco jednoduchého, ale ne na úkor kvality."

   ⚠️ BEZ FOTKY — ZÁMĚRNĚ. Fotka by znamenala tři další soubory
      k nahrání, desítky kilobajtů na každé kategorii a výšku, kvůli
      které 27. 9. odešla hera kategorií (420 px nad prvním zbožím).
      Pás je z materiálu titulky: břidlicová plocha se slabou září
      v barvě pólu, medailon se znakem kategorie, název, podtitul
      z dlaždice na titulce a osa značky při spodní hraně. Váží pár
      set bajtů stylopisu.

   ⚠️ ZÁŘE PODLE PÓLU KATEGORIE, NE PODLE ZBOŽÍ. Chlazení chladná,
      vyhřívání teplá a psi obojí — chlad vlevo, teplo vpravo jako
      na ose. Pól nese třída našeho bloku (`ftp-kat-h--chlad`),
      takže se nespoléhá na třídy stránky od Shoptetu.

   ⚠️ JEN KDYŽ JE NÁŠ BLOK UVNITŘ `.category-top`. Kam Shoptet popis
      kategorie vloží, se změřit nedalo (dokud popis není, kontejner
      v HTML neexistuje). Kdyby padl jinam, pás se nevykreslí vůbec
      a zůstane světlá hlavička — ne tmavý pás bez odkazu nebo
      odkaz se světlým písmem na bílé. */
body:has(.ftp) .category-top:has(.ftp-kat-h) { position:relative;
  display:block; overflow:hidden; margin:0 0 var(--ftz-4);
  padding:clamp(22px,3vw,32px) var(--ftz-5) clamp(22px,3vw,30px);
  border-radius:var(--ftz-r-v); text-align:center;
  color:var(--ftz-paper);
  background:radial-gradient(70% 120% at 50% -10%,
               rgba(255,138,76,.14), transparent 62%),
             linear-gradient(158deg,#23282D,#1C2024 62%) }
/* ⚠️ PÓL SE ČTE Z PÁSU, NE Z `<body>`. `body:has(.ftp-kat-h--psi)` by
      v náhledu, kde jsou všechny stránky v jednom `<body>`, platilo
      na všech třech kategoriích — naměřeno: vyhřívání mělo tlapku.
      `.category-top:has(…)` je pravda v obchodě i v náhledu. */
body:has(.ftp) .category-top:has(.ftp-kat-h--chlad) {
  background:radial-gradient(70% 120% at 50% -10%,
               rgba(127,179,204,.26), transparent 62%),
             linear-gradient(158deg,#23282D,#1C2024 62%) }
body:has(.ftp) .category-top:has(.ftp-kat-h--teplo) {
  background:radial-gradient(70% 120% at 50% -10%,
               rgba(255,138,76,.22), transparent 62%),
             linear-gradient(158deg,#23282D,#1C2024 62%) }
body:has(.ftp) .category-top:has(.ftp-kat-h--psi) {
  background:radial-gradient(55% 110% at 0% 0%,
               rgba(127,179,204,.22), transparent 60%),
             radial-gradient(55% 110% at 100% 0%,
               rgba(255,138,76,.18), transparent 60%),
             linear-gradient(158deg,#23282D,#1C2024 62%) }
/* Medailon se znakem kategorie. Kresbu dosazuje `_kat_znaky_css()`. */
body:has(.ftp) .category-top:has(.ftp-kat-h)::before { content:"";
  display:block; width:50px; height:50px; margin:0 auto var(--ftz-3);
  border-radius:50%; background-color:var(--ftz-bone);
  background-repeat:no-repeat; background-position:center;
  background-size:28px 28px;
  box-shadow:0 0 0 6px rgba(255,252,248,.07),
             0 14px 30px -12px rgba(0,0,0,.6) }
body:has(.ftp) .category-top:has(.ftp-kat-h--chlad)::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cg%20stroke=%22%231F5A75%22%20stroke-width=%222.6%22%3E%3Cpath%20d=%22M24%209v30M19.8%2012.2%2024%2016l4.2-3.8M19.8%2035.8%2024%2032l4.2%203.8%22/%3E%3Cpath%20d=%22M24%209v30M19.8%2012.2%2024%2016l4.2-3.8M19.8%2035.8%2024%2032l4.2%203.8%22%20transform=%22rotate(60%2024%2024)%22/%3E%3Cpath%20d=%22M24%209v30M19.8%2012.2%2024%2016l4.2-3.8M19.8%2035.8%2024%2032l4.2%203.8%22%20transform=%22rotate(120%2024%2024)%22/%3E%3C/g%3E%3C/svg%3E") }
body:has(.ftp) .category-top:has(.ftp-kat-h--teplo)::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%2016c3.8-3.4%207.6%203.4%2011.4%200s7.6%203.4%2011.4%200%207.6%203.4%207.2%200M9%2027c3.8-3.4%207.6%203.4%2011.4%200s7.6%203.4%2011.4%200%207.6%203.4%207.2%200%22%20stroke=%22%23B14A18%22%20stroke-width=%222.8%22/%3E%3Crect%20x=%228%22%20y=%2238.2%22%20width=%2232%22%20height=%225%22%20rx=%222.5%22%20fill=%22%236F675F%22/%3E%3C/svg%3E") }
body:has(.ftp) .category-top:has(.ftp-kat-h--psi)::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M24%2025.2c-5.4%200-10%205.6-10%209.6%200%203%202.4%204.6%205%204.6%201.8%200%203.2-.9%205-.9s3.2.9%205%20.9c2.6%200%205-1.6%205-4.6%200-4-4.6-9.6-10-9.6z%22%20fill=%22%236F675F%22/%3E%3Cellipse%20cx=%2211.8%22%20cy=%2221.4%22%20rx=%223.4%22%20ry=%224.4%22%20transform=%22rotate(-18%2011.8%2021.4)%22%20fill=%22%231F5A75%22/%3E%3Cellipse%20cx=%2218.6%22%20cy=%2213.6%22%20rx=%223.5%22%20ry=%224.8%22%20transform=%22rotate(-6%2018.6%2013.6)%22%20fill=%22%231F5A75%22/%3E%3Cellipse%20cx=%2229.4%22%20cy=%2213.6%22%20rx=%223.5%22%20ry=%224.8%22%20transform=%22rotate(6%2029.4%2013.6)%22%20fill=%22%23B14A18%22/%3E%3Cellipse%20cx=%2236.2%22%20cy=%2221.4%22%20rx=%223.4%22%20ry=%224.4%22%20transform=%22rotate(18%2036.2%2021.4)%22%20fill=%22%23B14A18%22/%3E%3C/svg%3E") }
body:has(.ftp) .category-top:has(.ftp-kat-h)::after { content:"";
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--ftz-osa) }
body:has(.ftp) .category-top:has(.ftp-kat-h) .category-title {
  margin:0 0 var(--ftz-2); font-size:clamp(32px,4.4vw,46px);
  color:var(--ftz-bone); text-wrap:balance }
/* Obal, do kterého Shoptet popis kategorie vloží, nesmí do pásu
   přinést vlastní plochu ani odsazení. */
body:has(.ftp) .category-top:has(.ftp-kat-h) :has(> .ftp) { margin:0;
  padding:0; background:none; border:0 }
body:has(.ftp) .category-top:has(.ftp-kat-h) .ftp-kat-h { margin:0 }
body:has(.ftp) .category-top:has(.ftp-kat-h) .ftp-kat-s {
  color:var(--ftz-ember) }
body:has(.ftp) .category-top:has(.ftp-kat-h) .ftp-kat-o {
  background:rgba(255,252,248,.06); border-color:rgba(255,252,248,.2);
  color:var(--ftz-bone) }
body:has(.ftp) .category-top:has(.ftp-kat-h) .ftp-kat-o:hover {
  background:rgba(255,252,248,.1); border-color:rgba(255,252,248,.36);
  box-shadow:none }
body:has(.ftp) .category-top:has(.ftp-kat-h) .ftp-kat-o i {
  color:var(--ftz-dim) }
body:has(.ftp) .category-top:has(.ftp-kat-h) .ftp-kat-o b::after {
  border-color:var(--ftz-ember) }
/* ⚠️ ODKAZY NA OSTATNÍ KATEGORIE V PÁSU (30. 9. 2026). Majitel:
      „v tom černém boxu se rozkliknout na vyhřívání a pro psy
      (a naopak)". Z úvodu titulky vede „Prohlédnout sortiment" do
      Chlazení — odtud je zbytek sortimentu na jedno kliknutí. */
.ftp-kat-dal { display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--ftz-2); margin:var(--ftz-4) 0 0 }
.ftp .ftp-kat-dal-o { display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px 7px 13px; border-radius:var(--ftz-r-p);
  font-family:var(--ftz-ui); font-size:13.5px; font-weight:500;
  text-decoration:none; color:var(--ftz-graphite);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  transition:background var(--ftz-cas) var(--ftz-krivka),
    border-color var(--ftz-cas) var(--ftz-krivka) }
.ftp-kat-dal-o::before { content:""; flex:0 0 auto; width:8px;
  height:8px; border-radius:50%; background:var(--ftz-cold) }
.ftp-kat-dal-o--chlad::before { background:var(--ftz-cold) }
.ftp-kat-dal-o--teplo::before { background:var(--ftz-warm) }
.ftp-kat-dal-o--psi::before {
  background:linear-gradient(90deg,var(--ftz-cold) 50%,var(--ftz-warm) 50%) }
.ftp .ftp-kat-dal-o:focus-visible { outline:none;
  box-shadow:var(--ftz-prsten) }
body:has(.ftp) .category-top:has(.ftp-kat-h) .ftp-kat-dal-o {
  color:var(--ftz-bone); background:rgba(255,252,248,.06);
  border-color:rgba(255,252,248,.2) }
body:has(.ftp) .category-top:has(.ftp-kat-h) .ftp-kat-dal-o:hover {
  background:rgba(255,252,248,.12); border-color:rgba(255,252,248,.4) }
body:has(.ftp) .category-top .products-top-wrapper { display:none }
body:has(.ftp) #category-header { margin:var(--ftz-4) 0 var(--ftz-3);
  padding:0; background:transparent; border-top:1px solid var(--ftz-rule);
  border-bottom:1px solid var(--ftz-rule) }
body:has(.ftp) .listSorting__controls { display:flex; flex-wrap:wrap;
  justify-content:center; gap:0 var(--ftz-5); margin:0; padding:0;
  list-style:none }
/* ⚠️ „ABECEDNĚ" PRYČ — majitel 29. 9. 2026: „řazení abecedně asi nemá
      smysl … vše nebo většina začíná na V." Id tlačítka je opsané
      ze živé kategorie (29. 9. 2026): `#listSortingControl-name`. */
body:has(.ftp) .listSorting__controls > li:has(#listSortingControl-name) {
  display:none }
body:has(.ftp) .listSorting__control { padding:13px 0;
  font-family:var(--ftz-data); font-size:11.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ftz-stone);
  background:none; border:0; border-radius:0; box-shadow:none;
  cursor:pointer }
body:has(.ftp) .listSorting__control:hover { color:var(--ftz-graphite) }
body:has(.ftp) .listSorting__control--current { color:var(--ftz-graphite);
  box-shadow:inset 0 -2px 0 var(--ftz-graphite) }

.ftp-radky { display:grid; gap:0; margin:0 }
.ftp-radek { display:grid; grid-template-columns:1fr;
  gap:.15rem var(--ftz-5); padding:var(--ftz-4) 0;
  border-top:1px solid var(--ftz-line) }
.ftp-radek:first-child { border-top:0; padding-top:0 }
.ftp-radek b { font-size:14px; font-weight:600;
  color:var(--ftz-graphite) }
.ftp-radek span { font-size:14.5px; line-height:1.6;
  color:var(--ftz-body) }
@media (min-width:760px) {
  .ftp-radek { grid-template-columns:minmax(0,13rem) minmax(0,1fr) }
  .ftp-radek b { padding-top:.1rem }
}

/* ── CO NESLIBUJEME ──────────────────────────────────────────────
   ⚠️ NENÍ TO VAROVÁNÍ, JE TO NABÍDKA DŮVĚRY. Proto stejná plocha
      jako ostatní karty a jen ikona v barvě upozornění — ne celý
      žlutý rámeček, který by vypadal jako chybová hláška. */
.ftp-nesl { display:grid; gap:2px; background:var(--ftz-line);
  border:1px solid var(--ftz-line); border-radius:var(--ftz-r-k);
  overflow:hidden; text-align:left }
.ftp-nesl-p { background:var(--ftz-paper); padding:var(--ftz-5);
  display:grid; grid-template-columns:auto 1fr;
  gap:.2rem var(--ftz-4); align-items:start }
.ftp-nesl-p .ftp-ikona { grid-row:1 / span 2; width:20px; height:20px;
  color:var(--ftz-pozor); margin-top:.15rem }
.ftp-nesl-p b { font-size:16px; font-weight:600;
  color:var(--ftz-graphite) }
.ftp-nesl-p span { grid-column:2; font-size:14.5px; line-height:1.6;
  color:var(--ftz-body) }
@media (min-width:760px) {
  .ftp-nesl { grid-template-columns:repeat(3,minmax(0,1fr)) }
}

/* ── ČTYŘI ZPŮSOBY ───────────────────────────────────────────────
   ⚠️ `.ftp-sr-d` A `.ftp-sr-n` ODSUD ZMIZELY, PROTOŽE JE UŽ NIKDO
      NEPOUŽÍVAL. Byly to řádky „doložené číslo" a „na co myslet"
      na kartách principů; když se karty přepsaly na způsoby,
      zůstala v stylopisu dvě pravidla bez jediného prvku. Mrtvé
      CSS nic neshodí a právě proto se v generovaném souboru
      o 198 tisících znacích nedá najít jinak než tímhle.

   ⚠️ DVA SLOUPCE, NE ČTYŘI. Sloupec obsahu má 932 px; na čtyři
      karty vyjde 220 px a do nich se rozbalený detail nevejde
      jinak než po jednom slově na řádek. Je to táž past jako
      u čísla kroku, které v mřížce spadlo do sloupce širokého
      41 px. Dvě řady po dvou navíc drží symetrii, o kterou
      majitel žádal u služeb pro firmy. */
/* ⚠️ `grid-auto-rows:1fr` — MŘÍŽKA SROVNÁVÁ VÝŠKU JEN UVNITŘ ŘÁDKU.
   Naměřeno na 1280 px: horní řada 218 px, spodní 241 px, takže
   uprostřed sekce vznikl schod. Projekt to má zapsané od dlaždic
   kalkulaček a stalo se to znovu — karty mají různě dlouhou větu
   a nic je přes řádky nevyrovná. */
.ftp-zpusoby { display:grid; gap:var(--ftz-5);
  grid-template-columns:1fr; margin-top:var(--ftz-5) }
/* ⚠️ VYROVNÁNÍ AŽ OD DVOU SLOUPCŮ. V jednom sloupci nemá co
   srovnávat — jen by natáhlo krátkou kartu na výšku nejdelší
   a na mobilu ubralo obrazovku. */
@media (min-width:680px) { .ftp-zpusoby {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr } }

/* ⚠️ OBRÁCENO 19. 9. 2026 — A DŮVOD PRVNÍHO ROZHODNUTÍ PADL.
   Psal jsem tu, že karta s rozbaleným detailem vypadá na střed
   jako plakát. V náhledu na 1280 px vyšlo něco jiného: karta má
   458 px, věta na ní jeden řádek a značka 52 px v levém horním
   rohu — takže dvě třetiny karty byly prázdné a odkaz „Jak to
   funguje" plaval dole u kraje. Nevypadalo to klidně, vypadalo to
   nedodělaně.

   Na střed má karta touž stavbu jako karty důvěry na ostatních
   stránkách (značka nad textem, text pod ní) a sedí k rozcestníku
   nad sebou. Věta má vlastní míru, takže se na střed neroztahuje
   přes celou šířku. */
.ftp-zp { position:relative; overflow:hidden; display:flex;
  flex-direction:column; align-items:center; text-align:center;
  padding:var(--ftz-6) var(--ftz-5) var(--ftz-5);
  background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-k) }
.ftp-zp::before { content:""; position:absolute; top:0; left:0;
  right:0; height:3px }
.ftp-zp--chlad::before { background:var(--ftz-cold) }
.ftp-zp--teplo::before { background:var(--ftz-warm) }
/* Kresba sedí na téže podložce jako ikony karet důvěry — kruh
   v pólovém odstínu. Kdyby měla vlastní tvar, vypadala by karta
   jako z jiné stránky. */
/* Podložka je větší než u karet důvěry (44 px): kresba způsobu
   nese princip, ne dekoraci, a je to první věc, kterou oko na
   kartě potká. */
.ftp-zp-i { display:block; width:64px; height:64px;
  margin-bottom:var(--ftz-4); border-radius:var(--ftz-r-p);
  background-repeat:no-repeat; background-position:center;
  background-size:38px 38px }
.ftp-zp--chlad .ftp-zp-i { background-color:#E7F0F5 }
.ftp-zp--teplo .ftp-zp-i { background-color:#FBEDE3 }
/* ⚠️ ŠTÍTEK PÓLU JE ÚDAJ, NE OZDOBA — a proto smí nést pólovou
   barvu. Karty měly barvu jen ve třípixelovém vlásku nahoře a
   v kresbě; majitel to pojmenoval: „je to takové černé, nijaké."
   Štítek říká, KAM ten způsob patří, takže čtenář vidí na první
   pohled, že tři karty jsou chlazení a jedna vyhřívání.

   Text se neopisuje — odvozuje se z pólu karty, tedy z téhož
   údaje, který určuje barvu vlásku. Přidává navíc do karty slovo
   „Chlazení" nebo „Vyhřívání", takže `kontrola_polu()` má co
   najít i bez věty o teplotě. */
.ftp-zp-s { display:block; margin-bottom:var(--ftz-1);
  font-family:var(--ftz-data); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase }
.ftp-zp--chlad .ftp-zp-s { color:var(--ftz-cold-ink) }
.ftp-zp--teplo .ftp-zp-s { color:var(--ftz-warm-ink) }
.ftp-zp b { font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto; font-size:21px; line-height:1.2;
  letter-spacing:-.01em; color:var(--ftz-graphite) }
/* ⚠️ VĚTA MÁ VLASTNÍ MÍRU. Bez ní se na 454px kartě roztáhne na
   jeden dlouhý řádek a střed na tom není vidět; se 34 znaky se
   zalomí na dva vyvážené řádky. `text-wrap:balance` je dorovná. */
.ftp-zp-p { display:block; margin-top:var(--ftz-2);
  max-width:34ch; margin-inline:auto;
  font-size:14.5px; line-height:1.6; color:var(--ftz-body);
  text-wrap:balance }
/* ⚠️ TLAČÍTKO MÁ 44 px NA VÝŠKU. Je to cíl pro prst, ne odkaz
   uvnitř věty — výjimka WCAG pro souvislý text na něj neplatí.
   Táž míra jako u `.ftp-dok-o .ftp-odkaz`.

   ⚠️ VLÁSEK NAD NÍM JE ROZDĚL, NE OZDOBA. Bez něj plaval odkaz
   v prázdnu pod větou a vypadal jako zapomenutý řádek textu;
   s vláskem je z něj patrný ovladač karty. Vlásek jde přes celou
   kartu, takže se všechny čtyři karty potkají na téže lince —
   výšku jim srovnává `grid-auto-rows:1fr`. */
.ftp-zp-o { margin-top:auto; padding:var(--ftz-4) 0 0;
  width:100%; border-top:1px solid var(--ftz-rule);
  display:flex; align-items:center; justify-content:center;
  gap:var(--ftz-2);
  min-height:44px; border-left:0; border-right:0; border-bottom:0;
  background:none; cursor:pointer;
  font-family:var(--ftz-ui); font-size:13px; font-weight:500;
  letter-spacing:.02em; color:var(--ftz-warm-ink) }
.ftp-zp-o .ftp-ikona { width:16px; height:16px }
.ftp-zp-o[aria-expanded="true"] .ftp-ikona { transform:rotate(180deg) }
.ftp-zp-o:focus-visible { outline:none; border-radius:var(--ftz-r);
  box-shadow:var(--ftz-prsten) }
/* Detail už vlásek nemá — nese ho tlačítko nad ním. Dva vlásky
   pod sebou dělaly z rozbalené karty tabulku. */
.ftp-zp-d { width:100%; margin-top:var(--ftz-1) }
.ftp-zp-d p { margin:0 0 var(--ftz-3); font-size:13.5px;
  line-height:1.6; color:var(--ftz-stone); text-wrap:pretty }
.ftp-zp-d p:last-child { margin-bottom:0 }
/* Bez skriptu je detail vidět. Obráceně by při chybě skriptu
   zmizel text, který prodává — viz `.ftp-detail`. */
.ftp--js .ftp-zp-d { display:none }
.ftp--js .ftp-zp-d.je { display:block }

/* ── TEST ZA DVĚ OTÁZKY ──────────────────────────────────────────
   ⚠️ BEZ SKRIPTU JE TO ROZCESTNÍK, NE ROZBITÝ FORMULÁŘ. Odpovědi
      jsou odkazy na kotvy karet pod testem, takže i bez JavaScriptu
      dělají přesně to, co slibují. Skript z nich teprve udělá test:
      druhá otázka se schová a výsledek se dopíše. */
/* ⚠️ PANEL BYL JEN ČERNOBÍLÝ. Majitel: „at to není jen černé, chci
   to prémiové." Přibyly dvě věci a obě nesou význam, ne ozdobu:
   osa značky nahoře (týž podpis jako nad štítkem hera a pod nadpisy
   sekcí) a inkoust místo grafitu na vybrané odpovědi.

   ⚠️ INKOUST NA VYBRANÉ ODPOVĚDI NENÍ PÓLOVÁ BARVA JAKO ÚDAJ.
      `--ftz-warm-ink` je v celém webu barva OVLADAČE — odkaz ve
      větě, rozbalovátko karty, zpětný odkaz dokumentu. Vybraná
      odpověď je ovladač, ne přiřazení k pólu. Kdyby dostala
      chladnou nebo teplou podle toho, co je na ní napsané, byla by
      z barvy ozdoba u „Nic mokrého tam nesmí" a údaj u „Zimu" —
      dvojí měřítko v jednom prvku.

   ⚠️ KOST NA INKOUSTU MÁ 5,32 : 1. Změřeno, ne odhadnuto. Na papíře
      má týž inkoust 4,87, takže obě strany prahu sedí. */
.ftp-tst { position:relative; overflow:hidden;
  max-width:640px; margin:var(--ftz-5) auto 0;
  padding:var(--ftz-6) var(--ftz-5) var(--ftz-5);
  background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-k);
  text-align:center }
.ftp-tst::before { content:""; position:absolute; left:0; right:0;
  top:0; height:3px; background:var(--ftz-osa) }
.ftp-tst-n { margin:0 0 var(--ftz-4); font-family:var(--ftz-data);
  font-size:12px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ftz-stone) }
.ftp-tst-k + .ftp-tst-k { margin-top:var(--ftz-5) }
.ftp-tst-q { margin:0 0 var(--ftz-3); font-family:var(--ftz-di);
  font-weight:400; font-optical-sizing:auto; font-size:18px;
  line-height:1.25; color:var(--ftz-graphite) }
.ftp-tst-v { display:flex; flex-wrap:wrap; gap:var(--ftz-2);
  justify-content:center }
.ftp-tst-b { display:inline-flex; align-items:center;
  min-height:44px; padding:0 var(--ftz-4);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-p);
  background:var(--ftz-paper); color:var(--ftz-graphite);
  text-decoration:none; font-size:14px; font-weight:500 }
.ftp-tst-b:hover { border-color:var(--ftz-warm-ink);
  background:#EFE9E0; color:var(--ftz-warm-ink) }
.ftp-tst-b[aria-pressed="true"] { background:var(--ftz-warm-ink);
  border-color:var(--ftz-warm-ink); color:var(--ftz-bone) }
.ftp-tst-b:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }
.ftp-tst-r { margin:var(--ftz-5) 0 0; padding-top:var(--ftz-4);
  border-top:1px solid var(--ftz-rule); font-size:14.5px;
  line-height:1.6; color:var(--ftz-stone); text-wrap:pretty }
.ftp-tst-r b { display:block; margin-bottom:var(--ftz-1);
  font-family:var(--ftz-di); font-weight:400;
  font-optical-sizing:auto; font-size:20px; line-height:1.2;
  color:var(--ftz-graphite) }
/* Štítek pólu ve výsledku. Skript ho kopíruje z karty, na kterou
   odpověď ukazuje — barvu si nese třídou, ne dopočítanou hodnotou. */
.ftp-tst-r i { display:block; margin-bottom:var(--ftz-1);
  font-style:normal; font-family:var(--ftz-data); font-size:11px;
  font-weight:500; letter-spacing:.1em; text-transform:uppercase }
.ftp-tst-r i[data-pol="chlad"] { color:var(--ftz-cold-ink) }
.ftp-tst-r i[data-pol="teplo"] { color:var(--ftz-warm-ink) }
.ftp--js .ftp-tst-k[data-krok="2"] { display:none }
.ftp--js .ftp-tst-k[data-krok="2"].je { display:block }


/* ⚠️ STOJÍ AŽ TADY, NA KONCI, A JE TO NUTNÉ. Napoprvé jsem tenhle
   blok vložil mezi ostatní pravidla dokumentu — a `.ftp-dok-k` má
   vlastní `max-width` o dvě stě řádků níž, takže si ji vzalo zpátky
   a závěrečný blok skončil na vlastní hraně (naměřeno 468 proti
   434). Specificita je u obou stejná, takže rozhoduje POŘADÍ.
   Kdo sem přidá další pravidlo pro tyhle třídy, musí ho dát
   nad tenhle blok, ne pod něj. */
/* ══════════════════════════════════════════════════════════════════
   DOKUMENT · JEDNA LEVÁ HRANA
   ⚠️ NAMĚŘENY ČTYŘI RŮZNÉ LEVÉ HRANY: 366 · 400 · 434 · 488 px.
      Číslo článku viselo na 366, text článku začínal na 434
      a hlavička, pruh návrhu i obsah stály na 400 — tedy v ničem.
      Dokument, ve kterém nic nelícuje, nevypadá jako sazba, ale
      jako nedodělek; a je to přesně ten druh vady, který si čtenář
      nepojmenuje, jen mu to celé přijde levné.

      Hrany jsou teď DVĚ a obě něco znamenají: **434 px** je text
      a **366 px** visí číslo. Nic jiného.

   ⚠️ JEN OD 900 px. Pod tím se visící číslice ruší (68 px okraje by
      na mobilu sežralo třetinu šířky) a dokument má hranu jednu.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width:900px) {
  .ftp-dok-h, .ftp-dok-ucin, .ftp-navrh, .ftp-obsah,
  .ftp-dok-s, .ftp-dok-k, .ftp-spoj, .ftp-rozc, .ftp-pomoc {
    max-width:calc(var(--ftz-mira) + var(--ftz-okraj));
    padding-left:var(--ftz-okraj) }
  /* ⚠️ VLASTNÍ VÝPLŇ PRVKU SE OD OKRAJE ODEČÍTÁ, NEPŘIČÍTÁ.
     Odkazy rozcestníku mají svých 12 px a panel pomoci 32 px, takže
     s plným okrajem sedí jejich TEXT o tolik vedle — naměřeno 399
     místo 434. Okraj se proto o tu výplň zmenší a text padne na
     hranu dokumentu. */
  .ftp-navrh { padding-right:0 }
  .ftp-rozc { padding-left:calc(var(--ftz-okraj) - var(--ftz-3));
    padding-right:0 }
  /* Panel má výplň na obou stranách stejnou, aby nebyl nakřivo. */
  .ftp-pomoc { padding-inline:var(--ftz-okraj) }
}


/* ── STUDIE · REDAKČNÍ DOLADĚNÍ ─────────────────────────────────── */
/* Karta zjištění: klidnější vnitřní rytmus, patička oddělená vláskem,
   Detail jako decentní tlačítko se šipkou. Při najetí karta vystoupí
   o 2 px – jen ta, na kterou jde kliknout (celá vede na detail). */
.ftp-m { gap:var(--ftz-3); padding:var(--ftz-6) var(--ftz-5) var(--ftz-5);
  box-shadow:0 1px 2px rgba(28,27,26,.04);
  transition:box-shadow var(--ftz-cas) var(--ftz-krivka),
    transform var(--ftz-cas) var(--ftz-krivka),
    border-color var(--ftz-cas) var(--ftz-krivka) }
.ftp-m:hover { transform:translateY(-2px); box-shadow:var(--ftz-e2) }
.ftp-m-t { font-size:18px; line-height:1.3; max-width:24ch; letter-spacing:-.005em }
.ftp-m-c { font-size:24px; margin-top:var(--ftz-1) }
.ftp-m-f { gap:var(--ftz-4); margin-top:auto; padding-top:var(--ftz-4);
  border-top:1px solid var(--ftz-rule) }
.ftp-m-b { display:inline-flex; align-items:center; gap:8px; min-height:40px;
  padding:0 18px; margin-top:0; font-size:14px; border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-p); background:var(--ftz-paper);
  transition:border-color var(--ftz-cas) var(--ftz-krivka),
    background-color var(--ftz-cas) var(--ftz-krivka) }
.ftp-m-b::after { content:"\2192"; font-weight:500;
  transition:transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-m-b:hover { color:var(--ftz-graphite); border-color:var(--ftz-graphite);
  background:var(--ftz-bone) }
.ftp-m-b:hover::after { transform:translateX(2px) }

/* Otázky na Studii (aria-controls „fs…") číslované 01–05 jako na
   stránce Kalkulačka; ostatní stránky webu zůstávají beze změny. */
.ftp-faq-o[aria-controls^="fs"]::before {
  content:counter(ftp-q, decimal-leading-zero); width:34px; letter-spacing:.06em }


/* ── STUDIE · JEDNA MŘÍŽKA ZJIŠTĚNÍ (13. 10. 2026) ─────────────────
   Karusel a „Další ověřená zjištění" jsou jedna mřížka dvanácti
   karet. Karta: nadpis, číslo s popiskem, autor a rok, patička se
   štítkem a Detailem. Pól nahoře jen podle strany osy. */
.ftp-mriz { gap:var(--ftz-5) }
.ftp-m { padding:var(--ftz-6) var(--ftz-5) var(--ftz-5); border-radius:var(--ftz-r-v) }
.ftp-m:hover { transform:translateY(-3px); border-color:#CFC6B8;
  box-shadow:0 3px 6px rgba(28,27,26,.06), 0 20px 40px -18px rgba(28,27,26,.28) }
.ftp-m-c { font-size:30px; margin-top:var(--ftz-2) }
.ftp-m-p { margin:0; max-width:26ch; font-size:13px; line-height:1.45;
  color:var(--ftz-body); text-wrap:balance }
.ftp-m-z { margin:var(--ftz-1) 0 0; font-family:var(--ftz-data); font-size:11.5px;
  line-height:1.5; letter-spacing:.02em; color:var(--ftz-stone); text-wrap:balance }

/* ── STUDIE · JAK TEPLOTU DOSTAT POD KONTROLU ──────────────────────
   Tytéž tvary jako „Jak čísla zlepšit?" v kalkulačce (`.tk-pillar`):
   medailon ikony, při najetí karta vystoupí a medailon se rozsvítí
   v teplém pólu; třetí karta je tmavá a vede do sortimentu. */
.ftp-rady { margin-top:var(--ftz-5) }
.ftp-zb.ftp-rada { position:relative; gap:var(--ftz-2);
  padding:var(--ftz-6) var(--ftz-5) var(--ftz-5); border-radius:var(--ftz-r-v);
  transition:transform var(--ftz-cas) var(--ftz-krivka),
    box-shadow var(--ftz-cas) var(--ftz-krivka),
    border-color var(--ftz-cas) var(--ftz-krivka) }
.ftp-zb.ftp-rada:hover { transform:translateY(-3px); border-color:#CFC6B8;
  box-shadow:0 3px 6px rgba(28,27,26,.06), 0 20px 40px -18px rgba(177,74,24,.30) }
.ftp-zb .ftp-rada-i { display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; margin:0 0 var(--ftz-2); border-radius:50%;
  color:var(--ftz-cold-ink); background:rgba(127,179,204,.16);
  border:1px solid rgba(31,90,117,.16);
  transition:background-color var(--ftz-cas) var(--ftz-krivka),
    color var(--ftz-cas) var(--ftz-krivka), transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-rada-i .ftp-ikona { width:24px; height:24px }
.ftp-zb.ftp-rada:hover .ftp-rada-i { background-color:var(--ftz-warm);
  color:var(--ftz-graphite); border-color:transparent; transform:scale(1.06) }
.ftp-zb.ftp-rada b { font-size:21px }
.ftp-zb.ftp-rada > span:not(.ftp-rada-i) { font-size:15px; line-height:1.55 }
.ftp-zb.ftp-rada--shop { color:var(--ftz-dim); background:var(--ftz-slate);
  border-color:var(--ftz-slate); box-shadow:var(--ftz-e3) }
.ftp-zb.ftp-rada--shop:hover { border-color:var(--ftz-slate);
  box-shadow:0 3px 6px rgba(28,27,26,.12), 0 24px 44px -18px rgba(28,27,26,.55) }
.ftp-zb.ftp-rada--shop b { color:var(--ftz-bone) }
.ftp-zb.ftp-rada--shop .ftp-rada-i { color:var(--ftz-graphite);
  background:var(--ftz-warm); border-color:transparent }
.ftp-zb .ftp-rada-cta { display:flex; align-items:center; justify-content:space-between;
  gap:10px; min-height:48px; margin:auto 0 0; padding:0 18px;
  font-family:var(--ftz-ui); font-size:15.5px; font-weight:600; line-height:1.2;
  text-decoration:none; color:var(--ftz-graphite); background:var(--ftz-warm);
  border-radius:var(--ftz-r-k); transition:background-color var(--ftz-cas) var(--ftz-krivka) }
.ftp-zb .ftp-rada-cta::after { content:""; width:8px; height:8px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
  transform:rotate(45deg) }
.ftp-zb .ftp-rada-cta:hover { color:var(--ftz-graphite); background:var(--ftz-ember) }
.ftp-zb .ftp-rada-cta:focus-visible { outline:none;
  box-shadow:0 0 0 2px var(--ftz-slate), 0 0 0 4px var(--ftz-ember) }
.ftp-zbozi.ftp-rady + .ftp-p--drobne { margin-top:var(--ftz-5) }
/* Pořadí 01–03 v rohu karet (Plex Mono) a osa na horní hraně tmavé
   karty – obojí jako `.tk-pillar` v kalkulačce. */
.ftp-rady { counter-reset:ftp-rada }
.ftp-zb.ftp-rada::after { counter-increment:ftp-rada;
  content:counter(ftp-rada, decimal-leading-zero); position:absolute;
  top:20px; right:22px; font-family:var(--ftz-data); font-size:12px;
  font-weight:500; letter-spacing:.12em; color:var(--ftz-stone);
  font-variant-numeric:tabular-nums }
.ftp-zb.ftp-rada--shop { overflow:hidden }
.ftp-zb.ftp-rada--shop::after { color:var(--ftz-dim) }
.ftp-zb.ftp-rada--shop::before { content:""; position:absolute; top:0; left:0;
  right:0; height:3px; background:var(--ftz-osa) }

/* ── STUDIE · KARTA ZDROJE, JEDEN FORMÁT ───────────────────────────
   Nahoře typ a rok, pod tím autor (nadpis karty) a kde zdroj vyšel
   (slovy, bez kódů). Pak dva odstavce s popiskem nad sebou: co se
   změřilo, co z toho neplyne. Tučné číslo v textu zůstává v řádku. */
.ftp-z { overflow:hidden; padding:calc(var(--ftz-5) + 3px) var(--ftz-5) var(--ftz-5);
  box-shadow:var(--ftz-e1);
  transition:border-color var(--ftz-cas) var(--ftz-krivka),
    box-shadow var(--ftz-cas) var(--ftz-krivka), transform var(--ftz-cas) var(--ftz-krivka) }
.ftp-z:hover { transform:translateY(-2px); border-color:#CFC6B8; box-shadow:var(--ftz-e2) }
/* Pól na horní hraně jako u karet zjištění: chladný u horka
   a chlazení, teplý u chladu a vyhřívání, celá osa u obecných. */
.ftp-z::before { content:""; position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--ftz-osa) }
.ftp-z[data-smer="chlad"]::before { background:var(--ftz-cold) }
.ftp-z[data-smer="teplo"]::before { background:var(--ftz-warm) }
.ftp-z-rok { font-weight:500; color:var(--ftz-graphite); background:#EFE9E0 }
.ftp-z-h { justify-content:space-between; gap:var(--ftz-2); margin:0 0 var(--ftz-3) }
.ftp-z-a { margin:0; font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 30; font-size:19px; line-height:1.25;
  color:var(--ftz-graphite); text-wrap:balance }
.ftp-z-kde { margin:4px 0 var(--ftz-4); padding:0 0 var(--ftz-4); font-style:normal;
  font-size:13.5px; line-height:1.45; color:var(--ftz-stone) }
.ftp-z-r { margin:0 0 var(--ftz-4); font-size:14.5px; line-height:1.6;
  color:var(--ftz-body); text-wrap:pretty }
.ftp-z-r b { display:inline; margin:0; font-family:inherit; font-size:inherit;
  font-weight:600; letter-spacing:normal; text-transform:none; color:var(--ftz-graphite) }
.ftp-z-n { display:block; margin:0 0 6px; font-family:var(--ftz-ui); font-size:11.5px;
  font-weight:600; line-height:1.3; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ftz-stone) }
.ftp-z-r--ne { margin:auto 0 0; padding:var(--ftz-4); background:#F8F2E9;
  border-left:0; border-radius:var(--ftz-r-k) }
.ftp-z-r--ne .ftp-z-n { color:var(--ftz-pozor) }

/* Diskuze Shoptetu pod Studií se nezobrazuje (majitel 13. 10. 2026);
   doporučeno ji vypnout i v administraci, viz návod. */
body:has(.ftp):has(#ftp-showroom) .discussionContainer,
body:has(.ftp):has(#ftp-showroom) .pageArticleDetail ~ h2 { display:none }
/* ── STUDIE · OTÁZKY JAKO KARTY (13. 10. 2026) ─────────────────────
   Totéž jako „Časté otázky" na Kalkulačce (`calculators.css` kap. 15):
   karta kosti, číslo a šipka v kolečku, otázka ve Fraunces, otevřená
   karta s osou nahoře; odpověď začíná pod textem otázky. Jen Studie
   (`ftp-faq--lux`), FAQ ostatních stránek se nemění. */
.ftp-faq--lux { display:grid; gap:12px; max-width:820px; margin:var(--ftz-5) auto 0;
  border-top:0 }
.ftp-faq--lux .ftp-faq-p { position:relative; overflow:hidden; background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-v);
  box-shadow:0 1px 2px rgba(28,27,26,.05), 0 1px 3px rgba(28,27,26,.04);
  transition:border-color var(--ftz-cas) var(--ftz-krivka), box-shadow var(--ftz-cas) var(--ftz-krivka) }
.ftp-faq--lux .ftp-faq-p::before { content:""; position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--ftz-osa); opacity:0;
  transition:opacity var(--ftz-cas) var(--ftz-krivka) }
.ftp-faq--lux .ftp-faq-p:hover { background:var(--ftz-bone); border-color:#CFC6B8;
  box-shadow:var(--ftz-e2) }
.ftp-faq--lux .ftp-faq-p:has(.ftp-faq-o[aria-expanded="true"]) { border-color:#CFC6B8;
  box-shadow:var(--ftz-e3) }
.ftp-faq--lux .ftp-faq-p:has(.ftp-faq-o[aria-expanded="true"])::before { opacity:1 }
.ftp-faq--lux .ftp-faq-o { gap:16px; min-height:76px; padding:20px 24px;
  font-size:clamp(17px,2.2vw,19px); line-height:1.35; letter-spacing:-.005em;
  text-wrap:pretty }
.ftp-faq--lux .ftp-faq-o[aria-expanded="true"] { color:var(--ftz-graphite) }
.ftp-faq--lux .ftp-faq-o[aria-controls]::before { content:counter(ftp-q, decimal-leading-zero);
  flex:0 0 32px; width:32px; height:32px; display:flex; align-items:center;
  justify-content:center; border-radius:50%; background:#EFE9E0;
  font-size:12px; letter-spacing:.04em; color:var(--ftz-body);
  transition:background-color var(--ftz-cas) var(--ftz-krivka), color var(--ftz-cas) var(--ftz-krivka) }
.ftp-faq--lux .ftp-faq-p:hover .ftp-faq-o::before,
.ftp-faq--lux .ftp-faq-o[aria-expanded="true"]::before { background:var(--ftz-warm);
  color:var(--ftz-graphite) }
.ftp-faq--lux .ftp-faq-o .ftp-ikona { flex:0 0 32px; width:32px; height:32px; padding:8px;
  box-sizing:border-box; border:1px solid var(--ftz-rule); border-radius:50%;
  color:var(--ftz-graphite); background:var(--ftz-paper);
  transition:transform var(--ftz-cas) var(--ftz-krivka), background-color var(--ftz-cas) var(--ftz-krivka),
    color var(--ftz-cas) var(--ftz-krivka), border-color var(--ftz-cas) var(--ftz-krivka) }
.ftp-faq--lux .ftp-faq-o[aria-expanded="true"] .ftp-ikona { color:var(--ftz-bone);
  background:var(--ftz-graphite); border-color:var(--ftz-graphite) }
.ftp-faq--lux .ftp-faq-t { margin:0 24px 0 72px; border-top:1px solid var(--ftz-rule) }
.ftp-faq--lux .ftp-faq-t p { margin:0; padding:16px 0 22px; max-width:none;
  font-size:15.5px; line-height:1.7 }
@media (max-width:559px) {
  .ftp-faq--lux .ftp-faq-o { gap:12px; padding:16px }
  .ftp-faq--lux .ftp-faq-o[aria-controls]::before,
  .ftp-faq--lux .ftp-faq-o .ftp-ikona { flex-basis:28px; width:28px; height:28px }
  .ftp-faq--lux .ftp-faq-o .ftp-ikona { padding:6px }
  .ftp-faq--lux .ftp-faq-t { margin:0 16px }
  .ftp-faq--lux .ftp-faq-t p { padding:14px 0 18px; font-size:15px }
}
/* ── PROČ TOMU VĚŘIT · STEJNĚ JAKO KALKULAČKA (13. 10. 2026) ───────
   Světlá deska v barvě papíru obchodu, osa značky na horní hraně,
   nadpis na střed. Čtyři čísla ve Fraunces oddělená vlásky; první
   v chladném, poslední v teplém inkoustu a pod každým krátká ryska
   – osa rozložená do čísel. Pod nimi „Z čeho vycházíme" s linkami
   po stranách a jména institucí jako tiráž časopisu. Totéž má
   `.tk-proof` v `calculators.css` (kap. 16). */
.ftp-proof { position:relative; overflow:hidden; padding:48px 20px 40px;
  text-align:center; background:#EFE9E0; border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-v);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(28,27,26,.04) }
.ftp-proof::before { content:""; position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--ftz-osa) }
@media (min-width:760px) { .ftp-proof { padding:56px 48px 48px } }
.ftp-proof .ftp-h2 { margin-bottom:0 }
.ftp-proof-s { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  margin:32px 0; border-top:1px solid #DCD3C6; border-bottom:1px solid #DCD3C6 }
@media (min-width:720px) { .ftp-proof-s { grid-template-columns:repeat(4,minmax(0,1fr)) } }
.ftp-proof-c { display:flex; flex-direction:column; align-items:center; gap:12px;
  min-width:0; padding:28px 12px }
.ftp-proof-c + .ftp-proof-c { border-left:1px solid #DCD3C6 }
@media (max-width:719px) {
  .ftp-proof-c:nth-child(3) { border-left:0 }
  .ftp-proof-c:nth-child(n+3) { border-top:1px solid #DCD3C6 }
}
.ftp-proof-c b { display:block; font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 96; font-size:clamp(40px,5.4vw,56px);
  line-height:1; letter-spacing:-.03em; color:var(--ftz-graphite) }
.ftp-proof-c b::after { content:""; display:block; width:24px; height:2px;
  margin:16px auto 0; border-radius:1px; background:#CFC6B8 }
.ftp-proof-c:first-child b { color:var(--ftz-cold-ink) }
.ftp-proof-c:first-child b::after { background:var(--ftz-cold) }
.ftp-proof-c:last-child b { color:var(--ftz-warm-ink) }
.ftp-proof-c:last-child b::after { background:var(--ftz-warm) }
.ftp-proof-c span { max-width:17ch; font-size:14.5px; font-weight:400; line-height:1.45;
  color:var(--ftz-body); text-wrap:balance }
.ftp-proof .ftp-inst { margin:0; padding:0; border-top:0 }
.ftp-proof .ftp-inst-n { display:flex; align-items:center; justify-content:center;
  gap:14px; margin:0 0 14px; font-size:11.5px; font-weight:500; line-height:1.4;
  letter-spacing:.16em; color:var(--ftz-stone) }
.ftp-proof .ftp-inst-n::before, .ftp-proof .ftp-inst-n::after { content:"";
  width:48px; height:1px; background:#CFC6B8 }
.ftp-proof .ftp-inst-s { display:flex; flex-wrap:wrap; justify-content:center;
  gap:4px 22px; max-width:760px; margin:0 auto;
  font-family:var(--ftz-di); font-variation-settings:'opsz' 24;
  font-size:15.5px; line-height:1.9; color:var(--ftz-graphite); text-wrap:balance }
/* ⚠️ Řez 400 výslovně: tělo stránky má Inter 300 a jména by ho zdědila
   – na Kalkulačce jsou 400 a působila výrazněji (majitel 13. 10.). */
.ftp-proof .ftp-inst-s span { display:inline; font:inherit; font-weight:400; color:inherit }
/* Bez teček: v zalomeném řádku stála tečka na jeho začátku. Jména
   dělí jen vzduch, jméno se nerozdělí. */
.ftp-proof .ftp-inst-s span + span::before { content:none }
@media (min-width:560px) { .ftp-proof .ftp-inst-s span { white-space:nowrap } }
@media (max-width:559px) { .ftp-proof .ftp-inst-s { gap:2px 14px; font-size:13.5px; line-height:1.75 } }
/* ── UX REVIEW (13. 10. 2026, `7-kalkulacky/UX-AUDIT.md`) ─────────
   Neaktivní karty karuselu měly krytí 0,62 a četly se jako
   vypnuté; 0,8 drží důraz na aktivní kartě a zbytek zůstává čitelný. */
.ftp--js .ftp-kar-drah .ftp-k { opacity:.8 }
.ftp--js .ftp-kar-drah .ftp-k.je { opacity:1 }
/* ── STUDIE · HLAVNÍ TLAČÍTKO STEJNĚ V ÚVODU I V ZÁVĚRU (14. 10. 2026) ─
   Majitel: „Spočítat, jaký to má efekt" je v úvodu i v závěru totéž
   tlačítko – teplý pól, šipka, jemná záře; druhé tlačítko je obrys
   v kosti. Obě 54 px. Jen Studie (`#ftp-showroom`), hera a závěry
   ostatních stránek se nemění. */
body:has(.ftp):has(#ftp-showroom) .ftp-akce .ftp-cta,
body:has(.ftp):has(#ftp-showroom) .ftp-akce .ftp-cta2 { min-height:54px; padding:0 28px;
  font-size:15.5px; font-weight:600; letter-spacing:.005em; border-radius:var(--ftz-r-k) }
body:has(.ftp):has(#ftp-showroom) .ftp-akce .ftp-cta {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 28px -14px rgba(255,138,76,.75) }
body:has(.ftp):has(#ftp-showroom) .ftp-akce .ftp-cta:hover {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 16px 32px -14px rgba(255,138,76,.9) }
body:has(.ftp):has(#ftp-showroom) .ftp-akce .ftp-cta2 { color:var(--ftz-bone);
  background:rgba(255,252,248,.04); border-color:rgba(255,252,248,.32) }
body:has(.ftp):has(#ftp-showroom) .ftp-akce .ftp-cta2:hover { color:var(--ftz-graphite);
  background:var(--ftz-bone); border-color:var(--ftz-bone) }

@media (prefers-reduced-motion:reduce) {
  .ftp-faq--lux .ftp-faq-p, .ftp-faq--lux .ftp-faq-o .ftp-ikona,
  .ftp-m, .ftp-m-b, .ftp-m-b::after, .ftp-zb.ftp-rada, .ftp-rada-i,
  .ftp-zb .ftp-rada-cta, .ftp-z { transition:none }
  .ftp-m:hover, .ftp-zb.ftp-rada:hover, .ftp-z:hover,
  .ftp-zb.ftp-rada:hover .ftp-rada-i { transform:none }
}

/* ═══ TEMPERIA · kalkulačka v prodejní podobě ════════════════════
   Nadstavba nad `studie_kalkulacky.SPOLECNE_CSS`. Mění jen vzhled.
   ═══════════════════════════════════════════════════════════════ */
.ftp .ftz-nadpis { font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 72; font-size:clamp(24px,4.2vw,34px);
  line-height:1.12; letter-spacing:-.018em }
.ftp .ftz-lead { font-size:16.5px; max-width:56ch }

/* Panel s výsledkem. Tohle je ta „výsledková karta“. */
/* ⚠️ PLOCHA ZŮSTÁVÁ JEDNOBAREVNÁ (`--ftz-slate` ze společného
   CSS). Nabízelo se přidat radiální záře jako v heru, jenže
   kontrast nad přechodem se musí číst po vrstvách a po každé změně
   znovu — a tenhle panel nese největší číslo na stránce. Hloubku
   dělá vnitřní vlásek a stín, ne pozadí. */
.ftp .ftz-vysledek { position:relative; overflow:hidden;
  padding:var(--ftz-6) var(--ftz-5); border-radius:var(--ftz-r-v);
  box-shadow:var(--ftz-e3), inset 0 0 0 1px rgba(255,252,248,.07) }
@media (min-width:760px) { .ftp .ftz-vysledek {
  padding:var(--ftz-7) var(--ftz-6) } }
.ftp .ftz-vysledek::before { content:""; position:absolute; top:0;
  left:0; right:0; height:3px; background:var(--ftz-osa) }
/* Přepočet se nepřepisuje, jen problikne. Animovat samo číslo by
   znamenalo sahat do cesty, kterou tečou ověřená data. */
.ftp .ftz-vysledek.ftp-puls::after { content:""; position:absolute;
  inset:0; pointer-events:none; border-radius:var(--ftz-r-v);
  animation:ftp-puls 520ms var(--ftz-krivka) }
@keyframes ftp-puls {
  from { background:rgba(255,138,76,.16) }
  to { background:transparent } }

/* Velké číslo. Na mobilu 52 px, na desktopu až 96. */
/* Podpis pod štítkem panelu: kousek osy. Týž prvek jako pod
   nadpisy sekcí — prvek, který se objeví jednou, je efekt; prvek,
   který se objeví u každé kapitoly, je systém. */
.ftp .ftz-vysledek .ftz-stitek { position:relative;
  padding-bottom:var(--ftz-3) }
.ftp .ftz-vysledek .ftz-stitek::after { content:""; position:absolute;
  left:0; bottom:0; width:36px; height:2px; background:var(--ftz-osa);
  border-radius:2px }
.ftp .ftz-velke { display:flex; align-items:baseline; flex-wrap:wrap;
  gap:var(--ftz-2) var(--ftz-3); margin:var(--ftz-2) 0 var(--ftz-4) }
.ftp .ftz-velke strong { font-family:var(--ftz-data); font-weight:500;
  font-size:clamp(52px,13vw,96px); line-height:.92;
  letter-spacing:-.055em; color:var(--ftz-bone);
  font-variant-numeric:tabular-nums }
.ftp .ftz-velke span { font-family:var(--ftz-ui); font-size:17px;
  font-weight:500; color:var(--ftz-dim) }
.ftp .ftz-podnadpis { font-size:15.5px; line-height:1.6;
  color:var(--ftz-dim); max-width:54ch }

/* Řádky pod číslem. Mřížka, ne seznam — čte se to jako výpis. */
.ftp .ftz-radky { margin-top:var(--ftz-5); border-top:1px solid
  var(--ftz-line) }
.ftp .ftz-radek { display:flex; align-items:baseline;
  justify-content:space-between; gap:var(--ftz-4);
  padding:var(--ftz-3) 0; border-bottom:1px solid var(--ftz-line) }
.ftp .ftz-radek:last-child { border-bottom:0 }
/* ⚠️ ŽÁDNÝ `nowrap`. Hodnota bývá i věta („Šátek, bandana,
   ventilátor na krk") a na 390px displeji přetékala panel
   o 163 px — změřeno. Číslo se od jednotky neutrhne, protože
   mezi nimi je nezlomitelná mezera z české sazby; zlomí se jen
   text, který se zlomit má. Táž příčina i táž oprava jako
   u popisků v grafech. */
.ftp .ftz-radek > span:last-child { font-family:var(--ftz-data);
  font-size:16px; color:var(--ftz-bone); text-align:right;
  min-width:0; text-wrap:pretty;
  font-variant-numeric:tabular-nums }

/* Akce pod výsledkem. */
/* Akce pod výsledkem na střed. Doporučení je závěr panelu, ne
   poznámka na okraji. */
.ftp .ftz-akce { display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--ftz-3); margin-top:var(--ftz-6) }
.ftp .ftz-cta,.ftp .ftz-cta2 { min-height:52px; padding:14px 26px;
  border-radius:var(--ftz-r-k); font-size:16px; font-weight:600 }
.ftp .ftz-cta { box-shadow:var(--ftz-e2) }
.ftp .ftz-cta:hover { box-shadow:var(--ftz-e3) }

/* Vstupy. Větší dotykové cíle, zřetelnější stav. */
.ftp .ftz-pole { padding:var(--ftz-4); background:var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-k);
  transition:border-color var(--ftz-cas) var(--ftz-krivka),
             box-shadow var(--ftz-cas) var(--ftz-krivka) }
.ftp .ftz-pole:focus-within { border-color:var(--ftz-warm);
  box-shadow:var(--ftz-prsten) }
/* Popisek vstupu v mono verzálkách. Je to táž řeč jako u patičky
   zdrojů, popisku měřidla a jednotky na kartě důvodu — dohromady to
   čte jako přístrojová deska, ne jako webový formulář.

   ⚠️ BARVA JE `--ftz-body`, ne `--ftz-stone`. Verzálky v 11,5 px
      jsou drobné písmo a `--ftz-stone` má na kosti 5,43 : 1;
      `--ftz-body` má 8,3 a je to popisek, podle kterého se do pole
      něco zadává. */
.ftp .ftz-popis > span:first-child { font-family:var(--ftz-data);
  font-size:11.5px; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ftz-body) }
.ftp .ftz-hodnota { font-family:var(--ftz-data); font-size:15px;
  font-weight:500; color:var(--ftz-graphite);
  font-variant-numeric:tabular-nums }
.ftp .ftz-cislo { min-height:46px; font-size:17px }

/* Poznámka o mezích. Je to nejcennější odstavec na stránce —
   přiznaná mez je důvod, proč zákazník uvěří zbytku. Osm řádků pod
   výsledkem ale přečte málokdo a zbytek odradí, takže je sbalená.
   Tlačítko vyrábí skript; bez něj je text prostě vidět. */
.ftp .ftz-omezeni { margin-top:var(--ftz-3); padding:var(--ftz-5);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-left:3px solid var(--ftz-pozor);
  border-radius:0 var(--ftz-r-k) var(--ftz-r-k) 0; font-size:14.5px }
/* Na střed a s otazníkem v kroužku. Je to otázka, kterou si
   návštěvník klade sám — a tak má i vypadat. */
.ftp-omez-o { display:flex; align-items:center; justify-content:center;
  gap:var(--ftz-3); width:100%; min-height:56px; margin-top:var(--ftz-5);
  padding:0 var(--ftz-5); font-family:var(--ftz-ui); font-size:15.5px;
  font-weight:600; text-align:center; color:var(--ftz-graphite);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-k); cursor:pointer;
  transition:border-color var(--ftz-cas) var(--ftz-krivka),
             box-shadow var(--ftz-cas) var(--ftz-krivka) }
.ftp-omez-o::before { content:"?"; flex:0 0 auto; display:flex;
  align-items:center; justify-content:center; width:24px; height:24px;
  font-family:var(--ftz-data); font-size:13px; color:var(--ftz-bone);
  background:var(--ftz-stone); border-radius:50% }
.ftp-omez-o[aria-expanded="true"]::before { background:var(--ftz-warm-ink) }
.ftp-omez-o::after { content:""; width:8px; height:8px; flex:0 0 auto;
  border-bottom:1.8px solid currentColor;
  border-right:1.8px solid currentColor; transform:rotate(45deg);
  margin-top:-4px;
  transition:transform var(--ftz-cas-p) var(--ftz-krivka) }
.ftp-omez-o[aria-expanded="true"]::after { transform:rotate(-135deg);
  margin-top:4px }
.ftp-omez-o:hover { border-color:#CFC6B8; box-shadow:var(--ftz-e1) }
.ftp-omez-o:focus-visible { outline:none; box-shadow:var(--ftz-prsten) }
.ftp--js .ftp-omez-t { display:none }
.ftp--js .ftp-omez-t.je { display:block;
  animation:ftp-rozbal var(--ftz-cas-p) var(--ftz-krivka) }

/* ── MĚŘIDLO ─────────────────────────────────────────────────────
   Donut je `conic-gradient`, ne SVG. V SVG by se popisek zmenšoval
   s kresbou — na 320px displeji z 13 px zbude 4,5 px. To měl projekt
   naměřené a je to důvod, proč tu žádný graf není SVG.

   ⚠️ Měřidlo stojí NA PAPÍŘE pod kalkulačkou, ne uvnitř tmavého
      panelu. Do panelu by se muselo vložit do cizího značkování;
      takhle je to samostatný prvek a kalkulačka zůstává nedotčená.

   Hodnotu nastavuje skript proměnnou `--p` (0–100). Když se ji
   nepodaří přečíst, zůstane na poslední hodnotě — radši nic než
   vymyšlené číslo. */
.ftp-mer { position:relative; overflow:hidden; display:flex;
  flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--ftz-5) var(--ftz-6); margin-top:var(--ftz-4);
  padding:var(--ftz-6) var(--ftz-5); text-align:center;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,138,76,.06), transparent 60%),
    var(--ftz-bone);
  border:1px solid var(--ftz-rule); border-radius:var(--ftz-r-v);
  box-shadow:var(--ftz-e1) }
@media (min-width:620px) { .ftp-mer { text-align:left;
  justify-content:flex-start; flex-wrap:nowrap } }
/* Vlásková osa nahoře. Týž podpis jako na hero a na cestě ke zboží. */
.ftp-mer::before { content:""; position:absolute; top:0; left:0;
  right:0; height:2px; background:var(--ftz-osa) }
/* Kolečko a popisek pod ním tvoří jeden sloupec. Samotné „37 %"
   uprostřed kroužku je číslo bez jmenovatele — vypadá jako údaj,
   a přitom nikdo neví, procento čeho to je. */
.ftp-mer-c { display:flex; flex-direction:column; align-items:center;
  gap:var(--ftz-3); flex:0 0 auto }
.ftp-donut-p { max-width:150px; font-family:var(--ftz-data);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.5; color:var(--ftz-stone); text-align:center;
  text-wrap:balance }
.ftp-donut { --p:0; position:relative; width:140px; height:140px;
  flex:0 0 auto; border-radius:50%;
  background:conic-gradient(var(--ftz-warm) calc(var(--p) * 1%),
    #EAE4DA 0);
  /* Dvojitý stín: krátký kontaktní a dlouhý vzdálený. Jedna vrstva
     vypadá jako nálepka. */
  box-shadow:0 1px 2px rgba(28,27,26,.06),
             0 10px 24px -10px rgba(28,27,26,.22) }
.ftp-donut::after { content:""; position:absolute; inset:14px;
  border-radius:50%; background:var(--ftz-bone);
  box-shadow:inset 0 1px 3px rgba(28,27,26,.07) }
.ftp-donut b { position:absolute; inset:0; z-index:1; display:flex;
  font-weight:500;
  flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--ftz-data); font-size:27px; letter-spacing:-.035em;
  color:var(--ftz-graphite); font-variant-numeric:tabular-nums;
  line-height:1 }
.ftp-mer-p { flex:1 1 15rem; font-size:14.5px; line-height:1.6;
  color:var(--ftz-stone) }
.ftp-mer-p b { display:block; font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 36; font-size:clamp(19px,2.6vw,23px);
  line-height:1.25; letter-spacing:-.012em; color:var(--ftz-graphite);
  margin-bottom:var(--ftz-3) }

/* ── PATIČKA „VÝPOČET STOJÍ NA" ──────────────────────────────────
   Byla to šedá věta „Stojí na: …" volně pod měřidlem — vypadala
   jako poznámka, kterou tam někdo zapomněl.

   ⚠️ ZDROJE SE NESCHOVÁVAJÍ. Nabízelo se je sbalit do rozbalovátka,
      ale na stránce, jejíž celá teze zní „každé číslo má zdroj", je
      původ výpočtu to poslední, co smí zmizet. Čistší je udělat
      z toho pořádnou patičku. */
.ftp-zv { margin-top:var(--ftz-5); padding-top:var(--ftz-4);
  border-top:1px solid var(--ftz-rule); text-align:center }
.ftp-zv > span { display:block; font-family:var(--ftz-data);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ftz-stone); margin-bottom:var(--ftz-2) }
.ftp-zv > p { margin:0; font-size:13px; line-height:1.6;
  color:var(--ftz-body); text-wrap:pretty }

/* Pruh před/po. Dvě dráhy pod sebou ve STEJNÉM měřítku — jinak by
   porovnání lhalo. Obě hodnoty skript přečte z hotového výsledku
   kalkulačky; nic nedopočítává. */
.ftp-pp { margin-top:var(--ftz-5); padding:var(--ftz-5);
  background:var(--ftz-bone); border:1px solid var(--ftz-rule);
  border-radius:var(--ftz-r-v) }
.ftp-pp > b { display:block; font-family:var(--ftz-di); font-weight:400;
  font-variation-settings:'opsz' 30; font-size:18px;
  color:var(--ftz-graphite); margin-bottom:var(--ftz-4) }
.ftp-pp-r { display:grid; grid-template-columns:1fr; gap:4px;
  padding:var(--ftz-2) 0 }
@media (min-width:440px) { .ftp-pp-r {
  grid-template-columns:minmax(0,9em) 1fr auto; align-items:center;
  gap:var(--ftz-3) } }
.ftp-pp-r > span { font-size:13.5px; color:var(--ftz-stone) }
@media (min-width:440px) { .ftp-pp-r > span { text-align:right } }
.ftp-pp-d { height:14px; border-radius:var(--ftz-r-p);
  background:#EAE4DA; overflow:hidden }
.ftp-pp-d i { display:block; width:0; height:100%;
  border-radius:var(--ftz-r-p); background:var(--ftz-stone);
  transition:width var(--ftz-cas-p) var(--ftz-krivka) }
.ftp-pp-r--klad .ftp-pp-d i { background:var(--ftz-warm) }
.ftp-pp-r > b { font-family:var(--ftz-data); font-weight:500;
  font-size:15px;
  color:var(--ftz-graphite); white-space:nowrap;
  font-variant-numeric:tabular-nums }
.ftp-pp-z { margin:var(--ftz-4) 0 0; font-size:13px; line-height:1.5;
  color:var(--ftz-stone) }

/* ══════════════════════════════════════════════════════════════════
   TISK

   ⚠️ NENÍ TO KOSMETIKA. Vlastní audit projektu říká, že největší
      nevyužité aktivum je kalkulačka tepelné zátěže, protože
      „nákupčí ho potřebuje ukázat nadřízenému". Nákupčí eskaluje
      tak, že věc VYTISKNE nebo uloží do PDF. Do 16. 9. 2026 bylo
      `@media print` ve 164 kB stylopisu nula řádků, takže z toho
      vyšla navigace, filtry, tlačítka a rozsypaná stránka.

   ⚠️ CO SE NEROZBALUJE: SKRYTÉ KALKULAČKY. Zadání říká „na papíře
      nesmí nic zůstat schované" — a u odpovědí v otázkách to platí.
      U kalkulaček ne: dlaždice mezi nimi PŘEPÍNAJÍ a tři ze čtyř
      jsou `hidden`. Kdyby je tisk odkryl, vytiskne nákupčí čtyři
      kalkulačky, z toho tři s nevyplněnými vstupy — a ta jedna,
      kterou doopravdy počítal, se v tom ztratí. Rozbaluje se to,
      co je schované kvůli ÚSPOŘE MÍSTA, ne to, co je schované
      kvůli VÝBĚRU. Zjištěno čtením DOM, ne z návrhu.

   ⚠️ TMAVÉ PLOCHY SE NA PAPÍŘE ZESVĚTLUJÍ, OSA ZŮSTÁVÁ BAREVNÁ.
      Zadání žádá `print-color-adjust: exact`, protože „osa je
      značka a šedá osa nesdělí nic" — to platí pro OSU, která je
      malá a nese význam. Celostránková břidlice je dekorace a na
      papíře z ní je jen spotřebovaný toner a horší čitelnost.
      Plochy proto bělají; ryska osy a pólové barvy se tisknou.

   ⚠️ SVĚTLÝ TEXT SE MUSÍ PŘEBARVIT SPOLU S PLOCHOU. Na tmavé desce
      je text `--ftz-paper`, `--ftz-bone`, `--ftz-dim` a `--ftz-ember`;
      na bílém papíře by z toho zbyla prázdná stránka. Je to táž
      vada jako `.ftp-tmavy` bez barvy textu (naměřeno 1,52 : 1),
      jen obráceně — proto `color:inherit` na celý podstrom.

   ⚠️ DO CIZÍCH PRVKŮ JEN PŘES `body:has(.ftp)`. Stylopis se načítá
      na každé stránce obchodu; bez té podmínky by tisk rozbil
      i stránky, které naše bloky nemají. Selektory jsou opsané
      ze živého obchodu 16. 9. 2026, ne odvozené z názvů.
   ══════════════════════════════════════════════════════════════ */
@media print {
  @page { size:A4; margin:16mm 14mm }

  /* Co je barevné záměrně, ať se vytiskne. Vlastnost se dědí, takže
     stačí na kořeni bloku. */
  .ftp { print-color-adjust:exact; -webkit-print-color-adjust:exact }

  /* ── 1 · pryč to, co na papíře nic nedělá ──────────────────── */
  body:has(.ftp) .siteCookies,
  body:has(.ftp) .skip-link,
  body:has(.ftp) .user-action,
  body:has(.ftp) .navigation-buttons,
  body:has(.ftp) .navigation-in,
  body:has(.ftp) .search,
  body:has(.ftp) .breadcrumbs,
  body:has(.ftp) .banners-top,
  body:has(.ftp) .benefitBanner,
  body:has(.ftp) .messages,
  body:has(.ftp) > .overall-wrapper > header,
  body:has(.ftp) > .overall-wrapper > footer { display:none !important }

  /* Naše ovladače. Tlačítko na papíře nejde stisknout. */
  .ftp-seg, .ftp-z-hledat, .ftp-kar-ovl, .ftp-kar-tecky,
  .ftp-uvod-tecky, .ftp-modal, .ftp-akce, .ftp-dok-o,
  .ftp-cta, .ftp-cta2, .ftp-cta3, .ftp-k-b, .ftp-k-o,
  .ftp-faq-o .ftp-ikona { display:none !important }

  /* ── 2 · rozbalit, co je schované kvůli místu ──────────────── */
  .ftp--js .ftp-faq-t { display:block !important }
  .ftp details { display:block }
  .ftp details > summary { list-style:none }

  /* ── 3 · karusel se na papíře neroluje ─────────────────────── */
  .ftp-kar-drah { display:block !important; overflow:visible !important }
  .ftp-kar-drah > * { width:auto !important; max-width:none !important;
    transform:none !important; opacity:1 !important;
    margin-bottom:6mm }
  .ftp-uvod-drah { display:block !important; overflow:visible !important }

  /* ── 4 · tmavé plochy bělají, text s nimi ──────────────────── */
  .ftp-hero, .ftp-zaver, .ftp-tmavy, .ftp-uvod-s, .ftp-uvod-in,
  .ftp-uvod-drah, .ftp-panel {
    background:none !important; background-image:none !important;
    box-shadow:none !important; color:var(--ftz-graphite) !important }
  .ftp-hero *, .ftp-zaver *, .ftp-tmavy *, .ftp-uvod-s * {
    color:inherit !important }
  /* Ryska osy je výjimka — je to značka, ne pozadí plochy. */
  .ftp-hero .ftz-osa, .ftp-zaver .ftz-osa, .ftp-tmavy .ftz-osa,
  .ftp-stitek::before, .ftp-dukaz::before {
    background:var(--ftz-osa) !important }

  /* ── 5 · nelámat uprostřed ─────────────────────────────────── */
  .ftp-k, .ftp-m, .ftp-cl, .ftp-krok, .ftp-udaj, .ftp-duv,
  .ftp-faq-p, .ftp-dvoj-p, .ftp-zb, .ftp-mer, .ftp-pp,
  .ftp-inst, .ftp-navrh { break-inside:avoid; page-break-inside:avoid }
  .ftp-h1, .ftp-h2, .ftp-h3, .ftp-cl-n, .ftp-dok-n, .ftp-dok-h2 {
    break-after:avoid; page-break-after:avoid }

  /* ── 6 · u externího odkazu dopsat adresu ──────────────────── */
  .ftp a[href^="http"]::after { content:" (" attr(href) ")";
    font-family:var(--ftz-data); font-size:.78em; font-weight:400;
    color:var(--ftz-stone); word-break:break-all }
  /* Vnitřní odkaz adresu nedostane — „/kontakty/" na papíře
     nikomu nepomůže a jen zdržuje oko. */
  .ftp a[href^="/"]::after { content:none }

  /* ── 7 · sazba na papír ────────────────────────────────────── */
  .ftp { font-size:10.5pt; line-height:1.45 }
  .ftp-sekce { margin:8mm 0 }
  .ftp-cl { padding-block:6mm }
  .ftp-hero-in, .ftp-zaver-in, .ftp-uvod-in {
    padding:6mm 0 !important; max-width:none !important }
  .ftp-dok-h, .ftp-dok-s, .ftp-cl, .ftp-obsah, .ftp-navrh,
  .ftp-spoj, .ftp-dok-k { max-width:none }

  /* ── 8 · odkud to je a kdy se to tisklo ────────────────────── */
  .ftp-tisk { display:block !important; margin-top:8mm;
    padding-top:3mm; border-top:1px solid var(--ftz-rule);
    font-family:var(--ftz-data); font-size:8.5pt;
    color:var(--ftz-stone) }
}

.ftp-tisk-d { font-family:var(--ftz-data) }

/* Na obrazovce je tenhle řádek zbytečný — patří na papír.
   ⚠️ NESE TEXT, takže ho editor Shoptetu nesmaže: maže blokové
      prvky, které v celém podstromu text nemají. */
.ftp-tisk { display:none }