/* ═══════════════════════════════════════════════════════════════
   LIDO self-checkout kiosk · tray screen (D1: rail + tiles)
   Portrait 1080×1920 shell, scaled to the window. Tokens first,
   every recipe below composes from them. No page-local CSS.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* brand (LIDO CVI): sea blue Pantone 286 · amber Pantone 143 (thin details only) · paper */
  --blue: #003C7E;
  --blue-deep: #002B5C;
  --blue-header: #003981;   /* header + tray bar (Figma frame 64:415) */
  --blue-tile: #EBEFF5;     /* rail tool tiles */
  --amber: #DD9800;
  --paper: #EFECE8;
  --canvas: #EBEFF5; --canvas-0: rgba(235,239,245,0); --canvas-deep: #D9E1EE;   /* a shade darker canvas: the section flash cue (lab) */        /* page ground (Figma frame 64:1399) */
  --paper-deep: #E4E0DA;
  --white: #FFFFFF;
  --ink: #1A1A1A;
  --black: #111111;     /* Apollo Klubi sign-in tile on the welcome (Geio 2026-09-20) */
  --ink-600: #46546A;   /* blue-tinted dark grey: code chips, modal body (Geio 2026-09-18; was warm #4A4744) */
  --ink-400: #74839A;   /* blue-tinted grey for small texts and icons (Geio 2026-09-18; was warm #8A8580) */
  --line: rgba(0,60,126,0.14);
  --on-blue-10: rgba(255,255,255,0.10);
  --on-blue-24: rgba(255,255,255,0.24);   /* pressed / on-tray surface on the dark search ground */
  --line-strong: rgba(0,60,126,0.28);
  --blue-08: rgba(0,60,126,0.08);
  --blue-14: rgba(0,60,126,0.14);
  --stage-bg: #D8D4CE;

  --font-display: "Nunito Sans", system-ui, sans-serif;   /* titles only; Avenir Next dropped 2026-09-30 (commercial licence), Nunito Sans is free (OFL) */
  --font-sans: "Inter", system-ui, sans-serif;                                     /* everything else */

  --r-tile: 20px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0, 0, 1);      /* signature: decisive, no overshoot */
  --ease-in: cubic-bezier(0.3, 0, 1, 1);
  --dur: 260ms;
  --dur-quick: 180ms;
  --dur-slow: 380ms;
  --on-blue-14: rgba(255,255,255,0.14); --on-blue-32: rgba(255,255,255,0.32); --on-blue-72: rgba(255,255,255,0.72);   /* welcome Y4d: translucent chips, the Alusta outline, secondary text on navy */
  --r-welcome: 44px;
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);   /* on-screen moves that start and land softly (welcome hand-off) */   /* welcome Y4d tiles */
  --tile-on: #C9D8F0;        /* selected tile (S4d-2) */
}

* { box-sizing: border-box; }
html { text-size-adjust: 100%; }
body { margin: 0; background: var(--stage-bg); font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.disp { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: -0.02em; }   /* bold big titles like the welcome (Geio 2026-09-22, lab30 → n116; was 600 / -0.01em); product names, prices and buttons keep their own weights */
.lt-cta { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }
svg { display: block; }

/* ─── Shell — fixed 1080×1920 stage, JS sets --kiosk-scale ───── */
.kiosk-stage { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.kiosk-shell {
  position: absolute; top: 0; left: 0; width: 1080px; height: 1920px; overflow: hidden;
  background: var(--white);
  transform: scale(var(--kiosk-scale, 1)); transform-origin: top left;
  font-size: 20px; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}

/* ─── Frame: 20px blue border, canvas panel inset, cart zone at the bottom ─── */
.lt-frame { position: absolute; left: 10px; top: 10px; right: 10px; bottom: 180px; background: var(--canvas); border-radius: 18px; }
.lt-frame::after { content: ""; position: absolute; left: 196px; bottom: 0; width: 18px; height: 18px; background: radial-gradient(circle at 100% 0, transparent 17.5px, var(--white) 18px); }   /* smooth corner where the panel meets the rail */
.lt-frame::before { content: ""; position: absolute; left: 196px; top: 0; width: 18px; height: 18px; background: radial-gradient(circle at 100% 100%, transparent 17.5px, var(--white) 18px); }   /* same fillet at the top where the panel meets the rail (Geio) */

/* ─── Top bar: mark · language · help ───────────────────────── */
.lt-top { position: absolute; top: 10px; left: 206px; right: 10px; height: 132px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px 0 48px; background: transparent; z-index: 10; }
.lt-top h1 { margin: 0; flex: 1; min-width: 0; font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--blue); text-wrap: balance; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding-bottom: 6px; margin-bottom: -6px; }   /* room for descenders (у, g, j) under the clipped second line */   /* canvas T1 (Geio 2026-09-22): a long name wraps to two balanced lines instead of ending in three dots; two lines of 34 px fit the 132 px bar */
.lt-mark { display: none; }
.lt-top-right { display: flex; align-items: center; gap: 16px; }
.lt-top::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 90px; background: linear-gradient(to bottom, var(--canvas), var(--canvas-0)); opacity: 0; transition: opacity var(--dur-quick) var(--ease); pointer-events: none; }   /* tiles fade under the title once the grid is scrolled (Geio) */
.kiosk-shell.is-scrolled .lt-top::after { opacity: 1; }
.lt-seg { display: flex; align-items: center; gap: 4px; padding: 4px; height: 60px; border-radius: var(--r-pill); background: var(--blue-08); }
.lt-seg button { height: 52px; padding: 0 22px; border-radius: var(--r-pill); font-size: 22px; font-weight: 600; color: var(--blue); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.lt-seg button.is-on { background: var(--white); color: var(--blue-header); font-weight: 700; }
.lt-help { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 24px 0 18px; border-radius: var(--r-pill); background: var(--white); color: var(--blue); font-size: 22px; font-weight: 700; }
.lt-help svg { width: 28px; height: 28px; }
.lt-help.is-on { background: var(--blue-header); color: var(--white); }   /* staff called: stays navy while the modal is up, back to white when it closes */
.lt-help.is-on svg { animation: bell-ring 900ms var(--ease) 1; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(6deg); } }

/* ─── Category rail (buffet order), tools first ─────────────── */
.lt-rail { position: absolute; left: 10px; top: 10px; bottom: 10px; width: 196px; padding: 140px 12px 16px 2px; display: flex; flex-direction: column; gap: 5px; overflow: visible; background: var(--white); border-radius: 18px 0 0 18px; }
.lt-logo { position: absolute; left: 2px; top: 14px; width: 182px; height: 96px; object-fit: contain; }
.lt-rail-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1 1 120px; min-height: 96px; max-height: 176px; border-radius: 18px; color: var(--blue-header); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lt-rail-item svg { width: 34px; height: 34px; }
.lt-rail-item .lt-rail-img { width: 92px; height: 92px; object-fit: contain; margin: -6px 0 -4px; transition: transform var(--dur) var(--ease); }
.lt-rail-item.is-on .lt-rail-img { transform: scale(1.06); }
.lt-rail-item .l { transition: transform var(--dur) var(--ease);  font-size: 19px; font-weight: 500; line-height: 1.05; text-align: center; padding: 0 6px; }
.lt-rail-item.is-tool { background: var(--blue-header); color: var(--white); }
.lt-rail-item.is-tool .l { font-weight: 600; }
.lt-rail-item.is-on { color: var(--blue-header); isolation: isolate; }
.lt-rail-item.is-on .l { position: relative; }
.lt-rail-item.is-on .l { font-weight: 700; }
/* active category = paper notch flowing into the main column, concave 18px corners above and below */
.lt-rail-item.is-on::before { content: ""; position: absolute; left: 0; right: -14px; top: -10px; bottom: -10px; background: var(--canvas); border-radius: 18px 0 0 18px; z-index: -1; }   /* 2 px past the rail edge: covers the rail's antialiased seam on a dark panel */
.lt-rail-item .nk { display: none; position: absolute; right: -14px; width: 20px; height: 18px; z-index: -1; pointer-events: none; }
.lt-rail-item.is-on .nk { display: block; }
.lt-rail-item .nk-t { top: -28px; background: radial-gradient(circle at 0 0, transparent 17.5px, var(--canvas) 18px); }
.lt-rail-item .nk-b { bottom: -28px; background: radial-gradient(circle at 0 100%, transparent 17.5px, var(--canvas) 18px); }
.lt-rail-item:active .lt-rail-img, .lt-rail-item:active svg, .lt-rail-item:active .l { transform: scale(0.96); }   /* press scales the content only, so the active notch never detaches from the panel (Geio) */
.lt-rail-sep { height: 1px; margin: 4px 10px; background: transparent; }

/* ─── Main: title + tile grid ───────────────────────────────── */
.lt-main { position: absolute; left: 206px; right: 10px; top: 142px; bottom: 180px; padding: 4px 36px 120px 38px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.lt-main::-webkit-scrollbar { display: none; }
.lt-head { display: none; }
.lt-head h1 { margin: 0; font-family: var(--font-display); font-size: 64px; font-weight: 600; line-height: 1.22; letter-spacing: -0.03em; color: var(--blue); }
.lt-head .hint { font-family: var(--font-sans); font-size: 18px; color: var(--ink-400); font-weight: 500; }
.lt-grid { display: grid; grid-template-columns: repeat(3, 252px); gap: 16px; }
.lt-secs { display: flex; flex-direction: column; gap: 40px; }   /* more air before each section heading (Geio 2026-09-21; was 22) */
.lt-sec-h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 4px 4px 0; }
.lt-sec-h .disp { font-size: 30px; font-weight: 600; color: var(--blue); }   /* subcategory headings one step lighter than the page title (Geio 2026-09-22) */
.lt-sec-h .n { font-size: 20px; color: var(--ink-400); font-weight: 500; }
#grid .lt-sec-h .n { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--blue-header); color: var(--white); font-size: 17px; font-weight: 600; }   /* the product count in the grid is a navy pill (Geio 2026-09-21); the search view keeps its plain hint text */
/* second level (C7g): sticky photo-chip row under the banner, chips jump to their section */
.lt-subs { position: sticky; top: -4px; z-index: 3; display: flex; gap: 10px; padding: 8px 0 14px; margin: 0 0 6px; background: var(--canvas); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }   /* swipeable */
.lt-subs-fade { flex: none; position: sticky; right: 0; width: 96px; margin-left: -96px; align-self: stretch; background: linear-gradient(to right, var(--canvas-0), var(--canvas) 70%); pointer-events: none; transition: opacity var(--dur-quick) var(--ease); }
.lt-subs-fade { display: none; }
.lt-subs::-webkit-scrollbar { display: none; }
.lt-subs:empty { display: none; }
/* the fade under the bar is a sticky sibling now (.lt-subs-shade); the right fade is a mask on the bar itself, so neither can drift on any browser */
.lt-sub { display: inline-flex; align-items: center; gap: 10px; height: 84px; padding: 0 22px 0 26px; border: 0; border-radius: var(--r-pill); background: var(--white); color: var(--blue-header); font: inherit; font-size: 22px; font-weight: 600; white-space: nowrap; flex: none; transition: background-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease), transform 120ms var(--ease); }
.lt-sub img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; background: var(--paper); margin-left: -18px; }
.lt-sub.is-on { background: var(--blue-header); color: var(--white); }
.lt-sub:active { transform: scale(0.97); }
.kiosk-shell.has-subs .lt-top::after { display: none; }   /* the sticky chip row carries its own fade */

/* tile: photo on top, tint bar, name · unit · price, count badge */
.lt-tile { position: relative; display: flex; flex-direction: column; height: auto; border-radius: var(--r-tile); background: var(--white); overflow: visible; transition: transform 160ms var(--ease), background-color var(--dur) var(--ease); animation: tile-in 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
.lt-tile:active { transform: scale(0.97); }
.lt-tile.is-added { animation: tile-pop var(--dur) var(--ease); }
.lt-media { position: relative; height: 182px; flex: none; margin: 6px 6px 0; border-radius: 14px; overflow: hidden; background: var(--paper); }   /* the photo is a cut-out on the paper beige; the pastels stay on the discs and chips only (lab 2026-09-22) */
.lt-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt-media.is-empty { display: flex; align-items: center; justify-content: center; }
.lt-media.is-empty .plate { width: 128px; height: 128px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 10px var(--paper); display: flex; align-items: center; justify-content: center; color: var(--tint, var(--blue)); }
.lt-media.is-empty .plate svg { width: 52px; height: 52px; }
.lt-code { position: absolute; left: 12px; bottom: 12px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: var(--white); color: var(--ink-600); font-size: 15px; font-weight: 600; display: flex; align-items: center; letter-spacing: 0.04em; }
.lt-body { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px 20px 18px 22px; }
.lt-name { font-size: 21px; font-weight: 500; line-height: 26px; letter-spacing: -0.02em; min-height: 52px; width: 208px; text-wrap: balance; }
.lt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; }
.lt-step { display: flex; align-items: center; gap: 2px; height: 48px; padding: 2px; border-radius: var(--r-pill); background: var(--white); max-width: 0; opacity: 0; transform: scale(0.9); transform-origin: 100% 50%; overflow: hidden; flex: none; pointer-events: none; transition: max-width var(--dur) var(--ease), opacity var(--dur-quick) var(--ease-in), transform var(--dur-quick) var(--ease-in); }
.lt-tile.is-in .lt-step { max-width: 150px; opacity: 1; transform: scale(1); pointer-events: auto; transition: max-width var(--dur) var(--ease), opacity var(--dur) var(--ease) 40ms, transform var(--dur) var(--ease) 40ms; }
.lt-step-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; transition: transform 120ms var(--ease), background-color 120ms var(--ease); }
.lt-step-btn svg { width: 24px; height: 24px; }
.lt-step-btn.is-plus { background: var(--blue); color: var(--white); }
.lt-step-btn:active { transform: scale(0.9); }
.lt-step-n { width: 34px; text-align: center; font-size: 22px; font-weight: 600; color: var(--blue); }
.lt-step-n.is-roll { animation: num-roll var(--dur-quick) var(--ease); }
@keyframes num-roll { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.lt-unit { display: none; /* dropped in the Figma frame */ }
.lt-price { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--blue); white-space: nowrap; transition: font-size var(--dur) var(--ease); }
.lt-tile.is-in .lt-price { font-size: 22px; }
.lt-badge { position: absolute; top: -12px; left: -12px; min-width: 52px; height: 52px; padding: 0 8px; border-radius: var(--r-pill); background: var(--blue); color: var(--white); font-size: 26px; font-weight: 700; display: none; align-items: center; justify-content: center; border: 4px solid var(--canvas); z-index: 2; }
.lt-badge.is-on { display: none; }
.lt-tile.is-in { background: var(--tile-on); }
/* remove one: "−" chip on added tiles (top-right of the photo) */
.lt-minus { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; background: var(--white); color: var(--blue); display: none; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.18); z-index: 2; }
.lt-minus svg { width: 26px; height: 26px; }
.lt-tile.is-in .lt-minus { display: none; }
.lt-minus:active { transform: scale(0.92); }

@keyframes tile-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tile-pop { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } }
@keyframes badge-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

.lt-new { position: absolute; top: 12px; right: 12px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: var(--amber); color: var(--ink); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; }

/* ─── Tray bar ──────────────────────────────────────────────── */
.lt-traybar { position: absolute; left: 206px; right: 0; bottom: 0; height: 180px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px 0 36px; background: var(--white); color: var(--ink); z-index: 10; overflow: visible; }
.lt-tray-right { display: flex; align-items: center; gap: 24px; flex: none; }
.lt-tray-left { display: flex; align-items: center; gap: 26px; min-width: 0; }
/* plate stack: one tilted photo card per item on the tray, overlapping, allowed to rise above the bar */
.lt-stack { position: relative; --bowl: 88px; --tray-w: calc(var(--bowl) * 3 + 32px); --tray-h: calc(var(--tray-w) / 5.1); --shift: 40px; --lift: 16px; --peek: 10px; --front-x: 44px; width: calc(var(--tray-w) + var(--front-x)); height: calc(var(--tray-h) + var(--bowl) * 1.45 + var(--lift)); flex: none; align-self: flex-end; }
.lt-tray-board { position: absolute; left: var(--tx, 0px); bottom: calc(var(--lift) + var(--ty, 0px)); width: var(--tray-w); height: var(--tray-h); display: block; transform-origin: 50% 100%; transition: left 480ms var(--ease), bottom var(--dur-slow) var(--ease), opacity 420ms var(--ease); }
.lt-tray-board.is-new { animation: tray-in 480ms var(--ease) both; }
@keyframes tray-in { from { transform: translateX(160px); opacity: 0; } to { transform: none; opacity: 1; } }
.lt-tray-board.is-dip { animation: tray-dip 320ms var(--ease); }
@keyframes tray-dip { 30% { transform: translateY(3px) scaleY(0.96); } 100% { transform: none; } }
.lt-tray-board.is-out { animation: tray-out var(--dur-quick) var(--ease-in) forwards; pointer-events: none; }
@keyframes tray-out { to { transform: translateX(80px); opacity: 0; } }
.lt-tray-dishes { position: absolute; inset: 0; }
.lt-dish { position: absolute; width: var(--bowl); left: calc(var(--tx, 0px) + 12px + var(--cx, 0) * (var(--bowl) + 4px) / 2 + var(--jx, 0px)); bottom: calc(var(--lift) + var(--ty, 0px) + var(--tray-h) * 0.42 + var(--r, 0) * var(--bowl) * 0.34); transform: rotate(var(--rot, 0deg)); transform-origin: 50% 90%; transition: left 480ms var(--ease), bottom var(--dur-slow) var(--ease), opacity 420ms var(--ease); }
.lt-dish svg { display: block; width: 100%; height: calc(var(--bowl) * 0.64); overflow: visible; }
.lt-dish img { display: block; width: 100%; height: auto; }
.lt-dish .d-white { fill: var(--white); stroke: var(--paper-deep); stroke-width: 1.5; }
.lt-dish .d-food { fill: var(--tint, var(--blue)); transform: rotate(var(--frot, 0deg)); transform-origin: 50px 22px; transform-box: view-box; }
.lt-dish.k-beer { --tint: var(--amber); }
.lt-dish.is-new { animation: dish-drop 460ms var(--ease) both; }
@keyframes dish-drop { 0% { transform: translateY(-110px) rotate(calc(var(--rot, 0deg) * -2.5)); opacity: 0; } 50% { transform: translateY(0) rotate(calc(var(--rot, 0deg) * 1.3)); opacity: 1; } 64% { transform: translateY(1px) scale(1.06, 0.92) rotate(var(--rot, 0deg)); } 80% { transform: translateY(-6px) scale(1) rotate(var(--rot, 0deg)); } 100% { transform: rotate(var(--rot, 0deg)); } }
.lt-dish.is-out { animation: dish-out var(--dur-quick) var(--ease-in) forwards; pointer-events: none; }
@keyframes dish-out { to { transform: translateY(-50px) rotate(calc(var(--rot, 0deg) * 2)); opacity: 0; } }
.lt-dish:active { transform: translateY(-4px) rotate(var(--rot, 0deg)); }
.lt-tray-text { flex: none; white-space: nowrap; text-align: right; }
.lt-count { display: none; width: 68px; height: 68px; border-radius: 50%; background: var(--amber); color: var(--ink); font-size: 30px; font-weight: 700; align-items: center; justify-content: center; transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.lt-count.is-bump { animation: badge-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.lt-tray-label { font-size: 18px; font-weight: 600; color: #6E7A8C; white-space: nowrap; }
.lt-total { font-size: 48px; font-weight: 600; letter-spacing: -0.02em; color: var(--blue); white-space: nowrap; line-height: 1; margin-top: 4px; }
.lt-pay { display: flex; align-items: center; gap: 12px; height: 88px; padding: 0 36px 0 44px; border-radius: var(--r-pill); background: var(--blue-header); color: var(--white); font-size: 30px; font-weight: 600; transition: transform 160ms var(--ease), opacity var(--dur); }
.lt-pay svg { width: 32px; height: 32px; }
.lt-pay:active { transform: scale(0.97); }
.lt-pay[disabled] { opacity: 0.45; pointer-events: none; }

/* ─── Modals: scrim + card (code keypad · search · help · ID) ── */
.lt-modal { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); }
.lt-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lt-scrim { position: absolute; inset: 0; background: rgba(26,26,26,0.45); }
.lt-card { position: relative; width: 760px; border-radius: 32px; background: var(--white); padding: 40px 40px 36px; box-shadow: 0 20px 60px rgba(0,30,70,0.14), 0 0 0 1px rgba(0,60,126,0.05); transform: translateY(24px) scale(0.98); transition: transform 320ms var(--ease); }
.lt-modal:not(.is-open) { transition: opacity var(--dur-quick) var(--ease-in), visibility 0s linear var(--dur-quick); }
.lt-modal:not(.is-open) .lt-card { transition: transform var(--dur-quick) var(--ease-in); }
.lt-card.is-paper { width: 800px; background: var(--paper); }
.is-paper .lt-search-field, .is-paper .lt-row, .is-paper .lt-kbd button { background: var(--white); }
.is-paper .lt-x { position: absolute; top: 20px; right: 20px; background: var(--white); }
.lt-modal.is-open .lt-card { transform: none; }
/* ─── Help call aurora: the real voice-glow beam (React island in #help-glow), a 1080 × 720 box at the top of the shell flipped upside down so the beam it draws along its bottom edge hangs from the screen's top edge, under the physical light strip ─── */
.lt-help-glow { position: absolute; left: 0; top: 0; width: 1080px; height: 720px; overflow: hidden; pointer-events: none; transform: scaleY(-1); mix-blend-mode: screen; opacity: 0; transition: opacity 480ms var(--ease); }   /* screen-blended over the scrim so the beam adds light instead of sitting as a dull red layer */
.lt-modal.is-open .lt-help-glow { opacity: 1; }
.lt-help-shade { position: absolute; left: 0; top: 0; width: 1080px; height: 440px; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.62), rgba(0,0,0,0.36) 35%, rgba(0,0,0,0) 100%); opacity: 0; transition: opacity 480ms var(--ease); }
.lt-modal.is-open .lt-help-shade { opacity: 1; }
.lt-card.is-blue { background: var(--blue); color: var(--white); }
.lt-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.lt-card-head h2 { margin: 0; font-size: 30px; }
.lt-x { width: 64px; height: 64px; border-radius: 50%; background: var(--blue-08); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.is-blue .lt-x { background: rgba(255,255,255,0.14); color: var(--white); }
.lt-x svg { width: 28px; height: 28px; }

/* tray visual B (A2): round product photos, newest first, remove cross, +N disc */
.lt-stack.is-chips { width: auto; height: 84px; display: flex; align-items: center; gap: 14px; align-self: center; }
.lt-chip { position: relative; width: 72px; height: 72px; flex: none; cursor: pointer; }
.lt-chip img, .lt-chip .ph { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--paper); box-shadow: 0 0 0 3px var(--tile-on); }
.lt-chip .ph svg { width: 30px; height: 30px; }
.lt-chip .x { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--white); border: 2px solid var(--white); display: flex; align-items: center; justify-content: center; }
.lt-chip .x svg { width: 12px; height: 12px; }
.lt-chip.is-new { animation: chip-in 360ms var(--ease) both; }
@keyframes chip-in { 0% { width: 0; margin-right: -14px; transform: scale(0.5); opacity: 0; } 45% { width: 72px; margin-right: 0; opacity: 0.4; } 100% { width: 72px; margin-right: 0; transform: none; opacity: 1; } }   /* the row makes room first, then the photo lands */
.lt-chip.is-out { animation: chip-out 360ms var(--ease) forwards; pointer-events: none; }
@keyframes chip-out { 0% { opacity: 1; width: 72px; margin-right: 0; } 45% { opacity: 0; transform: translateX(14px) scale(0.86); width: 0; margin-right: -14px; } 100% { opacity: 0; transform: translateX(14px) scale(0.86); width: 0; margin-right: -14px; } }   /* gives its slot back at the same rate the new chip takes one, so the +N disc never moves */
.lt-chip-more.is-new { animation: fade-in var(--dur) var(--ease) 80ms both; }
.lt-chip-more.is-roll { animation: num-roll var(--dur-quick) var(--ease); }
.lt-chip:active { transform: scale(0.94); }
.lt-chip-more { width: 72px; height: 72px; border-radius: 50%; background: var(--blue-08); color: var(--blue); font-size: 22px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; }
.lt-chip-empty { display: flex; align-items: center; gap: 22px; animation: fade-in var(--dur) var(--ease); }
.lt-chip-empty .scan { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 132px; height: 100px; border-radius: 22px; background: var(--blue-08); color: var(--blue); font-size: 16px; font-weight: 600; flex: none; transition: transform 120ms var(--ease), background-color 120ms var(--ease); }
.lt-chip-empty .scan svg { width: 30px; height: 30px; }
.lt-chip-empty .scan:active { transform: scale(0.96); }
.lt-chip-empty .t { display: flex; flex-direction: column; gap: 4px; }
.lt-chip-empty .t > span:first-child { font-size: 20px; font-weight: 500; line-height: 1.25; color: var(--ink); max-width: 300px; }
.lt-chip-empty .t2 { font-size: 16px; font-weight: 500; color: var(--ink-400); }
.lt-chip-empty.is-out { animation: fade-out var(--dur-quick) var(--ease-in) forwards; }
@keyframes fade-out { to { opacity: 0; } }
.lt-tray-label { cursor: pointer; }

