* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body.hide-cursor, body.hide-cursor * { cursor: none !important; }

#stage {
  position: fixed; left: 50%; top: 50%;
  overflow: hidden;
  color: var(--text);
  font-family: var(--body-font);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#stage.shadow { text-shadow: 0 calc(var(--vs) * 2px) calc(var(--vs) * 8px) rgba(0, 0, 0, var(--shadow)); }

/* ---------- pozadie ---------- */
#bg, #bg-media, #bg-overlay { position: absolute; inset: 0; }
#bg { overflow: hidden; }
#bg-media { background-position: center; }
#bg-media video { width: 100%; height: 100%; display: block; }
#bg-media.kenburns { animation: kenburns 40s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.18) translate(-2%, -2%); } }

/* ---------- rám ---------- */
#frame { position: absolute; inset: 0; display: flex; flex-direction: column; }
#header, #main, #footer { margin-left: var(--pad-x); margin-right: var(--pad-x); }
#header { flex: none; display: flex; align-items: center; gap: calc(var(--vs) * 30px); color: var(--header-text);
  background: var(--header-bg); margin-top: var(--pad-y); margin-bottom: var(--header-mb); padding: calc(var(--vs) * 12px) calc(var(--vs) * 20px); border-radius: var(--radius); }
#header.bordered { border-bottom: calc(var(--vs) * 2px) solid var(--divider); border-radius: var(--radius) var(--radius) 0 0; padding-bottom: calc(var(--vs) * 18px); }
#header[hidden] { display: none; }
#header .brand { display: flex; align-items: center; gap: calc(var(--vs) * 24px); min-width: 0; flex: 1; }
#header.align-center .brand { justify-content: center; flex-direction: column; gap: calc(var(--vs) * 8px); text-align: center; }
#header.align-center .clock { position: absolute; right: calc(var(--vs) * 20px); }
#header.align-center { position: relative; }
#header .logo { height: var(--logo-size); width: auto; max-width: 40%; object-fit: contain; flex: none; }
#header .name { font-family: var(--heading-font); font-size: var(--name-size); font-weight: 700; line-height: 1.05; }
#header .subtitle { font-size: var(--subtitle-size); opacity: .8; margin-top: calc(var(--vs) * 4px); }
#header .clock { text-align: right; flex: none; font-variant-numeric: tabular-nums; }
#header .time { font-family: var(--price-font); font-size: var(--clock-size); font-weight: 600; line-height: 1; }
#header .date { font-size: calc(var(--clock-size) * .45); opacity: .8; margin-top: calc(var(--vs) * 6px); }

#main { flex: 1; min-height: 0; display: flex; gap: var(--col-gap); position: relative; }
#main { margin-bottom: var(--pad-y); }
#frame.has-footer #main { margin-bottom: 0; }
#frame.no-header #main { margin-top: var(--pad-y); }
#pages { flex: 1; min-width: 0; position: relative; }
#sidebar { flex: none; width: var(--sidebar-w); position: relative; }
#sidebar[hidden] { display: none; }
#main.sidebar-right #sidebar { order: 2; }

#footer { flex: none; font-size: var(--meta-size); color: var(--muted); padding-top: calc(var(--vs) * 10px); margin-bottom: var(--pad-y); display: flex; justify-content: space-between; gap: calc(var(--vs) * 30px); }
#footer[hidden] { display: none; }

/* ---------- stránky + prechody ---------- */
.page { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition-property: opacity, transform, visibility; transition-duration: var(--t-ms); transition-timing-function: ease; }
.page.measuring { visibility: hidden; opacity: 0; transition: none; }
.page.active { opacity: 1; visibility: visible; z-index: 2; }
.page.leaving { visibility: visible; z-index: 1; }
.t-none .page { transition: none; }
.t-slide .page { transform: translateX(100%); }
.t-slide .page.active { transform: none; }
.t-slide .page.leaving { transform: translateX(-100%); opacity: 1; }
.t-zoom .page { transform: scale(1.06); }
.t-zoom .page.active { transform: none; }
.t-zoom .page.leaving { transform: scale(.94); }
.t-flip .page { transform: perspective(2000px) rotateY(80deg); }
.t-flip .page.active { transform: none; }
.t-flip .page.leaving { transform: perspective(2000px) rotateY(-80deg); }

/* ---------- menu ---------- */
.menu-page { display: flex; gap: var(--col-gap); }
.col { flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: var(--cat-gap); }
.cat { flex: none; }
.cards-category .cat { background: var(--card-bg); border: calc(var(--vs) * 1.5px) solid var(--card-border); border-radius: var(--radius); padding: var(--card-pad); }
.cat-head { margin-bottom: calc(var(--item-gap) * 1.2); }
.cat-title { font-family: var(--heading-font); font-size: var(--category-size); font-weight: var(--category-weight); color: var(--category);
  text-transform: var(--category-transform); letter-spacing: var(--category-ls); line-height: 1.1; }
