/* =========================================================
   fajnteplota.cz — vlastní CSS pro Shoptet
   Vkládá se do  Vzhled a obsah → Editor → Vlastní CSS.
   Pole nemá limit délky (na rozdíl od HTML bloků, kde je 8192 znaků).

   ČTĚTE, NEŽ TO VLOŽÍTE
   ---------------------------------------------------------
   Soubor má TŘI části a liší se tím, jak jistě zaberou:

   ČÁST A — ŽIVLY A PROMĚNNÉ (11 selektorů). Písma, barvy,
   nadpisy, obtažení při ovládání klávesnicí. Funguje na každé
   šabloně. Nemazat.

   ČÁST B — TŘÍDY SHOPTETU (20 selektorů). ODHAD. Názvy tříd se
   mezi šablonami liší a oficiální seznam stabilních tříd byl
   v době psaní nedostupný (endpoint vracel 403). Ověřte si je:
   pravým tlačítkem na prvek → Prozkoumat → v panelu Elements
   opište skutečnou třídu.
   ⚠️ TOHLE JE JEDINÁ ČÁST, KTEROU SE SMÍ MAZAT.

   ČÁST C — NAŠE VLASTNÍ TŘÍDY ft-* (100 selektorů). JISTÉ.
   Jsou to třídy z našich vlastních bloků — osa u produktu,
   kalkulačka, rozcestník, patička, děkovací stránka.
   ⚠️ NEMAZAT, ANI KDYŽ SE „NIC NEDĚJE". Neprojeví se prostě
      proto, že na té stránce ještě není vložený náš blok.
      Kdo je smaže, přijde o kalkulačku i o rozcestník.

   Rozbor souboru kdykoli:  python 4-shoptet/css_kontrola.py

   Barvy a jejich kontrasty jsou ověřené a jsou v brand manuálu.
   ========================================================= */


/* ═════════ ČÁST A — BEZPEČNÁ ═════════════════════════════ */

@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');

:root {
  /* póly — objevují se JEN tam, kde se mluví o změně teploty */
  --ft-warm:       #FF8A4C;   /* teplý pól, plochy a hlavní tlačítko */
  --ft-warm-ink:   #B14A18;   /* jediná teplá barva pro text na světlém, 4,87:1 */
  --ft-cold:       #7FB3CC;   /* chladný pól, plochy */
  --ft-cold-ink:   #1F5A75;   /* chladná barva pro text, 6,77:1 */
  --ft-ember:      #F0A868;   /* teplá na tmavém, 8,20:1 */
  --ft-glacier:    #8FCEDD;   /* chladná na tmavém, 9,40:1 */

  /* plochy a text */
  --ft-paper:      #F5F2ED;
  --ft-bone:       #FFFCF8;
  --ft-slate:      #1C2024;   /* patička a plochy značky */
  --ft-graphite:   #1C1B1A;   /* text, 15,4:1 na papíře */
  --ft-body:       #413D39;
  --ft-stone:      #6F675F;   /* popisky, 4,97:1 — pod tuhle mez nechoďte */
  --ft-rule:       #E0D9CE;

  --ft-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ft-data:    'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --ft-ui:      'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* ── RÁDIUS ────────────────────────────────────────────────
     Brand manuál měl nulu a byl pro to důvod: zaoblení je výchozí
     nastavení každé šablony, a proto vypadá jako šablona. Jenže
     ostrá nula zase čte jako nedodělané — hranice mezi „záměrně
     brutalistní" a „zapomněli jsme" je tenká a na e-shopu padá na
     špatnou stranu.

     Řešení není přidat zaoblení všude. Řešení je DVĚ HODNOTY
     A JEDNA VÝJIMKA:
       4 px  ovládací prvky — tlačítko, pole, štítek
       8 px  plochy — karta, panel, tmavý pruh
       0     OSA. Je to stupnice, ne prvek rozhraní. Zaoblená
             stupnice nedává smysl ani na teploměru.
     Větší plocha snese větší poloměr; opačný poměr vypadá špatně
     a je to nejčastější chyba v tomhle rozhodnutí. */
  --ft-r:    4px;
  --ft-r-k:  8px;
  --ft-r-p:  999px;          /* pilulka — jen u chipu s ikonou */

  /* ── ELEVACE ───────────────────────────────────────────────
     Stín je ODSTÍNĚNÝ GRAFIT, ne černá. Černý stín na teplém
     papíře zešedne a plocha vypadá špinavě — je to rozdíl, který
     nikdo nepojmenuje a každý vidí.

     Tři stupně, ne pět. Každý stín má dvě vrstvy: krátkou ostrou
     (kontakt s plochou) a dlouhou rozostřenou (vzdálenost od ní).
     Jedna vrstva vypadá jako nálepka. */
  --ft-e1: 0 1px 2px rgba(28,27,26,.05), 0 1px 3px rgba(28,27,26,.04);
  --ft-e2: 0 2px 4px rgba(28,27,26,.06), 0 8px 20px -6px rgba(28,27,26,.10);
  --ft-e3: 0 4px 8px rgba(28,27,26,.07), 0 16px 40px -12px rgba(28,27,26,.16);

  /* ── POHYB ─────────────────────────────────────────────────
     Křivka má rychlý začátek a měkké dosednutí. Lineární pohyb
     působí mechanicky, `ease` je rozmáznuté. Tohle je ten rozdíl
     mezi „animace" a „reakce". */
  --ft-cas-r: 120ms;         /* okamžitá odezva — barva, obrys */
  --ft-cas:   180ms;         /* běžná změna — pozadí, stín */
  --ft-cas-p: 280ms;         /* pomalá — posun, rozbalení */
  --ft-krivka: cubic-bezier(.2,.7,.3,1);

  /* ── ODSAZENÍ ──────────────────────────────────────────────
     Krok 4 px. Nahoře se skáče po větších násobcích, protože
     lineární řada nad 32 px přestane dělat hierarchii. */
  --ft-1: 4px;   --ft-2: 8px;   --ft-3: 12px;  --ft-4: 16px;
  --ft-5: 24px;  --ft-6: 32px;  --ft-7: 48px;  --ft-8: 64px;
  --ft-9: 96px;  --ft-10: 128px;
  /* Rytmus mezi sekcemi. Jedna hodnota pro celý web — tím vzniká
     svislá osa, na které stránka drží. */
  --ft-sekce: clamp(56px, 9vw, 112px);

  /* ── OBRYS PŘI OVLÁDÁNÍ KLÁVESNICÍ ─────────────────────────
     Prstenec, ne `outline`. Prstenec kopíruje rádius, `outline`
     ho na starších prohlížečích usekne do pravého úhlu. */
  --ft-prsten: 0 0 0 3px rgba(255,138,76,.45);
}

body {
  font-family: var(--ft-ui);
  font-weight: 300;
  color: var(--ft-graphite);
  background: var(--ft-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ft-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--ft-graphite);
}

