/* AUTOGENEROVANO CORALEM, neupravovat.
 * Zdroj pravdy je stejnojmenny .less soubor, tento .css se pri kazde
 * synchronizaci prepisuje. Upravy delej v .less souboru. */
/* Hlína: návrhový systém a plášť celého webu (jádro).
   Kontrakt: barvy, dvě písma (Fraunces pro nadpisy a podnadpisy, Bricolage
   Grotesque pro text a ovládání; druhý font povolen v plánu: Ondra 22. 9.
   2026 „font podnadpisů je extrémně nudnej"), kreslené pozadí ve vrstvách,
   tlačítka s charakterem, karty, pole, sdílené prvky (počítadlo, přepínač,
   rozbalovátko, stavový štítek), plovoucí hlavička, patička jako sekce,
   načítání, kurzor, posuvník, zvuk.
   Paleta ze zadání: teplá krémová, přírodní béžová, světle hnědá, terakota,
   tmavě hnědá pro text. Bílý text jen na tlačítkách. */
/* podklad stránky */
/* světlejší krém pro panely */
/* karty */
/* linky, pole */
/* hover polí, oddělovače */
/* pozadí polí: písková jamka, ne bílá plocha */
/* světle hnědá, kresba nádob */
/* akcent, tlačítka */
/* světlá terakota v přechodu tlačítka */
/* tmavá terakota */
/* text, téměř černá */
/* tmavé panely */
/* vedlejší text */
/* volno */
/* část obsazena */
/* plno */
:root {
  --h-krem: #f5ede3;
  --h-krem-sv: #faf4ec;
  --h-papir: #fbf6ef;
  --h-bez: #e7d9c6;
  --h-bez-tma: #d8c5ab;
  --h-pole: #eee3d5;
  --h-hneda-sv: #c8a889;
  --h-terakota: #c4633b;
  --h-terakota-sv: #dd7f57;
  --h-terakota-tm: #a44e2b;
  --h-hneda: #2a1d17;
  --h-hneda-sv2: #3d2b22;
  --h-tlum: #7d6252;
  --h-zelena: #6f8f5e;
  --h-oranz: #d99a4e;
  --h-cervena: #b9503c;
  --h-radius: 28px;
  --h-radius-maly: 16px;
  --h-radius-tl: 18px;
  --h-stin: 0 24px 48px -28px rgba(42, 29, 23, 0.4), 0 2px 6px -2px rgba(42, 29, 23, 0.08);
  --h-stin-maly: 0 12px 28px -18px rgba(42, 29, 23, 0.35);
  /* Hlína 69: jeden okraj stránky pro celý web. Obsah každé sekce, hlavičky
     i patičky začíná na téže svislé čáře (--h-gutter od kraje okna, na širokém
     okně kraj sloupce --h-vnitrek). Rámeček přes celou šířku (panel, tmavá
     sekce, lišta hlavičky, patička) stojí --h-panel-okraj od kraje a vnitřek
     mu dopočítá --h-panel-vnitrek, takže obsah v něm neuskočí. Okraj teče
     s šířkou okna, na telefonu je 20 px. */
  --h-gutter: clamp(20px, 5vw, 72px);
  --h-panel-okraj: clamp(8px, 2vw, 28px);
  --h-panel-vnitrek: calc(var(--h-gutter) - var(--h-panel-okraj));
  --h-vnitrek: 1180px;
  --h-font: 'Fraunces', serif;
  --h-font-text: 'Bricolage Grotesque', sans-serif;
  --h-hlava: 76px;
  --color-bg: #f5ede3;
  --coral-nacitani-pozadi: #f5ede3;
  /* Hlína 60: kdyby se plachta Coralu přece jen ukázala, je krémová */
  --coral-nacitani-akcent: #c4633b;
  /* Hlína 49: bublinky s nápovědou. Logiku drží Coral (coral-tip.js), tady
     je jen vzhled: tmavá hlína, krémový text, jemná šipka. */
  --coral-tip-pozadi: #2a1d17;
  --coral-tip-barva: #f5ede3;
  --coral-tip-hrana: rgba(245, 237, 227, 0.14);
  --coral-tip-radius: 12px;
  --coral-tip-stin: 0 14px 28px -16px rgba(42, 29, 23, 0.75);
  --coral-tip-pismo: 'Bricolage Grotesque', sans-serif;
  --coral-tip-velikost: 13px;
  --coral-tip-vaha: 500;
  --coral-tip-vnitrek: 7px 12px 8px;
  --coral-tip-max-sirka: 240px;
  --coral-tip-sipka: 5px;
  --coral-tip-odstup: 10px;
}
/* ─────────────────────────────  základ  ───────────────────────────── */
html {
  scrollbar-color: #c4633b #e7d9c6;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  overflow-x: clip;
}
body.hlina {
  position: relative;
  margin: 0;
  background: #f5ede3;
  color: #2a1d17;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.hlina * {
  box-sizing: border-box;
}
/* Hlína 38: atribut hidden platí vždycky. Pravidlo sekce s display (grid, flex)
   ho jinak přebije a schovaný pohled zůstane vidět (týden se ukázal pod dnem). */
body.hlina [hidden] {
  display: none !important;
}
/* Skok na kotvu nebo kartu nikdy neskončí pod plovoucí hlavičkou */
body.hlina [id],
body.hlina .h-karta,
body.hlina section,
body.hlina article {
  scroll-margin-top: calc(var(--h-hlava) + 12px);
}
/* Hlína 43, 47: obecná pravidla na prvky mají nulovou specifičnost (:where).
   Dřív body.hlina button { color } přebilo třídu tlačítka a hlavní tlačítka
   jako <button> měla tmavý text na terakotě (špatný kontrast). Třída sekce
   nebo komponenty teď vždycky vyhraje nad obecným pravidlem. */
:where(body.hlina) :where(img, svg) {
  display: block;
  max-width: 100%;
}
/* Hlína 48: označení textu v barvě hlíny; výška označení drží řádek díky
   metrikám písma, které doplňuje plugin Coralu (nepřetéká do řádku nad). */
:where(body.hlina) ::selection {
  background: rgba(196, 99, 59, 0.24);
  color: #2a1d17;
  text-shadow: none;
}
:where(body.hlina) .h-sekce--tmava ::selection,
:where(body.hlina) .h-pata ::selection {
  background: rgba(221, 127, 87, 0.45);
  color: #f5ede3;
}
body.hlina ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body.hlina ::-webkit-scrollbar-track {
  background: #e7d9c6;
}
body.hlina ::-webkit-scrollbar-thumb {
  background: #c4633b;
  border-radius: 999px;
  border: 2px solid #e7d9c6;
}
:where(body.hlina) :focus {
  outline: none;
}
:where(body.hlina) :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(196, 99, 59, 0.4);
}
:where(body.hlina) :where(a:not(.h-tl)) {
  color: #c4633b;
  text-decoration: none;
}
:where(body.hlina) :where(a.h-tl) {
  text-decoration: none;
}
/* Ikony z pluginu Coralu: <i data-coral-ikona> dostane vnitřní rozměr
   (výchozí 24 px, nebo data-velikost) a uvnitř <svg>. Obal je vždy
   vystředěný flex, pozadí a vycpávka patří obalu, svg ho jen vyplní. */