.cat-center .cat-head { text-align: center; }
.cat-desc { font-size: var(--category-desc-size); color: var(--muted); margin-top: calc(var(--vs) * 4px); font-style: var(--desc-style); }
.deco-line .cat-head { padding-bottom: calc(var(--vs) * 8px); border-bottom: calc(var(--vs) * 2px) solid var(--divider); }
.deco-double .cat-head { padding-bottom: calc(var(--vs) * 8px); border-bottom: calc(var(--vs) * 6px) double var(--divider); }
.deco-dots .cat-head { padding-bottom: calc(var(--vs) * 8px); border-bottom: calc(var(--vs) * 3px) dotted var(--divider); }
.deco-box .cat-title { display: inline-block; background: var(--category); color: var(--badge-text); padding: calc(var(--vs) * 4px) calc(var(--vs) * 16px); border-radius: calc(var(--radius) * .6); }

.items { display: flex; flex-direction: column; gap: var(--item-gap); }
.item { display: flex; gap: calc(var(--vs) * 16px); align-items: flex-start; }
.item.img-right { flex-direction: row-reverse; }
.cards-items .item { background: var(--card-bg); border: calc(var(--vs) * 1.5px) solid var(--card-border); border-radius: var(--radius); padding: var(--card-pad); }
.item-img { width: var(--img); height: var(--img); object-fit: cover; flex: none; background: rgba(127, 127, 127, .15); }
.img-rounded .item-img { border-radius: calc(var(--img) * .18); }
.img-circle .item-img { border-radius: 50%; }
.item-main { flex: 1; min-width: 0; }
.item-line { display: flex; align-items: baseline; gap: calc(var(--vs) * 10px); }
/* názov sa láme len medzi slovami (nie po písmenách); veľmi dlhé slovo sa až potom rozdelí */
.item-name { font-size: var(--item-size); font-weight: var(--item-weight); color: var(--item-name); text-transform: var(--item-transform); overflow-wrap: break-word; hyphens: manual; }
.leader { flex: 1 1 auto; min-width: calc(var(--vs) * 20px); align-self: baseline; height: 0; transform: translateY(calc(var(--vs) * -6px)); }
.price-dots .leader { border-bottom: calc(var(--vs) * 3px) dotted var(--divider); }
.price-line .leader { border-bottom: calc(var(--vs) * 1.5px) solid var(--divider); }
.price { font-family: var(--price-font); font-size: var(--price-size); font-weight: var(--price-weight); color: var(--price); white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.price-below { margin-top: calc(var(--vs) * 4px); }
/* viac veľkostí jednej položky */
.price-multi { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; column-gap: calc(var(--vs) * 2px); }
.price-multi .v-part { white-space: nowrap; }
.price-multi .v-label { font-family: var(--body-font); font-size: calc(var(--meta-size) * 1.1); font-weight: 400; color: var(--muted); margin-right: .3em; }
.price-multi .v-sep { opacity: .45; margin: 0 .4em; font-weight: 400; }
.price-below.price-multi { display: flex; justify-content: flex-start; }
/* viac cien sa nezmestí vedľa názvu → presunú sa na vlastný riadok pod názov */
.item-line.has-multi { flex-wrap: wrap; row-gap: calc(var(--vs) * 2px); }
.item-line.has-multi .price-multi { flex: none; margin-left: auto; }
.item-line.has-multi.wrapped .leader { display: none; }
.item-line.has-multi.wrapped .price-multi { flex-basis: 100%; justify-content: flex-start; margin-left: 0; font-size: calc(var(--price-size) * .9); }
.variants { display: flex; flex-direction: column; gap: calc(var(--vs) * 2px); margin-top: calc(var(--vs) * 4px); }
.variant-line { display: flex; align-items: baseline; gap: calc(var(--vs) * 10px); }
.variant-line .v-label { font-size: var(--desc-size); color: var(--description); white-space: nowrap; }
.variant-line .price { font-size: calc(var(--price-size) * .9); }
.daily-pr.price-multi .v-label { font-family: var(--d-body-font); font-size: var(--d-meta-size); color: var(--d-meta); }
.item-desc { font-size: var(--desc-size); color: var(--description); font-style: var(--desc-style); margin-top: calc(var(--vs) * 2px);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--desc-lines); overflow: hidden; }
.item-meta { font-size: var(--meta-size); color: var(--muted); margin-top: calc(var(--vs) * 3px); }
.tags { display: inline-flex; gap: calc(var(--vs) * 6px); flex: none; }
.tag { font-size: var(--badge-size); line-height: 1; }
.tag.badge { background: var(--badge-bg); color: var(--badge-text); padding: calc(var(--vs) * 5px) calc(var(--vs) * 9px); border-radius: 999px; font-weight: 700; text-shadow: none; }
.sold-badge { font-size: var(--badge-size); background: var(--sold-out); color: #fff; padding: calc(var(--vs) * 5px) calc(var(--vs) * 10px); border-radius: 999px; font-weight: 700; flex: none; align-self: center; text-transform: uppercase; letter-spacing: .05em; text-shadow: none; }
.item.so-strike .item-name, .item.so-strike .price { text-decoration: line-through; text-decoration-color: var(--sold-out); text-decoration-thickness: calc(var(--vs) * 3px); }
.item.so-strike { opacity: .55; }
.daily-name .sold-badge { display: inline-block; margin-left: .6em; vertical-align: middle; font-size: calc(var(--d-meta-size) * .9); }
.daily-row.so-strike { opacity: .55; }
.daily-row.so-strike .daily-name, .daily-row.so-strike .daily-pr { text-decoration: line-through; text-decoration-color: var(--sold-out); text-decoration-thickness: calc(var(--vs) * 3px); }

.empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--heading-font); font-size: var(--category-size); color: var(--muted); }

