/*! GELADORO · návrh a kód © Woody (aiwoo.cz) · WV-GELADORO-2610 */
/* v3 podle Tomáše Beka: světlé podklady a tmavé písmo, bílá a malinová GELADORO (#BF1651, od kola B místo červené #E51B23), vedlejší tyrkysová #3A9EB6, každá sekce má
   pastel jedné chuti a do další sekce z ní kapou kapky. Tři značky pod jedním webem: GELADORO červená,
   Tino modrá, BOHEMIAN zlatá (třída znacka-* na body). Filmové prvky: okno (fotka přes celou obrazovku se
   zúží do kelímku a přelije do fotky pistácií), kapky, tání (WebGL přelití fotek), přehlídka 12 kelímků
   na 3D kruhu s barvou chuti přes celou obrazovku, otočné karty, kolotoč zážitků a kornout, do kterého
   při scrollu přibývají kopečky. Výchozí CSS je statická verze, třída html.anim zapíná pohyb (main.js). */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/Fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/Fraunces-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("../fonts/Fraunces-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("../fonts/Fraunces-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-latin-ext.woff2") format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --krem: #FFFDF9;
  --krem-2: #FFF1E4;
  --papir: #FFFFFF;
  --ink: #2A1B16;
  --ink-2: #5A4840;
  --ink-3: #887770;
  --linka: rgba(42, 27, 22, .12);
  --cervena: #BF1651;            /* kolo B: malinová místo červené (Tomáš 6. 11.), proměnné se jmenují dál cervena */
  --tyrkys: #3A9EB6;             /* vedlejší tyrkysová */
  --tyrkys-t: #23798D;           /* tyrkysová pro text a plochy s bílým písmem */
  --zelena: #1E7D2E;
  --cervena-t: #BF1651;
  --cervena-pas: #BF1651;
  --zlata: #C9A24B;
  --kakao: #2A1B16;
  --akcent: var(--cervena-t);
  /* pastely chutí pro podklady sekcí */
  --jahoda: #FFE3E7;
  --vanilka: #FFF4D6;
  --mango: #FFE9CC;
  --pistacie: #EAF2D4;
  --mata: #E2F3EE;
  --malina: #FFDDE6;
  --nebe: #E0F1F5;               /* světle tyrkysová místo světle modré */
  --font-d: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-t: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --okraj: clamp(16px, 4.2vw, 64px);
  --r: 22px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --hl: 108px;
  --pas-z: 32px;
  --prouzek: repeating-linear-gradient(90deg, rgba(191, 22, 81, .028) 0 2px, transparent 2px 15px);
}
/* barvy značek: Tino modrá, BOHEMIAN zlatá */
.znacka-tino { --akcent: #1D6FB8; --cervena-t: #1D6FB8; --cervena: #2F8FD8; --cervena-pas: #1D6FB8; --prouzek: repeating-linear-gradient(90deg, rgba(47, 143, 216, .035) 0 2px, transparent 2px 15px); }
.znacka-bohemian { --akcent: #9A7424; --cervena-t: #9A7424; --cervena: #C9A24B; --cervena-pas: #8F6A1E; --prouzek: repeating-linear-gradient(90deg, rgba(201, 162, 75, .05) 0 2px, transparent 2px 15px); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hl); }
body { margin: 0; color: var(--ink); background: var(--krem) var(--prouzek); font: 400 clamp(16px, .25vw + 15px, 18px)/1.6 var(--font-t); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--cervena); color: var(--papir); }
:focus-visible { outline: 3px solid var(--cervena-t); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--papir); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }

.obal { position: relative; z-index: 2; width: min(1320px, 100% - 2 * var(--okraj)); margin-inline: auto; }
.stitek { font: 600 .78rem/1.2 var(--font-t); letter-spacing: .16em; text-transform: uppercase; color: var(--cervena-t); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.stitek::before { content: ""; width: 34px; height: 10px; flex: none; border-radius: 10px; background: currentColor; -webkit-mask: radial-gradient(5px 5px at 5px 5px, #000 98%, transparent) 0 0/9px 10px repeat-x; mask: radial-gradient(5px 5px at 5px 5px, #000 98%, transparent) 0 0/9px 10px repeat-x; }
.nadpis { font: 400 clamp(2.3rem, 4.6vw, 4.6rem)/1.02 var(--font-d); letter-spacing: -.02em; font-variation-settings: "opsz" 144, "SOFT" 50; text-wrap: balance; }
.nadpis-2 { font: 400 clamp(2rem, 3.6vw, 3.4rem)/1.04 var(--font-d); letter-spacing: -.02em; font-variation-settings: "opsz" 144; text-wrap: balance; }
.nadpis em, .nadpis-2 em, .hero-nadpis em { font-style: italic; font-weight: 300; color: var(--cervena-t); }
.perex { font-size: clamp(1.05rem, .4vw + .95rem, 1.25rem); color: var(--ink-2); max-width: 56ch; }
.sekce-hlava { margin-bottom: clamp(30px, 6vh, 60px); max-width: 900px; }
.slovo { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .1em; margin: 0 -.04em -.1em; }
.slovo > span { display: inline-block; }

/* ---------- tlačítka: stejný hover všude ---------- */
.tl { --bg: var(--cervena-t); --fg: var(--papir); --bg2: var(--kakao); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 1.5px solid var(--bg); border-radius: 999px; background: var(--bg); color: var(--fg); text-decoration: none; font-weight: 600; letter-spacing: .01em; overflow: hidden; isolation: isolate; cursor: pointer; transition: transform .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease); }
.tl::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--bg2); border-radius: inherit; transform: translateY(102%); transition: transform .6s var(--ease); }
.tl::after { content: ""; width: 18px; height: 10px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .5s var(--ease); }
.tl:hover { transform: translateY(-2px); border-color: var(--bg2); }
.tl:hover::before { transform: translateY(0); }
.tl:hover::after { transform: translateX(4px); }
.tl:active { transform: scale(.97); }
.tl-obrys { --bg: transparent; --fg: var(--ink); --bg2: var(--tyrkys-t); border-color: var(--ink); }
.tl-obrys:hover { color: var(--papir); }
.tl-svetly { --bg: var(--papir); --fg: var(--cervena-pas); --bg2: var(--kakao); border-color: var(--papir); }
.tl-svetly:hover { color: var(--papir); }
.tl-obrys-svetly { --bg: transparent; --fg: var(--papir); --bg2: var(--papir); border-color: rgba(251, 247, 239, .7); }
.tl-obrys-svetly:hover { color: var(--cervena-pas); }
.tl-mini { min-height: 44px; padding: 0 20px; font-size: .92rem; }
.tl-mini::after { display: none; }
.odkaz { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--cervena-t); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100%/100% 1.5px no-repeat; padding-bottom: 3px; transition: background-size .5s var(--ease); }
.odkaz:hover { background-size: 30% 1.5px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-odrazky { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 30px; margin: 26px 0 32px; }
.hero-odrazky a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: clamp(1rem, .3vw + .95rem, 1.16rem); color: var(--ink); transition: color .4s var(--ease); }
.hero-odrazky a::before { content: ""; flex: none; width: 20px; height: 16px; border-radius: 50% 50% 42% 42% / 68% 68% 32% 32%; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 42%), var(--cervena); transition: transform .5s cubic-bezier(.3, 1.7, .5, 1); }
.hero-odrazky a:hover { color: var(--cervena-t); }
.hero-odrazky a:hover::before { transform: translateY(-3px) scale(1.15); }
.hero-odrazky span { font-weight: 400; color: var(--ink-2); }

/* ---------- výřez kelímku ---------- */
.kelimek-vyrez { position: relative; clip-path: url(#kelimek); -webkit-clip-path: url(#kelimek); background: var(--krem-2); overflow: hidden; }
.kelimek-vyrez img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- načítání (jen úvod) ---------- */
.nacitani { display: none; }
.js .nacitani { position: fixed; inset: 0; z-index: 150; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--krem) var(--prouzek); transition: opacity .7s var(--ease), visibility .7s; }
.nacitani-kelimek { width: 84px; height: 102px; position: relative; clip-path: url(#kelimek); -webkit-clip-path: url(#kelimek); background: var(--krem-2); }
.nacitani-kelimek i { position: absolute; inset: 0; background: var(--cervena-t); transform-origin: 50% 100%; transform: scaleY(var(--p, 0)); transition: transform .25s linear; }
.nacitani-kelimek i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 6px, transparent 6px 14px); }
.nacitani-cislo { font: 400 1.05rem/1 var(--font-d); color: var(--ink-2); font-variant-numeric: tabular-nums; }
html.nacteno .nacitani { opacity: 0; visibility: hidden; }

.prubeh { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; }
.prubeh i { display: block; height: 100%; background: var(--tyrkys); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- hlavička ---------- */
.hlavicka { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--hl); display: flex; flex-direction: column; transition: background .5s var(--ease), transform .6s var(--ease), box-shadow .5s; }
html.posunuto .hlavicka { background: rgba(255, 253, 249, .93); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 1px 0 var(--linka); transform: translateY(calc(var(--pas-z) * -1)); }
html.schovat .hlavicka { transform: translateY(-100%); }
/* pás značek skupiny nad hlavičkou, při scrollu odjede nahoru */
.znacky-pas { flex: none; height: var(--pas-z); display: flex; align-items: center; gap: 4px; padding: 0 var(--okraj); font-size: .76rem; font-weight: 600; letter-spacing: .05em; border-bottom: 1px solid var(--linka); }
.znacky-titul { color: var(--ink-3); text-transform: uppercase; letter-spacing: .16em; font-size: .66rem; margin-right: 10px; }
.zn { --zn: #BF1651; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; text-decoration: none; color: var(--ink-2); transition: background .4s var(--ease), color .4s var(--ease); }
.zn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--zn); transition: transform .4s var(--ease); }
.zn:hover::before { transform: scale(1.4); }
.zn:hover, .zn[aria-current] { background: color-mix(in srgb, var(--zn) 13%, transparent); color: var(--ink); }
.zn-tino { --zn: #2F8FD8; }
.zn-bohemian { --zn: #C9A24B; }
.znacky-eshop { margin-left: auto; color: var(--ink-3); text-decoration: none; }
.znacky-eshop:hover { color: var(--akcent); }
.hlavicka-radek { flex: 1; display: flex; align-items: center; gap: 28px; padding: 0 var(--okraj); }
.logo { flex: none; display: block; width: 116px; }
.logo img { width: 100%; }
.logo-tino { width: 100px; margin-left: -10px; }   /* B37: na stránce Tino logo Tina vedle GELADORO; C11 nové logo s Tinem */
.menu { display: flex; gap: 28px; margin-left: auto; }
.menu a { position: relative; text-decoration: none; font-weight: 500; font-size: .96rem; padding: 6px 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease); }
.menu a:hover::after, .menu a.aktivni::after { transform: scaleX(1); transform-origin: 0 50%; }
.menu a.aktivni { color: var(--cervena-t); }
.burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; position: relative; }
.burger i { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--papir); border-radius: 2px; transition: transform .5s var(--ease); }
.burger i:first-child { top: 19px; } .burger i:last-child { top: 27px; }
html.menu-otevrene .burger i:first-child { transform: translateY(4px) rotate(45deg); }
html.menu-otevrene .burger i:last-child { transform: translateY(-4px) rotate(-45deg); }
html.menu-otevrene .hlavicka { color: var(--ink); background: transparent; box-shadow: none; transform: none; }
.mobilmenu { position: fixed; inset: 0; z-index: 45; background: var(--krem) var(--prouzek); padding: calc(var(--hl) + 26px) var(--okraj) 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; overflow-y: auto; }
.mobilmenu-znacky { display: flex; flex-wrap: wrap; gap: 8px; }
.mobilmenu-znacky .zn { font-weight: 600; font-size: .95rem; padding: 9px 16px; box-shadow: inset 0 0 0 1.5px var(--linka); }
.mobilmenu[hidden] { display: none; }
.mobilmenu nav { display: grid; gap: 2px; }
.mobilmenu nav a { font: 400 clamp(2.1rem, 9.5vw, 3.2rem)/1.14 var(--font-d); text-decoration: none; }
.mobilmenu nav a.aktivni { color: var(--cervena-t); font-style: italic; }
.mobilmenu-kontakt { display: grid; gap: 8px; font-weight: 600; padding-bottom: calc(var(--demo-h, 0px) + 80px); }
.mobilmenu-kontakt a { text-decoration: none; color: var(--cervena-t); }

/* =========================================================================
   OKNO: hero, fotka se zúží do kelímku
   ========================================================================= */
.okno { position: relative; background: var(--papir); }
.okno-scena { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hl) + 5vh) 0 12vh; overflow: hidden; }
.okno-foto, .okno-cil { position: absolute; top: 50%; right: var(--okraj); width: min(33vw, 500px); aspect-ratio: 4 / 5; transform: translateY(-44%); margin: 0; }
.okno-foto { z-index: 1; clip-path: url(#kelimek); -webkit-clip-path: url(#kelimek); background: var(--krem-2); overflow: hidden; }
.okno-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.okno-cil { visibility: hidden; pointer-events: none; }
.okno-druha { display: none; }
/* světlá fotka: pod textem bílý závoj, aby tmavé písmo bylo čitelné */
.okno-stin { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(255, 253, 249, .95), rgba(255, 253, 249, .82) 36%, rgba(255, 253, 249, .2) 64%, rgba(255, 253, 249, 0) 78%), linear-gradient(0deg, rgba(255, 253, 249, .55), rgba(255, 253, 249, 0) 26%), linear-gradient(180deg, rgba(255, 253, 249, .5), rgba(255, 253, 249, 0) 22%); }
.okno-obsah { position: relative; z-index: 2; }
.okno-text { max-width: min(640px, 54%); }
.okno-popisek { position: absolute; z-index: 3; right: var(--okraj); bottom: 4.5vh; font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); background: rgba(255, 255, 255, .82); padding: 5px 11px; border-radius: 999px; opacity: 0; }
/* plaketa ocenění s pomalým leskem a zelená pečeť, která se při scrollu točí */
.plaketa { position: relative; display: inline-block; width: clamp(104px, 9vw, 148px); margin: 0 0 20px; filter: drop-shadow(0 14px 18px rgba(110, 72, 8, .22)); }
.plaketa img { width: 100%; }
.ocen { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.ocen .plaketa { flex: none; margin: 0; }
.ocen-text { display: grid; gap: 3px; max-width: 36em; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; color: var(--ink-2); }
.ocen-text b { font: italic 400 clamp(1.15rem, 1.6vw, 1.5rem)/1.1 var(--font-d); letter-spacing: 0; text-transform: none; color: var(--cervena-t); white-space: nowrap; }
.plaketa::after { content: ""; position: absolute; inset: 0; -webkit-mask: url("/img/plaketa.webp") center/contain no-repeat; mask: url("/img/plaketa.webp") center/contain no-repeat; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%) 160% 0/250% 100% no-repeat; animation: lesk 6s var(--ease) infinite 1.5s; }
@keyframes lesk { 0%, 55% { background-position: 160% 0; } 85%, 100% { background-position: -60% 0; } }
.okno-pecet { position: absolute; z-index: 3; width: clamp(108px, 10.5vw, 164px); aspect-ratio: 1; right: calc(var(--okraj) + min(33vw, 500px) - 74px); bottom: 10vh; border-radius: 50%; background: rgba(255, 255, 255, .9); padding: 4px; box-shadow: 0 16px 34px -18px rgba(30, 80, 30, .45); }
.okno-pecet img { width: 100%; height: 100%; }
.odznak { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .84rem; letter-spacing: .04em; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--papir); color: var(--ink); box-shadow: inset 0 0 0 1px var(--linka); margin-bottom: 26px; }
.odznak i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F3DE9C, var(--zlata) 55%, #9C7A2E); box-shadow: 0 0 0 3px rgba(201, 162, 75, .2); }
.odznak-text { padding: 8px 16px; }
.hero-nadpis { font: 400 clamp(3rem, 7vw, 7.6rem)/.94 var(--font-d); letter-spacing: -.035em; font-variation-settings: "opsz" 144, "SOFT" 60; }
.hero-nadpis-pod { font-size: clamp(2.7rem, 5.8vw, 6.2rem); }
.hero-nadpis .radek { display: block; }
.hero-nadpis .radek-2 { padding-left: clamp(0px, 5vw, 96px); }
.hero-nadpis .radek-3 { padding-left: clamp(0px, 2vw, 36px); }
.hero-perex { margin: 28px 0 32px; max-width: 46ch; font-size: clamp(1.05rem, .35vw + 1rem, 1.22rem); color: var(--ink-2); }
.dolu { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); }
.dolu i { width: 2px; height: 38px; background: linear-gradient(var(--cervena-t) 50%, transparent 50%) 0 0/2px 200%; animation: kapka 2.2s var(--ease) infinite; }
@keyframes kapka { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
/* živá verze (JS): fotka začíná přes celou obrazovku */
.okno-ziva .okno-foto { top: 0; left: 0; right: auto; width: 100%; height: 100%; aspect-ratio: auto; transform: none; clip-path: none; -webkit-clip-path: none; will-change: clip-path; }
.okno-ziva .okno-foto img { will-change: transform; transform-origin: 0 0; }
.okno-ziva .okno-scena { height: 100svh; }
.okno-ziva .okno-druha { display: block; position: absolute; inset: auto; opacity: 0; object-fit: cover; transform: none; will-change: opacity, transform; }
.okno-ziva .okno-popisek { opacity: .9; }

/* =========================================================================
   KAPKY: horní sekce kape do další
   ========================================================================= */
.kapky { position: absolute; left: 0; right: 0; top: -1px; height: clamp(80px, 15vh, 180px); pointer-events: none; z-index: 4; overflow: visible; }
.kapky svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- pás důvěry ---------- */
.pas { position: relative; z-index: 2; overflow: hidden; border-block: 1px solid var(--linka); background: var(--papir); padding: 18px 0; }
.pas-odkaz { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 0 44px 0 var(--okraj); background: linear-gradient(90deg, var(--papir) calc(100% - 34px), rgba(255, 255, 255, 0)); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cervena-t); text-decoration: none; }
.pas-odkaz::after { content: ""; width: 16px; height: 9px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .5s var(--ease); }
.pas-odkaz:hover::after { transform: translateX(4px); }
.pas-stopa { display: flex; width: max-content; animation: pas 46s linear infinite; }
.pas:hover .pas-stopa { animation-play-state: paused; }
.pas a { text-decoration: none; color: inherit; transition: color .4s var(--ease); }
.pas a:hover { color: var(--cervena-t); }
.pas ul { display: flex; flex: none; }
.pas li { font: 400 clamp(1.05rem, 1.4vw, 1.4rem)/1 var(--font-d); white-space: nowrap; padding: 0 28px; display: flex; align-items: center; gap: 56px; }
.pas li::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cervena); transform: translateX(28px); }
@keyframes pas { to { transform: translateX(-50%); } }
/* B44, B46: běžící hesla zeleně se zelenými tečkami (zelená podle pečeti, o kousek tmavší kvůli čitelnosti) */
.pas-hesla li { color: var(--zelena); font-weight: 600; font-size: clamp(1.3rem, 2vw, 2rem); }   /* C10, C14: větší a tučnější hesla */
.pas-hesla li::after { background: var(--zelena); }
.boh-slozeni-txt { font-size: .8rem; line-height: 1.45; color: var(--ink-3); margin: 8px 0 4px; }   /* B53 */
.boh-chut .boh-slozeni-txt b { display: inline; font: 600 .8rem/1.45 var(--font-t); letter-spacing: 0; color: var(--ink-2); margin: 0; }

