/* ===========================================================
   MOLINO DE HUELMA (molinodehuelma.cz) · SDÍLENÉ STYLY
   Komponenty, které používá každá stránka webu.
   Hodnoty (barvy, fonty, rozestupy) bydlí v tokens.css — tenhle
   soubor je jen bere přes var(--…), nikdy nepíše barvu natvrdo.

   Stavebnice projektu: STAVEBNICE-molinodehuelma.md
   Nezakládej další soubor se styly. Chybí komponenta? Přidej ji sem
   jako další oddíl, ne do nového souboru.
   =========================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-text); font-size: var(--text-zaklad); line-height: var(--text-radek);
       color: var(--text); background: var(--pozadi); }
h1, h2, h3 { font-family: var(--font-nadpis); line-height: 1.15; font-weight: 700; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin-top: var(--mezera-3); max-width: var(--sirka-text); }
.wrap { max-width: var(--sirka-obsah); margin: 0 auto; padding: 0 var(--mezera-4); }
.sekce { padding: var(--mezera-8) 0; }
.sekce--terakota { background: var(--barva-terracotta); }
.sekce--seda { background: var(--pozadi-sekce); }
.sekce--uhel { background: var(--barva-uhel); color: var(--text-na-tmavem); }
.sekce--uhel h2, .sekce--uhel h3 { color: var(--bila); }
.stred { text-align: center; }
.stred p { margin-left: auto; margin-right: auto; }

/* Přepínač jazyků (CS/EN/ES) — tenká lišta nad hlavičkou */
.jazyky-bar { background: var(--pozadi-sekce); border-bottom: 1px solid var(--oddelovac); }
.jazyky-bar .wrap { display: flex; justify-content: flex-end; padding: 6px var(--mezera-4); }
.jazyky { display: flex; gap: var(--mezera-2); font-size: var(--drobny); }
.jazyky a, .jazyky span { color: var(--text-tlumeny); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.jazyky a:hover { color: var(--text); }
.jazyky .aktivni { color: var(--text); font-weight: 700; }
.jazyky .vlajka { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* Hlavička */
.hlavicka { display: flex; align-items: center; justify-content: space-between;
            padding: var(--mezera-3) var(--mezera-4); background: var(--pozadi);
            border-bottom: 1px solid var(--oddelovac); flex-wrap: wrap; gap: var(--mezera-3); }
.hlavicka img { height: 202px; width: auto; display: block; }
.menu { display: flex; gap: var(--mezera-5); list-style: none; align-items: center; flex-wrap: wrap; }
/* :not(.btn) — jinak si tlačítko "Napište nám" (taky <a>) přetahuje barvu textu
   s tímhle pravidlem (stejná specificita, tohle je v souboru níž = vyhrává) a
   vychází ho šedý text místo bílého, nízký kontrast na tmavě zeleném pozadí. */
.menu a:not(.btn) { color: var(--text-tlumeny); text-decoration: none; }
.menu a:not(.btn):hover { color: var(--text); }
.menu a.aktivni { color: var(--text); font-weight: 700; }

/* Tlačítka */
.btn { display: inline-block; padding: 17px 40px; border-radius: var(--zaobleni-tlacitko);
       font-size: 18px; text-decoration: none; border: 1px solid transparent; cursor: pointer;
       font-family: var(--font-text); font-weight: 500; }
.btn--prim { background: var(--barva-akcent); color: var(--bila); }
.btn--prim:hover { background: var(--barva-akcent-hover); }
.btn--sec { background: transparent; border-color: var(--barva-uhel); color: var(--barva-uhel); }
.sekce--uhel .btn--sec { border-color: var(--text-na-tmavem); color: var(--text-na-tmavem); }
/* Na uhlové sekci zelená splývá — primární tlačítko dostane terakotové pozadí a tmavý text. */
.sekce--uhel .btn--prim { background: var(--barva-terracotta); color: var(--barva-uhel); }
.sekce--uhel .btn--prim:hover { background: var(--barva-terracotta-tmava); }

/* Hero */
.hero { position: relative; min-height: 560px; display: flex; align-items: center;
        background: linear-gradient(rgba(33,41,52,.6), rgba(33,41,52,.45)),
                    url('grafika/fotky/haj-panorama-01.webp');
        background-size: cover; background-position: center 65%; }
.hero .wrap { padding-top: var(--mezera-8); padding-bottom: var(--mezera-8); }
.hero .znacka { color: var(--barva-terracotta); font-family: var(--font-nadpis);
                letter-spacing: .06em; text-transform: uppercase; font-size: 17px; font-weight: 700; }
.hero h1 { color: var(--bila); max-width: 15ch; margin-top: var(--mezera-2); }
.hero p { color: var(--bila); font-size: var(--perex); }
.hero .btn { margin-top: var(--mezera-5); }

.foto { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--zaobleni-karta); }
.foto-cela-sirka { width: 100%; display: block; border-radius: var(--zaobleni-karta); }
.foto-placeholder { background: repeating-linear-gradient(45deg,
    rgba(33,41,52,.06), rgba(33,41,52,.06) 12px, rgba(33,41,52,.12) 12px, rgba(33,41,52,.12) 24px);
    border: 1px dashed var(--barva-uhel); border-radius: var(--zaobleni-karta);
    display: flex; align-items: center; justify-content: center; text-align: center;
    color: var(--text-tlumeny); font-size: var(--drobny); padding: var(--mezera-5); min-height: 220px; }

.mrizka { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mezera-5); margin-top: var(--mezera-6); }
.mrizka--2 { grid-template-columns: repeat(2, 1fr); }
.karta { background: var(--pozadi-karta); border-radius: var(--zaobleni-karta);
         box-shadow: var(--stin-karta); padding: var(--mezera-5); }