/* ---------- denné / týždenné menu ---------- */
.daily { position: absolute; inset: 0; overflow: hidden; display: flex; justify-content: center; font-family: var(--d-body-font); }
.daily-inner { transform-origin: top center; width: 100%; }
.daily-align-left .daily-inner { transform-origin: top left; }
.daily-page .daily-inner { max-width: var(--d-max-w); background: var(--d-panel); border-radius: var(--radius); }
.daily-page .daily-inner { padding: calc(var(--card-pad) * var(--d-pad-on, 0)); }
.daily .daily-week-inner, .daily-week .daily-inner { max-width: none; background: none; padding: 0; }
.daily-side { background: var(--card-bg); border: calc(var(--vs) * 1.5px) solid var(--card-border); border-radius: var(--radius); padding: var(--card-pad); }
.daily-side .daily-inner { background: var(--d-panel); border-radius: var(--radius); }
.daily-head { text-align: var(--d-align); margin-bottom: calc(var(--cat-gap) * .8); }
.daily-title { font-family: var(--d-title-font); font-size: var(--d-title-size); font-weight: var(--category-weight); color: var(--d-title);
  text-transform: var(--category-transform); letter-spacing: var(--category-ls); line-height: 1.1; }
.daily-sub { font-size: var(--d-sub-size); color: var(--d-sub); margin-top: calc(var(--vs) * 6px); }
.daily-price { display: inline-block; margin-top: calc(var(--vs) * 12px); font-family: var(--price-font); font-size: var(--d-price-size); color: var(--badge-text); background: var(--badge-bg); padding: calc(var(--vs) * 6px) calc(var(--vs) * 20px); border-radius: 999px; font-weight: var(--price-weight); text-shadow: none; }
.daily-list { display: flex; flex-direction: column; gap: calc(var(--item-gap) * 1.6); }
.daily-row { display: flex; gap: calc(var(--vs) * 18px); align-items: baseline; padding-bottom: calc(var(--item-gap) * 1.2); border-bottom: calc(var(--vs) * 1.5px) solid var(--d-divider); }
.daily-row:last-child { border-bottom: 0; padding-bottom: 0; }
.daily-label { flex: none; min-width: calc(var(--d-label-size) * 6); font-size: var(--d-label-size); font-weight: 700; color: var(--d-label); text-transform: uppercase; letter-spacing: .06em; }
.daily-main { flex: 1; min-width: 0; }
.daily-name { font-size: var(--d-name-size); font-weight: var(--item-weight); color: var(--d-name); }
.daily-meta { font-size: var(--d-meta-size); color: var(--d-meta); margin-top: calc(var(--vs) * 3px); }
.daily-pr { flex: none; font-family: var(--price-font); font-size: var(--d-price-size); font-weight: var(--price-weight); color: var(--d-price); white-space: nowrap; font-variant-numeric: tabular-nums; }
.daily-note { text-align: var(--d-align); margin-top: calc(var(--cat-gap) * .8); font-size: var(--d-note-size); color: var(--d-meta); font-style: var(--desc-style); white-space: pre-line; }
.daily-side .daily-label { min-width: 0; display: block; margin-bottom: calc(var(--vs) * 2px); }
.daily-side .daily-row { flex-wrap: wrap; }