/* =========================================================================
   MANIFEST
   ========================================================================= */
/* manifest v červené barvě loga (Tomáš 4. 11. večer), bílé písmo */
.manifest { position: relative; background: var(--cervena-pas) repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 15px); color: #fff; }
.manifest-pin { position: relative; z-index: 2; min-height: 100svh; display: flex; align-items: center; padding: 20vh 0 12vh; }
.manifest-obal { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 6vw, 110px); align-items: center; }
.manifest .stitek { color: #FFD3E1; }
.ne { display: grid; gap: .3em; font: 400 clamp(1.9rem, 3.9vw, 4.1rem)/1.08 var(--font-d); letter-spacing: -.02em; }
.ne li:nth-child(2) { padding-left: 1.2em; }
.ne li:nth-child(3) { padding-left: .6em; }
.ne s { position: relative; text-decoration: none; color: rgba(255, 255, 255, .78); font-style: italic; font-weight: 300; white-space: nowrap; }
.ne s::after { content: ""; position: absolute; left: -.06em; right: -.06em; top: 56%; height: .085em; border-radius: .1em; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--skrt, 1)); }
.ano { margin-top: 1.3em; max-width: 32ch; font: 300 clamp(1.35rem, 2.1vw, 2.2rem)/1.3 var(--font-d); color: rgba(255, 255, 255, .86); }
.ano b { font-weight: 500; color: #fff; transition: color .5s var(--ease); }
.ano b.sviti { color: #FFE3A3; }
.podpis { margin-top: 2em; display: grid; gap: 6px; }
.podpis span { font: italic 300 clamp(1.3rem, 1.9vw, 1.9rem)/1.2 var(--font-d); color: var(--cervena-t); }
.manifest .podpis span { color: #FFD3E1; }
.manifest .podpis small { color: rgba(255, 255, 255, .72); }
.podpis small { font-size: .9rem; color: var(--ink-3); }
.tani-okno { position: relative; width: min(100%, 440px); aspect-ratio: 4 / 5; justify-self: end; background: #FFD3E1; }
.tani-okno canvas, .tani-okno .tani-zaloha { position: absolute; inset: 0; width: 100%; height: 100%; }
.tani-okno .tani-zaloha { object-fit: cover; }
.tani-ok .tani-zaloha { opacity: 0; }
.tani-okno canvas { opacity: 0; transition: opacity .6s var(--ease); }
.tani-ok canvas { opacity: 1; }
.manifest-dal { position: relative; z-index: 2; padding-bottom: 16vh; }
.manifest-dal ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 40px; border-top: 1px solid rgba(255, 255, 255, .25); }
.manifest-dal li { padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); font: 300 clamp(1.15rem, 1.5vw, 1.45rem)/1.35 var(--font-d); color: rgba(255, 255, 255, .88); }

/* =========================================================================
   FILM VÝROBY
   ========================================================================= */
.film { position: relative; background: var(--vanilka) var(--prouzek); color: var(--ink); }
.film-pin { position: relative; }
.film-platno, .film-stin, .film-prubeh { display: none; }
.film-hlava { padding-top: 18vh; margin-bottom: 6vh; }
.film-kroky { width: min(1320px, 100% - 2 * var(--okraj)); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 40px 28px; padding-bottom: 14vh; position: relative; z-index: 2; }
.film-krok img { border-radius: var(--r); aspect-ratio: 16 / 11; object-fit: cover; margin-bottom: 16px; }
.film-c { display: block; font: italic 300 1.1rem/1 var(--font-d); color: var(--cervena-t); margin-bottom: 6px; }
.film-krok h3 { font: 400 clamp(1.6rem, 2.2vw, 2.3rem)/1.08 var(--font-d); margin-bottom: 8px; }
.film-krok h3 em { font-style: italic; font-weight: 300; color: var(--cervena-t); }
.film-krok p { color: var(--ink-2); max-width: 44ch; }
.film-pozn { display: inline-block; margin-top: 12px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-3); }
.film-pozn-ziva { color: var(--cervena-t); }
/* živá verze: světlá scéna, fotky se přelévají v rámu vpravo, text kroku vlevo */
html.anim .film-pin { height: 100svh; overflow: hidden; }
html.anim .film-platno { display: block; position: absolute; z-index: 1; right: var(--okraj); top: calc(50% + var(--hl) * .3); width: min(56vw, 920px, calc((100svh - var(--hl) - 16vh) * 1.333)); aspect-ratio: 4 / 3; transform: translateY(-50%) rotate(var(--naklon, 0deg)); border-radius: 30px; overflow: hidden; background: #F3E3BC; box-shadow: 0 50px 90px -56px rgba(110, 70, 10, .55), 0 0 0 8px rgba(255, 255, 255, .7); }
html.anim .film-platno canvas { display: block; width: 100%; height: 100%; }
html.anim .film-hlava { position: absolute; top: calc(var(--hl) + 3vh); left: 0; right: 0; padding: 0; margin: 0 auto; }
html.anim .film-hlava .nadpis { font-size: clamp(2rem, 3.3vw, 3.4rem); }
html.anim .film-kroky { position: absolute; z-index: 2; left: var(--okraj); right: auto; top: calc(50% + var(--hl) * .3); transform: translateY(-38%); width: min(30vw, 450px); margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
html.anim .film-krok { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
html.anim .film-krok img { display: none; }
html.anim .film-krok .film-c { font-size: clamp(3rem, 5.4vw, 5.2rem); font-weight: 300; line-height: .9; margin-bottom: 12px; }
html.anim .film-krok h3 { font-size: clamp(1.9rem, 2.8vw, 2.9rem); margin-bottom: 14px; }
html.anim .film-krok p { font-size: clamp(.98rem, .28vw + .93rem, 1.12rem); }
html.anim .film-prubeh { display: flex; gap: 8px; position: absolute; z-index: 2; left: var(--okraj); bottom: calc(7vh + var(--demo-h, 0px)); }
.film-prubeh i { position: relative; width: 44px; height: 4px; border-radius: 4px; background: rgba(42, 27, 22, .14); overflow: hidden; }
.film-prubeh i::after { content: ""; position: absolute; inset: 0; background: var(--cervena-t); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* =========================================================================
   PŘEHLÍDKA KELÍMKŮ
   ========================================================================= */
.prehlidka { position: relative; }
.prehlidka-pin { display: none; }
.prehlidka-nota-staticka { padding-bottom: 14vh; }
.prehlidka-nota-staticka .odkaz { display: inline-block; margin-top: 14px; }
html.anim .prehlidka-nota-staticka { display: none; }
.prehlidka-data { width: min(1320px, 100% - 2 * var(--okraj)); margin: 0 auto; padding: 16vh 0 5vh; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.prehlidka-data li { border-radius: var(--r); padding: 22px; background: var(--b, var(--papir)); }
.prehlidka-data img { width: 72%; margin: 0 auto 16px; }
.pd-rada { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cervena-t); }
.prehlidka-data h3 { font: 400 1.6rem/1.1 var(--font-d); margin: 6px 0 8px; }
.pd-popis { color: var(--ink-2); font-size: .95rem; }
.pd-formaty { margin-top: 10px; font-size: .85rem; font-weight: 600; }
html.anim .prehlidka-data { display: none; }
html.anim .prehlidka-pin { display: block; position: relative; height: 100svh; overflow: hidden; color: var(--ink-p, var(--ink)); --bg0: #D5DAA6; --bg1: #D5DAA6; }
.prehlidka-pozadi { position: absolute; inset: 0; background: var(--bg0); }
.prehlidka-zaclona { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.prehlidka-zaclona path { fill: var(--bg1); }
.prehlidka-pozadi::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 26px, rgba(255, 255, 255, 0) 26px 58px); mix-blend-mode: soft-light; }
.prehlidka-nazev { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -54%); margin: 0; font: italic 300 clamp(5rem, 16vw, 17rem)/.86 var(--font-d); letter-spacing: -.045em; white-space: nowrap; color: currentColor; opacity: .14; pointer-events: none; }
.prehlidka-nazev span { display: inline-block; }
.prehlidka-scena { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pk-kelimek { position: absolute; left: 0; top: 0; height: 52vh; width: auto; max-width: none; will-change: transform, filter, opacity; filter: drop-shadow(0 40px 40px rgba(43, 27, 20, .28)); transform-origin: 50% 50%; }
.prehlidka-ui { position: relative; z-index: 3; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--hl) + 3vh) 0 calc(5vh + var(--demo-h, 0px)); }
.prehlidka .stitek { color: currentColor; opacity: .8; }
.prehlidka-titul { font: 400 clamp(1.6rem, 2.4vw, 2.4rem)/1 var(--font-d); }
.prehlidka-info { align-self: center; max-width: 37ch; }
.pi-rada { font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-bottom: 10px; }
.pi-nazev { font: 400 clamp(2.3rem, 4.1vw, 4.3rem)/1 var(--font-d); letter-spacing: -.025em; margin-bottom: 16px; text-wrap: balance; }
.pi-popis { font-size: clamp(.97rem, .22vw + .93rem, 1.08rem); line-height: 1.55; opacity: .9; margin-bottom: 18px; }
.prehlidka-nota { font-size: .84rem; line-height: 1.45; max-width: 44ch; opacity: .85; }
.prehlidka-nota b { display: block; font: italic 400 1.1rem/1.2 var(--font-d); opacity: 1; }
.prehlidka-nota a { color: inherit; font-weight: 600; }
.prehlidka-pata-odkazy { display: grid; justify-items: end; gap: 6px; text-align: right; }
.pi-formaty { display: inline-flex; padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font-size: .85rem; font-weight: 600; }
.prehlidka-info > * { will-change: transform, opacity; }
.prehlidka-pata { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.prehlidka-tecky { display: flex; gap: 8px; }
.prehlidka-tecky li { width: 30px; height: 4px; border-radius: 4px; background: currentColor; opacity: .22; transition: opacity .4s, width .5s var(--ease); }
.prehlidka-tecky li.on { opacity: 1; width: 52px; }
.prehlidka .odkaz { color: currentColor; }

/* =========================================================================
   ČTYŘI PODOBY: karty se otáčejí
   ========================================================================= */
.podoby { position: relative; padding: 18vh 0 16vh; }
.podoby-hlava { display: grid; gap: 16px; margin-bottom: 7vh; max-width: 900px; }
.flipy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); perspective: 1800px; }
.flip { aspect-ratio: 3 / 5; }
.flip-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; border-radius: var(--r); text-decoration: none; color: inherit; transition: box-shadow .5s var(--ease); }
.flip-rub, .flip-lic { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-rub img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.flip-in:hover .flip-rub img { transform: scale(1.05); }
/* baner klienta má poměr 3:4, pod ním bílý pruh s textem */
.flip-rub { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--papir); box-shadow: inset 0 0 0 1px var(--linka); }
.flip-rub img { min-height: 0; }
.flip-text { position: relative; padding: 12px 18px 14px; display: grid; align-content: center; gap: 1px; color: var(--ink); background: var(--papir); }
.flip-text b { font: 400 clamp(1.4rem, 1.9vw, 1.95rem)/1.05 var(--font-d); margin-bottom: 3px; }
.flip-text span { font-size: .84rem; color: var(--ink-2); }
.flip-lic { transform: rotateY(180deg); background: #F1E2C9 repeating-linear-gradient(90deg, rgba(191, 22, 81, .14) 0 12px, rgba(191, 22, 81, 0) 12px 28px); display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; box-shadow: inset 0 0 0 1px var(--linka); }
.flip-lic img { width: 56%; }
.flip-lic b { font: italic 400 clamp(1.7rem, 2.4vw, 2.5rem)/1 var(--font-d); color: var(--cervena-t); }
.flip-lic small { font-weight: 600; letter-spacing: .14em; color: var(--ink-3); }
.flip:nth-child(2) .flip-lic { background-color: #E7EBCB; }
.flip:nth-child(3) .flip-lic { background-color: #F3DDC7; }
.flip:nth-child(4) .flip-lic { background-color: #E9D3CA; }
.podoby-odkaz { margin-top: 40px; }

/* =========================================================================
   PRO PODNIKY (červený pás)
   ========================================================================= */
.podniky-pas { position: relative; background: var(--cervena-pas) linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px) 0 0/15px 100%; color: var(--papir); padding: 24vh 0 18vh; }
.podniky-pas .stitek, .podniky-pas .nadpis em { color: #FFD3E1; }
.podniky-pas .nadpis { max-width: 18ch; margin-bottom: 5vh; }
/* tři programy: Corner a Point vedle sebe, velký automat Station přes celou šířku */
.programy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); margin-bottom: 7vh; perspective: 1600px; }
.pg { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 26px; overflow: hidden; background: var(--papir); color: var(--ink); box-shadow: 0 40px 70px -44px rgba(70, 0, 4, .6); transform-style: preserve-3d; }
.pg-foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.pg-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pg:hover .pg-foto img { transform: scale(1.045); }
.pg-text { padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 10px; align-content: start; }
.pg-znacka { font: 600 .74rem/1 var(--font-t); letter-spacing: .16em; text-transform: uppercase; color: var(--cervena-t); }
.pg h3 { font: 400 clamp(1.7rem, 2.5vw, 2.6rem)/1.02 var(--font-d); letter-spacing: -.015em; }
.pg h3 em { font-style: italic; font-weight: 300; color: var(--cervena-t); }
.pg p { color: var(--ink-2); max-width: 52ch; }
.pg .tl { justify-self: start; margin-top: 8px; }
.pg-station { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
.pg-station .pg-foto { aspect-ratio: 3 / 4; height: 100%; background: #D7EEF7; }
.pg-station .pg-text { padding: clamp(26px, 4vw, 64px); gap: 14px; }
.pg-station h3 { font-size: clamp(2.2rem, 3.8vw, 4rem); }
.pg-station .pg-podtitul { font: italic 300 clamp(1.2rem, 1.6vw, 1.55rem)/1.3 var(--font-d); color: var(--ink); }
.pg-nalepka { position: absolute; left: 18px; top: 18px; z-index: 2; padding: 7px 14px; border-radius: 999px; background: var(--tyrkys-t); color: #fff; font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5); }
.cisla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 34px; margin-bottom: 8vh; }
.cisla b { display: block; font: 300 clamp(3.6rem, 7vw, 7.4rem)/.9 var(--font-d); letter-spacing: -.04em; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.cisla span { color: rgba(251, 247, 239, .86); max-width: 30ch; display: block; }
.podniky-dukaz { font: italic 300 clamp(1.3rem, 2vw, 2rem)/1.3 var(--font-d); max-width: 40ch; margin-bottom: 34px; }

/* =========================================================================
   ZÁŽITKY: kolotoč karet
   ========================================================================= */
.zazitky-pas { position: relative; background: var(--mata) var(--prouzek); }
.zazitky-pin { padding: 22vh 0 14vh; overflow: hidden; }
.zazitky-hlava { margin-bottom: 7vh; }
.kolotoc { display: flex; gap: clamp(14px, 2vw, 30px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px var(--okraj) 30px; scrollbar-width: none; }
.kolotoc::-webkit-scrollbar { display: none; }
.kk { flex: none; width: clamp(280px, 30vw, 430px); scroll-snap-align: center; }
.kk a { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); background: var(--papir); box-shadow: 0 34px 60px -42px rgba(42, 27, 22, .5), inset 0 0 0 1px var(--linka); transform-style: preserve-3d; }
.kk img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; transition: transform 1.2s var(--ease); }
.kk a:hover img { transform: scale(1.05); }
.kk-text { position: relative; padding: 18px 22px 22px; display: grid; gap: 4px; align-content: start; background: var(--papir); }
.kk-text small { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cervena-t); }
.kk-text b { font: 400 clamp(1.6rem, 2vw, 2.1rem)/1.05 var(--font-d); }
.kk-text span { font-size: .92rem; color: var(--ink-2); }
.kk-text em { font-style: normal; font-weight: 600; margin-top: 8px; justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .85rem; }
html.anim .zazitky-pas .kolotoc.kolotoc-ziva { overflow: visible; scroll-snap-type: none; width: max-content; padding-inline: calc(50vw - min(15vw, 215px)); perspective: 1600px; }

/* ---------- o nás pás ---------- */
.onas-pas { position: relative; padding: 18vh 0; background: var(--papir); }
.onas-obal { display: grid; grid-template-columns: .85fr 1.15fr .6fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.onas-foto { aspect-ratio: 4 / 5; }
.onas-text p:not(.stitek) { color: var(--ink-2); margin-top: 18px; max-width: 54ch; }
.onas-text .odkaz { margin-top: 26px; }
.onas-trofej { align-self: end; }
.onas-trofej img { border-radius: var(--r); aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 30px 60px -36px rgba(43,27,20,.5); }
.onas-trofej figcaption { margin-top: 12px; font-size: .85rem; color: var(--ink-2); }
.onas-trofej b { display: block; font: 400 1.15rem/1.2 var(--font-d); color: var(--ink); }

/* ---------- finále ---------- */
.finale { position: relative; padding: 20vh 0 34vh; overflow: hidden; text-align: center; background: var(--mango) var(--prouzek); }
.finale-obal { display: grid; justify-items: center; gap: 18px; }
.finale .stitek { justify-content: center; }
.finale-nadpis { font: 400 clamp(2.6rem, 6vw, 6.4rem)/1 var(--font-d); letter-spacing: -.03em; max-width: 16ch; text-wrap: balance; }
.finale-nadpis em { font-style: italic; font-weight: 300; color: var(--cervena-t); }
.finale .perex { margin-bottom: 14px; }
.finale .hero-cta { justify-content: center; }
.finale-kelimky .fk { position: absolute; bottom: -2vh; width: clamp(130px, 15vw, 250px); filter: drop-shadow(0 30px 30px rgba(43, 27, 20, .25)); }
.fk-1 { left: max(2vw, 50% - 640px); transform: rotate(-9deg); }
.fk-2 { right: max(2vw, 50% - 640px); transform: rotate(8deg); }

/* =========================================================================
   TŘI ZNAČKY: GELADORO, Tino, BOHEMIAN
   ========================================================================= */
.znacky { position: relative; padding: 18vh 0 16vh; background: var(--krem-2) var(--prouzek); }
.znacky .sekce-hlava .perex { margin-top: 18px; }
.znacky-karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); perspective: 1600px; }
.zk { --zk: #BF1651; --zk-t: #BF1651; position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 26px; overflow: hidden; background: var(--papir); color: var(--ink); text-decoration: none; box-shadow: 0 30px 60px -44px rgba(42, 27, 22, .5), inset 0 0 0 1px var(--linka); transform-style: preserve-3d; transition: box-shadow .7s var(--ease); }
.zk:hover { box-shadow: 0 46px 80px -44px color-mix(in srgb, var(--zk) 60%, transparent), inset 0 0 0 1px var(--linka); }
.zk-tino { --zk: #2F8FD8; --zk-t: #1D6FB8; }
.zk-bohemian { --zk: #C9A24B; --zk-t: #8F6A1E; }
.zk-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--zk) 14%, #fff); }
.zk-foto > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.zk:hover .zk-foto > img { transform: scale(1.05); }
.zk-kelimky img { position: absolute; bottom: -6%; width: 46%; filter: drop-shadow(0 18px 18px rgba(42, 27, 22, .22)); transition: transform .9s var(--ease); }
html.anim .zk-kelimky img { transition: none; }
html.mys .tl { transition: border-color .5s var(--ease), color .5s var(--ease); }
.zk-kelimky img:nth-child(1) { left: 2%; transform: rotate(-8deg); }
.zk-kelimky img:nth-child(2) { left: 27%; bottom: -2%; width: 50%; z-index: 2; }
.zk-kelimky img:nth-child(3) { right: 2%; transform: rotate(8deg); }
.zk:hover .zk-kelimky img:nth-child(1) { transform: rotate(-12deg) translate(-6px, -6px); }
.zk:hover .zk-kelimky img:nth-child(2) { transform: translateY(-10px); }
.zk:hover .zk-kelimky img:nth-child(3) { transform: rotate(12deg) translate(6px, -6px); }
.zk-slovo { display: grid; place-items: center; align-content: center; gap: 8px; background: radial-gradient(circle at 28% 18%, #FFF6D8, #F3DD98 55%, #E3C06A); color: #6E4F12; text-align: center; }
.zk-slovo b { font: 500 clamp(2.2rem, 3.6vw, 3.6rem)/1 var(--font-d); letter-spacing: .08em; }
.zk-slovo small { font: italic 300 clamp(1rem, 1.3vw, 1.25rem)/1.2 var(--font-d); }
.zk-text { padding: 24px 24px 26px; display: grid; gap: 10px; align-content: start; }
.zk-znacka { display: flex; align-items: center; gap: 8px; font: 600 .74rem/1 var(--font-t); letter-spacing: .16em; text-transform: uppercase; color: var(--zk-t); }
.zk-znacka::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--zk); }
.zk-text > b { font: 400 clamp(1.6rem, 2.3vw, 2.3rem)/1.04 var(--font-d); letter-spacing: -.01em; }
.zk-popis { color: var(--ink-2); }
.zk-text .odkaz { color: var(--zk-t); justify-self: start; margin-top: 4px; }

/* =========================================================================
   KORNOUT: při scrollu přibývají kopečky v barvách sekcí
   ========================================================================= */
.kornout { position: fixed; z-index: 30; right: clamp(10px, 1.2vw, 22px); bottom: calc(50% - 150px); display: none; flex-direction: column; justify-content: flex-end; align-items: center; padding: 16px 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 14px 34px -22px rgba(42, 27, 22, .45), inset 0 0 0 1px rgba(255, 255, 255, .6); pointer-events: none; }
html.anim .kornout { display: flex; }
html.menu-otevrene .kornout { visibility: hidden; }
.kornout-kopecky { display: flex; flex-direction: column-reverse; align-items: center; }
/* kopeček: kopule s odleskem a zvlněným lemem dole, nasazuje se s pružinou */
.kopecek { pointer-events: auto; position: relative; width: 34px; height: 0; margin-top: 0; padding: 0; border: 0; cursor: pointer; border-radius: 50% 50% 42% 42% / 68% 68% 32% 32%; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 42%), var(--c); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .06); transform: scale(0); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.3, 1.7, .5, 1), height .5s var(--ease), margin .5s var(--ease); }
.kopecek::before { content: ""; position: absolute; left: -2px; right: -2px; bottom: -3px; height: 8px; background: var(--c); -webkit-mask: radial-gradient(circle at 50% 0, #000 4.2px, transparent 4.8px) 0 0 / 7.6px 8px repeat-x; mask: radial-gradient(circle at 50% 0, #000 4.2px, transparent 4.8px) 0 0 / 7.6px 8px repeat-x; filter: brightness(.94); }
.kopecek.on { height: 27px; margin-top: -12px; transform: scale(1); }
.kopecek.akt { transform: scale(1.2); z-index: 2; }
.kopecek::after { content: attr(data-nazev); position: absolute; right: 48px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; font: 600 .74rem/1 var(--font-t); letter-spacing: .05em; padding: 7px 11px; border-radius: 999px; background: var(--ink); color: #fff; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.kopecek:hover::after, .kopecek:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.kornout-tresen { width: 14px; height: 14px; margin-bottom: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FF8A8F, var(--cervena) 55%, #9E0D13); transform: scale(0); transition: transform .6s cubic-bezier(.3, 1.8, .5, 1); position: relative; z-index: 3; }
.kornout-tresen::before { content: ""; position: absolute; left: 6px; top: -9px; width: 2px; height: 11px; border-radius: 2px; background: #5D7A2A; transform: rotate(18deg); }
.kornout.hotovo .kornout-tresen { transform: scale(1); }
.kornout-kuzel { width: 34px; height: 46px; margin-top: -3px; clip-path: polygon(0 0, 100% 0, 54% 100%, 46% 100%); background: repeating-linear-gradient(48deg, rgba(150, 92, 26, .45) 0 2px, transparent 2px 8px), repeating-linear-gradient(-48deg, rgba(150, 92, 26, .45) 0 2px, transparent 2px 8px) #E7B36A; }

/* =========================================================================
   TINO (modrá): hrdinové s kopečky, příběhy k rozbalení, manifest, magnetky
   ========================================================================= */
.odznak-tino { background: #E8F3FC; color: #1D6FB8; box-shadow: inset 0 0 0 1px rgba(29, 111, 184, .25); }
.odznak-boh { background: #FBF3DF; color: #8F6A1E; box-shadow: inset 0 0 0 1px rgba(143, 106, 30, .3); }
.tino-o, .tino-chute, .tino-pribehy, .tino-manifest, .tino-zazitky { position: relative; padding: 20vh 0 14vh; }
.tino-o-obal, .boh-dvoj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 100px); align-items: start; }
.tino-text > * + *, .boh-text > * + * { margin-top: 16px; }
.tino-text p:not(.stitek):not(.perex):not(.podpis), .boh-text p:not(.stitek):not(.perex):not(.podpis):not(.boh-hesla) { color: var(--ink-2); max-width: 60ch; }
.tino-text .nadpis-2, .boh-text .nadpis-2 { margin-top: 34px; }
.tino-fakt { margin-top: 18px; padding: 16px 20px; border-radius: 16px; background: #E8F3FC; color: var(--ink-2); max-width: 72ch; }
.tino-fakt b { color: #1D6FB8; }
.tino-hrdinove { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); perspective: 1400px; }
.tino-hrdina > a, .tino-hrdina > div { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; height: 100%; padding: 26px 14px 20px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--linka); text-align: center; text-decoration: none; transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.tino-hrdina > a:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1.5px #1D6FB8, 0 26px 40px -30px rgba(29, 111, 184, .55); }
.tino-hrdina b { font: 400 1.18rem/1.15 var(--font-d); }
.tino-hrdina small { font-size: .82rem; color: var(--ink-2); }
.tino-hrdina em { margin-top: 6px; font-style: normal; font-weight: 600; font-size: .8rem; letter-spacing: .06em; color: #1D6FB8; }
/* kopeček na kornoutu, stejná řeč jako boční kornout */
.th-kopec, .boh-kopec { position: relative; z-index: 0; width: 62px; height: 50px; margin-bottom: 46px; border-radius: 50% 50% 42% 42% / 68% 68% 32% 32%; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 42%), var(--c); box-shadow: inset -6px -6px 0 rgba(0, 0, 0, .06); transition: transform .6s cubic-bezier(.3, 1.7, .5, 1); }
.th-kopec::before, .boh-kopec::before { content: ""; position: absolute; z-index: 1; left: -3px; right: -3px; bottom: -5px; height: 12px; background: var(--c); -webkit-mask: radial-gradient(circle at 50% 0, #000 6px, transparent 6.7px) 0 0 / 11.2px 12px repeat-x; mask: radial-gradient(circle at 50% 0, #000 6px, transparent 6.7px) 0 0 / 11.2px 12px repeat-x; filter: brightness(.94); }
.th-kopec::after, .boh-kopec::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 100%; width: 40px; height: 42px; margin: -4px 0 0 -20px; clip-path: polygon(0 0, 100% 0, 54% 100%, 46% 100%); background: repeating-linear-gradient(48deg, rgba(150, 92, 26, .45) 0 2px, transparent 2px 8px), repeating-linear-gradient(-48deg, rgba(150, 92, 26, .45) 0 2px, transparent 2px 8px) #E7B36A; }
.tino-hrdina > a:hover .th-kopec, .boh-chut:hover .boh-kopec { transform: translateY(-6px) rotate(-4deg); }
.tp-seznam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); align-items: start; }
.tino-pribeh:has(.tp[open]) { grid-column: 1 / -1; }
.tp { border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--linka); }
.tp summary { list-style: none; cursor: pointer; display: grid; gap: 6px; padding: 24px 26px; border-radius: var(--r); transition: background .4s var(--ease); }
.tp summary::-webkit-details-marker { display: none; }
.tp summary:hover { background: #FBF8F1; }
.tp summary small { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #1D6FB8; }
.tp summary b { font: 400 clamp(1.4rem, 1.8vw, 1.8rem)/1.1 var(--font-d); }
.tp summary span { color: var(--ink-2); font-size: .95rem; }
.tp summary em { justify-self: start; margin-top: 4px; font-style: normal; font-weight: 600; color: #1D6FB8; }
.tp summary em::before { content: "Číst příběh ↓"; }
.tp[open] summary em::before { content: "Sbalit příběh ↑"; }
.tp .clanek-telo { padding: 0 26px 30px; font-size: 1.02rem; max-width: 72ch; }
.tino-manifest-obal { max-width: 920px; }
.tino-manifest-text { margin-top: 36px; display: grid; gap: 18px; font: 300 clamp(1.12rem, 1.35vw, 1.32rem)/1.6 var(--font-d); color: var(--ink-2); }
.tino-velky { font: italic 400 clamp(1.6rem, 2.6vw, 2.5rem)/1.15 var(--font-d); color: #1D6FB8; }
.tino-2027, .tino-oceneni { position: relative; padding: 20vh 0 14vh; background: var(--papir); }
.t27-obal, .tino-oceneni-obal { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 6vw, 100px); align-items: center; }
.t27-magnet { justify-self: center; width: min(100%, 320px); aspect-ratio: 1; border-radius: 36% 30% 38% 32%; background: radial-gradient(circle at 30% 25%, #9FD2F5, #1D6FB8 72%); color: #fff; display: grid; place-content: center; justify-items: center; gap: 8px; box-shadow: 0 40px 60px -40px rgba(29, 111, 184, .7), inset 0 -10px 0 rgba(0, 0, 0, .08); transform: rotate(-6deg); }
.t27-magnet span { width: 74px; height: 74px; border-radius: 10px; font-size: 0; border: 7px solid #fff; background: repeating-conic-gradient(#103E66 0 25%, #fff 0 50%) 0 0 / 15px 15px; }
.t27-magnet b { font: italic 400 3.2rem/1 var(--font-d); }
.t27-magnet small { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.plaketa-velka { width: min(100%, 300px); justify-self: center; margin: 0; }
/* kolo B: Tino (B40 trofej místo malé plakety, B42 kniha zdarma, B43 hesla v úvodu) */
.tino-trofej { width: min(100%, 360px); justify-self: center; margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 60px -36px rgba(43,27,20,.5); }
.tino-trofej img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.t27-kniha { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 6vw, 100px); align-items: center; border-top: 1px solid var(--linka); padding-top: clamp(32px, 5vw, 64px); margin-top: clamp(12px, 3vw, 32px); }
.t27-kniha .tino-text { grid-column: 2; }
.hesla { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.okno-text .hesla { margin-bottom: clamp(22px, 3.4vh, 34px); }   /* C3: víc místa mezi hesly a tlačítkem 16 chutí */
.hesla li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .88); color: var(--zelena); font-weight: 600; font-size: .86rem; box-shadow: inset 0 0 0 1px rgba(30, 125, 46, .22); }
.hesla li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--zelena); }

/* =========================================================================
   BOHEMIAN (zlatá): pečeť s točenou zmrzlinou, legenda, postup, příchutě z e-shopu
   ========================================================================= */
.uvod-boh { position: relative; padding: calc(var(--hl) + 8vh) 0 13vh; overflow: hidden; background: #FFFDF6 var(--prouzek); }
.uvod-boh-obal { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: center; min-height: calc(100svh - var(--hl) - 21vh); }
.boh-pecet { justify-self: center; width: min(100%, 460px); aspect-ratio: 1; filter: drop-shadow(0 40px 50px rgba(143, 106, 30, .3)); }
.boh-pecet svg { width: 100%; height: 100%; overflow: visible; }
.bp-kruh { fill: #FBF3DF; stroke: #C9A24B; stroke-width: 3; }
.bp-stred { fill: #fff; stroke: rgba(201, 162, 75, .55); stroke-width: 2; stroke-dasharray: 3 7; }
.bp-text { font: 600 20px var(--font-t); letter-spacing: 5px; fill: #8F6A1E; }
.bp-otoc { transform-origin: 200px 200px; animation: boh-toc 48s linear infinite; }
@keyframes boh-toc { to { transform: rotate(360deg); } }
/* B45: skutečné kulaté zlaté logo BOHEMIAN se pomalu točí jako dřív textová pečeť */
.boh-pecet-logo img { width: 100%; height: 100%; border-radius: 50%; animation: boh-toc 60s linear infinite; }
.boh-pecet-logo:hover img { animation-play-state: paused; }
.boh-foto-pribeh { margin-top: clamp(20px, 3vh, 34px); }
.bp-kornout { fill: #E7B36A; }
.bp-mrizka { stroke: rgba(150, 92, 26, .5); stroke-width: 2.4; fill: none; }
.bp-tocena { fill: #FFF6E2; stroke: #C9A24B; stroke-width: 2.5; stroke-linejoin: round; }
.bp-zmrzlina { transition: transform .8s cubic-bezier(.3, 1.6, .5, 1); }
.boh-pecet:hover .bp-zmrzlina { transform: translate(200px, 206px) rotate(-5deg); }
.boh-pribeh, .boh-legenda, .boh-jak, .boh-slozeni, .boh-chute, .boh-kelimky, .boh-kontakt { position: relative; padding: 20vh 0 14vh; }
.uvod-boh .hero-perex a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.boh-legenda { background: #FBF3DF var(--prouzek); }
.boh-legenda-obal { max-width: 880px; }
.boh-legenda-text { margin-top: 30px; display: grid; gap: 18px; font: 300 clamp(1.1rem, 1.35vw, 1.3rem)/1.65 var(--font-d); color: var(--ink-2); }
.boh-legenda-text p:first-child::first-letter { float: left; font: 400 4.6em/.8 var(--font-d); color: #8F6A1E; margin: .06em .1em 0 0; }
.boh-podpis { font-style: italic; color: #8F6A1E; }
.boh-kroky { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.boh-krok { display: grid; gap: 6px; align-content: start; padding: 26px 24px; border-radius: var(--r); background: #FBF3DF; box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .35); }
.boh-krok small { font: italic 300 2.6rem/1 var(--font-d); color: #9A7424; }
.boh-krok b { font: 400 1.5rem/1.1 var(--font-d); }
.boh-krok span { color: var(--ink-2); font-size: .95rem; }
.boh-krok-vysledek { background: #8F6A1E; color: #fff; box-shadow: none; }
.boh-krok-vysledek small, .boh-krok-vysledek span { color: #FBEFD0; }
.boh-pozn { margin-top: 26px; max-width: 72ch; color: var(--ink-2); }
.boh-cisla { display: flex; gap: 40px; margin-top: 30px; }
.boh-cisla b { display: block; font: 300 clamp(3rem, 5vw, 4.6rem)/.9 var(--font-d); color: #8F6A1E; letter-spacing: -.03em; }
.boh-cisla span { color: var(--ink-2); font-size: .92rem; }
.boh-hesla { display: flex; flex-wrap: wrap; gap: 8px; }
.boh-hesla span { padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .45); font-weight: 600; font-size: .88rem; color: #8F6A1E; }
.boh-chute-mriz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.boh-chut { position: relative; display: grid; gap: 6px; align-content: start; padding: 26px 22px 22px; border-radius: var(--r); background: #FFFDF6; box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .3); }
.boh-chut .boh-kopec { width: 50px; height: 40px; margin-bottom: 40px; }
.boh-chut .boh-kopec::after { width: 32px; height: 34px; margin-left: -16px; }
.boh-chut b { font: 400 1.5rem/1.1 var(--font-d); }
.boh-chut small { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #9A7424; }
.boh-chut > span:not(.boh-kopec):not(.boh-misto):not(.boh-obr) { color: var(--ink-2); font-size: .9rem; }
.boh-chut .odkaz { margin-top: 6px; justify-self: start; font-size: .9rem; }
.boh-vzorek { position: relative; padding: 20vh 0 16vh; background: #8F6A1E repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 15px); color: #fff; }
.boh-vzorek .stitek, .boh-vzorek .nadpis em { color: #F6DFA0; }
.boh-vzorek .perex, .boh-vzorek .boh-pozn { color: #FBEFD0; }
.boh-vzorek-obal { max-width: 920px; }
.boh-vzorek-seznam { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0 6px; }
.boh-vzorek-seznam li { padding: 20px 22px; border-radius: 18px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); display: grid; gap: 4px; }
.boh-vzorek-seznam b { font: 400 1.4rem/1.1 var(--font-d); }
.boh-vzorek-seznam span { color: #FBEFD0; font-size: .92rem; }
.boh-vzorek .hero-cta { margin-top: 26px; }
.boh-kontakt { background: var(--papir); }

/* =========================================================================
   GALERIE Z BALÍKU „NOVÝ WEB“: kelímky a nanuky po řadách, pás točené, videa
   ========================================================================= */
.kelimek-vyrez video { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie { display: grid; gap: clamp(24px, 4vh, 40px); margin-top: clamp(40px, 7vh, 72px); }
.galerie-nazev { font: 600 .74rem/1 var(--font-t); letter-spacing: .16em; text-transform: uppercase; color: var(--cervena-t); margin-bottom: 12px; }
.galerie-mriz { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.gk { display: grid; gap: 8px; align-content: start; }
.gk img, .gk video { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; background: #fff; box-shadow: 0 22px 34px -28px rgba(42, 27, 22, .55); transition: transform .8s var(--ease); }
.gk:hover img { transform: translateY(-4px) scale(1.02); }
.gk span { font: 400 1.02rem/1.25 var(--font-d); }
.gk-video { grid-column: span 2; grid-row: span 2; }
.gk-video video { aspect-ratio: 4 / 3; height: auto; }
.galerie-pozn { font-size: .78rem; color: var(--ink-3); }
.galerie-mriz.galerie-mriz-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }     /* kelímky BOHEMIAN: 4 smetanové a 4 sorbety */
.edice-pozn { margin-top: 16px; }
.tocena-pozn { margin-top: 8px; text-align: center; }
.tocena-pas { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.6vw, 22px); margin-top: clamp(30px, 6vh, 56px); }
.tocena-pas li { display: grid; justify-items: center; gap: 8px; width: clamp(92px, 9vw, 128px); text-align: center; }
.tocena-pas img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 18px 30px -20px rgba(42, 27, 22, .5); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.tocena-pas li:hover img { transform: translateY(-6px) rotate(-4deg); }
.tocena-pas span { font-size: .84rem; font-weight: 600; line-height: 1.2; }

/* Tino: kelímky u hrdinů (16 kusů, 4 × 4, na telefonu po dvou), ilustrace u příběhů */
.tino-hrdina .th-foto { width: 100%; aspect-ratio: 640 / 585; object-fit: cover; border-radius: 14px; margin-bottom: 10px; transition: transform .8s var(--ease); }
.tino-hrdina > a:hover .th-foto { transform: scale(1.03); }
.tino-hrdina > a, .tino-hrdina > div { padding: 12px 12px 18px; }
/* 16 ilustrací k příběhům je na výšku (Tomáš, 8. 11. 2026): obrázek vlevo, text vpravo, nic se neořezává */
.tp summary:has(> .tp-foto) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(16px, 1.8vw, 26px); align-items: center; }
.tp[open] summary:has(> .tp-foto) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.tp-foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; transition: transform .8s var(--ease); }
.tp summary:hover .tp-foto { transform: scale(1.02); }
.tp summary .tp-text { display: grid; gap: 6px; align-content: center; color: inherit; font-size: inherit; }
.tino-sirka { grid-column: 1 / -1; position: relative; margin-top: clamp(20px, 4vh, 40px); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 70px -50px rgba(29, 111, 184, .55); }
.tino-sirka img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.tino-sirka figcaption { position: absolute; right: 14px; bottom: 12px; font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ink-2); }
.tino-sirka-nahore { margin: 0 0 clamp(26px, 5vh, 48px); }
.tino-sirka.tino-sirka-cela img { aspect-ratio: auto 1500 / 938; height: auto; }   /* C4, C7, C9: celé ilustrace od Tomáše, bez ořezu na 21 : 9 */
#o-tinovi .tino-sirka-cela img { aspect-ratio: auto 16 / 9; }
@media (max-width: 700px) { #o-tinovi .tino-sirka-cela img { aspect-ratio: auto 4 / 3; } }

/* BOHEMIAN: fotky příchutí a skupinové fotky */
.boh-chut-foto { padding-top: 12px; }
.boh-foto-chut { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; margin-bottom: 10px; transition: transform .8s var(--ease); }
.boh-chut:hover .boh-foto-chut { transform: scale(1.02); }
.boh-misto { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; margin-bottom: 10px; background: #FBF0D9; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 55%), linear-gradient(165deg, color-mix(in srgb, var(--c) 30%, #FFF8EA), color-mix(in srgb, var(--c) 62%, #F1DDB2)); }
.boh-chut .boh-misto .boh-kopec { margin: 0; scale: 1.9; translate: 0 -26px; }
.boh-text > .boh-hesla { margin-top: 20px; }
.boh-text > .boh-hesla + p { margin-top: 26px; }
.boh-sirka, .boh-foto { position: relative; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 70px -50px rgba(143, 106, 30, .55); }
.boh-sirka { margin-bottom: clamp(26px, 5vh, 48px); }
.boh-sirka img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 50%; }
.boh-sirka figcaption, .boh-foto figcaption { position: absolute; right: 14px; bottom: 12px; font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ink-2); }
.boh-foto { margin-top: 30px; }
.boh-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Tino v horním menu s modrou tečkou značky */
.menu a[href="/tino/"]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #2F8FD8; vertical-align: .12em; }

/* popisky ilustračních fotek, jednou třídou bez-pozn na body se dají schovat */
.bez-pozn .pozn-ai { display: none !important; }

/* =========================================================================
   ČLÁNKY: archiv a článek
   ========================================================================= */
.clanky-uvod { position: relative; padding: calc(var(--hl) + 12vh) 0 8vh; }
.clanky-uvod .perex { margin: 22px 0 30px; }
.clanky-filtr { margin: 0; gap: 8px; }
.chip small { font-size: .74rem; opacity: .55; margin-left: 3px; }
.clanky-seznam { position: relative; padding: 9vh 0 16vh; background: var(--papir); }
.cl-mriz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.cl[hidden] { display: none; }
.cl a { display: grid; gap: 10px; align-content: start; height: 100%; padding: 24px 24px 26px; border-radius: var(--r); background: var(--krem); box-shadow: inset 0 0 0 1px var(--linka); text-decoration: none; transition: transform .6s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease); }
.cl a:hover { transform: translateY(-5px); background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), 0 30px 50px -36px rgba(42, 27, 22, .45); }
.cl-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); }
.cl-meta span { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cervena) 10%, transparent); color: var(--cervena-t); }
.cl-nazev { font: 400 clamp(1.25rem, 1.5vw, 1.5rem)/1.2 var(--font-d); letter-spacing: -.01em; text-wrap: balance; }
.cl-perex { font-size: .92rem; color: var(--ink-2); line-height: 1.55; }
.clanek { position: relative; padding: calc(var(--hl) + 10vh) 0 16vh; background: var(--papir); }
.clanek-obal { max-width: 780px; }
.clanek-zpet { margin-bottom: 28px; }
.clanek .cl-meta { margin-bottom: 16px; }
.clanek h1 { margin-bottom: 30px; }
.clanek-telo { font-size: clamp(1.02rem, .3vw + .96rem, 1.14rem); line-height: 1.7; color: var(--ink-2); }
.clanek-telo > * + * { margin-top: 1em; }
.clanek-telo h2, .clanek-telo h3 { color: var(--ink); font-family: var(--font-d); font-weight: 400; line-height: 1.2; margin-top: 1.8em; text-wrap: balance; }
.clanek-telo h2 { font-size: 1.7rem; }
.clanek-telo h3 { font-size: 1.35rem; }
.clanek-telo strong { color: var(--ink); font-weight: 600; }
.clanek-telo ul, .clanek-telo ol { padding-left: 1.3em; }
.clanek-telo ul { list-style: disc; }
.clanek-telo ol { list-style: decimal; }
.clanek-telo li + li { margin-top: .4em; }
.clanek-telo a { color: var(--cervena-t); }
.clanek-telo blockquote { padding-left: 1.2em; border-left: 3px solid var(--cervena); font: italic 300 1.3rem/1.4 var(--font-d); color: var(--ink); }
.clanek-perex { font: 300 clamp(1.3rem, 1.6vw, 1.6rem)/1.45 var(--font-d); color: var(--ink); }
.clanek-dalsi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--linka); }
.clanek-dalsi a { display: grid; gap: 4px; align-content: start; text-decoration: none; padding: 18px 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linka); transition: box-shadow .4s var(--ease); }
.clanek-dalsi a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.clanek-dalsi a:last-child { text-align: right; }
.clanek-dalsi small { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cervena-t); }
.clanek-dalsi b { font: 400 1.05rem/1.3 var(--font-d); }

/* =========================================================================
   PODSTRÁNKY
   ========================================================================= */
/* pastely chutí jako podklady sekcí */
.pastel-jahoda { background: var(--jahoda) var(--prouzek); }
.pastel-vanilka { background: var(--vanilka) var(--prouzek); }
.pastel-malina { background: var(--malina) var(--prouzek); }
.pastel-mango { background: var(--mango) var(--prouzek); }
.pastel-pistacie { background: var(--pistacie) var(--prouzek); }
.pastel-mata { background: var(--mata) var(--prouzek); }
.pastel-nebe { background: var(--nebe) var(--prouzek); }
.pastel-krem { background: var(--krem-2) var(--prouzek); }
.pastel-bila { background: var(--papir); }

/* úvod sortimentu: vějíř čtyř edic */
.uvod-sort { position: relative; padding: calc(var(--hl) + 8vh) 0 13vh; overflow: hidden; }
.uvod-sort-obal { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 80px); align-items: center; min-height: calc(100svh - var(--hl) - 21vh); }
.vejir { --roz: 1; position: relative; height: min(66vh, 600px); }
.vj { --v: 1; position: absolute; left: 50%; top: 50%; width: min(16vw, 250px); aspect-ratio: 900 / 1205; border-radius: 18px; overflow: hidden; opacity: var(--v); box-shadow: 0 34px 50px -30px rgba(42, 27, 22, .55), 0 0 0 5px #fff; transform: translate(-50%, -50%) translate(calc(var(--x) * var(--roz)), calc(var(--y) + (1 - var(--v)) * 40%)) rotate(calc(var(--r) * var(--roz))); transition: box-shadow .8s var(--ease); }
.vj img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.vj:hover { z-index: 5; box-shadow: 0 44px 60px -30px rgba(42, 27, 22, .65), 0 0 0 5px #fff; }
.vj:hover img { transform: scale(1.06); }

.edice { position: relative; padding: 18vh 0 12vh; }
.edice-rada { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); perspective: 1400px; }
.ed { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; background: var(--papir); box-shadow: 0 30px 60px -44px rgba(42, 27, 22, .5), inset 0 0 0 1px var(--linka); transform-style: preserve-3d; }
.ed-in { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; color: inherit; }
.ed-foto { display: block; aspect-ratio: 3 / 3.3; overflow: hidden; }
.ed-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ed:hover .ed-foto img { transform: scale(1.05); }
.ed-text { display: grid; gap: 6px; align-content: start; padding: 18px 20px 22px; }
.ed-text b { font: 400 1.9rem/1 var(--font-d); }
.ed-text > span { font-size: .93rem; color: var(--ink-2); max-width: 30ch; }
.ed-text .odkaz { margin-top: 6px; justify-self: start; }
.ed-tino .ed-text b, .ed-tino .ed-text .odkaz { color: #1D6FB8; }
.podoba-produkt { position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 54%, #fff 0 50%, rgba(255, 255, 255, 0) 50.5%); }
.podoba-produkt img { width: 84%; filter: drop-shadow(0 30px 30px rgba(42, 27, 22, .22)); }
.podoba { position: relative; padding: 12vh 0; }
.podoba-obal { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 6vw, 110px); align-items: center; }
.podoba-obracene .podoba-foto { order: 2; }
.podoba-foto { aspect-ratio: 4 / 5; width: min(100%, 470px); justify-self: center; }
.podoba-foto figcaption { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-size: .75rem; color: var(--papir); text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.podoba-c { font: italic 300 clamp(3rem, 6vw, 5.6rem)/.9 var(--font-d); color: var(--cervena-t); margin-bottom: 10px; }
.podoba-text .nadpis-2 { margin-bottom: 18px; }
.podoba-text > p { color: var(--ink-2); max-width: 56ch; margin-bottom: 24px; }
.parametry-svetle { display: grid; border-top: 1px solid var(--linka); margin-bottom: 26px; }
.parametry-svetle div { display: grid; grid-template-columns: 10em 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linka); }
.parametry-svetle dt { font-size: .86rem; color: var(--ink-3); padding-top: 2px; }
.parametry-svetle dd { font-weight: 500; }
.fajfky { display: grid; gap: 10px; margin-bottom: 22px; }
.fajfky li { position: relative; padding-left: 30px; }
.fajfky li::before { content: ""; position: absolute; left: 0; top: .52em; width: 16px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); color: #FFD3E1; }
.fajfky-tmave li { color: var(--ink-2); }
.fajfky-tmave li::before { color: var(--cervena-t); }
.smesi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: clamp(40px, 8vh, 80px); }
.smes { padding: clamp(22px, 2.6vw, 38px); border-radius: var(--r); background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px var(--linka); }
.smes-stitek { font: 600 .74rem/1 var(--font-t); letter-spacing: .16em; text-transform: uppercase; color: var(--cervena-t); margin-bottom: 10px; }
.smes h3 { font: 400 clamp(1.6rem, 2.2vw, 2.2rem)/1.08 var(--font-d); margin-bottom: 14px; }
.smes h3 em { font-style: italic; font-weight: 300; color: var(--cervena-t); }
.smes > p:not(.smes-stitek) { color: var(--ink-2); margin-bottom: 14px; max-width: 60ch; }
.smes > p a { color: var(--cervena-t); font-weight: 600; }
.smes .parametry-svetle { margin: 6px 0 20px; }
.na-zakazku { position: relative; padding: 14vh 0 16vh; background: var(--papir); }
.zakazka-obal { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 6vw, 100px); align-items: start; }
.zakazka-text p { color: var(--ink-2); margin-bottom: 16px; max-width: 58ch; }
.zakazka-text a:not(.tl) { color: var(--cervena-t); font-weight: 600; }
.zakazka-text .tl { margin-top: 12px; }

/* vitrína chutí */
.chute { position: relative; padding: 16vh 0 14vh; }
.chute-hlava { display: grid; gap: 14px; margin-bottom: 34px; }
.filtry { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 30px; }
.filtr-skupina { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--linka); background: var(--papir); cursor: pointer; font-weight: 500; font-size: .92rem; transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.chip:hover { border-color: var(--ink); transform: translateY(-2px); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--papir); }
/* hledání ve vitríně chutí a v archivu článků */
.hledani { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--linka); background: var(--papir); flex: 1 1 240px; max-width: 330px; cursor: text; transition: border-color .3s var(--ease); }
.hledani:focus-within { border-color: var(--ink); }
.hledani svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .55; }
.hledani input { flex: 1; min-width: 0; padding: 9px 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; outline: none; }
.hledani input::placeholder { color: var(--ink-3); opacity: 1; }
.clanky-hledani { margin-top: 18px; }
.cl-prazdno, .vitrina-prazdno { list-style: none; }
.cl-prazdno { grid-column: 1 / -1; padding: 28px 0; color: var(--ink-3); }
.vitrina { display: grid; grid-template-columns: 1fr minmax(300px, 400px); gap: clamp(24px, 4vw, 60px); align-items: start; }
.vitrina-mriz { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 9px; padding: 12px; border-radius: var(--r); background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.2)); box-shadow: inset 0 0 0 1px var(--linka), 0 40px 60px -50px rgba(43, 27, 20, .5); }
.vana { width: 100%; text-align: left; border: 0; background: var(--papir); border-radius: 14px; padding: 10px; cursor: pointer; display: grid; gap: 10px; transition: transform .45s var(--ease), box-shadow .45s var(--ease); box-shadow: inset 0 0 0 1px var(--linka); }
.vana:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--ink), 0 16px 24px -18px rgba(43, 27, 20, .5); }
.vana[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--cervena-t), 0 16px 24px -18px rgba(43, 27, 20, .5); }
.vana-povrch { height: 54px; border-radius: 9px; background-color: var(--c); background-image: repeating-radial-gradient(ellipse 140% 80% at 30% 120%, rgba(255,255,255,.18) 0 3px, rgba(0,0,0,.05) 4px 7px), linear-gradient(180deg, rgba(255,255,255,.28), rgba(0,0,0,.08)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), inset 0 0 0 4px #D9D6D0, inset 0 0 0 5px #B9B5AE; }
.vana-nazev { font: 400 1rem/1.18 var(--font-d); min-height: 2.36em; }
.vitrina-mriz li[hidden] { display: none; }
.vitrina-prazdno { grid-column: 1 / -1; padding: 30px 10px; text-align: center; color: var(--ink-2); font: 400 1.2rem/1.3 var(--font-d); }
.detail { position: sticky; top: calc(var(--hl) + 20px); display: grid; gap: 8px; }
.detail-foto { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--krem-2); margin-bottom: 14px; box-shadow: 0 30px 60px -36px rgba(43, 27, 20, .55); }
.detail-foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease); }
.detail-foto.bez img { opacity: 0; }
.detail-vana { position: absolute; inset: 14% 10%; border-radius: 18px; background-color: var(--c, #ddd); background-image: repeating-radial-gradient(ellipse 120% 70% at 20% 110%, rgba(255,255,255,.2) 0 6px, rgba(0,0,0,.06) 7px 13px), linear-gradient(180deg, rgba(255,255,255,.3), rgba(0,0,0,.1)); box-shadow: inset 0 0 0 10px #D9D6D0, inset 0 0 0 12px #B9B5AE, 0 30px 40px -20px rgba(43,27,20,.4); opacity: 0; transition: opacity .5s var(--ease), background-color .6s var(--ease); }
.detail-foto.bez .detail-vana { opacity: 1; }
.detail-rada { font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cervena-t); }
.detail-nazev { font: 400 clamp(1.8rem, 2.6vw, 2.6rem)/1.05 var(--font-d); letter-spacing: -.015em; }
.detail-popis { color: var(--ink-2); }
.detail-popis:empty { display: none; }
.detail-formaty { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.detail-formaty li { font-size: .85rem; padding: 5px 12px; border-radius: 999px; background: var(--papir); box-shadow: inset 0 0 0 1px var(--linka); }
.detail-formaty li.ne-f { opacity: .38; text-decoration: line-through; }
.detail-pozn { font-size: .78rem; color: var(--ink-3); margin-top: 4px; }

/* pro podniky */
.modely { position: relative; padding: 18vh 0 12vh; }
.modely-karty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.modely-karty a { display: grid; gap: 10px; align-content: start; min-height: 260px; padding: 28px; border-radius: var(--r); background: var(--papir); box-shadow: inset 0 0 0 1px var(--linka); text-decoration: none; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.modely-karty a:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--ink), 0 30px 50px -36px rgba(43,27,20,.5); }
.modely-karty small { font: italic 300 2.6rem/1 var(--font-d); color: var(--cervena-t); }
.modely-karty b { font: 400 1.8rem/1.05 var(--font-d); }
.modely-karty span { color: var(--ink-2); }
.podniky { position: relative; color: var(--papir); padding: 24vh 0 16vh; background: var(--cervena-pas) linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px) 0 0/15px 100%; }
.model { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 80px); padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid rgba(255,255,255,.22); }
.model:first-child { border-top: 0; padding-top: 0; }
.model-znacka { font: italic 300 1.2rem/1 var(--font-d); color: #FFD3E1; margin-bottom: 12px; }
.model-h { font: 400 clamp(1.8rem, 3vw, 3rem)/1.06 var(--font-d); letter-spacing: -.015em; margin-bottom: 22px; max-width: 22ch; }
.model-text > p { color: rgba(251, 247, 239, .86); max-width: 56ch; margin-bottom: 16px; }
.model-pozn { font-size: .93rem; padding: 14px 18px; border-radius: 14px; background: rgba(0,0,0,.14); }
.model .tl { margin-top: 10px; }
.parametry { display: grid; align-self: start; border-radius: var(--r); background: rgba(0,0,0,.14); padding: 8px 24px; }
.parametry div { display: grid; grid-template-columns: 9.5em 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.parametry div:last-child { border: 0; }
.parametry dt { font-size: .85rem; color: rgba(251,247,239,.7); }
.parametry dd { font-weight: 500; }
.parametry-radek { background: transparent; padding: 0; margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.parametry-radek div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.kroky-point { counter-reset: k; display: grid; gap: 12px; margin-bottom: 8px; }
.kroky-point li { counter-increment: k; position: relative; padding-left: 44px; color: rgba(251,247,239,.9); }
.kroky-point li::before { content: counter(k); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 400 1rem/1 var(--font-d); background: var(--papir); color: var(--cervena-pas); }
.kalkulacka { align-self: start; background: var(--papir); color: var(--ink); border-radius: var(--r); padding: clamp(22px, 3vw, 36px); box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }
.kalk-titul { font: 400 1.6rem/1.1 var(--font-d); margin-bottom: 18px; }
.kalk-uvod { font-size: .9rem; color: var(--ink-2); margin: -8px 0 8px; }
.kalk-pole { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; font-size: .95rem; margin-top: 10px; }
.kalk-pole output { font: 400 1.5rem/1 var(--font-d); color: var(--cervena-t); font-variant-numeric: tabular-nums; }
.kalkulacka input[type=range] { width: 100%; margin: 12px 0 8px; accent-color: var(--cervena-t); height: 28px; cursor: pointer; }
.kalk-vysledek { margin-top: 14px; border-top: 1px solid var(--linka); }
.kalk-vysledek div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linka); font-size: .93rem; }
.kalk-vysledek dd { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.kalk-vysledek .kalk-zbyva { border: 0; padding-top: 14px; align-items: baseline; }
.kalk-zbyva dt { font-weight: 600; }
.kalk-zbyva dd { font: 400 2rem/1 var(--font-d); color: var(--cervena-t); }
.kalk-pozn { font-size: .76rem; color: var(--ink-3); margin: 12px 0 18px; line-height: 1.45; }
.model-bok { display: grid; gap: 18px; align-content: start; }
.model-foto { position: relative; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .5); }
.model-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.model-foto figcaption, .st-foto figcaption { position: absolute; right: 12px; bottom: 10px; font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ink-2); }

/* GELADORO Station: fotka drží na místě, text jede kolem */
.station { position: relative; padding: 22vh 0 16vh; }
.st-obal { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.st-bok { position: sticky; top: calc(var(--hl) + 4vh); }
.st-foto { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 4; max-height: calc(100svh - var(--hl) - 10vh); margin: 0 auto; box-shadow: 0 50px 80px -50px rgba(20, 60, 100, .55); }
.st-foto img { width: 100%; height: 100%; object-fit: cover; }
.st-text { display: grid; gap: clamp(50px, 9vh, 100px); padding-bottom: 4vh; }
.st-blok > * + * { margin-top: 16px; }
.st-blok p { color: var(--ink-2); max-width: 60ch; }
.st-blok p b { color: var(--ink); }
.st-uvod .nadpis { max-width: 16ch; }
.st-citat { font: italic 300 clamp(1.25rem, 1.7vw, 1.6rem)/1.35 var(--font-d); color: var(--ink) !important; padding-left: 18px; border-left: 3px solid var(--cervena-t); }
.st-modely { display: grid; gap: 12px; }
.st-model { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; padding: 22px 24px; border-radius: var(--r); background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px var(--linka); }
.st-model small { grid-row: span 3; font: italic 300 2.4rem/1 var(--font-d); color: var(--cervena-t); }
.st-model b { font: 400 1.5rem/1.15 var(--font-d); }
.st-model i { font-style: normal; font-weight: 600; font-size: .82rem; letter-spacing: .04em; color: var(--cervena-t); }
.st-model span { color: var(--ink-2); font-size: .96rem; }
.st-vyzva { padding: clamp(24px, 3vw, 44px); border-radius: 28px; background: #fff; box-shadow: 0 40px 70px -50px rgba(20, 60, 100, .5); }
.st-vyzva .tl { margin-top: 22px; }

.velkoobchod-sekce { position: relative; padding: 22vh 0 16vh; }
.vo-obal { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 6vw, 100px); align-items: center; }
.vo-text .perex { margin: 18px 0 28px; }
.vo-dukaz { padding: clamp(24px, 3vw, 44px); border-radius: var(--r); background: var(--papir); box-shadow: inset 0 0 0 1px var(--linka); }
.dukaz-velky { font: italic 300 clamp(2rem, 3.4vw, 3.4rem)/1.04 var(--font-d); color: var(--cervena-t); margin-bottom: 14px; }
.vo-dukaz p:last-child { color: var(--ink-2); }

/* zážitky: přehled dlaždic a detail každého zážitku (široká fotka, vlevo souhrn, vpravo celý text) */
.zaz-prehled { position: relative; padding: 18vh 0 14vh; }
.zaz-dlazdice { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.zaz-dlazdice .kk { width: auto; }
.zaz-dlazdice .kk-text { padding: 14px 16px 18px; }
.zaz-dlazdice .kk-text b { font-size: clamp(1.25rem, 1.5vw, 1.6rem); }
.zaz-dlazdice .kk a { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.zaz-dlazdice .kk a:hover { transform: translateY(-6px); }
.zazitek-sekce.pastel-vanilka, .zazitek-sekce.pastel-nebe, .zazitek-sekce.pastel-krem, .zazitek-sekce.pastel-mata, .zazitek-sekce.pastel-jahoda { padding: 20vh 0 14vh; }
.zs-foto-siroka { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 21 / 9; margin-bottom: clamp(30px, 6vh, 64px); box-shadow: 0 50px 80px -56px rgba(42, 27, 22, .55); }
.zs-foto-siroka img { width: 100%; height: 100%; object-fit: cover; }
.zs-foto-siroka figcaption { position: absolute; right: 14px; bottom: 12px; font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ink-2); }
.zs-dvoj { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 6vw, 100px); align-items: start; }
.zs-bok { position: sticky; top: calc(var(--hl) + 4vh); display: grid; gap: 12px; justify-items: start; }
.zazitek-kde { font-size: .88rem; color: var(--ink-3); }
.zazitek-kde a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.zazitek-kde a:hover { color: var(--ink); }
.zs-telo { max-width: 66ch; }
.zs-telo s { opacity: .55; }
.zazitky-seznam { position: relative; padding: 8vh 0; }
.zazitek-sekce { padding: 9vh 0; }
.zs-obal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 100px); align-items: center; }
.zs-obracene .zs-foto { order: 2; }
.zs-foto { aspect-ratio: 4 / 5; width: min(100%, 500px); justify-self: center; }
.zs-vyrez { border-radius: var(--r); background: var(--b); display: grid; place-items: center; overflow: hidden; }
.zs-vyrez img { width: 78%; height: auto; filter: drop-shadow(0 30px 30px rgba(43, 27, 20, .25)); }
.zazitek-pro { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cervena-t); margin-bottom: 12px; }
.zs-text .nadpis-2 { margin-bottom: 12px; }
.zazitek-lead { font: 300 clamp(1.2rem, 1.5vw, 1.5rem)/1.35 var(--font-d); margin-bottom: 20px; max-width: 34ch; }
.zazitek-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.zazitek-meta span { padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linka); font-size: .9rem; font-weight: 500; }
.zazitek-meta .cena { background: var(--ink); color: var(--papir); box-shadow: none; font-weight: 600; }
.zazitek-meta .cena s { opacity: .55; font-weight: 400; margin-right: 6px; }
.zazitek-pozn { font-size: .84rem; color: var(--ink-3); margin-bottom: 16px; max-width: 52ch; }
.misto { position: relative; padding: 12vh 0 14vh; background: var(--papir); }
.misto-obal { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 6vw, 100px); align-items: center; }
.misto-foto { border-radius: var(--r); overflow: hidden; }
.misto-foto img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.misto-text p:not(.stitek) { color: var(--ink-2); margin-top: 16px; }
.misto-text a { color: var(--cervena-t); font-weight: 600; }

/* o nás */
.pribeh { position: relative; padding: 18vh 0 16vh; }
.pribeh-obal { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 6vw, 100px); align-items: center; }
.pribeh-text p:not(.stitek):not(.perex) { color: var(--ink-2); margin-top: 16px; max-width: 58ch; }
.pribeh-text .perex { margin-top: 18px; }
.pribeh-fotky { position: relative; min-height: 640px; }
.pf { position: absolute; width: 62%; aspect-ratio: 4 / 5; }
.pf-1 { left: 0; top: 0; }
.pf-2 { right: 0; bottom: 0; width: 52%; }
.pf figcaption { position: absolute; left: 16%; top: 14px; font-size: .7rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ink-2); }
.oceneni { position: relative; padding: 24vh 0 16vh; background: var(--papir); }
.oceneni-obal { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(28px, 6vw, 100px); align-items: center; }
.oceneni-foto { border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 60px -36px rgba(43,27,20,.5); }
.oceneni-foto img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.oceneni-text .perex { margin: 18px 0 10px; }
.media { margin-top: 28px; display: grid; }
.media li { padding: 14px 0; border-top: 1px solid var(--linka); font-size: .98rem; color: var(--ink-2); }
.media b { color: var(--ink); font-weight: 600; }
.projekty { position: relative; padding: 14vh 0 16vh; }
.projekty-karty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.pk-karta { padding: clamp(24px, 3vw, 44px); border-radius: var(--r); background: var(--papir); box-shadow: inset 0 0 0 1px var(--linka); display: grid; gap: 12px; align-content: start; }
.pk-karta small { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cervena-t); }
.pk-karta h3 { font: 400 clamp(2rem, 3vw, 2.8rem)/1 var(--font-d); }
.pk-karta p { color: var(--ink-2); }
.pk-karta .odkaz { justify-self: start; margin-top: 6px; }