/* Viditelné obtažení při ovládání klávesnicí. Řada šablon ho ruší;
   bez něj se e-shop nedá projít bez myši. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ft-cold-ink);
  outline-offset: 3px;
}


/* ═════════ ČÁST B — TŘÍDY SHOPTETU · ODHAD ═══════════════
   JEDINÁ ČÁST, KTEROU SE SMÍ MAZAT. Dvacet selektorů, u nichž
   si nejsme jistí, jak je vaše šablona pojmenovala. Projděte
   e-shop a co nezabralo, smažte — nic se tím nerozbije.
   ═════════════════════════════════════════════════════════ */

/* --- podtitul v záhlaví ---------------------------------------------
   Waltz sází přes obrázek v záhlaví „Podtitul obchodu" z Nastavení →
   Základní nastavení → Nastavení obchodu → Obecné.

   ⚠️ Je to PROSTÉ TEXTOVÉ POLE. Nepřijme HTML, takže v něm nejdou
      dvě velikosti písma ani ruční zlom řádku. Když chcete nadpis
      i podnadpis, vezměte obrázek s vypáleným textem z
      podklady/zahlavi/prechod/s-textem/ a podtitul nechte prázdný.

   ⚠️ Selektory jsou ODHAD. Ověřte je: pravým tlačítkem na slogan →
      Prozkoumat → opište skutečnou třídu z panelu Elements.

   Zlom řádku jde vynutit šířkou, ne enterem: text se zalomí sám. */
.site-slogan,
.header-slogan,
#header .slogan,
.site-name .slogan {
  font-family: var(--ft-display);
  font-weight: 500;
  font-size: clamp(24px, 3.6vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ft-paper);
  /* Šířkou se řídí, kde se text zalomí. Bez ní se roztáhne přes
     celý pás a v jednom řádku zdrobní na mobilu. */
  max-width: 18ch;
  margin: 0 auto;
  text-wrap: balance;
  /* Ve Waltzu sedí logo a menu NA obrázku v záhlaví — horních
     zhruba 44 % pásu. Bez odsazení leze slogan pod menu. */
  padding-top: 4.5rem;
  text-shadow: 0 1px 24px rgba(28, 32, 36, .55);
}

@media (max-width: 767px) {
  .site-slogan,
  .header-slogan,
  #header .slogan,
  .site-name .slogan {
    max-width: 14ch;
    padding-top: 2rem;
  }
}

/* Když podtitul nechcete vůbec — třeba proto, že text je vypálený
   v obrázku — vyprázdněte pole v administraci. Tohle je až záložní
   možnost pro případ, že pole vyprázdnit nejde. */
/* .site-slogan { display: none; } */

/* --- tlačítka -------------------------------------------------------
   Hlavní tlačítko nese teplý pól. Text je grafitový, ne bílý:
   světlá na #FF8A4C dává 2,28:1 a je nečitelná, grafit 7,36:1.
   Po najetí ztmavne na #B14A18, kde světlá vyjde 5,32:1. Měřeno. */
.btn,
.button {
  font-family: var(--ft-ui);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 3px;
}

.btn-primary,
.btn-cart,
.add-to-cart-button {
  background: var(--ft-warm);
  border-color: var(--ft-warm);
  color: var(--ft-graphite);
}

.btn-primary:hover,
.btn-cart:hover,
.add-to-cart-button:hover {
  background: var(--ft-warm-ink);
  border-color: var(--ft-warm-ink);
  color: var(--ft-bone);          /* na tmavší oranžové už bílá projde */
}

/* --- ceny a čísla ---------------------------------------------------
   Číslice v neproporcionálním písmu drží sloupce zarovnané. */
.price,
.price-final,
.price-standard,
.prices {
  font-family: var(--ft-data);
  font-variant-numeric: tabular-nums;
  color: var(--ft-graphite);
}

/* Přeškrtnutá cena jen tam, kde 30 dní opravdu platila — to hlídá
   obsluha e-shopu, CSS to za vás nepozná. */
.price-standard {
  color: var(--ft-stone);
}

/* --- patička --------------------------------------------------------
   Jediná tmavá plocha v obchodě. Tady je značka Temperia. */
#footer,
.footer {
  background: var(--ft-slate);
  color: var(--ft-paper);
}

#footer a,
.footer a {
  color: var(--ft-paper);
}

#footer a:hover,
.footer a:hover {
  color: var(--ft-ember);
}

/* --- popisky a doplňkový text --------------------------------------- */
.text-muted,
.availability,
small {
  color: var(--ft-stone);       /* 4,97:1 — nejsvětlejší přípustná */
}


/* ═════════ ČÁST C — NAŠE VLASTNÍ TŘÍDY ft-* · JISTÉ ══════
   Od tohoto místa až do konce souboru jsou třídy z NAŠICH
   bloků. Nejsou to odhady — my sami je vypisujeme do HTML.

   ⚠️ NEMAZAT. Když se pravidlo „neprojeví", není chybné —
      jen na té stránce zatím není vložený blok, který tu
      třídu nese. Smazáním přijdete o kalkulačku a rozcestník.
   ═════════════════════════════════════════════════════════ */


/* ═════════ OSA — SIGNATURA ZNAČKY ════════════════════════
   Vloží se do popisu produktu jako HTML. CHLADNÝ pól vlevo,
   TEPLÝ vpravo — jako každá číselná osa a jako osa x ve všech
   grafech projektu.

   <div class="ft-osa">
     <div class="ft-osa-hlava"><span>Chlad</span><span>Teplo</span></div>
     <div class="ft-osa-cara ft-osa-p20"></div>
     <div class="ft-osa-paticka"><span>−8 °C</span><span>4 h</span></div>
   </div>

   Třída ft-osa-pNN je poloha na stupnici po 5 %: 0 je nejchladnější
   pól, 100 nejteplejší. U chladicího zboží tedy vlevo.

   ⚠️ TOHLE SE JEDNOU ROZEŠLO A NIKDO SI TOHO NEVŠIML. Značka se
      5. 9. 2026 obrátila, výpočet polohy v export.py se obrátil s ní,
      ale popisky „Teplo | Chlad" a tenhle přechod zůstaly po staru.
      Puntík chladicí vesty tak ležel vlevo — správně — ale pod slovem
      „Teplo" a na oranžovém konci. Bylo to na 21 popisech produktů.
      Hlídá to teď kontrola_smeru_osy() v kontrola.py.
   ========================================================= */

.ft-osa {
  max-width: 420px;
  margin: 20px 0;
  font-family: var(--ft-data);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ft-stone);
}

.ft-osa-hlava,
.ft-osa-paticka {
  display: flex;
  justify-content: space-between;
}

.ft-osa-paticka {
  margin-top: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--ft-graphite);
}

.ft-osa-cara {
  position: relative;
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ft-cold), #A9A29A, var(--ft-warm));
}