body.hlina i[data-coral-ikona] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: content-box;
  flex: none;
  line-height: 0;
}
body.hlina i[data-coral-ikona] > svg {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  animation: none;
}
/* Objevení při rolování: obsah je vidět vždycky, třída jen spustí animaci. */
[data-h-objev].je-videt {
  animation: h-objev 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes h-objev {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-h-objev].je-videt {
    animation: none;
  }
}
:where(body.hlina) :where(input, textarea, select, button) {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  color: #2a1d17;
  caret-color: #c4633b;
}
/* ─────────────────────────────  pozadí  ───────────────────────────── */
.h-pozadi {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(196, 99, 59, 0.14) 0%, rgba(196, 99, 59, 0) 60%), linear-gradient(180deg, #faf4ec 0%, #f5ede3 40%, #f1e6d8 100%);
}
/* Hlína 71: tři záře jsou měkké kruhové přechody v JEDNÉ vrstvě. Filtr
   blur(70px) na třech plochách velikosti okna stál desítky milisekund na
   snímek a tři samostatné pohyblivé vrstvy pořád brzdily rolování (měřeno:
   21 snímků za vteřinu proti 32 s jednou vrstvou). Každá záře má průběh
   rozmazaného kruhu (plný střed, okraj měkne o 140 px na obě strany) a celá
   vrstva se pomalu posouvá; je o 30 % větší než okno, ať při posunu nikde
   nevyjede její kraj. */