.karta h3 { margin-bottom: var(--mezera-2); }
.karta p { margin-top: var(--mezera-2); }

.produkty { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mezera-5); margin-top: var(--mezera-6); }
.produkt { background: var(--pozadi-karta); border-radius: 20px; box-shadow: var(--stin-karta); overflow: hidden;
           transition: transform .2s ease, box-shadow .2s ease; }
.produkt:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(33, 41, 52, 0.16); }
.produkt .foto-produkt { height: 300px; display: flex; align-items: center; justify-content: center;
                         padding: var(--mezera-5); position: relative; overflow: hidden;
                         background: radial-gradient(circle at 50% 45%, var(--barva-terracotta) 0%, var(--pozadi-karta) 72%); }
.produkt .foto-produkt img { max-height: 100%; max-width: 100%; object-fit: contain; position: relative;
                             filter: drop-shadow(0 18px 20px rgba(33, 41, 52, 0.22)); }
.produkt .obsah { padding: var(--mezera-4); }
.produkt .znacka-brzy { display: inline-block; background: var(--barva-terracotta); color: var(--barva-uhel);
                        font-size: var(--drobny); padding: 3px 10px; border-radius: 999px; margin-bottom: var(--mezera-2); }
.cena-note { color: var(--text-tlumeny); font-size: var(--drobny); margin-top: var(--mezera-3); }

.dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mezera-6); align-items: center; margin-top: var(--mezera-4); }
.dvojice img { border-radius: var(--zaobleni-karta); }

.najdete-karta { background: var(--pozadi-karta); border-radius: var(--zaobleni-karta); box-shadow: var(--stin-karta);
                 padding: var(--mezera-5); margin-top: var(--mezera-5); border-left: 4px solid var(--barva-akcent); }

/* Patička */
.paticka { background: var(--barva-uhel); color: var(--text-na-tmavem); padding: var(--mezera-7) 0 var(--mezera-5); }
.paticka .sloupce { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mezera-6); }
.paticka h3 { color: var(--bila); font-size: var(--h3); margin-bottom: var(--mezera-3); }
.paticka a { color: var(--text-na-tmavem); }
.paticka ul { list-style: none; }
.paticka li { margin-bottom: var(--mezera-2); }
.paticka .copyright { margin-top: var(--mezera-6); font-size: var(--drobny); opacity: .8; }
.paticka .velkoobchod { display: block; margin-top: var(--mezera-3); opacity: .8; }

/* Formulář (Kontakt) */
.formular { max-width: var(--sirka-text); margin: var(--mezera-6) auto 0; text-align: left; }
.formular .pole { margin-bottom: var(--mezera-4); }
.formular label { display: block; font-size: var(--drobny); margin-bottom: var(--mezera-1); color: var(--text-na-tmavem); opacity: .85; }
.formular input, .formular textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--zaobleni-tlacitko); border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06); color: var(--text-na-tmavem); font-family: var(--font-text); font-size: 16px;
}
.formular input::placeholder, .formular textarea::placeholder { color: var(--text-na-tmavem); opacity: .5; }
.formular input:focus, .formular textarea:focus { outline: 2px solid var(--barva-terracotta); border-color: transparent; }
.formular textarea { min-height: 120px; resize: vertical; }
.formular .btn--prim { border: none; }