/* ⚠️ PUNTÍK JE PSEUDO-PRVEK, NE ELEMENT. Dřív to byl prázdný <i>
   s atributem style="left:22%". Obojí je v editoru Shoptetu křehké:
   inline styly se běžně odstraňují a prázdné inline elementy se
   mažou jako smetí. Kdyby to spadlo, osa by u všech 21 produktů
   ukázala nulu a nikdo by si toho nevšiml — přesně jako u dl/dt/dd
   v kalkulačce.

   Pseudo-prvek v HTML vůbec není, takže není co zahodit, a poloha
   se nese TŘÍDOU, protože třídy prokazatelně přežívají (kalkulačka
   je má a funguje).

   Krok je 5 %. Osa je ukazatel, ne měřidlo — přesná hodnota
   ve stupních stojí čitelně pod ní. */
.ft-osa-cara::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: var(--ft-graphite);
  transform: translateY(-50%);
}

.ft-osa-p0::after { left: 0% }
.ft-osa-p5::after { left: 5% }
.ft-osa-p10::after { left: 10% }
.ft-osa-p15::after { left: 15% }
.ft-osa-p20::after { left: 20% }
.ft-osa-p25::after { left: 25% }
.ft-osa-p30::after { left: 30% }
.ft-osa-p35::after { left: 35% }
.ft-osa-p40::after { left: 40% }
.ft-osa-p45::after { left: 45% }
.ft-osa-p50::after { left: 50% }
.ft-osa-p55::after { left: 55% }
.ft-osa-p60::after { left: 60% }
.ft-osa-p65::after { left: 65% }
.ft-osa-p70::after { left: 70% }
.ft-osa-p75::after { left: 75% }
.ft-osa-p80::after { left: 80% }
.ft-osa-p85::after { left: 85% }
.ft-osa-p90::after { left: 90% }
.ft-osa-p95::after { left: 95% }
.ft-osa-p100::after { left: 100% }


/* ═════════ POPIS PRODUKTU ════════════════════════════════
   Třídy používají hotové popisy v 4-shoptet/export/popisy/.
   ========================================================= */

.ft-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ft-graphite);
}

/* „Za jakých podmínek" je u nás povinné u každého čísla. Proto to
   není poznámka pod čarou, ale samostatný odstavec s linkou. */
.ft-podminky {
  margin: 18px 0;
  padding: 12px 0 12px 16px;
  border-left: 2px solid var(--ft-rule);
  font-size: 15px;
  color: var(--ft-stone);
}

.ft-podminky strong {
  font-weight: 500;
  color: var(--ft-body);
}

.ft-parametry {
  width: 100%;
  max-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
}

.ft-parametry th,
.ft-parametry td {
  padding: 9px 0;
  border-bottom: 1px solid var(--ft-rule);
  text-align: left;
  vertical-align: top;
}

.ft-parametry th {
  width: 40%;
  font-weight: 400;
  color: var(--ft-stone);
}

.ft-parametry td {
  font-family: var(--ft-data);
  font-size: 14px;
  color: var(--ft-graphite);
}


/* ═════════ GRAFY V POPISU PRODUKTU ═══════════════════════ */

/* --- stránka Studie -------------------------------------------------
   Deset grafů pod sebou. Nadpisy jsou vzdušné, protože stránka se
   čte shora dolů a mezera mezi kapitolami je jediné, co ji dělí. */
.ft-studie {
  max-width: 760px;
  margin: 0 auto;
}

.ft-studie h2 {
  font-family: var(--ft-display);
  font-weight: 500;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.22;
  color: var(--ft-graphite);
  margin: 56px 0 0;
}

.ft-studie h2:first-of-type {
  margin-top: 24px;
}

.ft-studie p {
  color: var(--ft-body);
  line-height: 1.62;
  margin: 0 0 4px;
}

.ft-graf {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px 0 8px;
}

.ft-graf-zdroj {
  font-family: var(--ft-data);
  font-size: 12px;
  color: var(--ft-stone);
  margin: 0 0 24px;
}


/* =========================================================
   KALKULAČKA TEPELNÉ ZÁTĚŽE
   Značkování je v export/shoptet-kalkulacka.html a vkládá se
   do obsahu stránky přes Nástroje → Zdrojový kód. Styly jsou
   schválně TADY: pole Vlastní CSS nemá limit délky, kdežto
   u bloků HTML je 8192 znaků a kalkulačka by se tam nevešla.
   ========================================================= */
.ft-kalk {
  display: grid;
  grid-template-columns: minmax(260px, 5fr) minmax(280px, 6fr);
  gap: 0;
  border: 1px solid var(--ft-rule);
  background: var(--ft-bone);
  margin: 28px 0;
}
@media (max-width: 780px) { .ft-kalk { grid-template-columns: 1fr } }

.ft-k-vstup { padding: 28px; display: flex; flex-direction: column; gap: 22px }