/* kontakt */
.kontakt-uvod { position: relative; padding: calc(var(--hl) + 10vh) 0 14vh; }
.kontakt-obal { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.kontakt-text .perex { margin: 24px 0 30px; }
.kontakty { display: grid; border-top: 1px solid var(--linka); }
.kontakty li { display: grid; grid-template-columns: 11em 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linka); }
.kontakty span { font-size: .86rem; color: var(--ink-3); }
.kontakty a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.kontakty a:hover { color: var(--cervena-t); }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: clamp(22px, 3vw, 40px); border-radius: calc(var(--r) + 4px); background: var(--papir); box-shadow: inset 0 0 0 1px var(--linka), 0 40px 80px -50px rgba(43, 27, 20, .55); }
.pole { display: grid; gap: 6px; font-weight: 500; font-size: .92rem; }
.pole small { font-weight: 400; color: var(--ink-3); }
.pole-cele { grid-column: 1 / -1; }
.pole input, .pole select, .pole textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--linka); background: var(--krem); font-size: 1rem; transition: border-color .3s, background .3s; }
.pole textarea { resize: vertical; min-height: 120px; }
.pole input:focus, .pole select:focus, .pole textarea:focus { outline: none; border-color: var(--cervena-t); background: #fff; }
.formular-gdpr { grid-column: 1 / -1; font-size: .82rem; color: var(--ink-3); }
.formular-gdpr a { color: inherit; }
.formular .tl { grid-column: 1 / -1; justify-self: start; }
.kontakt-vyrobna { position: relative; padding: 0 0 16vh; }
.kv-foto { border-radius: var(--r); overflow: hidden; }
.kv-foto img { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }
.kv-firmy { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; color: var(--ink-2); font-size: .95rem; }
.kv-firmy b { color: var(--ink); display: block; }

/* jednoduché stránky */
.jednoducha { position: relative; min-height: 86svh; padding: calc(var(--hl) + 12vh) 0 16vh; overflow: hidden; }
.jednoducha .obal { max-width: 820px; margin-left: max(var(--okraj), 50% - 660px); }
.jednoducha .perex { margin: 20px 0; }
.jednoducha .perex a { color: var(--cervena-t); }
.jednoducha .tl { margin-top: 14px; }
.jednoducha-kelimek { position: absolute; right: calc(var(--okraj) - 4vw); bottom: 4vh; width: clamp(140px, 18vw, 280px); transform: rotate(8deg); filter: drop-shadow(0 30px 30px rgba(43,27,20,.25)); }
.texty h2 { font: 400 1.5rem/1.2 var(--font-d); margin: 34px 0 10px; }
.texty p, .texty li { color: var(--ink-2); margin-bottom: 10px; max-width: 64ch; }
.texty ul { list-style: disc; padding-left: 1.2em; }
.texty a:not(.tl) { color: var(--cervena-t); }   /* tlačítko v textu (Zpět na úvod) si nechá bílé písmo */

/* ---------- FAQ ---------- */
.faq { position: relative; padding: 14vh 0; background: var(--papir); }
.faq-obal { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 80px); }
.faq-seznam { border-top: 1px solid var(--linka); }
.faq details { border-bottom: 1px solid var(--linka); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 400 clamp(1.15rem, 1.5vw, 1.45rem)/1.25 var(--font-d); transition: color .4s var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linka); background: linear-gradient(var(--ink), var(--ink)) center/12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1.5px 12px no-repeat; transition: transform .5s var(--ease), background-color .4s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--krem-2); }
.faq summary:hover { color: var(--cervena-t); }
.faq-telo { overflow: hidden; }
.faq-telo p, .faq details > p { padding: 0 50px 24px 0; max-width: 62ch; color: var(--ink-2); }
.faq a { color: var(--cervena-t); }