/* tray visual C (A5): the last three as receipt lines */
.lt-stack.is-receipt { width: 440px; height: auto; display: flex; flex-direction: column; gap: 8px; align-self: center; }
.lt-rc-row { display: flex; align-items: baseline; gap: 10px; font-size: 20px; color: var(--ink); cursor: pointer; }
.lt-rc-row .n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.lt-rc-row .dots { flex: 1; border-bottom: 2px dotted var(--paper-deep); transform: translateY(-6px); }
.lt-rc-row .p { font-weight: 600; color: var(--blue); white-space: nowrap; }
.lt-rc-row.is-new { animation: row-in 220ms var(--ease) both; }
.lt-rc-more { font-size: 16px; font-weight: 600; color: #6E7A8C; margin-top: 2px; }
/* tray visual D (A7): three overlapping photos + a toast for the last action */
.lt-stack.is-photos { width: auto; height: 84px; display: flex; align-items: center; gap: 22px; align-self: center; }
.lt-ps-stack { display: flex; }
.lt-ps-pic { position: relative; width: 80px; height: 80px; margin-left: -28px; cursor: pointer; }
.lt-ps-pic:first-child { margin-left: 0; }
.lt-ps-pic img, .lt-ps-pic .ph { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--paper); box-shadow: 0 0 0 4px var(--tile-on); }
.lt-ps-pic .ph svg { width: 32px; height: 32px; }
.lt-ps-pic.is-new { animation: chip-pop 320ms var(--ease) both; }
@keyframes chip-pop { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
.lt-ps-toast { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 14px; border-radius: 999px; background: var(--blue-08); color: var(--blue); font-size: 20px; font-weight: 600; white-space: nowrap; max-width: 380px; animation: fade-in var(--dur) var(--ease) 60ms both; }
.lt-ps-toast span { overflow: hidden; text-overflow: ellipsis; }
.lt-ps-toast svg { width: 20px; height: 20px; flex: none; }

/* cart tab: white tab on the seam between the main column and the cart zone */
.lt-cart-tab { position: absolute; left: 206px; right: 10px; bottom: 180px; height: 64px; display: flex; justify-content: center; z-index: 9; pointer-events: none; }   /* below the bar (z 10) so the 6px overlap hides under it */
.lt-cart-tab::before { display: none; }   /* bottom fade off in every view (Geio 2026-09-17) */
.lt-cart-tab::before { content: ''; position: absolute; left: 18px; right: 0; bottom: 0; height: 150px; border-bottom-right-radius: 18px; background: linear-gradient(to bottom, var(--canvas-0), var(--canvas) 90%); pointer-events: none; }   /* tiles fade into the canvas before they meet the cart tab (Geio) */
.lt-cart-btn { position: relative; width: 300px; height: 64px; pointer-events: auto; color: var(--blue-header); transition: transform 120ms var(--ease); }
.lt-cart-btn:active { transform: translateY(2px); }
.lt-cart-btn .tab-bg { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 6px); fill: var(--white); }   /* runs 6px into the bar: no seam, no gap on press */
.lt-cart-lbl { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; padding-top: 5px; font-size: 20px; font-weight: 600; transition: transform 120ms var(--ease); }
.lt-cart-lbl .up { width: 22px; height: 22px; transform: rotate(-90deg); }

/* keypad */
.lt-readout { display: flex; align-items: center; justify-content: space-between; height: 128px; padding: 0 32px; border-radius: 22px; background: rgba(255,255,255,0.10); border: 2px solid rgba(255,255,255,0.35); }
.lt-readout .v { font-size: 64px; font-weight: 800; letter-spacing: 0.12em; min-height: 1em; }
.lt-readout .caret { display: inline-block; width: 4px; height: 56px; background: var(--amber); vertical-align: -6px; margin-left: 6px; animation: caret 1s steps(2) infinite; }
@keyframes caret { to { opacity: 0; } }
.lt-match { text-align: right; }
.lt-match .n { font-size: 24px; font-weight: 800; }
.lt-match .p { font-size: 20px; color: var(--amber); font-weight: 700; margin-top: 4px; }
.lt-match.is-none .n { opacity: 0.6; font-weight: 600; }
.lt-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.lt-key { height: 132px; border-radius: 24px; background: var(--white); color: var(--ink); font-size: 52px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 rgba(0,0,0,0.18); transition: transform 120ms var(--ease); }
.lt-key:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.18); }
.lt-key.is-fn { background: rgba(255,255,255,0.12); color: var(--white); box-shadow: none; font-size: 34px; }
.lt-key.is-ok { background: var(--amber); color: var(--ink); font-size: 34px; font-weight: 800; }
.lt-key.is-ok[disabled] { opacity: 0.4; }