.ft-k-pole { display: block }
.ft-k-popis {
  display: block;
  font-family: var(--ft-data);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ft-stone);
  margin-bottom: 9px;
}
.ft-k-pole input[type="range"] { width: 100%; accent-color: var(--ft-warm-ink) }
.ft-k-pole output {
  display: block;
  font-family: var(--ft-data);
  font-size: 19px;
  color: var(--ft-graphite);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.ft-k-pole--uzke input[type="number"] {
  width: 110px;
  font-family: var(--ft-data);
  font-size: 17px;
  padding: 8px 10px;
  border: 1px solid var(--ft-rule);
  background: #fff;
  color: var(--ft-graphite);
}

.ft-k-volby { display: flex; border: 1px solid var(--ft-rule); background: #fff }
.ft-k-volby button {
  flex: 1;
  font-family: var(--ft-data);
  font-size: 12.5px;
  padding: 9px 6px;
  background: none;
  border: none;
  border-right: 1px solid var(--ft-rule);
  color: var(--ft-stone);
  cursor: pointer;
}
.ft-k-volby button:last-child { border-right: none }
.ft-k-volby button[aria-pressed="true"] { background: var(--ft-graphite); color: var(--ft-bone) }
.ft-k-volby button:focus-visible { outline: 2px solid var(--ft-cold-ink); outline-offset: -2px }

/* Výsledek na tmavém — je to odečet, ne formulář. */
.ft-k-vysledek { background: var(--ft-slate); color: var(--ft-paper); padding: 28px }
.ft-k-stitek {
  font-family: var(--ft-data);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9AA3A8;
}
.ft-k-hlavni { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px }
.ft-k-hlavni strong {
  font-family: var(--ft-display);
  font-variation-settings: 'opsz' 144;
  font-weight: 500;
  font-size: clamp(42px, 8vw, 62px);
  line-height: 1;
  color: #FFFCF8;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.ft-k-jednotka { font-family: var(--ft-data); font-size: 17px; color: var(--ft-ember) }

/* ⚠️ Tyhle řádky byly dřív dl/dt/dd. Editor Shoptetu to značkování
   zahodil i s atributy id — na ostrém webu 6. 9. 2026 se výsledek slil
   do holého textu a skript spadl na `null.textContent`. Div a span
   editor nechává být. Nevracet zpátky na definiční seznam. */
.ft-k-radky { margin: 24px 0 0 }
.ft-k-radek {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;      /* delší hodnota se zalomí pod popisek, ne do sloupce */
  gap: 4px 18px;
  padding: 11px 0;
  border-bottom: 1px solid #333B42;
}
.ft-k-popisek { flex: 0 1 auto; font-size: 14.5px; color: #9AA3A8 }
.ft-k-hodnota {
  flex: 1 1 auto;
  font-family: var(--ft-data);
  font-size: 14px;
  color: #EDEAE5;
  text-align: right;
}

.ft-k-zaver { margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: #D3D8DC }

.ft-k-akce { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center }
.ft-k-cta {
  display: inline-block;
  background: var(--ft-warm);
  color: var(--ft-graphite);   /* 7,36 : 1 — světlá by měla 2,28 */
  font-family: var(--ft-ui);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: .03em;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 3px;
}
.ft-k-cta:hover { background: var(--ft-ember) }
.ft-k-druhe {
  font-family: var(--ft-data);
  font-size: 12.5px;
  color: var(--ft-paper);
  background: none;
  border: 1px solid rgba(245, 242, 237, .45);
  padding: 11px 15px;
  cursor: pointer;
  border-radius: 3px;
}
.ft-k-druhe:hover { background: var(--ft-paper); color: var(--ft-graphite) }

.ft-k-zdroj {
  grid-column: 1 / -1;
  border-top: 1px solid var(--ft-rule);
  padding: 16px 28px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ft-stone);
}
.ft-k-zdroj b { color: var(--ft-body); font-weight: 500 }


/* =========================================================
   DVĚ BRÁNY — rozcestník chlazení / vyhřívání
   Značkování je v export/shoptet-brany.html.
   Dva vstupy, ale JEDNA osa pod oběma: příslib „obojí na jedné
   stupnici" se nesmí rozpadnout hned na rozcestníku.
   ========================================================= */
.ft-brany { margin: 40px 0; border-top: 1px solid var(--ft-rule) }

.ft-brany-uvod { max-width: 56ch; padding-top: 32px }
.ft-b-stitek {
  font-family: var(--ft-data);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ft-stone);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.ft-b-stitek::before { content: ""; width: 22px; height: 1px; background: var(--ft-warm) }
.ft-brany-uvod h2 { margin: 16px 0 0 }
.ft-brany-uvod p { margin: 16px 0 0; font-size: 17.5px; color: var(--ft-body) }

.ft-brany-mriz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 40px;
  border-top: 1px solid var(--ft-rule);
}
@media (max-width: 760px) { .ft-brany-mriz { grid-template-columns: 1fr } }

.ft-brana {
  display: flex;
  flex-direction: column;
  padding: 40px 32px 40px 0;
  text-decoration: none;
  color: inherit;
}
.ft-brana + .ft-brana { padding-left: 32px; border-left: 1px solid var(--ft-rule) }
@media (max-width: 760px) {
  .ft-brana { padding-right: 0 }
  .ft-brana + .ft-brana { padding-left: 0; border-left: none; border-top: 1px solid var(--ft-rule) }
}

.ft-b-pol {
  font-family: var(--ft-data);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 9px;
}
.ft-b-pol::before { content: ""; width: 20px; height: 3px }
.ft-brana--teplo .ft-b-pol { color: var(--ft-warm-ink) }
.ft-brana--teplo .ft-b-pol::before { background: var(--ft-warm) }
.ft-brana--chlad .ft-b-pol { color: var(--ft-cold-ink) }
.ft-brana--chlad .ft-b-pol::before { background: var(--ft-cold) }

.ft-b-nadpis {
  font-family: var(--ft-display);
  font-variation-settings: 'opsz' 144;
  font-weight: 600;
  font-size: clamp(25px, 3.2vw, 34px);
  letter-spacing: -.02em;
  line-height: 1.08;
  margin-top: 16px;
  color: var(--ft-graphite);
}
.ft-b-kdy { margin-top: 12px; font-size: 17px; color: var(--ft-body); max-width: 40ch }
.ft-b-co { margin-top: 16px; font-size: 15.5px; color: var(--ft-stone); max-width: 40ch }

.ft-b-spod {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.ft-b-jit {
  font-family: var(--ft-data);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ft-graphite);
  border-bottom: 2px solid var(--ft-rule);
  padding-bottom: 3px;
  transition: border-color .18s;
}
.ft-brana:hover .ft-b-jit { border-bottom-color: var(--ft-graphite) }
.ft-brana--teplo:hover .ft-b-jit { border-bottom-color: var(--ft-warm-ink) }
.ft-brana--chlad:hover .ft-b-jit { border-bottom-color: var(--ft-cold-ink) }
.ft-b-pocet { font-family: var(--ft-data); font-size: 12.5px; color: var(--ft-stone) }

/* Jedna osa pod oběma branami. Tohle drží příslib pohromadě. */
/* Póly taky bez prázdných <i> — viz poznámka u .ft-osa-cara. */
.ft-brany-osa {
  height: 5px;
  background: linear-gradient(90deg,
              var(--ft-cold) 0 50%, var(--ft-warm) 50% 100%);
}
.ft-brany-osa i:first-child { background: var(--ft-warm) }
.ft-brany-osa i:last-child { background: var(--ft-cold) }

@media (prefers-reduced-motion: reduce) { .ft-b-jit { transition: none } }


/* =========================================================
   PRUH DŮVĚRY
   Značkování je v export/shoptet-duvera.html.
   ========================================================= */
.ft-duvera {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--ft-rule);
  border: 1px solid var(--ft-rule);
  margin: 40px 0;
}
.ft-d-polozka { background: var(--ft-bone); padding: 22px 20px; display: block }
.ft-d-nadpis {
  display: block;
  font-family: var(--ft-ui);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ft-graphite);
  padding-left: 26px;
  position: relative;
}
.ft-d-nadpis::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 2px;
  background: var(--ft-warm-ink);
}
.ft-d-text { display: block; margin-top: 8px; padding-left: 26px;
  font-size: 14.5px; color: var(--ft-stone) }


/* =========================================================
   TMAVÝ BLOK
   Obalte text v editoru stránky do <div class="ft-tmavy">.
   Používá se pro sekci „pro provozy" na hlavní stránce.
   ========================================================= */