/* Přehled prvků (prvky.html) — ukázkové bloky */
.ukazka-box { border: 1px solid var(--oddelovac); border-radius: var(--zaobleni-karta);
              padding: var(--mezera-5); margin-bottom: var(--mezera-6); }
.ukazka-box .popisek { font-size: var(--drobny); color: var(--text-tlumeny); margin-top: var(--mezera-3);
                        padding-top: var(--mezera-3); border-top: 1px solid var(--oddelovac); }
.ukazka-box .popisek strong { color: var(--text); }

@media (max-width: 820px) {
  .mrizka, .mrizka--2, .produkty, .dvojice, .paticka .sloupce { grid-template-columns: 1fr; }
  .hero { background-position: center 40%; }
}

@media (max-width: 640px) {
  .hlavicka { flex-direction: column; align-items: flex-start; }
  /* Svisle pod sebou, ne do řady — při zalamování do řady se poslední
     položka snadno odtrhne na vlastní řádek osamocená (a délka textu se
     navíc liší jazyk od jazyka), svislé řazení je tak spolehlivé pro
     všech 6 jazyků bez ohledu na délku textu. */
  .menu { width: 100%; flex-direction: column; align-items: flex-start; gap: var(--mezera-3); }
  .menu li:last-child { width: 100%; margin-top: var(--mezera-2); }
  .menu li:last-child .btn { display: block; width: 100%; text-align: center; }
  /* Logo na celou šířku obrazovky — přesahuje boční odsazení hlavičky. */
  .hlavicka img { width: calc(100% + 2 * var(--mezera-4)); max-width: none; height: auto;
                  margin-left: calc(-1 * var(--mezera-4)); margin-right: calc(-1 * var(--mezera-4)); }
}

/* ===========================================================
   NOVÝ HERO (pilot, 2026-09-15) — česká homepage, na vyzkoušení
   Vlastní paleta a fonty izolované pod .hero-nova/.pas-duvery, ať
   nekolidují se zbytkem webu (Caudex/Heebo, terakotová paleta v
   tokens.css). Pokud se osvědčí, přenést do design-system.md a
   tokens.css jako novou verzi, ne nechat žít natrvalo takhle
   odděleně.
   =========================================================== */