.h-pozadi__zar {
  position: absolute;
  inset: -30%;
  opacity: 0.7;
  will-change: transform;
  animation: h-plout 30s ease-in-out infinite alternate;
  background: radial-gradient(circle calc(35vw + 140px) at 120vw calc(15vw + 30vh), rgba(196, 99, 59, 0.24) 0, rgba(196, 99, 59, 0.24) calc(35vw - 140px), rgba(196, 99, 59, 0.2) calc(35vw - 70px), rgba(196, 99, 59, 0.12) 35vw, rgba(196, 99, 59, 0.04) calc(35vw + 70px), rgba(196, 99, 59, 0) calc(35vw + 140px)), radial-gradient(circle calc(30vw + 140px) at 35vw calc(70vh + 30vw), rgba(200, 168, 137, 0.55) 0, rgba(200, 168, 137, 0.55) calc(30vw - 140px), rgba(200, 168, 137, 0.46) calc(30vw - 70px), rgba(200, 168, 137, 0.27) 30vw, rgba(200, 168, 137, 0.09) calc(30vw + 70px), rgba(200, 168, 137, 0) calc(30vw + 140px)), radial-gradient(circle calc(25vw + 140px) at 115vw calc(130vh - 5vw), rgba(217, 154, 78, 0.22) 0, rgba(217, 154, 78, 0.22) calc(25vw - 140px), rgba(217, 154, 78, 0.18) calc(25vw - 70px), rgba(217, 154, 78, 0.11) 25vw, rgba(217, 154, 78, 0.04) calc(25vw + 70px), rgba(217, 154, 78, 0) calc(25vw + 140px));
}
.h-pozadi__zrno {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.24 0 0 0 0 0.16 0 0 0 0.5 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
@keyframes h-plout {
  to {
    transform: translate(-8vw, 6vh) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .h-pozadi__zar {
    animation: none;
  }
}
/* Obsah stránky nad vrstvou pozadí. Hlína 41: pravidlo má nulovou specifičnost
   (:where), jinak přebilo position: fixed u oken vložených do body a platební
   okno vyrostlo pod patičkou místo přes stránku (testovací brána „zmizela“). */
:where(body.hlina) > :where(:not(.h-pozadi, .h-nacitani, .h-kurzor, .h-hlava)) {
  position: relative;
  z-index: 1;
}
/* ─────────────────────────────  typografie  ───────────────────────── */
/* Hlína 45 (Ondra 23. 9. 2026, varianta A): dvě písma a nic navíc.
   Fraunces je hlavní a nese charakter: nadpisy berou jeho displejovou
   optickou velikost (opsz 144) s měkkými a „vrtkavými“ tvary (SOFT, WONK),
   takže mají tvář i na telefonu, kde by automatická optická velikost
   vzala textovou a nadpis zplaněl. Bricolage Grotesque je jediné vedlejší
   písmo: text, ovládání a podnadpisy. Kurzíva jako třetí styl zmizela. */
:where(body.hlina) :where(h1, h2, h3, h4) {
  margin: 0 0 0.45em;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #2a1d17;
  text-wrap: balance;
}
/* Hlína 70: dolní mez velikosti je pro nejužší telefon (320 px), na 390 px
   vychází nadpis stejně jako dřív; nahoru teče s místem až ke stropu */
:where(body.hlina) :where(h1) {
  font-size: clamp(36px, 11.3vw, 88px);
  font-weight: 420;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  letter-spacing: -0.028em;
}
:where(body.hlina) :where(h2) {
  font-size: clamp(28px, 8.800000000000001vw, 56px);
  font-weight: 460;
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 1;
  letter-spacing: -0.024em;
}
:where(body.hlina) :where(h3) {
  font-size: clamp(22px, 2.4vw, 27px);
  font-weight: 600;
  font-variation-settings: "opsz" 72, "SOFT" 60;
}
:where(body.hlina) :where(h4) {
  font-size: 19px;
  font-weight: 600;
  font-variation-settings: "opsz" 36, "SOFT" 40;
}
:where(body.hlina) :where(p) {
  margin: 0 0 1em;
  color: #2a1d17;
  max-width: 62ch;
}
.h-tlum {
  color: #7d6252;
}
/* Podnadpis pod nadpisem: vedlejší písmo v displejové optické velikosti,
   ať má tvář, a o stupeň menší než nadpis. */
.h-uvod,
.h-podnadpis {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-style: normal;
  font-weight: 420;
  font-variation-settings: "opsz" 48, "wdth" 96;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: #7d6252;
  max-width: 54ch;
  text-wrap: pretty;
}
.h-stitek {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c4633b;
}
.h-stitek::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #c4633b;
}
.h-stitek--svetly {
  color: #c8a889;
}
.h-stitek--svetly::before {
  background: #c8a889;
}
.h-sekce {
  width: 100%;
  padding: 56px var(--h-gutter);
}
/* Hlína 101: obnovení stažením dělá jen kolečko Coralu, výchozí prohlížeče ne.
   Hlína 102: jen na html (to jde na okno); na body by zastavilo kolečko myši,
   kdykoliv z body udělá posuvnou plochu cizí styl (třeba doplněk prohlížeče). */
html {
  overscroll-behavior-y: none;
}
/* Hlína 100 (Ondra 24. 9. 2026): první sekce podstránky má pod hlavičkou
   poloviční horní odsazení, úvodní hero (.h-akt) zůstává. */
.h-hlava-mezera + .h-sekce:not(.h-akt) {
  padding-top: 28px;
}
@media (min-width: 768px) {
  .h-hlava-mezera + .h-sekce:not(.h-akt) {
    padding-top: 44px;
  }
}
/* Hlína 46 (Ondra 23. 9. 2026): na telefonu je od kraje displeje k obsahu
   dohromady 20 px, ať je rámečků kolik chce. Panel si z nich bere okraj
   a zbytek je vnitřek, karty uvnitř už stojí na čáře obsahu. Hlína 69:
   totéž na PC, proto proměnné z :root místo pevných čísel. */
.h-sekce--panel {
  margin: 0 var(--h-panel-okraj);
  /* bez 1 px rámečku, ať obsah stojí přesně na čáře */
  padding-left: calc(var(--h-panel-vnitrek) - 1px);
  padding-right: calc(var(--h-panel-vnitrek) - 1px);
  width: auto;
  border-radius: 28px;
  background: rgba(251, 246, 239, 0.78);
  border: 1px solid rgba(231, 217, 198, 0.9);
  box-shadow: 0 24px 48px -28px rgba(42, 29, 23, 0.4), 0 2px 6px -2px rgba(42, 29, 23, 0.08);
}
.h-sekce--tmava {
  margin: 8px var(--h-panel-okraj);
  padding-left: var(--h-panel-vnitrek);
  padding-right: var(--h-panel-vnitrek);
  width: auto;
  border-radius: 28px;
  background: radial-gradient(ellipse 70% 60% at 80% 0%, rgba(196, 99, 59, 0.3) 0%, rgba(196, 99, 59, 0) 60%), #2a1d17;
  color: #f5ede3;
}
body.hlina .h-sekce--tmava h2,
body.hlina .h-sekce--tmava h3,
body.hlina .h-sekce--tmava p {
  color: #f5ede3;
}
body.hlina .h-sekce--tmava .h-tlum,
body.hlina .h-sekce--tmava p.h-tlum,
body.hlina .h-sekce--tmava .h-uvod {
  color: #c8a889;
}
.h-vnitrek {
  width: 100%;
  max-width: var(--h-vnitrek);
  margin: 0 auto;
}
/* Hlína 104: čtecí stránka (Časté dotazy, Podmínky). Na telefonu jeden
   sloupec. Na PC vlevo nadpis (a rozcestník), který zůstává na místě, vpravo
   čitelně široký obsah; šířka jádra je využitá celá a vpravo nezůstane
   prázdná plocha. Nadpis se řídí šířkou svého sloupce, ne okna. */
.h-cteci {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.h-cteci__bok h1 {
  font-size: clamp(34px, 6vw, 56px);
}
@media (min-width: 768px) {
  .h-cteci {
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr);
    column-gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  .h-cteci__bok {
    position: sticky;
    top: calc(var(--h-hlava) + 44px);
    container-type: inline-size;
  }
  .h-cteci__bok h1 {
    font-size: clamp(34px, 17cqi, 56px);
  }
}
/* ─────────────────────────────  tlačítka  ─────────────────────────── */
/* Hlína 43, 47: jedno hlavní tlačítko pro celý web, to z patičky (terakota
   se šipkou). Sekce ho nekreslí po svém, berou .h-tl--hlavni (starší třída
   .h-tl--plny je totéž) nebo PHP funkci hlina_tlacitko(). Šipku kreslí
   jádro, do značkování se nepíše.
   Najetí nic nezvedá ani nezvětšuje (Ondra 23. 9. 2026: „povyskočí nahoru
   nebo se to zvětší. To je prostě nuda"). Ukazuje ho plocha: světlo přejede
   přes terakotu, obrys dostane terakotu a jemnou výplň, šipka popojede.
   Text nikdy nemění barvu, takže kontrast zůstává stejný jako v klidu. */
.h-tl {
  /* každý druh si nastaví jen barvu lesku a plochy, animace je pro všechny stejná */
  --h-tl-lesk: rgba(196, 99, 59, 0.16);
  --h-tl-plocha: linear-gradient(transparent, transparent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 18px;
  border: 1.5px solid #2a1d17;
  background-color: transparent;
  background-image: linear-gradient(105deg, transparent 38%, var(--h-tl-lesk) 50%, transparent 62%), var(--h-tl-plocha);
  background-size: 260% 100%, 100% 100%;
  background-position: 110% 0, 0 0;
  background-repeat: no-repeat;
  color: #2a1d17;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.005em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  isolation: isolate;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}
/* Hlína 71 (Ondra 23. 9. 2026: „na těch tlačítkách je fakt ta animace trochu
   rozbitá"): světlo přejede přes tlačítko jednou a celé. Třídu je-lesk přidá
   skript při najetí a sundá ji, až světlo dojede, takže se při odjetí myši
   nevrací pozpátku ani neutne v půlce. Bez skriptu tlačítko jen změní plochu. */
.h-tl.je-lesk {
  background-position: -10% 0, 0 0;
  transition: background-color 0.25s ease, background-position 0.75s cubic-bezier(0.25, 0.7, 0.25, 1), border-color 0.25s ease, box-shadow 0.3s ease;
}
.h-tl__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-tl i[data-coral-ikona] {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h-tl:hover i[data-coral-ikona] {
  transform: translateX(3px);
}
/* obrys (výchozí .h-tl, výslovně .h-tl--druhe) */
.h-tl:hover {
  background-color: rgba(196, 99, 59, 0.06);
  border-color: #c4633b;
}
.h-tl:active {
  background-color: rgba(196, 99, 59, 0.12);
}
/* hlavní tlačítko */
.h-tl.h-tl--hlavni,
.h-tl.h-tl--plny {
  --h-tl-lesk: rgba(255, 255, 255, 0.3);
  --h-tl-plocha: linear-gradient(135deg, #dd7f57 0%, #c4633b 55%, #a44e2b 100%);
  border-color: transparent;
  color: #fbf6ef;
  background-color: #c4633b;
  box-shadow: inset 0 -2px 0 rgba(164, 78, 43, 0.45), 0 10px 24px -12px rgba(196, 99, 59, 0.8);
}
.h-tl--hlavni::after,
.h-tl--plny::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: -4px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12h14.5M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12h14.5M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}
.h-tl.h-tl--hlavni:hover,
.h-tl.h-tl--plny:hover {
  color: #fbf6ef;
  background-color: #c4633b;
  border-color: transparent;
  box-shadow: inset 0 -2px 0 rgba(164, 78, 43, 0.55), 0 12px 30px -12px #c4633b;
}
.h-tl--hlavni:hover::after,
.h-tl--plny:hover::after {
  transform: translateX(4px);
}
.h-tl.h-tl--hlavni:active,
.h-tl.h-tl--plny:active {
  background-color: #a44e2b;
  box-shadow: inset 0 2px 6px rgba(164, 78, 43, 0.6), 0 6px 16px -10px rgba(196, 99, 59, 0.8);
}
.h-tl--bez-sipky::after {
  content: none;
}
/* tiché: na formulářích a vedlejších akcích */
.h-tl.h-tl--tiche,
.h-tl.h-tl--tichy {
  --h-tl-lesk: rgba(196, 99, 59, 0.12);
  border-color: rgba(216, 197, 171, 0.8);
  background-color: #fbf6ef;
  color: #2a1d17;
}
.h-tl.h-tl--tiche:hover,
.h-tl.h-tl--tichy:hover {
  background-color: #f5ede3;
  border-color: #c4633b;
  color: #2a1d17;
}
/* tmavé: na světlých kartách, kde terakota už je */
.h-tl.h-tl--tmave,
.h-tl.h-tl--tmavy {
  --h-tl-lesk: rgba(255, 255, 255, 0.16);
  border-color: #2a1d17;
  background-color: #2a1d17;
  color: #f5ede3;
}
.h-tl.h-tl--tmave:hover,
.h-tl.h-tl--tmavy:hover {
  background-color: #3d2b22;
  border-color: #3d2b22;
  color: #f5ede3;
}
/* světlé: na terakotové nebo tmavé ploše */
.h-tl.h-tl--svetle {
  --h-tl-lesk: rgba(196, 99, 59, 0.16);
  border-color: transparent;
  background-color: #fbf6ef;
  color: #a44e2b;
  box-shadow: 0 10px 24px -14px rgba(42, 29, 23, 0.6);
}
.h-tl.h-tl--svetle:hover {
  background-color: #f5ede3;
  border-color: transparent;
  color: #a44e2b;
}
.h-tl--maly {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 13px;
  gap: 8px;
}
.h-tl--maly::after {
  width: 15px;
  height: 15px;
}
.h-tl--velky {
  min-height: 58px;
  padding: 0 30px;
  font-size: 17px;
  border-radius: 20px;
}
.h-tl--siroky {
  width: 100%;
}
/* vypnuté tlačítko na najetí nereaguje vůbec (stav má přednost před druhem) */
.h-tl[disabled],
.h-tl.je-vypnuty {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none !important;
}
.h-tl[disabled].je-lesk,
.h-tl.je-vypnuty.je-lesk {
  background-position: 110% 0, 0 0;
  transition: none;
}
.h-tl.h-tl--druhe[disabled]:hover,
.h-tl:not([class*="h-tl--"])[disabled]:hover {
  background-color: transparent;
  border-color: #2a1d17;
}
.h-tl[disabled]::after,
.h-tl.je-vypnuty::after {
  transform: none !important;
}
.h-tl.je-pracuje {
  color: transparent;
  pointer-events: none;
}
.h-tl.je-pracuje i[data-coral-ikona],
.h-tl.je-pracuje::after {
  opacity: 0;
}
.h-tl.je-pracuje::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(251, 246, 239, 0.45);
  border-top-color: #fbf6ef;
  animation: h-toc 0.8s linear infinite;
}
.h-tl:not(.h-tl--plny):not(.h-tl--hlavni):not(.h-tl--tmavy):not(.h-tl--tmave).je-pracuje::before {
  border-color: rgba(42, 29, 23, 0.25);
  border-top-color: #2a1d17;
}
@keyframes h-toc {
  to {
    transform: rotate(360deg);
  }
}
/* ─────────────────────────────  karty a pole  ─────────────────────── */
/* Hlína 46: na telefonu je obsah karty nejvýš 36 px od kraje displeje
   (karta stojí na 20 px, vnitřek 16 px), i když je karta v panelu. */
.h-karta {
  background: #fbf6ef;
  border: 1px solid #e7d9c6;
  border-radius: 28px;
  padding: 20px 16px;
  box-shadow: 0 24px 48px -28px rgba(42, 29, 23, 0.4), 0 2px 6px -2px rgba(42, 29, 23, 0.08);
}
.h-karta--ticha {
  box-shadow: none;
  background: rgba(251, 246, 239, 0.7);
}
/* Hlína 59: řada tlačítek. Pod sebou mají tlačítka mezeru 14 px, aby stín
   hlavního tlačítka nezasahoval do toho pod ním. */
.h-akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 10px;
}
.h-pole {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.h-pole label,
.h-pole__popis {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #7d6252;
}
.h-pole input,
.h-pole select,
.h-pole textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1.5px solid #d8c5ab;
  border-radius: 16px;
  background: #eee3d5;
  color: #2a1d17;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.h-pole textarea {
  min-height: 100px;
  resize: vertical;
}
.h-pole input::placeholder,
.h-pole textarea::placeholder {
  color: rgba(125, 98, 82, 0.65);
}
.h-pole input:hover,
.h-pole select:hover,
.h-pole textarea:hover {
  border-color: #c8a889;
}
.h-pole input:focus,
.h-pole select:focus,
.h-pole textarea:focus {
  border-color: #c4633b;
  box-shadow: 0 0 0 4px rgba(196, 99, 59, 0.16);
}
.h-pole input:-webkit-autofill {
  -webkit-text-fill-color: #2a1d17;
  box-shadow: 0 0 0 1000px #eee3d5 inset;
}
.h-pole select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23c4633b' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.h-pole--dva {
  display: grid;
  gap: 0 12px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0;
}
.h-zaskrt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 15px;
  color: #2a1d17;
  cursor: pointer;
}
.h-zaskrt input {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  border: 1.5px solid #d8c5ab;
  border-radius: 7px;
  background: #f5ede3;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.h-zaskrt input:checked {
  background: #c4633b;
  border-color: #c4633b;
}
.h-zaskrt input:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fbf6ef;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.h-zaskrt a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Hlína 42: karta workshopu (úvod i stránka workshopů), kreslí ji
   hlina_workshop_karta(). Hlavní workshop je tmavý všude. */
.h-wk {
  display: flex;
  flex-direction: column;
  padding: 18px 16px 16px;
  border-radius: 28px;
  background: #fbf6ef;
  border: 1px solid #e7d9c6;
  box-shadow: 0 24px 48px -28px rgba(42, 29, 23, 0.4), 0 2px 6px -2px rgba(42, 29, 23, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.h-wk:hover {
  border-color: #d8c5ab;
}
.h-wk__hlava {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
}
.h-wk__datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 60px;
  border-radius: 18px;
  background: #f5ede3;
  border: 1px solid #e7d9c6;
  color: #2a1d17;
  line-height: 1;
}
.h-wk__datum b {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  font-variation-settings: "opsz" 72;
}
.h-wk__datum span {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d6252;
}
.h-wk__titul {
  min-width: 0;
}
:where(body.hlina) .h-wk__nazev {
  margin: 0 0 4px;
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.12;
}
.h-wk__konec {
  white-space: nowrap;
}
.h-wk__emoji {
  font-size: 0.86em;
}
:where(body.hlina) .h-wk__popis {
  margin: 0;
  font-size: 15px;
  color: #7d6252;
}
.h-wk__udaje {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0 0 16px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(216, 197, 171, 0.55);
}
.h-wk__udaje div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.h-wk__udaje dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7d6252;
}
.h-wk__udaje dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #2a1d17;
}
.h-wk__udaje dd.je-plno {
  color: #b9503c;
}
.h-wk__soucasti {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
}
.h-wk__soucasti:empty {
  display: none;
}
.h-wk__soucasti li {
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(200, 168, 137, 0.55);
  color: #7d6252;
}
.h-wk__akce {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.h-wk__akce .h-tl {
  flex: 1 1 auto;
}
.h-wk--hlavni {
  background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(196, 99, 59, 0.3) 0%, rgba(196, 99, 59, 0) 62%), #2a1d17;
  border-color: #2a1d17;
}
.h-wk--hlavni:hover {
  border-color: rgba(196, 99, 59, 0.55);
}
.h-wk--hlavni .h-wk__datum {
  background: #c4633b;
  border-color: #c4633b;
  color: #fbf6ef;
}
.h-wk--hlavni .h-wk__datum span {
  color: rgba(251, 246, 239, 0.8);
}
body.hlina .h-wk--hlavni .h-wk__nazev,
.h-wk--hlavni .h-wk__udaje dd {
  color: #f5ede3;
}
body.hlina .h-wk--hlavni .h-wk__popis,
.h-wk--hlavni .h-wk__udaje dt {
  color: #c8a889;
}
.h-wk--hlavni .h-wk__udaje {
  border-top-color: rgba(200, 168, 137, 0.25);
}
.h-wk--hlavni .h-wk__soucasti li {
  border-color: rgba(200, 168, 137, 0.35);
  color: #c8a889;
}
/* Sdílené prvky, které sekce nikdy nekreslí znovu */
.h-prepinac {
  display: inline-flex;
  padding: 4px;
  border-radius: 14px;
  background: #e7d9c6;
  margin-bottom: 14px;
}
.h-prepinac--siroky {
  display: flex;
  width: 100%;
}
.h-prepinac--siroky > button {
  flex: 1;
}
.h-prepinac > button {
  border: 0;
  background: transparent;
  padding: 8px 16px;
  min-height: 40px;
  border-radius: 11px;
  color: #7d6252;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* Hlína 50: najetí ukazuje plocha, text drží barvu */
.h-prepinac > button:hover {
  background: rgba(251, 246, 239, 0.55);
}
.h-prepinac > button.je-aktivni {
  background: #fbf6ef;
  color: #2a1d17;
  box-shadow: 0 2px 8px -3px rgba(42, 29, 23, 0.35);
}
.h-pocet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 16px;
  border: 1.5px solid #e7d9c6;
  background: #fbf6ef;
}
.h-pocet > button {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 0;
  background: #f5ede3;
  color: #2a1d17;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* Hlína 50: najetí ukazuje plocha a hrana, číslice drží barvu */
.h-pocet > button:hover {
  background: #e7d9c6;
  box-shadow: inset 0 0 0 1.5px rgba(196, 99, 59, 0.55);
}
.h-pocet > button:active {
  transform: scale(0.9399999999999999);
}
.h-pocet > button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  background: #f5ede3;
  color: #2a1d17;
  transform: none;
}
.h-pocet__hodnota {
  min-width: 40px;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 600;
}
.h-volitelne {
  margin: 4px 0 14px;
  border: 1px solid #e7d9c6;
  border-radius: 16px;
  padding: 0 14px;
  background: rgba(245, 237, 227, 0.6);
}
.h-volitelne > summary {
  cursor: pointer;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #7d6252;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.h-volitelne > summary::before {
  content: "+";
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5ede3;
  color: #c4633b;
  font-weight: 700;
  flex: none;
}
.h-volitelne[open] > summary::before {
  content: "–";
}
.h-volitelne > summary::-webkit-details-marker {
  display: none;
}
.h-volitelne[open] > summary {
  border-bottom: 1px solid #e7d9c6;
  margin-bottom: 12px;
}
.h-stav {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  background: #e7d9c6;
  color: #7d6252;
}
.h-stav--paid,
.h-stav--ok {
  background: rgba(111, 143, 94, 0.2);
  color: #3f5a33;
}
.h-stav--pending {
  background: rgba(217, 154, 78, 0.25);
  color: #7a4f14;
}
.h-stav--cancelled,
.h-stav--refunded,
.h-stav--expired {
  background: rgba(185, 80, 60, 0.15);
  color: #7a2c1c;
}
.h-chyba {
  display: none;
  margin: 0 0 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(185, 80, 60, 0.12);
  color: #7a2c1c;
  font-size: 15px;
}
.h-chyba.je-videt {
  display: block;
}
.h-hlaska {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  padding: 12px 22px;
  border-radius: 16px;
  background: #2a1d17;
  color: #f5ede3;
  font-weight: 600;
  transition: 0.25s ease;
  max-width: calc(100vw - 32px);
  text-align: center;
  box-shadow: 0 24px 48px -28px rgba(42, 29, 23, 0.4), 0 2px 6px -2px rgba(42, 29, 23, 0.08);
}
.h-hlaska.je-videt {
  opacity: 1;
  transform: translate(-50%, 0);
}
.h-hlaska.je-chyba {
  background: #b9503c;
}
/* ─────────────────────────────  načítání  ─────────────────────────── */
.h-nacitani {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(196, 99, 59, 0.16) 0%, rgba(196, 99, 59, 0) 60%), #f5ede3;
  transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
}
.h-nacitani.je-pryc {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
}
.h-nacitani__stred {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.h-nacitani__kruh {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #c8a889 0 26%, #3d2b22 27% 100%);
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.25), inset 0 3px 6px rgba(255, 255, 255, 0.12), 0 16px 30px -14px rgba(42, 29, 23, 0.6);
  animation: h-toc 1.5s linear infinite;
}
.h-nacitani__kruh::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(200, 168, 137, 0.45);
}
.h-nacitani__hlina {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: linear-gradient(135deg, #dd7f57, #a44e2b);
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.25), inset 3px 3px 6px rgba(255, 255, 255, 0.25);
  animation: h-hnist 1.5s ease-in-out infinite;
}
.h-nacitani__jmeno {
  display: inline-flex;
  font-family: 'Fraunces', serif;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #2a1d17;
  font-variation-settings: "SOFT" 100;
}
/* Hlína 71: úvod doběhne celý do 1,1 s a clona se schová až po něm (dřív se
   písmena utínala v půlce); ukáže se jen poprvé za návštěvu (h-bez-uvodu) */