.ft-tmavy {
  background: var(--ft-slate);
  color: var(--ft-paper);
  padding: 48px 32px;
  margin: 40px 0;
}
.ft-tmavy h2,
.ft-tmavy h3 { color: #FFFCF8 }
.ft-tmavy a { color: var(--ft-ember) }
@media (max-width: 640px) { .ft-tmavy { padding: 32px 20px } }


/* =========================================================
   ČASTÉ DOTAZY
   Používá značku <details>, kterou umí každý prohlížeč.
   Žádný JavaScript není potřeba — funguje i bez něj, umí ho
   čtečka pro nevidomé a nedá se rozbít.

   <details class="ft-faq">
     <summary>Otázka</summary>
     <p>Odpověď</p>
   </details>
   ========================================================= */
.ft-faq {
  border-bottom: 1px solid var(--ft-rule);
  padding: 16px 0;
}
.ft-faq summary {
  font-family: var(--ft-ui);
  font-weight: 500;
  font-size: 17px;
  color: var(--ft-graphite);
  cursor: pointer;
  list-style: none;
  padding-right: 28px;
  position: relative;
}
.ft-faq summary::-webkit-details-marker { display: none }
.ft-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  font-family: var(--ft-data);
  color: var(--ft-warm-ink);
}
/* Znak minus U+2212, ne spojovnik - parovat s "+" ma stejnou sirku.
   Overeno, ze ho IBM Plex Mono ma. Driv tu stal ridici znak U+0091
   a rozbaleny dotaz zobrazoval smeti. */
.ft-faq[open] summary::after { content: "\2212" }   /* minus U+2212, ne spojovník */
.ft-faq summary:focus-visible { outline: 3px solid var(--ft-cold-ink); outline-offset: 3px }
.ft-faq p { margin: 12px 0 0; color: var(--ft-body); max-width: 66ch }

/* =========================================================
   SEZÓNNÍ ZVÝRAZNĚNÍ BRÁNY                     🔶 k ověření
   Třídu přidává skript ze  shoptet-zapati.html  podle měsíce
   (květen–září chlazení, listopad–březen vyhřívání, duben
   a říjen nic). Bez JavaScriptu jsou si brány rovné.

   ⚠️ Zvýraznění NENÍ jen barevné. Barva sama by po odbarvení
   zmizela — proto přibývá i slovní štítek. Viz docs/15.
   ========================================================= */
.ft-brana--sezona .ft-b-nadpis::after {
  content: "právě teď";
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  border-radius: 2px;
  font-family: var(--ft-data);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.ft-brana--sezona.ft-brana--teplo .ft-b-nadpis::after {
  background: #FAEDE3;              /* teplá tlumená plocha */
  color: var(--ft-warm-ink);        /* #B14A18 na #FAEDE3 = 4,74:1 */
}
.ft-brana--sezona.ft-brana--chlad .ft-b-nadpis::after {
  background: #DCEAF1;              /* chladná tlumená plocha */
  color: var(--ft-cold-ink);        /* #1F5A75 na #DCEAF1 = 6,15:1 */
}
/* ⚠️ Sytější teplé pozadí sem NEDÁVEJTE. Původní #F6E4D6 vypadalo lépe,
   ale mělo 4,40:1 — pod mezí AA pro drobný text. Změřeno, ne odhadnuto. */


/* =========================================================
   DĚKOVACÍ STRÁNKA                             🔶 k ověření
   Obsah pole „Dokončená objednávka" na obrazovce HTML kód.
   Zdroj: 4-shoptet/export/shoptet-objednavka.html

   Po první zkušební objednávce ověřte, KAM se blok vykreslí.
   Že pole přijme i běžné HTML, je předpoklad, ne ověřený fakt.
   ========================================================= */
.ft-dekujeme {
  max-width: 62ch;
  margin: 36px 0;
  padding: 26px 24px;
  background: var(--ft-bone);
  border-left: 3px solid var(--ft-warm);
}
.ft-dek-stitek {
  margin: 0 0 6px;
  font-family: var(--ft-data);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ft-stone);           /* 4,97:1 — nejsvětlejší přípustná */
}
.ft-dekujeme h2 {
  margin: 0 0 18px;
  font-family: var(--ft-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--ft-graphite);
}
.ft-dek-kroky {
  margin: 0;
  padding: 0 0 0 1.3em;
  color: var(--ft-body);
}
.ft-dek-kroky li { margin: 0 0 14px; line-height: 1.6 }
.ft-dek-kroky li:last-child { margin-bottom: 0 }
.ft-dek-kroky strong {
  display: block;
  font-family: var(--ft-ui);
  font-weight: 500;
  color: var(--ft-graphite);
}
.ft-dek-pomoc {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ft-rule);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ft-body);
}
.ft-dek-pomoc a { color: var(--ft-cold-ink) }   /* 6,77:1 na papíře */


/* =========================================================
   PODPIS ZNAČKY V PATIČCE
   Jediné místo v obchodě, kde se Temperia jmenuje vedle
   domény. Vysvětluje, co zákazník najde na produktu, který
   mu přijde domů. Značkování je v docs/10-PATICKA.md.
   ========================================================= */
.ft-podpis {
  font-family: var(--ft-data);
  font-size: 13px;
  line-height: 1.8;
  color: #9AA3A8;                   /* 6,38:1 na břidlici #1C2024 */
  max-width: 60ch;
  margin: 24px 0 0;
}
.ft-podpis strong {
  font-family: var(--ft-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .08em;
  color: #FFFCF8;                   /* 16,02:1 na břidlici */
}


/* ═════════ TITULNÍ STRANA ════════════════════════════════
   Třídy ft-t-*. Nese je jediný blok, export/shoptet-titulka.html.

   ZÁMĚR
   Prošel jsem, co v oboru na webu je — PIP, TechNiche, EZCooldown,
   StaCool, Safety Smart Gear. Všechno stojí na fotce vesty a na
   seznamu vlastností; u žádného čísla se nedá dohledat, odkud je.
   Prémiový konec (Strauss) má skvělou fotografii, ale mluví
   k oblékání, ne k provozu.

   Mezera je v DOLOŽITELNOSTI. Provozní manažer nepotřebuje další
   hezkou fotku vesty — potřebuje číslo, které ukáže nadřízenému,
   a zdroj, o který se opře. Odtud pruh se třemi čísly a citacemi
   a kalkulačka hned druhá v pořadí.

   Luxus tady není lesk: je to prostor, jedna myšlenka na obrazovku,
   přesná typografie a čísla, která obstojí. Žádné stíny, žádná
   zaoblení navíc, žádný přechod kromě osy značky.

   ⚠️ Pólová barva se objeví JEN tam, kde se mluví o teplotě —
      na branách a na ose. Nikde jinde, jinak přestane být údajem.
   ========================================================= */

.ft-t-uvod,
.ft-t-brany,
.ft-t-kalk,
.ft-t-cisla,
.ft-t-duvera {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* ── úvodní věta ─────────────────────────────────────────── */
.ft-t-uvod { padding: clamp(40px, 7vw, 88px) 0 0 }

/* Optická velikost Fraunces roste s velikostí písma; při téhle
   velikosti je potřeba opsz vysoko, jinak text působí měkce. */
.ft-t-veta {
  margin: 0;
  font-family: var(--ft-display);
  font-variation-settings: 'opsz' 120, 'wght' 400;
  font-weight: 400;
  font-size: clamp(30px, 5.2vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ft-graphite);
  max-width: 15ch;
}

.ft-t-pod {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  max-width: 62ch;
  font-family: var(--ft-ui);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--ft-body);
}

/* Osa značky jako vlas. Chlad vlevo, teplo vpravo — stejně jako
   všude jinde v systému. */
.ft-t-cara {
  height: 3px;
  margin-top: clamp(32px, 5vw, 56px);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ft-cold), #A9A29A, var(--ft-warm));
}

