/* Pražírna u Kamila — ukázkový e-shop od Kelynda. Krémová, espresso, každá káva má vlastní barvu. */
@property --zona { syntax: '<color>'; inherits: true; initial-value: #F3EBDD; }

:root {
  --krem: #F3EBDD; --krem-2: #E9DCC6; --papir: #FBF7F0; --esp: #2A1D17; --esp-2: #4A3A31;
  --muted: #76695F; --kraft: #C8A27A; --akcent: #A9541F; --mer: #E8A36B; --ok: #3F7A4A; --linka: rgba(42, 29, 23, .14);
  --r: 18px; --r-m: 10px; --stin: 0 18px 40px -18px rgba(42, 29, 23, .35);
  --f-nadpis: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --f-text: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --hlavicka: 68px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hlavicka) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--krem); color: var(--esp); font: 400 1rem/1.6 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-nadpis); font-weight: 700; letter-spacing: -.025em; line-height: 1.02; margin: 0 0 .5em; font-variation-settings: 'opsz' 96; }
h1 { font-size: clamp(2.5rem, 6vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); }
h3 { font-size: 1.35rem; letter-spacing: -.015em; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--akcent); }
p { margin: 0 0 1rem; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.medovy { position: absolute; left: -9999px; }
.kontejner { width: min(1240px, 100% - 2.5rem); margin-inline: auto; }
.sekce { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.stitek { font: 600 .75rem/1.2 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.ztlumene { color: var(--muted); }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Tlačítka ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.4rem; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 .95rem/1 var(--f-text); text-decoration: none; cursor: pointer; transition: transform .25s, background .25s, color .25s, border-color .25s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn-tmave { background: var(--esp); color: var(--krem); }
.btn-tmave:hover { background: var(--akcent); }
.btn-obrys { border-color: var(--esp); color: var(--esp); background: transparent; }
.btn-obrys:hover { background: var(--esp); color: var(--krem); }
.btn-maly { padding: .55rem 1rem; font-size: .85rem; }
.btn-velke { padding: 1.05rem 1.7rem; font-size: 1rem; }
.btn-plny { width: 100%; }
.btn-cena { opacity: .75; font-weight: 500; padding-left: .55rem; border-left: 1px solid rgba(243, 235, 221, .35); }
.sipka { transition: transform .25s; }
.btn:hover .sipka { transform: translateX(4px); }
.odkaz-sipka { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.odkaz-sipka:hover { color: var(--akcent); }
.tlacitka { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Lišta ukázky, hlavička ---------- */
.demo-lista { background: var(--esp); color: var(--krem); font-size: .8rem; padding: .45rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; }
.demo-lista a { color: var(--mer); text-decoration: none; font-weight: 600; white-space: nowrap; }
.hlavicka { position: sticky; top: 0; z-index: 50; height: var(--hlavicka); transition: background .3s, box-shadow .3s; }
.hlavicka.plna { background: rgba(243, 235, 221, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linka); }
.hlavicka-vnitrek { height: 100%; display: flex; align-items: center; gap: 2rem; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 700 1.2rem/1 var(--f-nadpis); letter-spacing: -.02em; }
.logo svg { width: 30px; height: 30px; fill: var(--esp); stroke: var(--krem); stroke-width: 1.8; stroke-linecap: round; }
.logo path { fill: none; }
.logo i { font-style: normal; color: var(--akcent); }
.navigace { display: flex; gap: 1.6rem; margin-left: auto; }
.navigace a { text-decoration: none; font-weight: 500; font-size: .95rem; position: relative; }
.navigace a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.navigace a:hover::after, .navigace a.aktivni::after { transform: scaleX(1); }
.navigace .admin-odkaz { color: var(--muted); }
.nav-prava { display: flex; align-items: center; gap: .6rem; }
.kosik-tlacitko { display: inline-flex; align-items: center; gap: .5rem; background: var(--esp); color: var(--krem); text-decoration: none; border-radius: 999px; padding: .55rem 1rem .55rem .85rem; font-weight: 600; font-size: .9rem; }
.kosik-tlacitko svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.kosik-tlacitko b { background: var(--mer); color: var(--esp); border-radius: 999px; min-width: 1.4rem; height: 1.4rem; display: grid; place-items: center; font-size: .75rem; padding: 0 .35rem; }
.kosik-tlacitko.cuk { animation: cuk .5s; }
@keyframes cuk { 30% { transform: scale(1.12) rotate(-4deg); } 60% { transform: scale(.96); } }
.hamburger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; }
.hamburger span { display: block; height: 2px; background: var(--esp); margin: 5px 0; transition: transform .3s, opacity .3s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Sáček (fotka + HTML etiketa) ---------- */
.sacek { position: relative; width: 100%; aspect-ratio: 507 / 815; container-type: inline-size; perspective: 1600px; }
.sacek-3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--rot, 0deg) + var(--ty, 0deg))) rotateX(var(--tx, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.sacek-strana { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sacek-strana img { width: 100%; height: 100%; }
.sacek-predni { transform: translateZ(2.5cqi); }
.sacek-zadni { transform: rotateY(180deg) translateZ(2.5cqi); }
.sacek-hrana { opacity: 0; position: absolute; top: 4%; bottom: 2%; left: -1.3cqi; width: 5cqi; transform: rotateY(-90deg); background: linear-gradient(90deg, #9c774f, #c39c71 50%, #a8835b); border-radius: 2px; }
.sacek-hrana.vpravo { left: auto; right: -1.3cqi; transform: rotateY(90deg); }
.etiketa { position: absolute; left: 27.8%; top: 39.6%; width: 44.2%; aspect-ratio: 1; border-radius: 50%; background: var(--barva); color: var(--et-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3cqi;
  box-shadow: inset 0 0 0 .9cqi rgba(255, 255, 255, .16), inset 0 -3cqi 6cqi rgba(0, 0, 0, .12); }
.et-zn { font: 600 2.5cqi/1.1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.et-nazev { font: 800 7.6cqi/1 var(--f-nadpis); letter-spacing: -.03em; margin: 1.4cqi 0 .8cqi; }
.et-nazev.dlouhy { font-size: 5.4cqi; }
.et-oblast { font: 500 3.2cqi/1.1 var(--f-text); opacity: .9; }
.et-zadni { position: absolute; left: 29.2%; top: 65.9%; width: 41.8%; height: 15.1%; padding: 1.6cqi 2.2cqi; display: flex; flex-direction: column; justify-content: center; gap: .5cqi;
  color: var(--esp); font: 400 2.25cqi/1.25 var(--f-text); }
.et-zadni b { font-size: 2.9cqi; color: var(--akcent); }
.naklon .sacek-3d { will-change: transform; }

/* ---------- Úvod: sáček se při scrollu otočí ---------- */
.uvodni .hlavicka:not(.plna) { background: transparent; }
.uvod { position: relative; height: 270vh; margin-top: calc(-1 * var(--hlavicka)); }
.uvod-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.uvod-slova { position: absolute; inset: 0; pointer-events: none; font: 800 clamp(5rem, 19vw, 19rem)/.8 var(--f-nadpis); letter-spacing: -.05em; color: var(--krem-2); }
.uvod-slova span { position: absolute; white-space: nowrap; will-change: transform; }
.slovo-l { left: -1vw; top: 13vh; }
.slovo-p { right: -2vw; bottom: 4vh; }
.uvod-scena { position: absolute; left: 63%; top: 54%; width: min(25vw, 37vh); transform: translate(-50%, -50%); }
.sacek-uvod { filter: drop-shadow(0 40px 40px rgba(42, 29, 23, .25)); }
.sacek-uvod .sacek-3d { transition: none; }
.zrno { position: absolute; left: 50%; top: 50%; width: clamp(48px, 6.5vw, 104px); height: auto; translate: -50% -50%; opacity: 0; will-change: transform, opacity; }
.uvod-obsah { position: relative; height: 100%; display: flex; align-items: center; }
.uvod-text, .uvod-zadni { max-width: 31rem; padding-top: var(--hlavicka); will-change: transform, opacity; }
.uvod-zadni { position: absolute; opacity: 0; pointer-events: none; font-size: 1.15rem; }
.uvod-zadni strong { color: var(--akcent); }
.uvod-zadni.videt { pointer-events: auto; }
.uvod-perex { font-size: 1.12rem; color: var(--esp-2); max-width: 28rem; margin-bottom: 1.8rem; }
.uvod-scroll { position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.uvod-scroll span { width: 1.5px; height: 38px; background: linear-gradient(var(--muted) 50%, transparent 50%) 0 0 / 100% 200%; animation: kapka 1.8s infinite; }
@keyframes kapka { to { background-position: 0 -76px; } }

.pas-vyhod { background: var(--esp); color: var(--krem); overflow: hidden; padding: 1.1rem 0; position: relative; z-index: 2; }
.pas-vyhod-jizda { display: flex; width: max-content; animation: jizda 38s linear infinite; }
.pas-vyhod:hover .pas-vyhod-jizda { animation-play-state: paused; }
.pas-vyhod span { font: 600 1rem/1 var(--f-nadpis); letter-spacing: .02em; padding: 0 1.4rem; white-space: nowrap; display: flex; align-items: center; gap: 2.8rem; }
.pas-vyhod span::after { content: ''; width: 8px; height: 12px; border-radius: 50%; background: var(--mer); transform: rotate(28deg); margin-left: 1.4rem; }
@keyframes jizda { to { transform: translateX(-50%); } }

/* ---------- Barevná zóna s kávami ---------- */
.kavy-zona { --zona: #F3EBDD; background: color-mix(in srgb, var(--zona) 30%, var(--krem)); transition: --zona .8s ease; padding-top: clamp(4rem, 9vw, 7rem); }
.sekce-hlava { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1rem; }
.sekce-hlava .stitek { width: 100%; margin: 0; }
.sekce-hlava h2 { margin: 0; }
.kava-radek { min-height: 92vh; display: flex; align-items: center; padding: 4rem 0; }
.kava-radek-vnitrek { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.obracene .kava-radek-sacek { order: 2; }
.kava-radek-sacek { width: min(100%, 360px); justify-self: center; display: block; }
.kava-radek-sacek .sacek { filter: drop-shadow(0 34px 30px rgba(42, 29, 23, .22)); }
.kava-cislo { font: 600 .78rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 1.1rem; }
.kava-radek h3 { font-size: clamp(3rem, 7vw, 6.2rem); line-height: .9; letter-spacing: -.045em; margin-bottom: 1rem; }
.kava-radek h3 a { text-decoration: none; }
.kava-radek h3 span { display: block; font-size: .32em; letter-spacing: -.01em; font-weight: 500; color: var(--esp-2); margin-top: .5rem; }
.chute { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.chute li { border: 1.5px solid var(--esp); border-radius: 999px; padding: .3rem .85rem; font-size: .88rem; font-weight: 500; }
.kava-popis { max-width: 34rem; color: var(--esp-2); }
.kava-akce { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin: 1.6rem 0 .8rem; }
.dostupnost { font-size: .85rem; display: flex; align-items: center; gap: .5rem; margin: .6rem 0 0; color: var(--esp-2); }
.dostupnost::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(63, 122, 74, .15); }
.dostupnost.posledni::before { background: #D9822B; box-shadow: 0 0 0 4px rgba(217, 130, 43, .18); }
.dostupnost.vyprodano::before { background: #9A8F86; box-shadow: none; }

.profil { display: grid; gap: .55rem; max-width: 22rem; margin: 1.3rem 0 0; }
.profil > div { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: .8rem; }
.profil dt { font-size: .82rem; color: var(--muted); }
.profil dd { margin: 0; height: 6px; border-radius: 6px; background: rgba(42, 29, 23, .1); overflow: hidden; }
.profil dd span { display: block; height: 100%; width: calc(var(--h) * 20%); background: var(--esp); border-radius: 6px; transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .25s; }
.videt .profil dd span, .profil.vzdy dd span { transform: none; }

/* ---------- Cesta zrna (vodorovně při svislém scrollu) ---------- */
.cesta { position: relative; height: 420vh; background: var(--esp); color: var(--krem); }
.cesta-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; padding-top: var(--hlavicka); }
.cesta-pas { display: flex; align-items: center; gap: 4vw; padding: 0 6vw; will-change: transform; }
.cesta-uvod { flex: 0 0 min(30rem, 34vw); }
.cesta-uvod .stitek { color: var(--kraft); }
.cesta-uvod h2 em { color: var(--mer); }
.cesta-uvod p { color: rgba(243, 235, 221, .75); font-size: 1.08rem; }
.cesta-krok { flex: 0 0 min(24vw, 42vh); margin: 0; }
.cesta-krok:nth-child(odd) { translate: 0 3vh; }
.cesta-krok:nth-child(even) { translate: 0 -3vh; }
.cesta-foto { border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 4; }
.cesta-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s; }
.cesta-krok:hover .cesta-foto img { transform: scale(1.02); }
.cesta-krok figcaption { padding-top: 1.1rem; }
.cesta-cislo { font: 700 .8rem/1 var(--f-text); letter-spacing: .14em; color: var(--mer); }
.cesta-krok h3 { font-size: 1.7rem; margin: .5rem 0 .4rem; }
.cesta-krok p { color: rgba(243, 235, 221, .72); font-size: .95rem; margin: 0; }
.cesta-prubeh { position: absolute; left: 6vw; right: 6vw; bottom: 2.4rem; height: 2px; background: rgba(243, 235, 221, .15); }
.cesta-prubeh i { display: block; height: 100%; background: var(--mer); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---------- Čtvrtek: další pražení ---------- */
.ctvrtek { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; padding: 5rem 0; }
.ctvrtek-foto { position: absolute; inset: 0; }
.ctvrtek-foto img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; translate: 0 var(--par, 0px); }
.ctvrtek-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42, 29, 23, .55), rgba(42, 29, 23, .05) 70%); }
.ctvrtek-karta { position: relative; background: var(--krem); border-radius: var(--r); padding: clamp(1.6rem, 4vw, 2.8rem); max-width: 34rem; box-shadow: var(--stin); }
.ctvrtek-karta h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.odpocet { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 1.4rem 0; }
.odpocet div { background: var(--esp); color: var(--krem); border-radius: var(--r-m); padding: .9rem .4rem .7rem; text-align: center; }
.odpocet b { display: block; font: 700 clamp(1.7rem, 3.2vw, 2.5rem)/1 var(--f-nadpis); font-variant-numeric: tabular-nums; }
.odpocet span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ctvrtek-karta p:last-child { margin: 0; color: var(--esp-2); }

/* ---------- Kamil ---------- */
.kamil { padding: clamp(4rem, 9vw, 8rem) 0; }
.kamil-mrizka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.kamil-foto { border-radius: var(--r); overflow: hidden; position: relative; }
.kamil-text h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.08; }
.kamil-text p { color: var(--esp-2); font-size: 1.05rem; }
.cisla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0 0; border-top: 1px solid var(--linka); padding-top: 1.5rem; }
.cisla dt { font: 700 clamp(1.6rem, 3vw, 2.3rem)/1 var(--f-nadpis); letter-spacing: -.03em; }
.cisla dd { margin: .35rem 0 0; font-size: .85rem; color: var(--muted); }
.opona::after { content: ''; position: absolute; inset: 0; background: var(--krem); transform-origin: top; transition: transform 1.2s cubic-bezier(.7, 0, .2, 1); }
.opona.videt::after { transform: scaleY(0); }
.opona img { transform: scale(1.12); transition: transform 1.8s cubic-bezier(.2, .7, .2, 1); }
.opona.videt img { transform: none; }

/* ---------- Recenze, sleva ---------- */
.recenze-sekce { padding: 0 0 clamp(4rem, 8vw, 6rem); }
.recenze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.recenze-karta { margin: 0; background: var(--papir); border-radius: var(--r); padding: 1.8rem; display: flex; flex-direction: column; }
.hvezdy { color: var(--akcent); letter-spacing: .15em; font-size: .9rem; margin-bottom: .9rem; }
.recenze-karta blockquote { margin: 0 0 1.2rem; font: 500 1.15rem/1.4 var(--f-nadpis); letter-spacing: -.01em; flex: 1; }
.recenze-karta figcaption { font-size: .85rem; color: var(--muted); }
.sleva-sekce { padding-bottom: clamp(4rem, 8vw, 6rem); }
.sleva-karta { background: var(--mer); border-radius: var(--r); padding: clamp(1.8rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.sleva-karta h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: .4rem; }
.sleva-karta .stitek { color: var(--esp-2); }
.sleva-karta p { margin: 0; }
.kod { font: inherit; color: var(--esp); background: rgba(255, 255, 255, .35); border: 2px dashed var(--esp); border-radius: 10px; padding: 0 .4em; cursor: copy; }
.kod.zkopirovano::after { content: ' ✓'; }

/* ---------- Patička ---------- */
.paticka { background: var(--esp); color: var(--krem); padding-top: clamp(3.5rem, 8vw, 6rem); }
.paticka-velky { font: 700 clamp(2.4rem, 8vw, 7rem)/.95 var(--f-nadpis); letter-spacing: -.045em; margin-bottom: 3rem; }
.paticka-velky a { text-decoration: none; }
.paticka-velky em { font-style: normal; color: var(--mer); }
.paticka-velky a:hover em { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.paticka-mrizka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-bottom: 3rem; }
.paticka h3 { font: 600 .75rem/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--kraft); margin-bottom: 1rem; }
.paticka-odkazy { display: flex; flex-direction: column; gap: .4rem; font-size: .95rem; }
.paticka-odkazy a { text-decoration: none; opacity: .85; }
.paticka-odkazy a:hover { opacity: 1; color: var(--mer); }
.paticka-spodek { border-top: 1px solid rgba(243, 235, 221, .14); padding: 1.2rem 0; font-size: .82rem; opacity: .75; }
.paticka-spodek .kontejner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

/* ---------- Vysouvací košík ---------- */
.panel-zavoj { position: fixed; inset: 0; z-index: 90; background: rgba(42, 29, 23, .4); opacity: 0; transition: opacity .35s; }
.panel-zavoj.videt { opacity: 1; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(440px, 100vw); background: var(--krem); display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); box-shadow: -20px 0 60px rgba(42, 29, 23, .2); visibility: hidden; }
.panel.otevreny { transform: none; visibility: visible; }
.panel-hlava { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--linka); }
.panel-hlava h2 { font-size: 1.6rem; margin: 0; }
.panel-zavrit { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--esp); background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--esp); }
.panel-hlaska { padding: 0 1.5rem; font-size: .9rem; font-weight: 600; }
.panel-hlaska:not(:empty) { padding: .75rem 1.5rem; background: var(--esp); color: var(--krem); }
.panel-hlaska.chyba { background: #8E2F23; }
.panel-obsah { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.panel-prazdny { padding: 3rem 1.5rem; text-align: center; }
.panel-prazdny-nadpis { font: 700 1.4rem/1.2 var(--f-nadpis); }
.doprava-pruh { padding: 1rem 1.5rem; background: var(--papir); font-size: .9rem; }
.doprava-pruh p { margin: 0 0 .5rem; }
.doprava-pruh-cara { display: block; height: 5px; border-radius: 5px; background: rgba(42, 29, 23, .1); overflow: hidden; }
.doprava-pruh-cara i { display: block; height: 100%; background: var(--akcent); border-radius: 5px; transition: width .6s; }
.doprava-pruh.splneno .doprava-pruh-cara i { background: var(--ok); }
.panel-polozky { list-style: none; margin: 0; padding: .5rem 1.5rem; flex: 1; }
.panel-polozka { display: grid; grid-template-columns: 58px 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--linka); }
.panel-sacek { display: block; }
.panel-nazev { font: 700 1.05rem/1.2 var(--f-nadpis); text-decoration: none; }
.panel-nazev span { font: 400 .85rem var(--f-text); color: var(--muted); }
.panel-varianta { font-size: .82rem; color: var(--muted); margin: .15rem 0 .45rem; }
.panel-cena { text-align: right; font-weight: 600; font-size: .95rem; }
.pocet { display: inline-flex; align-items: center; border: 1.5px solid var(--linka); border-radius: 999px; }
.pocet button { width: 30px; height: 30px; border: 0; background: none; font-size: 1.05rem; cursor: pointer; color: var(--esp); border-radius: 50%; }
.pocet button:hover { background: var(--krem-2); }
.pocet span { min-width: 1.6rem; text-align: center; font-weight: 600; font-size: .9rem; }
.odebrat button { background: none; border: 0; padding: 0; margin-top: .4rem; font-size: .78rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.panel-souhrn { padding: 1.2rem 1.5rem 1.5rem; border-top: 1px solid var(--linka); background: var(--papir); }
.panel-souhrn p { display: flex; justify-content: space-between; margin: 0 0 .5rem; font-size: .92rem; }
.panel-celkem strong { font: 700 1.3rem/1 var(--f-nadpis); }
.panel-souhrn .btn { margin-top: .6rem; }
.panel-odkaz { display: block; text-align: center; font-size: .85rem; color: var(--muted); margin-top: .8rem; }
.nacita { opacity: .55; pointer-events: none; transition: opacity .2s; }

/* ---------- Podstránky ---------- */
.zahlavi { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.zahlavi h1 { margin-bottom: .3em; }
.zahlavi-perex { font-size: 1.12rem; color: var(--esp-2); max-width: 40rem; }
.zahlavi-male h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
.text-stranka { max-width: 46rem; }
.text-stranka h2 { font-size: 1.5rem; margin-top: 2rem; }
.text-stranka li { margin-bottom: .35rem; }
.sekce-nadpis { margin-bottom: 2rem; }
.prazdno { padding: 3rem; text-align: center; background: var(--papir); border-radius: var(--r); }

.filtry { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding: 1.1rem 0; border-top: 1px solid var(--linka); border-bottom: 1px solid var(--linka); }
.filtr-skupina { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.filtr-skupina > span { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: .3rem; }
.filtr-razeni { margin-left: auto; }
.cip { text-decoration: none; border: 1.5px solid var(--linka); border-radius: 999px; padding: .38rem .85rem; font-size: .86rem; font-weight: 500; transition: border-color .2s, background .2s; }
.cip:hover { border-color: var(--esp); }
.cip.aktivni { background: var(--esp); color: var(--krem); border-color: var(--esp); }
.katalog-pocet { font-size: .9rem; color: var(--muted); margin: 1rem 0 1.6rem; }
.katalog { padding-top: 0; }

.produkty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.produkt { background: var(--papir); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.produkt-obr { display: grid; place-items: center; padding: 2.2rem 0 1.6rem; background: color-mix(in srgb, var(--barva) 26%, var(--krem)); transition: background .4s; }
.produkt-obr .sacek { width: 46%; filter: drop-shadow(0 22px 20px rgba(42, 29, 23, .2)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.produkt:hover .produkt-obr { background: color-mix(in srgb, var(--barva) 40%, var(--krem)); }
.produkt:hover .produkt-obr .sacek { transform: translateY(-8px) scale(1.04); }
.produkt-info { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.produkt h2, .produkt h3 { font-size: 1.55rem; margin: 0 0 .35rem; }
.produkt h2 a, .produkt h3 a { text-decoration: none; }
.produkt h2 span, .produkt h3 span { font: 400 .95rem var(--f-text); color: var(--muted); letter-spacing: 0; }
.produkt-chut { font-size: .92rem; margin-bottom: .3rem; }
.produkt-meta { font-size: .8rem; color: var(--muted); }
.produkt-spodek { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: .6rem; flex-wrap: wrap; }
.produkt-cena { font: 700 1.35rem/1 var(--f-nadpis); margin: 0; }
.produkt-cena span { font: 400 .8rem var(--f-text); color: var(--muted); }
.produkt .btn { padding: .65rem 1rem; font-size: .86rem; }

/* ---------- Detail ---------- */
.detail { padding: 1.5rem 0 3rem; }
.detail-mrizka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.detail-obr { position: sticky; top: calc(var(--hlavicka) + 1rem); background: color-mix(in srgb, var(--barva) 30%, var(--krem)); border-radius: var(--r); padding: clamp(2rem, 5vw, 4rem) 0 1.5rem; display: flex; flex-direction: column; align-items: center; }
.detail-scena { width: min(56%, 330px); cursor: pointer; }
.sacek-detail { filter: drop-shadow(0 36px 30px rgba(42, 29, 23, .25)); }
.detail-scena.otoceny { --rot: 180deg; }
.detail-scena.otoceny .sacek-3d { transition-duration: .9s; }
.btn-otocit { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .45rem; background: rgba(251, 247, 240, .7); border: 0; border-radius: 999px; padding: .55rem 1rem; font: 600 .85rem var(--f-text); color: var(--esp); cursor: pointer; }
.btn-otocit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drobky { font-size: .85rem; color: var(--muted); margin-bottom: 1.2rem; }
.drobky a { text-decoration: none; }
.drobky a:hover { text-decoration: underline; }
.detail-info h1 { font-size: clamp(2.8rem, 5.5vw, 4.8rem); line-height: .92; letter-spacing: -.045em; }
.detail-info h1 span { display: block; font-size: .36em; font-weight: 500; color: var(--esp-2); letter-spacing: -.01em; margin-top: .4rem; }
.detail-popis { font-size: 1.05rem; color: var(--esp-2); }
.varianty fieldset { border: 0; padding: 0; margin: 1.4rem 0 0; }
.varianty legend { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.volby { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.volby-mleti { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.volba { position: relative; cursor: pointer; }
.volba input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.volba span { display: flex; flex-direction: column; gap: .15rem; border: 1.5px solid var(--linka); border-radius: var(--r-m); padding: .7rem .85rem; transition: border-color .2s, background .2s; height: 100%; }
.volba b { font-size: .95rem; }
.volba small { font-size: .82rem; color: var(--muted); }
.volba:hover span { border-color: var(--esp); }
.volba input:checked + span { border-color: var(--esp); background: var(--esp); color: var(--krem); }
.volba input:checked + span small { color: rgba(243, 235, 221, .75); }
.volba input:focus-visible + span { outline: 3px solid var(--akcent); outline-offset: 2px; }
.volba.nedostupna { opacity: .45; cursor: not-allowed; }
.detail-koupit { display: flex; gap: .7rem; margin-top: 1.6rem; flex-wrap: wrap; }
.detail-koupit .btn { flex: 1; min-width: 220px; }
.mnozstvi { display: inline-flex; align-items: center; border: 1.5px solid var(--esp); border-radius: 999px; }
.mnozstvi button { width: 44px; height: 48px; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--esp); }
.mnozstvi input { width: 2.4rem; text-align: center; border: 0; background: none; font: 600 1rem var(--f-text); color: var(--esp); -moz-appearance: textfield; }
.mnozstvi input::-webkit-inner-spin-button { -webkit-appearance: none; }
.detail-vyhody { list-style: none; padding: 1.4rem 0 0; margin: 1.6rem 0 0; border-top: 1px solid var(--linka); display: grid; gap: .4rem; font-size: .92rem; color: var(--esp-2); }
.detail-vyhody li::before { content: '– '; color: var(--akcent); font-weight: 700; }
.hlidani { margin-top: 1.5rem; background: var(--papir); border-radius: var(--r); padding: 1.4rem; }
.hlidani-form label { display: block; font-weight: 600; margin: .8rem 0 .5rem; }
.hlidani-form div { display: flex; gap: .5rem; flex-wrap: wrap; }
.hlidani-form input[type=email] { flex: 1; min-width: 200px; }
.detail-dalsi { background: var(--papir); }
.detail-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.detail-tri h2 { font-size: 1.5rem; }
.parametry { margin: 0; display: grid; gap: .1rem; }
.parametry > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--linka); font-size: .93rem; }
.parametry dt { color: var(--muted); }
.parametry dd { margin: 0; text-align: right; font-weight: 500; }
.recept { background: var(--esp); color: var(--krem); border-radius: var(--r); padding: 1.6rem; }
.recept-nazev { font: 700 1.1rem var(--f-nadpis); color: var(--mer); margin-bottom: .5rem; }
.recept ul { padding-left: 1.1rem; margin: 0 0 1rem; }
.recept p:last-child { margin: 0; font-size: .9rem; opacity: .8; }

/* ---------- Košík, pokladna, objednávka ---------- */
.kroky { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .85rem; color: var(--muted); counter-reset: k; }
.kroky li { counter-increment: k; display: flex; align-items: center; gap: .5rem; }
.kroky li::before { content: counter(k); width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid var(--linka); display: grid; place-items: center; font-size: .75rem; font-weight: 600; }
.kroky .aktivni { color: var(--esp); font-weight: 600; }
.kroky .aktivni::before { background: var(--esp); border-color: var(--esp); color: var(--krem); }
.kroky .hotovy::before { content: '✓'; background: var(--ok); border-color: var(--ok); color: #fff; }
.kosik-mrizka { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.kosik-polozky { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.kosik-polozka { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 1.2rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--linka); }
.kosik-sacek { display: block; background: color-mix(in srgb, var(--barva, #ccc) 20%, var(--krem)); border-radius: var(--r-m); padding: .5rem .9rem; }
.kosik-nazev { font: 700 1.2rem/1.2 var(--f-nadpis); text-decoration: none; }
.kosik-nazev span { font: 400 .9rem var(--f-text); color: var(--muted); }
.kosik-popis p { margin: .2rem 0 0; font-size: .86rem; color: var(--muted); }
.kosik-cena { text-align: right; font-weight: 600; min-width: 5.5rem; }
.souhrn-karta { position: sticky; top: calc(var(--hlavicka) + 1rem); background: var(--papir); border-radius: var(--r); padding: 1.5rem; overflow: hidden; }
.souhrn-karta h2 { font-size: 1.4rem; }
.souhrn-karta .doprava-pruh { margin: -1.5rem -1.5rem 1.2rem; background: var(--krem-2); }
.souhrn { margin: 1rem 0; }
.souhrn > div { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .95rem; }
.souhrn dt { color: var(--esp-2); }
.souhrn dd { margin: 0; font-weight: 500; }
.souhrn .sleva dd { color: var(--ok); }
.souhrn .celkem { border-top: 1px solid var(--linka); margin-top: .5rem; padding-top: .9rem; }
.souhrn .celkem dt { font-weight: 600; color: var(--esp); }
.souhrn .celkem dd { font: 700 1.55rem/1 var(--f-nadpis); }
.souhrn-pozn { font-size: .8rem; color: var(--muted); margin: .9rem 0 0; text-align: center; }
.souhrn-polozky { list-style: none; padding: 0; margin: 0 0 .5rem; }
.souhrn-polozky li { display: grid; grid-template-columns: 38px 1fr auto; gap: .8rem; align-items: center; padding: .55rem 0; font-size: .9rem; }
.souhrn-polozky small { display: block; color: var(--muted); font-size: .78rem; }
.kupon-form { margin-bottom: .6rem; }
.kupon-form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.kupon-form > div { display: flex; gap: .5rem; }
.kupon-form input { flex: 1; min-width: 0; text-transform: uppercase; }
.kupon-aktivni { display: flex; justify-content: space-between; align-items: center; gap: .5rem; background: rgba(63, 122, 74, .1); color: var(--ok); border-radius: var(--r-m); padding: .65rem .85rem; font-size: .9rem; margin: 0; }
.kupon-aktivni button { background: none; border: 0; text-decoration: underline; color: var(--muted); cursor: pointer; font-size: .82rem; }

.krok-pole { border: 0; padding: 0; margin: 0 0 2.2rem; }
.krok-pole legend { font: 700 1.45rem/1 var(--f-nadpis); display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.krok-pole legend span { width: 2rem; height: 2rem; border-radius: 50%; background: var(--esp); color: var(--krem); display: grid; place-items: center; font-size: .95rem; }
.karty-volby { display: grid; gap: .55rem; }
.karta-volba { display: flex; align-items: center; gap: .9rem; border: 1.5px solid var(--linka); border-radius: var(--r-m); padding: .95rem 1.1rem; cursor: pointer; background: var(--papir); transition: border-color .2s; }
.karta-volba:hover { border-color: var(--esp-2); }
.karta-volba:has(input:checked) { border-color: var(--esp); box-shadow: inset 0 0 0 1px var(--esp); }
.karta-volba input { accent-color: var(--esp); width: 1.1rem; height: 1.1rem; flex: none; }
.karta-volba span { flex: 1; }
.karta-volba b { display: block; font-size: .98rem; }
.karta-volba small { color: var(--muted); font-size: .83rem; }
.karta-volba em { font-style: normal; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.karta-volba s { color: var(--muted); font-weight: 400; }
.karta-volba.zakazana { opacity: .4; pointer-events: none; }
.doprava-detail { margin-top: 1rem; }
.adresa { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: .8rem; }

.formular { display: grid; gap: 1rem; }
.pole { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.pole label { font-size: .85rem; font-weight: 600; }
.pole small { font-weight: 400; color: var(--muted); }
.pole-dve { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.pole-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; align-items: end; }
input, select, textarea { font: inherit; color: var(--esp); background: var(--papir); border: 1.5px solid var(--linka); border-radius: var(--r-m); padding: .72rem .9rem; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--esp); box-shadow: 0 0 0 3px rgba(169, 84, 31, .15); }
input[type=range] { padding: 0; accent-color: var(--esp); border: 0; background: none; }
input[type=color] { padding: .2rem; height: 46px; }
input[type=checkbox] { width: auto; accent-color: var(--esp); }
.pole-chyba { color: #8E2F23; font-size: .82rem; font-weight: 500; margin: .3rem 0 0; }
.pole-pozn { font-size: .8rem; color: var(--muted); margin: .4rem 0 0; }
.zaskrt { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; cursor: pointer; }
.zaskrt input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; flex: none; }
.hlaska { border-radius: var(--r-m); padding: .9rem 1.1rem; margin-bottom: 1.2rem; background: rgba(63, 122, 74, .12); color: #2B5A34; font-weight: 500; }
.hlaska-chyba { background: rgba(142, 47, 35, .1); color: #8E2F23; }
.demo-info { background: var(--esp); color: var(--krem); border-radius: var(--r-m); padding: .85rem 1.1rem; margin: 1.2rem 0; font-size: .9rem; }
.demo-info a { color: var(--mer); }
.demo-info code { background: rgba(255, 255, 255, .12); padding: .1rem .35rem; border-radius: 4px; }
.karta { background: var(--papir); border-radius: var(--r); padding: clamp(1.3rem, 3vw, 2rem); }
.karta h2 { font-size: 1.5rem; }

.casova-osa { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); }
.casova-osa li { position: relative; padding-top: 2.2rem; font-size: .88rem; color: var(--muted); }
.casova-osa li span { position: absolute; top: 0; left: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--linka); background: var(--krem); z-index: 1; }
.casova-osa li::before { content: ''; position: absolute; top: .65rem; left: 0; right: 0; height: 2px; background: var(--linka); }
.casova-osa li:last-child::before { right: auto; width: 1rem; }
.casova-osa .hotovy, .casova-osa .aktivni { color: var(--esp); font-weight: 600; }
.casova-osa .hotovy span { background: var(--ok); border-color: var(--ok); }
.casova-osa .hotovy::before { background: var(--ok); }
.casova-osa .aktivni span { background: var(--akcent); border-color: var(--akcent); box-shadow: 0 0 0 5px rgba(169, 84, 31, .2); }
.sledovani { font-size: .92rem; }
.platba-karta { display: grid; grid-template-columns: 190px 1fr; gap: 1.6rem; background: var(--papir); border-radius: var(--r); padding: 1.6rem; margin: 1rem 0 1.6rem; align-items: center; }
.platba-qr svg { width: 100%; height: auto; border-radius: var(--r-m); }
.platba-karta h2 { font-size: 1.5rem; }
.obj-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; padding: 1.4rem 0; border-top: 1px solid var(--linka); }
.obj-info h3 { font-size: .75rem; font-family: var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.obj-info p { font-size: .93rem; margin: 0; }

/* ---------- Administrace ---------- */
.admin-shell { padding: 2rem 0 4rem; }
.admin-hlavicka { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.admin-hlavicka h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.zalozky { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--linka); margin: 1rem 0 1.6rem; }
.zalozky a { text-decoration: none; padding: .75rem 1rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.zalozky a.aktivni { border-color: var(--esp); font-weight: 600; }
.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
.kpi div { background: var(--papir); border-radius: var(--r); padding: 1.2rem 1.3rem; }
.kpi span { font-size: .8rem; color: var(--muted); }
.kpi b { display: block; font: 700 1.8rem/1.1 var(--f-nadpis); margin-top: .3rem; }
.admin-dve { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.graf { display: grid; grid-template-columns: repeat(14, 1fr); gap: .35rem; height: 220px; align-items: end; padding-top: 1rem; }
.graf-sloupec { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .35rem; }
.graf-sloupec i { width: 100%; background: var(--esp); border-radius: 6px 6px 2px 2px; min-height: 3px; transition: background .2s; }
.graf-sloupec:hover i { background: var(--akcent); }
.graf-sloupec span { font-size: .7rem; color: var(--muted); }
.plan { list-style: none; padding: 0; margin: 0; }
.plan li { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--linka); font-size: .95rem; }
.sklad-posledni { color: #B8691D; }
.sklad-vyprodano { color: #8E2F23; }
.tabulka-obal { overflow-x: auto; background: var(--papir); border-radius: var(--r); }
.tabulka { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabulka th { text-align: left; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .9rem 1rem; border-bottom: 1px solid var(--linka); }
.tabulka td { padding: .8rem 1rem; border-bottom: 1px solid var(--linka); vertical-align: top; }
.tabulka a { text-decoration: none; }
.tabulka .vpravo { text-align: right; white-space: nowrap; }
.tabulka .celkem td { font-weight: 700; border-bottom: 0; }
.tabulka tr.klik { cursor: pointer; }
.tabulka tr.klik:hover td { background: var(--krem); }
.tabulka tr.ztlumene td { opacity: .55; }
.stitek-stav { display: inline-block; border-radius: 999px; padding: .2rem .65rem; font: 600 .75rem/1.3 var(--f-text); white-space: nowrap; vertical-align: middle; }
.o-nova { background: var(--mer); color: var(--esp); }
.o-ok { background: rgba(63, 122, 74, .16); color: #2B5A34; }
.o-odesl { background: rgba(79, 124, 172, .18); color: #2F5680; }
.o-sedy { background: rgba(42, 29, 23, .08); color: var(--muted); }
.admin-filtr { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.admin-filtr input { max-width: 300px; }
.admin-filtr select { max-width: 200px; }
.admin-kavy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.admin-kava { display: grid; grid-template-columns: 74px 1fr; gap: 1.1rem; align-items: start; }
.admin-kava.neaktivni { opacity: .6; }
.admin-kava h3 { font-size: 1.3rem; margin-bottom: .2rem; }
.admin-kava h3 span { font: 400 .85rem var(--f-text); color: var(--muted); }
.admin-kava p { font-size: .9rem; margin-bottom: .6rem; }
.prazeni-form { display: flex; gap: .4rem; margin-bottom: .7rem; }
.prazeni-form input { width: 4.5rem; padding: .45rem .6rem; }
.admin-kava-form { grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
.admin-kava-nahled { position: sticky; top: calc(var(--hlavicka) + 1rem); text-align: center; font-size: .82rem; }
.admin-kava-nahled #nahledSacek { width: 200px; margin: 0 auto 1rem; }
.poznamka { background: var(--krem); border-radius: var(--r-m); padding: .8rem 1rem; font-style: italic; }

/* ---------- Cookie lišta ---------- */
.cookie-lista { position: fixed; left: 1rem; bottom: 1rem; z-index: 80; max-width: 380px; background: var(--papir); border-radius: var(--r); padding: 1.1rem 1.2rem; box-shadow: var(--stin); display: flex; gap: 1rem; align-items: center; font-size: .86rem; }
.cookie-lista p { margin: 0; }

/* ---------- Odhalování ---------- */
.odhalit { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.odhalit.videt { opacity: 1; transform: none; }

/* ---------- Responzivita ---------- */
@media (max-width: 1080px) {
  .navigace { gap: 1.1rem; }
  .produkty, .admin-kavy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kosik-mrizka { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 900px) {
  :root { --hlavicka: 62px; }
  .hamburger { display: block; }
  .navigace { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--krem); padding: .5rem 1.25rem 1.2rem; box-shadow: 0 20px 30px -20px rgba(42, 29, 23, .3); display: none; }
  .navigace.otevreno { display: flex; }
  .navigace a { padding: .85rem 0; border-bottom: 1px solid var(--linka); font-size: 1.05rem; }
  .navigace a::after { display: none; }
  .hlavicka.menu-otevreno { background: var(--krem); }

  .uvod { height: 230vh; }
  .uvod-slova { font-size: 25vw; }
  .slovo-l { top: 18vh; }
  .uvod-scena { left: 50%; top: 70%; width: min(50vw, 30vh); top: 68%; }
  .uvod-obsah { align-items: flex-start; }
  .uvod-text, .uvod-zadni { padding-top: calc(var(--hlavicka) + 1.2rem); }
  .uvod-text h1 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .uvod-perex { font-size: 1rem; margin-bottom: 1.2rem; }
  .uvod-scroll { display: none; }

  .kava-radek { min-height: 0; padding: 3.5rem 0; }
  .kava-radek-vnitrek { grid-template-columns: 1fr; gap: 2rem; }
  .obracene .kava-radek-sacek { order: 0; }
  .kava-radek-sacek { width: min(56vw, 260px); }

  .cesta { height: auto; padding: 4rem 0; }
  .cesta-sticky { position: static; height: auto; display: block; }
  .cesta-pas { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 1.25rem 1.5rem; gap: 1rem; align-items: stretch; scrollbar-width: none; scroll-padding-inline: 1.25rem; }
  .cesta-pas::-webkit-scrollbar { display: none; }
  .cesta-uvod { flex: 0 0 82vw; scroll-snap-align: start; align-self: center; }
  .cesta-krok { flex: 0 0 74vw; scroll-snap-align: start; translate: none !important; }
  .cesta-prubeh { display: none; }

  .kamil-mrizka, .detail-mrizka, .kosik-mrizka, .admin-dve, .admin-kava-form { grid-template-columns: 1fr; }
  .recenze, .detail-tri, .obj-info { grid-template-columns: 1fr; }
  .paticka-mrizka { grid-template-columns: 1fr 1fr; }
  .detail-obr { position: relative; top: 0; }
  .souhrn-karta, .admin-kava-nahled { position: static; }
  .kpi { grid-template-columns: 1fr 1fr; }
  .filtr-razeni { margin-left: 0; }
}
@media (max-width: 620px) {
  .kontejner { width: calc(100% - 2rem); }
  .skryt-m { display: none; }
  .logo span { font-size: 1.05rem; }
  .kosik-tlacitko span { display: none; }
  .produkty, .admin-kavy { grid-template-columns: 1fr; }
  .volby { grid-template-columns: repeat(3, 1fr); }
  .kosik-polozka { grid-template-columns: 56px 1fr auto; }
  .kosik-polozka .pocet { grid-column: 2; justify-self: start; }
  .kosik-cena { grid-column: 3; grid-row: 1 / span 2; }
  .adresa, .pole-dve, .pole-tri { grid-template-columns: 1fr; }
  .platba-karta { grid-template-columns: 1fr; }
  .platba-qr { max-width: 200px; }
  .casova-osa li { font-size: .74rem; }
  .cisla { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
  .odpocet { gap: .35rem; }
  .cookie-lista { left: .75rem; right: .75rem; max-width: none; }
  .paticka-mrizka { grid-template-columns: 1fr; gap: 1.5rem; }
  .detail-koupit .btn { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pas-vyhod-jizda { animation-duration: 80s; }   /* pás jede dál, jen pomaleji (zastaví se najetím myši) */
  .uvod-scroll span { animation: none; }
  .odhalit { opacity: 1; transform: none; transition: none; }
  .opona::after { display: none; }
  .opona img, .cesta-foto img { transform: none; }
}