.h-nacitani__jmeno span {
  display: inline-block;
  animation: h-pismeno 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--h-i) * 60ms + 100ms);
}
.h-nacitani__veta {
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #c4633b;
  font-weight: 700;
  animation: h-pismeno 0.7s ease both;
  animation-delay: 0.4s;
}
.h-bez-uvodu .h-nacitani {
  display: none;
}
@keyframes h-hnist {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.14, 0.9) rotate(180deg);
  }
}
@keyframes h-pismeno {
  from {
    opacity: 0;
    transform: translateY(14px) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ───────────────────────  potažení k obnovení  ────────────────────── */
/* Hlína 73 (Ondra: „design toho refrešovací kolečka je zkopírovaný ze
   světliny"): chování dává Coral (44-vykon.php), vzhled web. Při potažení
   shora se objeví malý hrnčířský kruh s hroudou, točí se s prstem, hrouda
   povyroste, když už stačí pustit, a po puštění se točí, dokud se stránka
   nenačte. */
body.hlina #coral-obnoveni {
  --coral-obnoveni-velikost: 42px;
  border: 0;
  background: radial-gradient(circle at 50% 45%, #c8a889 0 24%, #3d2b22 25% 100%);
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.25), inset 0 2px 5px rgba(255, 255, 255, 0.12), 0 12px 24px -12px rgba(42, 29, 23, 0.7);
}
/* světlá značka na kraji kruhu ukazuje, že se točí */
body.hlina #coral-obnoveni::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: rgba(245, 237, 227, 0.6);
}
body.hlina #coral-obnoveni::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: linear-gradient(135deg, #dd7f57, #a44e2b);
  box-shadow: inset -3px -3px 6px rgba(0, 0, 0, 0.25), inset 2px 2px 4px rgba(255, 255, 255, 0.25);
  transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.3, 1);
}
body.hlina #coral-obnoveni.je-pripraveno::after,
body.hlina #coral-obnoveni.je-obnovuje::after {
  transform: scale(1.2);
}
/* ─────────────────────────────  pět kroků  ──────────────────────── */
/* Hlína 89: sekce Pět kroků a tvoříš je v jádru (hlina_kroky), stojí na
   úvodu i pod formulářem rezervace. Na telefonu pod sebou s linkou. */