/* ── dvě brány ───────────────────────────────────────────── */
/* Brány dřív držela jedna linka a jeden rámeček kolem obou —
   vypadaly jako tabulka. Teď jsou to dvě samostatné karty
   s mezerou, takže je vidět, že jsou to dvě rozhodnutí, ne dvě
   buňky. */
.ft-t-brany {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ft-4);
  margin-top: var(--ft-sekce);
}

/* ⚠️ BARVA TU MUSÍ BÝT, i když si ji každý potomek nastavuje sám.
   Waltz obarvuje odkazy v obsahu NA BÍLO. Naměřeno 7. 9. 2026 na
   ostrém webu: text bran byl bílý na bílém, tedy 1 : 1 — na stránce
   nebylo vidět vůbec nic, jen prázdné místo vysoké 437 px. Bylo to
   tím, že běžela stará verze stylopisu bez těchhle pravidel.

   Naše pravidlo nad tím Waltzovým vyhrává, ověřeno vložením přímo
   do živé stránky. Barva na .ft-t-brana je pojistka pro případ, že
   by v bráně někdy skončil text mimo <span> — bez ní by zmizel
   a nikdo by nepoznal proč. */
.ft-t-brana {
  display: flex;
  flex-direction: column;
  gap: var(--ft-3);
  padding: clamp(24px, 3.4vw, 40px);
  background: var(--ft-bone);
  color: var(--ft-body);
  text-decoration: none;
  border: 1px solid var(--ft-rule);
  border-radius: var(--ft-r-k);
  box-shadow: var(--ft-e1);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--ft-cas) var(--ft-krivka),
              border-color var(--ft-cas) var(--ft-krivka),
              transform var(--ft-cas) var(--ft-krivka);
}

.ft-t-brana:hover {
  border-color: #CFC6B8;
  box-shadow: var(--ft-e2);
  transform: translateY(-2px);
}
.ft-t-brana:focus-visible {
  outline: none;
  box-shadow: var(--ft-e2), var(--ft-prsten);
}
.ft-t-brana:active { transform: translateY(0); box-shadow: var(--ft-e1) }

/* Barevný pól nese pruh nahoře, ne plocha. Světlý text na oranžové
   má 2,28:1 a v tomhle systému je zakázaný.

   Pruh je pseudoprvek, ne `border-top`: rámeček by se na zaoblené
   kartě nahoře useknul do hranatého rohu a bylo by to vidět. */
.ft-t-brana::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ft-rule);
  transition: height var(--ft-cas) var(--ft-krivka);
}
.ft-t-brana:hover::before { height: 5px }
.ft-t-brana--chlad::before { background: var(--ft-cold) }
.ft-t-brana--teplo::before { background: var(--ft-warm) }

.ft-t-stitek {
  font-family: var(--ft-data);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ft-stone);
}

.ft-t-brana--chlad .ft-t-stitek { color: var(--ft-cold-ink) }
.ft-t-brana--teplo .ft-t-stitek { color: var(--ft-warm-ink) }

.ft-t-h {
  font-family: var(--ft-display);
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.2;
  color: var(--ft-graphite);
}

.ft-t-t {
  font-family: var(--ft-ui);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ft-body);
}

/* Vypadá to jako odkaz, ale je to text uvnitř odkazu — proto
   `box-shadow` místo `border-bottom`: posune se při najetí spolu
   s celou kartou a nepřekreslí se. */
.ft-t-vic {
  margin-top: auto;
  padding-top: var(--ft-2);
  font-family: var(--ft-ui);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ft-graphite);
  align-self: flex-start;
  box-shadow: inset 0 -1px 0 var(--ft-graphite);
  transition: box-shadow var(--ft-cas) var(--ft-krivka),
              color var(--ft-cas) var(--ft-krivka);
}
.ft-t-brana:hover .ft-t-vic {
  color: var(--ft-warm-ink);
  box-shadow: inset 0 -2px 0 var(--ft-warm-ink);
}

/* ── kalkulačka ──────────────────────────────────────────── */
/* Tmavá plocha stejná jako panel výsledku v kalkulačce samotné —
   návštěvník má poznat, že klikne na totéž. */
.ft-t-kalk {
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(32px, 5vw, 64px);
  background: var(--ft-slate);
  color: var(--ft-paper);
}

.ft-t-kalk .ft-t-stitek { color: var(--ft-ember) }

.ft-t-h2 {
  margin: 12px 0 0;
  max-width: 20ch;
  font-family: var(--ft-display);
  font-variation-settings: 'opsz' 90, 'wght' 400;
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.14;
  color: var(--ft-bone);
}

.ft-t-kalk .ft-t-t {
  margin: 16px 0 0;
  max-width: 60ch;
  color: #D3D8DC;
}

/* Tentýž prvek jako `.ft-cta`, jen s vlastním odsazením shora.
   Kdyby měl vlastní barvy a stíny, rozešel by se s tlačítky
   v kalkulačkách — a přesně tak vznikají weby, které vypadají
   složené ze tří šablon. */
.ft-t-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ft-2);
  margin-top: var(--ft-5);
  min-height: 48px;
  padding: 14px 28px;
  background: var(--ft-warm);
  color: var(--ft-graphite);   /* tmavé na oranžové, 7,36:1 */
  font-family: var(--ft-ui);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--ft-r);
  box-shadow: var(--ft-e1);
  transition: background var(--ft-cas) var(--ft-krivka),
              box-shadow var(--ft-cas) var(--ft-krivka),
              transform var(--ft-cas-r) var(--ft-krivka);
}

.ft-t-cta:hover {
  background: var(--ft-ember);
  box-shadow: var(--ft-e2);
  transform: translateY(-1px);
}
.ft-t-cta:focus-visible {
  outline: none;
  box-shadow: var(--ft-e2), var(--ft-prsten);
}
.ft-t-cta:active { transform: translateY(0); box-shadow: var(--ft-e1) }

.ft-t-drobne {
  margin: 14px 0 0;
  font-family: var(--ft-ui);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ft-stone);
}