/* search */
.lt-search-field { display: flex; align-items: center; gap: 16px; height: 96px; padding: 0 28px; border-radius: 22px; background: var(--paper); font-size: 30px; font-weight: 700; color: var(--ink); }
.lt-search-field svg { width: 32px; height: 32px; color: var(--blue); flex: none; }
.lt-search-field .ph { color: var(--ink-400); font-weight: 600; }
.lt-search-field .caret { width: 3px; height: 32px; margin-left: -10px; border-radius: 2px; background: var(--blue); flex: none; animation: caret-soft 1.1s ease-in-out infinite; }
@keyframes caret-soft { 0%, 40% { opacity: 1; } 60%, 100% { opacity: 0.1; } }
.lt-qcount { min-height: 22px; margin: 16px 0 12px; font-size: 18px; font-weight: 600; color: var(--ink-400); }
.lt-qcount.is-fresh { animation: fade-in var(--dur-quick) var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lt-results-wrap { position: relative; margin: -4px -8px 20px; }
.lt-results-wrap::before, .lt-results-wrap::after { content: ""; position: absolute; left: 8px; right: 8px; height: 56px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity var(--dur) var(--ease); }
.lt-results-wrap::before { top: 0; background: linear-gradient(to bottom, var(--paper), rgba(239,236,232,0)); }
.lt-results-wrap::after { bottom: 0; background: linear-gradient(to top, var(--paper), rgba(239,236,232,0)); }
.lt-results-wrap.can-up::before, .lt-results-wrap.can-down::after { opacity: 1; }
.lt-results { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 4px 8px; height: 568px; overflow-y: auto; scrollbar-width: none; }
.lt-results::-webkit-scrollbar { display: none; }
.lt-row { display: flex; align-items: center; gap: 18px; height: 88px; padding: 0 16px 0 20px; border-radius: 18px; background: var(--paper); flex: none; animation: row-in 220ms var(--ease) both; animation-delay: calc(var(--i, 0) * 24ms); transition: background-color var(--dur) var(--ease); }
.lt-row.is-in, .is-paper .lt-row.is-in { background: var(--tile-on); }
.lt-row.is-added { animation: tile-pop var(--dur) var(--ease); }
.lt-row { position: relative; }
.lt-row .p { transition: margin var(--dur) var(--ease); }
.lt-row.is-in .p { margin-right: 96px; }
.lt-row .lt-step { position: absolute; right: 16px; top: 50%; height: 56px; margin-left: 0; max-width: none; overflow: visible; opacity: 0; transform: translateY(-50%) scale(0.85); transform-origin: 100% 50%; transition: opacity var(--dur-quick) var(--ease-in), transform var(--dur-quick) var(--ease-in); }
.lt-row .lt-step-btn { width: 52px; height: 52px; }
.lt-row .lt-step-n { width: 36px; font-size: 24px; }
.lt-row.is-in .lt-step { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; transition: opacity var(--dur) var(--ease) 60ms, transform var(--dur) var(--ease) 60ms; }
.lt-row .thumb { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--paper-deep); flex: none; }
.lt-row .thumb.is-empty { display: flex; align-items: center; justify-content: center; color: var(--tint, var(--blue)); }
.lt-row .thumb svg { width: 30px; height: 30px; }
.lt-row .t { flex: 1; min-width: 0; }
.lt-row .t .n { font-size: 21px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-row .t .s { font-size: 17px; color: var(--ink-400); }
.lt-row .p { font-size: 24px; font-weight: 800; color: var(--blue); white-space: nowrap; }
.lt-row .add { width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; flex: none; transition: opacity var(--dur-quick) var(--ease-in), transform var(--dur-quick) var(--ease-in); }
.lt-row:active .add { transform: scale(0.9); }
.lt-row.is-in .add { opacity: 0; transform: scale(0.6); pointer-events: none; }
.lt-row .add svg { width: 26px; height: 26px; }
.lt-row .q { min-width: 40px; height: 40px; padding: 0 8px; border-radius: var(--r-pill); background: var(--blue); color: var(--white); font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lt-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; border-radius: 18px; background: var(--white); color: var(--ink-400); font-size: 22px; font-weight: 600; text-align: center; padding: 40px; animation: fade-in var(--dur) var(--ease); }
.lt-empty .ico { width: 72px; height: 72px; border-radius: 50%; background: var(--blue-08); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.lt-empty .ico svg { width: 32px; height: 32px; }
.lt-kbd { display: flex; flex-direction: column; gap: 10px; }
.lt-kbd-row { display: flex; gap: 10px; justify-content: center; }
.lt-kbd-row.is-indent { padding-left: 34px; }
.lt-kbd button { width: 58px; height: 72px; border-radius: 14px; background: var(--paper); font-size: 26px; font-weight: 700; color: var(--ink); text-transform: uppercase; display: flex; align-items: center; justify-content: center; transition: transform 120ms var(--ease), background-color 120ms var(--ease); }
.lt-kbd button.w2 { width: 126px; }
.lt-kbd button.w4 { width: 330px; }
.lt-kbd button:active, .is-paper .lt-kbd button:active { background: var(--blue-14); transform: scale(0.94); }

/* help / ID */
.lt-msg { font-size: 24px; line-height: 1.4; color: var(--ink-600); margin: 0 0 28px; }
.lt-btns { display: flex; gap: 14px; }
.lt-btn { flex: 1; height: 88px; border-radius: var(--r-pill); font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--blue); color: var(--white); }
.lt-btn.is-quiet { background: var(--blue-08); color: var(--blue); }
.lt-btn:active { transform: scale(0.98); }
.lt-icon-big { width: 96px; height: 96px; border-radius: 50%; background: var(--blue-08); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.lt-icon-big svg { width: 44px; height: 44px; }
.lt-card.is-center { text-align: center; }
.lt-card.is-center .lt-icon-big { margin-left: auto; margin-right: auto; }
.lt-icon-big.is-ring svg { animation: bell-ring 900ms var(--ease) 120ms both; transform-origin: 50% 12%; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 75% { transform: rotate(4deg); } 90% { transform: rotate(-2deg); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ─── Hover layer: pointer devices only, 120-160ms, no overshoot ─── */
@media (hover: hover) {
  .lt-tile, .lt-dish, .lt-row { cursor: pointer; }
  .lt-tile .lt-media img { transition: transform 320ms var(--ease); }
  .lt-tile:hover .lt-media img { transform: scale(1.03); }
  .lt-seg button:not(.is-on):hover { background: rgba(255,255,255,0.55); }
  .lt-help { transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
  .lt-help:hover { transform: translateY(-1px); }
  .lt-pay:not([disabled]):hover { filter: brightness(1.1); transform: translateY(-1px); }
  .lt-cart-btn:hover .lt-cart-lbl { transform: translateY(-2px); }
  .lt-x { transition: background-color 120ms var(--ease), transform 120ms var(--ease); }
  .lt-x:hover { background: var(--blue-14); }
  .lt-btn { transition: filter 120ms var(--ease), background-color 120ms var(--ease), transform 120ms var(--ease); }
  .lt-btn:hover { filter: brightness(1.08); }
  .lt-btn.is-quiet:hover { filter: none; background: var(--blue-14); }
  .lt-kbd button:hover { background: var(--blue-08); }
  .lt-row:not(.is-in):hover { background: var(--paper-deep); }
  .is-paper .lt-row:not(.is-in):hover { background: var(--paper); }
  .lt-row .add:hover, .lt-step-btn:hover { transform: scale(1.08); }
  .lt-chip:hover img, .lt-chip:hover .ph { transform: translateY(-3px); }
  .lt-chip img, .lt-chip .ph { transition: transform 160ms var(--ease); }
  .lt-dish img, .lt-dish svg { transition: transform 160ms var(--ease); }
  .lt-dish:hover img, .lt-dish:hover svg { transform: translateY(-3px); }
}

/* ─── Dark blue chrome (logo tap): frame, rail and bottom bar in blue-header ─── */
.kiosk-shell.is-blue { background: var(--blue-header); }
.kiosk-shell.is-blue .lt-frame::after { background: radial-gradient(circle at 100% 0, transparent 17.5px, var(--blue-header) 18px); }
.kiosk-shell.is-blue .lt-frame::before { background: radial-gradient(circle at 100% 100%, transparent 17.5px, var(--blue-header) 18px); }
.kiosk-shell.is-blue .lt-rail { background: var(--blue-header); }
.kiosk-shell.is-blue .lt-logo { cursor: pointer; }
.kiosk-shell.is-blue .lt-rail-item { color: var(--white); }
.kiosk-shell.is-blue .lt-rail-item.is-tool { background: var(--white); color: var(--blue-header); }
.kiosk-shell.is-blue .lt-rail-item.is-on { color: var(--blue-header); }
.kiosk-shell.is-blue .lt-traybar { background: var(--blue-header); color: var(--white); }
.kiosk-shell.is-blue .lt-tray-label { color: rgba(255,255,255,0.75); }
.kiosk-shell.is-blue .lt-total { color: var(--white); }
.kiosk-shell.is-blue .lt-pay { background: var(--white); color: var(--blue-header); }
.kiosk-shell.is-blue .lt-cart-btn { color: var(--white); }
.kiosk-shell.is-blue .lt-cart-btn .tab-bg { fill: var(--blue-header); }
.kiosk-shell.is-blue .lt-chip-more { background: var(--on-blue-10); color: var(--white); }
.kiosk-shell.is-blue .lt-chip-empty .scan { background: var(--on-blue-10); color: var(--white); }
.kiosk-shell.is-blue .lt-chip-empty .t > span:first-child { color: var(--white); }
.kiosk-shell.is-blue .lt-chip-empty .t2 { color: rgba(255,255,255,0.6); }
.kiosk-shell.is-blue .lt-rc-row { color: var(--white); }
.kiosk-shell.is-blue .lt-rc-row .p { color: var(--white); }
.kiosk-shell.is-blue .lt-rc-row .dots { border-bottom-color: rgba(255,255,255,0.35); }
.kiosk-shell.is-blue .lt-rc-more { color: rgba(255,255,255,0.75); }
.kiosk-shell.is-blue .lt-ps-toast { background: var(--on-blue-10); color: var(--white); }
.kiosk-shell.is-blue .lt-stack-empty { box-shadow: inset 0 0 0 7px var(--paper); }
.lt-logo { cursor: pointer; }

/* ─── Welcome screen (W5b): full-width video hero with a black scrim, bottom half on the canvas: black club-scan block + settings card ─── */
.lt-welcome { position: absolute; inset: 0; z-index: 41; overflow: hidden; box-sizing: border-box; background: transparent; transition: opacity var(--dur-slow) var(--ease-in), visibility 0s linear var(--dur-slow); }
.lt-welcome.is-off { opacity: 0; visibility: hidden; pointer-events: none; }

/* ─── Apollo Klubi banner (K1d): campaign on the video + black login block, first thing in the grid column, hidden once a club session is active ─── */
.lt-club { position: relative; display: block; height: 340px; margin: 0 0 16px; border-radius: var(--r-tile); overflow: hidden; background: var(--blue-header); color: var(--white); text-decoration: none; animation: tile-in 420ms var(--ease) both; }   /* the Figma club banner: plate lattice, star + headline, QR card */
.kiosk-shell.is-club .lt-club { display: none; }
.lt-club-qr { width: 128px; height: 128px; border-radius: 16px; background: var(--white); display: flex; align-items: center; justify-content: center; flex: none; }
.lt-club-qr img { width: 110px; height: 110px; display: block; }
.lt-club-logo { height: 88px; width: auto; display: block; margin: 0 auto 18px; }
.lt-club-qr.is-big { cursor: pointer; width: 220px; height: 220px; border-radius: 24px; background: var(--paper); margin: 0 auto 22px; } .lt-club-qr.is-big img { width: 180px; height: 180px; }
.lt-club:active { transform: scale(0.995); }

/* ─── Menu logic 'flat' (the original 12 categories): smaller rail items so all twelve fit ─── */
.kiosk-shell[data-nav="flat"] .lt-rail-item { gap: 6px; }
.kiosk-shell[data-nav="flat"] .lt-rail-item .lt-rail-img { width: 72px; height: 72px; margin: -8px 0 -4px; }
.kiosk-shell[data-nav="flat"] .lt-rail-item .l { font-size: 17px; }

/* ─── Menu logic 'mega' (C7k): 7 rail entries, the second level is a column on the left of the tiles, two wider tiles per row ─── */
.kiosk-shell[data-nav="mega"] .lt-rail-item .lt-rail-img { width: 104px; height: 104px; }
.kiosk-shell[data-nav="mega"] .lt-main { display: flex; flex-direction: column; }
.kiosk-shell[data-nav="mega"] .lt-secs { margin-left: 156px; }   /* the banner spans the full width, only the sections make room for the column */
.kiosk-shell[data-nav="mega"]:not(.has-subs) .lt-secs { margin-left: 0; }   /* no column: the tiles take the space */
.kiosk-shell[data-nav="mega"] .lt-club { order: -2; flex: none; } .kiosk-shell[data-nav="mega"] .lt-secs { order: 2; flex: none; }   /* banner first, then the sticky column anchor, then the sections */   /* a flex column inside a fixed-height scroller: never let the banner shrink away */
.kiosk-shell[data-nav="mega"] .lt-subs { order: -1; position: sticky; top: 0; height: 0; overflow: visible; padding: 0; margin: 0; background: transparent; display: block; }
.kiosk-shell[data-nav="mega"] .lt-subs::after { display: none; }
.kiosk-shell[data-nav="mega"] .lt-subs:empty { display: block; }
.kiosk-shell[data-nav="mega"] .lt-sub { position: static; }
.kiosk-shell[data-nav="mega"] .lt-subs .lt-sub { width: 140px; height: 132px; padding: 0 6px; border-radius: 16px; flex-direction: column; justify-content: center; gap: 6px; font-size: 17px; line-height: 1.15; text-align: center; white-space: normal; }
.kiosk-shell[data-nav="mega"] .lt-subs .lt-sub img { width: 60px; height: 60px; margin: 0; }
.kiosk-shell[data-nav="mega"] .lt-subs { display: flex; flex-direction: column; gap: 8px; width: 140px; }
.kiosk-shell[data-nav="mega"] .lt-subs .lt-sub:first-child { height: 72px; }
.kiosk-shell[data-nav="mega"] .lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kiosk-shell[data-nav="mega"] .lt-media { height: auto; aspect-ratio: 640 / 465; }
.kiosk-shell[data-nav="mega"] .lt-name { font-size: 23px; line-height: 28px; width: auto; }
.kiosk-shell[data-nav="mega"].has-subs .lt-top::after { display: block; }   /* no sticky bar in this mode, the top fade stays */

/* ─── Menu logic 'icons': the groups rail stays on the left; the second level is a tab of icons pinned to the RIGHT edge (fixed inside the scaled shell); two big cards per row ─── */
.kiosk-shell[data-nav="icons"] .lt-main { padding-left: 24px; padding-right: 132px; }   /* cards run closer to the rail and the side tab (Geio) */
.kiosk-shell[data-nav="icons"]:not(.has-subs) .lt-main { padding-right: 36px; }   /* no side tab: wider cards */
.kiosk-shell[data-nav="icons"].has-subs .lt-club { margin-right: -96px; }   /* the banner always fills the width, the tab sits below it */
.kiosk-shell[data-nav="icons"] .lt-subs { position: fixed; right: 10px; top: 900px; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 110px; padding: 100px 0; margin: 0; box-sizing: border-box; background: transparent; overflow: visible; }   /* fixed = relative to the transformed shell, so it never scrolls and needs no sticky tricks */
.kiosk-shell[data-nav="icons"] .lt-subs::after { display: none; }
.kiosk-shell[data-nav="icons"] .lt-subs:empty { display: flex; }   /* never display:none here: the tab is parked behind the right edge and slides, like the scroll tab */
.kiosk-shell[data-nav="icons"] .lt-subs { transform: translate(130%, -50%); transition: transform var(--dur-slow) var(--ease); pointer-events: none; }
.kiosk-shell[data-nav="icons"].has-subs .lt-subs { transform: translateY(-50%); pointer-events: auto; }
.kiosk-shell[data-nav="icons"].is-search .lt-subs { transform: translate(130%, -50%); pointer-events: none; }
.kiosk-shell[data-nav="icons"] .lt-main { transition: padding-right var(--dur-slow) var(--ease); }   /* the cards widen and narrow with the tab */
.kiosk-shell[data-nav="icons"] .lt-subs .rail-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; fill: var(--white); z-index: -1; }
.kiosk-shell[data-nav="icons"] .lt-sub { position: relative; width: 88px; height: 88px; padding: 0; border-radius: 50%; justify-content: center; background: transparent; color: var(--blue-header); font-size: 17px; }
.kiosk-shell[data-nav="icons"] .lt-sub span { display: none; }
.kiosk-shell[data-nav="icons"] .lt-sub[data-sub="all"] span { display: inline; }
.kiosk-shell[data-nav="icons"] .lt-sub img { width: 60px; height: 60px; margin: 0; }
.kiosk-shell[data-nav="icons"] .lt-sub svg { width: 36px; height: 36px; }
.kiosk-shell[data-nav="icons"] .lt-sub.is-on { background: var(--blue-08); color: var(--blue-header); }
.kiosk-shell[data-nav="icons"] .lt-sub[data-sub="all"].is-on { background: var(--blue-header); color: var(--white); }
.kiosk-shell[data-nav="icons"] .lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kiosk-shell[data-nav="icons"] .lt-media { height: auto; aspect-ratio: 640 / 465; }
.kiosk-shell[data-nav="icons"] .lt-name { font-size: 23px; line-height: 28px; width: auto; }
.kiosk-shell[data-nav="icons"].has-subs .lt-top::after { display: block; }   /* no sticky chip bar here, the top fade stays */
.kiosk-shell.is-blue[data-nav="icons"] .lt-subs .rail-bg { fill: var(--blue-header); }

/* ─── Menu logic 'strip' (kept "just in case"): no rail, an icon-only tab on the left edge, the chip row above, two big cards per row ─── */
.kiosk-shell[data-nav="strip"] .lt-frame::before, .kiosk-shell[data-nav="strip"] .lt-frame::after { display: none; }
.kiosk-shell[data-nav="strip"] .lt-rail { left: 10px; top: 50%; bottom: auto; transform: translateY(-50%); width: 110px; padding: 100px 0; gap: 8px; align-items: center; background: transparent; border-radius: 0; overflow: visible; }
.kiosk-shell[data-nav="strip"] .lt-rail .rail-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; fill: var(--white); z-index: -1; }
.kiosk-shell[data-nav="strip"] .lt-rail-item { flex: none; width: 88px; height: 88px; min-height: 0; max-height: none; border-radius: 50%; padding: 0; gap: 0; background: transparent; color: var(--blue-header); }
.kiosk-shell[data-nav="strip"] .lt-rail-item svg { width: 36px; height: 36px; }
.kiosk-shell[data-nav="strip"] .lt-rail-item.is-tool { background: var(--blue-header); color: var(--white); margin-bottom: 8px; }
.kiosk-shell[data-nav="strip"] .lt-rail-item.is-on { background: var(--blue-08); }
.kiosk-shell[data-nav="strip"] .lt-rail-item.is-on::before, .kiosk-shell[data-nav="strip"] .lt-rail-item .nk, .kiosk-shell[data-nav="strip"] .lt-rail-sep { display: none; }
.kiosk-shell[data-nav="strip"] .lt-top { left: 10px; padding-left: 48px; }
.kiosk-shell[data-nav="strip"] .lt-main { left: 120px; padding-left: 28px; padding-right: 36px; }
.kiosk-shell[data-nav="strip"] .lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kiosk-shell[data-nav="strip"] .lt-media { height: auto; aspect-ratio: 640 / 465; }
.kiosk-shell[data-nav="strip"] .lt-name { font-size: 24px; line-height: 29px; width: auto; }
.kiosk-shell[data-nav="strip"] .lt-price { font-size: 28px; }
.kiosk-shell[data-nav="strip"] .lt-cart-tab { left: 10px; }
.kiosk-shell.is-blue[data-nav="strip"] .lt-rail .rail-bg { fill: var(--blue-header); }

/* 'Vaata ostukorvi' is off in every view for now (Geio 2026-09-17); the container stays for its fade above the bar */
.lt-cart-btn { display: none; }

/* ─── Search variant 'inline' (O2): the column shows field + count + card grid, keyboard docked at the panel bottom; Otsi takes the active notch ─── */
.lt-sview { position: absolute; left: 206px; right: 10px; top: 142px; bottom: 180px; padding: 16px 36px 0 38px; display: flex; flex-direction: column; gap: 14px; }
.lt-sview[hidden] { display: none; }
.lt-search-field.is-inline { background: var(--white); flex: none; margin: 0 0 12px; }   /* since 2026-09-21 the field sits right above the keyboard dock, under the results and the reader hint */
.lt-clear { margin-left: auto; width: 52px; height: 52px; border-radius: 50%; background: var(--blue-08); color: var(--blue-header); display: flex; align-items: center; justify-content: center; flex: none; }
.lt-clear svg { width: 22px; height: 22px; } .lt-clear[hidden] { display: none; }
.lt-sview .lt-qcount { margin: 2px 4px 0; }
.lt-sgrid-wrap { position: relative; flex: 1; min-height: 0; margin: 0 -8px; }
.lt-sgrid-wrap::before, .lt-sgrid-wrap::after { content: ""; position: absolute; left: 8px; right: 8px; height: 56px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity var(--dur) var(--ease); }
.lt-sgrid-wrap::before { top: 0; background: linear-gradient(to bottom, var(--canvas), var(--canvas-0)); }
.lt-sgrid-wrap::after { bottom: -16px; height: 72px; background: linear-gradient(to top, var(--canvas) 22%, var(--canvas-0)); }   /* reaches the keyboard card: no strip of plain canvas between the fade and the card (Geio) */
.lt-sgrid-wrap.can-up::before, .lt-sgrid-wrap.can-down::after { opacity: 1; }
.lt-sgrid { height: 100%; overflow-y: auto; padding: 4px 8px 24px; box-sizing: border-box; scrollbar-width: none; }
.lt-sgrid::-webkit-scrollbar { display: none; }
.lt-sgrid .lt-grid { grid-template-columns: repeat(3, 252px); }
.lt-sgrid .lt-grid { min-height: 100%; align-content: start; }
.lt-sgrid .lt-grid.is-empty { align-content: stretch; }   /* the empty state fills the whole results area */
.lt-empty.is-wide { grid-column: 1 / -1; min-height: 320px; gap: 8px; }
.lt-empty.is-wide .ico { margin-bottom: 10px; }
.lt-empty.is-wide .t { font-size: 24px; font-weight: 600; color: var(--ink); }
.lt-empty.is-wide .s { font-size: 18px; font-weight: 500; color: var(--ink-400); }
.lt-dock { position: relative; flex: none; margin: 0 -20px 16px -22px; padding: 18px 24px 22px; background: var(--white); border-radius: 14px; }   /* no shadow; 14 px = the keys' own radius, tighter than the tiles so the card sits calmly inside the 18 px panel corner (Geio) */   /* K2: a white keyboard card floating in the canvas panel, 16 px of canvas between it, the rail and the bar (Geio 2026-09-18) */
.lt-dock .lt-kbd button { width: 60px; height: 76px; background: var(--canvas); font-size: 27px; }
.lt-dock .lt-kbd button.w2 { width: 130px; } .lt-dock .lt-kbd button.w4 { width: 340px; }
.lt-dock .lt-kbd button:active { background: var(--blue-14); }
.kiosk-shell.is-search .lt-cart-tab { display: none; }
.kiosk-shell.is-search[data-nav] .lt-top::after { display: none; }   /* beats the icons-mode rule that re-enables the fade */
/* Otsi as the active category: the canvas notch, the blue tile turns into a blue disc around the icon */
.lt-rail-item.is-tool.is-on { background: transparent; color: var(--blue-header); }
.lt-rail-item.is-tool.is-on svg { width: 36px; height: 36px; padding: 22px; box-sizing: content-box; border-radius: 50%; background: var(--blue-header); color: var(--white); }
.lt-rail-item.is-tool.is-on .l { font-weight: 700; }
.kiosk-shell.is-blue .lt-sview .lt-dock { background: var(--blue-header); }
.kiosk-shell.is-blue .lt-dock::before { background: radial-gradient(circle at 100% 0, transparent 17.5px, var(--blue-header) 18px); }

/* ─── Page up / down tab: same side-tab language, pinned bottom-right above the bar, icons mode only ─── */
.lt-scrolltab { display: flex; position: fixed; right: 10px; bottom: 204px; z-index: 3; flex-direction: column; align-items: center; gap: 12px; width: 96px; padding: 96px 0; box-sizing: border-box; transform: translateX(130%); transition: transform var(--dur-slow) var(--ease); }
/* every nav mode has the page up/down tab now (Geio 2026-09-20): it hugs the bottom-right corner of the panel and slides in when the page scrolls */
.lt-scrolltab.is-on { transform: none; }
.kiosk-shell.is-search .lt-scrolltab.is-on { transform: translateX(130%); }
.lt-scrolltab .rail-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; fill: var(--white); z-index: -1; }
.lt-scrolltab button { width: 76px; height: 76px; border: 0; border-radius: 50%; background: transparent; color: var(--blue-header); display: flex; align-items: center; justify-content: center; transition: opacity var(--dur-quick) var(--ease), transform 120ms var(--ease); }
.lt-scrolltab button svg { width: 36px; height: 36px; }
.lt-scrolltab [data-dir="up"] svg { transform: rotate(-90deg); } .lt-scrolltab [data-dir="down"] svg { transform: rotate(90deg); }
.lt-scrolltab button:active { transform: scale(0.94); }
.lt-scrolltab button.is-off { opacity: 0.3; pointer-events: none; }
.kiosk-shell.is-blue .lt-scrolltab .rail-bg { fill: var(--blue-header); }

/* ─── Order button (P4): canvas pill · blue basket disc with the count badge · total over "Vaata tellimust" ─── */
.lt-order { display: inline-flex; align-items: center; gap: 20px; height: 112px; padding: 0 40px 0 14px; border: 0; border-radius: var(--r-pill); background: var(--canvas); color: var(--blue); text-align: left; transition: transform 120ms var(--ease), opacity var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.lt-order:active { transform: scale(0.97); }
.lt-order[disabled] { opacity: 0.5; pointer-events: none; }
.lt-order-disc { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--blue-header); color: var(--white); display: flex; align-items: center; justify-content: center; flex: none; }
.lt-order-disc svg { width: 36px; height: 36px; }
.lt-order-n { position: absolute; top: -4px; right: -4px; min-width: 32px; height: 32px; padding: 0 8px; box-sizing: border-box; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--canvas); }
.lt-order-n.is-roll { animation: num-roll var(--dur-quick) var(--ease); }
.lt-order-t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.lt-order .lt-total { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.lt-order-l { font-size: 18px; font-weight: 600; color: #6E7A8C; margin-top: 6px; white-space: nowrap; }
.kiosk-shell.is-blue .lt-order { background: var(--white); }
.kiosk-shell.is-blue .lt-order-n { box-shadow: 0 0 0 3px var(--white); }

/* 'Kandikul · N toitu' label off next to the order button (Geio 2026-09-17); the element stays as the tray-mode switch target */
.lt-tray-text { display: none; }

/* ─── Club login toast: a pill under the title row, 2.6 s ─── */
.lt-club-toast { position: absolute; left: 638px; bottom: 204px; transform: translate(-50%, 8px); z-index: 12; padding: 0 22px; height: 56px; display: flex; align-items: center; border-radius: 999px; background: var(--blue-header); color: var(--white); font-size: 20px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lt-club-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ─── Recent orders in the empty search (club members): one card per order with a quick fill, then the products bought before ─── */
.lt-sec-h.is-wide { grid-column: 1 / -1; margin: 0; }
.lt-orders { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.lt-order-card { display: flex; align-items: center; gap: 18px; min-height: 104px; padding: 12px 12px 12px 16px; border-radius: 20px; background: var(--white); animation: row-in 220ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.lt-order-card .thumbs { display: flex; flex: none; }
.lt-order-card .thumbs img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: var(--paper); box-shadow: 0 0 0 3px var(--white); margin-left: -14px; }
.lt-order-card .thumbs img:first-child { margin-left: 0; }
.lt-order-card .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lt-order-card .w { font-size: 16px; font-weight: 600; color: var(--ink-400); }
.lt-order-card .n { font-size: 20px; font-weight: 500; line-height: 1.25; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-order-card .sum { font-size: 24px; font-weight: 600; color: var(--blue); flex: none; }
.lt-order-add { flex: none; height: 64px; padding: 0 22px; border-radius: 999px; background: var(--blue-header); color: var(--white); font-size: 19px; transition: background-color var(--dur-quick) var(--ease), transform 120ms var(--ease); }
.lt-order-add:active { transform: scale(0.97); }
.lt-order-add.is-done { background: var(--tile-on); color: var(--blue-header); }

/* ─── Club line (H3b): star, greeting, "klubihinnad rakenduvad", sign out. Lives in the same column as the tiles, so it is always exactly as wide as they are ─── */
.lt-club-line { display: flex; align-items: center; gap: 14px; flex: none; height: 68px; padding: 0 10px 0 18px; margin: 0 0 16px; border-radius: var(--r-tile); background: var(--white); color: var(--blue-header); font-size: 20px; font-weight: 600; box-sizing: border-box; animation: tile-in 420ms var(--ease) both; }
.lt-club-line[hidden] { display: none; }
.lt-club-line .lt-star { width: 34px; height: 34px; flex: none; }
.lt-club-line .sub { color: #6E7A8C; font-weight: 500; }
.lt-club-line .sp { flex: 1; }
.lt-club-out { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: var(--r-pill); background: var(--blue-08); color: var(--blue-header); font-size: 18px; font-weight: 600; transition: transform 120ms var(--ease), background-color var(--dur-quick) var(--ease); }
.lt-club-out svg { width: 22px; height: 22px; }
/* usual items hint (2026-09-22) ─ card (F1a): the club card is two rows, greeting and the member's five usual dishes with Ava otsing */
.lt-club-line { flex-direction: column; align-items: stretch; gap: 0; height: auto; padding: 0; }
.lt-club-row { display: flex; align-items: center; gap: 14px; height: 68px; padding: 0 10px 0 18px; }
.lt-club-line .hi, .lt-club-out { white-space: nowrap; }
.lt-club-favrow { display: flex; align-items: center; gap: 18px; margin: 0 18px; padding: 14px 0 16px; border-top: 1px solid var(--blue-14); }
.lt-club-favrow .th { display: flex; flex: none; }
.lt-club-favrow .th img, .lt-otsi-tip .th img, .lt-otsi-th img { border-radius: 50%; object-fit: cover; background: var(--paper); }
.lt-club-favrow .th img { width: 60px; height: 60px; box-shadow: 0 0 0 3px var(--white); margin-left: -16px; }
.lt-club-favrow .th img:first-child, .lt-otsi-tip .th img:first-child, .lt-otsi-th img:first-child { margin-left: 0; }
.lt-club-favrow .txt, .lt-otsi-tip .txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lt-club-favrow .t { font-size: 20px; font-weight: 700; color: var(--blue-header); }
.lt-club-favrow .s { font-size: 16px; font-weight: 500; color: var(--ink-400); }
.lt-club-favrow .sp { flex: 1; }
.lt-club-favbtn { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: var(--r-pill); background: var(--blue-header); color: var(--white); font: inherit; font-size: 18px; font-weight: 700; white-space: nowrap; flex: none; transition: transform 120ms var(--ease); }
.lt-club-favbtn svg { width: 24px; height: 24px; }
.lt-club-favrow { width: auto; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }   /* a real button now: the whole row opens the search */
.lt-club-favrow:active .lt-club-favbtn { transform: scale(0.97); }
.lt-club-favrow:active .th { opacity: 0.8; }
.lt-club-favbtn { transition: transform 120ms var(--ease); }
.kiosk-shell[data-favhint="otsi"] .lt-club-favrow { display: none; }
/* ─ otsi (F5): three photo circles on the Otsi tile while signed in, and a one-time tip beside it */
.lt-otsi-th { display: none; }
.kiosk-shell.is-club[data-favhint="otsi"] .lt-otsi-th { display: flex; margin-top: 2px; padding: 3px; border-radius: var(--r-pill); background: rgba(255,255,255,0.16); }
.lt-otsi-th img { width: 26px; height: 26px; box-shadow: 0 0 0 2px var(--blue-header); margin-left: -8px; }
.lt-rail-item.is-tool.is-on .lt-otsi-th { background: var(--blue-08); }
.lt-rail-item.is-tool.is-on .lt-otsi-th img { box-shadow: 0 0 0 2px var(--canvas); }
.lt-otsi-tip { position: absolute; left: 214px; top: 220px; z-index: 12; display: flex; align-items: center; gap: 14px; width: 440px; padding: 18px 20px; border: 0; border-radius: 20px; background: var(--blue-header); color: var(--white); font: inherit; text-align: left; box-shadow: 0 16px 40px rgba(0,30,70,0.22); opacity: 0; pointer-events: none; transform: translate(-8px, -50%); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lt-otsi-tip::before { content: ""; position: absolute; left: -9px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--blue-header); border-radius: 4px; transform: rotate(45deg); }
.lt-otsi-tip.is-on { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.lt-otsi-tip .th { display: flex; flex: none; }
.lt-otsi-tip .th img { width: 44px; height: 44px; box-shadow: 0 0 0 3px var(--blue-header); margin-left: -12px; }
.lt-otsi-tip .t { font-size: 20px; font-weight: 700; }
.lt-otsi-tip .s { font-size: 16px; font-weight: 500; line-height: 1.35; color: rgba(255,255,255,0.8); }
.lt-cardsw.is-favhint { right: 166px; }
.lt-club-out:active { transform: scale(0.96); background: var(--blue-14); }
.kiosk-shell[data-nav="mega"] .lt-club-line { order: -2; }

/* ─── Club price on a tile: star + member price, the normal price struck through beside it ─── */
.lt-price.is-club { display: inline-flex; align-items: center; gap: 6px; }
.lt-price .lt-star { width: 22px; height: 22px; flex: none; }
.lt-price s { font-size: 17px; font-weight: 500; color: var(--ink-400); }

/* ─── Card style switcher: a quiet icon in the top-right corner of the shell ─── */
.lt-cardsw { position: absolute; right: 14px; top: 6px; z-index: 11; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--blue-header); opacity: 0.35; display: flex; align-items: center; justify-content: center; transition: opacity var(--dur-quick) var(--ease); }
.lt-cardsw svg { width: 20px; height: 20px; }
.lt-cardsw:active { opacity: 1; }
.lt-cardsw.is-stheme { opacity: 0; pointer-events: none; }
.kiosk-shell.is-search .lt-cardsw { opacity: 0; pointer-events: none; }
.kiosk-shell.is-search .lt-cardsw.is-stheme { opacity: 0.35; pointer-events: auto; }

/* ─── Dark search ground (corner icon in search, ?stheme=dark): the panel behind the search column goes blue-header ─── */
.kiosk-shell[data-stheme="dark"].is-search .lt-frame { background: var(--blue-header); }
.kiosk-shell[data-stheme="dark"].is-search .lt-top h1 { color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-seg { background: var(--on-blue-10); }
.kiosk-shell[data-stheme="dark"].is-search .lt-seg button { color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-seg button.is-on { background: var(--white); color: var(--blue-header); }
.kiosk-shell[data-stheme="dark"].is-search .lt-rail-item.is-on::before { background: var(--blue-header); }
.kiosk-shell[data-stheme="dark"].is-search .lt-rail-item .nk-t { background: radial-gradient(circle at 0 0, transparent 17.5px, var(--blue-header) 18px); }
.kiosk-shell[data-stheme="dark"].is-search .lt-rail-item .nk-b { background: radial-gradient(circle at 0 100%, transparent 17.5px, var(--blue-header) 18px); }
.kiosk-shell[data-stheme="dark"].is-search .lt-rail-item.is-tool.is-on { color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-rail-item.is-tool.is-on svg { background: var(--white); color: var(--blue-header); }
.kiosk-shell[data-stheme="dark"].is-search .lt-sec-h .disp { color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-sec-h .n { color: rgba(255,255,255,0.6); }
.kiosk-shell[data-stheme="dark"].is-search .lt-qcount { color: rgba(255,255,255,0.6); }
.kiosk-shell[data-stheme="dark"].is-search .lt-scan-hint { color: rgba(255,255,255,0.72); }
.kiosk-shell[data-stheme="dark"].is-search .lt-scan-hint svg { color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-sgrid-wrap::before { background: linear-gradient(to bottom, var(--blue-header), rgba(0,57,129,0)); }
.kiosk-shell[data-stheme="dark"].is-search .lt-sgrid-wrap::after { background: linear-gradient(to top, var(--blue-header) 22%, rgba(0,57,129,0)); }
.kiosk-shell[data-stheme="dark"].is-search .lt-cardsw.is-stheme { color: var(--white); opacity: 0.5; }
/* dark search surfaces: field, order cards, tiles, keyboard dock and empty state go translucent white, text white */
.kiosk-shell[data-stheme="dark"].is-search .lt-search-field.is-inline { background: var(--on-blue-10); color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-search-field svg { color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-search-field .ph { color: rgba(255,255,255,0.55); }
.kiosk-shell[data-stheme="dark"].is-search .lt-search-field .caret { background: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-clear { background: var(--on-blue-10); color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-order-card { background: var(--on-blue-10); }
.kiosk-shell[data-stheme="dark"].is-search .lt-order-card .w { color: rgba(255,255,255,0.6); }
.kiosk-shell[data-stheme="dark"].is-search .lt-order-card .n, .kiosk-shell[data-stheme="dark"].is-search .lt-order-card .sum { color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-order-card .thumbs img { box-shadow: 0 0 0 3px var(--blue-header); }
.kiosk-shell[data-stheme="dark"].is-search .lt-order-add { background: var(--white); color: var(--blue-header); }
.kiosk-shell[data-stheme="dark"].is-search .lt-order-add.is-done { background: var(--on-blue-10); color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search #sresults .lt-tile { background: var(--on-blue-10); }
.kiosk-shell[data-stheme="dark"].is-search #sresults .lt-tile.is-in { background: var(--on-blue-24); }
.kiosk-shell[data-stheme="dark"].is-search #sresults .lt-name, .kiosk-shell[data-stheme="dark"].is-search #sresults .lt-price, .kiosk-shell[data-stheme="dark"].is-search #sresults .lt-act { color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search #sresults .lt-price s { color: rgba(255,255,255,0.55); }
.kiosk-shell[data-stheme="dark"].is-search #sresults .lt-actions { border-top-color: rgba(255,255,255,0.18); }
.kiosk-shell[data-stheme="dark"].is-search #sresults .lt-actions .sep, .kiosk-shell[data-stheme="dark"].is-search #sresults .lt-tile.is-in .lt-actions .sep { background: rgba(255,255,255,0.18); }
.kiosk-shell[data-stheme="dark"].is-search #sresults .lt-act:active { background: var(--on-blue-10); }
.kiosk-shell[data-stheme="dark"].is-search .lt-dock { background: var(--on-blue-10); }
.kiosk-shell[data-stheme="dark"].is-search .lt-dock .lt-kbd button { background: var(--on-blue-10); color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-dock .lt-kbd button:active { background: var(--on-blue-24); }
.kiosk-shell[data-stheme="dark"].is-search .lt-empty { background: var(--on-blue-10); color: rgba(255,255,255,0.7); }
.kiosk-shell[data-stheme="dark"].is-search .lt-empty .ico { background: var(--on-blue-10); color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-empty.is-wide .t { color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-empty.is-wide .s { color: rgba(255,255,255,0.6); }
.kiosk-shell[data-stheme="dark"].is-search .lt-teaser-top .l { color: var(--white); }
.kiosk-shell[data-stheme="dark"].is-search .lt-teaser-btn { background: var(--white); color: var(--blue-header); }

/* ─── V8 card: an action row along the bottom edge behind a hairline, Info | + Lisa; the stepper takes the right half once the dish is on the tray ─── */
.lt-actions { display: flex; align-items: stretch; margin: 2px -20px -18px -22px; min-height: 60px; border-top: 1px solid var(--blue-14); }
.lt-act { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 60px; font-size: 18px; font-weight: 600; color: var(--blue-header); transition: background-color var(--dur-quick) var(--ease); }
.lt-act svg { width: 22px; height: 22px; }
.lt-act.is-add { color: var(--blue); font-weight: 700; }
.lt-act:active { background: var(--blue-08); }
.lt-actions .sep { width: 1px; background: var(--blue-14); }
.lt-act-r { flex: 1; display: flex; align-items: center; justify-content: center; }
.lt-act-r .lt-act { width: 100%; }
.lt-tile.is-in .lt-act-r .lt-act.is-add { display: none; }
.lt-tile.is-in .lt-actions { border-top-color: rgba(0,60,126,0.2); }
.lt-actions .sep { transition: background-color var(--dur) var(--ease); } .lt-tile.is-in .lt-actions .sep { background: rgba(0,60,126,0.2); }
.kiosk-shell[data-card="actions"] .lt-tile.is-in .lt-price { font-size: 26px; }   /* the price keeps its size, the stepper is not beside it any more */

/* ─── Product info modal (stub until the product feed carries ingredients and allergens) ─── */
.lt-card.is-info { padding-top: 24px; }
.lt-info-media { aspect-ratio: 640 / 465; height: auto; border-radius: 20px; overflow: hidden; background: var(--paper-deep); margin-bottom: 22px; }   /* the plated cut-outs are 640×465: the box takes their ratio so nothing is cropped (Geio 2026-09-20) */
.lt-info-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt-info-media img[hidden] { display: none; }
.lt-info-meta { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; color: var(--ink-400); margin-bottom: 16px; }
.lt-info-meta .p { color: var(--blue); font-size: 24px; margin-left: auto; }
.lt-info-alg { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; font-size: 18px; font-weight: 600; color: var(--ink-400); }   /* allergen pills as in the KFC lab modal */
.lt-info-alg:empty { display: none; }
.lt-info-alg .l { margin-right: 4px; }
.lt-alg-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-pill); font-size: 18px; font-weight: 600; }
.lt-alg-pill svg { width: 22px; height: 22px; flex: none; }
.lt-btn svg { width: 26px; height: 26px; }

/* ─── Empty search, signed out: S4f club teaser · the hint sits higher, a faded ghost of the recent-orders list sits at the bottom with a club-price chip and Logi sisse ─── */
.lt-empty.is-wide.has-teaser { position: relative; justify-content: center; }
.lt-empty-hint { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 220px; }
.lt-teaser { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.lt-teaser-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 6px 4px; }
.lt-teaser-top .l { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--blue-header); text-align: left; }   /* the box centres its hint; the teaser line stays left-aligned and may wrap */
.lt-teaser-top .l .lt-star { flex: none; }
.lt-teaser .lt-star { width: 28px; height: 28px; }
.lt-teaser-btn { flex: none; white-space: nowrap; height: 52px; padding: 0 22px; border: 0; border-radius: var(--r-pill); background: var(--blue-08); color: var(--blue-header); font-size: 19px; font-weight: 600; transition: transform 120ms var(--ease), background-color var(--dur-quick) var(--ease); }
.lt-teaser-btn:active { transform: scale(0.96); background: var(--blue-14); }
.lt-ghost { display: flex; align-items: center; gap: 18px; height: 96px; padding: 12px 16px; border-radius: 20px; background: var(--canvas); opacity: 0.5; box-sizing: border-box; pointer-events: none; }
.lt-ghost.is-first { opacity: 0.9; }
.lt-ghost .th { display: flex; }
.lt-ghost .th i { width: 56px; height: 56px; border-radius: 50%; background: var(--tile-on); box-shadow: 0 0 0 3px var(--canvas); margin-left: -14px; }
.lt-ghost .th i:first-child { margin-left: 0; }
.lt-ghost .mid { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.lt-ghost .mid i { display: block; height: 12px; border-radius: 6px; background: var(--tile-on); }
.lt-ghost .mid .a { width: 120px; }
.lt-ghost .mid .b { width: 300px; height: 14px; }
.lt-ghost:not(.is-first) .mid .b { width: 260px; }
.lt-ghost .chip { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: var(--white); color: var(--blue-header); font-size: 16px; font-weight: 700; margin-right: 10px; }
.lt-ghost .chip .lt-star { width: 20px; height: 20px; }
.lt-ghost .btn { width: 170px; height: 52px; border-radius: var(--r-pill); background: var(--tile-on); }

/* ─── Side tabs lift off the canvas: a soft shadow thrown to the LEFT only, wide and far on the pointed side, nothing at the screen edge (Geio 2026-09-18) ─── */
/* TEMPORARILY OFF (Geio 2026-09-18): .kiosk-shell[data-nav="icons"] .lt-subs .rail-bg, .lt-scrolltab .rail-bg { filter: drop-shadow(-18px 0 18px rgba(0,30,70,0.12)) drop-shadow(-6px 0 6px rgba(0,30,70,0.04)); } */   /* offset = blur, so nothing bleeds right; stronger on the left (Geio) */   /* thrown left, soft (Geio: keep it, less opacity) */
/* the tab meets the shell's white frame on the right: a white bridge over the 10 px frame strip hides the blur bleed, so it is white into white */
.kiosk-shell[data-nav="icons"] .lt-subs::before, .lt-scrolltab::before { content: ""; position: absolute; right: -12px; top: -600px; bottom: -600px; width: 14px; background: var(--white); z-index: 0; }   /* runs the whole frame strip (the shell clips it): the tab tips always meet solid white, no seam, no antialias sliver */
.kiosk-shell.is-blue[data-nav="icons"] .lt-subs::before, .kiosk-shell.is-blue .lt-scrolltab::before { background: var(--blue-header); }

/* ─── Sub-category style switcher (second corner icon, left of the card one) and the 3D renders in the side tab ─── */
.lt-cardsw.is-subs { right: 52px; }
.kiosk-shell[data-nav="icons"] .lt-sub img.is-3d { width: 82px; height: 82px; border-radius: 0; object-fit: contain; background: transparent; margin: 0; }
.kiosk-shell[data-nav="icons"] .lt-sub.is-on img.is-3d { transform: scale(1.06); }

/* ─── Top chip bar (groups / flat / strip): right fade = an opaque canvas gradient on a sticky sibling before the bar, a sticky shade under it, 3D renders in the chips ─── */
/* ─── Big category discs (canvas A2 + P6): pastel fill, 5 px white ring, 3D render, name under; in flow at the top and scrolled away, the sticky chip bar fades in once it sticks ─── */
.lt-subs-hero { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 24px 12px; padding: 12px 0 28px; }   /* left-aligned, five 148 px columns per row, the rest wrap (Geio 2026-09-21) */
/* under the discs the bar takes no visible room: it overlaps the first section (negative margin), transparent and inert, and fades in once it sticks at the top */
.kiosk-shell[data-subtop="discs"].has-subs:not([data-nav="icons"]):not([data-nav="mega"]) .lt-subs { margin-bottom: calc(-1 * var(--subs-h, 106px)); opacity: 0; pointer-events: none; transition: opacity var(--dur-quick) var(--ease); }
.kiosk-shell[data-subtop="discs"].has-subs:not([data-nav="icons"]):not([data-nav="mega"]).subs-stuck .lt-subs { opacity: 1; pointer-events: auto; }
.kiosk-shell[data-subtop="discs"].has-subs:not([data-nav="icons"]):not([data-nav="mega"]):not(.subs-stuck) .lt-subs-rfade, .kiosk-shell[data-subtop="discs"].has-subs:not([data-nav="icons"]):not([data-nav="mega"]):not(.subs-stuck) .lt-subs-shade { opacity: 0; }
.kiosk-shell:not(.has-subs) .lt-subs-hero, .kiosk-shell[data-nav="icons"] .lt-subs-hero, .kiosk-shell[data-nav="mega"] .lt-subs-hero, .kiosk-shell[data-subtop="chips"] .lt-subs-hero { display: none; }
.lt-sub-big { width: 148px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 19px; font-weight: 600; line-height: 1.15; color: var(--ink); text-align: center; transition: color var(--dur-quick) var(--ease), transform 120ms var(--ease); }
.lt-sub-big:active { transform: scale(0.97); }
.lt-sub-big .disc { width: 128px; height: 128px; box-sizing: border-box; border: 5px solid var(--white); border-radius: 50%; background: var(--pastel, var(--white)); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: box-shadow var(--dur-quick) var(--ease); }
.lt-sub-big .disc img { width: 96px; height: 96px; object-fit: contain; display: block; }
.lt-sub-big .disc img.is-photo { width: 118px; height: 118px; border-radius: 50%; object-fit: cover; }
.lt-sub-big .l { max-width: 148px; }
.kiosk-shell.subs-touched .lt-sub-big.is-on { color: var(--blue-header); font-weight: 700; }
.kiosk-shell.subs-touched .lt-sub-big.is-on .disc { box-shadow: 0 0 0 4px var(--blue-header); }
/* the sticky chip bar under the discs = the original filled chips, each on its sub's pastel, the active one navy (Geio 2026-09-21; the O6c underline was tried and dropped) */
.kiosk-shell[data-subtop="discs"]:not([data-nav="icons"]):not([data-nav="mega"]) .lt-sub { background: var(--pastel, var(--white)); }
.kiosk-shell[data-subtop="discs"]:not([data-nav="icons"]):not([data-nav="mega"]) .lt-sub.is-on { background: var(--blue-header); }
.kiosk-shell[data-subtop="discs"]:not([data-nav="icons"]):not([data-nav="mega"]) .lt-sub img.is-3d { width: 52px; height: 52px; padding: 6px; box-sizing: content-box; border-radius: 50%; background: var(--white); margin-left: -14px; }   /* the render sits in a white disc inside the pastel chip (Geio 2026-09-21); the active navy chip keeps the white disc too */
/* the club banner leaves the grouped views that carry the discs (Geio 2026-09-21); it stays in icons and mega modes and on categories without subs */
.kiosk-shell[data-subtop="discs"].has-subs:not([data-nav="icons"]):not([data-nav="mega"]) #club-banner { display: none; }
.lt-cardsw.is-subtop { right: 90px; }
.lt-cardsw.is-secfx { right: 128px; }
/* ─── Info disc on every photo (lab): top-left, 44 px like the stepper's plus, white with the blue icon ─── */
.lt-info-btn { position: absolute; left: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--blue); display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform 120ms var(--ease); }
.lt-info-btn svg { width: 24px; height: 24px; }
.lt-info-btn:active { transform: scale(0.9); }
/* ─── Section arrival cue (lab): ring (navy outline fades) or flash (the section ground goes a shade darker blue and fades back); trigger = the active sub changing (scroll spy at once, a tap 420 ms later when the smooth scroll has landed; at the bottom the last section counts) ─── */
.lt-sec { position: relative; isolation: isolate; }
.lt-sec::before { content: ""; position: absolute; inset: -14px -14px -16px; border-radius: 26px; background: var(--pastel, var(--tile-on)); opacity: 0; pointer-events: none; z-index: -1; }
.kiosk-shell[data-secfx="ring"] .lt-sec::before { background: transparent; box-shadow: 0 0 0 3px var(--blue-header); }
.kiosk-shell[data-secfx="ring"] .lt-sec.is-cue::before { animation: sec-ring 1200ms var(--ease) both; }
@keyframes sec-ring { 0% { opacity: 0; } 15% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
.kiosk-shell[data-secfx="flash"] .lt-sec::before { background: var(--tile-on); transition: opacity 520ms var(--ease); }   /* the light blue fills the area around the cards, like the ring's footprint */
.kiosk-shell[data-secfx="flash"] .lt-sec.is-cue::before { opacity: 1; transition: none; }   /* snaps in, then eases out when cueSec drops the class */
.kiosk-shell[data-secfx="cards"] .lt-sec.is-cue .lt-tile:not(.is-in) { background-color: var(--canvas-deep); transition: none; }   /* snaps to blue at once; the tile's own 400 ms transition eases it back to white when the class drops */   /* the cards themselves blink: a class, not an animation (an animation would replace the tile's entrance keyframe and replay it when it ends); is-cue is dropped by cueSec after 480 ms and the tile's own background transition brings the white back */
@media (prefers-reduced-motion: reduce) { .lt-sec.is-cue::before { animation: none; } }
.lt-subs-rfade { position: sticky; top: -4px; z-index: 4; height: 0; margin: 0; pointer-events: none; }   /* sits right before the bar and sticks at the same offset, so its fade rides on the bar in both states */
.lt-subs-rfade::after { content: ""; position: absolute; right: 0; top: 0; width: 96px; height: var(--subs-h, 106px); background: linear-gradient(to right, var(--canvas-0), var(--canvas) 70%); transition: opacity var(--dur-quick) var(--ease); }
.lt-subs-rfade.is-end::after { opacity: 0; }
.lt-subs-rfade::before { content: ""; position: absolute; left: 0; top: 0; width: 96px; height: var(--subs-h, 106px); background: linear-gradient(to left, var(--canvas-0), var(--canvas) 70%); opacity: 0; transition: opacity var(--dur-quick) var(--ease); }   /* the same fade on the left once chips have scrolled behind that edge */
.lt-subs-rfade:not(.is-start)::before { opacity: 1; }
.kiosk-shell:not(.has-subs) .lt-subs-rfade, .kiosk-shell[data-nav="icons"] .lt-subs-rfade, .kiosk-shell[data-nav="mega"] .lt-subs-rfade { display: none; }
.lt-subs-shade { position: sticky; top: calc(var(--subs-h, 106px) - 10px); z-index: 3; height: 22px; margin: 0 0 -22px; background: linear-gradient(to bottom, var(--canvas), var(--canvas-0)); pointer-events: none; }
.kiosk-shell:not(.has-subs) .lt-subs-shade, .kiosk-shell[data-nav="icons"] .lt-subs-shade, .kiosk-shell[data-nav="mega"] .lt-subs-shade { display: none; }
.lt-sub img.is-3d { width: 64px; height: 64px; border-radius: 0; object-fit: contain; background: transparent; margin-left: -16px; }

/* ─── Tray bar with items = one canvas pill (C1e with C1c's full radius): scanner disc, hairline, chips with white rings, "+N" white, the order button white inside ─── */
.lt-traybar { transition: padding var(--dur) var(--ease); }
.lt-traybar::before { content: ""; position: absolute; left: 16px; right: 16px; top: 16px; bottom: 16px; border-radius: var(--r-pill); background: var(--canvas); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
.lt-traybar > * { position: relative; }
.lt-traybar.has-items { padding: 0 34px 0 46px; }
.lt-traybar.has-items::before { opacity: 1; }
.lt-traybar.has-items .lt-order { background: var(--white); }
.lt-traybar.has-items .lt-chip img, .lt-traybar.has-items .lt-chip .ph { box-shadow: 0 0 0 3px var(--white); }
.lt-traybar.has-items .lt-chip-more { background: var(--white); }
.lt-chip-scan { position: relative; width: 68px; height: 68px; margin-right: 18px; border: 0; padding: 0; border-radius: 50%; background: var(--white); color: var(--blue-header); display: flex; align-items: center; justify-content: center; flex: none; animation: chip-in 360ms var(--ease) both; transition: transform 120ms var(--ease); }
.lt-chip-scan svg { width: 30px; height: 30px; }
.lt-chip-scan:active { transform: scale(0.94); }
.lt-chip-scan::after { content: ""; position: absolute; right: -18px; top: 10px; width: 1px; height: 48px; background: var(--blue-14); }
.kiosk-shell.is-blue .lt-traybar::before { background: var(--on-blue-10); }
.kiosk-shell.is-blue .lt-chip-scan, .kiosk-shell.is-blue .lt-traybar.has-items .lt-chip-more { background: var(--on-blue-10); color: var(--white); }

/* ─── Tile on the tray = F6: a vertical stepper on the photo's right edge (plus over count over minus), the foot keeps the full price with the struck normal price; the card does not grow ─── */
.lt-foot .lt-price { min-width: 0; }
.lt-tile.is-in .lt-price { font-size: 26px; }
.lt-tile.is-in .lt-body { position: static; }   /* the tile, not the body, is the stepper's box, so top/right land on the photo */
.lt-tile.is-in .lt-foot .lt-step { position: absolute; right: 14px; top: 14px; z-index: 2; flex-direction: column; justify-content: flex-start; gap: 2px; height: auto; max-width: 44px; padding: 2px; transform-origin: 100% 0; }
.lt-tile.is-in .lt-foot .lt-step .lt-step-btn { width: 40px; height: 40px; }
.lt-tile.is-in .lt-foot .lt-step .lt-step-btn.is-plus { order: -1; }
.lt-tile.is-in .lt-foot .lt-step .lt-step-btn:not(.is-plus) { order: 1; }   /* plus, then the count, then minus */
.lt-tile.is-in .lt-foot .lt-step .lt-step-n { width: 40px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }

/* ─── Order sheet (the KFC lab checkout UX in LIDO clothes): inset bottom sheet, lines with steppers, money foot, pay ─── */
.lt-sheet { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.lt-sheet.is-open { pointer-events: auto; }
.lt-sheet-scrim { position: absolute; inset: 0; background: rgba(26,26,26,0.45); opacity: 0; transition: opacity var(--dur) var(--ease); }
.lt-sheet.is-open .lt-sheet-scrim { opacity: 1; }
.lt-sheet-panel { position: absolute; left: 0; right: 0; top: auto; bottom: 0; max-height: calc(100% - 140px); border-radius: 40px 40px 0 0; background: var(--white); display: flex; flex-direction: column; padding: 30px 36px 32px; box-sizing: border-box; box-shadow: none; opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), left var(--dur-slow) var(--ease), right var(--dur-slow) var(--ease), bottom var(--dur-slow) var(--ease), border-radius var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); }
.lt-sheet.is-open .lt-sheet-panel { opacity: 1; transform: none; transition-duration: var(--dur-slow); }
.lt-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 18px; flex: none; }
.lt-sheet-head h2 { margin: 0; font-size: 36px; letter-spacing: -0.03em; color: var(--blue); display: flex; align-items: baseline; gap: 14px; }
.lt-sheet-n { font-family: var(--font-sans); font-size: 20px; font-weight: 600; letter-spacing: 0; color: var(--ink-400); }
.lt-sheet-x { width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--blue-08); color: var(--blue-header); display: flex; align-items: center; justify-content: center; }
.lt-sheet-x svg { width: 26px; height: 26px; }
.lt-sheet-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.lt-sheet-body::-webkit-scrollbar { display: none; }
.lt-oline { display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 10px; border-radius: 20px; background: var(--canvas); animation: row-in 220ms var(--ease) both; }
.lt-oline.is-out { opacity: 0; transform: translateX(24px); transition: opacity 180ms var(--ease-in), transform 180ms var(--ease-in); }
.lt-oline .th { width: 84px; height: 84px; border-radius: 16px; overflow: hidden; background: var(--paper-deep); flex: none; }
.lt-oline .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt-oline .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lt-oline .n { font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.lt-oline .s { font-size: 15px; font-weight: 500; color: var(--ink-400); }
.lt-ostep { display: flex; align-items: center; gap: 2px; height: 48px; padding: 2px; border-radius: var(--r-pill); background: var(--white); flex: none; }
.lt-oline .pr { min-width: 110px; text-align: right; font-size: 21px; font-weight: 600; color: var(--blue); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.lt-oline .pr s { font-size: 15px; font-weight: 500; color: var(--ink-400); }
.lt-oline .del { width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-400); display: flex; align-items: center; justify-content: center; flex: none; transition: background-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease); }
.lt-oline .del svg { width: 24px; height: 24px; }
.lt-oline .del:active { background: var(--blue-08); color: var(--blue-header); }
.lt-oempty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 0 40px; color: var(--ink-400); }
.lt-oempty .ico svg { width: 56px; height: 56px; }
.lt-oempty .t { font-size: 22px; font-weight: 500; }
.lt-oadd { height: 64px; padding: 0 28px; border: 0; border-radius: var(--r-pill); background: var(--blue-08); color: var(--blue-header); font-size: 20px; }
.lt-sheet-foot { position: relative; flex: none; padding-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.lt-totals { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.lt-totals:empty { display: none; }
.lt-totals .r { display: flex; justify-content: space-between; align-items: center; font-size: 19px; font-weight: 500; color: var(--ink-400); }
.lt-totals .r.is-club { color: var(--blue-header); font-weight: 600; }
.lt-totals .r.is-club span:first-child { display: flex; align-items: center; gap: 8px; }
.lt-totals .r.is-club .lt-star { width: 24px; height: 24px; }
.lt-totals .r.is-total { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; padding-top: 6px; }
.lt-sheet-pay { height: 96px; border: 0; border-radius: var(--r-pill); background: var(--blue-header); color: var(--white); font-size: 28px; display: flex; align-items: center; justify-content: center; gap: 16px; transition: background-color var(--dur-quick) var(--ease), transform 120ms var(--ease), opacity var(--dur) var(--ease); }
.lt-sheet-pay:disabled { opacity: 0.45; }
.lt-sheet-pay:active { transform: scale(0.98); }
.lt-sheet-pay .num { font-weight: 700; }
.lt-sheet-pay.is-asking { background: var(--blue); }
.lt-paypop { position: absolute; left: 0; right: 0; bottom: 112px; padding: 20px; border-radius: 28px; background: var(--canvas); box-shadow: 0 16px 48px rgba(0,30,70,0.18); opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none; transition: opacity var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease); z-index: 2; }
.lt-paypop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.lt-paypop-t { font-size: 20px; font-weight: 600; color: var(--blue); margin: 0 0 14px 6px; }
.lt-paypop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lt-paytile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 20px; border: 0; border-radius: 20px; background: var(--white); color: var(--blue-header); text-align: left; transition: transform 120ms var(--ease); }
.lt-paytile:active { transform: scale(0.97); }
.lt-paytile svg { width: 36px; height: 36px; margin-bottom: 8px; }
.lt-paytile .t { font-size: 22px; font-weight: 600; }
.lt-paytile .s { font-size: 16px; font-weight: 500; color: var(--ink-400); }
/* pay stage: the panel grows to the whole screen in LIDO blue, the sheet content steps aside */
.lt-sheet.is-pay .lt-sheet-panel { top: 0; max-height: none; border-radius: 0; background: var(--blue-header); box-shadow: none; }
.lt-sheet .lt-sheet-head, .lt-sheet .lt-sheet-body, .lt-sheet .lt-sheet-foot { transition: opacity var(--dur) var(--ease); }
.lt-sheet.is-pay :is(.lt-sheet-head, .lt-sheet-body, .lt-sheet-foot) { opacity: 0; pointer-events: none; }
.lt-paystage { display: none; }
.lt-sheet.is-pay .lt-paystage { display: flex; flex-direction: column; position: absolute; inset: 0; z-index: 3; padding: 40px; color: var(--white); animation: tile-in 320ms var(--ease) both; }
.lt-ps-back { align-self: flex-start; display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 26px 0 16px; border: 0; border-radius: var(--r-pill); background: rgba(255,255,255,0.12); color: var(--white); font-size: 20px; font-weight: 600; }
.lt-ps-back svg { width: 26px; height: 26px; transform: rotate(180deg); }
.lt-ps-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.lt-ps-ring { position: relative; width: 460px; height: 460px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.lt-ps-ring .ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: ps-spin 1.6s linear infinite; }
.lt-ps-ring .ring circle { fill: none; stroke: var(--white); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 110 186; opacity: 0.9; }
.lt-ps-ring.is-still { width: auto; height: auto; padding: 24px 0; }
@keyframes ps-spin { to { transform: rotate(360deg); } }
.lt-ps-ring .amt { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lt-ps-ring .amt .v { font-size: 96px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.lt-ps-ring .amt .s { font-size: 24px; color: rgba(255,255,255,0.6); }
.lt-ps-instr { font-family: var(--font-display); font-size: 56px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; max-width: 780px; }
.lt-ps-sub { margin: 0; font-size: 26px; line-height: 1.4; color: rgba(255,255,255,0.65); max-width: 640px; }
.lt-ps-chevs { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--amber); }
.lt-ps-chevs svg { width: 64px; height: 38px; opacity: 0.2; animation: ps-chev 1.6s ease-in-out infinite; }
.lt-ps-chevs svg:nth-child(2) { animation-delay: 0.25s; } .lt-ps-chevs svg:nth-child(3) { animation-delay: 0.5s; }
@keyframes ps-chev { 0%, 100% { opacity: 0.2; transform: translateY(0); } 35% { opacity: 1; transform: translateY(14px); } 70% { opacity: 0.2; transform: translateY(0); } }
.lt-ps-done { height: 88px; padding: 0 44px; border: 0; border-radius: var(--r-pill); background: var(--white); color: var(--blue-header); font-size: 26px; margin-top: 12px; }
/* confirmation: full white screen, big order number, auto-reset ring top right */
.lt-confirm { position: absolute; inset: 0; z-index: 40; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 60px; box-sizing: border-box; opacity: 0; }
.lt-confirm[hidden] { display: none; }
.lt-confirm.is-on { opacity: 1; transition: opacity var(--dur) var(--ease); }
.lt-cf-ring { position: absolute; left: 50%; bottom: 36px; width: 56px; height: 56px; transform: translateX(-50%) rotate(-90deg); }   /* the countdown sits bottom centre (Geio 2026-09-20) */
.lt-cf-ring circle { fill: none; stroke-width: 3.5; }
.lt-cf-ring .bg { stroke: var(--blue-14); }
.lt-cf-ring .fg { stroke: var(--blue); transition: stroke-dashoffset 120ms linear; }
.lt-cf-check { width: 128px; height: 128px; border-radius: 50%; background: var(--white); color: var(--blue-header); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; animation: tile-pop var(--dur-slow) var(--ease); }
.lt-cf-check svg { width: 64px; height: 64px; }
.lt-confirm h2 { margin: 0; font-size: 56px; letter-spacing: -0.03em; color: var(--blue); }
.lt-cf-numl { font-size: 22px; font-weight: 600; color: var(--ink-400); margin-top: 24px; }
.lt-cf-num { font-family: var(--font-display); font-size: 160px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--blue); }
.lt-cf-next { max-width: 640px; margin: 8px 0 28px; font-size: 24px; line-height: 1.45; color: var(--ink-600); }
.lt-cf-close { height: 88px; padding: 0 44px; border: 0; border-radius: var(--r-pill); background: var(--white); color: var(--blue-header); font-size: 24px; }

/* ─── Drawer extras: promo code and gift card rows, the code entry modal, the gift options ─── */
.lt-sheet-body #os-lines { display: flex; flex-direction: column; gap: 8px; }
.lt-os-extras { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lt-os-extras[hidden] { display: none; }
.lt-os-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; padding: 0 18px 0 20px; border: 0; border-radius: 20px; background: var(--white); box-shadow: inset 0 0 0 1px var(--blue-14); color: var(--blue-header); font-size: 20px; font-weight: 600; text-align: left; transition: background-color var(--dur-quick) var(--ease); }
.lt-os-row:active { background: var(--blue-08); }
.lt-os-row .l { display: flex; align-items: center; gap: 12px; }
.lt-os-row .l svg { width: 26px; height: 26px; }
.lt-os-row .v { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500; color: var(--ink-400); }
.lt-os-row .v svg { width: 20px; height: 20px; }
.lt-os-row .v b { font-weight: 700; color: var(--blue-header); }
.lt-os-row .v .x { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-08); color: var(--blue-header); display: flex; align-items: center; justify-content: center; }
.lt-totals .r.is-disc { color: var(--blue-header); font-weight: 600; }
.lt-sheet-pay.is-confirm { background: var(--blue); }
.lt-card.is-entry { width: 860px; padding: 32px 36px 32px; }
.lt-search-field.is-entry { margin-bottom: 12px; }
.lt-search-field.is-entry .ph[hidden] { display: none; }
.lt-entry-note { min-height: 28px; font-size: 18px; font-weight: 600; color: var(--ink-400); margin: 0 0 12px 6px; }
.lt-entry-note.is-bad { color: var(--amber); }
.lt-kbd.is-entry { margin-bottom: 24px; }
.lt-kbd.is-entry button { background: var(--canvas); }


/* ─── Confirmation: falling dishes (the 3D renders, KFC's cf-rain) behind the check, the title and the tray summary; no order number ─── */
.lt-confirm { padding: 0; }
.lt-cf-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lt-cf-rain img { position: absolute; top: -300px; aspect-ratio: 1; object-fit: contain; will-change: transform; transform: rotate(var(--r0, 0deg)); }   /* transparent round cut-outs, no shadow, spinning a full turn on the way down */
.lt-cf-rain.is-back img { opacity: 1; }   /* the far ones are only smaller, not faded (Geio) */
.lt-confirm.is-run .lt-cf-rain img { animation: cf-fall var(--d, 50s) linear var(--dl, 0s) infinite; }
@keyframes cf-fall { from { transform: translateY(0) rotate(var(--r0, 0deg)); } to { transform: translateY(2300px) rotate(var(--r1, 0deg)); } }
.lt-confirm[hidden] .lt-cf-rain img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lt-cf-rain { display: none; } }
.lt-cf-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 60px; width: 720px; box-sizing: border-box; }   /* no frosted panel: the dishes pass behind the content unblurred, nothing clips them */
.lt-cf-sum { width: 100%; margin: 24px 0 12px; padding: 30px 36px 28px; border-radius: 28px; background: var(--white); display: flex; flex-direction: column; gap: 16px; text-align: left; }
.lt-cf-sum .h { font-size: 16px; font-weight: 600; color: var(--ink-400); margin-bottom: 4px; }
.lt-cf-sum .r { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 20px; font-weight: 500; color: var(--ink); }
.lt-cf-sum .r .n { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-cf-sum .r .lt-star { width: 22px; height: 22px; }
.lt-cf-sum .r.is-more { color: var(--ink-400); font-size: 17px; }
.lt-cf-sum .r.is-save { color: var(--blue-header); font-weight: 600; }
.lt-cf-sum .r.is-total { font-size: 26px; font-weight: 700; color: var(--blue); margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--blue-14); }
.lt-cf-next { margin: 4px 0 16px; }
.lt-cf-logo { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: 220px; height: auto; z-index: 1; }   /* LIDO logo top centre of the confirmation (Geio) */

/* ─── Confirmation theme switch: a quiet icon left of the reset ring; navy = LIDO blue ground, white type, white card ─── */
.lt-cf-theme { position: absolute; right: 108px; top: 47px; z-index: 2; width: 34px; height: 34px; opacity: 0.35; }
.lt-confirm.is-navy { background: var(--blue-header); }
.lt-confirm.is-navy h2 { color: var(--white); }
.lt-confirm.is-navy .lt-cf-next { color: rgba(255,255,255,0.7); }
.lt-confirm.is-navy .lt-cf-close { background: var(--on-blue-10); color: var(--white); }
.lt-confirm.is-navy .lt-cf-ring .bg { stroke: rgba(255,255,255,0.2); }
.lt-confirm.is-navy .lt-cf-ring .fg { stroke: var(--white); }
.lt-confirm.is-navy .lt-cf-theme { color: var(--white); }

/* ─── Action-row cards (card=actions) are the bigger ones: two per row in every grid, the photo keeps the wide ratio, the name a step larger (Geio 2026-09-18) ─── */
.kiosk-shell[data-card="actions"] .lt-grid, .kiosk-shell[data-card="actions"] .lt-sgrid .lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kiosk-shell[data-card="actions"] .lt-media { height: auto; aspect-ratio: 640 / 465; }
.kiosk-shell[data-card="actions"] .lt-name { font-size: 23px; line-height: 28px; width: auto; }

/* ─── Drawer = K4 top + K3 bottom (Geio 2026-09-20): photo lines with steppers, then a "Soodustused" section of rows, a "Kokkuvõte" totals card, Maksa with the amount ─── */
.lt-os-sec { font-size: 16px; font-weight: 600; color: var(--ink-400); padding: 18px 6px 2px; }
.lt-os-sec[hidden] { display: none; }
.lt-os-sec.is-sum { padding-top: 6px; }
.lt-totals { padding: 18px 20px; border-radius: 20px; background: var(--canvas); }
.lt-sheet-foot { padding-top: 8px; }

/* ─── Club banner from Figma (node 106-368): navy, plated dishes behind, the star over the headline in the middle, a white QR card at the right ─── */
.lt-club-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.lt-club-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.lt-club-star { width: 66px; height: 66px; display: block; }
.lt-club-title { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--white); max-width: 340px; }
.lt-club-body { margin: 4px 0 0; max-width: 440px; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--white); }   /* the Figma body line under the headline (Geio 2026-09-20) */
.lt-club-login { position: absolute; right: 0; bottom: 0; width: 170px; padding: 16px 14px 18px; border-radius: 20px 0 0 0; background: var(--white); color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 10px; box-sizing: border-box; font-size: 16px; font-weight: 500; text-align: center; line-height: 1.25; }
.lt-club-login .lt-club-qr { width: 120px; height: 120px; border-radius: 0; background: transparent; }
.lt-club-login .lt-club-qr img { width: 120px; height: 120px; }
.kiosk-shell.is-blue .lt-club { background: var(--white); }

/* ─── Benefits accordion (KFC lab, Apollo Klubi clothes): one head row, a grid-rows fold, reward / gift card rows with spring toggles, the discount pill and its applied chip ─── */
.lt-acc-head { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 84px; padding: 12px 18px 12px 20px; border: 0; border-radius: 20px; background: var(--white); box-shadow: inset 0 0 0 1px var(--blue-14); color: var(--blue-header); text-align: left; box-sizing: border-box; transition: transform 120ms var(--ease), background-color var(--dur-quick) var(--ease); }
.lt-acc-head:active { background: var(--blue-08); }
.lt-acc-head .ic { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; }
.lt-acc-head .ic .lt-star { width: 32px; height: 32px; }
.lt-acc-head .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lt-acc-head .t { font-size: 20px; font-weight: 600; }
.lt-acc-head .s { font-size: 15px; font-weight: 500; color: var(--ink-400); }
.lt-acc-head .chev { width: 22px; height: 22px; flex: none; color: var(--ink-400); transform: rotate(90deg); transition: transform 300ms var(--ease); }   /* the chevron glyph points right: folded = down, open = up, sign-in link = right */
.lt-acc-head.is-open .chev { transform: rotate(-90deg); }
.lt-acc-head.is-link .chev { transform: none; }
.lt-acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease); }
.lt-acc.is-open { grid-template-rows: 1fr; }
.lt-acc-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0 4px; }
.lt-ben-label { font-size: 17px; font-weight: 500; color: var(--ink-400); padding: 14px 6px 4px; }
.lt-ben-row { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 4px 6px; }
.lt-ben-row .gi { width: 28px; height: 28px; flex: none; color: var(--blue-header); }
.lt-ben-row .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lt-ben-row .n { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; color: var(--ink); }
.lt-ben-row .n svg { width: 18px; height: 18px; color: var(--ink-400); }
.lt-ben-row .ex { font-size: 15px; font-weight: 500; color: var(--ink-400); }
.lt-ben-row .ex.is-urgent { color: var(--amber); }
.lt-ben-row .val { font-size: 20px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.lt-ben-row.is-locked { opacity: 0.45; }
.lt-ben-row.is-locked .lt-tog { pointer-events: none; }
.lt-ben-note { font-size: 15px; font-weight: 500; color: var(--ink-400); padding: 6px 6px 10px; }
.lt-tog { position: relative; width: 60px; height: 36px; flex: none; border: 0; border-radius: var(--r-pill); background: var(--blue-14); padding: 0; transition: background-color 150ms var(--ease); }
.lt-tog .dot { position: absolute; left: 3px; top: 3px; width: 30px; height: 30px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(0,30,70,0.18); transition: transform 250ms cubic-bezier(0.34, 1.36, 0.64, 1); }   /* the KFC spring */
.lt-tog.is-on { background: var(--blue-header); }
.lt-tog.is-on .dot { transform: translateX(24px); }
.lt-disc-add { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 72px; margin-top: 8px; border: 0; border-radius: var(--r-pill); background: var(--blue-08); color: var(--blue-header); font-size: 20px; font-weight: 600; transition: transform 120ms var(--ease), background-color var(--dur-quick) var(--ease); }
.lt-disc-add:active { transform: scale(0.98); background: var(--blue-14); }
.lt-disc-add svg { width: 22px; height: 22px; }
.lt-disc-applied { display: flex; align-items: center; gap: 14px; min-height: 76px; margin-top: 8px; padding: 0 14px 0 20px; border-radius: 20px; background: var(--white); box-shadow: inset 0 0 0 1px var(--blue-14); color: var(--blue-header); }
.lt-disc-applied > svg { width: 26px; height: 26px; flex: none; }
.lt-disc-applied .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lt-disc-applied b { font-size: 20px; font-weight: 700; }
.lt-disc-applied .s { font-size: 15px; font-weight: 500; color: var(--ink-400); }
.lt-disc-applied .val { font-size: 20px; font-weight: 600; }
.lt-disc-applied .x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--blue-08); color: var(--blue-header); display: flex; align-items: center; justify-content: center; flex: none; }
.lt-disc-applied .x svg { width: 20px; height: 20px; }

/* ─── Modals in the KFC lab shape: a head row with the X, the QR modal's hint rows and demo footnote, the scan-coupon reader area, the code field's error state ─── */
.lt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.lt-card-head h2 { margin: 0; font-size: 30px; }
.lt-card-x { width: 56px; height: 56px; flex: none; border: 0; border-radius: 50%; background: var(--blue-08); color: var(--blue-header); display: flex; align-items: center; justify-content: center; }
.lt-card-x svg { width: 26px; height: 26px; }
.lt-card.is-qr { padding-top: 36px; }
.lt-card.is-qr > .lt-card-x { position: absolute; top: 24px; right: 24px; }
.lt-card.is-qr .lt-club-logo { height: 72px; margin: 0 auto 16px; }
.lt-card.is-qr h2 { margin: 0 0 20px; font-size: 32px; }
.lt-card.is-qr .lt-club-qr.is-big { width: 300px; height: 300px; border-radius: 30px; background: var(--canvas); margin: 0 auto 22px; }
.lt-card.is-qr .lt-club-qr.is-big img { width: 250px; height: 250px; }
.lt-qr-opts { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.lt-qr-opt { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 14px 22px; border-radius: 18px; background: var(--canvas); color: var(--ink-600); font-size: 20px; font-weight: 500; line-height: 1.3; box-sizing: border-box; }
.lt-qr-opt svg { width: 28px; height: 28px; flex: none; color: var(--blue-header); }
.lt-demo { margin-top: 18px; font-size: 15px; font-weight: 500; color: var(--ink-400); text-align: center; }
.lt-card.is-scan { width: 760px; }
.lt-scan-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 320px; padding: 36px 40px; margin: 0 0 20px; border: 2px dashed var(--blue-14); border-radius: 26px; background: transparent; color: var(--ink); text-align: center; box-sizing: border-box; transition: background-color var(--dur-quick) var(--ease); }
.lt-scan-area .ic { width: 104px; height: 104px; border-radius: 26px; background: var(--blue-header); color: var(--white); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.lt-scan-area .ic svg { width: 46px; height: 46px; }
.lt-scan-area .t { font-size: 22px; font-weight: 500; color: var(--ink-600); line-height: 1.35; max-width: 520px; }
.lt-scan-area .d { font-size: 15px; font-weight: 500; color: var(--ink-400); }
.lt-scan-area.is-busy { background: var(--blue-08); }
.lt-scan-area.is-busy .ic { animation: scan-pulse 600ms var(--ease) infinite; }
@keyframes scan-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.92); opacity: 0.7; } }
.lt-btn.is-wide { width: 100%; flex: none; }   /* in a column flex parent (the scan sheet's foot) flex: 1 collapsed the 88 px button to its text height (fixed 2026-09-21) */
.lt-btn:disabled { opacity: 0.4; pointer-events: none; }
.lt-search-field.is-entry.is-error { box-shadow: inset 0 0 0 2px var(--amber); }
@media (prefers-reduced-motion: reduce) { .lt-acc, .lt-acc-head .chev, .lt-tog .dot { transition: none; } .lt-scan-area.is-busy .ic { animation: none; } }

/* ─── Confirmation: language segment top left (the next guest picks here, Alusta uuesti keeps it) ─── */
.lt-cf-lang { position: absolute; left: 50%; top: 195px; transform: translateX(-50%); z-index: 2; }   /* centred under the logo (logo 56 to 171, 24 px gap) (Geio 2026-09-20) */
.lt-confirm.is-navy .lt-cf-lang { background: var(--on-blue-10); }
.lt-confirm.is-navy .lt-cf-lang button { color: rgba(255,255,255,0.75); }
.lt-confirm.is-navy .lt-cf-lang button.is-on { background: var(--white); color: var(--blue-header); }

/* ─── Scan sheet: the reader tile with a breathing frame while the sheet is open; the search view's reader hint row ─── */
.lt-sheet.is-scan .lt-sheet-panel { max-height: none; }
.lt-scan-area.is-sheet { min-height: 380px; margin: 0; border-color: var(--blue-14); }
.lt-sheet.is-open .lt-scan-area.is-sheet:not(.is-busy):not(.is-error) { animation: scan-frame 1.8s ease-in-out infinite; }
@keyframes scan-frame { 0%, 100% { border-color: var(--blue-14); } 50% { border-color: var(--blue-header); } }
.lt-scan-area .d.is-err { color: var(--amber); font-size: 18px; }
.lt-scan-area .d.is-err:empty { display: none; }
.lt-scan-area.is-error { border-color: var(--amber); }
.lt-scan-hint { display: flex; align-items: center; justify-content: center; gap: 12px; flex: none; height: 56px; margin: 0 0 4px; border: 0; background: transparent; color: var(--ink-400); font-size: 18px; font-weight: 500; }
.lt-scan-hint svg { width: 24px; height: 24px; color: var(--blue-header); }
.lt-club-toast { z-index: 26; }   /* over the sheets: a scan hit's toast shows at once */
@media (prefers-reduced-motion: reduce) { .lt-sheet.is-open .lt-scan-area.is-sheet { animation: none; } }

/* ─── Checkout motion pass (Geio 2026-09-20, corporate personality: --ease in, --ease-in out, transform + opacity only) ───
   open: the panel lands (slow), the lines cascade 40 ms apart, extras and totals follow; close: quick and accelerating.
   pay: the amount ring settles from 0.94, the instruction, the sub line and the chevrons follow in a 60 ms cascade.
   confirmation: logo, title, summary card, next line and the button arrive one after another; the card scales from 0.96. */
.lt-sheet:not(.is-open) .lt-sheet-panel { transition-duration: var(--dur-quick); transition-timing-function: var(--ease-in); }
.lt-sheet.is-open .lt-oline { animation: row-in 260ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 60ms); }
.lt-sheet.is-open .lt-os-sec, .lt-sheet.is-open .lt-os-extras, .lt-sheet.is-open .lt-totals, .lt-sheet.is-open .lt-sheet-pay { animation: row-in 300ms var(--ease) both; }
.lt-sheet.is-open .lt-os-sec { animation-delay: 160ms; } .lt-sheet.is-open .lt-os-extras { animation-delay: 200ms; } .lt-sheet.is-open .lt-totals { animation-delay: 240ms; } .lt-sheet.is-open .lt-sheet-pay { animation-delay: 280ms; }
.lt-sheet.is-pay .lt-paystage { animation: fade-in var(--dur) var(--ease) both; }
.lt-sheet.is-pay .lt-ps-back { animation: row-in 300ms var(--ease) 120ms both; }
.lt-sheet.is-pay .lt-ps-ring { animation: ps-settle 480ms var(--ease) 40ms both; }
.lt-sheet.is-pay .lt-ps-instr { animation: row-in 320ms var(--ease) 160ms both; }
.lt-sheet.is-pay .lt-ps-sub { animation: row-in 320ms var(--ease) 220ms both; }
.lt-sheet.is-pay .lt-ps-chevs, .lt-sheet.is-pay .lt-ps-done { animation: row-in 320ms var(--ease) 280ms both; }
@keyframes ps-settle { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.lt-confirm.is-on .lt-cf-logo { animation: cf-logo-in var(--dur-slow) var(--ease) 80ms both; }
@keyframes cf-logo-in { from { opacity: 0; } to { opacity: 1; } }   /* opacity only: the logo keeps its translateX(-50%) centring (fade-in would override the transform) */
.lt-confirm.is-on .lt-cf-body > * { animation: row-in var(--dur-slow) var(--ease) both; }
.lt-confirm.is-on .lt-cf-body > :nth-child(1) { animation-delay: 120ms; }
.lt-confirm.is-on .lt-cf-body > .lt-cf-sum { animation-name: cf-card-in; animation-delay: 200ms; }
.lt-confirm.is-on .lt-cf-body > :nth-child(3) { animation-delay: 300ms; }
.lt-confirm.is-on .lt-cf-body > :nth-child(4) { animation-delay: 360ms; }
@keyframes cf-card-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lt-sheet.is-open .lt-oline, .lt-sheet.is-open .lt-os-sec, .lt-sheet.is-open .lt-os-extras, .lt-sheet.is-open .lt-totals, .lt-sheet.is-open .lt-sheet-pay,
  .lt-sheet.is-pay .lt-paystage, .lt-sheet.is-pay .lt-ps-back, .lt-sheet.is-pay .lt-ps-ring, .lt-sheet.is-pay .lt-ps-instr, .lt-sheet.is-pay .lt-ps-sub, .lt-sheet.is-pay .lt-ps-chevs, .lt-sheet.is-pay .lt-ps-done,
  .lt-confirm.is-on .lt-cf-logo, .lt-confirm.is-on .lt-cf-body > * { animation: none; }
}

/* ─── Welcome Y4d (Geio 2026-09-22, canvas 'LIDO welcome, round 2'): navy ground, the real LIDO badge, eight plates orbiting 'Tere tulemast' + a LIDO line, the Apollo Klubi tile two thirds + a quiet 'Alusta ilma sisse logimata' one third ─── */
.lt-w-top { position: absolute; left: 40px; right: 40px; top: 36px; height: 120px; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.lt-w-logo { width: 210px; height: auto; display: block; }
.lt-w-bar { display: flex; align-items: center; gap: 16px; }
.lt-w-langs { display: flex; gap: 4px; padding: 6px; border-radius: var(--r-pill); background: var(--on-blue-14); }
.lt-w-langs button { height: 60px; padding: 0 24px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--white); font: inherit; font-size: 24px; font-weight: 600; transition: background-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease), transform 120ms var(--ease); }
.lt-w-langs button.is-on { background: var(--white); color: var(--blue-header); font-weight: 700; }
.lt-w-langs button:active { transform: scale(0.96); }
.lt-w-a11y { width: 76px; height: 76px; border: 0; border-radius: 50%; background: var(--on-blue-14); color: var(--white); display: flex; align-items: center; justify-content: center; transition: transform 120ms var(--ease); }
.lt-w-a11y svg { width: 38px; height: 38px; }
.lt-w-a11y:active { transform: scale(0.94); }
/* the orbit: a zero-size ring at the circle's centre spins once in 90 s; each plate sits 380 px out on its own spoke (--a × 45°) and counter-spins so it stays upright */
.lt-welcome::before { content: ""; position: absolute; inset: 0; background: var(--blue-header); }   /* the navy ground is its own layer so the hand-off can dissolve it with opacity */
.lt-w-orbit { position: absolute; left: 540px; top: 694px; width: 0; height: 0; }
.lt-w-orbit .ring { position: absolute; left: 0; top: 0; animation: w-spin 90s linear infinite; }
.lt-w-orbit .ring > span { position: absolute; left: 0; top: 0; transform: rotate(calc(var(--a) * 45deg)) translateY(-380px) rotate(calc(var(--a) * -45deg)); }
.lt-w-orbit img { position: absolute; left: -84px; top: -84px; width: 168px; height: auto; display: block; animation: w-counter 90s linear infinite; }   /* images/welcome/*.webp = the plated cut-outs cropped to the plate, inner keyer holes (sour cream, feta, cream soup) filled back from the photo so navy never shows through */
.lt-welcome.is-off:not(.is-leaving) .lt-w-orbit .ring, .lt-welcome.is-off:not(.is-leaving) .lt-w-orbit img { animation-play-state: paused; }
@keyframes w-spin { to { transform: rotate(360deg); } }
@keyframes w-counter { to { transform: rotate(-360deg); } }
.lt-w-hello { position: absolute; left: 270px; top: 0; width: 540px; height: 1388px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; color: var(--white); pointer-events: none; }   /* centred on the orbit (y 694) without a transform, so the motion can scale it */
.lt-w-hello .t { margin: 0; font-family: var(--font-display); font-size: 104px; font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; text-wrap: balance; }
html[lang="ru"] .lt-w-hello .t { font-size: 82px; }
.lt-w-hello .s { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.3; color: var(--on-blue-72); }
.lt-w-tiles { position: absolute; left: 40px; right: 40px; bottom: 48px; height: 640px; display: flex; gap: 20px; }
.lt-w-scan, .lt-w-start { min-width: 0; border-radius: var(--r-welcome); font: inherit; text-align: left; display: flex; flex-direction: column; justify-content: space-between; transition: transform 120ms var(--ease), background-color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease); }
.lt-w-scan { flex: 2 1 0; padding: 44px; border: 0; background: var(--white); color: var(--blue-header); }
.lt-w-start { flex: 1 1 0; padding: 40px 36px; border: 2px solid var(--on-blue-32); background: transparent; color: var(--white); }
.lt-w-scan:active, .lt-w-start:active { transform: scale(0.985); }
.lt-w-scan .hd { display: flex; justify-content: space-between; align-items: flex-start; }
.lt-w-club { width: 170px; height: auto; display: block; flex: none; }
.lt-w-qr { width: 290px; height: 290px; border-radius: 29px; background: var(--canvas); display: flex; align-items: center; justify-content: center; flex: none; }
.lt-w-qr img { width: 232px; height: 232px; display: block; mix-blend-mode: multiply; }
.lt-w-scan .txt, .lt-w-start .txt { display: flex; flex-direction: column; gap: 14px; }
.lt-w-scan .t, .lt-w-start .t { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.lt-w-scan .t { font-size: 50px; line-height: 1.05; }
.lt-w-scan .s { display: flex; flex-direction: column; gap: 6px; font-size: 26px; font-weight: 500; line-height: 1.35; color: var(--ink-600); }
.lt-w-start .t { font-size: 40px; line-height: 1.08; }
.lt-w-start .s { font-size: 22px; font-weight: 500; color: var(--on-blue-72); }
.lt-w-start .arr { width: 104px; height: 104px; border-radius: 50%; background: var(--on-blue-14); color: var(--white); display: flex; align-items: center; justify-content: center; }
.lt-w-start .arr svg { width: 44px; height: 44px; }
.lt-w-qr, .lt-w-start .arr { transition: transform var(--dur-quick) var(--ease), background-color var(--dur-quick) var(--ease); }
.lt-w-start:active .arr { transform: translateX(6px); }   /* touch: the arrow leans the way the guest is going */
.lt-w-a11y { transition: transform 120ms var(--ease), background-color var(--dur-quick) var(--ease); }
@media (hover: hover) {
  .lt-w-langs button:not(.is-on):hover { background: var(--on-blue-14); }
  .lt-w-a11y:hover { background: var(--on-blue-24); }
  .lt-w-scan:hover .lt-w-qr { transform: scale(1.02); }
  .lt-w-start:hover { background: var(--on-blue-10); border-color: var(--on-blue-72); }
  .lt-w-start:hover .arr { transform: translateX(6px); background: var(--on-blue-24); }
}
/* entrance (load, and every return to the welcome): the orbit spirals in and settles, the greeting rises, the two tiles follow */
.lt-welcome.is-in .lt-w-top { animation: fade-in 420ms var(--ease) both; }
.lt-welcome.is-in .lt-w-orbit { animation: w-orbit-in 900ms var(--ease) both; }
.lt-welcome.is-in .lt-w-hello { animation: w-rise 600ms var(--ease) 120ms both; }
.lt-welcome.is-in .lt-w-scan { animation: tile-in 480ms var(--ease) 200ms both; }
.lt-welcome.is-in .lt-w-start { animation: tile-in 480ms var(--ease) 280ms both; }
@keyframes w-orbit-in { from { opacity: 0; transform: scale(0.86) rotate(-24deg); } to { opacity: 1; transform: none; } }
@keyframes w-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
/* language swap: the new words rise in */
.lt-welcome.is-swap :is(.lt-w-hello .t, .lt-w-scan .txt, .lt-w-start .txt) { animation: w-swap 280ms var(--ease) both; }
.lt-welcome.is-swap .lt-w-hello .s { animation: w-swap 280ms var(--ease) 40ms both; }
@keyframes w-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* hand-off to the menu (is-off + is-leaving, 900 ms): tiles and top row go first, the greeting grows and fades, the orbit spins up and flies toward the viewer, the navy dissolves from 300 ms */
.lt-welcome.is-off.is-leaving { opacity: 1; visibility: visible; transition: none; }
.lt-welcome.is-leaving .lt-w-top { animation: w-out 240ms var(--ease-in) both; }
.lt-welcome.is-leaving .lt-w-tiles { animation: w-drop 300ms var(--ease-in) both; }
.lt-welcome.is-leaving .lt-w-hello { animation: w-grow-out 420ms var(--ease-in) both; }
.lt-welcome.is-leaving .lt-w-orbit { animation: w-fly 900ms var(--ease-io) both; }
.lt-welcome.is-leaving::before { animation: w-out 560ms var(--ease-io) 300ms both; }
@keyframes w-out { to { opacity: 0; } }
@keyframes w-drop { to { opacity: 0; transform: translateY(40px); } }
@keyframes w-grow-out { to { opacity: 0; transform: scale(1.08); } }
@keyframes w-fly { 0% { opacity: 1; transform: none; } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.9) rotate(32deg); } }
/* the menu tiles replay their entrance under the dissolving navy (capped stagger) */
#main.is-arrive :is(.lt-tile, .lt-club, .lt-club-line, .lt-sub-big, .lt-sec-h) { animation: tile-arrive 460ms var(--ease) backwards; animation-delay: calc(min(var(--i, 0), 9) * 28ms); }
@keyframes tile-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }   /* same move as tile-in, own name so it replays; no scale, layout reads stay true */
/* page swaps: the title rises in with its new text, section headings and sub discs enter with their tiles (backwards fill: press transforms keep working after) */
.lt-top h1.is-swap { animation: w-swap 300ms var(--ease) backwards; }
.lt-sec-h { animation: tile-in 420ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
.lt-sub-big { animation: tile-in 420ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@media (prefers-reduced-motion: reduce) { .lt-w-orbit .ring, .lt-w-orbit img, .lt-welcome.is-in *, .lt-welcome.is-swap *, #main.is-arrive *, .lt-top h1.is-swap, .lt-sec-h, .lt-sub-big { animation: none !important; } }

/* ─── Payment, calm Q1 (lab 2026-09-23, canvas 'LIDO payment motion' Q1; Geio: "a bit aggressive … should morph into the order summary"): the guest's own plates orbit a real progress ring, three soft waves rise from the terminal; on the card read the plates gather in, the beige blooms up from the terminal and the confirmation takes over on the same ground ─── */
.lt-ps-center.is-orbit { gap: 0; }
.lt-ps-ring.is-prog { margin: 200px 0 250px; }
.lt-ps-ring.is-prog:has(.lt-ps-orbit.is-n1) { margin: 190px 0 120px; }   /* one plate sits on top: room above only */
.lt-ps-ring.is-prog:has(.lt-ps-orbit.is-n2) { margin: 40px 0 120px; }   /* two plates sit on the sides */
.lt-ps-ring.is-prog:not(:has(.lt-ps-orbit)) { margin: 0 0 100px; }   /* nothing with a photo: the ring alone */
.lt-ps-ring .prog { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; transition: opacity 360ms var(--ease-in) 300ms; }
.lt-ps-ring .prog circle { fill: none; stroke-width: 1.4; }
.lt-ps-ring .prog .tr { stroke: var(--on-blue-14); }
.lt-ps-ring .prog .ar { stroke: var(--white); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.lt-paystage.is-reading .lt-ps-ring .prog .ar { stroke-dashoffset: 12; transition: stroke-dashoffset 3s cubic-bezier(0.2, 0.6, 0.3, 1); }
.lt-paystage.is-done .lt-ps-ring .prog .ar { stroke-dashoffset: 0; transition: stroke-dashoffset 320ms var(--ease); }
.lt-ps-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: transform 720ms var(--ease-io), opacity 460ms var(--ease-in) 260ms; }
.lt-ps-orbit .spin { position: absolute; left: 0; top: 0; animation: ps-orbit 40s linear infinite; }
.lt-ps-orbit .pl { position: absolute; left: -76px; top: -76px; width: 152px; height: 152px; display: flex; align-items: center; justify-content: center; transform: rotate(calc(var(--k) / var(--n) * 360deg)) translateY(-384px) rotate(calc(var(--k) / var(--n) * -360deg)); animation: ps-pl-in 600ms var(--ease) calc(160ms + var(--k) * 70ms) backwards; }
.lt-ps-orbit .pl img { max-width: 152px; max-height: 152px; display: block; animation: ps-orbit 40s linear infinite reverse; }
.lt-ps-orbit .pl.is-photo img { width: 124px; height: 124px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px var(--white); }   /* drinks are product photos, not plated cut-outs: a round crop with a white rim */
/* one or two plates do not orbit (a lone plate circling looked lost, Geio 2026-09-23): they sit on the ring, larger, floating gently; the gather into the centre is the same */
.lt-ps-orbit.is-few .spin { animation: none; }
.lt-ps-orbit.is-few .pl { left: -100px; top: -100px; width: 200px; height: 200px; }
.lt-ps-orbit.is-few .pl img { max-width: 200px; max-height: 200px; animation: ps-float 3.4s ease-in-out infinite; }
.lt-ps-orbit.is-few .pl.is-photo img { width: 164px; height: 164px; }
.lt-ps-orbit.is-n1 .pl { transform: translateY(-316px); }
.lt-ps-orbit.is-n2 .pl:nth-child(1) { transform: translateX(-316px); }
.lt-ps-orbit.is-n2 .pl:nth-child(2) { transform: translateX(316px); }
.lt-ps-orbit.is-n2 .pl:nth-child(2) img { animation-delay: -1.7s; }
@keyframes ps-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ps-orbit { to { transform: rotate(360deg); } }
@keyframes ps-pl-in { from { opacity: 0; } }
.lt-ps-ring .amt { transition: opacity 240ms var(--ease-in), transform 240ms var(--ease-in); }
.lt-ps-copy { display: flex; flex-direction: column; align-items: center; gap: 22px; transition: opacity 260ms var(--ease-in), transform 260ms var(--ease-in); }
.lt-ps-waves { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; pointer-events: none; transition: opacity 300ms var(--ease-in); }
.lt-ps-waves span { position: absolute; left: -560px; top: -560px; width: 1120px; height: 1120px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--on-blue-24); opacity: 0; animation: ps-wave 4.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.lt-ps-waves span:nth-child(2) { animation-delay: 1.4s; }
.lt-ps-waves span:nth-child(3) { animation-delay: 2.8s; }
@keyframes ps-wave { from { transform: scale(0.1); opacity: 0.9; } to { transform: scale(1); opacity: 0; } }
.lt-ps-nfc { position: absolute; left: 50%; bottom: 56px; width: 60px; height: 60px; margin-left: -30px; color: var(--white); opacity: 0.7; transform: rotate(-90deg); transition: opacity 300ms var(--ease-in); }
.lt-ps-bloom { position: absolute; left: 50%; bottom: 0; z-index: 5; width: 4400px; height: 4400px; margin: 0 0 -2200px -2200px; border-radius: 50%; background: var(--paper); transform: scale(0); pointer-events: none; }
.lt-ps-bloom.is-navy { background: var(--blue-header); }
.lt-paystage.is-done { pointer-events: none; }
.lt-paystage.is-done .lt-ps-orbit { transform: scale(0.12); opacity: 0; }
.lt-paystage.is-done .lt-ps-ring .amt { opacity: 0; transform: scale(0.94); }
.lt-paystage.is-done .lt-ps-ring .prog { opacity: 0; }
.lt-paystage.is-done .lt-ps-copy { opacity: 0; transform: translateY(12px); }
.lt-paystage.is-done :is(.lt-ps-waves, .lt-ps-nfc) { opacity: 0; }
.lt-paystage.is-done .lt-ps-bloom { transform: scale(1); transition: transform 780ms cubic-bezier(0.3, 0, 0.15, 1) 380ms; }
.lt-confirm.is-instant.is-on { transition: none; }   /* after the bloom the confirmation's ground is already on screen: only its content animates in */
@media (prefers-reduced-motion: reduce) { .lt-ps-orbit .spin, .lt-ps-orbit .pl img, .lt-ps-waves span, .lt-ps-orbit .pl, .lt-ps-orbit.is-few .pl img { animation: none; } }

/* confirmation entrance (lab 2026-09-23, Geio: "the transition … is a bit rough, items appear instantly"): what used to pop now eases in on the beige: the falling dishes fade in as one layer, the language segment, corner toggle and countdown ring appear in turn; after the bloom hand-off (is-instant) the text blocks rise a little slower and further apart */
@keyframes cf-appear { from { opacity: 0; } }   /* opacity only, to the element's own opacity: keeps the translateX centring and the 0.35 toggle */
.lt-confirm.is-on .lt-cf-rain { animation: cf-appear 900ms var(--ease) 240ms both; }
.lt-confirm.is-on .lt-cf-lang { animation: cf-appear 420ms var(--ease) 200ms both; }
.lt-confirm.is-on .lt-cf-theme { animation: cf-appear 420ms var(--ease) 260ms backwards; }
.lt-confirm.is-on .lt-cf-ring { animation: cf-appear 420ms var(--ease) 520ms both; }
.lt-confirm.is-instant.is-on .lt-cf-logo { animation-duration: 520ms; animation-delay: 60ms; }
.lt-confirm.is-instant.is-on .lt-cf-body > * { animation-duration: 560ms; }
.lt-confirm.is-instant.is-on .lt-cf-body > :nth-child(1) { animation-delay: 140ms; }
.lt-confirm.is-instant.is-on .lt-cf-body > .lt-cf-sum { animation-delay: 260ms; }
.lt-confirm.is-instant.is-on .lt-cf-body > :nth-child(3) { animation-delay: 380ms; }
.lt-confirm.is-instant.is-on .lt-cf-body > :nth-child(4) { animation-delay: 460ms; }
@media (prefers-reduced-motion: reduce) { .lt-confirm.is-on :is(.lt-cf-rain, .lt-cf-lang, .lt-cf-theme, .lt-cf-ring) { animation: none; } }

/* age gate (Sten 2026-09-23): an 18+ item without the staff ID check keeps Maksa off; this row says why and that the guest continues as soon as staff confirm */
.lt-age { display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 16px; border-radius: 20px; background: var(--blue-08); color: var(--blue-header); animation: row-in 320ms var(--ease) both; transition: background-color var(--dur) var(--ease); }
.lt-age[hidden] { display: none; }
.lt-age .ic { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; }
.lt-age .ic svg { width: 26px; height: 26px; }
.lt-age .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lt-age .t { font-size: 19px; font-weight: 600; }
.lt-age .s { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink-600); }
.lt-age-demo { flex: none; height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--white); color: var(--ink-600); font: inherit; font-size: 14px; font-weight: 600; }
.lt-age-demo[hidden] { display: none; }
.lt-age.is-ok { background: var(--tile-on); }
.lt-sheet-pay:disabled { background: var(--canvas-deep); color: var(--ink-400); }   /* visibly off even while its entrance animation holds opacity at 1 (age gate, empty tray) */

.lt-qcount[hidden] { display: none; }   /* search: the count row only takes space while there is a count */

/* status light stand-in (?light=1): the colour the Sunmi strip above the screen shows, drawn as a bar on the top edge */
.kiosk-shell.show-light::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; z-index: 60; background: transparent; transition: background-color var(--dur) var(--ease); pointer-events: none; }
.kiosk-shell.show-light[data-light="red"]::before { background: #E5322D; }
.kiosk-shell.show-light[data-light="blue"]::before { background: #2D6BE5; }
.kiosk-shell.show-light[data-light="white"]::before { background: #FFFFFF; box-shadow: 0 0 0 1px var(--blue-14); }

/* ─── Team feedback round (lab 2026-09-24) ─── */
/* subcategories as plain pills: like the oval CTA, no image, bigger text (the discs felt busy); white by default, the active one the lighter selected blue --tile-on (Geio 2026-09-24); discs and chips stay on the corner switch */
.kiosk-shell[data-subtop="pills"].has-subs:not([data-nav="icons"]):not([data-nav="mega"]) .lt-subs { margin-bottom: calc(-1 * var(--subs-h, 106px)); opacity: 0; pointer-events: none; transition: opacity var(--dur-quick) var(--ease); }
.kiosk-shell[data-subtop="pills"].has-subs:not([data-nav="icons"]):not([data-nav="mega"]).subs-stuck .lt-subs { opacity: 1; pointer-events: auto; }
.kiosk-shell[data-subtop="pills"].has-subs:not([data-nav="icons"]):not([data-nav="mega"]):not(.subs-stuck) :is(.lt-subs-rfade, .lt-subs-shade) { opacity: 0; }
.kiosk-shell[data-subtop="pills"].has-subs:not([data-nav="icons"]):not([data-nav="mega"]) #club-banner { display: none; }
.kiosk-shell[data-subtop="pills"] .lt-subs-hero { gap: 14px; padding: 8px 0 28px; }
.kiosk-shell[data-subtop="pills"] .lt-sub-big { width: auto; height: 76px; padding: 0 34px; flex-direction: row; gap: 0; border-radius: var(--r-pill); background: var(--white); color: var(--blue-header); font-size: 24px; font-weight: 600; transition: background-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease), transform 120ms var(--ease); }   /* white until the guest taps or scrolls, then only the active one turns the lighter blue (Geio 2026-09-24) */
.kiosk-shell[data-subtop="pills"] .lt-sub-big .disc { display: none; }
.kiosk-shell[data-subtop="pills"] .lt-sub-big .l { max-width: none; white-space: nowrap; }
.kiosk-shell[data-subtop="pills"].subs-touched .lt-sub-big.is-on { background: var(--tile-on); color: var(--blue-header); font-weight: 600; }   /* active = the lighter selected blue, navy text (Geio 2026-09-24) */
.kiosk-shell[data-subtop="pills"]:not([data-nav="icons"]):not([data-nav="mega"]) .lt-sub { padding: 0 30px; background: var(--white); }
.kiosk-shell[data-subtop="pills"]:not([data-nav="icons"]):not([data-nav="mega"]) .lt-sub img { display: none; }
.kiosk-shell[data-subtop="pills"]:not([data-nav="icons"]):not([data-nav="mega"]) .lt-sub.is-on { background: var(--tile-on); color: var(--blue-header); }   /* the sticky bar matches the pills */
/* the members' Monday–Thursday deal: a navy tag on the photo, in Pakkumised and in its own category */
.lt-offer { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px; border-radius: var(--r-pill); background: var(--blue-header); color: var(--white); font-size: 15px; font-weight: 700; white-space: nowrap; }
.lt-offer .lt-star { width: 20px; height: 20px; flex: none; }
/* the lunch offer outside 11–15: stays in the menu, greyed, no price or stepper, says when to come */
.lt-tile.is-off .lt-media img { opacity: 0.45; filter: grayscale(0.6); }
.lt-tile.is-off .lt-name { color: var(--ink-400); }
.lt-tile.is-off :is(.lt-price, .lt-step, .lt-unit, .lt-actions, .lt-minus) { display: none; }
.lt-off-note { display: flex; flex-direction: column; gap: 2px; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--ink-600); }
.lt-off-note b { font-size: 18px; font-weight: 700; color: var(--blue-header); }
/* confirmation: the order number under the title, the receipt printed only on request */
.lt-cf-order { margin: 0; font-size: 26px; font-weight: 600; color: var(--blue-header); font-variant-numeric: tabular-nums; }
.lt-confirm.is-navy .lt-cf-order { color: var(--white); }
.lt-cf-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.lt-cf-print { display: flex; align-items: center; gap: 12px; height: 88px; padding: 0 36px 0 30px; border: 2px solid var(--blue-14); border-radius: var(--r-pill); background: transparent; color: var(--blue-header); font-size: 24px; transition: transform 120ms var(--ease), opacity var(--dur) var(--ease); }
.lt-cf-print svg { width: 30px; height: 30px; flex: none; }
.lt-cf-print:active { transform: scale(0.97); }
.lt-cf-print { background: var(--paper); }   /* Raido 2026-09-25: opaque, so a falling dish never shows through the button */
.lt-cf-print:disabled { color: var(--ink-400); }
.lt-cf-print.is-done { border-color: transparent; background: linear-gradient(var(--blue-08), var(--blue-08)), var(--paper); }
.lt-confirm.is-navy .lt-cf-print { border-color: var(--on-blue-32); background: var(--blue-header); color: var(--white); }
.lt-confirm.is-navy .lt-cf-print:disabled { color: var(--on-blue-72); }
.lt-confirm.is-navy .lt-cf-print.is-done { background: linear-gradient(var(--on-blue-14), var(--on-blue-14)), var(--blue-header); }
.lt-confirm.is-navy .lt-cf-close { background: linear-gradient(var(--on-blue-10), var(--on-blue-10)), var(--blue-header); }
.lt-confirm.is-on .lt-cf-body > .lt-cf-order { animation-delay: 170ms; }
.lt-confirm.is-on .lt-cf-body > .lt-cf-sum { animation-name: cf-card-in; animation-delay: 220ms; }
.lt-confirm.is-on .lt-cf-body > .lt-cf-next { animation-delay: 320ms; }
.lt-confirm.is-on .lt-cf-body > .lt-cf-acts { animation-delay: 380ms; }
.lt-confirm.is-instant.is-on .lt-cf-body > .lt-cf-order { animation-delay: 200ms; }
.lt-confirm.is-instant.is-on .lt-cf-body > .lt-cf-sum { animation-delay: 260ms; }
.lt-confirm.is-instant.is-on .lt-cf-body > .lt-cf-next { animation-delay: 380ms; }
.lt-confirm.is-instant.is-on .lt-cf-body > .lt-cf-acts { animation-delay: 460ms; }

/* ─── Client feedback round (lab 2026-09-25) ─── */
/* order sheet header: a quiet Alusta uuesti next to the close button */
.lt-sheet-acts { display: flex; align-items: center; gap: 12px; }
.lt-sheet-restart { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 20px 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-600); font: inherit; font-size: 18px; font-weight: 600; transition: background-color var(--dur-quick) var(--ease), transform 120ms var(--ease); }
.lt-sheet-restart svg { width: 22px; height: 22px; }
.lt-sheet-restart:active { background: var(--blue-08); transform: scale(0.97); }
/* idle: a countdown ring with the seconds in it */
.lt-idle-ring { position: relative; width: 112px; height: 112px; margin: 0 auto 18px; }
.lt-idle-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lt-idle-ring circle { fill: none; stroke-width: 3.5; }
.lt-idle-ring .bg { stroke: var(--blue-14); }
.lt-idle-ring .fg { stroke: var(--blue); stroke-linecap: round; transition: stroke-dashoffset 250ms linear; }
.lt-idle-ring .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--blue); }
/* order sheet groups: the rail group name with its item count over its lines */
.lt-ogroup { display: flex; align-items: center; gap: 10px; padding: 14px 6px 0; font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--blue); animation: row-in 220ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.lt-ogroup:first-child { padding-top: 2px; }
.lt-ogroup .n { min-width: 30px; height: 30px; padding: 0 10px; box-sizing: border-box; border-radius: var(--r-pill); background: var(--blue-header); color: var(--white); font-family: var(--font-sans); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
/* the pill can carry an action (Võta tagasi): only then it takes taps */
.lt-club-toast.has-act { gap: 16px; padding: 0 8px 0 24px; }
.lt-club-toast.has-act.is-on { pointer-events: auto; }
.lt-toast-act { height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: var(--on-blue-14); color: var(--white); font: inherit; font-size: 18px; font-weight: 700; }
.lt-toast-act:active { background: var(--on-blue-24); }
.kiosk-shell:has(#order-sheet.is-open) .lt-club-toast { bottom: 420px; }   /* over the open sheet the pill sits above the totals, never on them */
@media (prefers-reduced-motion: reduce) { .lt-ogroup { animation: none; } }
/* order sheet edits (Raido 2026-09-25): a stepper or delete re-render keeps the lines still; only a line that is new (undo) enters. The rest move by FLIP in renderOrder, the count and price roll */
#os-lines.is-settled :is(.lt-oline, .lt-ogroup):not(.is-new) { animation: none; }
.lt-oline .pr.is-roll, .lt-ogroup .n.is-roll { animation: num-roll var(--dur-quick) var(--ease); }
.lt-step-n.is-roll-down, .lt-oline .pr.is-roll-down, .lt-ogroup .n.is-roll-down { animation: num-roll-down var(--dur-quick) var(--ease); }
@keyframes num-roll-down { 0% { transform: translateY(-6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.lt-sheet-panel::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 400px; background: inherit; pointer-events: none; }   /* covers the screen edge while the panel FLIPs to a shorter height */

/* ─── Bottom bar W3.3 (Geio 2026-09-25, canvas 'LIDO bottom bar · scanner notch'): the rail stays full height, the canvas panel runs to the bottom frame, the tray is a white card as wide as the tile grid, and a navy "Skanni siin" tab stands on the bottom edge at the screen centre, right above the reader. The tab is the side tab's own outline turned onto the bottom edge ─── */
.lt-frame { bottom: 10px; }
.lt-main, .lt-sview { bottom: 178px; }
.lt-cart-tab { bottom: 178px; }
.lt-scrolltab { bottom: 190px; }   /* 28 px above the card, as before */
.lt-club-toast { bottom: 178px; }
.lt-rail > .lt-rail-item:last-child.is-on::before { bottom: -16px; border-bottom-left-radius: 0; }   /* the last group's tab runs down to the floor, the panel continues beside it */
.lt-rail > .lt-rail-item:last-child.is-on .nk-b { display: none; }
.kiosk-shell:has(.lt-rail > .lt-rail-item:last-child.is-on) .lt-frame::after { display: none; }
.lt-traybar, .lt-traybar.has-items { left: 244px; right: 46px; bottom: 40px; height: 122px; padding: 0 19px 0 28px; border-radius: 20px; background: var(--white); }
.kiosk-shell[data-nav="icons"] .lt-traybar { left: 230px; }
.lt-traybar::before { display: none; }
.lt-traybar .lt-tray-text { display: none; }
.lt-order, .lt-traybar.has-items .lt-order { height: 84px; gap: 18px; padding: 0 34px 0 30px; background: var(--blue-header); color: var(--white); }
.lt-order[disabled] { opacity: 0.55; background: var(--canvas); color: var(--ink-400); }
.lt-order-disc { width: 32px; height: 32px; border-radius: 0; background: transparent; color: inherit; }
.lt-order-disc svg { width: 32px; height: 32px; }
.lt-order-n { display: none; }
.lt-order .lt-total { font-size: 32px; color: inherit; }
.lt-order-l { font-size: 17px; margin-top: 5px; color: var(--on-blue-72); }
.lt-order[disabled] .lt-order-l { color: var(--ink-400); }
.kiosk-shell.is-blue .lt-order { background: var(--white); color: var(--blue-header); }
.lt-stack.is-lines { width: 380px; height: auto; display: flex; flex-direction: column; gap: 4px; align-self: center; cursor: pointer; }
.lt-tl { display: flex; align-items: baseline; gap: 12px; }
.lt-tl .q { width: 30px; flex: none; font-size: 17px; font-weight: 600; color: var(--ink-400); }
.lt-tl .n { flex: 1; min-width: 0; font-size: 20px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-tl .p { font-size: 20px; font-weight: 600; color: var(--blue); }
.lt-tl.is-new { animation: row-in 220ms var(--ease) both; }
.lt-tl-more { padding-left: 42px; font-size: 16px; font-weight: 500; color: var(--ink-400); }
.lt-stack.is-lines .lt-chip-empty .t > span:first-child { font-size: 22px; font-weight: 600; max-width: 380px; }
.lt-stack.is-lines .lt-chip-empty .t2 { font-size: 17px; }
.lt-scantab { position: absolute; left: 344px; bottom: 0; z-index: 11; width: 392px; height: 64px; padding: 0; border: 0; background: transparent; color: var(--white); }
.lt-scantab svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--blue-header); }
.lt-scantab .c { position: absolute; left: 0; right: 0; top: 6px; height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; }
.lt-scantab .c svg { width: 26px; height: 26px; }
.kiosk-shell.is-blue .lt-order .lt-total { color: inherit; }

/* ─── Touch and detail round (feedback 2026-09-25) ─── */
#q-val, #q-val2 { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; display: flex; justify-content: flex-end; }   /* a long entry keeps its newest characters in view */
.lt-kbd button.is-alt { font-size: 20px; color: var(--blue-header); }
.lt-tile.is-in .lt-foot .lt-step { max-width: 56px; }
.lt-tile.is-in .lt-foot .lt-step .lt-step-btn { position: relative; width: 52px; height: 52px; }   /* the tile's − and + were 40 px: now 52 px drawn, 72 px to the finger */
.lt-tile.is-in .lt-foot .lt-step .lt-step-btn svg { width: 26px; height: 26px; }
.lt-tile.is-in .lt-foot .lt-step .lt-step-btn::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.lt-info-btn::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }   /* 44 px drawn, 68 px to the finger (it sits 12 px in from the photo's clipped edge) */
.lt-info-btn:active, .lt-tile.is-in .lt-foot .lt-step .lt-step-btn:active { transform: scale(0.88); }
.lt-info-step { display: flex; align-items: center; gap: 4px; height: 88px; padding: 0 12px; border-radius: var(--r-pill); background: var(--canvas); flex: none; }
.lt-info-step .lt-step-btn { width: 64px; height: 64px; }
.lt-info-step .lt-step-btn svg { width: 28px; height: 28px; }
.lt-info-step .lt-step-btn.is-plus { background: var(--blue-header); color: var(--white); }
.lt-info-step .lt-step-btn:disabled { opacity: 0.4; }
.lt-info-step .lt-step-n { width: 44px; font-size: 28px; }
#m-info #info-add { flex-grow: 1.6; white-space: nowrap; }
.lt-info-qty { display: flex; align-items: center; justify-content: space-between; margin: -8px 0 22px; }
.lt-info-qty #info-sum { font-size: 24px; font-weight: 600; color: var(--blue); }
.lt-info-step { height: 76px; padding: 0 6px; }
.lt-info-step .lt-step-btn { width: 64px; height: 64px; }

/* toasts (Geio 2026-09-25): light blue like the added tile, navy text, always on the screen's centre line (x 540, over the Skanni siin tab), above the menu, the tray card and the order sheet, under dialogs and the confirmation; a dialog hides it */
.lt-club-toast { left: 540px; z-index: 26; background: var(--tile-on); color: var(--blue-header); }
.kiosk-shell.is-blue .lt-club-toast { background: var(--tile-on); color: var(--blue-header); }
.lt-toast-act { background: var(--white); color: var(--blue-header); }
.lt-toast-act:active { background: var(--blue-08); }

/* ─── Card stage C7 (2026-09-30, canvas 'LIDO payment · terminal lower right'): the terminal moved to the kiosk's lower right. The ring with the orbiting plates stays (moved up); a drawn terminal peeks in from the corner, three pulses spread from it, a card taps it every 2.8 s; the card read blooms the confirmation from the terminal ─── */
.lt-ps-center.is-orbit { justify-content: flex-start; padding-top: 60px; }
.lt-ps-term { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transition: opacity 300ms var(--ease-in); }
.lt-ps-term .lt-ps-waves { left: 1010px; top: 1770px; bottom: auto; }
.lt-ps-term .lt-ps-waves span { left: -700px; top: -700px; width: 1400px; height: 1400px; border: 3px solid var(--tile-on); }
.lt-ps-term .dev { position: absolute; left: 880px; top: 1560px; width: 260px; height: 420px; box-sizing: border-box; border-radius: 36px; border: 4px solid var(--white); background: linear-gradient(var(--on-blue-10), var(--on-blue-10)), var(--blue-header); }
.lt-ps-term .scr { position: absolute; left: 22px; top: 26px; width: 208px; height: 170px; border-radius: 14px; background: var(--on-blue-14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 28px; font-weight: 700; }
.lt-ps-term .scr svg { width: 40px; height: 40px; }
.lt-ps-term .halo { position: absolute; left: 856px; top: 1536px; width: 308px; height: 468px; box-sizing: border-box; border-radius: 48px; border: 4px solid var(--tile-on); opacity: 0; animation: ps-flash 2.8s ease-out infinite; }
.lt-ps-term .arcs { position: absolute; left: 760px; top: 1440px; width: 110px; height: 110px; color: var(--tile-on); opacity: 0; animation: ps-flash 2.8s ease-out infinite; }
.lt-ps-term .arcs svg { width: 100%; height: 100%; display: block; }
.lt-ps-term .card { position: absolute; left: 520px; top: 1420px; width: 320px; height: 200px; box-sizing: border-box; border-radius: 22px; border: 3px solid var(--white); background: linear-gradient(var(--on-blue-10), var(--on-blue-10)), var(--blue-header); transform: rotate(-14deg); animation: ps-tap 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.lt-ps-term .card .chip { position: absolute; left: 28px; top: 62px; width: 46px; height: 34px; border-radius: 8px; background: var(--on-blue-32); }
.lt-ps-term .card svg { position: absolute; right: 24px; top: 22px; width: 36px; height: 36px; }
.lt-ps-term .card .bar { position: absolute; left: 28px; bottom: 30px; width: 150px; height: 10px; border-radius: 5px; background: var(--on-blue-24); }
@keyframes ps-tap { 0%, 100% { transform: translate(0, 0) rotate(-14deg); } 38%, 58% { transform: translate(250px, 190px) rotate(-6deg); } }
@keyframes ps-flash { 0%, 34% { opacity: 0; transform: scale(0.9); } 44% { opacity: 1; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.08); } }
.lt-paystage.is-done .lt-ps-term { opacity: 0; }
.lt-ps-bloom { left: 1010px; bottom: 150px; }   /* the confirmation's ground grows from the terminal */
@media (prefers-reduced-motion: reduce) { .lt-ps-term .card, .lt-ps-term .halo, .lt-ps-term .arcs { animation: none; } }

/* ─── Accessibility (2026-10-03): EN 301 549 / WCAG 2.1 AA for self-service terminals. Panel low on the screen (within reach), five switches, all reset for the next guest ─── */
:root { --reach-shade: #000000; }
.kiosk-shade { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform: scale(var(--kiosk-scale, 1)); transform-origin: top left; background: var(--reach-shade); opacity: 0; pointer-events: none; transition: opacity 440ms var(--ease-io); }
.kiosk-stage.is-reach .kiosk-shade { opacity: 1; }
.kiosk-shell { clip-path: inset(0 0 0 0 round 0px); transition: clip-path 440ms var(--ease-io); }
.kiosk-shell.is-wiping { clip-path: inset(50% 0 0 0 round 40px 40px 0 0); }
.kiosk-shell.is-instant { transition: none; }
/* Ekraan alla: the kiosk is laid out in 1080×960 at the bottom; everything anchored top/bottom follows */
.kiosk-shell.is-reach { height: 960px; margin-top: calc(960px * var(--kiosk-scale, 1)); border-radius: 40px 40px 0 0; }
.kiosk-shell.is-settle :is(.lt-top, .lt-main, .lt-sview, .lt-rail, .lt-traybar, .lt-welcome) { animation: reach-in 380ms var(--ease) both; }
@keyframes reach-in { from { opacity: 0.4; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.kiosk-shell.is-reach .lt-rail { overflow-y: auto; scrollbar-width: none; }
.kiosk-shell.is-reach .lt-rail::-webkit-scrollbar { display: none; }
.kiosk-shell.is-reach .lt-rail-item { flex: 0 0 auto; min-height: 124px; }
.kiosk-shell.is-reach[data-nav="icons"] .lt-subs { top: 50%; }
.kiosk-shell.is-reach .lt-w-orbit { display: none; }
.kiosk-shell.is-reach .lt-w-hello { left: 40px; width: 1000px; top: 138px; height: 130px; gap: 8px; }
.kiosk-shell.is-reach .lt-w-hello .t { font-size: 60px; }
.kiosk-shell.is-reach .lt-w-hello .s { font-size: 22px; }
.kiosk-shell.is-reach .lt-w-tiles { height: 548px; }
/* the card stage in the lower half: ring with its plates top left at half size, the instruction full size under it, the terminal and its pulses on the right */
.kiosk-shell.is-reach .lt-ps-center.is-orbit { position: absolute; left: 0; top: 0; width: 1080px; height: 960px; padding: 0; display: block; }
.kiosk-shell.is-reach .lt-ps-ring.is-prog { position: absolute; left: 140px; top: 160px; margin: 0; scale: 0.5; transform-origin: 0 0; }   /* scale, not transform: the ring keeps its own entrance animation */
.kiosk-shell.is-reach .lt-ps-copy { position: absolute; left: 60px; top: 560px; width: 440px; align-items: flex-start; gap: 10px; text-align: left; }
.kiosk-shell.is-reach .lt-ps-instr { font-size: 46px; }
.kiosk-shell.is-reach .lt-ps-term > * { translate: 0 -900px; }
.kiosk-shell.is-reach .lt-cf-body { transform: scale(0.72); }
.kiosk-shell.is-reach .lt-info-media { aspect-ratio: auto; height: 300px; }
.kiosk-shell.is-reach .lt-info-media img { object-fit: contain; }
/* the switches */
.lt-modal.is-low { align-items: flex-end; padding-bottom: 40px; box-sizing: border-box; }
#m-a11y { z-index: 45; }   /* over the welcome too */
.lt-card.is-a11y { width: 880px; }
.lt-a11y-list { display: flex; flex-direction: column; gap: 10px; }
.lt-a11y-row { display: flex; align-items: center; gap: 20px; width: 100%; min-height: 92px; padding: 14px 24px; box-sizing: border-box; border: 0; border-radius: 20px; background: var(--canvas); color: var(--ink); font: inherit; text-align: left; transition: background-color var(--dur-quick) var(--ease); }
.lt-a11y-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lt-a11y-row .n { font-size: 24px; font-weight: 600; }
.lt-a11y-row .s { font-size: 18px; font-weight: 500; color: var(--ink-400); }
.lt-a11y-row .lt-tog { display: block; }
.lt-a11y-row.is-on { background: var(--tile-on); }
.lt-a11y-btn { width: 64px; height: 64px; flex: none; border: 0; border-radius: 50%; padding: 0; background: var(--canvas); color: var(--blue-header); display: flex; align-items: center; justify-content: center; transition: background-color var(--dur-quick) var(--ease), transform 120ms var(--ease); }
.lt-a11y-btn svg { width: 32px; height: 32px; }
.lt-a11y-btn:active { transform: scale(0.92); }
.lt-a11y-btn.is-on { background: var(--blue-header); color: var(--white); }
.lt-stack.is-lines { width: 360px; }
.lt-w-tiles { bottom: 128px; height: 600px; }   /* the pill below; 600 keeps the orbit's lowest plate clear of the tiles */
.lt-w-a11y-b { position: absolute; left: 50%; bottom: 32px; z-index: 2; height: 72px; padding: 0 30px 0 22px; border: 0; border-radius: var(--r-pill); background: var(--on-blue-14); color: var(--white); font: inherit; font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); transition: background-color var(--dur-quick) var(--ease); }
.lt-w-a11y-b svg { width: 32px; height: 32px; }
.lt-w-a11y-b.is-on, .lt-w-a11y.is-on { background: var(--white); color: var(--blue-header); }
.lt-welcome.is-in .lt-w-a11y-b { animation: fade-in 420ms var(--ease) 320ms both; }
.lt-welcome.is-leaving .lt-w-a11y-b { animation: w-out 240ms var(--ease-in) both; }
/* Suurem tekst */
.kiosk-shell.is-big .lt-name { font-size: 25px; line-height: 30px; min-height: 60px; }
.kiosk-shell.is-big .lt-price { font-size: 31px; }
.kiosk-shell.is-big .lt-top h1 { font-size: 40px; }
.kiosk-shell.is-big .lt-rail-item .l { font-size: 22px; }
.kiosk-shell.is-big .lt-oline .n { font-size: 25px; }
.kiosk-shell.is-big .lt-oline .s { font-size: 18px; }
.kiosk-shell.is-big .lt-oline .pr { font-size: 25px; }
.kiosk-shell.is-big .lt-tl .n, .kiosk-shell.is-big .lt-tl .p { font-size: 23px; }
.kiosk-shell.is-big .lt-chip-empty .t > span:first-child { font-size: 25px; }
.kiosk-shell.is-big .lt-chip-empty .t2 { font-size: 19px; }
.kiosk-shell.is-big .lt-totals .r:not(.is-total) { font-size: 22px; }
.kiosk-shell.is-big .lt-totals .r.is-total { font-size: 34px; }
.kiosk-shell.is-big .lt-msg { font-size: 22px; }
.kiosk-shell.is-big .lt-a11y-row .n { font-size: 27px; } .kiosk-shell.is-big .lt-a11y-row .s { font-size: 20px; }
/* Suurem kontrast: muted text to ≥ 7:1, white on navy, outlined tiles and cards */
.kiosk-shell.is-contrast { --ink-400: #3B4859; --on-blue-72: #FFFFFF; --blue-14: rgba(0,60,126,0.45); }
.kiosk-shell.is-contrast .lt-tile, .kiosk-shell.is-contrast .lt-traybar, .kiosk-shell.is-contrast .lt-oline { box-shadow: inset 0 0 0 2px var(--blue-header); }
.kiosk-shell.is-contrast :is(.lt-order-l, .lt-tray-label) { color: var(--ink-400); }
.kiosk-shell.is-contrast .lt-order:not([disabled]) .lt-order-l { color: var(--white); }
/* Vähem liikumist: every animation and transition lands at once */
.kiosk-shell.is-calm *, .kiosk-shell.is-calm *::before, .kiosk-shell.is-calm *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
.kiosk-shell.is-reach :is(#club-banner, #club-card) { display: none; }   /* the lower half is for the menu: the club promo and the member card step aside */
/* review fixes (2026-10-03) */
.lt-w-a11y-b { left: 0; right: 0; width: max-content; margin: 0 auto; transform: none; }   /* centred without a transform: the entrance animation owns transform */
.kiosk-shell.is-reach .lt-confirm { justify-content: flex-start; padding-top: 196px; }
.kiosk-shell.is-reach .lt-cf-logo { top: 26px; width: 150px; }
.kiosk-shell.is-reach .lt-cf-lang { top: 120px; }
.kiosk-shell.is-reach .lt-cf-theme { top: 30px; }
.kiosk-shell.is-reach .lt-cf-body { transform: none; scale: 0.8; transform-origin: 50% 0; }
.lt-tl-more { padding-left: 0; }   /* under the quantities, clear of the Skanni siin tab */
.kiosk-shell.is-big .lt-stack.is-lines { gap: 2px; }
.kiosk-shell.is-big .lt-tl { line-height: 1.15; }
.kiosk-shell.is-big .lt-tl-more { font-size: 18px; }
/* search in the lower half: a compact keyboard and the results as row cards, two per row, so they stay readable above it */
.kiosk-shell.is-reach .lt-dock { padding: 10px 24px 12px; margin-bottom: 10px; }
.kiosk-shell.is-reach .lt-dock .lt-kbd { gap: 6px; }
.kiosk-shell.is-reach .lt-dock .lt-kbd button { height: 54px; font-size: 24px; }
.kiosk-shell.is-reach .lt-search-field.is-inline { height: 76px; margin-bottom: 8px; }
.kiosk-shell.is-reach .lt-sgrid .lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kiosk-shell.is-reach #sresults .lt-tile { flex-direction: row; height: 150px; }
.kiosk-shell.is-reach #sresults .lt-media { width: 138px; height: 138px; margin: 6px; flex: none; }
.kiosk-shell.is-reach #sresults .lt-body { padding: 12px 70px 12px 6px; gap: 4px; min-width: 0; }
.kiosk-shell.is-reach #sresults .lt-name { width: auto; min-height: 0; }
.kiosk-shell.is-reach #sresults .lt-info-btn { display: none; }
/* accessibility side tab (2026-10-03): the arrows' outline, one button tall, where the arrows were; the arrows sit on top of it */
.lt-a11ytab { display: flex; position: fixed; right: 10px; bottom: 190px; z-index: 3; flex-direction: column; align-items: center; width: 96px; padding: 96px 0; box-sizing: border-box; }
.lt-a11ytab .rail-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; fill: var(--white); z-index: -1; }
.lt-a11ytab::before { content: ""; position: absolute; right: -12px; top: -600px; bottom: -600px; width: 14px; background: var(--white); z-index: -2; }
.lt-a11ytab button { position: relative; width: 76px; height: 76px; border: 0; border-radius: 50%; padding: 0; background: transparent; color: var(--blue-header); display: flex; align-items: center; justify-content: center; transition: background-color var(--dur-quick) var(--ease), transform 120ms var(--ease); }
.lt-a11ytab button svg { width: 38px; height: 38px; }
.lt-a11ytab button:active { transform: scale(0.94); }
.lt-a11ytab button.is-on { background: var(--blue-header); color: var(--white); }
.kiosk-shell.is-blue .lt-a11ytab .rail-bg, .kiosk-shell.is-blue .lt-a11ytab::before { fill: var(--blue-header); background: var(--blue-header); }
.lt-scrolltab { bottom: 398px; }   /* its lower taper overlaps the accessibility tab's upper one by 60 px: one white edge, buttons closer (Geio) */
.lt-stack.is-lines { width: 380px; }
.lt-a11ytab { transition: transform var(--dur-slow) var(--ease); }
.kiosk-shell.is-search .lt-a11ytab { transform: translateX(130%); }   /* like the arrows: the search keyboard runs to the edge; back with the menu */