/* týždenný prehľad */
.week-grid { display: grid; gap: calc(var(--col-gap) * .5); }
.week-rows { grid-template-columns: 1fr; gap: calc(var(--cat-gap) * .6); }
.week-day { background: var(--d-panel); border-radius: var(--radius); padding: calc(var(--vs) * 16px); min-width: 0; }
.week-day.today { background: var(--d-today); box-shadow: inset 0 0 0 calc(var(--vs) * 2px) var(--d-label); }
.week-day.past { opacity: .4; }
.week-day-title { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--vs) * 10px); font-family: var(--d-title-font); font-size: var(--d-day-size); font-weight: 700; color: var(--d-title);
  padding-bottom: calc(var(--vs) * 8px); margin-bottom: calc(var(--vs) * 12px); border-bottom: calc(var(--vs) * 2px) solid var(--d-divider); }
.week-day-title small { font-family: var(--d-body-font); font-size: .62em; font-weight: 400; color: var(--d-meta); }
.week-cols .daily-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--vs) * 2px) calc(var(--vs) * 10px); align-items: baseline; }
.week-cols .daily-label { min-width: 0; grid-column: 1; grid-row: 1; }
.week-cols .daily-pr { grid-column: 2; grid-row: 1; font-size: calc(var(--d-price-size) * .8); }
.week-cols .daily-main { grid-column: 1 / -1; grid-row: 2; }
.week-cols .daily-name { font-size: calc(var(--d-name-size) * .85); overflow-wrap: anywhere; hyphens: auto; }
.week-cols .daily-list { gap: calc(var(--item-gap) * 1.1); }
.week-rows .week-day { display: grid; grid-template-columns: calc(var(--d-day-size) * 7) 1fr; gap: calc(var(--vs) * 20px); align-items: start; }
.week-rows .week-day-title { flex-direction: column; border-bottom: 0; margin: 0; padding: 0; gap: calc(var(--vs) * 2px); }

/* vlastné pozadie kategórie */
.cat.cat-bg { background: var(--cat-bg); border-radius: var(--radius); padding: var(--card-pad); }

/* ---------- slidy ---------- */
#slide-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.slide { overflow: hidden; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide .slide-overlay { position: absolute; inset: 0; background: #000; }
.slide .slide-body { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--vs) * 90px) calc(var(--vs) * 120px); gap: calc(var(--vs) * 24px); }
.slide.pos-top .slide-body { justify-content: flex-start; }
.slide.pos-center .slide-body { justify-content: center; }
.slide.pos-bottom .slide-body { justify-content: flex-end; }
.slide .slide-title { font-family: var(--heading-font); font-weight: 700; line-height: 1.05; }
.slide .slide-text { white-space: pre-line; line-height: 1.3; }

/* ---------- bežiaci text ---------- */
.ticker { flex: none; height: var(--ticker-h); background: var(--ticker-bg); color: var(--ticker-text); overflow: hidden; display: flex; align-items: center;
  font-family: var(--ticker-font); font-size: var(--ticker-size); font-weight: var(--ticker-weight); white-space: nowrap; position: relative; z-index: 6; text-shadow: none; }
.ticker[hidden] { display: none; }
.ticker-track { display: flex; flex: none; will-change: transform; animation: ticker linear infinite; }
.ticker-track span { padding-right: calc(var(--vs) * 40px); }
.ticker-sep { opacity: .7; padding: 0 calc(var(--vs) * 40px); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- ostatné ---------- */
#indicator { position: absolute; right: var(--pad-x); bottom: calc(var(--pad-y) * .4 + var(--ticker-offset, 0px)); display: flex; gap: calc(var(--vs) * 10px); z-index: 4; }
#indicator i { width: calc(var(--vs) * 12px); height: calc(var(--vs) * 12px); border-radius: 50%; background: var(--text); opacity: .25; transition: opacity .4s, transform .4s; }
#indicator i.on { opacity: .9; transform: scale(1.25); }
#identify { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(0, 0, 0, .8); color: #fff; font: 700 calc(var(--vs) * 120px) system-ui, sans-serif; text-align: center; }
#identify small { font-size: .3em; font-weight: 400; opacity: .8; margin-top: .5em; }
#identify[hidden] { display: none; }
#demo { position: absolute; inset: 0; z-index: 40; pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#demo[hidden] { display: none !important; }
#demo span { transform: rotate(-18deg); font: 800 calc(var(--vs, 1) * 110px) system-ui, sans-serif; color: rgba(255, 255, 255, .22); text-shadow: 0 0 calc(var(--vs, 1) * 18px) rgba(0, 0, 0, .55);
  -webkit-text-stroke: calc(var(--vs, 1) * 2px) rgba(0, 0, 0, .25); white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; }
#status { position: fixed; left: 12px; bottom: 12px; z-index: 100; font: 600 14px system-ui, sans-serif; color: #fff; background: rgba(200, 40, 40, .85); padding: 6px 12px; border-radius: 999px; }
#status[hidden] { display: none; }