.ft-t-kalk .ft-t-drobne { color: #9AA3A8 }

/* ⚠️ ODKAZ UVNITŘ NAŠEHO TEXTU SI MUSÍ BARVU VZÍT SÁM.
   Barva na odstavci odkazu nepomůže — `<a>` ji nedědí a Waltz mu
   dá bílou. Odkaz „Studie" v `.ft-t-drobne` byl proto na titulce
   bílý na bílém; naměřeno 1,00 : 1, tedy neviditelný. Je to táž
   příčina jako u bran, jen jiný prvek — proto je pravidlo napsané
   pro VŠECHNY textové bloky najednou, ne pro jeden. */
.ft-t-uvod a,
.ft-t-veta a,
.ft-t-drobne a,
.ft-t-pod a,
.ft-t-duvera a,
.ft-p-text a,
.ft-p-lead a {
  color: var(--ft-graphite);
  text-decoration: none;
  border-bottom: 1px solid var(--ft-graphite);
}

.ft-t-uvod a:hover,
.ft-t-veta a:hover,
.ft-t-drobne a:hover,
.ft-t-pod a:hover,
.ft-t-duvera a:hover,
.ft-p-text a:hover,
.ft-p-lead a:hover {
  color: var(--ft-warm-ink);
  border-bottom-color: var(--ft-warm-ink);
}

/* Na tmavém pruhu kalkulačky platí opak — grafit by tam zmizel. */
.ft-t-kalk .ft-t-drobne a {
  color: var(--ft-ember);
  border-bottom-color: var(--ft-ember);
}

/* ── tři čísla se zdrojem ────────────────────────────────── */
.ft-t-cisla { margin-top: clamp(40px, 6vw, 72px) }

.ft-t-h3 {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-family: var(--ft-display);
  font-variation-settings: 'opsz' 60, 'wght' 500;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--ft-graphite);
}

.ft-t-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.ft-t-c {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 2px solid var(--ft-graphite);
}

/* Číslo je hrdina. Mono, protože je to údaj, ne nadpis. */
.ft-t-c b {
  font-family: var(--ft-data);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ft-graphite);
}

.ft-t-c span {
  font-family: var(--ft-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ft-body);
}

/* Zdroj je celý smysl toho pruhu. Nesmí zmizet do šedi — Stone je
   nejsvětlejší přípustná barva, 4,97:1. */
.ft-t-c i {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--ft-data);
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ft-stone);
}

/* ── pruh důvěry ─────────────────────────────────────────── */
.ft-t-duvera {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--ft-rule);
}

.ft-t-d { display: flex; flex-direction: column; gap: 6px }

.ft-t-d b {
  font-family: var(--ft-ui);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ft-graphite);
}

.ft-t-d span {
  font-family: var(--ft-ui);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ft-body);
}

/* Na úzkém displeji se úvodní věta jinak láme do nečitelné výšky. */
@media (max-width: 600px) {
  .ft-t-veta { max-width: none }
  .ft-t-h2 { max-width: none }
}


/* ═════════ POPIS PRODUKTU — HLOUBKOVÉ SEKCE ══════════════
   Třídy ft-p-*. Doplňují starší ft-lead, ft-osa, ft-podminky,
   ft-parametry a ft-faq.

   PROČ TO JE DELŠÍ NEŽ U KONKURENCE
   Vilgain drží na produktové stránce přes osm tisíc znaků a je to
   čitelné, protože každá vlastnost má vlastní nadpis a vlastní
   sekci — ne odstavec s odrážkami. To jsme si vzali.

   Co jsme si nevzali: Vilgain staví na fotografii a na chuti.
   My na fotku sáhnout nemůžeme (žádná vlastní neexistuje) a hlavně
   náš zákazník nekupuje zážitek, ale opatření, které musí obhájit.
   Proto je u nás navíc povinná sekce „Kdy to neplatí" — přiznané
   omezení je u B2B nákupčího nejlevnější cesta k důvěře.
   ========================================================= */

/* Nadpisy uvnitř popisu. Šablona má vlastní H2, tohle je
   zúžené na náš blok, ať nepřebíjíme zbytek stránky. */
.ft-lead + .ft-osa + h2,
.ft-p-pece + h2,
.ft-parametry + h2,
.ft-p-varovani + h2 { margin-top: 34px }

/* „Kdy to neplatí" — jediná sekce, kterou nesmíme vynechat.
   Nese barvu varování, ne pólovou: nemluví se tu o teplotě. */
.ft-p-varovani {
  margin: 24px 0;
  padding: 18px 20px;
  background: var(--ft-bone);
  border-left: 3px solid #8F5411;
}

.ft-p-varovani b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ft-ui);
  font-size: 15px;
  font-weight: 600;
  color: #8F5411;
}

.ft-p-varovani p {
  margin: 0;
  font-family: var(--ft-ui);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ft-body);
}

/* Postup použití. Číslovaný, protože pořadí je součástí návodu —
   u PCM vložek platí, že se nejdřív chladí a teprve pak obléká. */
.ft-p-dal,
.ft-p-pece ul,
.ft-p-pece li { font-family: var(--ft-ui) }

ol.ft-p-kroky,
.ft-p-pece ul { margin: 12px 0; padding-left: 20px }

.ft-p-pece {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 32px;
  margin: 26px 0;
  padding-top: 22px;
  border-top: 1px solid var(--ft-rule);
}

.ft-p-pece b {
  font-family: var(--ft-data);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ft-stone);
}

.ft-p-pece li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ft-body);
  margin-bottom: 5px;
}

/* Odkaz na kalkulačku a studie na konci popisu. Je to zároveň
   vnitřní prolinkování pro SEO a druhá šance na konverzi u člověka,
   který ještě není rozhodnutý koupit. */
.ft-p-dal {
  margin: 30px 0 0;
  padding: 16px 20px;
  background: var(--ft-paper);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ft-body);
}

.ft-p-dal a { color: var(--ft-warm-ink); text-decoration: underline }
.ft-p-dal a:hover { text-decoration: none }


/* ═════════ ČÁST D — KOMPONENTY · JISTÉ ═══════════════════
   Znovupoužitelné prvky, ze kterých se skládá všechno ostatní.
   Vlastní třídy `ft-*`, takže se Shoptetu nedotknou.

   PROČ TO JE ZVLÁŠŤ: dokud byl každý blok stylovaný sám pro sebe,
   měl každý jiný odstup, jiný stín a jiné chování při najetí.
   Jednotlivě to vypadalo v pořádku, dohromady jako web složený
   ze tří šablon. Komponenta je jedno rozhodnutí použité na
   deseti místech — a právě tahle opakovanost se čte jako
   profesionalita.

   POŘADÍ STAVŮ je vždycky stejné a nikdy se nepřeskakuje:
   klid → najetí → ovládání klávesnicí → stisk → nedostupné.
   ═══════════════════════════════════════════════════════════ */