.hero-nova {
  --stone: #E7E1D0; --ink: #262119; --ink-soft: #514A3D;
  --olive: #545F3D; --olive-deep: #3B4429; --terra: #B2532E; --cream: #F7F4EC;
  position: relative; background: linear-gradient(180deg, #EFE9D8 0%, var(--stone) 100%);
  padding: var(--mezera-6) var(--mezera-4) 0; overflow: hidden;
}
.hero-nova-mrizka { display: grid; grid-template-columns: 1fr; gap: var(--mezera-6);
                    align-items: center; padding-bottom: var(--mezera-6); max-width: var(--sirka-obsah); margin: 0 auto; }
@media (min-width: 860px) { .hero-nova-mrizka { grid-template-columns: 1.05fr 0.95fr; gap: var(--mezera-4); } }
.hero-nova .eyebrow { font-family: var(--font-text); font-size: 13px; color: var(--olive); font-weight: 500; margin-bottom: var(--mezera-3); }
.hero-nova h1 { font-family: "Newsreader", serif; font-weight: 500; font-size: clamp(38px, 6vw, 58px);
                line-height: 1.06; color: var(--ink); max-width: 11ch; }
.hero-nova h1 em { font-style: italic; color: var(--terra); font-weight: 500; }
.hero-nova p { font-family: var(--font-text); margin-top: var(--mezera-4); font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 42ch; }
.hero-nova .btn-nova { display: inline-block; margin-top: var(--mezera-5); background: var(--olive-deep); color: var(--cream);
                       border: none; padding: 14px 26px; font-family: var(--font-text); font-size: 15px;
                       font-weight: 500; text-decoration: none; border-radius: var(--zaobleni-tlacitko); }
.hero-nova .btn-nova:hover { background: var(--olive); }
.hero-nova-cta { margin-top: var(--mezera-5); display: flex; align-items: center; gap: var(--mezera-4); flex-wrap: wrap; }
.hero-nova-cta .btn-nova { margin-top: 0; }
.hero-nova-vyska { display: flex; align-items: baseline; gap: var(--mezera-2); }
.hero-nova-vyska .cislo { font-family: "Newsreader", serif; font-size: 26px; font-weight: 500; color: var(--ink); }
.hero-nova-vyska .popisek { font-family: var(--font-text); font-size: 13px; color: var(--ink-soft); line-height: 1.3; max-width: 12ch; }
/* Bez vynuceného poměru stran — necháme ilustraci přirozenou výšku podle
   SVG, ať nevzniká prázdný prostor nad/pod ní (viz poučení v paměti projektu). */
.hero-nova-ilustrace { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-nova-ilustrace svg { width: 100%; height: auto; display: block; }

.pas-duvery { border-top: 1px solid #C9C0A5; border-bottom: 1px solid #C9C0A5; background: #F7F4EC; }
.pas-duvery-vnitrek { display: grid; grid-template-columns: 1fr; max-width: var(--sirka-obsah); margin: 0 auto; }
@media (min-width: 700px) { .pas-duvery-vnitrek { grid-template-columns: repeat(3, 1fr); } }
.pas-duvery-polozka { padding: var(--mezera-5) var(--mezera-4); border-bottom: 1px solid #C9C0A5; }
@media (min-width: 700px) {
  .pas-duvery-polozka { border-bottom: none; border-right: 1px solid #C9C0A5; }
  .pas-duvery-polozka:last-child { border-right: none; }
}
.pas-duvery-cislo { font-family: "Newsreader", serif; font-size: 22px; color: #B2532E; margin-bottom: var(--mezera-1); }
.pas-duvery-popis { font-family: var(--font-text); font-size: var(--drobny); color: #514A3D; line-height: 1.5; }

/* ===== Cesta k prameni — scroll sekvence fotek (2026-09-15) ===== */
.cesta-prameni { padding: var(--mezera-8) 0; }
.cesta-prameni-uvod { text-align: center; max-width: var(--sirka-text); margin: 0 auto var(--mezera-6); }
.cesta-prameni-uvod p { margin-left: auto; margin-right: auto; }
.cesta-prameni-sekvence { display: flex; flex-direction: column; gap: var(--mezera-3); }
.cesta-prameni-snimek { position: relative; height: 68vh; min-height: 420px; max-height: 640px;
                         overflow: hidden; border-radius: var(--zaobleni-karta); }
.cesta-prameni-snimek img { position: absolute; inset: -10% 0; width: 100%; height: 120%;
                             object-fit: cover; will-change: transform; }
.cesta-prameni-snimek--zaver img { object-position: 35% 65%; }
.cesta-prameni-popisek { position: absolute; left: 0; right: 0; bottom: 0; color: var(--bila);
                          font-size: var(--perex); padding: var(--mezera-6) var(--mezera-5) var(--mezera-4);
                          background: linear-gradient(180deg, transparent, rgba(20,18,15,.7) 75%); }
.cesta-prameni-popisek p { margin: 0; max-width: none; color: inherit; }
@media (max-width: 640px) {
  .cesta-prameni-snimek { height: 50vh; min-height: 320px; border-radius: 14px; }
  .cesta-prameni-popisek { font-size: var(--text-zaklad); padding: var(--mezera-5) var(--mezera-4) var(--mezera-3); }
}
@media (prefers-reduced-motion: reduce) {
  .cesta-prameni-snimek img { transform: none !important; }
}

/* ===== E-shop signup — "upozorněte mě" formulář (2026-09-15) ===== */
.eshop-signup { background: var(--pozadi-sekce); border-radius: var(--zaobleni-karta);
                padding: var(--mezera-6) var(--mezera-5); text-align: center; margin-top: var(--mezera-6); }
.eshop-signup h3 { margin-bottom: var(--mezera-2); }
.eshop-signup p { margin-left: auto; margin-right: auto; }
.eshop-signup-formular { display: flex; gap: var(--mezera-2); max-width: 420px; margin: var(--mezera-4) auto 0;
                          flex-wrap: wrap; justify-content: center; }
.eshop-signup-formular input[type="email"] { flex: 1 1 220px; padding: var(--mezera-3); font-size: var(--text-zaklad);
                          border: 1px solid var(--oddelovac); border-radius: var(--zaobleni-tlacitko);
                          font-family: var(--font-text); background: var(--pozadi-karta); color: var(--text); }
.eshop-signup-formular button { flex: 0 0 auto; }
.eshop-signup-mikrotext { display: block; margin-top: var(--mezera-3); font-size: var(--drobny); color: var(--text-tlumeny); }
.eshop-signup-stav { margin-top: var(--mezera-3); font-size: var(--drobny); }
.eshop-signup-stav[data-typ="ok"] { color: var(--barva-akcent); }
.eshop-signup-stav[data-typ="chyba"] { color: #B2532E; }
.eshop-signup input[name="poleProBoty"] { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ===== Partnerská karta (Kde nás najdete) — 2026-09-15 ===== */
.partneri { display: grid; grid-template-columns: 1fr; gap: var(--mezera-4); }
@media (min-width: 640px) { .partneri { grid-template-columns: repeat(2, 1fr); } }
.partner-karta { background: var(--pozadi-karta); border-radius: var(--zaobleni-karta); box-shadow: var(--stin-karta);
                 padding: var(--mezera-5); display: flex; gap: var(--mezera-4); align-items: flex-start; }
.partner-karta img { height: 56px; width: auto; max-width: 140px; object-fit: contain; flex: none; }
@media (max-width: 480px) { .partner-karta { flex-direction: column; gap: var(--mezera-3); } }
.partner-karta h3 { margin-bottom: var(--mezera-1); }
.partner-karta .partner-slogan { font-style: italic; color: var(--text-tlumeny); font-size: var(--drobny); margin-top: 0; }
.partner-karta .partner-detail { margin-top: var(--mezera-2); font-size: var(--drobny); color: var(--text-tlumeny); }
.partner-karta a { color: var(--barva-akcent); }

/* ===== Vzorový e-shop (jen web.molinodehuelma.cz) — viz sestavovac/build.js, REDESIGN_* =====
   Třídy prefixované "demo-" = prvky, které existují jen ve vzorovém e-shopu. */
.demo-banner { background: var(--barva-uhel); color: var(--text-na-tmavem); text-align: center;
               padding: var(--mezera-2) var(--mezera-4); font-size: var(--drobny); }
.demo-banner strong { color: #E8B978; }
.demo-cena { font-family: var(--font-nadpis); font-size: 20px; color: var(--barva-terracotta-tmava); letter-spacing: 0.04em; }
.demo-cena-popis { font-size: var(--drobny); color: var(--text-tlumeny); margin-top: 0; }
.produkt .demo-cena { margin-bottom: 0; }
.produkt .btn { margin-top: var(--mezera-3); padding: 14px 28px; }

/* ===== Téma "redesign" — celkový re-skin pro koncepční náhled (2026-09-16) =====
   Aplikuje se přes `<html class="tema-redesign">` (viz stranka()/hlava() v build.js,
   parametr `tema`). Funguje tak, že přepíše design tokeny z tokens.css na téhle
   úrovni — veškerá existující komponenty (tlačítka, karty, sekce...) je čtou přes
   var(--...), takže se samy přebarví/přepíšou bez nutnosti dotýkat se jejich
   vlastních pravidel. Jen na `web.molinodehuelma.cz`, nikdy na produkčním `www.`. */
html.tema-redesign {
  --pozadi: #F1ECE0;
  --pozadi-sekce: #E7E0CF;
  --pozadi-karta: #FBF9F4;
  --text: #242017;
  --text-tlumeny: rgba(36, 32, 23, 0.68);
  --text-na-tmavem: #F1ECE0;
  --bila: #FBF9F4;
  --oddelovac: rgba(36, 32, 23, 0.14);
  --barva-terracotta: #E7E0CF;
  --barva-terracotta-tmava: #B85C2E;
  --barva-uhel: #242017;
  --barva-akcent: #B85C2E;
  --barva-akcent-hover: #9C4D26;
  --font-nadpis: "Fraunces", "Iowan Old Style", Georgia, serif;
  --zaobleni-tlacitko: 2px;
  --zaobleni-karta: 2px;
  --stin-karta: 0 1px 0 rgba(36, 32, 23, 0.08);
  background: var(--pozadi);
}
html.tema-redesign h1, html.tema-redesign h2, html.tema-redesign h3 { font-weight: 500; }
html.tema-redesign .karta, html.tema-redesign .produkt, html.tema-redesign .partner-karta {
  border: 1px solid var(--oddelovac);
}
html.tema-redesign .hlavicka { border-bottom: 1px solid var(--oddelovac); }
html.tema-redesign .jazyky-bar { display: none; } /* koncept je jen česky, přepínač by mátl */
/* hero-nova má vlastní lokální proměnné (viz .hero-nova výš) — dolaďujeme
   jen tlačítko, ať sedí s terakotovým akcentem zbytku tématu; ilustrace hor
   zůstává beze změny, do nové palety zapadá i tak. */
html.tema-redesign .hero-nova { --olive-deep: #B85C2E; --olive: #9C4D26; }

/* Fiktivní košík (jen tema-redesign) — náhled budoucího e-shopu, žádná skutečná platba. */
.demo-kosik-plovouci {
  position: fixed; bottom: var(--mezera-4); right: var(--mezera-4); z-index: 50;
  background: var(--barva-akcent); color: var(--bila); text-decoration: none;
  padding: 12px 18px; border-radius: 999px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.demo-kosik-plovouci:hover { background: var(--barva-akcent-hover); }
.demo-kosik-radek {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mezera-3);
  padding: var(--mezera-3) 0; border-bottom: 1px solid var(--oddelovac);
}
.demo-kosik-odebrat {
  background: none; border: none; color: var(--text-tlumeny); text-decoration: underline;
  cursor: pointer; font-size: var(--drobny); font-family: var(--font-text);
}

.demo-kosik-plovouci { display: inline-flex; align-items: center; gap: 8px; }
.demo-kosik-radek { flex-wrap: wrap; }
.demo-kosik-nazev { flex: 1 1 160px; text-align: left; }
.demo-mnozstvi { display: inline-flex; align-items: center; gap: var(--mezera-2); }
.demo-mnozstvi button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--oddelovac);
                        background: var(--pozadi-karta); color: var(--text); font-size: 18px; cursor: pointer; line-height: 1; }
.demo-mnozstvi button:hover { border-color: var(--barva-akcent); color: var(--barva-akcent); }
.demo-akce { display: flex; gap: var(--mezera-3); flex-wrap: wrap; justify-content: center; margin-top: var(--mezera-5); }
.demo-shrnuti { margin-bottom: var(--mezera-5); }
.demo-formular { display: grid; gap: var(--mezera-3); }
.demo-formular label { display: grid; gap: var(--mezera-1); font-size: var(--drobny); color: var(--text-tlumeny); text-align: left; }
.demo-formular input[type="text"], .demo-formular input[type="email"], .demo-formular input[type="tel"], .demo-formular textarea {
  padding: var(--mezera-3); font-size: var(--text-zaklad); font-family: var(--font-text); color: var(--text);
  background: var(--pozadi-karta); border: 1px solid var(--oddelovac); border-radius: var(--zaobleni-tlacitko); }
.demo-formular input:focus, .demo-formular textarea:focus { outline: 2px solid var(--barva-akcent); outline-offset: 1px; }
.demo-formular .demo-souhlas { display: flex; align-items: flex-start; gap: var(--mezera-2); }
.demo-formular .demo-souhlas input { margin-top: 4px; }
.demo-formular .btn { justify-self: start; cursor: pointer; }
.demo-chyba { color: #B2532E; font-size: var(--drobny); margin: 0; }
.demo-hotovo { text-align: center; padding: var(--mezera-6) 0; }
.demo-hotovo p { margin-left: auto; margin-right: auto; }
.demo-toast { position: fixed; left: 50%; bottom: var(--mezera-5); transform: translate(-50%, 20px); z-index: 60;
              background: var(--barva-uhel); color: var(--text-na-tmavem); padding: 12px 20px; border-radius: 999px;
              font-size: var(--drobny); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.demo-toast.viditelny { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .demo-toast { transition: none; } }
/* Karty ve vzorovém e-shopu: tlačítko vždy dole, ať lícuje i při různě dlouhém textu. */
html.tema-redesign .produkt { display: flex; flex-direction: column; }
html.tema-redesign .produkt .obsah { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
html.tema-redesign .produkt .btn { margin-top: auto; }
html.tema-redesign .produkt .demo-cena-popis { margin-bottom: var(--mezera-3); }
.demo-formular .demo-souhlas a { color: var(--barva-akcent); }