/* beelectronic.net, stránky SmartPubu (16. 10. 2026).
   Hlavička a patička zůstávají z cisty.css. Obsah stránky (main.sp) je tmavý: hluboké uhlí,
   akcent je zelená z loga SmartPubu #7db612. Načítá se jen na stránkách SmartPubu. */

body.sp-stranka { background: #0e100e; }
.sp {
  --sp-bg: #0e100e; --sp-bg-2: #131613; --sp-panel: #181c18; --sp-panel-2: #1e231e;
  --sp-cara: rgba(236, 241, 230, .11); --sp-cara-2: rgba(236, 241, 230, .2);
  --sp-text: #eef1ea; --sp-text-2: #cdd3c8; --sp-tlumeny: #a3ac9e;
  --sp-zelena: #7db612; --sp-zelena-svetla: #a9d95a; --sp-zelena-jemna: rgba(125, 182, 18, .14);
  --sp-papir: #f6f3ea; --sp-r: 24px;
  --color-primary: var(--sp-zelena); --color-accent: var(--sp-zelena-svetla);
  --color-text-muted: var(--sp-tlumeny); --color-muted: var(--sp-tlumeny);
  display: block; background: var(--sp-bg); color: var(--sp-text-2);
}
.sp h1, .sp h2, .sp h3 { color: var(--sp-text); }
.sp a { color: var(--sp-zelena-svetla); }
.sp a:hover { color: #c9ec8c; }
.sp :focus-visible { outline-color: var(--sp-zelena-svetla); }
.sp p { max-width: 68ch; }
.sp strong, .sp b { color: var(--sp-text); }

/* drobečková navigace nad tmavou stránkou */
body.sp-stranka .breadcrumbs { background: #0e100e; border-bottom-color: rgba(236, 241, 230, .11); color: #a3ac9e; }
body.sp-stranka .breadcrumbs a { color: #a3ac9e; }
body.sp-stranka .breadcrumbs a:hover { color: #a9d95a; }
body.sp-stranka .breadcrumbs [aria-current] { color: #eef1ea; }
body.sp-stranka .breadcrumbs li + li::before { color: #59615b; }

/* tlačítka */
.sp .tl--hlavni, .sp .btn--primary { background: var(--sp-zelena); color: #0e100e; box-shadow: 0 10px 30px rgba(125, 182, 18, .22); }
.sp .tl--hlavni:hover, .sp .btn--primary:hover { background: var(--sp-zelena-svetla); color: #0e100e; }
.sp .tl--obrys, .sp .btn--outline { border-color: var(--sp-cara-2); color: var(--sp-text); }
.sp .tl--obrys:hover, .sp .btn--outline:hover { background: var(--sp-text); border-color: var(--sp-text); color: #0e100e; }
.sp .tl--odkaz { color: var(--sp-text); background-image: linear-gradient(var(--sp-zelena), var(--sp-zelena)); }
.sp .tl--odkaz:hover { color: var(--sp-text); }

/* nadtitul a hlavy sekcí */
.sp-nad { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 700 13px/1.3 var(--pismo); letter-spacing: .16em; text-transform: uppercase; color: var(--sp-zelena-svetla); }
.sp-nad::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.sp-hlava { max-width: 820px; margin: 0 0 56px; }
.sp-hlava--stred { margin-left: auto; margin-right: auto; text-align: center; }
.sp-hlava--stred .sp-nad { justify-content: center; }
.sp-hlava--stred p { margin-left: auto; margin-right: auto; }
.sp-hlava h2 { font-size: clamp(30px, 3.8vw, 52px); letter-spacing: -.04em; }
.sp-hlava p { font-size: 18.5px; color: var(--sp-tlumeny); }
.sp-sekce { padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid var(--sp-cara); }
.sp-sekce--2 { background: var(--sp-bg-2); }

/* úvod */
.sp-uvod { position: relative; overflow: hidden; padding: clamp(48px, 6vw, 88px) 0 0; }
.sp-uvod::before { content: ""; position: absolute; inset: -20% -10% auto 35%; height: 780px; background: radial-gradient(closest-side, rgba(125, 182, 18, .2), rgba(125, 182, 18, 0)); pointer-events: none; }
.sp-uvod > .obal { position: relative; }
.sp-uvod > .obal:first-child { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sp-logo-stitek { display: inline-flex; align-items: center; background: #f6f7f2; border-radius: 14px; padding: 10px 16px; margin: 0 0 28px; line-height: 0; }
.sp-logo-stitek img { height: 30px; width: auto; display: block; }
.sp-uvod h1 { font-size: clamp(40px, 5.2vw, 70px); letter-spacing: -.05em; margin-bottom: 22px; }
.sp-uvod h1 span { display: block; color: var(--sp-zelena-svetla); }
.sp-uvod h1.sp-h1-dlouhy { font-size: clamp(36px, 4.3vw, 60px); }
.sp-uvod-perex { font-size: clamp(18px, 1.6vw, 21px); color: var(--sp-text-2); margin-bottom: 14px; }
.sp-uvod-perex + p { color: var(--sp-tlumeny); }
.sp-uvod .tlacitka { margin-top: 30px; }
.sp-uvod-scena { position: relative; padding-bottom: 40px; }
.sp-uvod-karta { position: absolute; right: -8px; bottom: 0; width: 38%; min-width: 180px; border-radius: 18px; overflow: hidden; border: 1px solid var(--sp-cara-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .55); background: #fff; line-height: 0; }
.sp-uvod-karta img { display: block; width: 100%; height: auto; }
.sp-fakta { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(48px, 6vw, 80px) 0 0; border-top: 1px solid var(--sp-cara); }
.sp-fakta div { padding: 26px 24px 30px 0; }
.sp-fakta div + div { padding-left: 24px; border-left: 1px solid var(--sp-cara); }
.sp-fakta dt { font-size: 14px; color: var(--sp-tlumeny); order: 2; }
.sp-fakta dd { margin: 0 0 4px; font: 800 clamp(22px, 2.1vw, 29px)/1.1 var(--pismo-n); letter-spacing: -.03em; color: var(--sp-text); }
.sp-fakta div { display: flex; flex-direction: column; }

/* zařízení: monitor a telefon */
.sp-monitor { position: relative; background: #050605; border-radius: 18px; padding: 10px; border: 1px solid var(--sp-cara-2); box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4); }
.sp-monitor img { display: block; width: 100%; height: auto; border-radius: 9px; }
.sp-monitor::after { content: ""; position: absolute; left: 50%; bottom: -26px; width: 22%; height: 26px; transform: translateX(-50%); background: linear-gradient(#1b1f1b, #0b0d0b); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.sp-okno { border-radius: 16px; overflow: hidden; border: 1px solid var(--sp-cara-2); background: #fff; line-height: 0; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.sp-okno img { display: block; width: 100%; height: auto; }
.sp-telefon { position: relative; width: 300px; max-width: 100%; margin: 0 auto; background: #050605; border-radius: 44px; padding: 12px; border: 1px solid var(--sp-cara-2); box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
.sp-telefon::before { content: ""; position: absolute; top: 20px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: #050605; z-index: 2; }
.sp-telefon-displej { position: relative; border-radius: 33px; overflow: hidden; background: #f4f6f0; color: #1d241d; font-size: 13px; line-height: 1.35; min-height: 560px; padding: 50px 16px 18px; }
.sp-telefon-displej b { color: #1d241d; }
.sp-tel-lista { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sp-tel-lista b { font: 800 19px/1.2 var(--pismo-n); letter-spacing: -.02em; }
.sp-tel-stav { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #3f6b0e; background: #e4f0d2; padding: 4px 9px; border-radius: 999px; }
.sp-tel-stav::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4a7d10; }
.sp-tel-hledat { background: #fff; border: 1px solid #dfe3d8; border-radius: 12px; padding: 10px 12px; color: #6a7366; margin-bottom: 12px; }
.sp-tel-stitky { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.sp-tel-stitky span { padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid #dfe3d8; font-size: 12px; }
.sp-tel-stitky span:first-child { background: #3f6b0e; border-color: #3f6b0e; color: #fff; }
.sp-tel-polozky { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.sp-tel-polozky li { display: flex; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid #e3e6dd; border-left: 4px solid #4a7d10; border-radius: 12px; padding: 11px 12px; }
.sp-tel-polozky small { display: block; color: #6a7366; font-size: 11.5px; }
.sp-tel-odeslat { display: block; text-align: center; background: #3f6b0e; color: #fff; border-radius: 14px; padding: 13px; font-weight: 700; }
.sp-tel-zprava { margin-top: 10px; text-align: center; font-size: 12px; color: #3f6b0e; font-weight: 600; }
.sp-ilustrace { display: block; margin-top: 18px; text-align: center; font-size: 13px; color: var(--sp-tlumeny); }

/* dlaždice (bento) */
.sp-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.sp-dlazdice { grid-column: span 4; position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--sp-panel-2), var(--sp-panel)); border: 1px solid var(--sp-cara); border-radius: var(--sp-r); padding: 30px 28px; overflow: hidden; transition: border-color .25s; }
.sp-dlazdice:hover { border-color: rgba(125, 182, 18, .45); }
.sp-dlazdice--6 { grid-column: span 6; }
.sp-dlazdice--8 { grid-column: span 8; }
.sp-dlazdice--12 { grid-column: span 12; }
.sp-dlazdice h3 { font-size: 22px; margin: 0 0 10px; }
.sp-dlazdice p { color: var(--sp-tlumeny); margin: 0 0 12px; font-size: 16px; }
.sp-dlazdice p:last-child { margin-bottom: 0; }
.sp-dlazdice-ikona { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--sp-zelena-jemna); color: var(--sp-zelena-svetla); margin-bottom: 22px; }
.sp-dlazdice-ikona svg { width: 22px; height: 22px; }
.sp-dlazdice-obr { margin: auto -28px -30px; padding-top: 24px; line-height: 0; }
.sp-dlazdice-obr img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: left top; border-top: 1px solid var(--sp-cara); }
.sp-dlazdice-odkaz { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 15px; text-decoration: none; }
.sp-dlazdice-odkaz::after { content: " \2192"; }

/* rozdělené bloky */
.sp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.sp-split--obr-vlevo > :first-child { order: 2; }
.sp-split--nahore { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.sp-split--nahore > :first-child { max-width: 820px; }
.sp-split--nahore .sp-okno { margin: 0; }
.sp-seznam { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--sp-cara); }
.sp-seznam li { padding: 18px 0 18px 34px; border-bottom: 1px solid var(--sp-cara); position: relative; color: var(--sp-tlumeny); font-size: 16px; }
.sp-seznam li::before { content: ""; position: absolute; left: 2px; top: 25px; width: 14px; height: 8px; border-left: 2px solid var(--sp-zelena); border-bottom: 2px solid var(--sp-zelena); transform: rotate(-45deg); }
.sp-seznam b { display: block; color: var(--sp-text); font-size: 17px; margin-bottom: 2px; }

/* kuchyň: situace a papírové bony na liště */
.sp-situace { display: grid; gap: 14px; }
.sp-situace article { background: var(--sp-panel); border: 1px solid var(--sp-cara); border-radius: 20px; padding: 24px 26px; }
.sp-situace h3 { font-size: 19px; margin: 0 0 6px; }
.sp-situace p { margin: 0; color: var(--sp-tlumeny); font-size: 16px; }
.sp-situace .sp-host { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-zelena-svetla); font-weight: 700; margin-bottom: 8px; }
.sp-lista { position: relative; padding: 34px 18px 0; }
.sp-lista::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; border-radius: 6px; background: linear-gradient(#b9bfb5, #7d847a); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.sp-bony { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.sp-bon { position: relative; margin: -22px 0 0; background: var(--sp-papir); color: #1b1d1a; font: 500 13.5px/1.5 ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; padding: 26px 18px 30px; box-shadow: 0 24px 40px rgba(0, 0, 0, .45); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 94% 100%, 88% calc(100% - 8px), 82% 100%, 76% calc(100% - 8px), 70% 100%, 64% calc(100% - 8px), 58% 100%, 52% calc(100% - 8px), 46% 100%, 40% calc(100% - 8px), 34% 100%, 28% calc(100% - 8px), 22% 100%, 16% calc(100% - 8px), 10% 100%, 4% calc(100% - 8px), 0 100%); }
.sp-bon + .sp-bon { margin-top: 0; }
.sp-bon p { margin: 0; max-width: none; color: #1b1d1a; }
.sp-bon .sp-bon-hlava { text-align: center; color: #555b52; }
.sp-bon .sp-bon-stul { text-align: center; font-weight: 800; font-size: 22px; margin: 2px 0 10px; }
.sp-bon .sp-bon-chod { border-top: 1px dashed #8a8f86; margin-top: 10px; padding-top: 8px; color: #555b52; }
.sp-bon b { color: #1b1d1a; font-weight: 800; }
.sp-bon .sp-bon-uprava { padding-left: 2.4ch; }
.sp-bon .sp-bon-uprava mark { background: #1b1d1a; color: var(--sp-papir); padding: 0 4px; }

/* mapa */
.sp-mapa-scena { position: relative; margin-bottom: 56px; }
.sp-mapa-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--sp-cara); }
.sp-mapa-body div { padding: 26px 26px 0 0; }
.sp-mapa-body div + div { padding-left: 26px; border-left: 1px solid var(--sp-cara); }
.sp-mapa-body h3 { font-size: 19px; margin-bottom: 8px; }
.sp-mapa-body p { color: var(--sp-tlumeny); font-size: 16px; margin: 0; }
.sp-mapa-body span { display: block; font: 800 13px/1 var(--pismo-n); color: var(--sp-zelena-svetla); letter-spacing: .1em; margin-bottom: 14px; }

/* statistiky */
.sp-statistiky { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sp-stat { background: var(--sp-panel); border: 1px solid var(--sp-cara); border-radius: 20px; padding: 26px 24px; }
.sp-stat h3 { font-size: 18px; margin-bottom: 14px; }
.sp-stat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-stat li { font-size: 14px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--sp-cara-2); color: var(--sp-text-2); }
.sp-stat svg { display: block; width: 100%; height: 64px; margin-bottom: 18px; color: var(--sp-zelena); }
.sp-pozn { margin: 28px 0 0; color: var(--sp-tlumeny); font-size: 15px; }

/* fotky (sloty pro fotky od Evžena) */
.sp-fotky { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.sp-foto { position: relative; margin: 0; border-radius: var(--sp-r); overflow: hidden; border: 1px solid var(--sp-cara); background: radial-gradient(120% 90% at 20% 0%, #2a3324 0%, #161a15 55%, #0f120f 100%); aspect-ratio: 3 / 2; }
.sp-fotky .sp-foto:first-child { grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.sp-foto > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-foto--nahradni > img { position: absolute; width: 78%; height: auto; left: 11%; top: 12%; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 50px rgba(0, 0, 0, .55); opacity: .92; }
.sp-foto--nahradni .sp-lista { position: absolute; left: 9%; right: 9%; top: 16%; }

.sp-foto--nahradni .sp-telefon { position: absolute; left: 50%; top: 7%; width: 300px; transform: translateX(-50%) scale(.6); transform-origin: top center; }
.sp-foto figcaption { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 56px 24px 20px; background: linear-gradient(rgba(14, 16, 14, 0), rgba(14, 16, 14, .96) 55%); color: var(--sp-text); font-size: 15px; line-height: 1.4; }
.sp-foto figcaption b { display: block; font: 700 17px/1.3 var(--pismo-n); }

/* reference */
.sp-reference { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-reference figure { margin: 0; display: flex; flex-direction: column; background: var(--sp-panel); border: 1px solid var(--sp-cara); border-radius: var(--sp-r); padding: 30px 28px; }
.sp-reference figure:first-child { background: linear-gradient(160deg, #24301a, #171c15 70%); border-color: rgba(125, 182, 18, .35); }
.sp-reference blockquote { margin: 0 0 24px; font: 600 19px/1.45 var(--pismo-n); letter-spacing: -.01em; color: var(--sp-text); }
.sp-reference figcaption { margin-top: auto; font-size: 14px; color: var(--sp-tlumeny); line-height: 1.45; }
.sp-reference figcaption b { display: block; font-size: 15.5px; }
.sp-reference figcaption a { color: inherit; }
.sp .hvezdy { color: var(--sp-zelena-svetla); }

/* cena */
.sp-cena { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.sp-cena-hlavni { background: linear-gradient(160deg, #24301a, #161b14 70%); border: 1px solid rgba(125, 182, 18, .35); border-radius: 28px; padding: clamp(30px, 4vw, 48px); }
.sp-cena-hlavni .sp-castka { font: 800 clamp(56px, 7vw, 92px)/1 var(--pismo-n); letter-spacing: -.05em; color: var(--sp-text); margin: 6px 0 4px; }
.sp-cena-hlavni .sp-castka small { font-size: .32em; letter-spacing: -.01em; color: var(--sp-tlumeny); font-weight: 600; margin-left: 8px; }
.sp-cena-hlavni p { color: var(--sp-text-2); }
.sp-cena-detail { background: var(--sp-panel); border: 1px solid var(--sp-cara); border-radius: 28px; padding: clamp(28px, 3.5vw, 40px); }
.sp-cena-detail h3 { font-size: 19px; }
.sp-tabulka { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 16px; }
.sp-tabulka th, .sp-tabulka td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--sp-cara); font-weight: 400; color: var(--sp-text-2); }
.sp-tabulka td { text-align: right; font-weight: 700; color: var(--sp-text); white-space: nowrap; }
.sp-cena-detail ul { margin: 0; padding-left: 20px; color: var(--sp-tlumeny); font-size: 15.5px; }
.sp-cena-detail li { margin-bottom: 6px; }

/* podpora a průvodce */
.sp-dvojice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* obecné součásti webu na tmavém podkladu */
.sp .faq-list { border-top-color: var(--sp-cara-2); }
.sp .faq-item { border-bottom-color: var(--sp-cara); }
.sp .faq-item summary { color: var(--sp-text); }
.sp .faq-item summary:hover { color: var(--sp-zelena-svetla); }
.sp .faq-item summary::after { border-color: var(--sp-cara-2); background: linear-gradient(var(--sp-zelena-svetla), var(--sp-zelena-svetla)) center / 12px 2px no-repeat, linear-gradient(var(--sp-zelena-svetla), var(--sp-zelena-svetla)) center / 2px 12px no-repeat; }
.sp .faq-item[open] summary::after { background-color: var(--sp-zelena-jemna); }
.sp .faq-item > p { color: var(--sp-tlumeny); }
.sp .related-links a { background: var(--sp-panel); border-color: var(--sp-cara); color: var(--sp-tlumeny); }
.sp .related-links a:hover { border-color: var(--sp-zelena); }
.sp .related-links strong { color: var(--sp-text); }
.sp .poptavka-call, .sp .poptavka-form { background: var(--sp-panel); border-color: var(--sp-cara); }
.sp .poptavka-call svg { color: var(--sp-zelena-svetla); }
.sp .poptavka-phone, .sp .poptavka-phone:hover { color: var(--sp-text); background-image: linear-gradient(rgba(125, 182, 18, .55), rgba(125, 182, 18, .55)); }
.sp .poptavka-call p, .sp .poptavka-divider { color: var(--sp-tlumeny); }
.sp .contact-form label { color: var(--sp-text-2); }
.sp .contact-form input[type="text"], .sp .contact-form input[type="email"], .sp .contact-form input[type="tel"], .sp .contact-form textarea { background: #0f120f; border-color: var(--sp-cara-2); color: var(--sp-text); }
.sp .contact-form input:focus, .sp .contact-form textarea:focus { border-color: var(--sp-zelena); box-shadow: 0 0 0 4px rgba(125, 182, 18, .18); }
.sp .consent { color: var(--sp-tlumeny) !important; }
.sp .consent input { accent-color: var(--sp-zelena); }
.sp .form-note { background: var(--sp-zelena-jemna); color: var(--sp-zelena-svetla); }
.sp-kroky { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: krok; }
.sp-kroky li { counter-increment: krok; background: var(--sp-panel); border: 1px solid var(--sp-cara); border-radius: 20px; padding: 26px 24px; color: var(--sp-tlumeny); font-size: 16px; }
.sp-kroky li::before { content: counter(krok, decimal-leading-zero); display: block; font: 800 14px/1 var(--pismo-n); color: var(--sp-zelena-svetla); letter-spacing: .1em; margin-bottom: 14px; }
.sp-kroky b { display: block; color: var(--sp-text); font: 700 19px/1.3 var(--pismo-n); margin-bottom: 4px; }
.sp-zaver { text-align: center; }
.sp-zaver .tlacitka { justify-content: center; margin-top: 28px; }
.sp-zaver p { margin-left: auto; margin-right: auto; }

/* Úvod: text nahoře na střed, pod ním velký monitor s pokladnou */
.sp-uvod--nahore > .obal:first-child { grid-template-columns: minmax(0, 1fr); gap: 56px; justify-items: center; }
.sp-uvod--nahore > .obal:first-child > div:first-child { max-width: 900px; text-align: center; }
.sp-uvod--nahore p { margin-left: auto; margin-right: auto; max-width: 780px; }
.sp-uvod--nahore .tlacitka { justify-content: center; }
.sp-uvod--nahore h1 span { display: inline; }
.sp-uvod--nahore .sp-uvod-scena { width: 100%; max-width: 1100px; padding-bottom: 56px; }
.sp-uvod--nahore .sp-uvod-karta { width: 30%; right: -20px; }
.sp-uvod--nahore::before { inset: 20% -10% auto -10%; }

/* Úvod stránek funkcí (mapa, bony, denní menu): text vlevo, ukázka vpravo, na mobilu pod textem */
.sp-uvod--funkce > .obal:first-child { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.sp-uvod--funkce .sp-nad { margin-bottom: 20px; }
.sp-uvod--funkce h1.sp-h1-dlouhy { font-size: clamp(34px, 3.7vw, 54px); letter-spacing: -.04em; text-wrap: balance; }
.sp-uvod--funkce .sp-uvod-perex { max-width: 34em; }
.sp-uvod--funkce .sp-uvod-scena { margin: 0; padding-bottom: 30px; }
.sp-uvod-papir { display: grid; justify-items: center; }
.sp-uvod-papir .menu-listek { width: min(400px, 100%); transform: rotate(-1.5deg); }
.sp-uvod-papir .menu-listek li { font-size: 15px; }
.sp-uvod-bon { position: relative; width: min(330px, 100%); padding-top: 9px; }
.sp-uvod-bon::before { content: ""; position: absolute; z-index: 1; top: 0; left: -16px; right: -16px; height: 18px; border-radius: 9px; background: #050605; border: 1px solid var(--sp-cara-2); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.sp-uvod-bon .sp-bon { margin: 0; padding-top: 30px; font-size: 14.5px; }
.sp-uvod-papir .sp-ilustrace { margin-top: 22px; }
@media (max-width: 640px) {
  .sp-uvod-papir .menu-listek { transform: none; padding: 24px 18px; }
  .sp-uvod-bon::before { left: -6px; right: -6px; }
}
@media (max-width: 1080px) {
  .sp-uvod > .obal:first-child, .sp-uvod--funkce > .obal:first-child { grid-template-columns: minmax(0, 1fr); }
  .sp-dlazdice, .sp-dlazdice--6, .sp-dlazdice--8 { grid-column: span 6; }
  .sp-statistiky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-reference { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .sp-split, .sp-cena, .sp-dvojice { grid-template-columns: minmax(0, 1fr); }
  .sp-split--obr-vlevo > :first-child { order: 0; }
  .sp-fakta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-fakta div:nth-child(3) { padding-left: 0; border-left: 0; }
  .sp-fakta div:nth-child(n+3) { border-top: 1px solid var(--sp-cara); }
  .sp-mapa-body, .sp-kroky { grid-template-columns: minmax(0, 1fr); }
  .sp-mapa-body div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--sp-cara); margin-top: 22px; }
  .sp-fotky { grid-template-columns: minmax(0, 1fr); }
  .sp-fotky .sp-foto:first-child { grid-row: auto; aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) {
  .sp-dlazdice, .sp-dlazdice--6, .sp-dlazdice--8 { grid-column: span 12; }
  .sp-statistiky, .sp-bony { grid-template-columns: minmax(0, 1fr); }
  .sp-bon { margin-top: -22px; }
  .sp-bon + .sp-bon { margin-top: 0; }
  .sp-uvod-karta, .sp-uvod--nahore .sp-uvod-karta { width: 46%; right: 0; }
  .sp-dlazdice { padding: 26px 22px; }
  .sp-dlazdice-obr { margin: auto -22px -26px; }
  .sp-foto--nahradni .sp-telefon { transform: translateX(-50%) scale(.5); }
  .sp-foto--nahradni .sp-lista { top: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-dlazdice, .sp .related-links a { transition: none; }
}
.sp-foto--nahradni .sp-bony { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-foto--nahradni .sp-bon + .sp-bon { margin-top: -22px; }
@media (max-width: 640px) {
  .sp-foto--nahradni .sp-bon { font-size: 8.5px; padding: 18px 10px 20px; }
  .sp-foto--nahradni .sp-bon .sp-bon-stul { font-size: 14px; }
  .sp-foto--nahradni .sp-bony { gap: 10px; }
}
.sp-telefon-displej--snimek { padding: 36px 0 0; min-height: 0; background: #fff; }
.sp-telefon-displej--snimek img { display: block; width: 100%; height: auto; }
/* snímky telefonu ve skutečné velikosti (390 px): písmo čitelné jako v telefonu (2. 11. 2026) */
.sp-telefon:has(> .sp-telefon-displej--snimek) { width: 380px; }

/* recenze a loga zákazníků na tmavém podkladu (součástky .rec-* a .loga-rada z cisty.css) */
.sp .rec-nad { color: var(--sp-zelena-svetla); }
.sp .rec-kdo { color: var(--sp-tlumeny); }
.sp .rec-kdo b { color: var(--sp-text); }
.sp .rec-stitek--sp { background: var(--sp-zelena-jemna); color: var(--sp-zelena-svetla); box-shadow: inset 0 0 0 1px rgba(125, 182, 18, .35); }
.sp .rec-logo { border-color: transparent; }
.sp .rec-logo--text { background: #f6f7f2; color: #0e100e; }
.sp .rec-velky { background: linear-gradient(160deg, #24301a, #161b14 70%); border: 1px solid rgba(125, 182, 18, .35); }
.sp .rec-velky-pata .rec-stitek { background: var(--sp-zelena); color: #0e100e; box-shadow: none; }
.sp .rec-funkce { background: var(--sp-panel); border-left-color: var(--sp-zelena); }
.sp .rec-funkce blockquote p { color: var(--sp-text); }
.sp .rec-okraj { background: var(--sp-panel); border: 1px solid var(--sp-cara); }
.sp .rec-okraj .rec-nad::before { background: var(--sp-zelena); }
.sp .rec-okraj blockquote p { color: var(--sp-text-2); }
.sp .rec-okraj-tel { color: var(--sp-tlumeny); border-top-color: var(--sp-cara); }
.sp .rec-okraj-tel a { color: var(--sp-text); }
.sp .rec-pripad { background: var(--sp-panel); border-color: var(--sp-cara); }
.sp .rec-pripad-l { border-color: var(--sp-cara); background: linear-gradient(160deg, #24301a, #181c18 75%); }
.sp .rec-pripad-nazev { color: var(--sp-text); }
.sp .rec-pripad-mesto, .sp .rec-pripad-k { color: var(--sp-tlumeny); }
.sp .rec-pripad--velky .rec-pripad-udaj b { color: var(--sp-text); background: linear-gradient(transparent 66%, rgba(125, 182, 18, .6) 66%); }
.sp .rec-pripad--velky .rec-pripad-udaj span { color: var(--sp-text-2); }
.sp .rec-pripad-p blockquote p { color: var(--sp-text); }
.sp .loga-rada { background: var(--sp-panel); border-color: var(--sp-cara); }
.sp .loga-rada > p { color: var(--sp-tlumeny); }
.sp .loga-rada-podnik { color: var(--sp-text); }
.sp a.loga-rada-podnik:hover { color: var(--sp-zelena-svetla); }
.sp-uvod .loga-rada { margin: 8px auto 56px; justify-content: center; }
.sp-uvod .loga-rada > p { margin: 0; }
/* jediný slot na fotku vedle textu: roztáhne se na výšku sousedního sloupce (dřív se scvrkl na čáru) */
.sp-split > .sp-fotky:has(> .sp-foto:only-child) { align-self: stretch; }
.sp-fotky > .sp-foto:only-child { height: 100%; min-height: 440px; aspect-ratio: auto; }

/* ---------- Stránky funkcí SmartPubu (21. 10. 2026): mapa stolů, bony do kuchyně, denní menu, dýško ---------- */
.sp-faq-uzky { max-width: 860px; margin: 0 auto; }
.sp-situace--mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-okno--male { max-width: 660px; margin: 48px auto 0; }
.sp-vybaveni { display: grid; gap: 16px; }
.sp-vybaveni .sp-okno:last-child { max-width: 72%; justify-self: end; }
.sp-papir { background: var(--sp-papir); color: #2b322d; border-radius: var(--sp-r); padding: clamp(24px, 3vw, 36px); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.sp-papir h3 { color: #111712; font-size: 22px; margin-bottom: 12px; }
.sp-papir p { color: #2b322d; }
.sp-papir p:last-child { margin-bottom: 0; }
.sp-papir a { color: #3f6b0e; }
.sp-papir a:hover { color: #2c4d09; }

/* společné prvky ukázek */
.sp [data-bon-sim] button, .sp [data-menu-demo] button, .sp [data-dysko-demo] button { font: inherit; cursor: pointer; }
.sp [data-bon-sim] button:disabled { cursor: not-allowed; }
.bon-sim-stoly, .dysko-demo-volby, .menu-demo-karty { display: flex; flex-wrap: wrap; gap: 8px; }
.bon-sim-stoly button, .dysko-demo-volby button, .menu-demo-karty button, .bon-sim-poznamky button {
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sp-cara-2); background: transparent; color: var(--sp-text); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.bon-sim-stoly button:hover, .dysko-demo-volby button:hover, .menu-demo-karty button:hover, .bon-sim-poznamky button:hover { border-color: var(--sp-zelena); }
.bon-sim-stoly [aria-pressed="true"], .dysko-demo-volby [aria-pressed="true"], .menu-demo-karty [aria-selected="true"] { background: var(--sp-zelena); border-color: var(--sp-zelena); color: #0e100e; }

/* mapa stolů */
.bon-sim-k, .dysko-demo-k, .menu-demo-obsluha-k { margin: 0 0 6px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-tlumeny); font-weight: 700; }

/* simulátor bonu */
.bon-sim { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
.bon-sim-pokladna { background: var(--sp-panel); border: 1px solid var(--sp-cara); border-radius: var(--sp-r); padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 18px; }
.bon-sim-dlazdice { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sp .bon-sim-dlazdice button { min-height: 84px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--sp-cara-2); background: #262b25; color: var(--sp-text); display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.bon-sim-dlazdice button b { font-size: 15px; line-height: 1.25; }
.bon-sim-dlazdice button span { font-size: 14px; color: var(--sp-tlumeny); }
.sp .bon-sim-dlazdice .bon-sim-napoj { background: #1f2630; }
.sp .bon-sim-dlazdice button:hover:not(:disabled) { border-color: var(--sp-zelena); }
.sp .bon-sim-dlazdice button:disabled { opacity: .55; }
.bon-sim-dlazdice .bon-sim-doslo { color: #fff; background: #b4372f; border-radius: 6px; padding: 1px 8px; align-self: flex-start; font-weight: 700; }
.bon-sim-moznosti { background: var(--sp-bg); border: 1px solid var(--sp-zelena); border-radius: 16px; padding: 18px; }
.bon-sim-moznosti[hidden] { display: none; }
.bon-sim-moznosti-nazev { font: 800 18px/1.3 var(--pismo-n); color: var(--sp-text); margin: 0 0 12px; }
.bon-sim-skupina { border: 0; border-top: 1px solid var(--sp-cara); margin: 0; padding: 12px 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bon-sim-skupina legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-weight: 700; color: var(--sp-text); font-size: 15px; }
.bon-sim-skupina label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 15px; color: var(--sp-text-2); cursor: pointer; }
.bon-sim-skupina input { width: 18px; height: 18px; accent-color: var(--sp-zelena); margin: 0; }
.bon-sim-povinne { margin-left: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--sp-zelena-jemna); color: var(--sp-zelena-svetla); border-radius: 6px; padding: 2px 6px; }
.bon-sim-chyba { color: #ff9b8f; font-weight: 600; margin: 4px 0 0; }
.bon-sim-chyba[hidden] { display: none; }
.bon-sim-moznosti-akce, .bon-sim-akce { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.bon-sim-moznosti-akce .tl, .bon-sim-akce .tl { min-height: 46px; padding: 0 20px; }
.sp .bon-sim-akce .tl:disabled { opacity: .45; box-shadow: none; }
.bon-sim-polozky { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sp-cara); }
.bon-sim-polozky li { padding: 10px 0; border-bottom: 1px solid var(--sp-cara); font-size: 15px; }
.bon-sim-prazdno { color: var(--sp-tlumeny); }
.bon-sim-radek { display: flex; align-items: center; gap: 12px; }
.bon-sim-radek b { flex: 1; }
.sp .bon-sim-pryc { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--sp-cara-2); background: transparent; color: var(--sp-tlumeny); line-height: 1; }
.sp .bon-sim-pryc:hover { color: var(--sp-text); border-color: var(--sp-text); }
.bon-sim-volba, .bon-sim-pozn { display: block; padding-left: 2.4ch; color: var(--sp-tlumeny); font-size: 14px; }
.bon-sim-pozn { color: var(--sp-zelena-svetla); }
.bon-sim-polozky .bon-sim-chod { text-align: center; color: var(--sp-tlumeny); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; border-bottom-style: dashed; }
.bon-sim-polozky .bon-sim-soucet { text-align: right; font-weight: 700; color: var(--sp-text); border-bottom: 0; }
.bon-sim-poznamky { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--sp-tlumeny); margin-top: 12px; }
.sp .bon-sim-poznamky button { min-height: 38px; font-size: 14px; }
.bon-sim-kuchyn { display: grid; gap: 16px; }
.bon-sim-tiskarny { display: grid; gap: 16px; }
.bon-sim-tiskarna { background: #262b25; border: 1px solid var(--sp-cara-2); border-radius: 18px; padding: 14px 16px 18px; }
.bon-sim-tiskarna-nazev { margin: 0 0 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-tlumeny); font-weight: 700; }
.bon-sim-sterbina { height: 8px; border-radius: 4px; background: #0a0b0a; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8); margin: 0 6px; }
.bon-sim-vystup { margin: 0 14px; min-height: 64px; overflow: hidden; }
.bon-sim-vystup .sp-bon { margin: 0; animation: bon-vyjede .7s ease-out both; }
.bon-sim-ceka { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--sp-tlumeny); }
.bon-sim-cas { text-align: center; color: #555b52; font-size: 12px; margin: -6px 0 8px !important; }
@keyframes bon-vyjede { from { transform: translateY(-100%); } to { transform: none; } }
.bon-sim-sklad { background: var(--sp-panel); border: 1px solid var(--sp-cara); border-radius: 18px; padding: 16px 18px; font-size: 14.5px; }
.bon-sim-sklad[hidden] { display: none; }
.bon-sim-sklad-nazev { margin: 0 0 6px; font-weight: 700; color: var(--sp-text); }
.bon-sim-sklad ul { margin: 0 0 8px; padding-left: 18px; }
.bon-sim-sklad-pozn { margin: 0; color: var(--sp-tlumeny); font-size: 13.5px; }

/* denní menu */
.menu-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.menu-demo-vstup, .menu-demo-obsluha { background: var(--sp-panel); border: 1px solid var(--sp-cara); border-radius: var(--sp-r); padding: clamp(18px, 2.4vw, 26px); }
.menu-demo-obsluha { grid-column: 1 / -1; }
.menu-demo-pole, .menu-demo-radek label { display: grid; gap: 4px; font-size: 13px; color: var(--sp-tlumeny); font-weight: 600; }
.menu-demo input { font: inherit; font-size: 15px; color: var(--sp-text); background: var(--sp-bg); border: 1px solid var(--sp-cara-2); border-radius: 10px; min-height: 44px; padding: 0 12px; width: 100%; }
.menu-demo input:focus { outline: none; border-color: var(--sp-zelena); box-shadow: 0 0 0 3px var(--sp-zelena-jemna); }
.menu-demo-pole--den { margin-bottom: 14px; }
.menu-demo-jidla { display: grid; gap: 12px; }
.menu-demo-radek { display: grid; grid-template-columns: minmax(0, 1fr) 84px 76px; gap: 8px; padding-top: 12px; border-top: 1px solid var(--sp-cara); }
.menu-demo-vystup { display: grid; gap: 14px; align-content: start; }
.menu-demo-panel[hidden] { display: none; }
.menu-listek { background: var(--sp-papir); color: #1b1d1a; border-radius: 6px; padding: 28px 26px; box-shadow: 0 24px 40px rgba(0, 0, 0, .45); font-family: Georgia, 'Times New Roman', serif; }
.menu-listek p { margin: 0; color: #1b1d1a; max-width: none; }
.menu-listek-podnik { text-align: center; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; }
.menu-listek-nadpis { text-align: center; font-size: 30px; font-weight: 700; margin: 4px 0 !important; }
.menu-listek-den { text-align: center; font-style: italic; margin-bottom: 16px !important; }
.menu-listek ul, .menu-obrazek ul { list-style: none; margin: 0; padding: 0; }
.menu-listek li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dotted #8a8f86; font-size: 16px; }
.menu-listek li b, .menu-obrazek li b { white-space: nowrap; }
.sp .menu-listek li b { color: #1b1d1a; }
.menu-listek li.is-doslo span, .menu-obrazek li.is-doslo span { text-decoration: line-through; opacity: .6; }
.menu-listek-pata { text-align: center; font-size: 13px; margin-top: 14px !important; color: #555b52 !important; }
.menu-obrazek { aspect-ratio: 1; max-width: 420px; margin: 0 auto; width: 100%; background: linear-gradient(160deg, #2c4d09, #111712); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; color: #fff; }
.menu-obrazek p { margin: 0; max-width: none; }
.menu-obrazek-k { font: 800 30px/1.1 var(--pismo-n); color: #c5f06a; }
.menu-obrazek-den { color: #e9ecdf; margin: 4px 0 16px !important; }
.menu-obrazek li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); font-size: 15px; color: #fff; }
.menu-obrazek li b { color: #c5f06a; }
.menu-obrazek-podpis { margin-top: auto !important; padding-top: 12px; font-size: 12px; color: #cdd3c8; }
.menu-text { margin: 0; white-space: pre-wrap; background: var(--sp-bg); border: 1px solid var(--sp-cara-2); border-radius: 14px; padding: 18px; font: 15px/1.6 var(--pismo); color: var(--sp-text-2); }
.menu-demo-obsluha ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.menu-demo-obsluha li { background: #262b25; border: 1px solid var(--sp-cara-2); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; font-size: 15px; color: var(--sp-text); }
.menu-demo-obsluha li small { color: var(--sp-zelena-svetla); font-weight: 600; }
.menu-demo-obsluha li.is-doslo { opacity: .6; }
.menu-demo-obsluha li.is-doslo small { color: #ff9b8f; }
.sp .menu-demo-prodat { justify-self: start; margin-top: 4px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sp-cara-2); background: transparent; color: var(--sp-text); font-size: 13.5px; font-weight: 600; }
.sp .menu-demo-prodat:hover:not(:disabled) { border-color: var(--sp-zelena); }
.sp .menu-demo-prodat:disabled { opacity: .5; cursor: not-allowed; }

/* dýško */
.dysko-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dysko-demo-vstup { background: var(--sp-panel); border: 1px solid var(--sp-cara); border-radius: var(--sp-r); padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 10px; }
.dysko-demo-volby { margin-bottom: 10px; }
.dysko-demo-historie { border-top: 1px solid var(--sp-cara); padding-top: 14px; display: grid; gap: 8px; }
.dysko-demo-sloupec { display: grid; grid-template-columns: 112px minmax(0, 1fr) 48px; align-items: center; gap: 10px; font-size: 14.5px; color: var(--sp-text-2); }
.dysko-demo-sloupec i { display: block; height: 12px; border-radius: 6px; background: rgba(236, 241, 230, .22); }
.dysko-demo-sloupec.is-nej i { background: var(--sp-zelena); }
.dysko-demo-sloupec.is-nej b { color: var(--sp-zelena-svetla); }
.dysko-demo-sloupec b { text-align: right; }
.dysko-demo-bez { margin: 0; color: var(--sp-tlumeny); font-size: 15px; }
.dysko-demo-okno { background: #f6f7f2; color: #111712; border-radius: var(--sp-r); padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.dysko-demo-okno p { color: #2b322d; }
.dysko-demo-titul { font: 800 22px/1.2 var(--pismo-n); color: #111712 !important; margin: 0 0 14px; }
.dysko-demo-dlazdice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.sp .dysko-demo-uhrada, .dysko-demo-host { border-radius: 16px; border: 2px solid #d7dbd0; background: #fff; padding: 14px 16px; text-align: left; color: #111712; display: grid; gap: 4px; align-content: start; }
.dysko-demo-uhrada small, .dysko-demo-host small { font-size: 13px; color: #59615b; font-weight: 600; }
.dysko-demo-uhrada b, .dysko-demo-host b { font: 800 clamp(24px, 2.6vw, 32px)/1.1 var(--pismo-n); color: #111712; }
.sp .dysko-demo-uhrada.is-vybrano, .dysko-demo-host.is-vybrano { border-color: #4a7d10; background: #eef5e3; }
.dysko-demo-krok { display: flex; gap: 8px; margin-top: 6px; }
.sp .dysko-demo-krok button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #c9cec2; background: #fff; color: #111712; font-size: 22px; font-weight: 700; line-height: 1; }
.sp .dysko-demo-krok button:hover { border-color: #4a7d10; }
.dysko-demo-ztoho { margin: 12px 0 6px; font-weight: 700; color: #3f6b0e !important; }
.dysko-demo-proc { margin: 0; font-size: 15px; }
.sp-dysko-fakta { margin-top: 40px; align-items: start; }
.sp-dysko-fakta .sp-seznam { margin-top: 0; }

/* Mapa stolů: živá ukázka ze skutečných snímků hlavní obrazovky (27. 10. 2026) */
.mz { --mz-zel: #4a7d10; --mz-text: #1d2418; --mz-sedy: #5f6a57; --mz-ram: #dfe5d6; --mz-pod: #f4f6ef; }
.mz-telo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.mz-ram { position: relative; background: #fff; border: 1px solid var(--sp-cara-2); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.mz-obraz { position: relative; line-height: 0; background: #f7f8f3; }
.mz-obraz img { display: block; width: 100%; height: auto; transition: opacity .18s; }
.mz.nacita .mz-obraz img { opacity: .45; }
.mz-popis { max-width: none !important; margin: 0; padding: 12px 16px; font-size: 14.5px; color: var(--mz-sedy); background: var(--mz-pod); border-top: 1px solid var(--mz-ram); line-height: 1.45; }
.mz > noscript .mz-popis { margin-top: 12px; border-radius: 12px; }
/* plochy: přes skutečné čipy v obrázku (průhledná tlačítka), na úzkém displeji jako řádek čipů nad obrázkem */
.mz-plochy { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: var(--mz-pod); border-bottom: 1px solid var(--mz-ram); }
.sp .mz-plochy button { font: 600 14px/1 var(--pismo, system-ui), sans-serif; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--mz-ram); background: #fff; color: var(--mz-text); cursor: pointer; }
.mz-plochy button i { width: 9px; height: 9px; border-radius: 50%; }
.mz-plochy button b { font-weight: 600; color: var(--mz-sedy); }
.sp .mz-plochy button[aria-pressed="true"] { background: var(--mz-zel); border-color: var(--mz-zel); color: #fff; }
.mz-plochy button[aria-pressed="true"] b { color: #fff; }
@media (min-width: 701px) {
  .mz.je-js .mz-plochy { position: absolute; inset: 0 0 auto 0; height: 0; padding: 0; border: 0; background: none; z-index: 2; }
  .sp .mz.je-js .mz-plochy button { position: absolute; left: var(--x); width: var(--w); top: 0; height: 0; padding: 0; padding-top: 3.95%; min-height: 0; margin-top: 1.27%; background: transparent; border: 2px solid transparent; color: transparent; border-radius: 12px; overflow: hidden; }
  .mz.je-js .mz-plochy button > * { visibility: hidden; }
  .sp .mz.je-js .mz-plochy button:hover { border-color: rgba(74, 125, 16, .55); background: rgba(74, 125, 16, .06); }
  .sp .mz.je-js .mz-plochy button[aria-pressed="true"] { background: transparent; border-color: transparent; }
  .sp .mz.je-js .mz-plochy button:focus-visible { outline: 3px solid #9fd34a; outline-offset: 1px; }
}
/* body na stolech: pulzující kroužek kolem štítku stolu, plus menší */
/* body v náhledu Vše jsou na telefonu moc blízko u sebe: na úzkém displeji jen některé (mz-bod--siroke skryté) */
.mz-body { position: absolute; inset: 0; }
.sp .mz-bod { position: absolute; width: max(6.2%, 34px); aspect-ratio: 1.55; transform: translate(-50%, -50%); border-radius: 14px; border: 2.5px solid #4a7d10; background: rgba(169, 217, 90, .12); padding: 0; cursor: pointer; animation: mz-puls 1.8s ease-out infinite; }
.sp .mz-bod--plus { width: max(3.3%, 30px); aspect-ratio: 1; border-radius: 50%; }
.sp .mz-bod:hover { background: rgba(169, 217, 90, .3); }
.sp .mz-bod[aria-pressed="true"] { border-color: #f0a43a; background: rgba(240, 164, 58, .18); animation: none; box-shadow: 0 0 0 4px rgba(240, 164, 58, .35); }
.sp .mz-bod:focus-visible { outline: 3px solid #1d2418; outline-offset: 2px; }
@keyframes mz-puls { 0% { box-shadow: 0 0 0 0 rgba(74, 125, 16, .55); } 80% { box-shadow: 0 0 0 14px rgba(74, 125, 16, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 125, 16, 0); } }
/* karta vpravo: jako panel pokladny (Přehled směny / vybraný stůl) */
.mz-karta { background: #fff; color: var(--mz-text); border: 1px solid var(--sp-cara-2); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); font-size: 15px; line-height: 1.4; }
.sp .mz-karta h3 { color: var(--mz-text); }
.sp .mz-karta b { color: var(--mz-text); }
.mz-k-hlava { padding: 18px 18px 10px; }
.sp .mz-k-hlava h3 { margin: 0; font: 600 21px/1.2 var(--pismo-n, system-ui); }
.mz-k-hlava p { margin: 2px 0 0; font-size: 13.5px; color: var(--mz-sedy); }
.mz-k-cisla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 12px; }
.mz-k-cisla div { border: 1px solid var(--mz-ram); background: var(--mz-pod); border-radius: 12px; padding: 8px 9px; display: flex; flex-direction: column; min-width: 0; }
.mz-k-cisla span, .mz-k-cisla small { font-size: 12px; color: var(--mz-sedy); }
.sp .mz-k-cisla b { font-weight: 600; font-size: 16px; white-space: nowrap; }
.mz-k-cisla .mz-k-rozvoz { background: #fbefd9; border-color: #f1dcb3; }
.mz-k-nadpis { margin: 14px 18px 4px; font-size: 14px; font-weight: 600; }
.mz-k-ucty { list-style: none; margin: 0; padding: 0 10px 12px; max-height: 340px; overflow-y: auto; }
.sp .mz-k-ucty button { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 7px 8px; border: 0; border-bottom: 1px solid #eef1e8; background: none; color: var(--mz-text); cursor: pointer; border-radius: 10px; font: inherit; }
.sp .mz-k-ucty button:hover { background: var(--mz-pod); }
.mz-k-cislo { height: 40px; display: grid; place-items: center; border: 1.5px solid #b9d48f; background: #f3f8ea; border-radius: 10px; font-size: 14px; color: #2c4d09; }
.mz-k-kdo { display: flex; flex-direction: column; min-width: 0; }
.sp .mz-k-kdo b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-k-kdo small { font-size: 12.5px; color: var(--mz-sedy); }
.mz-k-castka { white-space: nowrap; font-size: 14.5px; }
.mz-s-hlava { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px 16px 16px; background: #f6e9c3; }
.mz-karta.je-obsazeny .mz-s-hlava { background: #f6e9c3; }
.mz-karta--stul:not(.je-obsazeny) .mz-s-hlava { background: var(--mz-pod); }
.mz-s-cislo { height: 52px; display: grid; place-items: center; background: #fff; border: 2px solid #e8c873; border-radius: 12px; font-size: 20px; font-weight: 600; }
.mz-karta--stul:not(.je-obsazeny) .mz-s-cislo { border-color: var(--mz-ram); }
.sp .mz-s-titul h3 { margin: 0; padding-right: 64px; font: 600 19px/1.2 var(--pismo-n, system-ui); }
.mz-s-titul p { margin: 2px 0 0; font-size: 13px; color: #4b5443; }
.sp .mz-s-zpet { position: absolute; top: 8px; right: 8px; font: inherit; font-size: 13px; color: var(--mz-sedy); background: none; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.sp .mz-s-zpet:hover { border-color: var(--mz-ram); background: #fff; color: var(--mz-text); }
.mz-s-ucet { margin: 14px 14px 0; }
.mz-s-tab { display: inline-flex; flex-direction: column; background: var(--mz-zel); color: #fff; border-radius: 10px 10px 0 0; padding: 6px 12px; font-size: 13px; line-height: 1.25; }
.sp .mz-s-tab b { color: #fff; font-weight: 500; }
.mz-s-polozky { list-style: none; margin: 0; padding: 4px 10px; border: 2px solid var(--mz-zel); border-radius: 0 12px 12px 12px; }
.mz-s-polozky li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef1e8; font-size: 14px; }
.mz-s-polozky li:last-child { border-bottom: 0; }
.mz-s-ks { text-align: center; background: #eaf3dc; border-radius: 8px; padding: 4px 0; font-size: 13px; color: #2c4d09; }
.mz-s-cena { white-space: nowrap; }
.mz-s-celkem { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 6px; }
.mz-s-celkem span { color: var(--mz-sedy); }
.sp .mz-s-celkem b { font-size: 26px; font-weight: 700; }
.mz-s-tl { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; padding: 6px 14px 16px; }
.mz-s-tl span { display: grid; place-items: center; min-height: 44px; border: 1.5px solid var(--mz-ram); border-radius: 12px; font-weight: 600; font-size: 15px; }
.mz-s-tl .mz-s-zaplatit { background: var(--mz-zel); border-color: var(--mz-zel); color: #fff; }
.mz-s-plus { margin: 16px; padding: 16px; border-radius: 14px; background: var(--mz-pod); border: 1px solid var(--mz-ram); }
.mz-s-plus-ikona { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mz-zel); color: #fff; font-size: 26px; font-weight: 600; line-height: 1; margin-bottom: 10px; }
.sp .mz-s-plus h4 { margin: 0 0 4px; font-size: 17px; color: var(--mz-text); }
.mz-s-plus p { margin: 0; color: #3b4634; }
.mz-s-rez { margin: 16px; padding: 14px 16px; border-radius: 14px; background: #fdf1dc; border: 1px solid #f1d6a4; display: flex; flex-direction: column; gap: 2px; }
.mz-s-rez span { font-size: 12.5px; color: #8a5a12; }
.sp .mz-s-rez b { font-weight: 600; }
.mz-s-rez small { color: var(--mz-sedy); }
.mz-s-pozn { margin: 0 16px 16px; font-size: 14px; color: var(--mz-sedy); }
.mz .sp-ilustrace { max-width: none; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .sp .mz-bod { animation: none; box-shadow: 0 0 0 4px rgba(74, 125, 16, .3); } .mz-obraz img { transition: none; } }
@media (max-width: 1080px) { .mz-telo { grid-template-columns: minmax(0, 1fr); } .mz-k-ucty { max-height: none; } }
@media (max-width: 700px) {
  .mz-ram, .mz-karta { border-radius: 14px; }
  .sp .mz-plochy button { min-height: 38px; padding: 0 11px; font-size: 13.5px; gap: 6px; }
  .sp .mz-bod { border-width: 2px; border-radius: 10px; }
  .sp .mz-bod--siroke { display: none; }
  .mz-popis { font-size: 13.5px; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bon-sim-vystup .sp-bon { animation: none; }
}
@media (max-width: 860px) {
  .bon-sim, .menu-demo, .dysko-demo { grid-template-columns: minmax(0, 1fr); }
  .sp-situace--mrizka { grid-template-columns: minmax(0, 1fr); }
  .sp-vybaveni .sp-okno:last-child { max-width: 100%; }
}
@media (max-width: 640px) {
  .menu-demo-radek { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .menu-demo-radek label:first-child { grid-column: 1 / -1; }
  .dysko-demo-dlazdice { grid-template-columns: minmax(0, 1fr); }
  .dysko-demo-sloupec { grid-template-columns: 96px minmax(0, 1fr) 44px; }
  .bon-sim-dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Ukázka bonu ve vzhledu pokladny SmartPub (25. 10. 2026): světlé okno jako v programu ===== */
.sp .bon-sim-pokladna { --p-bg: #eef2e8; --p-karta: #fff; --p-hrana: #e1e7d8; --p-text: #2c3327; --p-tlum: #6b7563; --p-zel: #4a7d10; --p-zel-sv: #e6f1da;
  background: var(--p-bg); border: 1px solid #d5ddca; color: var(--p-text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
.sp .bon-sim-pokladna b, .sp .bon-sim-pokladna strong { color: var(--p-text); }
.sp .bon-sim-pokladna .bon-sim-k { color: var(--p-tlum); letter-spacing: 0; text-transform: none; font-size: 15px; font-weight: 600; }
.sp .bon-sim-pokladna .bon-sim-stoly button, .sp .bon-sim-pokladna .bon-sim-poznamky button { background: #fff; border: 1px solid var(--p-hrana); color: var(--p-text); border-radius: 999px; }
.sp .bon-sim-pokladna .bon-sim-stoly [aria-pressed="true"] { background: var(--p-zel); border-color: var(--p-zel); color: #fff; }
.sp .bon-sim-pokladna .bon-sim-dlazdice button { background: var(--p-karta); border: 1px solid var(--p-hrana); color: var(--p-text); border-radius: 14px; box-shadow: 0 1px 2px rgba(60, 80, 40, .06); }
.sp .bon-sim-pokladna .bon-sim-dlazdice button b { font-weight: 500; color: var(--p-text); }
.sp .bon-sim-pokladna .bon-sim-dlazdice button span { color: var(--p-tlum); }
.sp .bon-sim-pokladna .bon-sim-dlazdice .bon-sim-napoj { background: #fff; border-left: 4px solid #4c7fbf; }
.sp .bon-sim-pokladna .bon-sim-dlazdice button:not(.bon-sim-napoj) { border-left: 4px solid #7db443; }
.sp .bon-sim-pokladna .bon-sim-dlazdice button:hover:not(:disabled) { border-color: var(--p-zel); }
.sp .bon-sim-pokladna .bon-sim-dlazdice button:disabled b { text-decoration: line-through; }
.sp .bon-sim-pokladna .bon-sim-doslo { background: #fbe3df; color: #a8352b; font-weight: 500; }
.sp .bon-sim-pokladna .bon-sim-ucet { background: var(--p-karta); border: 1px solid var(--p-hrana); border-radius: 14px; padding: 6px 16px 16px; }
.sp .bon-sim-pokladna .bon-sim-polozky { border-top: 0; }
.sp .bon-sim-pokladna .bon-sim-polozky li { border-bottom: 1px solid #eef2e9; color: var(--p-text); }
.sp .bon-sim-pokladna .bon-sim-radek b { font-weight: 500; }
.sp .bon-sim-pokladna .bon-sim-prazdno, .sp .bon-sim-pokladna .bon-sim-poznamky { color: var(--p-tlum); }
.sp .bon-sim-pokladna .bon-sim-polozky .bon-sim-chod { color: var(--p-tlum); border-bottom: 1px dashed #b9c2ad; }
.sp .bon-sim-pokladna .bon-sim-polozky .bon-sim-soucet { color: var(--p-text); font-weight: 600; }
.sp .bon-sim-pokladna .bon-sim-pryc { border-color: var(--p-hrana); color: var(--p-tlum); }
.bon-sim-stitky { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bon-sim-stitek { background: #fff7e3; color: #7a5a06; border-radius: 8px; padding: 2px 8px; font-size: 13px; }
.sp .bon-sim-pokladna .tl--hlavni { background: var(--p-zel); color: #fff; box-shadow: none; border-radius: 12px; }
.sp .bon-sim-pokladna .tl--hlavni:hover { background: #3d6a0c; color: #fff; }
.sp .bon-sim-pokladna .tl--obrys { background: #fff; border: 1px solid var(--p-hrana); color: var(--p-text); border-radius: 12px; }
.sp .bon-sim-pokladna .tl--obrys:hover { background: var(--p-zel-sv); border-color: var(--p-zel); color: var(--p-text); }
/* okno Možnosti produktu: skupiny jako sloupce dlaždic, vybraná zeleně, u Odebrat červeně */
.sp .bon-sim-pokladna .bon-sim-moznosti { background: #fff; border: 1px solid var(--p-hrana); border-radius: 18px; box-shadow: 0 18px 40px rgba(40, 60, 20, .18); }
.bon-sim-moznosti-k { margin: 0; font-size: 13px; color: #6b7563; }
.sp .bon-sim-pokladna .bon-sim-moznosti-nazev { font: 600 18px/1.3 'Segoe UI', system-ui, sans-serif; color: var(--p-text); }
.sp .bon-sim-pokladna [data-moznosti-skupiny] { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.sp .bon-sim-pokladna .bon-sim-skupina { border: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.sp .bon-sim-pokladna .bon-sim-skupina legend { float: none; color: var(--p-text); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.bon-sim-pod { display: block; font-size: 11.5px; font-weight: 500; color: #6b7563; margin-top: 2px; }
.bon-sim-pod.is-povinne { color: #8a5a00; }
.sp .bon-sim-pokladna .bon-sim-volba-dl { position: relative; display: block; min-height: 0; cursor: pointer; }
.sp .bon-sim-pokladna .bon-sim-volba-dl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bon-sim-volba-text { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid #e1e7d8; border-radius: 12px; background: #f7f9f4; }
.sp .bon-sim-pokladna .bon-sim-volba-text b { font-weight: 500; font-size: 14.5px; color: #2c3327; }
.bon-sim-volba-text small { font-size: 12.5px; color: #6b7563; }
.bon-sim-volba-dl input:checked + .bon-sim-volba-text { background: #4a7d10; border-color: #4a7d10; }
.sp .bon-sim-pokladna .bon-sim-volba-dl input:checked + .bon-sim-volba-text b, .bon-sim-volba-dl input:checked + .bon-sim-volba-text small { color: #fff; }
.is-odebrat .bon-sim-volba-dl input:checked + .bon-sim-volba-text { background: #c43e3e; border-color: #c43e3e; }
.bon-sim-volba-dl input:focus-visible + .bon-sim-volba-text { outline: 2px solid #4a7d10; outline-offset: 2px; }
.sp .bon-sim-pokladna .bon-sim-chyba { color: #a8352b; }
/* bon: čára dalšího chodu bez textu, jako z tiskárny */
.sp-bon .sp-bon-chod:empty { height: 0; padding-top: 0; margin: 8px 0; }
.sp-bon .bon-sim-cas { margin: -6px 0 10px !important; }
.dysko-demo-host { cursor: pointer; }
.dysko-demo-ztoho.is-malo { color: #b4372f; }

/* galerie izometrických podniků (25. 10. 2026) */
.sp-podniky{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sp-podniky figure{margin:0;background:#eef0e8;border-radius:18px;overflow:hidden;border:1px solid var(--sp-cara)}
.sp-podniky img{display:block;width:100%;height:auto}
.sp-podniky figcaption{padding:12px 16px 16px;background:var(--sp-panel);color:var(--sp-tlumeny);font-size:14px}
.sp-podniky figcaption b{display:block;color:var(--sp-text);font-size:16px;margin-bottom:2px}
@media (max-width:900px){.sp-podniky{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sp-podniky{grid-template-columns:minmax(0,1fr)}}

/* skutečné grafy ze Statistik místo ilustrací (25. 10. 2026) */
.sp-stat .sp-stat-snimek{display:block;width:100%;height:150px;object-fit:cover;object-position:left top;border-radius:12px;margin:0 0 16px;background:#fff}

/* lístek denního menu jako Lístek pro hosty v programu (25. 10. 2026) */
.sp .ml { background: #fff; color: #1d2418; font-family: Inter, 'Segoe UI', system-ui, sans-serif; border-radius: 6px; padding: 26px 26px 18px; box-shadow: 0 24px 40px rgba(0,0,0,.4); display: block; aspect-ratio: auto; }
.sp .ml p { margin: 0; max-width: none; color: inherit; }
.ml-hlava { display: flex; align-items: center; gap: 10px; }
.ml-logo { width: 34px; height: 34px; border-radius: 50%; background: #1d2418; color: #fff; display: grid; place-items: center; font: 700 12px/1 Georgia, serif; flex: none; }
.ml-podnik { display: grid; line-height: 1.25; min-width: 0; }
.sp .ml-podnik b { font-size: 14px; color: #1d2418; font-weight: 600; }
.ml-podnik small { font-size: 11px; color: #6b7563; }
.ml-den { margin-left: auto; background: #eaf3dc; color: #3d6a0c; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sp .ml .ml-nadpis { font: 800 34px/1.05 Inter, 'Segoe UI', system-ui, sans-serif; letter-spacing: -.02em; margin: 14px 0 4px; color: #1d2418; }
.ml-nadpis::after, .ml-oddil::after { content: ""; display: block; background: #4a7d10; border-radius: 2px; }
.ml-nadpis::after { width: 40px; height: 4px; margin: 8px 0 6px; }
.sp .ml .ml-oddil { font-weight: 600; font-size: 15px; margin: 14px 0 6px; color: #1d2418; }
.ml-oddil::after { width: 26px; height: 3px; margin-top: 3px; }
.ml-radek { display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: 4px 8px; padding: 4px 0; }
.ml-porce { font-size: 10px; color: #6b7563; text-align: right; }
.ml-nazev { font-size: 15px; }
.sp .ml-cena { font-weight: 600; color: #1d2418; white-space: nowrap; }
.ml-radek.is-doslo .ml-nazev, .ml-radek.is-doslo .ml-cena { text-decoration: line-through; opacity: .5; }
.sp .ml .ml-pata { border-top: 1px solid #b9cf98; margin-top: 12px; padding-top: 8px; font-size: 13px; font-weight: 600; }
.sp .ml .ml-podpis { text-align: right; font-size: 11px; color: #8a9480; margin-top: 10px; }
.ml--prispevek { aspect-ratio: 4 / 5; max-width: 420px; margin: 0 auto; width: 100%; overflow: hidden; display: flex; flex-direction: column; }
.ml--prispevek .ml-podpis { margin-top: auto !important; }

.sp-podniky figure{background:#fff}
.sp-podniky figure img{aspect-ratio:16/10;object-fit:contain;background:#fff}