/* ── plocha ───────────────────────────────────────────────
   Karta je základní stavební kámen. Nese vlasovou linku I stín:
   linka drží tvar na displejích, kde je stín neviditelný, stín
   dává hloubku tam, kde linka mizí. Jedno bez druhého vypadá
   buď ploše, nebo rozmazaně. */
.ft-karta {
  background: var(--ft-bone);
  border: 1px solid var(--ft-rule);
  border-radius: var(--ft-r-k);
  box-shadow: var(--ft-e1);
  padding: clamp(20px, 3vw, 32px);
  transition: box-shadow var(--ft-cas) var(--ft-krivka),
              border-color var(--ft-cas) var(--ft-krivka),
              transform var(--ft-cas) var(--ft-krivka);
}

/* Zvedá se JEN karta, na kterou se dá kliknout. Nezvedat statickou
   plochu je půlka rozdílu mezi promyšleným a náhodným rozhraním. */
a.ft-karta:hover,
.ft-karta--klik:hover {
  border-color: #CFC6B8;
  box-shadow: var(--ft-e2);
  transform: translateY(-2px);
}

a.ft-karta:focus-visible,
.ft-karta--klik:focus-visible {
  outline: none;
  box-shadow: var(--ft-e2), var(--ft-prsten);
}

a.ft-karta:active,
.ft-karta--klik:active { transform: translateY(0); box-shadow: var(--ft-e1) }

/* Tmavá plocha. Jemný přechod místo ploché barvy — plochý grafit
   vypadá na velkých plochách jako díra. Dva procenta světlosti
   stačí, víc už je efekt. */
.ft-plocha-tmava {
  background: linear-gradient(158deg, #23282D 0%, var(--ft-slate) 62%);
  color: var(--ft-paper);
  border-radius: var(--ft-r-k);
}

/* ── štítek ───────────────────────────────────────────────
   Nese jednu informaci a nikdy není odkaz. Tónovaná plocha
   s vlasovou linkou v téže barvě — sytá výplň by z něj udělala
   tlačítko a lidé by na něj klikali. */
.ft-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--ft-r);
  font-family: var(--ft-data);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  background: #EFE9E0;
  color: var(--ft-body);
  border: 1px solid var(--ft-rule);
}

.ft-badge--chlad { background:#EDF3F7; color:var(--ft-cold-ink); border-color:#CFE0EA }
.ft-badge--teplo { background:#FBF0E8; color:var(--ft-warm-ink); border-color:#F0D8C6 }
.ft-badge--ok    { background:#EEF5F0; color:#1F6B49; border-color:#CFE3D7 }
.ft-badge--pozor { background:#FBF3E8; color:#8F5411; border-color:#EEDCC2 }

/* Tečka před textem. Dělá ze štítku stavový ukazatel a je to
   nejlevnější způsob, jak nést informaci i bez barvy — kdo barvy
   nerozlišuje, vidí aspoň tvar. */
.ft-badge--tecka::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* ── tlačítka ─────────────────────────────────────────────
   Tři úrovně a ani o jednu víc. Čtvrtá by znamenala, že na
   stránce jsou čtyři různě důležité akce — a to už není
   hierarchie, to je nabídka. */
.ft-cta, .ft-cta2, .ft-cta3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 26px;
  font-family: var(--ft-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--ft-r);
  cursor: pointer;
  transition: background var(--ft-cas) var(--ft-krivka),
              box-shadow var(--ft-cas) var(--ft-krivka),
              border-color var(--ft-cas) var(--ft-krivka),
              transform var(--ft-cas-r) var(--ft-krivka);
}

.ft-cta {
  background: var(--ft-warm);
  color: var(--ft-graphite);
  border: 1px solid transparent;
  box-shadow: var(--ft-e1);
  font-weight: 600;
}
.ft-cta:hover   { background: var(--ft-ember); box-shadow: var(--ft-e2); transform: translateY(-1px) }
.ft-cta:focus-visible { outline: none; box-shadow: var(--ft-e2), var(--ft-prsten) }
.ft-cta:active  { transform: translateY(0); box-shadow: var(--ft-e1) }

.ft-cta2 {
  background: transparent;
  color: var(--ft-graphite);
  border: 1px solid var(--ft-graphite);
}
.ft-cta2:hover  { background: var(--ft-graphite); color: var(--ft-bone) }
.ft-cta2:focus-visible { outline: none; box-shadow: var(--ft-prsten) }

/* Na tmavé ploše se druhé tlačítko obrací. */
.ft-plocha-tmava .ft-cta2,
.ft-t-kalk .ft-cta2 { color: var(--ft-bone); border-color: rgba(255,252,248,.4) }
.ft-plocha-tmava .ft-cta2:hover,
.ft-t-kalk .ft-cta2:hover { background: var(--ft-bone); color: var(--ft-graphite) }

/* Třetí úroveň není tlačítko, je to odkaz s podtržením, které
   se při najetí posune. Drobnost, kterou nikdo nepojmenuje. */
.ft-cta3 {
  min-height: 0;
  padding: 2px 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ft-graphite);
  box-shadow: inset 0 -1px 0 var(--ft-graphite);
}
.ft-cta3:hover { color: var(--ft-warm-ink); box-shadow: inset 0 -2px 0 var(--ft-warm-ink) }
.ft-cta3:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--ft-prsten) }

/* Nedostupné se pozná i bez barvy — sníženým krytím i kurzorem. */
.ft-cta[aria-disabled="true"],
.ft-cta2[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ── ikona uvnitř prvku ───────────────────────────────────
   Tahová, ne vyplněná, a vždycky `currentColor` — tím se barví
   sama se stavem prvku a nemůže se s ním rozejít. */
.ft-ikona {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Šipka se při najetí posune. Jen o dva pixely — víc už je efekt. */
.ft-cta .ft-ikona, .ft-cta3 .ft-ikona {
  transition: transform var(--ft-cas) var(--ft-krivka);
}
.ft-cta:hover .ft-ikona, .ft-cta3:hover .ft-ikona { transform: translateX(2px) }

/* ── oddělovač sekcí ──────────────────────────────────────
   Vlasová linka, která doprostřed ztrácí sytost. Dělá rytmus
   a nekřičí. */
.ft-del {
  height: 1px;
  border: 0;
  margin: var(--ft-sekce) 0;
  background: linear-gradient(90deg, transparent, var(--ft-rule) 18%,
              var(--ft-rule) 82%, transparent);
}

/* ── ohled na uživatele, kteří pohyb nechtějí ─────────────
   Pro část lidí není animace efekt, ale nevolnost. */
@media (prefers-reduced-motion: reduce) {
  .ft-karta, .ft-cta, .ft-cta2, .ft-cta3, .ft-ikona,
  .ft-t-brana, .ft-t-cisl, .ft-t-cta {
    transition: none !important;
  }
  a.ft-karta:hover, .ft-karta--klik:hover,
  .ft-cta:hover, .ft-t-brana:hover { transform: none !important }
}