.h-jak .h-stitek {
  color: #c8a889;
}
.h-jak .h-stitek::before {
  background: #c8a889;
}
.h-jak__hlava {
  margin-bottom: 26px;
}
.h-jak__hlava h2 {
  margin: 0;
}
.h-jak__kroky {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
.h-jak__krok:hover {
  background: rgba(245, 237, 227, 0.12);
  border-color: rgba(196, 99, 59, 0.45);
}
.h-jak__krok {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  padding: 16px 18px 16px 16px;
  border-radius: 22px;
  background: rgba(245, 237, 227, 0.07000000000000001);
  border: 1px solid rgba(200, 168, 137, 0.22);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.h-jak__cislo {
  position: absolute;
  right: 14px;
  top: 12px;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: rgba(200, 168, 137, 0.55);
  font-family: 'Fraunces', serif;
  font-variation-settings: "SOFT" 100;
}
.h-jak__ikona {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #c4633b;
  color: #fbf6ef;
}
.h-jak__ikona i,
.h-jak__ikona svg {
  width: 22px;
  height: 22px;
}
body.hlina .h-jak__nazev {
  margin: 0 0 2px;
  font-size: 19px;
  font-weight: 600;
  padding-right: 40px;
  color: #f5ede3;
}
body.hlina .h-jak__popis {
  margin: 0;
  font-size: 14px;
  color: #c8a889;
  padding-right: 32px;
}
/* Hlína 70: rozvržení podle místa, které sekce opravdu má, ne podle okna.
   Pod 560 px kroky pod sebou, od 560 px dva sloupce (lichý poslední krok přes
   oba), od 900 px všech pět vedle sebe. Na tabletu se tak nic nemačká. */
.h-jak .h-vnitrek {
  container: h-jak / inline-size;
}
@container h-jak (min-width: 560px) {
  .h-jak__kroky {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .h-jak__krok:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@container h-jak (min-width: 900px) {
  .h-jak__kroky {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
  .h-jak__krok:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .h-jak__krok {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 8px;
    padding: 22px 18px;
  }
  .h-jak__ikona {
    grid-row: auto;
    margin-bottom: 8px;
  }
  body.hlina .h-jak__nazev {
    padding-right: 24px;
    font-size: 19px;
  }
  body.hlina .h-jak__popis {
    padding-right: 0;
  }
  .h-jak__cislo {
    right: 16px;
    top: 14px;
  }
}
/* ─────────────────────────────  kurzor  ───────────────────────────── */
/* Hlína 74, 84, 90, 91, 92 (Ondra 23. 9. 2026: „ten kurzor je moc levný ...
   nesmí vypadat levně ... a musí být funkční", „když jsem na kraji toho
   tlačítka, tak je to posunutý až moc", „nechal uživatelovu myš a pod tímto
   kolečko ... místo té tečky chce uživatelovu myš"). Ukazovátko je vlastní
   myš návštěvníka, systémová šipka, ruka i textová čárka zůstávají. Pod ní
   jede prstenec: tlačítko obejme tenkou linkou bez podbarvení, nad textovým
   polem zmizí. Tvar a polohu prstence počítá skript (data-tvar), tady jsou
   jen barvy. */
.h-kurzor {
  display: none;
}
/* systémová myš ukáže ruku na všem, na co jde kliknout, a zákaz na vypnutém */
body.hlina a[href],
body.hlina button,
body.hlina summary,
body.hlina select,
body.hlina [role="button"],
body.hlina [role="tab"],
body.hlina label[for] {
  cursor: pointer;
}
body.hlina button[disabled],
body.hlina [aria-disabled="true"] {
  cursor: not-allowed;
}
@media (pointer: fine) {
  .h-kurzor {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 16px;
    border: 1.5px solid rgba(196, 99, 59, 0.5);
    background: rgba(196, 99, 59, 0);
    pointer-events: none;
    opacity: 0;
    will-change: transform, width, height;
    transition: opacity 0.3s ease, border-color 0.25s ease, background-color 0.25s ease;
  }
  .h-kurzor.je-videt {
    opacity: 1;
  }
  .h-kurzor[data-tvar="obal"] {
    border-color: rgba(196, 99, 59, 0.58);
  }
  .h-kurzor[data-tvar="nad"] {
    border-color: rgba(196, 99, 59, 0.4);
    background: rgba(196, 99, 59, 0.04);
  }
  .h-kurzor.je-videt[data-tvar="text"] {
    opacity: 0;
  }
  .h-kurzor[data-tvar="hlina"] {
    border-color: rgba(196, 99, 59, 0.7);
    background: rgba(196, 99, 59, 0.1);
  }
  .h-kurzor.je-vypnuto {
    border-color: rgba(42, 29, 23, 0.22);
    background: transparent;
  }
}
/* ─────────────────────────────  hlavička  ─────────────────────────── */
/* Šablona Coralu nuluje padding na body (!important), místo pod plovoucí
   hlavičkou proto drží samostatná mezera. */
.h-hlava-mezera {
  height: var(--h-hlava);
  flex: none;
}
.h-hlava {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  padding: 10px var(--h-panel-okraj) 0;
  pointer-events: none;
}
.h-hlava__lista {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* miska vlevo a poslední tlačítko vpravo stojí na čáře obsahu stránky */
  max-width: calc(var(--h-vnitrek) + 2 * var(--h-panel-vnitrek));
  margin: 0 auto;
  padding: 8px calc(var(--h-panel-vnitrek) - 1px);
  border-radius: 22px;
  background: rgba(251, 246, 239, 0.9399999999999999);
  border: 1px solid rgba(216, 197, 171, 0.6);
  box-shadow: 0 14px 34px -22px rgba(42, 29, 23, 0.45);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
body.hlina.je-rolovano .h-hlava__lista {
  box-shadow: 0 18px 40px -20px rgba(42, 29, 23, 0.55);
}
/* Hlína 67: značka je řádek: miska a vedle ní blok s názvem (na PC i s claimem
   pod ním). Mřížka se dvěma řádky nechávala na telefonu, kde claim chybí,
   název u horního kraje misky; teď je blok textu vždycky na středu misky. */
.h-hlava__znacka {
  min-height: 44px;
  /* klikací cíl aspoň 40 px i na telefonu */
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2a1d17;
  text-decoration: none;
}
.h-hlava__texty {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.h-hlava__logo {
  flex: none;
  width: 38px;
  height: 38px;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h-hlava__znacka:hover .h-hlava__logo {
  transform: rotate(-8deg);
}
.h-logo__miska {
  fill: #c4633b;
}
.h-logo__okraj {
  stroke: #2a1d17;
  stroke-width: 2.4;
  fill: none;
}
.h-logo__noha {
  fill: #2a1d17;
}
.h-logo__tecka {
  fill: #c8a889;
}
/* na telefonu stojí nápis sám: jeho oko (malá písmena) jde na střed misky,
   ne na střed celé značky i s tečkou nad ní; změřeno 1,5 px */
.h-hlava__jmeno {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  padding-top: 0.15em;
}
.h-hlava__claim {
  display: none;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7d6252;
  line-height: 1.3;
  margin-top: 3px;
}
/* značka i tlačítka zůstanou nad otevřeným menu (vrstva 55), menu na
   telefonu tak nahoře drží stejnou hlavičku jako stránka */
.h-hlava__znacka,
.h-hlava__akce {
  position: relative;
  z-index: 56;
}
.h-hlava__akce {
  display: flex;
  align-items: center;
  gap: 4px;
}
.h-hlava__menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 100px var(--h-gutter) 40px;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(196, 99, 59, 0.18) 0%, rgba(196, 99, 59, 0) 60%), #f5ede3;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
.h-hlava__menu.je-otevrene {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.hlina .h-hlava__odkaz {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  color: #2a1d17;
  border-bottom: 1px solid rgba(216, 197, 171, 0.6);
  transition: color 0.2s ease, background-color 0.2s ease;
}
body.hlina .h-hlava__odkaz:hover,
body.hlina .h-hlava__odkaz.je-aktivni {
  color: #c4633b;
}
.h-hlava__cta {
  margin-top: 18px;
  align-self: flex-start;
}
/* Hlína 68: tlačítka vpravo nahoře jsou kulatá a bez rámečku, nepřou se
   s obrysem lišty. Menu je tmavé kolečko se dvěma čarami, spodní je kratší;
   při najetí se srovnají a po otevření se zkříží. */
.h-hlava__burger,
.h-zvuk {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.h-hlava__burger {
  z-index: 56;
  background: #2a1d17;
  box-shadow: 0 8px 18px -10px rgba(42, 29, 23, 0.8);
}
.h-hlava__burger:hover {
  background: #3d2b22;
}
.h-hlava__burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  border-radius: 2px;
  background: #f5ede3;
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.h-hlava__burger span:first-child {
  transform: translateY(-3.5px);
}
.h-hlava__burger span:last-child {
  transform: translate(-2.5px, 3.5px) scaleX(0.62);
}
.h-hlava__burger:hover span:last-child {
  transform: translate(0, 3.5px) scaleX(1);
}
.h-hlava__burger.je-otevreny span:first-child {
  transform: rotate(45deg);
}
.h-hlava__burger.je-otevreny span:last-child {
  transform: rotate(-45deg);
}
body.hlina.je-menu {
  overflow: hidden;
}
/* zvuk dílny: reproduktor. Vypnutý je přeškrtnutý a tlumený, zapnutý je
   v barvě hlíny a vlnky z něj pomalu pulzují jedna po druhé. */
.h-zvuk {
  background: transparent;
  color: #7d6252;
}
.h-zvuk:hover {
  background: rgba(231, 217, 198, 0.7);
  color: #2a1d17;
}
.h-zvuk__ikona {
  width: 22px;
  height: 22px;
  overflow: visible;
}
.h-zvuk__repro {
  fill: currentColor;
}
.h-zvuk__krizek,
.h-zvuk__vlna {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.h-zvuk__krizek {
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
  transform-origin: 18px 12px;
}
.h-zvuk__vlna {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.h-zvuk.je-hraje {
  background: rgba(196, 99, 59, 0.1);
  color: #c4633b;
}
.h-zvuk.je-hraje:hover {
  background: rgba(196, 99, 59, 0.16);
  color: #a44e2b;
}
.h-zvuk.je-hraje .h-zvuk__krizek {
  opacity: 0;
  transform: scale(0.4);
}
.h-zvuk.je-hraje .h-zvuk__vlna {
  opacity: 1;
  animation: h-zvuk-vlna 1.6s ease-in-out infinite;
}
.h-zvuk.je-hraje .h-zvuk__vlna--2 {
  animation-delay: 0.25s;
}
@keyframes h-zvuk-vlna {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .h-zvuk.je-hraje .h-zvuk__vlna {
    animation: none;
  }
}
/* ─────────────────────────────  platební okno  ────────────────────── */
.h-platba {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(42, 29, 23, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.h-platba.je-otevrene {
  opacity: 1;
  visibility: visible;
}
.h-platba__karta {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow: auto;
  padding: 28px 24px 32px;
  border-radius: 28px 28px 0 0;
  background: #fbf6ef;
  transform: translateY(30px);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h-platba.je-otevrene .h-platba__karta {
  transform: none;
}
.h-platba__karta h3 {
  margin-bottom: 8px;
}
.h-platba__castka {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 18px 0 14px;
  color: #7d6252;
  font-size: 14px;
}
.h-platba__castka strong {
  font-family: 'Fraunces', serif;
  font-size: 34px;
  font-weight: 600;
  color: #2a1d17;
}
.h-platba__karta-img {
  position: relative;
  height: 110px;
  margin: 0 0 20px;
  border-radius: 18px;
  background: linear-gradient(120deg, #2a1d17 0%, #4a3128 60%, #a44e2b 100%);
  overflow: hidden;
}
.h-platba__karta-img span {
  position: absolute;
  border-radius: 6px;
  background: rgba(245, 237, 227, 0.3);
}
.h-platba__karta-img span:nth-child(1) {
  left: 20px;
  top: 22px;
  width: 42px;
  height: 30px;
  background: rgba(200, 168, 137, 0.8);
}
.h-platba__karta-img span:nth-child(2) {
  left: 20px;
  bottom: 26px;
  width: 150px;
  height: 10px;
}
.h-platba__karta-img span:nth-child(3) {
  right: 20px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(196, 99, 59, 0.7);
}
.h-platba .h-tl + .h-tl {
  margin-top: 10px;
}
.h-platba__zavrit {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1.5px solid #e7d9c6;
  background: #f5ede3;
  color: #2a1d17;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
body.hlina.je-platba {
  overflow: hidden;
}
/* ─────────────────────────────  patička  ──────────────────────────── */
.h-pata {
  margin-top: auto;
  padding: 24px var(--h-panel-okraj) var(--h-panel-okraj);
}
.h-pata__karta {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(196, 99, 59, 0.35) 0%, rgba(196, 99, 59, 0) 60%), #2a1d17;
  color: #e7d9c6;
  /* obsah na čáře stránky i na širokém okně, kde je sloupec obsahu užší */
  padding: 26px max(var(--h-panel-vnitrek), calc((100% - var(--h-vnitrek)) / 2)) 16px;
}
/* Hlína 81 (Ondra 23. 9. 2026: „V patičce odsazení textů a věcí mimo ten
   rámeček nahoře patičky je moc malej ... jenom trochu zvětšit"): text ve
   výzvě, sloupce odkazů i spodní řádek stojí na jedné svislé čáře, o
   --h-pata-odsazeni dál od kraje karty; rámeček výzvy přečnívá o tolik ven. */
.h-pata {
  --h-pata-odsazeni: clamp(16px, calc(8px + 2vw), 34px);
}
.h-pata__vyzva {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px var(--h-pata-odsazeni) 24px;
  margin: 0 0 26px;
  border-radius: 22px;
  background: radial-gradient(ellipse 70% 130% at 0% 0%, rgba(196, 99, 59, 0.18) 0%, rgba(196, 99, 59, 0) 62%), rgba(245, 237, 227, 0.05);
  border: 1px solid rgba(200, 168, 137, 0.25);
  overflow: hidden;
}
.h-pata__vyzva-text {
  position: relative;
  z-index: 1;
}
body.hlina .h-pata__vyzva-nadpis {
  color: #f5ede3;
  font-size: clamp(30px, 5vw, 46px);
  margin-bottom: 10px;
}
body.hlina .h-pata__vyzva-popis {
  color: #c8a889;
  margin: 0;
  max-width: 40ch;
}
.h-pata__vyzva .h-tl {
  position: relative;
  z-index: 1;
  align-self: flex-start;
}
.h-pata__vnitrek {
  display: grid;
  padding: 0 var(--h-pata-odsazeni);
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.h-pata__blok {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Hlína 44: značka s miskou, odkazy ve dvou sloupcích, podmínky ve spodním řádku */
.h-pata__znacka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.h-pata__logo {
  width: 34px;
  height: 34px;
  flex: none;
}
.h-pata .h-logo__okraj {
  stroke: #f5ede3;
}
.h-pata .h-logo__noha {
  fill: #f5ede3;
}
.h-pata .h-logo__tecka {
  fill: #c8a889;
}
.h-pata__jmeno {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 500;
  color: #f5ede3;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
}
.h-pata__odkazy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}
.h-pata__claim {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8a889;
}
body.hlina .h-pata__text {
  margin: 12px 0 0;
  color: #e7d9c6;
  font-size: 15px;
  max-width: 34ch;
}
.h-pata__nadpis {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c8a889;
  margin-bottom: 6px;
  font-weight: 700;
}
body.hlina a.h-pata__odkaz {
  color: #f5ede3;
  font-size: 16px;
  padding: 4px 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.2s ease;
}
body.hlina a.h-pata__odkaz:hover {
  color: #dd7f57;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.h-pata__udaj {
  color: #e7d9c6;
  font-size: 16px;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.h-pata__odkaz i[data-coral-ikona],
.h-pata__udaj i[data-coral-ikona] {
  color: #c8a889;
}
.h-pata__spodek {
  margin: 30px var(--h-pata-odsazeni) 0;
  padding-top: 18px;
  border-top: 1px solid rgba(200, 168, 137, 0.25);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: #c8a889;
}
body.hlina a.h-pata__maly-odkaz {
  color: #c8a889;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
body.hlina a.h-pata__maly-odkaz:hover {
  color: #f5ede3;
}
/* ─────────────────────────────  desktop  ──────────────────────────── */
@media (min-width: 768px) {
  .h-wk {
    padding: 22px 22px 20px;
  }
  .h-wk__hlava {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
  }
  .h-wk__datum {
    width: 64px;
    height: 68px;
  }
  .h-wk__datum b {
    font-size: 30px;
  }
  :root {
    --h-hlava: 96px;
  }
  /* jen svisle: vodorovný vnitřek panelů drží --h-panel-vnitrek z jádra */
  .h-sekce {
    padding-top: 88px;
    padding-bottom: 88px;
  }
  .h-sekce--tmava {
    margin: 16px var(--h-panel-okraj);
  }
  /* Hlína 70: odkazy stojí v liště, jen když se do ní vejdou; rozhoduje
     skript hned za hlavičkou (hlinaSrovnejHlavu) podle obsahu, ne podle
     zařízení. Nejdřív ustoupí claim (.bez-claimu), a když to nestačí,
     hlavička se sbalí do menu jako na telefonu (.je-sbalena). Proto jsou
     pravidla lišty s odkazy pod :not(.je-sbalena). */
  .h-hlava {
    padding: 14px var(--h-panel-okraj) 0;
  }
  .h-hlava__lista {
    border-radius: 24px;
  }
  .h-hlava:not(.je-sbalena) .h-hlava__lista {
    background: rgba(251, 246, 239, 0.86);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .h-hlava__claim {
    display: block;
    white-space: nowrap;
  }
  .h-hlava__jmeno {
    font-size: 23px;
    padding-top: 0;
    white-space: nowrap;
  }
  .h-hlava.bez-claimu .h-hlava__claim {
    display: none;
  }
  .h-hlava.bez-claimu .h-hlava__jmeno {
    padding-top: 0.15em;
  }
  .h-karta {
    padding: 24px;
  }
  .h-hlava:not(.je-sbalena) .h-hlava__menu {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 0;
    background: transparent;
    transform: none;
    opacity: 1;
    visibility: visible;
    flex: 1;
    pointer-events: auto;
  }
  body.hlina .h-hlava:not(.je-sbalena) .h-hlava__odkaz {
    padding: 8px clamp(9px, 1.1vw, 14px);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 0;
    border-radius: 13px;
    min-height: 40px;
  }
  body.hlina .h-hlava:not(.je-sbalena) .h-hlava__odkaz:hover {
    background: rgba(231, 217, 198, 0.75);
    color: #2a1d17;
  }
  body.hlina .h-hlava:not(.je-sbalena) .h-hlava__odkaz.je-aktivni {
    color: #c4633b;
    background: rgba(196, 99, 59, 0.08);
  }
  .h-hlava:not(.je-sbalena) .h-hlava__odkaz--ucet {
    margin-left: 6px;
  }
  .h-hlava:not(.je-sbalena) .h-hlava__cta {
    margin: 0 4px 0 10px;
    min-height: 44px;
    padding: 10px 20px;
    white-space: nowrap;
  }
  .h-hlava:not(.je-sbalena) .h-hlava__burger {
    display: none;
  }
  .h-platba {
    align-items: center;
    padding: 24px;
  }
  .h-platba__karta {
    border-radius: 28px;
    padding: 32px;
  }
  .h-pata {
    padding: 32px var(--h-panel-okraj) 24px;
  }
  .h-pata__karta {
    padding-top: 36px;
    padding-bottom: 28px;
  }
  .h-pata__vyzva {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 36px var(--h-pata-odsazeni);
    gap: 40px;
  }
  .h-pata__vyzva .h-tl {
    align-self: center;
    flex: none;
  }
}