/* ---------- patička ---------- */
.paticka { position: relative; background: var(--cervena-pas) repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 15px); color: #fff; padding: 24vh 0 calc(40px + var(--demo-h, 0px)); }
.paticka-obal { display: grid; grid-template-columns: 170px 1fr 1fr 1.3fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.paticka-logo img { width: 160px; }
.paticka-znacky { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.paticka-znacky a { font-size: .78rem; font-weight: 600; letter-spacing: .06em; padding: 5px 11px; border-radius: 999px; text-decoration: none; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); transition: background .4s var(--ease), color .4s var(--ease); }
.paticka-znacky a:hover { background: #fff; color: var(--cervena-pas); }
.paticka-nav { display: grid; gap: 6px; }
.paticka-nav a { text-decoration: none; font: 400 1.25rem/1.25 var(--font-d); }
.paticka-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.paticka-kontakt { display: grid; gap: 12px; font-size: .92rem; }
.paticka-kontakt b, .paticka-firmy b { color: #fff; display: block; font-weight: 600; }
.paticka-kontakt a { color: #FFE3EC; text-decoration: none; }
.paticka-kontakt a:hover { color: #fff; text-decoration: underline; }
.paticka-firmy { display: grid; gap: 10px; font-size: .9rem; color: #FFD6E2; }
.paticka-heslo { margin-top: 14px; font: italic 300 clamp(1.3rem, 1.7vw, 1.65rem)/1.25 var(--font-d); color: #fff; max-width: 20ch; }   /* B25 a další */
.paticka-spodek { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: .84rem; color: #FFD6E2; }
.paticka-spodek a { color: inherit; }

.lista { display: none; }

/* ---------- animace jen s JS ---------- */
html.anim .odhal { opacity: 0; transform: translateY(22px); }
html.anim .odhal.ukazano { opacity: 1; transform: none; }
html.anim .slovo > span { transform: translateY(108%); }
html.anim .rozdel.ukazano .slovo > span { transform: none; }
html.anim.nacteno :is(.okno, .uvod-hned, .kontakt-uvod, .clanky-uvod) .slovo > span { transition: transform 1.2s var(--ease); transform: none; }
html.anim.nacteno :is(.okno, .uvod-hned, .kontakt-uvod) .radek-2 .slovo > span { transition-delay: .1s; }
html.anim.nacteno :is(.okno, .uvod-hned, .kontakt-uvod) .radek-3 .slovo > span { transition-delay: .2s; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  :root { --hl: 76px; --pas-z: 0px; }
  .znacky-pas { display: none; }
  html.anim .kornout { display: none; }
  .menu { display: none; }
  .burger { display: block; }
  .hlavicka .tl-mini { margin-left: auto; }
  .hlavicka .burger { margin-left: 0; }
  .onas-obal { grid-template-columns: 1fr 1fr; }
  .onas-trofej { grid-column: 2; display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; }
  .vitrina { grid-template-columns: 1fr 320px; }
  .flipy, .edice-rada { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-mriz, .modely-karty, .boh-kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boh-chute-mriz, .zaz-dlazdice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galerie-mriz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galerie-mriz.galerie-mriz-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paticka-obal { grid-template-columns: 150px 1fr 1fr; }
  .paticka-firmy { grid-column: 1 / -1; }
}

/* ---------- mobil ---------- */
@media (max-width: 899px) {
  :root { --hl: 64px; }
  .logo { width: 92px; }
  .logo-tino { width: 78px; margin-left: -8px; }
  .hlavicka .tl-mini { display: none; }
  .hlavicka .burger { margin-left: auto; }
  .okno-scena { display: block; min-height: 0; padding: calc(var(--hl) + 10px) 0 64px; }
  .okno-foto, .okno-cil { position: relative; top: auto; right: auto; transform: none; width: min(74%, 330px); margin: 0 auto 26px; display: block; }
  .okno-cil { display: none; }
  .okno-text { max-width: none; }
  .okno-popisek, .dolu { display: none; }
  .okno-ziva .okno-scena { height: auto; }
  .okno-ziva .okno-foto { position: relative; width: 100%; height: 56svh; margin: 0 0 26px; }
  .okno-ziva .okno-stin { display: none; }
  .hero-nadpis .radek-2 { padding-left: .5em; }
  .hero-cta .tl { flex: 1 1 200px; }
  .manifest-pin { min-height: 0; padding: 18vh 0 10vh; }
  .manifest-obal { grid-template-columns: minmax(0, 1fr); }
  .tani-okno { justify-self: center; width: min(70%, 300px); order: -1; }
  .plaketa { width: 84px; margin-bottom: 14px; }
  .ocen { gap: 12px; margin-bottom: 14px; }
  .ocen-text { max-width: 142px; font-size: .66rem; letter-spacing: .04em; }
  .ocen-text b { white-space: normal; font-size: 1.05rem; }
  .okno-pecet { width: 88px; right: calc(var(--okraj) + 6px); bottom: auto; top: calc(var(--hl) + 56svh - 62px); }
  html.anim .film-hlava { top: calc(var(--hl) + 10px); }
  html.anim .film-hlava .nadpis { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .cl-mriz, .clanek-dalsi { grid-template-columns: minmax(0, 1fr); }
  /* kolo B (mobil, Tomáš ve WhatsAppu na iPhonu): text kroku vždy až pod fotkou. Dřív byl přišpendlený ke spodku obrazovky
     a na nižších telefonech nebo s lištami vestavěného prohlížeče vyjel přes fotku. Výška fotky je pevná, text začíná pod ní. */
  .film { --film-foto-h: min(30svh, calc((100vw - 2 * var(--okraj)) * .75)); }
  html.anim .film-platno { left: var(--okraj); right: var(--okraj); top: calc(var(--hl) + 84px); width: auto; height: var(--film-foto-h); max-height: none; aspect-ratio: auto; transform: rotate(var(--naklon, 0deg)); border-radius: 22px; box-shadow: 0 30px 50px -36px rgba(110, 70, 10, .55); }
  html.anim .film-kroky { left: var(--okraj); right: var(--okraj); top: calc(var(--hl) + 84px + var(--film-foto-h) + 18px); bottom: auto; transform: none; width: auto; }
  html.anim .film-krok .film-c { font-size: 1.7rem; margin-bottom: 4px; }
  html.anim .film-krok h3 { font-size: 1.5rem; margin-bottom: 6px; }
  html.anim .film-krok p { font-size: .92rem; line-height: 1.5; }
  html.anim .film-prubeh { left: var(--okraj); right: auto; bottom: calc(4svh + var(--demo-h, 0px)); }
  @media (max-height: 760px) {
    .film { --film-foto-h: min(24svh, calc((100vw - 2 * var(--okraj)) * .75)); }
    html.anim .film-krok .film-c { font-size: 1.45rem; margin-bottom: 2px; }
    html.anim .film-krok h3 { font-size: 1.3rem; margin-bottom: 4px; }
    html.anim .film-krok p { font-size: .86rem; line-height: 1.45; }
  }
  .film-prubeh i { width: 30px; }
  .programy, .znacky-karty { grid-template-columns: minmax(0, 1fr); }
  .pg-station { grid-template-columns: minmax(0, 1fr); }
  .pg-station .pg-foto { aspect-ratio: 4 / 5; height: auto; }
  .pas-odkaz { padding-right: 30px; font-size: .64rem; letter-spacing: .1em; }
  .pk-kelimek { height: 34vh; }
  .prehlidka-ui { grid-template-columns: minmax(0, 1fr); }
  .prehlidka-pata { flex-direction: column; align-items: flex-start; gap: 10px; }
  .prehlidka-pata-odkazy { justify-items: start; text-align: left; }
  .prehlidka-tecky { gap: 5px; }
  .prehlidka-tecky li { width: 14px; }
  .prehlidka-tecky li.on { width: 28px; }
  .prehlidka-nota { font-size: .76rem; max-width: 40ch; }
  .prehlidka-nota b { font-size: .95rem; }
  .prehlidka-ui { padding-top: calc(var(--hl) + 10px); padding-bottom: calc(3vh + var(--demo-h, 0px) + 18px); }
  .prehlidka-pata .odkaz { font-size: .9rem; }
  .prehlidka-info { align-self: end; margin-bottom: 18px; max-width: none; }
  .pi-nazev { font-size: clamp(2rem, 9vw, 2.8rem); margin-bottom: 10px; }
  .pi-popis { font-size: .9rem; line-height: 1.5; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .prehlidka-hlava .stitek { margin-bottom: 8px; }
  .prehlidka-nazev { top: 36%; font-size: 30vw; }
  .flipy, .edice-rada { gap: 10px; }
  .flip { aspect-ratio: 3 / 5.3; }
  .flip-text { padding: 9px 12px 11px; }
  .flip-text span { font-size: .78rem; }
  .flip-text span:last-child { display: none; }
  .ed-text { padding: 14px 14px 16px; }
  .ed-text b { font-size: 1.5rem; }
  .ed-text > span { font-size: .85rem; }
  .uvod-sort { padding-top: calc(var(--hl) + 4vh); }
  .uvod-sort-obal { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .vejir { height: 46svh; order: -1; }
  .vj { width: min(36vw, 190px); }
  .cisla { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .podniky-pas { padding: 20vh 0 14vh; }
  .zazitky-pin { padding: 18vh 0 10vh; }
  .kk { width: 74vw; }
  .onas-obal { grid-template-columns: minmax(0, 1fr); }
  .onas-foto { width: min(80%, 380px); }
  .onas-trofej { grid-column: auto; grid-template-columns: 120px 1fr; }
  .finale { padding: 16vh 0 30vh; }
  .finale-kelimky .fk { width: 34vw; }
  .podoba-obal, .zs-obal, .zakazka-obal, .vo-obal, .misto-obal, .pribeh-obal, .oceneni-obal, .faq-obal, .kontakt-obal { grid-template-columns: minmax(0, 1fr); }
  .podoba-obracene .podoba-foto, .zs-obracene .zs-foto { order: 0; }
  .podoba-foto, .zs-foto { width: min(80%, 360px); }
  .parametry-svetle div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .modely-karty, .projekty-karty { grid-template-columns: minmax(0, 1fr); }
  .modely-karty a { min-height: 0; }
  .model { grid-template-columns: minmax(0, 1fr); }
  .zaz-dlazdice { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--okraj) * -1); padding: 6px var(--okraj) 24px; scrollbar-width: none; }
  .zaz-dlazdice .kk { width: 72vw; }
  .zs-foto-siroka { aspect-ratio: 4 / 3; border-radius: 22px; }
  .tino-o-obal, .boh-dvoj, .t27-obal, .tino-oceneni-obal, .uvod-boh-obal { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .tino-hrdinove, .boh-chute-mriz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-seznam, .boh-vzorek-seznam { grid-template-columns: minmax(0, 1fr); }
  .galerie-mriz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gk-video { grid-column: 1 / -1; grid-row: auto; }
  .tocena-pas { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(var(--okraj) * -1); padding: 6px var(--okraj) 14px; scrollbar-width: none; }
  .tocena-pas li { flex: none; width: 96px; }
  .tino-sirka img, .boh-sirka img { aspect-ratio: 4 / 3; }
  .tp summary { padding: 20px; }
  .tp summary:has(> .tp-foto), .tp[open] summary:has(> .tp-foto) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 14px; padding: 14px; }
  .tp summary b { font-size: 1.25rem; }
  .tp summary .tp-text { overflow: hidden; }     /* skryté řádky zkrácené upoutávky nevyčuhují ani pro prekryvy.mjs */
  .tp summary .tp-text > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: .9rem; }
  .tp .clanek-telo { padding: 0 20px 24px; }
  .uvod-boh { padding-top: calc(var(--hl) + 4vh); }
  .boh-pecet { width: min(78%, 330px); order: -1; }
  .t27-magnet { width: min(70%, 260px); }
  .t27-kniha { grid-template-columns: minmax(0, 1fr); }
  .t27-kniha .tino-text { grid-column: 1; }
  .tino-trofej { width: min(70%, 300px); }
  .boh-cisla { gap: 26px; }
  .zs-dvoj { grid-template-columns: minmax(0, 1fr); }
  .zs-bok { position: relative; top: 0; }
  .st-obal { grid-template-columns: minmax(0, 1fr); }
  .smesi { grid-template-columns: minmax(0, 1fr); }
  .hero-odrazky { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 20px 0 26px; }
  .st-bok { position: relative; top: 0; }
  .st-foto { width: min(100%, 420px); }
  .st-model { padding: 18px; gap: 4px 14px; }
  .parametry div { grid-template-columns: 7.5em 1fr; }
  .parametry-radek div { grid-template-columns: minmax(0, 1fr); }
  .vitrina { grid-template-columns: minmax(0, 1fr); }
  .detail { position: relative; top: 0; order: -1; grid-template-columns: 120px 1fr; gap: 4px 16px; align-items: start; }
  .detail-foto { grid-row: 1 / span 5; margin: 0; }
  .vitrina-mriz { grid-template-columns: repeat(2, 1fr); padding: 10px; max-height: 70svh; overflow-y: auto; overscroll-behavior: auto; }
  .pribeh-fotky { min-height: 420px; }
  .oceneni-foto { width: min(70%, 320px); }
  .kontakty li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .formular { grid-template-columns: minmax(0, 1fr); }
  .kv-firmy { grid-template-columns: minmax(0, 1fr); }
  .kv-foto img { aspect-ratio: 4 / 3; }
  .paticka-obal { grid-template-columns: 1fr 1fr; }
  .paticka-logo { grid-column: 1 / -1; }
  .lista { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + var(--demo-h, 0px)); display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(251, 247, 239, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -10px rgba(43, 27, 20, .45), inset 0 0 0 1px var(--linka); transform: translateY(160%); transition: transform .6s var(--ease); }
  .lista .tl { flex: 1; min-height: 48px; padding: 0 14px; font-size: .95rem; }
  .lista .tl::after { display: none; }
  .lista.ukaz { transform: none; }
  .paticka { padding-bottom: calc(110px + var(--demo-h, 0px)); }
  .jednoducha-kelimek { opacity: .5; }
}
@media (max-width: 560px) {
  .boh-kroky { grid-template-columns: minmax(0, 1fr); }
  /* příchutě BOHEMIAN zůstávají ve dvou sloupcích, jinak by byla každá přes celou obrazovku */
  .boh-chute-mriz { gap: 10px; }
  .boh-chut { gap: 4px; padding: 8px 10px 14px; }
  .boh-chut b { font-size: 1.15rem; }
  .boh-chut small { font-size: .62rem; letter-spacing: .06em; }
  .boh-chut > span:not(.boh-kopec):not(.boh-misto):not(.boh-obr) { font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .boh-chut .odkaz { font-size: .82rem; }
  .boh-foto-chut, .boh-misto { border-radius: 10px; margin-bottom: 6px; }
  .boh-chut .boh-misto .boh-kopec { scale: 1.3; translate: 0 -16px; }
}
@media (max-width: 420px) {
  .hero-nadpis { font-size: clamp(2.6rem, 12.6vw, 3.3rem); }
  .hero-nadpis-pod { font-size: clamp(2.3rem, 11vw, 3rem); }
  .vitrina-mriz { gap: 8px; }
  .vana-nazev { font-size: .92rem; }
  .detail { grid-template-columns: 96px 1fr; }
  .parametry-radek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flip-text b { font-size: 1.35rem; }
}

/* ---------- bez pohybu ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .pas-stopa { animation: none; }
}

/* odkaz na archiv článků pod výpisem médií */
.oceneni-clanky { margin-top: 22px; }

/* =========================================================================
   NÍZKÁ OKNA: notebook s lištami prohlížeče (u klienta 1264 × 628, také 1280 × 720 a 1366 × 768).
   Přišpendlené scény se řídí výškou, jinak by se text překrýval a karty nevyjely celé.
   ========================================================================= */
@media (min-width: 900px) and (max-height: 800px) {
  .okno-scena { padding: calc(var(--hl) + 1vh) 0 7vh; }
  .plaketa { width: clamp(80px, 13.5vh, 148px); margin-bottom: 8px; }
  .ocen { margin-bottom: 6px; }
  .hero-nadpis { font-size: clamp(2.6rem, 11vh, 7.6rem); }
  .hero-nadpis-pod { font-size: clamp(2.3rem, 9.4vh, 6.2rem); }
  .hero-perex { margin: 14px 0 20px; }
  .odznak { margin-bottom: 14px; }
  .dolu { display: none; }
  .uvod-boh { padding: calc(var(--hl) + 3vh) 0 8vh; }
  .uvod-boh-obal { min-height: calc(100svh - var(--hl) - 11vh); }
  .boh-pecet { width: min(100%, 50vh); }
  .jednoducha { padding: calc(var(--hl) + 5vh) 0 9vh; }
  /* film výroby: text kroku pod nadpisem, ne přes něj */
  html.anim .film-hlava { top: calc(var(--hl) + 2vh); }
  html.anim .film-kroky { top: calc(var(--hl) + 2vh + 2.6rem + clamp(2rem, 3.3vw, 3.4rem) + 5vh); transform: none; width: min(38vw, 520px); }
  html.anim .film-krok .film-c { font-size: clamp(2.2rem, 7vh, 5.2rem); margin-bottom: 4px; }
  html.anim .film-krok h3 { font-size: clamp(1.5rem, 4.6vh, 2.9rem); margin-bottom: 8px; }
  html.anim .film-krok p { font-size: .95rem; line-height: 1.5; }
  /* kolotoč zážitků: celá karta i s cenou nad spodní lištou */
  .zazitky-pin { padding: calc(var(--hl) + 2vh) 0 4vh; }
  .zazitky-hlava { margin-bottom: 3vh; }
  .zazitky-hlava .nadpis { font-size: clamp(2rem, 6.4vh, 4.6rem); }
  .kk { width: clamp(250px, 44vh, 430px); }
  .kk img { aspect-ratio: 16 / 10; }
  .kk-text { padding: 12px 18px 16px; }
  .kk-text b { font-size: clamp(1.3rem, 4vh, 2.1rem); }
  html.anim .zazitky-pas .kolotoc.kolotoc-ziva { padding-inline: calc(50vw - min(22vh, 215px)); }
  /* manifest: celý text i s podpisem v okně (dřív 760 px na 628 px výšky) */
  .manifest-pin { padding: calc(var(--hl) + 1vh) 0 3vh; }
  .ne { font-size: clamp(1.7rem, 6.4vh, 4.1rem); }
  .ano { font-size: clamp(1.15rem, 3.5vh, 2.2rem); margin-top: 1em; }
  .podpis { margin-top: 1.2em; }
  .tani-okno { width: min(100%, 440px, 58vh); }
}

/* boční kornout na šířkách, kde by zasahoval do obsahu: menší, u kraje, obsah o kousek dál */
@media (min-width: 1101px) and (max-width: 1480px) {
  :root { --okraj: max(4.2vw, 62px); }
  .kornout { right: 6px; scale: .86; transform-origin: 100% 50%; }
}

/* popisek AI fotky v hero na telefonu: na rohu fotky (statická i živá verze), ne schovaný */
@media (max-width: 899px) {
  .okno-popisek { display: block; opacity: .9 !important; bottom: auto; top: calc(var(--hl) + 10px + min(92.5vw, 412.5px) - 36px); right: calc((100% - min(74%, 330px)) / 2 + 10px); font-size: .68rem; padding: 4px 9px; }
  .okno-ziva .okno-popisek { top: calc(var(--hl) + 10px + 56svh - 36px); right: 12px; }
  /* na úvodu je vpravo dole zelená pečeť, popisek proto vlevo */
  .okno-domu .okno-popisek { right: auto; left: calc((100% - min(74%, 330px)) / 2 + 10px); }
  .okno-domu.okno-ziva .okno-popisek { left: 12px; }
}

/* popisky AI fotek na úvodu: programy pro podniky a kolotoč zážitků */
.pg-foto .pg-pozn { position: absolute; z-index: 2; right: 12px; bottom: 10px; font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ink-2); }
.zazitky-pozn { margin-top: 8px; }

/* Pro podniky: obsah Corneru a Pointu podle Tomášových stránek (mezititulky, Proč Corner, modelové příklady) */
.model-h3 { font: 400 clamp(1.3rem, 1.7vw, 1.65rem)/1.15 var(--font-d); color: #fff; margin: 30px 0 12px; }   /* B17, B18: nadpisy na jeden řádek */
.model-proc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-bottom: 24px; }
.model-proc .fajfky { margin-bottom: 0; }
.model-proc-t { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(251, 247, 239, .72); margin-bottom: 10px; }
.kalk-priklady { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linka); }
.kalk-priklady-t { font-weight: 600; margin-bottom: 6px; }
.kalk-priklady .kalk-vysledek dd { white-space: normal; text-align: right; }
@media (max-width: 560px) { .model-proc { grid-template-columns: minmax(0, 1fr); } }

/* GELADORO Station podle Tomášova textu z 5. 11.: kroky, skladba prodeje, kalkulačka ve světlé sekci */
.kroky-station { counter-reset: k; display: grid; gap: 14px; }
.kroky-station li { counter-increment: k; position: relative; padding-left: 46px; color: var(--ink-2); max-width: 60ch; }
.kroky-station li b { color: var(--ink); }
.kroky-station li::before { content: counter(k); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 400 1.05rem/1 var(--font-d); background: var(--cervena-t); color: #fff; }
.st-skladba { width: 100%; max-width: 560px; border-collapse: collapse; font-size: .95rem; background: rgba(255, 255, 255, .82); border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--linka); }
.st-skladba th, .st-skladba td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--linka); }
.st-skladba th { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.st-skladba td:nth-child(n+2), .st-skladba th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.st-skladba tr:last-child td { border-bottom: 0; }
/* kolo B: Station podle textu z 6. 11. (náklady jako seznam, tři modelové příklady s tabulkou), kroky Pointu v rámečku */
.st-naklady { display: grid; gap: 6px; padding-left: 1.2em; color: var(--ink-2); max-width: 60ch; }
.st-naklady li { list-style: disc; }
.st-naklady li::marker { color: var(--cervena-t); }
.st-priklad-h { font: 400 clamp(1.25rem, 1.8vw, 1.6rem)/1.15 var(--font-d); color: var(--ink); margin-top: 34px !important; }
.st-priklad-h small { display: block; font: 600 .74rem/1.2 var(--font-t); letter-spacing: .14em; text-transform: uppercase; color: var(--cervena-t); margin-bottom: 6px; }
.st-priklad td:first-child { color: var(--ink-2); }
.st-priklad .st-soucet td { font-weight: 700; color: var(--ink); background: rgba(191, 22, 81, .07); }
.st-zvrat tr:nth-child(2) td { font-weight: 700; color: var(--ink); }
.st-blok p.st-pozn { font-size: .9rem; color: var(--ink-3); }
.zvyrazni { display: block; margin-top: 10px; font-weight: 600; color: var(--cervena-t); }
.model-kroky { border-radius: var(--r); background: rgba(0,0,0,.14); padding: 22px 24px 18px; }
.model-kroky-t { font: 400 clamp(1.15rem, 1.5vw, 1.4rem)/1.2 var(--font-d); color: #fff; margin-bottom: 14px; }
.model-kroky .kroky-point { margin-bottom: 0; }
.kalk-station { max-width: 560px; margin-top: 26px; }
@media (max-width: 560px) { .st-skladba th, .st-skladba td { padding: 9px 10px; font-size: .86rem; } }

@media (max-width: 899px) { .hledani { max-width: none; flex-basis: 100%; } }

/* úzké telefony: řádek manifestu „z chemických stabilizátorů.“ se nezalamuje, musí se vejít */
@media (max-width: 400px) { .ne { font-size: 7.6vw; } }
/* stránky bez úvodní obrazovky: obsah se ukáže až s připravenými animacemi, ne statický a pak skok */
html.anim:not(.nacteno) main { opacity: 0; }
html.anim main { transition: opacity .35s ease; }
html.menu-otevrene { overflow: hidden; }
.mobilmenu { overscroll-behavior: contain; }

/* technické specifikace GELADORO Station: kompaktní mřížka, ať je vidět celá najednou */
.st-parametry { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; margin-bottom: 8px; }
.st-parametry div { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 8px 0; }
.st-parametry dt { font-size: .78rem; padding-top: 0; }
.st-parametry dd { font-size: .98rem; line-height: 1.35; }
@media (max-width: 899px) { .st-parametry { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } .st-parametry div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- kolo B (6. 11. 2026): fotky a videa od Tomáše ---------- */
.podoba-foto-siroka { aspect-ratio: 29 / 20; width: min(100%, 560px); border-radius: var(--r); overflow: hidden; box-shadow: 0 40px 70px -50px rgba(43, 27, 20, .45); }
.podoba-foto-siroka img { width: 100%; height: 100%; object-fit: cover; }
.model-video { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: rgba(0, 0, 0, .14); }
.model-video video, .st-video video, .tino-videa video { display: block; width: 100%; height: 100%; object-fit: cover; }
.model-video figcaption, .st-video figcaption, .tino-videa figcaption { position: absolute; right: 12px; bottom: 10px; font-size: .72rem; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.st-video { position: relative; max-width: 560px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -44px rgba(43, 27, 20, .5); }
.t27-magnety { justify-self: center; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: min(100%, 420px); }
.t27-magnety figure { aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 24px 40px -26px rgba(29, 111, 184, .55); transform: rotate(-4deg); }
.t27-magnety figure:nth-child(2) { transform: rotate(3deg) translateY(-10px); }
.t27-magnety figure:nth-child(3) { transform: rotate(-2deg); }
.t27-magnety img { width: 100%; height: 100%; object-fit: cover; }
.t27-magnety-pozn { grid-column: 1 / -1; text-align: center; font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-3); margin-top: 6px; }
/* Čtyři podoby: text pod fotkou má svou přirozenou výšku (dřív pevnou pětinu karty a vyjel nahoru do fotky,
   na telefonu o 10 až 30 px, na počítači 1264 px o 9 px); na telefonu stejně vysoký u všech karet, ať jsou fotky ve dvojici zarovnané */
@media (max-width: 560px) { .flip-text { min-height: 5.45rem; } }
/* přehlídka chutí na nízkém telefonu (např. iPhone SE v Safari): bez štítku nad nadpisem a popis na dva řádky,
   ať zbude dost místa na kelímek (jeho výšku počítá main.js podle volného místa) */
@media (max-width: 899px) and (max-height: 620px) {
  .prehlidka-hlava .stitek { display: none; }
  .pi-popis { -webkit-line-clamp: 2; }
}
/* Tino: sbírka všech 17 magnetek (e-mail „Magnetky pro Tito edici“, 7. 11. 2026). Magnetky jako na dveřích lednice,
   po klepnutí zblízka v <dialog> se šipkami (main.js). Na počítači 6 v řadě, na tabletu 4, na telefonu 3. */
.t27-sbirka { --mez: clamp(10px, 1.8vw, 24px); grid-column: 1 / -1; margin-top: clamp(36px, 6vw, 72px); padding: clamp(18px, 4vw, 48px); border-radius: clamp(22px, 3vw, 34px);
  background: linear-gradient(180deg, #F6FBFE 0%, #E4F1F7 100%); box-shadow: inset 0 0 0 1px rgba(29, 111, 184, .1), 0 40px 70px -60px rgba(29, 111, 184, .5); }
.t27-sbirka-hlava { max-width: 58ch; margin-bottom: clamp(20px, 3vw, 36px); }
.t27-sbirka-hlava .nadpis-2 { margin: 6px 0 10px; }
.t27-sbirka-hlava p:last-child { color: var(--ink-2); }
.t27-lednice { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mez); }
.t27-lednice li { width: calc((100% - 5 * var(--mez)) / 6); }
.t27-mag { --r: -2deg; display: block; width: 100%; padding: 0; border: 0; border-radius: 22px; background: #fff; overflow: hidden; cursor: zoom-in; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 18px 30px -20px rgba(29, 111, 184, .55); transform: rotate(var(--r)); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.t27-mag img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.t27-lednice li:nth-child(4n+2) .t27-mag { --r: 2.5deg; }
.t27-lednice li:nth-child(4n+3) .t27-mag { --r: -1deg; }
.t27-lednice li:nth-child(4n) .t27-mag { --r: 3deg; }
.t27-mag:active { transform: rotate(0deg) scale(.97); }
.t27-mag:focus-visible { outline: 3px solid #2F8FD8; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .t27-mag:hover { transform: rotate(0deg) translateY(-6px) scale(1.06); box-shadow: 0 28px 40px -22px rgba(29, 111, 184, .6); } }
@media (max-width: 899px) { .t27-lednice li { width: calc((100% - 3 * var(--mez)) / 4); } }
@media (max-width: 560px) { .t27-lednice li { width: calc((100% - 2 * var(--mez)) / 3); } .t27-mag { border-radius: 16px; } }
.t27-zvetseni { border: 0; padding: 0; margin: auto; background: transparent; overflow: visible; max-width: none; max-height: none; color: var(--ink); }
.t27-zvetseni::backdrop { background: rgba(14, 38, 62, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.t27-zvetseni figure { margin: 0; width: min(86vw, 64svh, 540px); background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55); }
.t27-zvetseni[open] figure { animation: t27-pop .4s var(--ease); }
@keyframes t27-pop { from { transform: scale(.92); opacity: 0; } }
.t27-zvetseni img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.t27-zvetseni figcaption { display: grid; gap: 2px; padding: 2px 64px 20px; text-align: center; }
.t27-zvetseni figcaption b { font: 400 clamp(1.4rem, 3vw, 1.8rem)/1.1 var(--font-d); }
.t27-zvetseni figcaption span { font-size: .92rem; color: var(--ink-2); }
.t27-zv { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); -webkit-tap-highlight-color: transparent; }
.t27-zv svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.t27-zv:focus-visible { outline: 3px solid #2F8FD8; outline-offset: 3px; }
.t27-zv-pred { left: -64px; top: calc(50% - 24px); }
.t27-zv-dal { right: -64px; top: calc(50% - 24px); }
.t27-zv-zavrit { right: 0; top: -60px; }
@media (max-width: 700px) {
  .t27-zv-pred, .t27-zv-dal { top: auto; bottom: 12px; background: #EAF4FA; box-shadow: none; }
  .t27-zv-pred { left: 12px; }
  .t27-zv-dal { right: 12px; }
}
html.zvetseno { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .t27-zvetseni[open] figure { animation: none; } .t27-mag { transition: none; } }
/* na počítači větší magnetky: Tino nahoře, jednorožec a panda pod ním (na mobilu zůstanou tři vedle sebe) */
@media (min-width: 900px) {
  .t27-magnety { grid-template-columns: repeat(2, 1fr); gap: 20px; width: min(100%, 400px); }
  .t27-magnety figure:nth-child(1) { grid-column: 1 / -1; width: 60%; justify-self: center; transform: rotate(-3deg); }
  .t27-magnety figure:nth-child(2) { transform: rotate(3deg); }
  .t27-magnety figure:nth-child(3) { transform: rotate(-2deg) translateY(-8px); }
}
.t27-obalka { grid-column: 1; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(29, 54, 120, .6); }
.t27-obalka img { width: 100%; height: auto; }
.tino-videa { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); margin-top: clamp(16px, 3vh, 28px); }
.tino-videa figure { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 70px -50px rgba(29, 111, 184, .55); }
@media (max-width: 899px) {
  .tino-videa { grid-template-columns: minmax(0, 1fr); }
  .t27-obalka { grid-column: 1; }
  .podoba-foto-siroka { width: 100%; }
}


/* kolo D (D1, D4): pořízení vlastní vitríny a vlastního automatu, barevně odlišený blok */
.vlastni { position: relative; margin: 34px 0 30px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r); background: #FFF6E3; color: #3A1E12; box-shadow: 0 18px 40px -22px rgba(60, 10, 20, .55); border: 2px solid var(--zlata); }
.vlastni::before { content: ""; position: absolute; inset: 8px; border-radius: calc(var(--r) - 6px); border: 1px dashed rgba(201, 162, 75, .55); pointer-events: none; }
.vlastni-stitek { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: var(--zlata); color: #2A1608; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vlastni-h { font: 400 clamp(1.4rem, 2vw, 1.9rem)/1.12 var(--font-d); color: var(--cervena-t); margin: 0 0 14px; }
.vlastni p { color: #3A1E12; }
.vlastni-sleva { padding: 12px 16px; border-radius: 12px; background: #fff; border-left: 4px solid var(--cervena-t); }
.vlastni-sleva b { color: var(--cervena-t); white-space: nowrap; }
.vlastni .tl { margin-top: 8px; }

/* kolo D (D5): plyšák Tino mezi chutěmi a příběhy */
.tino-plysak { padding: 16vh 0 14vh; }
.plysak-obal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.plysak-galerie { display: grid; gap: 18px; }
.plysak-hlavni { margin: 0; position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.08; border-radius: 50% 50% var(--r) var(--r); background: radial-gradient(circle at 50% 42%, #fff 0 38%, rgba(255, 255, 255, .55) 62%, rgba(255, 255, 255, 0) 72%); }
.plysak-hlavni img { width: 72%; height: auto; filter: drop-shadow(0 26px 24px rgba(60, 35, 15, .28)); transition: transform .8s var(--ease); }
.plysak-hlavni:hover img { transform: rotate(-3deg) scale(1.03); }
.plysak-pohledy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plysak-pohledy figure { margin: 0; display: grid; justify-items: center; gap: 6px; padding: 14px 10px 10px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--linka); }
.plysak-pohledy img { width: auto; height: clamp(110px, 12vw, 170px); object-fit: contain; transition: transform .6s var(--ease); }
.plysak-pohledy figure:hover img { transform: translateY(-4px); }
.plysak-pohledy figcaption { font-size: .78rem; color: var(--ink-2); }
.plysak-bublina { position: relative; margin: 22px 0 20px; padding: 22px 24px 8px; border-radius: 26px 26px 26px 6px; background: #fff; box-shadow: 0 20px 40px -30px rgba(29, 111, 184, .6); }
.plysak-ahoj { font: 400 clamp(1.35rem, 1.9vw, 1.7rem)/1.1 var(--font-d); color: #1D6FB8; }
.plysak-otazka { font-weight: 700; }
.plysak-kde { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.plysak-kde li { padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .7); }
.plysak-kde b { color: var(--cervena-t); }
@media (max-width: 860px) { .plysak-obal { grid-template-columns: minmax(0, 1fr); } .plysak-hlavni { max-width: 440px; justify-self: center; width: 100%; } }
.vlastni p, .plysak-bublina p { margin: 0 0 12px; }
.vlastni-sleva { margin: 16px 0 !important; }

/* kolo D (D2): přepínač CZ / EN v hlavičce a v mobilním menu */
.jazyk { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; border: 1.5px solid currentColor; font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-decoration: none; color: inherit; opacity: .85; transition: opacity .3s, background .3s, color .3s; }
.jazyk:hover, .jazyk:focus-visible { opacity: 1; background: var(--cervena-t); border-color: var(--cervena-t); color: #fff; }
.jazyk-mobil { display: inline-block; width: auto; margin: 18px 0 0; padding: 10px 18px; height: auto; font-size: .95rem; letter-spacing: .02em; }

/* EN: delší anglické řádky hero nadpisu se zmenší tak, aby se zalamovaly jako české (hodnoty --hz a --hz-m nastavené na stránce podle měření) */
.hero-nadpis > * { font-size: calc(1em * var(--hz, 1)); }
@media (max-width: 899px) { .hero-nadpis > * { font-size: calc(1em * var(--hz-m, 1)); } }
.pk-karta h3 small { display: block; margin-top: 8px; font: italic 300 .45em/1.2 var(--font-d); letter-spacing: 0; text-transform: none; color: var(--ink-2); }

/* kolo E (Tomáš 11. 11.): kalkulačka Corneru a video Pointu drží při rolování na místě, dokud je text vlevo nedožene */
@media (min-width: 900px) {
  /* pravý sloupec je přesně tak vysoký jako text vlevo (výšku řádku určuje jen text), poslední fotka vyplní zbylé místo;
     když je místa víc než obrazovka, fotka jede při rolování a skončí zarovnaná s koncem textu */
  .model-corner .model-bok, .model-point .model-bok { height: 0; min-height: 100%; display: flex; flex-direction: column; gap: 18px; }
  .model-corner .model-bok > *, .model-point .model-bok > * { flex: none; }
  .model-point .model-bok > .model-video { flex: 1 1 0; min-height: 220px; max-height: calc(100svh - var(--hl) - 48px); aspect-ratio: auto; position: sticky; top: calc(var(--hl) + 24px); }
  /* Corner: kalkulačka jede při rolování a skončí na lince s textem. Je vyšší než obrazovka, proto se drží spodní hranou
     (--kalk-top počítá main.js: min(pod hlavičkou, výška okna − výška kalkulačky − 24 px)), tlačítko je tak vždy vidět */
  .model-corner .model-bok { justify-content: flex-start; }
  .model-corner .model-bok > .kalkulacka { position: sticky; top: var(--kalk-top, calc(var(--hl) + 24px)); }
}
/* kolo E: tlačítko Objednat plyšáka dál od textu */
.plysak-obal .tl { margin-top: 18px; }
@media (min-width: 900px) { .model-corner .model-text > :last-child, .model-point .model-text > :last-child { margin-bottom: 0; } }
/* podpis autora webu vpravo v posledním řádku patičky */
.paticka-autor { margin-left: auto; }
.paticka-autor a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) { .paticka-autor { margin-left: 0; } }
/* dotyková plocha aspoň 44 px na telefonu u nízkých odkazů (vzhled beze změny, plocha se jen rozšíří neviditelně) */
@media (pointer: coarse) {
  .odkaz, .paticka-nav a, .paticka-znacky a { position: relative; }
  .odkaz::after, .paticka-nav a::after, .paticka-znacky a::after { content: ""; position: absolute; inset: -8px -6px; }
  .paticka-nav { gap: 12px; }
  .paticka-nav a::after { inset: -6px -6px; }          /* sousední odkazy se plochou nepřekrývají */
  .paticka-znacky a::after { inset: -8px -3px; }
}
/* závěrečný audit 11. 11.: Tino */
html[lang="en"] .tp summary em::before { content: "Read the story ↓"; }
html[lang="en"] .tp[open] summary em::before { content: "Close the story ↑"; }
.tp[open] summary .tp-text > span { display: none; }          /* rozbalený příběh neopakuje úvodní úryvek */
.tino-chute .sekce-hlava .perex, .tino-pribehy .sekce-hlava .perex { margin-top: 16px; }
.plysak-pohledy figcaption { text-align: center; }
html[lang="en"] #to-h em { display: block; }
@media (max-width: 899px) {
  .hero-nadpis .radek-3 { padding-left: 0; }                  /* kurzíva v hero zarovnaná s prvním řádkem */
  .tino-zazitky { padding-bottom: 8vh; }
  .tino-oceneni { padding-top: 13vh; }
}
/* závěrečný audit: sloupec textu Station se nesmí roztáhnout podle nejširšího obsahu (na mobilu přetékal o 11 px) */
.st-text { grid-template-columns: minmax(0, 1fr); }
.st-text > * { min-width: 0; }
@media (max-width: 560px) {
  .st-skladba th { white-space: normal; letter-spacing: .04em; font-size: .68rem; line-height: 1.25; vertical-align: bottom; }
  .st-skladba th, .st-skladba td { padding: 9px 8px; }
  .st-skladba td:first-child, .st-skladba th:first-child { padding-left: 12px; }
}

/* závěrečný audit 11. 11.: mobil */
.sekce-hlava .perex, .boh-vzorek-obal .perex { margin-top: 16px; }
.prehlidka-ui { z-index: 5; }                                   /* štítek sekce nad stékajícími kapkami */
.tl .tl-dopl { white-space: nowrap; }
@media (max-width: 899px) {
  .vitrina-mriz { max-height: none; overflow: visible; }       /* žádné rolování v rolování, všech 60 chutí pod sebou */
  .pi-popis { -webkit-line-clamp: 6; }
  .zaz-prehled { padding-bottom: 6vh; }
  .zazitek-sekce.pastel-vanilka, .zazitek-sekce.pastel-nebe, .zazitek-sekce.pastel-krem, .zazitek-sekce.pastel-mata, .zazitek-sekce.pastel-jahoda { padding-bottom: 6vh; }
  .modely { padding-bottom: 6vh; }
  .velkoobchod-sekce { padding-bottom: 6vh; }
  .podniky-pas { padding-bottom: 8vh; }
  .boh-chut small { min-height: 2.5em; display: block; }        /* popisy příchutí ve dvou sloupcích začínají ve stejné výšce */
  .jednoducha .hero-nadpis + p { margin-top: 16px; }
}
@media (max-width: 480px) { .tl .tl-dopl { display: none; } }   /* „(vitrínu)“ apod. jen na širších obrazovkách, tlačítko zůstane na jednom řádku */
@media (max-height: 760px) and (max-width: 899px) { .pi-popis { -webkit-line-clamp: 3; } }
/* posuvníky kalkulaček: velký jezdec pro prst */
@media (pointer: coarse) {
  .kalkulacka input[type=range] { -webkit-appearance: none; appearance: none; height: 36px; background: transparent; }
  .kalkulacka input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: rgba(191, 22, 81, .22); }
  .kalkulacka input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--cervena-t); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
  .kalkulacka input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(191, 22, 81, .22); }
  .kalkulacka input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--cervena-t); border: 3px solid #fff; }
}
@media (max-width: 899px) { .prehlidka > .kapky { height: 58px; } }   /* kapky při vjezdu přehlídky nezakryjí štítek sekce */

/* kolo F: Tino na cestách (/tino/cesty/, příběhy ze starého tinotravels.geladoro.com, generuje build/tino-cesty.js) */
.tc-uvod { padding-bottom: 10vh; }
.tc-uvod .clanek-zpet { margin-bottom: 22px; }
.tc-uvod .chip[data-r]:not([data-r=""]) { border-color: color-mix(in srgb, var(--k) 45%, transparent); }
.tc-uvod .chip[data-r]:not([data-r=""]).on { background: var(--k); border-color: var(--k); color: #fff; }
.tc-o-mriz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); margin-top: 34px; align-items: start; }
.tc-o { border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--linka); }
.tc-o[open] { grid-column: 1 / -1; }
.tc-o summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-radius: var(--r); transition: background .4s var(--ease); }
.tc-o summary::-webkit-details-marker { display: none; }
.tc-o summary:hover { background: #F4FAFD; }
.tc-o summary b { font: 400 clamp(1.15rem, 1.4vw, 1.35rem)/1.2 var(--font-d); }
.tc-o summary em { font-style: normal; font-weight: 600; font-size: .9rem; color: #1D6FB8; white-space: nowrap; }
.tc-o summary em::before { content: "Číst ↓"; }
.tc-o[open] summary em::before { content: "Sbalit ↑"; }
.tc-o .clanek-telo { padding: 0 22px 26px; max-width: 76ch; font-size: 1rem; }
.tc-seznam { background: #fff; }
.tc .cl-meta span, .tc-clanek .cl-meta span { background: color-mix(in srgb, var(--k) 14%, transparent); color: color-mix(in srgb, var(--k) 70%, #1b1b1b); }
.tc a { gap: 8px; padding: 12px 12px 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--linka), 0 18px 34px -30px rgba(29, 111, 184, .45); }
.tc a:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--k), 0 30px 50px -34px rgba(29, 111, 184, .55); }
.tc a > :not(.tc-foto) { margin-inline: 10px; }
.tc-foto { display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; margin-bottom: 6px; background: var(--nebe); }
.tc-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .8s var(--ease); }
.tc a:hover .tc-foto img { transform: scale(1.04); }
.tc-kde { display: block; font: 600 .78rem/1.2 var(--font-t); letter-spacing: .12em; text-transform: uppercase; color: #1D6FB8; }
.tc-clanek h1 .tc-kde { margin-bottom: 10px; font-size: .82rem; }
.tc-hlavni { margin: 0 0 34px; }
.tc-hlavni img { display: block; width: 100%; max-height: 82vh; object-fit: cover; object-position: 50% 30%; border-radius: var(--r); box-shadow: 0 30px 60px -40px rgba(29, 111, 184, .6); }
.tc-clanek .clanek-telo h2 { font-size: 1.5rem; color: #1D6FB8; }
.tc-clanek .clanek-telo h3 { font-size: 1.25rem; color: #1D6FB8; }
.tc-tino { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 56px; padding: 24px 26px; border-radius: var(--r); background: var(--nebe) var(--prouzek); }
.tc-tino p { flex: 1 1 320px; margin: 0; color: var(--ink-2); }
.tc-tino b { color: var(--ink); }
@media (max-width: 899px) {
  .tc-o-mriz { grid-template-columns: minmax(0, 1fr); }
  .tc a { padding-bottom: 18px; }
  .tc-hlavni img { max-height: 70vh; }
}

/* kolo F: BOHEMIAN se zlatými kelímky (fotky 4 : 3), podobizna Budimíra u Legendy, příběhy chutí jako karty Tina */
.boh-foto img { aspect-ratio: 4 / 3; }
.boh-legenda-s-foto { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.boh-legenda-foto { position: sticky; top: calc(var(--hl) + 24px); margin: 0; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 70px -50px rgba(143, 106, 30, .55); }
.boh-legenda-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.boh-legenda-foto figcaption { position: absolute; right: 14px; bottom: 12px; font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ink-2); }
.boh-pribehy { position: relative; padding: 20vh 0 14vh; }
.boh-pribehy .sekce-hlava .perex { margin-top: 16px; }
.boh-pribehy .tp summary small, .boh-pribehy .tp summary em { color: #8F6A1E; }
.boh-pribehy .tp summary:hover { background: #FDF8EC; }
.boh-pribeh-foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; margin-top: 22px; }
.boh-pribeh-foto figure { margin: 0; }
.boh-pribeh-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
@media (max-width: 899px) {
  .boh-legenda-s-foto { grid-template-columns: minmax(0, 1fr); }
  .boh-legenda-foto { position: relative; top: 0; width: min(72%, 260px); margin: 0 auto 30px; }
}

/* kolo G (Tomáš 12. 11.): e-shop suchých směsí, magnetky v e-shopu, GelatoExpedice (pro školy), nezbedné logo na stránkách Tina */
.smes-eshop { margin-top: 4px; }
.t27-eshop { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.8vw, 36px); border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1.5px rgba(29, 111, 184, .25), 0 26px 40px -32px rgba(29, 111, 184, .5); }
.t27-eshop p { flex: 1 1 340px; margin: 0; color: var(--ink-2); font-size: 1.05rem; }
.t27-eshop b { display: block; font: 400 clamp(1.3rem, 1.8vw, 1.7rem)/1.15 var(--font-d); color: #1D6FB8; margin-bottom: 4px; }
.pg h3 .pg-pro { font-size: .55em; font-style: normal; color: var(--ink-2); white-space: nowrap; }
.logo-nezbedne { width: 112px; }
@media (max-width: 899px) { .logo-nezbedne { width: 88px; } .t27-eshop .tl { width: 100%; justify-content: center; } }

/* kolo G (Tomáš 12. 11. večer): erby BOHEMIAN se ukážou po najetí na příchuť, medaile Gela Doro u Točeláta
   jako mince (po najetí nebo klepnutí se otočí), 15 chutí Točeláta po 5 ve třech řadách */
.boh-obr { position: relative; display: block; margin-bottom: 10px; border-radius: 14px; perspective: 900px; }
.boh-obr .boh-foto-chut { display: block; margin-bottom: 0; }
.boh-obr::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 50%, rgba(42, 27, 22, .1), rgba(42, 27, 22, .42)); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.boh-erb { position: absolute; z-index: 1; left: 13%; top: 50%; width: 74%; aspect-ratio: 1; margin-top: -37%; border-radius: 50%; opacity: 0; transform: scale(.6) rotateY(80deg); filter: drop-shadow(0 18px 22px rgba(60, 40, 10, .5)); transition: opacity .3s ease, transform .75s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .boh-chut:hover .boh-erb, .boh-chut:focus-within .boh-erb { opacity: 1; transform: none; }
  .boh-chut:hover .boh-obr::after, .boh-chut:focus-within .boh-obr::after { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .boh-erb { left: auto; top: auto; right: 6px; bottom: 6px; width: 36%; margin-top: 0; opacity: 1; transform: none; }
}

.tocena-pas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 3vh, 34px) clamp(16px, 2.4vw, 40px); max-width: 940px; margin-inline: auto; }
.tocena-pas li { width: auto; cursor: pointer; outline: none; }
.tp-mince { position: relative; display: block; width: 100%; aspect-ratio: 1; perspective: 700px; }
.tocena-pas .tp-mince img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .85s cubic-bezier(.3, 1.3, .5, 1); }
.tocena-pas .tp-mince .tp-medaile { object-fit: contain; transform: rotateY(180deg); box-shadow: 0 18px 30px -18px rgba(42, 27, 22, .6); }
.tocena-pas li:focus .tp-mince img:first-child { transform: rotateY(-180deg); }
.tocena-pas li:focus .tp-mince .tp-medaile { transform: rotateY(0deg); }
.tocena-pas li:focus-visible .tp-mince { outline: 3px solid var(--ink); outline-offset: 5px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .tocena-pas li:hover .tp-mince img:first-child { transform: rotateY(-180deg); }
  .tocena-pas li:hover .tp-mince .tp-medaile { transform: rotateY(0deg); }
}
@media (max-width: 899px) {
  .tocena-pas { display: flex; max-width: none; }
  .tocena-pas li { width: 104px; }
  .boh-obr { margin-bottom: 6px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tocena-pas .tp-mince img, .boh-erb { transition-duration: .01s; }
}

/* =========================================================================
   ZÁŽITKY, 13. 11. 2026 (e-mail „Rezervace na Zážitky“ a „Realistická galerie“, připomínky 8:42 a 9:10):
   tlačítko Reservio u každého zážitku, galerie skutečných fotek z Gelatodílny se zvětšením
   ========================================================================= */
.zs-akce { display: grid; gap: 12px; justify-items: start; }
.zs-akce-pozn { margin: 0; font-size: .86rem; color: var(--ink-2); }
.zs-akce-pozn a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.zs-akce-pozn a:hover { color: var(--cervena-t); }

.dilna-galerie { margin-top: clamp(48px, 8vh, 96px); }
.dg-hlava { max-width: 760px; margin-bottom: clamp(22px, 3.4vh, 36px); }
.dg-nadpis { margin: 0 0 12px; }
.dg-lead { margin: 0; color: var(--ink-2); }
.dg-mriz { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.dg-mriz > li { margin: 0; padding: 0; }
.dg-mriz > li::before { content: none; }
.dg-video { grid-column: span 2; grid-row: span 2; }
.dg-video video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; background: #E9E2D6; }
.dg-foto { display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #E9E2D6; cursor: zoom-in; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 22px 34px -28px rgba(42, 27, 22, .55); }
.dg-foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease), filter .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .dg-foto:hover img { transform: scale(1.05); filter: saturate(1.08); } }
.dg-foto:focus-visible { outline: 3px solid var(--cervena-t); outline-offset: 3px; }
.dg-zvetseni { border: 0; padding: 0; margin: auto; background: transparent; overflow: visible; max-width: none; max-height: none; color: var(--papir); }
.dg-zvetseni::backdrop { background: rgba(28, 18, 14, .86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dg-zvetseni figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.dg-zvetseni[open] figure { animation: t27-pop .4s var(--ease); }
.dg-zvetseni img { display: block; width: auto; height: auto; max-width: min(88vw, 1600px); max-height: 80svh; border-radius: 14px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); }
.dg-zvetseni figcaption { font: 400 clamp(1.05rem, 2vw, 1.3rem)/1.3 var(--font-d); text-align: center; padding: 0 12px; }
.dg-zv-pred { left: -64px; top: calc(50% - 40px); }
.dg-zv-dal { right: -64px; top: calc(50% - 40px); }
.dg-zv-zavrit { right: 0; top: -60px; }
@media (max-width: 899px) {
  .dg-mriz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-video { grid-row: span 1; }
  .dg-video video { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 1100px) {
  .dg-zv-pred, .dg-zv-dal { top: auto; bottom: -64px; }
  .dg-zv-pred { left: calc(50% - 60px); }
  .dg-zv-dal { right: calc(50% - 60px); }
  .dg-zvetseni img { max-height: 70svh; }
}
@media (prefers-reduced-motion: reduce) { .dg-zvetseni[open] figure { animation: none; } .dg-foto img { transition: none; } }

/* ===== PŘÍBĚHY PŘES CELOU ŠÍŘKU, 13. 11. 2026 (Tomáš: rozbalený příběh Tina i BOHEMIAN „není do krajů“, vpravo bílé místo) =====
   Na PC je obrázek z karty v levém sloupci a při čtení zůstává přilepený, text vpravo drží čitelnou délku řádku. Na telefonu beze změny. */
.tp-obr { display: none; margin: 0; }
@media (min-width: 900px) {
  .tp[open] summary:has(> .tp-foto) { grid-template-columns: minmax(0, 1fr); }
  .tp[open] summary > .tp-foto { display: none; }
  .tp-cteni { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(24px, 3vw, 52px); align-items: start; padding: 0 26px 30px; }
  .tp-cteni > .clanek-telo { padding: 0; max-width: 70ch; }
  .tp-obr { display: block; position: sticky; top: calc(var(--hl) + 20px); }
  .tp-obr img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; max-height: calc(100svh - var(--hl) - 48px); object-fit: cover; border-radius: 16px; }
  .tc-o .tp-cteni { padding: 0 22px 26px; }
  .tc-o .tp-obr img { aspect-ratio: 4 / 5; }
}

/* ===== TINO NA CESTÁCH: NAHRÁVKY, 13. 11. 2026 (Tomáš: „přišli jsme o ten hlas, děti si to mohou pustit“) ===== */
.tc-poslech { display: grid; gap: 12px; margin: 0 0 26px; padding: 18px 20px; border-radius: 18px; background: color-mix(in srgb, var(--k, #2F8FD8) 8%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, #2F8FD8) 22%, transparent); }
.tc-poslech p { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.tc-poslech b { font: 400 clamp(1.15rem, 1.5vw, 1.35rem)/1.2 var(--font-d); }
.tc-poslech small { color: var(--ink-2); font-size: .86rem; }
.tc-poslech audio { display: block; width: 100%; height: 44px; }
.tc .cl-meta .tc-ucho { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 35%, transparent); }
.tc-ucho::before { content: "♪ "; }