/* Sklepik R4 — one shop scene: stage, conveyor with scanner, till device, receipt printer, cash drawer.
   Opt-in: active only while #kd-market-v5 has the class "shop-r4". Removing that class (or this file)
   restores the R3 presentation. Presentation only: no rule here changes prices, saves or progress. */

/* ---------- page: allow natural scrolling instead of squeezing the till ---------- */
html:has(#kd-market-v5.shop-r4),html:has(#kd-market-v5.shop-r4) body{height:auto!important;min-height:100%;overflow:auto!important}
html:has(#kd-market-v5.shop-r4) body>main{height:auto!important}
#kd-market-v5.cashier-r2.shop-r4{--r4-scan-w:92px;--r4-belt-h:112px;--r4-key:48px;--r4-ink:#2f2440;--r4-lcd:#1f3a33;--r4-lcd-ink:#d9f7a8;--r4-lcd-dim:#86a87a;
 height:auto!important;min-height:calc(100dvh - 58px);display:flex!important;flex-direction:column;background:#fbf7ea}
#kd-market-v5.cashier-r2.shop-r4 [data-game]:not([hidden]){display:grid!important;flex:1 1 auto;position:relative;overflow:visible!important;gap:8px!important;padding:8px!important;min-height:0;
 grid-template-columns:minmax(0,1.3fr) minmax(330px,.7fr)!important;grid-template-rows:auto auto auto!important;align-content:start;
 grid-template-areas:"instr instr" "stage desk" "belt desk"!important}
#kd-market-v5.cashier-r2.shop-r4 .market-instruction{grid-area:instr!important;border-radius:12px}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage{grid-area:stage!important}
#kd-market-v5.cashier-r2.shop-r4 [data-belt]{grid-area:belt!important}
#kd-market-v5.cashier-r2.shop-r4 [data-desk]{grid-area:desk!important}
#kd-market-v5.cashier-r2.shop-r4 [data-desk][hidden],#kd-market-v5.cashier-r2.shop-r4 [data-belt][hidden]{display:none!important}

/* ---------- stage: approved shop background, cashiers, customer, bag, camera monitor ---------- */
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage{position:relative;height:clamp(220px,48vh,540px);min-height:96px;overflow:hidden;border-radius:20px;isolation:isolate;
 background:url('assets/checkout.webp') center 38%/cover no-repeat,linear-gradient(#f6e7c4,#e9d3a3);box-shadow:inset 0 0 0 2px #fff9,0 4px 0 #d9c9a5}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage::after{content:'';position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(#0000,#3a2a1a1f);pointer-events:none;z-index:1}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage .shop-theatre{position:absolute!important;left:0;bottom:0;top:0;width:64%;height:auto;min-height:0;border-radius:0;background:transparent!important;z-index:2;grid-area:auto!important}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage .shop-theatre canvas{width:100%!important;height:100%!important}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage .shop-theatre-label{display:none}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage .shop-theatre.actors-fallback{background-color:transparent;background-size:44% 92%,44% 100%;background-position:8% bottom,62% bottom}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage .shop-customer-portrait{position:absolute!important;right:0;bottom:0;top:auto;width:34%;height:96%;background:transparent!important;border:0!important;z-index:3;overflow:visible}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage .shop-customer-portrait img.market-customer{object-position:center bottom!important}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-monitor{position:absolute;z-index:6;top:8px;right:8px;width:62px;height:48px;min-width:48px!important;min-height:44px!important;padding:0;border:3px solid #4a4255;border-radius:9px;background:#22202a;color:#bfe8d0;
 display:grid;place-items:center;box-shadow:0 3px 0 #3b3446,inset 0 0 0 2px #0006;cursor:pointer}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-monitor::before{content:'';position:absolute;top:5px;left:6px;width:7px;height:7px;border-radius:50%;background:#e2483a;box-shadow:0 0 6px #e2483a}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-monitor svg{width:26px;height:26px}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-monitor:disabled{opacity:.55;cursor:default}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-monitor.has-cue{border-color:#f0b73c;animation:r4-cue 1.4s ease-in-out infinite}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-cue{position:absolute;z-index:5;right:24%;top:16%;width:40px;height:40px;border-radius:50%;background:#fff6d6;border:3px solid #f0b73c;display:grid;place-items:center;box-shadow:0 3px 8px #4a2c0a40;pointer-events:none}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-cue svg{width:24px;height:24px}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-cue[hidden]{display:none}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-bag{position:absolute;z-index:4;left:56%;bottom:6px;width:20%;min-width:70px;height:40%;min-height:46px;border-radius:10px 10px 16px 16px;border:3px solid #6e5a43;background:linear-gradient(#f2e2c2,#dcc49a);box-shadow:0 4px 0 #6e5a4355;
 display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center;gap:1px;padding:14px 3px 3px;overflow:hidden}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-bag::before{content:'';position:absolute;top:-12px;left:22%;width:56%;height:18px;border:3px solid #6e5a43;border-bottom:0;border-radius:14px 14px 0 0}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-bag img{width:24px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 1px #0003)}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-bag.is-full{animation:r4-bag .7s ease both}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-shelf{position:absolute;z-index:4;left:4%;top:8%;display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:10px;background:#fffbecee;border:2px solid #7ba65a;color:#2f5321;font:700 12px/1.1 system-ui}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-shelf img{width:30px;height:32px;object-fit:contain}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-shelf[hidden]{display:none}
.shop-r4-flyer{position:fixed;z-index:2147480000;width:46px;height:50px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 3px #0004)}

/* ---------- conveyor belt and scanner ---------- */
#kd-market-v5.cashier-r2.shop-r4 [data-belt]{position:relative;height:var(--r4-belt-h);padding:8px calc(var(--r4-scan-w) + 10px) 14px 8px!important;border-radius:16px;
 background:repeating-linear-gradient(90deg,#333d3e 0 14px,#3f4b4c 15px 17px)!important;border:5px solid #9aa2a2!important;border-top-color:#cfd6d4!important;box-shadow:0 7px 0 #6b7576,inset 0 6px 10px #0006!important;overflow:hidden}
#kd-market-v5.cashier-r2.shop-r4 [data-belt]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,#c5cccb 0 6px,#8d9696 6px 12px);opacity:.9;pointer-events:none}
#kd-market-v5.cashier-r2.shop-r4 .market-belt-title{position:absolute!important;width:1px;height:1px!important;overflow:hidden;clip-path:inset(50%);margin:0}
#kd-market-v5.cashier-r2.shop-r4 .market-items{height:100%!important;padding:0!important;gap:6px!important;align-items:stretch}
#kd-market-v5.cashier-r2.shop-r4 .market-item{position:relative;flex:0 1 min(calc(var(--belt-share,25%) - 6px),118px)!important;grid-template-rows:minmax(20px,1fr) 13px 24px!important;padding:3px!important;border-radius:10px!important;background:#fffdf3!important;border:2px solid #e2dcc0!important;box-shadow:0 4px 0 #0007!important}
#kd-market-v5.cashier-r2.shop-r4 .market-item img{max-height:none!important}
#kd-market-v5.cashier-r2.shop-r4 .market-item.is-front{border-color:#f0b73c!important;box-shadow:0 0 0 3px #f0b73c88,0 4px 0 #0007!important;animation:r4-front 1.3s ease-in-out infinite;cursor:pointer}
#kd-market-v5.cashier-r2.shop-r4 .market-item.is-front::after{content:'▶';position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:#f0b73c;font-size:14px;text-shadow:0 1px 0 #0008}
#kd-market-v5.cashier-r2.shop-r4 .market-item.is-waiting:disabled{opacity:1;filter:saturate(.9)}
/* The selected product sits inside the scanner window until its line is confirmed. */
#kd-market-v5.cashier-r2.shop-r4 .market-item.is-selected{position:absolute!important;top:2px;bottom:4px;right:calc(-1 * var(--r4-scan-w) + 6px);width:calc(var(--r4-scan-w) - 22px);z-index:5;border-color:#ff6b5b!important;background:#fff!important;animation:none;cursor:default}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-recovered{position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#3d7c4f;color:#fff;font:800 13px/20px system-ui;text-align:center;z-index:2}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-scanner{position:absolute;right:6px;top:6px;bottom:12px;width:var(--r4-scan-w);border-radius:12px;background:linear-gradient(#5c5868,#3a3644);border:2px solid #24212c;box-shadow:inset 0 2px 0 #fff3;z-index:3;pointer-events:none;
 display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:4px}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-glass{position:absolute;left:8px;right:8px;top:8px;bottom:22px;border-radius:7px;background:linear-gradient(135deg,#1c2a2c,#2d4245);box-shadow:inset 0 0 8px #000a;overflow:hidden}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-glass::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:#ff4b3a;box-shadow:0 0 8px 2px #ff4b3a99;opacity:.55}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-scanner.is-reading .shop-r4-glass::after{opacity:1;animation:r4-laser .55s ease-in-out 2}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-scanner.is-ok{box-shadow:inset 0 2px 0 #fff3,0 0 0 4px #64c28466}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-scan-count{position:relative;z-index:1;color:#e7f6c4;font:700 12px/1 ui-monospace,monospace;letter-spacing:1px;display:flex;gap:5px;align-items:center}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-scan-count::before{content:'';width:8px;height:8px;border-radius:50%;background:#7a7486}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-scanner.is-ok .shop-r4-scan-count::before{background:#6fe28f;box-shadow:0 0 6px #6fe28f}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-scanner.is-reading .shop-r4-scan-count::before{background:#ff4b3a;box-shadow:0 0 6px #ff4b3a}

/* ---------- till: display, keypad, drawer, printer ---------- */
#kd-market-v5.cashier-r2.shop-r4 [data-desk]{grid-template-columns:minmax(96px,.52fr) minmax(0,1.48fr)!important;grid-template-rows:minmax(0,1fr)!important;padding:16px 10px 26px!important;border-radius:24px 24px 16px 16px!important;align-items:start!important}
#kd-market-v5.cashier-r2.shop-r4 .market-receipt{grid-column:1!important;grid-row:1!important;max-height:min(460px,100%);font-size:12px}
#kd-market-v5.cashier-r2.shop-r4 .market-register{grid-column:2!important;grid-row:1!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;
 grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"display display" "pad pad" "tools enter";gap:6px!important;transform:none!important;align-content:start}
#kd-market-v5.cashier-r2.shop-r4 .market-register-seal,#kd-market-v5.cashier-r2.shop-r4 .market-multiply-expression,#kd-market-v5.cashier-r2.shop-r4 .market-count-dots{display:none!important}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-display{grid-area:display}
#kd-market-v5.cashier-r2.shop-r4 .shop-entry-tools{grid-area:tools;min-height:44px;display:flex;gap:4px;align-items:stretch}
#kd-market-v5.cashier-r2.shop-r4 .shop-entry-tools [data-entry-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#kd-market-v5.cashier-r2.shop-r4 .shop-entry-tools:not(:has(button:not([hidden]))){display:none}
#kd-market-v5.cashier-r2.shop-r4 .shop-entry-tools:not(:has(button:not([hidden])))~[data-enter],#kd-market-v5.cashier-r2.shop-r4 .market-register:not(:has(.shop-entry-tools button:not([hidden]))) [data-enter]{grid-column:1/-1!important}
#kd-market-v5.cashier-r2.shop-r4 .market-keypad,#kd-market-v5.cashier-r2.shop-r4 .shop-money-tray{grid-area:pad!important}
#kd-market-v5.cashier-r2.shop-r4 [data-enter]{grid-area:enter!important;min-height:50px!important;font-size:16px!important}
#kd-market-v5.cashier-r2.shop-r4 :is([data-pay-panel],[data-reward],[data-review-prompt]){grid-area:pad!important}
#kd-market-v5.cashier-r2.shop-r4 :is(.shop-money-toggle,.shop-math-hint){min-height:44px!important;height:auto!important}
/* The real input stays focusable for keyboards and screen readers; the display mirrors it. */
#kd-market-v5.cashier-r2.shop-r4 .market-entry-wrap{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;overflow:hidden;clip-path:inset(50%);margin:-1px;padding:0!important;border:0!important}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-display{position:relative;border-radius:12px;background:var(--r4-lcd);border:4px solid #6f6880;box-shadow:inset 0 3px 8px #000a,0 2px 0 #fff6;color:var(--r4-lcd-ink);padding:6px 8px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;cursor:text;min-height:74px}
#kd-market-v5.cashier-r2.shop-r4:has(.market-entry:focus-visible) .shop-r4-display{outline:3px solid #f0b73c;outline-offset:2px}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-head{display:flex;align-items:center;gap:6px;min-height:22px;font:700 13px/1.1 system-ui;color:#bfe39a;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-head img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 0 2px #fff5)}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-cells{display:grid;grid-template-columns:1.25fr .7fr 1.25fr;gap:5px;margin-top:4px}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-cells[data-mode=single]{grid-template-columns:1fr}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell{border-radius:6px;background:#0002;padding:2px 5px 3px;min-width:0;border:1px solid #fff1}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell small{display:block;font:700 9px/1.2 system-ui;letter-spacing:.06em;color:var(--r4-lcd-dim);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell b{display:block;font:700 22px/1.15 ui-monospace,monospace;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:clip;color:var(--r4-lcd-dim)}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell.is-done b{color:var(--r4-lcd-ink)}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell.is-active{background:#d9f7a81a;border-color:#d9f7a8aa}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell.is-active b{color:#f6ffe0}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell.is-active b::after{content:'▏';animation:r4-caret 1s steps(1) infinite;color:#f6ffe0}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-op{align-self:center;text-align:center;color:var(--r4-lcd-dim);font:700 14px system-ui}
#kd-market-v5.cashier-r2.shop-r4 .market-keypad{display:grid!important;grid-template-columns:repeat(4,minmax(44px,1fr))!important;grid-template-rows:repeat(4,minmax(var(--r4-key),auto))!important;grid-auto-rows:var(--r4-key)!important;
 grid-template-areas:"k7 k8 k9 back" "k4 k5 k6 clear" "k1 k2 k3 times" "k0 k0 comma times";gap:6px!important;min-height:0!important;margin:0!important;flex:none!important}
#kd-market-v5.cashier-r2.shop-r4 .market-keypad[hidden],#kd-market-v5.cashier-r2.shop-r4 .market-keypad.shop-keypad-hidden{display:none!important}
#kd-market-v5.cashier-r2.shop-r4 .market-key{min-height:44px!important;max-height:none!important;font-size:22px!important}
#kd-market-v5.cashier-r2.shop-r4 [data-digit="0"]{grid-area:k0}#kd-market-v5.cashier-r2.shop-r4 [data-digit="1"]{grid-area:k1}#kd-market-v5.cashier-r2.shop-r4 [data-digit="2"]{grid-area:k2}#kd-market-v5.cashier-r2.shop-r4 [data-digit="3"]{grid-area:k3}#kd-market-v5.cashier-r2.shop-r4 [data-digit="4"]{grid-area:k4}
#kd-market-v5.cashier-r2.shop-r4 [data-digit="5"]{grid-area:k5}#kd-market-v5.cashier-r2.shop-r4 [data-digit="6"]{grid-area:k6}#kd-market-v5.cashier-r2.shop-r4 [data-digit="7"]{grid-area:k7}#kd-market-v5.cashier-r2.shop-r4 [data-digit="8"]{grid-area:k8}#kd-market-v5.cashier-r2.shop-r4 [data-digit="9"]{grid-area:k9}
#kd-market-v5.cashier-r2.shop-r4 [data-back]{grid-area:back}#kd-market-v5.cashier-r2.shop-r4 [data-clear]{grid-area:clear;font-size:12px!important}#kd-market-v5.cashier-r2.shop-r4 [data-comma]{grid-area:comma}
#kd-market-v5.cashier-r2.shop-r4 [data-times]{grid-area:times!important;font-size:18px!important;line-height:1.1}
/* Cash drawer: every note and coin is visible; the drawer scrolls inside itself on small screens. */
#kd-market-v5.cashier-r2.shop-r4 .shop-money-tray{display:flex;flex-direction:column;gap:5px;max-height:none}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-tray[hidden]{display:none!important}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-choices{display:grid!important;grid-template-columns:repeat(5,minmax(44px,1fr))!important;grid-template-rows:none!important;grid-auto-rows:minmax(48px,auto);gap:6px!important;padding:8px!important;
 background:linear-gradient(#6f5a80,#5a4769)!important;border:4px solid #47385a!important;border-radius:12px!important;box-shadow:inset 0 4px 10px #0007!important;overflow:auto;max-height:min(330px,52dvh)}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-row{display:contents}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-row--tools>:first-child{grid-column-start:1}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-row--tools>[hidden]+*{grid-column-start:1}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-piece{min-width:44px!important;min-height:44px!important;width:100%;font-size:12px}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-piece.banknote{height:48px;border-radius:6px}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-piece.banknote[data-money-value="20000"]{background:linear-gradient(125deg,#f3ead0,#d4b878);border-color:#9c7f3e;color:#5a4317}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-piece.banknote[data-money-value="10000"]{background:linear-gradient(125deg,#e4eedc,#a9c39a);border-color:#6d8a60;color:#2f4d2a}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-piece.banknote[data-money-value="5000"]{background:linear-gradient(125deg,#dceaf6,#9cbad3);border-color:#6a88a3;color:#29455e}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-piece.coin{width:min(100%,54px)!important;height:auto!important;aspect-ratio:1;justify-self:center;align-self:center;border-radius:50%}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-piece strong{font-size:16px}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-piece.word{height:44px;border-radius:8px}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-selected{font-size:12px}

/* ---------- feedback toast keeps the layout still ---------- */
#kd-market-v5.cashier-r2.shop-r4[data-feedback-error="true"] .market-feedback{position:absolute!important;left:50%!important;right:auto!important;top:6px!important;bottom:auto!important;pointer-events:none;transform:translateX(-50%);width:auto!important;max-width:min(520px,calc(100% - 24px));height:auto!important;
 clip-path:none!important;margin:0!important;z-index:20;padding:8px 12px!important;border-radius:12px;border:2px solid #d9a35f;background:#fff4dc!important;color:#6a3612!important;font-size:13px!important;box-shadow:0 6px 18px #3a20103a;grid-area:auto!important}

/* ---------- camera / story keep their R3 full-scene presentation ---------- */
#kd-market-v5.cashier-r2.shop-r4:has([data-camera-overlay]:not([hidden]),[data-story-overlay]:not([hidden])) .shop-r4-stage{display:none}
#kd-market-v5.cashier-r2.shop-r4:has([data-camera-overlay]:not([hidden]),[data-story-overlay]:not([hidden])) [data-game]{display:block!important}

/* ---------- tablet portrait and phones: one column, shop first ---------- */
@media (max-width:1023px) and (min-height:641px),(max-width:680px){
 #kd-market-v5.cashier-r2.shop-r4 [data-game]:not([hidden]){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(110px,1fr) auto auto!important;grid-template-areas:"instr" "stage" "belt" "desk"!important;align-content:stretch}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage{height:auto}
}
@media (min-width:681px) and (max-width:1023px) and (min-height:641px){#kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage{max-height:46vh}}
@media (max-width:680px){
 #kd-market-v5.cashier-r2.shop-r4{--r4-scan-w:78px;--r4-belt-h:100px;--r4-key:46px;min-height:calc(100dvh - 50px)}
 #kd-market-v5.cashier-r2.shop-r4 [data-game]:not([hidden]){gap:6px!important;padding:5px!important}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage{min-height:110px;border-radius:16px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-monitor{width:54px;height:44px}
 #kd-market-v5.cashier-r2.shop-r4 [data-desk]{grid-template-columns:minmax(92px,.5fr) minmax(0,1.5fr)!important;padding:12px 7px 22px!important;gap:7px!important}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell b{font-size:19px}
 #kd-market-v5.cashier-r2.shop-r4 .market-key{font-size:21px!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-receipt{max-height:330px}
 /* The drawer gets the full width of the till; the receipt moves under it. */
 #kd-market-v5.cashier-r2.shop-r4[data-money-tray=true] [data-desk]{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important}
 #kd-market-v5.cashier-r2.shop-r4[data-money-tray=true] .market-register{grid-column:1!important;grid-row:1!important}
 #kd-market-v5.cashier-r2.shop-r4[data-money-tray=true] .market-receipt{grid-column:1!important;grid-row:2!important;max-height:130px}
 #kd-market-v5.cashier-r2.shop-r4[data-money-tray=true] .market-printer-slot{display:none}
 #kd-market-v5.cashier-r2.shop-r4[data-money-tray=true] [data-belt]{display:block!important}
}
@media (max-width:680px) and (max-height:700px){
 #kd-market-v5.cashier-r2.shop-r4{--r4-belt-h:86px;--r4-key:44px}
 #kd-market-v5.cashier-r2.shop-r4 [data-game]:not([hidden]){grid-template-rows:auto minmax(84px,1fr) auto auto!important}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage{min-height:84px}
 #kd-market-v5.cashier-r2.shop-r4 [data-desk]{padding:9px 6px 18px!important}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-display{min-height:66px;padding:4px 6px 5px}
}
/* ---------- low landscape (phones turned sideways) ---------- */
@media (min-width:500px) and (max-height:500px){
 #kd-market-v5.cashier-r2.shop-r4{--r4-scan-w:76px;--r4-belt-h:88px;--r4-key:44px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage{height:auto}
 #kd-market-v5.cashier-r2.shop-r4 [data-desk]{grid-template-columns:minmax(84px,.4fr) minmax(0,1.6fr)!important;padding:8px 6px 16px!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-register{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;grid-template-areas:"display pad" "tools pad" "enter pad"!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-register:not(:has(.shop-entry-tools button:not([hidden]))) [data-enter]{grid-column:auto!important}
 #kd-market-v5.cashier-r2.shop-r4 [data-game]:not([hidden]){grid-template-columns:minmax(0,1fr) minmax(300px,1.15fr)!important;grid-template-rows:auto minmax(70px,1fr) auto!important;grid-template-areas:"instr desk" "stage desk" "belt desk"!important;gap:5px!important;padding:4px!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-key{font-size:18px!important}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-display{min-height:60px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell b{font-size:17px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-choices{max-height:none}
}

/* ---------- motion ---------- */
@keyframes r4-front{0%,100%{box-shadow:0 0 0 3px #f0b73c88,0 4px 0 #0007}50%{box-shadow:0 0 0 6px #f0b73c55,0 4px 0 #0007}}
@keyframes r4-laser{0%{top:12%}50%{top:88%}100%{top:50%}}
@keyframes r4-caret{50%{opacity:0}}
@keyframes r4-cue{0%,100%{box-shadow:0 3px 0 #3b3446,0 0 0 0 #f0b73c00}50%{box-shadow:0 3px 0 #3b3446,0 0 0 6px #f0b73c66}}
@keyframes r4-bag{40%{transform:translateY(-6px) rotate(-3deg)}}
#kd-market-v5.cashier-r2.shop-r4.market-still :is(.market-item.is-front,.shop-r4-monitor.has-cue,.shop-r4-bag.is-full,.shop-r4-cell.is-active b::after,.shop-r4-glass::after){animation:none!important}
@media (prefers-reduced-motion:reduce){#kd-market-v5.cashier-r2.shop-r4 *,#kd-market-v5.cashier-r2.shop-r4 *::before,#kd-market-v5.cashier-r2.shop-r4 *::after{animation:none!important;transition:none!important}}

/* Integration fixes on actual assets: goods must be above the scanner's case. */
#kd-market-v5.cashier-r2.shop-r4 .market-items{z-index:4}
#kd-market-v5.cashier-r2.shop-r4 .market-item.is-selected::before{content:'';position:absolute;left:1px;right:1px;top:38%;height:2px;background:#ff493d;box-shadow:0 0 5px #ff493d;pointer-events:none}
#kd-market-v5.cashier-r2.shop-r4 .market-receipt{overflow:auto;clip-path:none;border-radius:2px 2px 8px 8px}
#kd-market-v5.cashier-r2.shop-r4:is([data-normal-phase=scan],[data-normal-phase=pay],[data-normal-phase=done],[data-normal-phase=review]) .market-keypad{display:none!important}
/* The display already names ordinary steps; long scenario questions stay visible. */
#kd-market-v5.cashier-r2.shop-r4:not([data-normal-phase=task]):not([data-normal-phase=review]) [data-instruction]{position:absolute!important;width:1px;height:1px!important;min-height:0;padding:0!important;overflow:hidden;clip-path:inset(50%)}
@media(max-width:680px) and (min-height:501px){
 #kd-market-v5.cashier-r2.shop-r4{height:calc(100dvh - 54px)!important;min-height:0!important}
 #kd-market-v5.cashier-r2.shop-r4 [data-game]:not([hidden]){grid-template-rows:auto minmax(58px,1fr) var(--r4-belt-h) auto!important;align-content:stretch;flex:1 1 0}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage{min-height:58px;height:auto}
 #kd-market-v5.cashier-r2.shop-r4 [data-desk],#kd-market-v5.cashier-r2.shop-r4[data-money-tray=true] [data-desk]{grid-template-columns:minmax(72px,.36fr) minmax(0,1fr)!important;grid-template-rows:auto!important;padding:8px 6px 16px!important;gap:6px!important}
 #kd-market-v5.cashier-r2.shop-r4[data-money-tray=true] .market-register{grid-column:2!important;grid-row:1!important}
 #kd-market-v5.cashier-r2.shop-r4[data-money-tray=true] .market-receipt{grid-column:1!important;grid-row:1!important;max-height:220px}
 #kd-market-v5.cashier-r2.shop-r4 .market-receipt{font-size:11px;padding:9px 5px;max-height:240px}
 #kd-market-v5.cashier-r2.shop-r4 .market-receipt-empty,#kd-market-v5.cashier-r2.shop-r4 .market-receipt-recheck{font-size:10px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-choices{grid-template-columns:repeat(4,minmax(44px,1fr))!important;gap:4px!important;padding:5px!important;grid-auto-rows:46px;max-height:clamp(92px,calc(100dvh - 590px),214px)}
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-selected{font-size:10px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-display{min-height:66px;padding:4px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-head{font-size:11px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell{padding:2px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell b{font-size:clamp(12px,3.6vw,18px)}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell small{font-size:8px;letter-spacing:0}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-cells{gap:3px}
 #kd-market-v5.cashier-r2.shop-r4 [data-enter]{min-height:44px!important;font-size:13px!important}
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-piece strong{font-size:14px}
}
@media(max-width:355px) and (min-height:501px){
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-choices{grid-template-columns:repeat(3,minmax(44px,1fr))!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-keypad{grid-template-columns:repeat(4,minmax(30px,1fr))!important;gap:3px!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-key{font-size:18px!important;min-width:30px!important}
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-toggle{min-width:44px!important;padding:3px}
}

/* Notes and coins scroll; editing controls remain in reach. */
#kd-market-v5.cashier-r2.shop-r4 .shop-money-choices{display:flex!important;flex-direction:column;overflow:visible;max-height:none}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-currency{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));grid-auto-rows:48px;gap:5px;max-height:220px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-row--tools{display:flex;gap:5px;flex:none;justify-content:flex-end}
#kd-market-v5.cashier-r2.shop-r4 .shop-money-row--tools .shop-money-piece{width:auto;flex:1;min-height:44px;max-height:none}
@media(max-width:680px) and (min-height:501px){
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-currency{grid-template-columns:repeat(4,minmax(44px,1fr));grid-auto-rows:46px;gap:4px;max-height:clamp(56px,calc(100dvh - 684px),156px)}
}
@media(max-width:355px) and (min-height:501px){#kd-market-v5.cashier-r2.shop-r4 .shop-money-currency{grid-template-columns:repeat(3,minmax(44px,1fr))}}
@media(max-width:680px) and (min-height:501px) and (max-height:700px){
 #kd-market-v5.cashier-r2.shop-r4{--r4-belt-h:74px}
 #kd-market-v5.cashier-r2.shop-r4 .market-top{height:58px!important;min-height:58px!important;grid-template-rows:44px 10px!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-top>.active-time{font-size:9px!important;line-height:10px}
 #kd-market-v5.cashier-r2.shop-r4[data-money-tray=true] .shop-r4-display{min-height:44px;padding:3px}
 #kd-market-v5.cashier-r2.shop-r4[data-money-tray=true] .shop-r4-head{display:none}
 #kd-market-v5.cashier-r2.shop-r4[data-money-tray=true] .shop-money-selected{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;margin:0;border:0;min-height:0}
 #kd-market-v5.cashier-r2.shop-r4[data-money-tray=true] [data-desk]{padding-top:4px!important;padding-bottom:10px!important}
}
@media(min-width:681px) and (max-width:1023px) and (min-height:641px){
 #kd-market-v5.cashier-r2.shop-r4{height:calc(100dvh - 58px)!important;min-height:0!important}
 #kd-market-v5.cashier-r2.shop-r4 [data-game]:not([hidden]){grid-template-rows:auto minmax(80px,1fr) var(--r4-belt-h) auto!important;flex:1 1 0}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage{height:auto;max-height:none;min-height:80px}
}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage .shop-theatre[data-actor-state=loading]{background-image:url('assets/kumka-cashier-r1.png'),url('assets/dumka-cashier-r1.png')!important;background-position:8% bottom,76% bottom!important;background-size:30% 75%,50% 95%!important;background-repeat:no-repeat!important}
#kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage .shop-theatre[data-actor-state=loading] canvas{opacity:0}
@media(max-width:680px) and (max-height:700px){
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-monitor{left:8px;right:auto;top:6px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-bag{min-width:50px;min-height:28px;height:28%;width:18%;padding-top:4px;bottom:4px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-bag img{width:16px;height:18px}
}

/* Low phone landscape: the receipt shares the shop side; the till keeps its
   own display, compact keypad or scrolling drawer and a reachable confirm key. */
@media(min-width:500px) and (max-height:500px){
 #kd-market-v5.cashier-r2.shop-r4{height:calc(100dvh - 54px)!important;min-height:0!important;--r4-belt-h:70px;--r4-scan-w:66px}
 #kd-market-v5.cashier-r2.shop-r4:not([data-phase=camera]):not([data-phase=story]) [data-game]:not([hidden]){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;grid-template-rows:auto minmax(38px,1fr) 70px 48px!important;grid-template-areas:"instr till" "stage till" "belt till" "receipt till"!important;gap:4px!important;padding:4px!important;flex:1 1 0}
 #kd-market-v5.cashier-r2.shop-r4:not([data-phase=camera]):not([data-phase=story]) [data-desk]{display:contents!important}
 #kd-market-v5.cashier-r2.shop-r4:not([data-phase=camera]):not([data-phase=story]) .market-register{grid-area:till!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;grid-template-areas:"display display" "pad pad" "tools enter"!important;align-self:stretch;padding:4px;background:linear-gradient(130deg,#c9bfe0,#9687b4);border:2px solid #827198;border-radius:12px;gap:4px!important;min-height:0}
 #kd-market-v5.cashier-r2.shop-r4:not([data-phase=camera]):not([data-phase=story]) .market-receipt{grid-area:receipt!important;max-height:48px;padding:4px;font-size:10px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage{min-height:38px;height:auto}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-display{min-height:44px;padding:2px 4px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-head{display:none}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-cells{margin-top:0}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-cell b{font-size:16px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-selected{position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;clip-path:inset(50%);padding:0;border:0}
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-tray{gap:0;min-height:0}
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-choices{padding:2px!important;border-width:2px!important;gap:3px!important}
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-currency{grid-template-columns:repeat(5,minmax(36px,1fr));grid-auto-rows:44px;max-height:44px;gap:3px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-piece{min-width:36px!important}
 #kd-market-v5.cashier-r2.shop-r4 .shop-money-row--tools{gap:3px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-entry-tools{min-height:40px}
 #kd-market-v5.cashier-r2.shop-r4 [data-enter]{min-height:40px!important;font-size:12px!important;padding:2px}
 #kd-market-v5.cashier-r2.shop-r4 .market-keypad{grid-template-columns:repeat(7,minmax(24px,1fr))!important;grid-template-rows:repeat(2,40px)!important;grid-template-areas:none!important;grid-auto-rows:40px!important;gap:3px!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-keypad .market-key{grid-area:auto!important;grid-column:auto!important;min-width:24px!important;min-height:40px!important;font-size:16px!important;padding:1px}
 #kd-market-v5.cashier-r2.shop-r4 .market-keypad :is(.word,.times){font-size:10px!important}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-monitor{left:4px;right:auto;top:4px}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-bag{min-width:38px;min-height:22px;width:18%;height:22%;padding:2px;bottom:2px}
 #kd-market-v5.cashier-r2.shop-r4 .market-desk::after,#kd-market-v5.cashier-r2.shop-r4 .market-printer-slot{display:none!important}
}
@media(max-width:680px) and (max-height:700px),(min-width:500px) and (max-height:500px){
 #kd-market-v5.cashier-r2.shop-r4 .market-item{grid-template-rows:minmax(6px,1fr) 12px 14px!important;padding:1px!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-item img{min-height:0;height:100%;max-height:none!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-item-name{font-size:10px!important;line-height:12px}
 #kd-market-v5.cashier-r2.shop-r4 .market-item-price{grid-row:3!important;font-size:10px!important;line-height:14px;min-height:14px}
 #kd-market-v5.cashier-r2.shop-r4 .market-item-value{font-size:10px!important;line-height:14px}
 #kd-market-v5.cashier-r2.shop-r4 .market-item-unit{display:none!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-item.is-selected{grid-template-rows:minmax(6px,1fr) 10px 12px!important;padding:0!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-item.is-selected .market-item-name{font-size:9px!important;line-height:10px}
 #kd-market-v5.cashier-r2.shop-r4 .market-item.is-selected .market-item-price,#kd-market-v5.cashier-r2.shop-r4 .market-item.is-selected .market-item-value{line-height:12px;min-height:12px}
}


/* C2: preserve the full cast and let a short phone scroll instead of clipping the till. */
html:has(#kd-market-v5.shop-r4) body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box}
@media(max-width:680px) and (min-height:501px){
 #kd-market-v5.cashier-r2.shop-r4{height:auto!important;min-height:calc(100dvh - 66px)!important}
 #kd-market-v5.cashier-r2.shop-r4 [data-game]:not([hidden]){flex:0 0 auto!important;grid-template-rows:auto clamp(144px,24dvh,230px) var(--r4-belt-h) auto!important;align-content:start}
 #kd-market-v5.cashier-r2.shop-r4 .shop-r4-stage{height:100%;min-height:0}
 #kd-market-v5.cashier-r2.shop-r4 [data-desk]{min-height:min-content;overflow:visible!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-register{min-height:min-content;overflow:visible!important}
 #kd-market-v5.cashier-r2.shop-r4 .market-receipt{max-height:270px}
}
/* A long queue keeps readable product cards. Incoming items advance after each scan. */
#kd-market-v5.cashier-r2.shop-r4 .market-items{justify-content:flex-start!important;overflow:visible!important}
#kd-market-v5.cashier-r2.shop-r4 .market-item:not(.is-selected){flex:0 0 clamp(72px,16vw,112px)!important;min-width:72px!important}