@import './app-tokens.css';

/* Kiosk composition v0.2, 2026-10-04. Original app materials/assets are
   preserved; new touch layout is reviewed against its own kiosk fixtures. */
.kiosk,.dialog-backdrop,.toast {
  --kiosk-gutter: clamp(20px, 4.44cqw, 48px);
  --kiosk-gap: clamp(16px, 2.23cqw, 24px);
  --kiosk-body: clamp(18px, 2.62cqw, 28px);
  --kiosk-title: clamp(32px, 5.2cqw, 56px);
  --kiosk-button: clamp(64px, 9.64cqw, 104px);
  --kiosk-radius: 30px;
  --home-action-width: 800px;
  --control-surface: radial-gradient(ellipse at 16% 0%,rgba(167,130,224,.12),transparent 66%),linear-gradient(140deg,#251c3b,#151128 65%,#1b1430);
  --control-edge: rgba(188,159,228,.42);
  --control-shadow: 0 6px 16px rgba(2,0,13,.22),inset 0 1px 0 rgba(242,227,255,.13),inset 0 -1px 0 rgba(0,0,0,.28);
  --control-hover-shadow: 0 8px 22px rgba(2,0,13,.3),0 0 16px rgba(151,100,221,.1),inset 0 1px 0 rgba(242,227,255,.2);
  --control-pressed-shadow: 0 2px 8px rgba(2,0,13,.2),inset 0 2px 7px rgba(0,0,0,.28);
  --control-selected-surface: radial-gradient(ellipse at 50% 0%,rgba(181,255,45,.11),transparent 78%),linear-gradient(140deg,#252b27,#141927);
  --control-selected-shadow: 0 4px 16px rgba(2,0,13,.24),inset 0 1px 0 rgba(220,255,155,.15),inset 0 0 0 1px rgba(181,255,45,.08);
  --control-primary-surface: radial-gradient(ellipse at 28% 0%,rgba(255,249,220,.24),transparent 67%),linear-gradient(115deg,#ff8a1c,#ffb328 58%,#ffd457);
  --control-primary-shadow: 0 7px 22px rgba(230,115,11,.23),inset 0 1px 0 rgba(255,248,205,.62),inset 0 -2px 0 rgba(181,76,8,.24);
  --control-danger-surface: linear-gradient(140deg,#382139,#201322);
  --control-disabled-surface: linear-gradient(140deg,#29253b,#201d30);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; min-width: 0; height: 100%; margin: 0; }
/* Owner-mandated 9:16 surface. Wide windows letterbox; no landscape UI. */
#app { position: relative; width: min(100dvw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100dvw * 16 / 9)); aspect-ratio: 9 / 16; min-width: 0; min-height: 0; overflow: hidden; container: kiosk / size; contain: layout size style; box-shadow: 0 0 80px rgba(0,0,0,.6); }
.kiosk,.dialog-backdrop,.toast { font: 500 calc(var(--kiosk-body) * var(--text-scale))/1.45 var(--font-family); }
body { --text-scale: 1; display: grid; place-items: center; overflow: hidden; background: #03020b; color: var(--color-text-primary); font: 500 18px/1.45 var(--font-family); -webkit-font-smoothing: antialiased; }
body[data-textscale='1.3'] { --text-scale: 1.3; }
body[data-textscale='2'] { --text-scale: 2; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; touch-action: manipulation; }
button, input, select, a { outline-offset: 5px; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--color-brand-primary); }
button:disabled { cursor: not-allowed; }
img, svg { vertical-align: middle; }
img { max-width: 100%; object-fit: contain; }
button svg { flex: 0 0 auto; }
html[dir='ltr'] [data-icon='arrow'],html[dir='ltr'] [data-icon='back'] { transform: scaleX(-1); }
button { color: inherit; }
h1, h2, h3, p { margin: 0; }
em { color: var(--color-brand-primary); font-style: normal; }
small { font-size: .76em; }
a { color: var(--color-brand-primary); }
.kiosk { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; max-width: none; height: 100%; min-height: 0; margin-inline: auto; overflow: hidden; background-color: var(--color-bg-deep); background-image: linear-gradient(180deg,rgba(2,4,20,.12),rgba(2,5,22,.30)),url('/assets/cosmic.webp'); background-position: center, top center; background-size: cover, cover; background-repeat: no-repeat; box-shadow: 0 0 100px rgba(0,0,0,.5); }
.app-header { position: relative; z-index: 3; display: flex; align-items: center; gap: 22px; min-height: clamp(100px, 8.3cqh, 160px); flex: 0 0 auto; padding: 20px var(--kiosk-gutter); background: linear-gradient(180deg,rgba(7,7,25,.95),rgba(11,9,35,.8)); border-bottom: 1px solid rgba(174,132,255,.2); }
.brand-mask { display: inline-block; flex: 0 0 auto; width: clamp(145px, 23cqw, 248px); aspect-ratio: 768/257; background: var(--color-brand-primary); -webkit-mask: url('/assets/logo.webp') center/contain no-repeat; mask: url('/assets/logo.webp') center/contain no-repeat; filter: drop-shadow(0 0 8px rgba(181,255,45,.22)); }
.venue-chip { display: flex; flex-direction: column; align-items: start; gap: 1px; color: var(--color-text-primary); font-size: .7em; line-height: 1.3; }
.venue-chip small { color: var(--color-text-secondary); }
.header-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-inline-start: auto; }
.utility-button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-width: 64px; min-height: 64px; padding: 12px 18px; border: 1px solid var(--control-edge); border-radius: 18px; background: var(--control-surface); color: #f8f5ff; font-size: .75em; font-weight: 600; box-shadow: var(--control-shadow); }
.utility-button svg { width: 26px; height: 26px; color: #cbb7e9; }
.demo-ribbon { z-index: 2; flex: 0 0 auto; min-height: 28px; padding: 0 20px; background: rgba(22,17,51,.96); color: #d2c1ee; text-align: center; font-size: clamp(11px, 1.2cqw, 14px); letter-spacing: .025em; border-bottom: 1px solid rgba(174,132,255,.14); }
.demo-link { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 8px 5px; border: 0; background: transparent; color: var(--color-brand-primary); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.steps { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(16px, 4cqw, 52px); flex: 0 0 auto; padding: 21px var(--kiosk-gutter) 14px; }
.step { display: flex; align-items: center; gap: 10px; color: #c4bbd6; font-size: .72em; font-weight: 700; }
.step::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .6; }
.step.is-current { color: var(--color-brand-primary); }
.step.is-current::before { opacity: 1; box-shadow: 0 0 12px rgba(181,255,45,.55); }
.step.is-complete { color: #77e6a1; }
.session-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; padding: 12px var(--kiosk-gutter); background: rgba(8,7,26,.48); }
.account-pill { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: var(--color-text-secondary); font-size: .75em; }
.account-pill strong { color: #fff; }
.account-pill svg { color: var(--color-brand-primary); }
.session-strip .utility-button { min-height: 48px; min-width: 48px; padding: 7px 14px; font-size: .64em; }
.main-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: rgba(181,255,45,.5) rgba(11,9,35,.5); padding: clamp(20px,2.5cqh,40px) var(--kiosk-gutter) 32px; scroll-padding-top: 24px; }
.screen { min-height: 100%; width: 100%; }
.screen-heading { margin-bottom: clamp(24px,2.8cqh,44px); }
.eyebrow { margin-bottom: 7px; color: var(--color-brand-primary); font-size: .65em; font-weight: 800; line-height: 1.4; text-transform: uppercase; letter-spacing: .11em; }
.screen-heading h1 { font-size: calc(var(--kiosk-title) * var(--text-scale)); line-height: 1.16; font-weight: 800; letter-spacing: -.025em; overflow-wrap: break-word; }
.screen-heading p { margin-top: 14px; max-width: 820px; color: var(--color-text-secondary); font-size: .87em; line-height: 1.55; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-height: var(--kiosk-button); padding: 20px 30px; border: 1.5px solid transparent; border-radius: 25px; text-align: center; font-size: calc(clamp(20px,2.6cqw,28px) * var(--text-scale)); font-weight: 600; line-height: 1.25; text-decoration: none; white-space: normal; transition: transform 100ms ease, box-shadow 160ms ease, background-color 160ms ease; }
.btn-primary { background: var(--control-primary-surface); color: #211005; border-color: rgba(255,230,163,.68); font-weight: 700; box-shadow: var(--control-primary-shadow); }
.btn-secondary { background: var(--control-surface); color: #f8f5ff; border-color: var(--control-edge); box-shadow: var(--control-shadow); }
.btn-quiet { background: linear-gradient(145deg,rgba(37,28,59,.82),rgba(18,15,35,.94)); border-color: rgba(188,159,228,.3); color: #eee7f8; box-shadow: inset 0 1px 0 rgba(242,227,255,.08); }
.btn-danger { background: var(--control-danger-surface); color: #ffd6df; border-color: rgba(232,151,177,.43); box-shadow: var(--control-shadow); }
.btn-icon { min-width: var(--kiosk-button); padding: 18px; }
.hero-screen { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.hero-screen .screen-heading { position: relative; z-index: 1; max-width: 900px; margin-bottom: 16px; }
.hero-screen .screen-heading h1 { font-size: calc(clamp(40px,6.5cqw,70px) * var(--text-scale)); line-height: 1.12; }
.hero-screen .screen-heading p { margin-inline: auto; }
.hero-kicker { color: var(--color-brand-primary); font-size: .76em; font-weight: 800; letter-spacing: .05em; margin-bottom: 16px; }
.hero-art { position: relative; display: grid; place-items: center; width: min(100%,710px); flex: 1 1 auto; min-height: 160px; margin: 8px 0 22px; }
.hero-art::before { content: ''; position: absolute; width: 80%; aspect-ratio: 1; background: radial-gradient(ellipse,rgba(111,42,209,.28),transparent 65%); z-index: -1; }
.hero-art img { display: block; max-width: 86%; height: clamp(220px,35cqh,660px); filter: drop-shadow(0 14px 34px rgba(0,0,0,.4)); }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; width: min(100%,var(--home-action-width)); }
.hero-actions .btn { flex: 1 1 280px; }
/* v0.5.1: compact secondary action, with symmetric icon tracks and an inset edge. */
.quick-actions { width: min(80%,560px); display: grid; grid-template-columns: minmax(0,1fr); margin: 20px auto 0; }
.quick-action { position: relative; isolation: isolate; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; justify-items: center; gap: 12px; min-width: 0; min-height: 84px; padding: 12px 18px; border: 1px solid transparent; border-radius: 24px; color: #f8f5ff; background: radial-gradient(ellipse at 15% 0%,rgba(158,116,230,.14),transparent 65%) padding-box,linear-gradient(135deg,#211830,#100e22 62%,#19122e) padding-box,linear-gradient(135deg,#a38abe,rgba(149,117,194,.3) 35%,rgba(115,79,166,.32) 70%,#80609f) border-box; box-shadow: 0 12px 30px rgba(2,0,14,.36),inset 0 1px 0 rgba(238,224,255,.08),inset 0 -1px 0 rgba(0,0,0,.32); transition: transform 120ms ease-out,box-shadow 160ms ease-out; }
.quick-action::before { content: ''; position: absolute; pointer-events: none; top: 0; inset-inline: 24%; height: 1px; background: linear-gradient(90deg,transparent,rgba(238,225,255,.44),transparent); }
.balance-label { min-width: 0; font-size: calc(24px * var(--text-scale)); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; text-align: center; overflow-wrap: anywhere; }
.balance-symbol,.balance-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.balance-symbol { color: #d9c6ff; border: 1px solid rgba(182,145,238,.3); background: radial-gradient(ellipse at 35% 0%,rgba(179,142,232,.17),transparent 75%),linear-gradient(145deg,#322247,#22192e); box-shadow: inset 0 1px 0 rgba(241,224,255,.12),0 3px 8px rgba(0,0,0,.2); }
.balance-symbol svg { width: 26px; height: 26px; }
.balance-arrow { width: 34px; height: 34px; border: 1px solid rgba(197,173,230,.16); background: rgba(199,173,238,.035); color: #c7badc; transition: background-color 160ms ease-out,color 160ms ease-out; }
.balance-arrow svg { width: 18px; height: 18px; }
.quick-action:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 4px 12px rgba(2,0,14,.3),inset 0 2px 8px rgba(0,0,0,.28); }
.quick-action:active .balance-arrow { background: rgba(181,255,45,.1); color: var(--color-brand-primary); }
.premium {
  --premium-rgb: 181,255,45;
  /* Re-evaluate the unchanged app material in this element's accent scope.
     Inheriting root-computed dependent variables would make every edge lime. */
  --premium-surface-bg: radial-gradient(120% 105% at 8% -12%,rgba(var(--premium-rgb),.14) 0%,rgba(var(--premium-rgb),.035) 34%,transparent 58%),radial-gradient(90% 90% at 100% 100%,rgba(91,49,178,.13) 0%,transparent 62%),linear-gradient(145deg,rgba(35,25,78,.82) 0%,rgba(15,13,48,.88) 46%,rgba(7,9,29,.94) 100%);
  --premium-surface-border: rgba(var(--premium-rgb),.54);
  --premium-surface-shadow: 0 0 0 1px rgba(var(--premium-rgb),.07),0 0 18px rgba(var(--premium-rgb),.105),0 12px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.105),inset 0 -18px 28px rgba(0,0,0,.14);
  --premium-surface-shadow-strong: 0 0 0 1px rgba(var(--premium-rgb),.12),0 0 24px rgba(var(--premium-rgb),.17),0 16px 36px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -22px 34px rgba(0,0,0,.18);
  position: relative; isolation: isolate; overflow: hidden; background: var(--premium-surface-bg); border: 1.25px solid var(--premium-surface-border); box-shadow: var(--premium-surface-shadow); -webkit-backdrop-filter: var(--premium-surface-blur); backdrop-filter: var(--premium-surface-blur);
}
.premium::before { content: ''; position: absolute; z-index: 0; pointer-events: none; inset: 0; border-radius: inherit; background: linear-gradient(115deg,rgba(255,255,255,.13),rgba(255,255,255,.025) 24%,transparent 48%),linear-gradient(180deg,rgba(var(--premium-rgb),.08),transparent 24%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12),inset 1px 0 0 rgba(255,255,255,.035),inset -1px 0 0 rgba(var(--premium-rgb),.045); }
.premium::after { content: ''; position: absolute; z-index: 0; pointer-events: none; width: 58%; aspect-ratio: 1; inset-inline-end: -24%; bottom: -58%; border-radius: 50%; background: rgba(var(--premium-rgb),.11); filter: blur(25px); }
.premium > * { position: relative; z-index: 1; }
.accent-lime { --premium-rgb: 181,255,45; }
.accent-purple { --premium-rgb: 214,59,255; }
.accent-cyan { --premium-rgb: 55,224,255; }
.accent-gold { --premium-rgb: 255,190,41; }
.catalog-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; align-items: start; }
.catalog-main { min-width: 0; }
.category-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.tab { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; gap: 10px; min-height: 68px; padding: 12px 24px; border: 1px solid rgba(174,132,255,.28); border-radius: 20px; color: var(--color-text-secondary); background: var(--control-surface); box-shadow: var(--control-shadow); font-size: .83em; font-weight: 600; }
.tab.active,.tab.is-active,.tab[aria-selected='true'] { color: var(--color-brand-primary); border-color: rgba(181,255,45,.68); background: rgba(181,255,45,.09); box-shadow: 0 0 22px rgba(181,255,45,.055); }
.product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--kiosk-gap); }
.product-card { display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 318px; padding: 24px 20px; border-radius: var(--kiosk-radius); text-align: center; color: #fff; transition: transform 100ms ease,border-color 160ms ease,box-shadow 160ms ease; }
.product-card.is-selected { border-width: 2px; border-color: var(--color-brand-primary); box-shadow: var(--premium-surface-shadow-strong); }
.product-badge { display: inline-flex; align-items: center; min-height: 29px; margin-bottom: 8px; padding: 4px 14px; border-radius: 999px; background: rgba(var(--premium-rgb),.14); color: rgb(var(--premium-rgb)); font-size: .56em; font-weight: 800; line-height: 1.3; }
.product-art { display: grid; place-items: center; width: 100%; margin-bottom: 12px; }
.product-art img { width: clamp(106px,15cqw,158px); height: clamp(96px,14cqw,148px); filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.product-coins { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 10px; line-height: 1.1; }
.product-coins strong { font-size: calc(clamp(40px,5.3cqw,58px) * var(--text-scale)); font-weight: 800; letter-spacing: -.025em; }
.product-coins small { font-size: .63em; color: var(--color-text-secondary); }
.product-bonus { margin-top: 8px; color: #d3cee2; font-size: .62em; line-height: 1.4; }
.product-price { width: 100%; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(var(--premium-rgb),.22); color: #fff; font-weight: 800; font-size: calc(clamp(26px,3.2cqw,36px) * var(--text-scale)); line-height: 1.2; }
.catalog-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.catalog-tools .btn { min-height: 84px; padding: 16px 20px; font-size: .8em; }
.basket-preview { display: none; min-width: 0; padding: 24px; border: 1px solid rgba(181,255,45,.26); border-radius: 28px; background: var(--card-bg); }
.basket-preview h2 { margin-bottom: 22px; font-size: 1.2em; }
.basket-preview p { color: var(--color-text-secondary); font-size: .82em; }
.basket-preview .btn { width: 100%; margin-top: 20px; }
.campaign { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 150px; margin-top: 26px; padding: 20px 28px; border: 1px solid rgba(174,132,255,.3); border-radius: 28px; background: radial-gradient(ellipse at 90% 40%,rgba(101,52,165,.28),transparent 65%),linear-gradient(135deg,rgba(39,24,79,.96),rgba(12,11,34,.88)); overflow: hidden; }
.campaign-copy { position: relative; z-index: 1; max-width: 75%; }
.campaign-copy small { color: var(--color-brand-primary); font-size: .55em; font-weight: 800; letter-spacing: .08em; }
.campaign-copy h2,.campaign-copy h3 { font-size: 1.07em; line-height: 1.2; margin: 5px 0 8px; }
.campaign-copy p { color: var(--color-text-secondary); font-size: .68em; line-height: 1.4; }
.campaign > img,.campaign-copy > img { width: 140px; height: 145px; object-position: bottom; align-self: flex-end; margin-bottom: -20px; }
.info-banner { display: flex; align-items: flex-start; gap: 15px; padding: 20px 22px; margin: 22px 0; border: 1px solid rgba(181,255,45,.28); border-radius: 22px; background: rgba(181,255,45,.055); }
.info-banner p { color: #dedbe9; font-size: .77em; line-height: 1.5; }
.info-banner strong { color: #fff; }
.info-icon { flex: 0 0 auto; color: var(--color-brand-primary); }
.info-icon svg { width: 28px; height: 28px; }
.card-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 38px; align-items: center; }
.card-visual { display: grid; place-items: center; padding: 44px 0; }
.detail-art > img { display: block; width: min(80%,320px); max-height: 320px; filter: drop-shadow(0 14px 28px rgba(0,0,0,.4)); }
.card-controls > .totals { margin-top: 28px; }
.physical-card { display: flex; flex-direction: column; justify-content: space-between; width: min(100%,440px); aspect-ratio: 1.586; padding: 34px; border: 1px solid rgba(181,255,45,.55); border-radius: 23px; background: radial-gradient(circle at 100% 0%,rgba(181,255,45,.18),transparent 58%),linear-gradient(135deg,#3d226e,#16113e 62%,#110d2b); box-shadow: 0 28px 55px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.15); transform: rotate(-5deg); }
.physical-card .brand-mask { width: 180px; }
.physical-card > small,.physical-card > span { color: #ded6ee; font-size: .6em; letter-spacing: .08em; }
.card-controls h2 { font-size: 1.3em; margin-bottom: 12px; }
.card-controls p { color: var(--color-text-secondary); font-size: .83em; }
.quantity-control { display: flex; align-items: center; justify-content: center; gap: 34px; margin: 28px 0; }
.quantity-control button { display: grid; place-items: center; width: 90px; height: 90px; flex: 0 0 auto; background: var(--control-surface); border: 1px solid var(--control-edge); box-shadow: var(--control-shadow); border-radius: 24px; color: #f8f5ff; font-size: 1.7em; }
.quantity-control output,.quantity-control strong,.quantity-control > span { min-width: 90px; text-align: center; font-size: calc(58px * var(--text-scale)); font-weight: 800; }
.field-label { display: block; margin-bottom: 12px; font-size: .8em; font-weight: 700; }
.input-wrap { display: flex; gap: 12px; align-items: stretch; }
.text-input,.country-select,.coupon-input { width: 100%; min-width: 0; min-height: 88px; padding: 18px 22px; border: 1.5px solid rgba(174,132,255,.4); border-radius: 20px; background: rgba(11,9,33,.85); color: #fff; font-size: 1.1em; }
.text-input:focus,.coupon-input:focus { border-color: var(--color-brand-primary); }
.text-input[aria-invalid='true'],.coupon-input[aria-invalid='true'] { border-color: var(--color-text-error); }
.text-input::placeholder,.coupon-input::placeholder { color: var(--color-text-placeholder); }
.country-select { flex: 0 0 150px; width: 150px; font-size: .9em; }
.field-error { color: var(--color-text-error); margin-top: 12px; font-size: .75em; }
.helper { color: var(--color-text-secondary); margin-top: 14px; font-size: .71em; line-height: 1.55; }
.auth-panel { width: min(100%,640px); margin-inline: auto; }
.centered { margin-inline: auto; }
.auth-panel .screen-heading { text-align: center; }
.auth-panel .btn { width: 100%; margin-top: 24px; }
/* v0.4.1: inset violet glass deck and tactile numeral keys. */
.keypad { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(12px,.73cqh,14px); margin-top: 28px; padding: clamp(14px,1.05cqh,20px); direction: ltr; border: 1px solid rgba(191,162,248,.28); border-radius: 34px; background: radial-gradient(ellipse at 50% 0%,rgba(140,83,235,.16),transparent 62%),linear-gradient(160deg,rgba(28,20,57,.97),rgba(12,10,29,.98) 72%); box-shadow: 0 22px 50px rgba(1,0,9,.38),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(115,81,181,.24); }
.keypad::before { content: ''; position: absolute; pointer-events: none; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg,transparent,rgba(224,209,255,.7),transparent); }
.key-button { position: relative; isolation: isolate; display: flex; justify-content: center; align-items: center; min-width: 0; min-height: clamp(74px,5cqh,96px); padding: 12px; overflow: hidden; border: 1px solid rgba(195,169,248,.34); border-radius: 21px; background: radial-gradient(ellipse at 20% 0%,rgba(199,161,255,.13),transparent 65%),linear-gradient(155deg,#2e244a,#1c1733 64%,#17122c); color: #fff; font-size: calc(38px * var(--text-scale)); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -.025em; text-shadow: 0 2px 4px rgba(0,0,0,.25); box-shadow: 0 4px 0 #090616,0 9px 16px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(150,111,218,.18); transition: transform 100ms ease-out,background-color 120ms ease-out,border-color 120ms ease-out,box-shadow 120ms ease-out; }
.key-button::before { content: ''; position: absolute; pointer-events: none; inset: 1px 14% auto; height: 1px; background: linear-gradient(90deg,transparent,rgba(234,220,255,.3),transparent); }
.key-face { position: relative; display: inline-flex; justify-content: center; align-items: center; z-index: 1; }
.key-button-utility { color: #d1c7e5; font-size: calc(20px * var(--text-scale)); font-weight: 600; letter-spacing: 0; background: linear-gradient(155deg,#211a38,#151126); border-color: rgba(184,159,231,.21); box-shadow: 0 4px 0 #090616,0 7px 12px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.075); }
.key-button svg { width: 27px; height: 27px; }
.key-button:focus-visible { outline: 3px solid var(--color-brand-primary); outline-offset: 4px; }
.key-button:active:not(:disabled) { transform: translateY(3px); color: var(--color-brand-primary); border-color: rgba(181,255,45,.65); background: radial-gradient(ellipse at 50% 0%,rgba(181,255,45,.12),transparent 80%),linear-gradient(155deg,#2b2440,#1a172b); box-shadow: 0 1px 0 #090616,inset 0 2px 7px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.1); }
.otp-inputs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; direction: ltr; }
.otp-cell { display: grid; place-items: center; width: 100%; min-width: 0; height: 92px; border: 1.5px solid rgba(174,132,255,.4); border-radius: 18px; background: rgba(12,10,38,.9); color: #fff; text-align: center; font-size: calc(38px * var(--text-scale)); font-weight: 700; }
.otp-cell.is-active { border-color: var(--color-brand-primary); box-shadow: 0 0 18px rgba(181,255,45,.08); }
.otp-input { min-height: 106px; text-align: center; font-size: calc(clamp(30px,4.1cqw,44px) * var(--text-scale)); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .22em; padding-inline: 12px; }
.otp-input::placeholder { font-size: .8em; letter-spacing: .08em; }
.coupon-panel { max-width: 720px; margin-inline: auto; }
.coupon-input { text-transform: uppercase; letter-spacing: .05em; direction: ltr; }
.coupon-panel > .btn { width: 100%; margin-top: 24px; }
.coupon-result { display: flex; align-items: flex-start; gap: 18px; margin-top: 26px; padding: 26px; border: 1px solid rgba(181,255,45,.4); border-radius: 25px; background: rgba(181,255,45,.07); }
.coupon-result > svg { flex: 0 0 30px; width: 30px; height: 30px; color: var(--color-brand-primary); }
.coupon-result h2,.coupon-result strong { color: var(--color-brand-primary); }
.coupon-result p { font-size: .8em; margin-top: 10px; }
.coupon-demo-codes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.coupon-demo-codes > p { flex: 1 0 100%; color: var(--color-text-secondary); font-size: .7em; }
.coupon-demo-codes + .totals { margin-top: 28px; }
.chip { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 8px 15px; border: 1px solid rgba(174,132,255,.35); border-radius: 999px; color: #eee7f8; background: var(--control-surface); box-shadow: var(--control-shadow); font-size: .65em; font-weight: 600; }
.review-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; }
.order-lines { display: flex; flex-direction: column; gap: 14px; }
.order-line { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 22px; border: 1px solid rgba(174,132,255,.24); border-radius: 24px; background: rgba(18,13,45,.86); }
.order-line > img { flex: 0 0 74px; width: 74px; height: 74px; }
.line-copy { min-width: 0; flex: 1 1 170px; }
.line-copy strong { display: block; font-size: .9em; line-height: 1.35; }
.line-copy small,.line-copy p { display: block; margin-top: 5px; color: var(--color-text-secondary); font-size: .66em; line-height: 1.5; }
.line-price { font-size: 1em; font-weight: 800; white-space: nowrap; }
.line-price > strong { display: block; }
.line-price > del { display: block; color: var(--color-text-secondary); font-size: .72em; font-weight: 500; text-decoration-thickness: 1px; }
.line-price > .remove-button { margin-top: 10px; margin-inline-start: auto; }
.line-copy .line-saving { color: var(--color-brand-primary); font-weight: 700; }
.remove-button { display: grid; place-items: center; min-width: 48px; min-height: 48px; padding: 10px; background: var(--control-danger-surface); color: #efbdcc; border: 1px solid rgba(232,151,177,.3); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,213,225,.08); }
.totals { padding: 26px; border-radius: 26px; background: var(--card-bg); border: 1px solid rgba(174,132,255,.25); }
.total-row { display: flex; justify-content: space-between; gap: 24px; padding: 9px 0; color: var(--color-text-secondary); font-size: .8em; }
.total-row strong { color: #fff; text-align: end; }
.grand-total { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 14px; padding-top: 22px; border-top: 1px solid rgba(174,132,255,.3); font-size: 1.12em; font-weight: 800; }
.grand-total strong { color: var(--color-brand-primary); font-size: 1.4em; }
.payment-methods { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 26px; }
.method-heading { margin: 26px 0 0; font-size: 1.05em; line-height: 1.35; }
.method-heading + .payment-methods { margin-top: 16px; }
.review-layout > div > .btn { margin-top: 20px; }
.payment-method { display: flex; justify-content: center; align-items: center; gap: 18px; min-height: 104px; padding: 20px; border: 1px solid var(--control-edge); border-radius: 24px; background: var(--control-surface); box-shadow: var(--control-shadow); font-size: .86em; font-weight: 600; }
.payment-method.is-selected,.payment-method[aria-pressed='true'] { border-color: var(--color-brand-primary); background: rgba(181,255,45,.07); box-shadow: var(--glow-lime-sm); }
.payment-method svg { width: 34px; height: 34px; color: var(--color-brand-primary); }
.app-footer { z-index: 4; display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; align-items: center; gap: 20px; flex: 0 0 auto; min-height: 148px; padding: 24px var(--kiosk-gutter) max(24px,env(safe-area-inset-bottom)); border-top: 1px solid rgba(174,132,255,.27); background: linear-gradient(180deg,rgba(13,11,39,.94),rgba(8,7,27,.99)); box-shadow: 0 -18px 50px rgba(1,1,13,.2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.footer-summary { display: flex; flex-direction: column; gap: 3px; min-width: 125px; }
.footer-summary small { color: var(--color-text-secondary); font-size: .65em; }
.footer-summary strong { font-size: calc(clamp(26px,3.7cqw,40px) * var(--text-scale)); line-height: 1.2; }
.footer-actions { display: flex; min-width: 0; max-width: 100%; justify-content: center; align-items: stretch; gap: 16px; }
.footer-actions .btn { min-width: 180px; }
.footer-actions .btn-primary { min-width: 290px; }
.status-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; max-width: 850px; margin-inline: auto; padding: 30px 0; }
.status-screen .screen-heading p { margin-inline: auto; }
.status-art { display: grid; place-items: center; width: 100%; margin-bottom: 30px; }
.status-art img { width: clamp(180px,28cqw,300px); height: clamp(180px,28cqw,300px); }
.status-orbit { display: grid; place-items: center; width: clamp(170px,23cqw,250px); aspect-ratio: 1; border: 1px solid rgba(181,255,45,.3); border-radius: 50%; background: radial-gradient(circle,rgba(181,255,45,.12),transparent 70%); box-shadow: 0 0 70px rgba(181,255,45,.08); }
.status-orbit svg { width: 82px; height: 82px; color: var(--color-brand-primary); }
.status-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; background: rgba(181,255,45,.08); border: 1px solid rgba(181,255,45,.3); color: var(--color-brand-primary); font-size: .72em; font-weight: 700; }
.status-list { display: flex; flex-direction: column; width: min(100%,680px); gap: 14px; text-align: start; margin-top: 28px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border: 1px solid rgba(174,132,255,.26); border-radius: 20px; background: rgba(19,14,47,.85); font-size: .8em; }
.status-row strong { color: var(--color-brand-primary); }
.spinner { display: inline-block; width: 52px; height: 52px; border: 4px solid rgba(181,255,45,.15); border-top-color: var(--color-brand-primary); border-radius: 50%; animation: kiosk-spin 1s linear infinite; }
@keyframes kiosk-spin { to { transform: rotate(360deg); } }
.method-icon { display: grid; place-items: center; color: var(--color-brand-primary); }
.method-icon svg { width: 86px; height: 86px; }
.cash-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; width: 100%; margin-top: 24px; }
.cash-metric { display: flex; flex-direction: column; gap: 12px; padding: 24px 16px; border: 1px solid rgba(174,132,255,.3); border-radius: 25px; background: var(--card-bg); }
.cash-metric small { color: var(--color-text-secondary); font-size: .7em; }
.cash-metric strong { font-size: calc(clamp(30px,4.3cqw,46px) * var(--text-scale)); line-height: 1.2; }
.demo-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 22px; margin-top: 24px; border: 1px dashed rgba(174,132,255,.4); border-radius: 22px; }
.demo-controls p { flex: 1 0 100%; color: var(--color-text-secondary); font-size: .66em; }
.demo-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 18px; background: var(--control-surface); border: 1px solid var(--control-edge); border-radius: 16px; box-shadow: var(--control-shadow); font-size: .72em; font-weight: 600; }
.success-layout { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 28px; align-items: center; margin-bottom: 36px; }
.success-summary { text-align: center; }
.success-art { display: block; width: 220px; height: 240px; justify-self: center; filter: drop-shadow(0 12px 28px rgba(0,0,0,.35)); }
.success-summary > .success-check { margin: 0 auto 22px; }
.success-summary > small { display: block; margin-top: 18px; overflow-wrap: anywhere; color: var(--color-text-secondary); font-size: .6em; }
.success-summary > .total-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(174,132,255,.25); }
.success-heading { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 28px; }
.success-heading h1 { font-size: calc(var(--kiosk-title) * var(--text-scale)); line-height: 1.15; }
.success-heading p { color: var(--color-text-secondary); font-size: .83em; }
.success-check { display: grid; place-items: center; width: 100px; height: 100px; border: 1px solid rgba(181,255,45,.5); border-radius: 50%; background: radial-gradient(circle,rgba(181,255,45,.16),rgba(181,255,45,.02)); color: var(--color-brand-primary); box-shadow: 0 0 40px rgba(181,255,45,.09); }
.success-check svg { width: 48px; height: 48px; }
.success-items { display: flex; flex-direction: column; gap: 14px; text-align: start; }
.qr-card { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 30px; border: 1px solid rgba(181,255,45,.35); border-radius: 30px; background: var(--card-bg); text-align: center; }
.qr-card h2 { font-size: 1.15em; line-height: 1.3; }
.qr-card p { max-width: 660px; color: var(--color-text-secondary); font-size: .75em; }
.qr-code { flex: 0 0 auto; display: grid; place-items: center; width: clamp(220px,27cqw,300px); aspect-ratio: 1; background: white; color: black; border-radius: 10px; padding: 14px; }
.qr-code svg { display: block; width: 100%; height: 100%; }
.handoff-panel { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(0,1fr); gap: 28px; align-items: center; padding: 28px; border: 1px solid rgba(174,132,255,.3); border-radius: 28px; background: rgba(16,12,41,.9); }
.handoff-panel .qr-card { padding: 24px 16px; }
.handoff-panel .qr-card h2 { margin: 0; }
.handoff-panel .qr-card a { font-size: .7em; }
.handoff-panel h2 { margin-bottom: 18px; font-size: 1.15em; }
.handoff-panel > p { color: var(--color-text-secondary); font-size: .76em; }
.handoff-steps { display: flex; flex-direction: column; gap: 20px; margin: 26px 0; padding: 0; list-style: none; }
.handoff-steps > li,.handoff-steps > div { display: flex; align-items: flex-start; gap: 16px; font-size: .8em; line-height: 1.5; }
.step-number { display: grid; place-items: center; flex: 0 0 40px; min-width: 40px; height: 40px; border-radius: 50%; background: rgba(181,255,45,.13); color: var(--color-brand-primary); font-weight: 800; }
.print-panel { margin-top: 28px; padding: 28px; border: 1px solid rgba(174,132,255,.3); border-radius: 28px; background: var(--card-bg); }
.print-panel h2 { margin-bottom: 12px; font-size: 1.15em; }
.print-panel > p { color: var(--color-text-secondary); font-size: .75em; line-height: 1.5; }
.help-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.help-topic { padding: 28px; border: 1px solid rgba(174,132,255,.3); border-radius: 28px; background: var(--card-bg); }
.help-topic h2 { font-size: 1.1em; line-height: 1.3; margin-bottom: 14px; }
.help-topic p { color: var(--color-text-secondary); font-size: .77em; line-height: 1.6; }
.help-topic img { width: 70px; height: 70px; margin-bottom: 20px; }
.dialog-backdrop { position: absolute; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(3,2,14,.8); -webkit-backdrop-filter: blur(10px) saturate(.88); backdrop-filter: blur(10px) saturate(.88); }
.dialog { width: min(100%,840px); max-height: calc(100cqh - 48px); display: flex; flex-direction: column; padding: clamp(24px,4.4cqw,48px); border: 1px solid rgba(181,255,45,.4); border-radius: 36px; background: var(--sheet-bg); box-shadow: 0 32px 110px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1); }
.dialog > header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.dialog h2 { font-size: calc(clamp(28px,4cqw,42px) * var(--text-scale)); line-height: 1.25; }
.dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; color: #e0dcec; font-size: .9em; }
.dialog-body p + p { margin-top: 14px; }
.dialog-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.dialog-actions .btn { flex: 1 1 200px; min-height: 84px; font-size: .85em; }
.settings-options { display: flex; flex-direction: column; gap: 14px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(174,132,255,.2); }
.setting-row .btn { min-height: 64px; padding: 12px 18px; font-size: .76em; }
.toggle { min-width: 72px; min-height: 46px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--control-edge); background: var(--control-surface); box-shadow: var(--control-shadow); color: #eee7f8; font-weight: 600; }
.toggle[aria-checked='true'],.toggle.is-active { background: rgba(181,255,45,.18); border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.dev-panel { padding: 18px; margin-top: 24px; border: 1px dashed rgba(174,132,255,.4); border-radius: 20px; color: var(--color-text-secondary); font-size: .7em; }
.dev-panel input,.dev-panel select { max-width: 100%; min-height: 48px; padding: 10px; border: 1px solid rgba(174,132,255,.3); border-radius: 10px; color: white; background: #141033; }
.toast { position: absolute; z-index: 120; bottom: 180px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(90cqw,800px); padding: 20px 28px; border: 1px solid rgba(181,255,45,.55); border-radius: 22px; background: #1b153d; box-shadow: 0 14px 40px rgba(0,0,0,.45); color: white; font-size: .8em; text-align: center; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.print-only { display: none !important; }

/* Keep the monetary summary and payment choice beside the two-line basket
   on the portrait reference. The main viewport remains the only scroll owner. */
@container kiosk (min-width: 900px) {
  .review-layout { grid-template-columns: minmax(0,1.15fr) minmax(340px,1fr); gap: 24px; align-items: start; }
  .review-layout .order-line { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 14px; padding: 20px; align-items: start; }
  .review-layout .order-line > img { width: 56px; height: 56px; }
  .review-layout .line-copy { min-width: 0; }
  .review-layout .line-copy strong { font-size: .82em; }
  .review-layout .line-copy small { font-size: .65em; }
  .review-layout .line-price { font-size: .86em; }
  .review-layout .line-price > strong { white-space: normal; max-width: 150px; text-align: end; }
  .review-layout .coupon-result { padding: 22px; gap: 12px; }
  .review-layout .coupon-result strong { font-size: .9em; }
  .review-layout .coupon-result p { font-size: .74em; overflow-wrap: anywhere; }
  .review-layout .payment-methods { grid-template-columns: minmax(0,1fr); }
  .review-layout .payment-method { justify-content: flex-start; padding-inline: 22px; }
  .review-layout .totals { padding: 24px; }
  .review-layout .grand-total { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .review-layout .grand-total strong { margin-inline-start: auto; }
}
@container kiosk (max-width: 700px) {
  .kiosk,.dialog-backdrop,.toast { --kiosk-gutter: 20px; --kiosk-gap: 14px; --kiosk-body: 18px; --kiosk-title: 34px; --kiosk-button: 64px; --kiosk-radius: 22px; }
  .app-header { min-height: 94px; gap: 14px; padding-block: 16px; }
  .brand-mask { width: 146px; }
  .venue-chip { display: none; }
  .header-tools { gap: 8px; }
  .utility-button { min-height: 48px; min-width: 48px; padding: 10px 12px; font-size: .72em; border-radius: 15px; }
  .utility-button svg { width: 23px; height: 23px; }
  .steps { gap: 18px; padding-block: 14px 10px; }
  .step { gap: 7px; font-size: .69em; }
  .session-strip { gap: 8px; padding-block: 9px; }
  .account-pill { gap: 6px 12px; }
  .main-content { padding-top: 24px; padding-bottom: 28px; }
  .screen-heading { margin-bottom: 26px; }
  .hero-screen .screen-heading h1 { font-size: calc(42px * var(--text-scale)); }
  .hero-art img { height: clamp(190px,34cqh,380px); }
  .hero-actions { gap: 12px; }
  .hero-actions .btn { flex-basis: 100%; }
  .quick-actions { width: min(84%,440px); margin-top: 18px; }
  .quick-action { grid-template-columns: 38px minmax(0,1fr) 38px; gap: 10px; min-height: 72px; padding: 10px 14px; border-radius: 22px; }
  .balance-label { font-size: calc(22px * var(--text-scale)); }
  .balance-symbol { width: 38px; height: 38px; }
  .balance-symbol svg { width: 24px; height: 24px; }
  .balance-arrow { width: 30px; height: 30px; }
  .tab { min-height: 55px; padding: 12px 16px; border-radius: 17px; }
  .product-card { min-height: 290px; padding: 18px 12px; }
  .product-badge { font-size: .66em; }
  .product-coins { gap: 5px; }
  .product-coins strong { font-size: calc(36px * var(--text-scale)); }
  .product-coins small { font-size: .65em; }
  .product-bonus { font-size: .69em; }
  .product-price { font-size: calc(28px * var(--text-scale)); margin-top: 15px; }
  .catalog-tools { gap: 12px; margin-top: 18px; }
  .catalog-tools .btn { min-height: 76px; padding: 14px 12px; font-size: .84em; border-radius: 18px; }
  .campaign { gap: 12px; margin-top: 20px; padding: 19px; }
  .campaign-copy { max-width: 74%; }
  .campaign-copy small { font-size: .64em; }
  .campaign-copy p { font-size: .77em; }
  .campaign > img { width: 94px; height: 130px; margin-bottom: -19px; }
  .info-banner { padding: 17px; margin-block: 18px; }
  .info-banner p { font-size: .82em; }
  .text-input,.country-select,.coupon-input { min-height: 72px; padding: 14px 18px; }
  .country-select { flex-basis: 116px; width: 116px; padding-inline: 12px; }
  .keypad { gap: 12px; padding: 14px; border-radius: 28px; }
  .key-button { min-height: 74px; padding: 10px; font-size: calc(32px * var(--text-scale)); border-radius: 18px; }
  .key-button-utility { font-size: calc(17px * var(--text-scale)); }
  .otp-inputs { gap: 7px; }
  .otp-cell { height: 70px; font-size: calc(28px * var(--text-scale)); border-radius: 14px; }
  .card-visual { padding-block: 28px; }
  .physical-card { max-width: 340px; padding: 28px; }
  .physical-card .brand-mask { width: 150px; }
  .quantity-control { gap: 24px; }
  .quantity-control button { width: 74px; height: 74px; border-radius: 20px; }
  .quantity-control output,.quantity-control strong,.quantity-control > span { min-width: 64px; font-size: calc(46px * var(--text-scale)); }
  .order-line { padding: 18px; gap: 12px; }
  .order-line > img { width: 56px; height: 56px; flex-basis: 56px; }
  .line-copy { flex-basis: 130px; }
  .line-copy small { font-size: .76em; }
  .totals { padding: 22px; }
  .total-row { font-size: .9em; }
  .payment-methods { gap: 12px; }
  .payment-method { min-height: 88px; padding: 16px 12px; gap: 10px; font-size: .82em; }
  .app-footer { min-height: 126px; gap: 14px; padding: 18px 20px; }
  .footer-summary { min-width: 86px; }
  .footer-summary small { font-size: .72em; }
  .footer-summary strong { font-size: calc(28px * var(--text-scale)); }
  .footer-actions { gap: 10px; }
  .footer-actions .btn { min-width: 92px; font-size: calc(17px * var(--text-scale)); padding: 16px; border-radius: 18px; }
  .footer-actions .btn-primary { min-width: 160px; }
  .cash-grid { grid-template-columns: 1fr; }
  .cash-metric { flex-direction: row; justify-content: space-between; align-items: center; gap: 18px; padding: 20px; }
  .cash-metric small { font-size: .85em; }
  .cash-metric strong { font-size: calc(30px * var(--text-scale)); }
  .qr-card { padding: 24px; gap: 20px; }
  .qr-card p { font-size: .85em; }
  .handoff-panel { grid-template-columns: 1fr; padding: 24px; }
  .success-layout { grid-template-columns: minmax(0,1fr) 125px; gap: 16px; }
  .success-art { width: 125px; height: 165px; }
  .print-panel { padding: 24px; }
  .help-grid { grid-template-columns: 1fr; }
  .help-topic p { font-size: .86em; }
  .dialog-backdrop { padding: 16px; }
  .dialog { max-height: calc(100cqh - 32px); border-radius: 28px; padding: 24px; }
  .dialog-actions { gap: 12px; }
  .dialog-actions .btn { min-height: 66px; font-size: .9em; }
  .toast { bottom: 144px; padding: 16px 20px; font-size: .84em; }
}
@container kiosk (max-width: 420px) {
  .app-header { flex-wrap: wrap; min-height: 86px; padding-inline: 16px; gap: 10px; }
  .brand-mask { width: 135px; }
  .header-tools { gap: 6px; }
  .utility-button { min-width: 44px; min-height: 44px; padding: 9px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 280px; }
  .app-footer { align-items: stretch; }
  .footer-summary { flex-direction: row; justify-content: space-between; align-items: center; flex: 1 0 100%; }
  .footer-actions { width: 100%; }
  .footer-actions .btn { flex: 1 1 auto; }
  .footer-actions .btn-primary { flex: 2 1 auto; }
  .quick-actions { grid-template-columns: 1fr; }
  .catalog-tools { grid-template-columns: 1fr; }
  .payment-methods { grid-template-columns: 1fr; }
}
/* Text growth is real reflow; no transform-based scaling, clipping or truncation. */
body[data-textscale='1.3'] .app-header,body[data-textscale='2'] .app-header { flex-wrap: wrap; }
body[data-textscale='1.3'] .app-footer,body[data-textscale='2'] .app-footer { flex-wrap: wrap; }
body[data-textscale='2'] .product-grid,body[data-textscale='2'] .help-grid,body[data-textscale='2'] .review-layout,body[data-textscale='2'] .success-layout,body[data-textscale='2'] .card-layout,body[data-textscale='2'] .catalog-layout { grid-template-columns: minmax(0,1fr); }
body[data-textscale='2'] .basket-preview { display: none; }
body[data-textscale='2'] .hero-screen { display: flex; }
body[data-textscale='2'] .hero-art { flex: 0 0 auto; }
body[data-textscale='2'] .hero-art img { height: 250px; }
body[data-textscale='2'] .footer-summary { flex: 1 0 100%; flex-direction: row; justify-content: space-between; align-items: center; }
body[data-textscale='2'] .footer-actions { flex-wrap: wrap; }
body[data-textscale='2'] .footer-actions .btn { flex: 1 1 180px; min-width: 0; }
body[data-textscale='2'] .quick-actions { grid-template-columns: 1fr; }
body[data-textscale='2'] .category-tabs,body[data-textscale='2'] .payment-methods { display: flex; flex-wrap: wrap; }
body[data-textscale='2'] .category-tabs > *,body[data-textscale='2'] .payment-methods > * { flex: 1 1 100%; }
body[data-textscale='2'] .campaign-copy { max-width: 100%; }
body[data-textscale='2'] .campaign > img { display: none; }
body[data-textscale='2'] .dialog-actions .btn { flex-basis: 100%; }
body[data-textscale='2'] .handoff-panel { grid-template-columns: minmax(0,1fr); }
body[data-textscale='2'] .success-art { width: 120px; height: 145px; }
/* At 200% text in a short preview, scroll the portrait shell so fixed chrome
   cannot squeeze the customer content out. Physical-size portraits keep the
   normal independently scrolling main and persistent footer. */
@container kiosk (max-height: 900px) {
  body[data-textscale='2'] .kiosk { overflow-y: auto; }
  body[data-textscale='2'] .main-content { flex: 0 0 auto; min-height: 250px; overflow: visible; }
  body[data-textscale='2'] .main-content .screen { min-height: 0; }
}
/* v0.4.0: identical side tracks keep the action group at the frame center. */
.app-footer.has-sides { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 16px; }
.has-sides .footer-summary { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; }
.has-sides .footer-actions { grid-column: 2; grid-row: 1; }
.footer-cart { grid-column: 3; grid-row: 1; justify-self: end; min-height: 72px; padding: 14px 16px; gap: 9px; font-size: .78em; }
.cart-count { display: grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 5px; border-radius: 999px; color: var(--color-brand-primary); background: rgba(181,255,45,.12); font-size: .85em; }
.cart-description { color: var(--color-text-secondary); margin-bottom: 20px; }
.cart-dialog .order-line { padding: 20px 16px; gap: 16px; }
.cart-dialog .order-line > img { width: 64px; height: 64px; flex-basis: 64px; }
.cart-dialog .line-copy { min-width: 0; }
.cart-dialog .line-price { margin-inline-start: auto; }
@container kiosk (max-width: 899px) {
 .app-footer.has-sides { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px 16px; padding-block: 12px; }
 .has-sides .footer-summary { grid-column: 1; grid-row: 1; }
 .has-sides .footer-actions { grid-column: 1 / -1; grid-row: 2; width: auto; }
 .has-sides .footer-cart { grid-column: 2; grid-row: 1; min-height: 48px; padding: 8px 12px; border-radius: 16px; }
 .has-sides .footer-summary { flex-direction: row; align-items: center; gap: 10px; }
 .has-sides .footer-summary strong { font-size: calc(26px * var(--text-scale)); }
 .footer-actions .btn { min-width: 0; }
}
body:not([data-textscale='1']) .app-footer.has-sides { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
body:not([data-textscale='1']) .has-sides .footer-summary { grid-column: 1; grid-row: 1; flex-direction: column; align-items: start; }
body:not([data-textscale='1']) .has-sides .footer-cart { grid-column: 2; grid-row: 1; }
body:not([data-textscale='1']) .has-sides .footer-actions { grid-column: 1 / -1; grid-row: 2; }
body[data-textscale='2'] .footer-actions { width: 100%; }

/* Compact only the selection page; product detail artwork stays generous. */
.main-content[data-screen='catalog'] { padding-block: clamp(12px,1.2cqh,24px); }
[data-screen='catalog'] .screen-heading { margin-bottom: clamp(12px,1cqh,20px); }
[data-screen='catalog'] .screen-heading p { margin-top: 8px; }
[data-screen='catalog'] .category-tabs { margin-bottom: clamp(10px,1cqh,18px); }
[data-screen='catalog'] .product-grid { gap: clamp(12px,1cqh,20px); }
[data-screen='catalog'] .product-card { min-height: 0; padding: clamp(10px,.7cqh,14px) 14px; }
[data-screen='catalog'] .product-badge { min-height: 24px; padding: 3px 12px; margin-bottom: 4px; }
[data-screen='catalog'] .product-art { margin-bottom: 4px; }
[data-screen='catalog'] .product-art img { width: clamp(62px,5cqh,90px); height: clamp(62px,5cqh,90px); }
[data-screen='catalog'] .product-coins strong { font-size: calc(clamp(30px,4.5cqw,48px) * var(--text-scale)); }
[data-screen='catalog'] .product-bonus { margin-top: 5px; }
[data-screen='catalog'] .product-price { font-size: calc(clamp(24px,3cqw,32px) * var(--text-scale)); margin-top: 10px; padding-top: 8px; }
[data-screen='catalog'] .catalog-tools { gap: 12px; margin-top: clamp(10px,1cqh,18px); }
[data-screen='catalog'] .catalog-tools .btn { min-height: clamp(52px,4cqh,72px); padding: 12px; }
[data-screen='catalog'] .info-banner { margin-block: clamp(10px,1cqh,18px); padding: 12px 16px; }
[data-screen='catalog'] .campaign { min-height: 0; margin-top: 12px; padding: 12px 20px; }
[data-screen='catalog'] .campaign > img { width: clamp(64px,8cqw,100px); height: clamp(64px,7cqh,115px); margin-bottom: -12px; }
[data-screen='catalog'] .campaign-copy h2 { margin-block: 4px; }
[data-screen='catalog'] .coupon-result { margin-top: 12px; padding: 12px 16px; }
@container kiosk (min-width: 701px) {
 [data-screen='catalog'] .product-grid.has-five { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@container kiosk (max-width: 1049px) {
 .kiosk:has([data-screen='catalog']) .venue-chip { display: none; }
 .kiosk:has([data-screen='catalog']) .app-header { min-height: 94px; gap: 14px; padding-block: 16px; }
 .kiosk:has([data-screen='catalog']) .brand-mask { width: 146px; }
 [data-screen='catalog'] .screen-heading h1 { font-size: calc(36px * var(--text-scale)); }
 [data-screen='catalog'] .screen-heading p { font-size: .8em; }
 [data-screen='catalog'] .tab { min-height: 50px; padding: 10px 12px; }
 [data-screen='catalog'] .product-art img { width: 68px; height: 68px; }
 [data-screen='catalog'] .product-coins strong { font-size: calc(32px * var(--text-scale)); }
 [data-screen='catalog'] .product-card { display: grid; grid-template-columns: 56px minmax(0,1fr); grid-template-areas: "badge badge" "art coins" "art bonus" "price price"; gap: 3px 8px; align-items: center; padding: 8px; }
 [data-screen='catalog'] .product-badge { grid-area: badge; justify-self: center; margin: 0; }
 [data-screen='catalog'] .product-art { grid-area: art; margin: 0; }
 [data-screen='catalog'] .product-art img { width: 56px; height: 56px; }
 [data-screen='catalog'] .product-coins { grid-area: coins; gap: 4px; }
 [data-screen='catalog'] .product-bonus { grid-area: bonus; margin: 0; }
 [data-screen='catalog'] .product-price { grid-area: price; margin-top: 3px; padding-top: 4px; }
 [data-screen='catalog'] .campaign > img { height: 70px; }
 [data-screen='catalog'] .screen-heading { margin-bottom: 8px; }
 [data-screen='catalog'] .eyebrow { margin-bottom: 3px; }
 [data-screen='catalog'] .screen-heading p { margin-top: 4px; line-height: 1.4; }
 [data-screen='catalog'] .info-banner { margin-block: 8px; padding: 10px 12px; }
 [data-screen='catalog'] .campaign { padding: 8px 16px; gap: 12px; margin-top: 8px; }
 [data-screen='catalog'] .campaign-copy { flex: 1; min-width: 0; max-width: none; }
 [data-screen='catalog'] .campaign > img { width: 60px; height: 60px; margin-bottom: -8px; }
 [data-screen='catalog'] .coupon-result { margin-block: 8px; padding: 8px 12px; }
 [data-screen='catalog'] .coupon-result p { margin-top: 2px; }


}
@container kiosk (min-width: 900px) and (max-width: 1049px) {
 [data-screen='catalog'] .product-card { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; }
 [data-screen='catalog'] .product-art img { width: 68px; height: 68px; }
 [data-screen='catalog'] .product-badge { margin-bottom: 4px; }
 [data-screen='catalog'] .product-price { margin-top: 8px; padding-top: 6px; }
}
/* Enlarged text remains a readable scrolling/reflowing catalog. */
body[data-textscale='2'] [data-screen='catalog'] .product-grid { grid-template-columns: minmax(0,1fr); }

/* Shared control states, v0.5.0. Existing geometry, action data and native semantics remain. */
:is(.btn,.utility-button,.tab,.quantity-control button,.chip,.remove-button,.payment-method,.demo-button,.toggle,.product-card) { transition: transform 120ms ease-out,box-shadow 160ms ease-out,border-color 160ms ease-out,color 160ms ease-out; }
:is(.btn,.tab,.payment-method,.toggle):is(.is-selected,.is-active,[aria-pressed='true'],[aria-selected='true'],[aria-checked='true']):not(:disabled) { background: var(--control-selected-surface); border-color: rgba(181,255,45,.7); color: #d8ffa1; box-shadow: var(--control-selected-shadow); }
:is(.btn,.utility-button,.tab,.quantity-control button,.chip,.remove-button,.payment-method,.demo-button,.toggle,.quick-action,.product-card):disabled { background: var(--control-disabled-surface); border-color: rgba(203,187,227,.14); color: rgba(237,228,249,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); opacity: 1; transform: none; }
:is(.btn,.utility-button,.tab,.quantity-control button,.chip,.remove-button,.payment-method,.demo-button,.toggle,.product-card):active:not(:disabled) { transform: translateY(1px); box-shadow: var(--control-pressed-shadow); }
:is(.btn,.utility-button,.tab,.quantity-control button,.chip,.remove-button,.payment-method,.demo-button,.toggle,.quick-action,.key-button,.product-card,.demo-link):focus-visible { outline: 3px solid var(--color-brand-primary); outline-offset: 5px; }
.hero-actions .btn-primary { border-radius: 30px; }
.hero-actions .btn-primary > svg { width: 30px; height: 30px; }
@media (hover: hover) and (pointer: fine) {
  :is(.btn,.utility-button,.tab,.quantity-control button,.chip,.remove-button,.payment-method,.demo-button,.toggle):hover:not(:active):not(:disabled) { border-color: rgba(220,195,250,.75); box-shadow: var(--control-hover-shadow); }
  .btn-primary:hover:not(:active):not(:disabled) { border-color: #fff0bc; box-shadow: 0 9px 28px rgba(230,115,11,.32),inset 0 1px 0 rgba(255,248,205,.76),inset 0 -2px 0 rgba(181,76,8,.2); }
  :is(.btn-danger,.remove-button):hover:not(:active):not(:disabled) { border-color: rgba(255,177,198,.75); }
  :is(.btn,.tab,.payment-method,.toggle):is(.is-selected,.is-active,[aria-pressed='true'],[aria-selected='true'],[aria-checked='true']):hover:not(:active):not(:disabled) { border-color: var(--color-brand-primary); box-shadow: var(--control-selected-shadow); }
  .key-button:hover:not(:active):not(:disabled) { border-color: rgba(211,187,255,.64); box-shadow: 0 4px 0 #090616,0 10px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.22),0 0 18px rgba(135,81,215,.13); }
  .product-card:hover:not(:active):not(:disabled) { border-color: rgba(var(--premium-rgb),.88); box-shadow: var(--premium-surface-shadow-strong); }
  .quick-action:hover:not(:active):not(:disabled) { box-shadow: 0 14px 34px rgba(2,0,14,.4),0 0 20px rgba(159,111,222,.12),inset 0 1px 0 rgba(238,224,255,.15); }
  .quick-action:hover:not(:active):not(:disabled) .balance-arrow { color: #f0e6ff; background-color: rgba(199,173,238,.12); }
  .demo-link:hover { color: #d7ff93; text-decoration-thickness: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled) { transform: none !important; }
  *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .spinner { animation: none; border-right-color: var(--color-brand-primary); }
}
body[data-reduced-motion='true'] button:active:not(:disabled) { transform: none !important; }
body[data-reduced-motion='true'] *,body[data-reduced-motion='true'] *::before,body[data-reduced-motion='true'] *::after { animation: none !important; transition: none !important; }
/* Explicit PDF review stock. Real continuous-roll driver media/cut settings
   are configured and verified on the physical printer separately. */
@page { size: 80mm 297mm; margin: 4mm; background: #fff; }
@media print {
  :root { color-scheme: light; background: #fff; }
  html,body,#app { width: auto; max-width: none; height: auto; min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: visible; background: #fff; color: #000; }
  html { color-scheme: light; }
  body { display: block; font: 11pt/1.4 Arial,sans-serif; }
  #app { position: static; aspect-ratio: auto; container: none; contain: none; box-shadow: none; }
  .kiosk { font: inherit; }
  .dialog-backdrop,.toast { display: none !important; }
  .kiosk { display: block; width: 100%; min-width: 0; max-width: none; height: auto; min-height: 0; margin: 0; overflow: visible; background: #fff; box-shadow: none; }
  .kiosk > :not(.main-content) { display: none !important; }
  .main-content { display: block; width: 100%; min-width: 0; height: auto; margin: 0; padding: 0; overflow: visible; }
  .main-content > :not(.print-only) { display: none !important; }
  .print-only { display: block !important; width: 100%; min-width: 0; color: #000; background: #fff; }
  .receipt-paper { width: 100%; min-width: 0; max-width: 100%; padding: 0 .5mm; margin: 0; color: #000; background: #fff; overflow-wrap: anywhere; word-break: normal; break-after: page; page-break-after: always; }
  .receipt-paper:last-child { break-after: auto; page-break-after: auto; }
  .receipt-paper * { min-width: 0; max-width: 100%; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  .receipt-paper h1,.receipt-paper h2 { font-size: 15pt; margin-bottom: 4mm; }
  .receipt-paper p { margin: 2mm 0; overflow-wrap: anywhere; }
  .receipt-paper bdi,.receipt-paper > small { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
  .receipt-paper > small { display: block; }
  .receipt-paper .qr-code { display: block; width: 40mm; height: 40mm; padding: 0; margin: 4mm auto; border-radius: 0; }
  .receipt-paper svg { width: 100%; height: 100%; }
  .receipt-paper .total-row { display: grid; grid-template-columns: minmax(0,1fr) auto; width: 100%; gap: 2mm; align-items: start; padding: 2mm 0; color: #000; font-size: 10pt; }
  .receipt-paper .total-row strong { color: #000; white-space: normal; }
  .receipt-paper small { font-size: 9pt; }
  .receipt-paper .order-lines { display: block; width: 100%; margin: 3mm 0; }
  .receipt-paper .order-line,.receipt-paper .totals { width: 100%; padding: 2mm 0; margin: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; color: #000; }
  .receipt-paper .order-line { display: grid; grid-template-columns: minmax(0,1fr) minmax(16mm,auto); gap: 2mm; align-items: start; break-inside: avoid; }
  .receipt-paper .order-line > img { display: none; }
  .receipt-paper .line-copy { display: block; width: auto; min-width: 0; }
  .receipt-paper .line-copy strong { font-size: 10pt; line-height: 1.4; }
  .receipt-paper .line-copy small { margin-top: 1mm; font-size: 9pt; line-height: 1.4; }
  .receipt-paper .line-copy small,.receipt-paper .line-price del,.receipt-paper .line-saving { color: #000; }
  .receipt-paper .line-price { width: auto; font-size: 10pt; white-space: normal; text-align: end; }
  .receipt-paper .line-price strong { max-width: 21mm; white-space: normal; font-size: 10pt; }
  .receipt-paper .grand-total { margin-top: 2mm; padding-top: 3mm; font-size: 12pt; border-top: 1px solid #000; }
  .receipt-paper .grand-total strong { font-size: 14pt; margin: 0; }
}

/* Staff help uses the same portrait container and established controls. */
.staff-call-panel { margin-top: 28px; }
.staff-call-panel > .btn { width: 100%; white-space: normal; }
.staff-call-panel > small { display: block; color: var(--color-text-secondary); font-size: .65em; line-height: 1.5; }
.staff-status { gap: 20px; }
.staff-status .screen-heading { margin-bottom: 0; }
.staff-status .info-banner { text-align: start; }
.staff-location { display: grid; justify-items: center; gap: 10px; width: 100%; padding: 24px; border: 1px solid rgba(181,255,45,.3); border-radius: 24px; background: rgba(181,255,45,.06); }
.staff-location > svg { width: 40px; height: 40px; color: var(--color-brand-primary); }
.staff-location > span { color: var(--color-text-secondary); font-size: .8em; }

/* v0.6.0: a fixed physical header, bounded detail composition and anonymous reader. */
@media screen {
 .kiosk .app-header { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); direction: ltr; gap: clamp(10px,1.5cqw,18px); min-height: clamp(88px,8.3cqh,160px); padding: 16px var(--kiosk-gutter); }
 .kiosk .app-header .header-logo { width: clamp(124px,22cqw,238px); grid-column: 2; justify-self: center; }
 .header-side { display: flex; align-items: center; gap: clamp(7px,1cqw,12px); min-width: 0; }
 .header-left { grid-column: 1; justify-self: start; }
 .header-right { grid-column: 3; justify-self: end; }
 .header-side .utility-button { gap: 8px; padding-inline: clamp(10px,1.2cqw,16px); font-size: calc(clamp(14px,1.7cqw,19px) * var(--text-scale)); }
 html[dir='rtl'] .header-side .utility-button { direction: rtl; }
 .session-strip { justify-content: center; padding-block: 10px; }
 .account-pill { justify-content: center; }
 .account-pill bdi { font-size: 1.1em; letter-spacing: .045em; font-variant-numeric: tabular-nums; }
 .main-content[data-screen='detail'] { padding-block: clamp(16px,1.7cqh,32px); }
 .detail-screen { max-width: 880px; margin-inline: auto; min-height: 0; }
 .detail-screen .screen-heading { text-align: center; margin-bottom: clamp(16px,1.7cqh,30px); }
 .detail-summary { display: grid; grid-template-columns: minmax(100px,.7fr) minmax(0,1fr); align-items: center; gap: clamp(16px,3cqw,40px); padding: clamp(18px,3cqw,36px); border-radius: 30px; }
 .detail-summary .detail-art { display: grid; place-items: center; }
 .detail-summary .detail-art > img { width: min(100%,220px); height: clamp(120px,15cqh,250px); max-height: 250px; }
 .detail-facts { min-width: 0; }
 .detail-facts .product-coins { justify-content: flex-start; gap: 8px; }
 .detail-facts .product-coins strong { font-size: calc(clamp(36px,5.2cqw,60px) * var(--text-scale)); }
 .detail-breakdown { display: grid; gap: 10px; margin-top: 22px; font-size: .76em; }
 .detail-breakdown > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
 .detail-breakdown span { color: var(--color-text-secondary); }
 .detail-breakdown strong { white-space: nowrap; }
 .detail-facts .product-price { margin-top: 18px; padding-top: 14px; }
 .detail-quantity { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 22px; font-size: .8em; }
 .detail-quantity .quantity-control { margin: 0; gap: 18px; }
 .detail-quantity .quantity-control button { width: 64px; height: 64px; }
 .detail-quantity .quantity-control output { min-width: 48px; font-size: calc(36px * var(--text-scale)); }
 .detail-screen .info-banner { margin-block: 20px 14px; padding: 16px 20px; }
 .detail-screen .detail-terms { margin-top: 10px; }
 .detail-card-action { display: flex; justify-content: center; margin-top: 24px; }
 .detail-card-action .btn { min-width: 250px; min-height: 76px; padding: 16px 26px; font-size: .82em; }
 .kiosk:has([data-screen='detail']) .app-footer.has-sides { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 20px; padding-block: 16px; }
 .kiosk:has([data-screen='detail']) .footer-summary { grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; gap: 10px; }
 .kiosk:has([data-screen='detail']) .footer-cart { grid-column: 2; grid-row: 1; min-height: 52px; padding-block: 8px; }
 .kiosk:has([data-screen='detail']) .footer-actions { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
 .kiosk:has([data-screen='detail']) .footer-actions .btn { min-width: 180px; max-width: 390px; min-height: 80px; padding: 18px 26px; font-size: calc(clamp(17px,2.2cqw,25px) * var(--text-scale)); }
 .scan-screen { max-width: 760px; margin-inline: auto; }
 .scan-screen .screen-heading { text-align: center; }
 .scan-card-art { position: relative; display: grid; place-items: center; width: clamp(150px,25cqw,270px); aspect-ratio: 1.58; margin: 20px auto 24px; border: 1px solid rgba(181,255,45,.45); border-radius: 24px; background: var(--premium-surface-bg); box-shadow: 0 18px 40px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15); color: var(--color-brand-primary); }
 .scan-card-art > svg { width: 40%; height: 60%; }
 .scan-card-art > span { position: absolute; bottom: 15px; right: 18px; color: #ddd2fa; }
 .scan-card-art > span svg { width: 32px; height: 32px; }
 .scan-methods { display: flex; justify-content: center; gap: 24px; margin-bottom: 28px; color: var(--color-text-secondary); font-size: .78em; }
 .scan-methods > span { display: flex; gap: 10px; align-items: center; }
 .card-scan-form .btn { display: flex; min-height: 70px; margin: 20px auto 0; font-size: .8em; }
 .scan-status { min-height: 1.5em; margin-top: 12px; text-align: center; font-size: .78em; color: var(--color-text-secondary); }
 .reader-demo { margin-top: 28px; padding: 20px; border: 1px solid rgba(174,132,255,.25); border-radius: 22px; background: rgba(12,10,31,.7); text-align: center; }
 .reader-demo > p { font-size: .68em; color: var(--color-text-secondary); }
 .reader-demo .coupon-demo-codes { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
 .reader-demo .btn { min-height: 64px; padding: 12px 18px; font-size: .7em; }
 .balance-card-mark > svg { width: 112px; height: 112px; color: var(--color-brand-primary); }
 .card-balance-screen .product-coins { margin-block: 20px; }
 .card-balance-screen .product-coins strong { font-size: calc(clamp(56px,8cqw,90px) * var(--text-scale)); }
 .attract-kiosk .main-content { position: relative; padding: 0; overflow: hidden; }
 .attract-surface { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: transparent; color: #fff; }
 .attract-surface:active:not(:disabled) { transform: none; }
 .attract-surface:focus-visible { outline-offset: -8px; }
 .attract-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8cqh; padding: 7cqh 5cqw 18cqh; background: radial-gradient(ellipse at 50% 65%,rgba(103,36,173,.24),transparent 70%); }
 .attract-fallback .brand-mask { width: min(65%,650px); }
 .attract-fallback > img { width: 88%; max-height: 55%; filter: drop-shadow(0 20px 40px rgba(0,0,0,.4)); }
 .attract-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; visibility: hidden; }
 .attract-surface[data-playback='playing'] .attract-video { visibility: visible; }
 .attract-surface[data-playback='playing'] .attract-fallback { visibility: hidden; }
 .attract-prompt { position: absolute; inset-inline: 8%; bottom: 7cqh; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 80px; padding: 20px 28px; border: 1px solid rgba(221,201,255,.35); border-radius: 26px; background: linear-gradient(135deg,rgba(34,22,63,.9),rgba(13,11,30,.93)); box-shadow: 0 15px 45px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14); font-size: calc(clamp(22px,3cqw,34px) * var(--text-scale)); font-weight: 700; backdrop-filter: blur(16px); }
 .attract-prompt > svg { color: var(--color-brand-primary); }
 @container kiosk (max-width: 850px) {
  .kiosk .app-header { padding-inline: 20px; }
  .header-side .utility-button { min-width: 48px; min-height: 52px; padding: 10px; }
  .header-side .utility-button:not([data-action='language']) > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .header-side .utility-button svg { width: 23px; height: 23px; }
  .header-side .utility-button[data-action='language'] { gap: 7px; font-size: calc(14px * var(--text-scale)); }
  .detail-summary { padding: 20px; gap: 20px; border-radius: 24px; }
  .detail-breakdown { margin-top: 14px; gap: 8px; font-size: .8em; }
  .detail-quantity { margin-top: 16px; }
  .detail-quantity .quantity-control button { width: 52px; height: 52px; min-width: 52px; border-radius: 17px; }
  .detail-quantity .quantity-control output { font-size: calc(30px * var(--text-scale)); }
  .detail-card-action { margin-top: 16px; }
  .detail-card-action .btn { min-width: 200px; min-height: 60px; padding: 14px 22px; }
  .detail-screen .info-banner { padding: 12px 16px; margin-block: 16px 8px; }
  .detail-screen .detail-terms { font-size: .74em; }
  .kiosk:has([data-screen='detail']) .footer-actions .btn { min-width: 145px; min-height: 66px; padding: 14px 18px; }
  .kiosk:has([data-screen='detail']) .footer-cart { min-height: 48px; }
 }
 @container kiosk (max-width: 550px) {
  .kiosk .app-header { padding-inline: 14px; gap: 8px; }
  .kiosk .app-header .header-logo { width: 120px; }
  .header-side { gap: 6px; }
  .header-side .utility-button { min-width: 44px; min-height: 48px; padding: 8px; border-radius: 15px; }
  .header-side .utility-button[data-action='language'] svg { display: none; }
  .detail-summary { grid-template-columns: minmax(95px,.6fr) minmax(0,1fr); gap: 16px; padding: 16px; }
  .detail-summary .detail-art > img { height: 120px; }
  .detail-facts .product-coins { flex-direction: column; gap: 5px; }
  .detail-facts .product-price { margin-top: 10px; padding-top: 10px; }
  .detail-breakdown { gap: 6px; margin-top: 12px; }
  .detail-quantity { gap: 12px; }
  .detail-quantity .quantity-control { gap: 10px; }
  .kiosk:has([data-screen='detail']) .footer-actions .btn { min-width: 130px; padding-inline: 14px; }
 }
 body:not([data-textscale='1']) .header-side .utility-button:not([data-action='language']) > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 body[data-textscale='2'] .detail-summary { grid-template-columns: minmax(0,1fr); }
 body[data-textscale='2'] .detail-summary .detail-art { display: none; }
 body[data-textscale='2'] .detail-quantity { flex-wrap: wrap; }
 body[data-textscale='2'] .attract-prompt { flex-wrap: wrap; }
}
/* At double text in a narrow preview, all four header controls retain their
   accessible names and use 44px icon targets so the centered logo stays clear. */
@media screen {
 @container kiosk (max-width: 550px) {
  body[data-textscale='2'] .header-side .utility-button[data-action='language'] > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  body[data-textscale='2'] .header-side .utility-button[data-action='language'] > svg { display: inline-block; }
 }
}

/* v0.7.0 — one decision at a time; existing branded materials remain. */
@media screen {
 .steps.sr-only,.scanner-capture { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; border:0!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap; }
 .main-content:not([data-screen='attract']):not([data-screen='idle']) { background:rgba(5,3,22,.22); }
 .ownership-note { color:var(--color-text-secondary); font-size:.72em; line-height:1.55; text-align:center; margin:22px 0; }
 .minimal-disclosure { border:0; border-top:1px solid rgba(194,167,235,.2); border-radius:0; padding:0; background:transparent; box-shadow:none; }
 .minimal-disclosure > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:15px 4px; cursor:pointer; color:var(--color-text-secondary); font-size:.76em; font-weight:600; list-style:none; }
 .minimal-disclosure > summary::-webkit-details-marker { display:none; }
 .minimal-disclosure > summary::after { content:'+'; font-size:1.5em; font-weight:400; color:var(--color-brand-primary); }
 .minimal-disclosure[open] > summary::after { content:'−'; }
 .minimal-disclosure > summary:focus-visible { outline:3px solid var(--color-brand-primary); outline-offset:3px; border-radius:8px; }
 .minimal-disclosure > p { font-size:.78em; line-height:1.6; padding-bottom:20px; }
 .demo-caption { font-size:.65em; text-align:center; margin:18px 0 0; }
 .scan-screen { width:100%; max-width:850px; display:flex; flex-direction:column; align-items:center; padding-top:4cqh; }
 .scan-screen .screen-heading { margin-bottom:0; }
 .scan-screen .screen-heading h1 { font-size:calc(clamp(28px,4.7cqw,50px)*var(--text-scale)); }
 .scan-screen .screen-heading p { font-size:.82em; margin-top:12px; }
 .scan-illustration { width:min(100%,740px); margin:12px auto 0; filter:drop-shadow(0 28px 45px rgba(0,0,0,.24)); }
 .scan-illustration svg { display:block; width:100%; height:auto; }
 .scan-hand { transform-origin:390px 320px; animation:card-approach 4.8s cubic-bezier(.45,0,.25,1) infinite; }
 .scan-waves { opacity:0; animation:reader-pulse 4.8s ease-in-out infinite; }
 .scan-status { max-width:620px; min-height:1.7em; margin:0 0 24px; font-size:.82em; }
 .scan-screen[aria-busy='true'] .scan-hand { animation-play-state:paused; }
 .scan-demo-action { display:grid; justify-items:center; gap:14px; }
 .scan-demo-action .btn { min-height:56px; min-width:170px; font-size:.72em; padding:12px 24px; }
 .scan-demo-action small { color:var(--color-text-secondary); font-size:.6em; }
 @keyframes card-approach { 0%,12%,100% { transform:translate(45px,50px) rotate(8deg); } 40%,68% { transform:translate(-80px,-45px) rotate(-7deg); } }
 @keyframes reader-pulse { 0%,35%,75%,100% { opacity:0; } 48%,62% { opacity:.65; } }
 .review-screen { max-width:800px; margin-inline:auto; }
 .review-screen .screen-heading { margin:18px 0 30px; text-align:center; }
 .review-screen .review-layout { display:flex; flex-direction:column; gap:18px; }
 .review-screen .order-lines { gap:0; }
 .review-screen .order-line { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:18px; padding:22px 0; border:0; border-bottom:1px solid rgba(194,167,235,.2); border-radius:0; background:transparent; box-shadow:none; }
 .review-screen .order-line > img { width:64px; height:64px; }
 .review-screen .line-copy strong { font-size:.9em; }
 .review-screen .line-copy small { font-size:.65em; line-height:1.4; }
 .review-screen .line-price { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:12px; }
 .review-screen .line-price strong { font-size:.92em; }
 .review-screen .remove-button { width:44px; height:44px; min-width:44px; margin:0; border-radius:14px; }
 .review-extras { display:flex; justify-content:center; margin-top:16px; }
 .review-extras .btn { min-height:56px; padding:10px 22px; font-size:.73em; }
 .review-screen .ownership-note { margin:14px 0 0; font-size:.65em; }
 .compact-totals { padding:18px 0; border:0; border-radius:0; background:transparent; box-shadow:none; gap:12px; }
 .compact-totals .total-row { font-size:.78em; }
 .compact-totals .grand-total { border-top:0; margin:0; padding-top:8px; font-size:1em; }
 .compact-totals .grand-total strong { font-size:1.5em; }
 .review-screen .method-heading { text-align:center; font-size:.85em; margin:12px 0 16px; }
 .review-screen .payment-methods { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
 .review-screen .payment-method { min-height:84px; padding:18px; font-size:.85em; justify-content:center; border-radius:22px; }
 .review-screen .zero-payment { text-align:center; color:var(--color-brand-primary); font-size:.85em; }
 .review-screen .coupon-result { margin:12px 0 0; padding:14px 18px; font-size:.8em; }
 .completion-screen { max-width:800px; margin-inline:auto; text-align:center; }
 .completion-screen > .success-check { width:76px; height:76px; margin:12px auto 24px; }
 .completion-screen .screen-heading { margin-bottom:22px; }
 .completion-screen .screen-heading h1 { font-size:calc(clamp(32px,4.7cqw,50px)*var(--text-scale)); }
 .completion-screen .screen-heading p { font-size:.66em; }
 .completion-screen .success-items { gap:10px; text-align:center; margin-bottom:28px; font-size:.84em; }
 .completion-screen .success-items p { margin:0; }
 .minimal-handoff { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; border:1px solid rgba(194,167,235,.2); border-radius:24px; padding:24px; background:rgba(12,9,32,.7); text-align:start; }
 .minimal-handoff .qr-card { padding:0; background:transparent; border:0; box-shadow:none; }
 .minimal-handoff .qr-code { width:180px; max-width:100%; margin:0; border-radius:14px; }
 .minimal-handoff h2 { font-size:.92em; margin:0 0 10px; }
 .minimal-handoff p { font-size:.72em; line-height:1.5; }
 .minimal-handoff .helper { font-size:.6em; margin-top:12px; }
 .minimal-handoff .minimal-disclosure { margin-top:12px; }
 .minimal-handoff .minimal-disclosure summary { font-size:.68em; min-height:48px; padding-block:8px; }
 .minimal-handoff a { font-size:.65em; }
 .completion-screen > .helper { font-size:.68em; margin:20px 0; }
 .completion-screen .print-panel { margin-top:12px; text-align:start; }
 .completion-screen .print-panel p { font-size:.7em; }
 .completion-screen .print-panel .btn { min-height:60px; font-size:.7em; padding:14px 20px; }
 .completion-screen .purchase-reference { text-align:start; }
 .purchase-reference bdi { overflow-wrap:anywhere; }
 .help-grid { display:flex; flex-direction:column; gap:0; }
 .help-topic.minimal-disclosure > summary { min-height:80px; font-size:.9em; }
 .help-topic.minimal-disclosure > p { padding:0 4px 22px; margin:0; }
 .main-content[data-screen='cards'] .physical-card { width:min(100%,400px); }
 .main-content[data-screen='cards'] .card-visual { min-height:0; margin-block:20px; }
 .main-content[data-screen='cards'] .card-layout { gap:24px; }
 .main-content[data-screen='cards'] .screen-heading { text-align:center; }
 .main-content[data-screen='cards'] .card-controls { text-align:center; }
 .main-content[data-screen='cards'] .card-controls > p { display:none; }
 .main-content[data-screen='catalog'] .product-badge { font-size:.6em; }
 .main-content[data-screen='catalog'] .campaign { padding:16px 24px; }
 .main-content[data-screen='catalog'] .campaign-copy > small { display:none; }
 .main-content[data-screen='catalog'] .campaign-copy > p { font-size:.65em; }
 .main-content[data-screen='catalog'] .campaign > img { max-height:100px; }
 .main-content[data-screen='collect'] .physical-card { max-width:400px; }
 .main-content[data-screen='collect'] .info-banner { background:transparent; border:0; padding:12px; font-size:.8em; }
 .main-content[data-screen='processing'] .status-list { font-size:.76em; }
 .main-content[data-screen='staff-wait'] .info-banner,.main-content[data-screen='staff-request'] .info-banner { background:transparent; border:0; font-size:.72em; padding:12px; }
 .coupon-panel .minimal-disclosure { margin-top:24px; }
 @container kiosk (max-width:850px) {
  .review-screen .order-line { grid-template-columns:48px minmax(0,1fr) auto; gap:12px; padding:16px 0; }
  .review-screen .order-line > img { width:48px; height:48px; }
  .review-screen .payment-method { min-height:72px; padding:14px; }
  .review-screen .screen-heading { margin:8px 0 22px; }
  .review-screen .review-layout { gap:12px; }
  .review-screen .line-price { gap:8px; }
  .minimal-handoff { grid-template-columns:140px minmax(0,1fr); gap:18px; padding:18px; }
  .minimal-handoff .qr-code { width:140px; }
  .scan-screen { padding-top:3cqh; }
 }
 @container kiosk (max-width:550px) {
  .minimal-handoff { grid-template-columns:110px minmax(0,1fr); gap:14px; padding:16px; }
  .minimal-handoff .qr-code { width:110px; }
  .review-screen .order-line { grid-template-columns:40px minmax(0,1fr) auto; gap:10px; }
  .review-screen .order-line > img { width:40px; height:40px; }
  .review-screen .line-price { max-width:110px; }
 }
 body[data-textscale='2'] .minimal-handoff { grid-template-columns:1fr; }
 body[data-textscale='2'] .minimal-handoff .qr-card { justify-self:center; }
 body[data-textscale='2'] .review-screen .payment-methods { grid-template-columns:1fr; }
 body[data-textscale='2'] .review-screen .order-line { grid-template-columns:minmax(0,1fr) auto; }
 body[data-textscale='2'] .review-screen .order-line > img { display:none; }
 body[data-reduced-motion='true'] .scan-hand { animation:none; transform:translate(-80px,-45px) rotate(-7deg); }
 body[data-reduced-motion='true'] .scan-waves { animation:none; opacity:.45; }
 @media (prefers-reduced-motion:reduce) {
  .scan-hand { animation:none; transform:translate(-80px,-45px) rotate(-7deg); }
  .scan-waves { animation:none; opacity:.45; }
 }
}
@media screen {
 .review-screen .review-layout { align-items:stretch; }
 .review-screen .order-line > svg { width:64px; height:64px; color:var(--color-brand-primary); }
 .review-screen .review-layout .compact-totals { padding:10px 0; }
 @container kiosk (max-width:850px) { .review-screen .order-line > svg { width:48px; height:48px; } }
 @container kiosk (max-width:550px) { .review-screen .order-line > svg { width:40px; height:40px; } }
 body[data-textscale='2'] .review-screen .order-line > svg { display:none; }
}
@media screen {
 .review-screen,.completion-screen { display:flow-root; min-height:0; }
 .scanner-capture input { width:1px; height:1px; padding:0; border:0; }
}

/* v0.7.1 — give normal-text catalog offers more breathing room. */
@media screen {
 body[data-textscale='1'] [data-screen='catalog'] .product-grid { gap:clamp(16px,1.6cqh,32px); }
 body[data-textscale='1'] [data-screen='catalog'] .category-tabs { margin-bottom:clamp(16px,1.6cqh,28px); }
 body[data-textscale='1'] [data-screen='catalog'] .catalog-tools { margin-top:clamp(16px,1.6cqh,28px); }
 body[data-textscale='1'] [data-screen='catalog'] .campaign { margin-top:clamp(16px,1.4cqh,24px); }
 @container kiosk (min-width:900px) {
  body[data-textscale='1'] [data-screen='catalog'] .product-card { padding:24px 20px; row-gap:8px; }
  body[data-textscale='1'] [data-screen='catalog'] .product-art { margin-block:4px 8px; }
 }
}

/* v0.7.2 — banknote acceptance, without a change dispenser. */
@media screen {
 .cash-screen { max-width:850px; margin-inline:auto; }
 .cash-screen .screen-heading { text-align:center; }
 .cash-no-change { display:flex; align-items:center; justify-content:center; gap:12px; padding:18px 22px; border:1px solid rgba(255,200,66,.45); border-radius:20px; background:rgba(255,185,40,.08); color:#ffcf60; font-size:.85em; text-align:center; }
 .cash-no-change svg { width:26px; height:26px; flex:none; }
 .cash-no-change-inline { font-size:.72em; margin:20px 0 0; }
 .cash-received { display:flex; flex-direction:column; align-items:center; gap:16px; padding:48px 12px 36px; text-align:center; }
 .cash-received > span { color:var(--color-text-secondary); font-size:.85em; }
 .cash-received > strong { font-size:calc(clamp(58px,9cqw,96px)*var(--text-scale)); line-height:1.1; color:var(--color-brand-primary); }
 .cash-last-note { min-height:1.5em; margin:0; color:var(--color-text-secondary); font-size:.75em; }
 .cash-screen .cash-grid { margin-top:0; }
 .cash-screen .demo-controls { display:block; text-align:center; margin-top:32px; }
 .cash-screen .demo-controls > p { margin:0 0 18px; font-size:.63em; }
 .cash-note-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
 @container kiosk (max-width:850px) { .cash-received { padding-block:28px; gap:12px; } }
}

/* v0.7.3 — a brief anonymous farewell between completed purchase and Welcome. */
@media screen {
 .main-content[data-screen='thank-you'] { padding:clamp(24px,4.5cqw,48px); }
 .thank-you-screen { display:flex; flex-direction:column; align-items:center; min-height:100%; text-align:center; }
 .thank-you-screen > .brand-mask { width:clamp(160px,25cqw,270px); margin-top:2cqh; flex:none; }
 .thank-you-message { margin-block:auto; padding-block:40px; }
 .thank-you-message .success-check { width:104px; height:104px; margin:0 auto 36px; }
 .thank-you-message .screen-heading { margin:0; }
 .thank-you-message h1 { font-size:calc(clamp(36px,6cqw,64px)*var(--text-scale)); }
 .thank-you-message p { font-size:calc(clamp(18px,2.6cqw,28px)*var(--text-scale)); margin-top:18px; }
}


/* v0.8.0 — unified composition and refined touch materials.
   Actions follow their task; financial side information stays with the action group. */
@media screen {
 .kiosk,.dialog-backdrop,.toast {
  --control-surface: linear-gradient(155deg,rgba(55,47,77,.94),rgba(27,23,45,.96));
  --control-edge: rgba(224,211,255,.23);
  --control-shadow: inset 0 1px 0 rgba(255,255,255,.10),0 6px 18px rgba(0,0,0,.14);
  --control-hover-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 8px 24px rgba(0,0,0,.2);
  --control-pressed-shadow: inset 0 1px 4px rgba(0,0,0,.18);
  --control-primary-surface: linear-gradient(115deg,#ffb234,#ffce58);
  --control-primary-shadow: inset 0 1px 0 rgba(255,255,255,.62),0 8px 26px rgba(255,166,39,.15);
  --control-selected-surface: linear-gradient(145deg,rgba(181,255,45,.14),rgba(27,31,31,.95));
  --control-selected-shadow: inset 0 1px 0 rgba(224,255,177,.18),0 6px 20px rgba(0,0,0,.16);
 }
 .kiosk:not(.attract-kiosk) { background-image: linear-gradient(180deg,rgba(3,4,20,.28),rgba(3,4,20,.5)),url('/assets/cosmic.webp'); }
 .app-header { border-color: rgba(220,210,255,.12); background: rgba(9,8,26,.78); }
 .brand-mask { filter: none; }
 .session-strip { background: transparent; }
 .screen-heading h1 { font-weight: 700; letter-spacing: -.035em; }
 .screen-heading h1:focus:not(:focus-visible) { outline: none; }
 :is(.btn,.utility-button,.tab,.payment-method,.toggle,.demo-button,.chip,.quantity-control button,.remove-button) { border-width: 1px; box-shadow: var(--control-shadow); }
 :is(.btn,.payment-method) { border-radius: 24px; }
 .utility-button { border-radius: 20px; }
 .btn-quiet { background: linear-gradient(155deg,rgba(43,36,65,.8),rgba(24,20,40,.9)); border-color: var(--control-edge); }
 .btn-primary { background: var(--control-primary-surface); border-color: rgba(255,233,179,.65); box-shadow: var(--control-primary-shadow); color: #291703; }
 .btn-primary > svg { width: 23px; height: 23px; }
 .btn:disabled { color: #a6a0b9; background: linear-gradient(145deg,#302b41,#262137); border-color: rgba(222,210,255,.12); }
 :is(.quick-action,.order-line,.totals,.status-row,.metric,.campaign,.info-banner,.minimal-disclosure,.dialog) { border-color: rgba(215,197,249,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 8px 28px rgba(0,0,0,.12); }
 .quick-action { background: var(--control-surface); border: 1px solid var(--control-edge); }
 .balance-symbol { background: rgba(187,154,255,.08); box-shadow: none; border-color: rgba(215,197,249,.17); }
 .main-content.with-actions { display: flex; flex-direction: column; justify-content: safe center; gap: clamp(24px,2.4cqh,46px); }
 .main-content.with-actions > .screen { min-height: 0; flex: 0 0 auto; }
 .main-content > .app-footer { width: 100%; flex: 0 0 auto; }
 .main-content .app-footer { min-height: 0; padding: clamp(20px,1.6cqh,30px) 0 0; border-top: 1px solid rgba(220,210,255,.13); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
 .footer-actions .btn { min-height: clamp(68px,5.3cqh,102px); }
 .main-content[data-screen='phone'],.main-content[data-screen='otp'] { display: flex; flex-direction: column; justify-content: safe center; padding-block: clamp(24px,4cqh,76px); }
 .login-panel { width: min(100%,720px); min-height: 0; margin-inline: auto; display: grid; grid-template-columns: minmax(0,1fr); }
 .login-panel .screen-heading { min-height: clamp(82px,7cqh,134px); margin: 0; display: flex; justify-content: center; align-items: flex-start; }
 .login-panel .screen-heading h1 { font-size: calc(clamp(30px,4.8cqw,52px)*var(--text-scale)); line-height: 1.2; }
 .login-panel .field-label { margin: 0 0 14px; font-size: calc(clamp(17px,2.05cqw,22px)*var(--text-scale)); }
 .login-panel :is(.text-input,.country-select) { height: clamp(72px,5.7cqh,108px); min-height: 0; border-radius: 23px; border-color: rgba(213,192,252,.28); background: rgba(13,11,31,.91); box-shadow: inset 0 2px 8px rgba(0,0,0,.12); }
 .login-panel .text-input { font-size: calc(clamp(26px,3.5cqw,38px)*var(--text-scale)); }
 .login-panel .otp-input { letter-spacing: .25em; }
 .auth-support { min-height: clamp(68px,5cqh,96px); padding: 14px 2px 12px; }
 .auth-support .helper { margin: 0; font-size: .65em; }
 .auth-support .field-error { margin-top: 5px; font-size: .65em; }
 .login-panel .keypad { margin: 0; padding: 0; gap: clamp(12px,1.1cqh,21px); border: 0; background: none; box-shadow: none; }
 .login-panel .keypad::before,.key-button::before { display: none; }
 .key-button { min-height: clamp(76px,6.3cqh,121px); border-radius: 25px; background: linear-gradient(150deg,rgba(57,49,81,.96),rgba(28,24,47,.98)); border: 1px solid rgba(215,195,250,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.16); font-size: calc(clamp(32px,4.1cqw,44px)*var(--text-scale)); font-weight: 500; text-shadow: none; }
 .key-button-utility { background: rgba(25,21,43,.87); border-color: rgba(215,195,250,.14); font-size: calc(clamp(17px,2.1cqw,22px)*var(--text-scale)); color: #c6bed7; }
 .key-button:active:not(:disabled) { transform: scale(.97); color: var(--color-brand-primary); background: rgba(181,255,45,.10); box-shadow: inset 0 1px 6px rgba(0,0,0,.15); }
 .login-panel .app-footer { margin-top: clamp(22px,2cqh,38px); padding: 0; border: 0; }
 .login-panel .footer-actions { width: 100%; }
/* v0.9.5: in a frame shorter than the sign-in content this row collapsed to 0 and Verify covered Edit/Resend. Never shrink below the action. */
.login-panel .app-footer { flex-shrink: 0; min-height: clamp(76px,6cqh,115px); }
 .login-panel .footer-actions .btn { width: 100%; margin: 0; min-height: clamp(76px,6cqh,115px); border-radius: 25px; }
 .auth-secondary { min-height: clamp(70px,6cqh,115px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding-top: clamp(16px,1.5cqh,28px); }
 .auth-secondary .btn { width: 100%; min-width: 0; min-height: 54px; margin: 0; padding: 12px 8px; border: 0; background: transparent; box-shadow: none; color: #c9c1dc; font-size: .7em; }
 .auth-secondary .btn:hover { background: rgba(255,255,255,.04); }
 .product-card.premium { border-color: rgba(var(--premium-rgb),.35); background: radial-gradient(ellipse at 10% 0%,rgba(var(--premium-rgb),.13),transparent 72%),linear-gradient(160deg,rgba(30,24,54,.97),rgba(13,11,32,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.17); border-radius: 30px; }
 .product-card.premium.is-selected { border-color: var(--color-brand-primary); box-shadow: inset 0 0 0 1px rgba(181,255,45,.35),0 8px 24px rgba(0,0,0,.2); }
 .product-badge { font-weight: 500; }
 .product-price { border-top-color: rgba(var(--premium-rgb),.22); }
 .category-tabs { gap: 8px; padding: 6px; border: 1px solid rgba(220,205,255,.14); border-radius: 25px; background: rgba(15,12,33,.85); }
 .category-tabs .tab { border-radius: 19px; box-shadow: none; background: transparent; border-color: transparent; }
 .category-tabs .tab.active { background: rgba(181,255,45,.10); border-color: rgba(181,255,45,.26); }
 .detail-screen .detail-summary { border-color: rgba(218,195,255,.23); background: linear-gradient(150deg,rgba(46,36,69,.92),rgba(15,12,34,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 15px 40px rgba(0,0,0,.17); }
 .status-screen { padding-block: clamp(24px,3cqh,58px); }
 @container kiosk (min-width: 900px) {
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-card { min-height: 310px; padding: 26px 24px; row-gap: 10px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-art img { width: 90px; height: 90px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-grid { gap: 24px; }
 }
 @container kiosk (max-width: 600px) {
  .login-panel .screen-heading { min-height: 82px; }
  .login-panel .keypad { gap: 10px; }
  .key-button { min-height: 66px; border-radius: 19px; }
  .login-panel .country-select { flex-basis: 100px; width: 100px; }
  .login-panel :is(.text-input,.country-select) { height: 68px; padding-inline: 14px; }
  .auth-support { min-height: 70px; }
  .auth-secondary { min-height: 78px; gap: 8px; }
  .login-panel .footer-actions .btn { min-width: 0; }
 }
 body:not([data-textscale='1']) .main-content { justify-content: flex-start; }
 body:not([data-textscale='1']) .login-panel .screen-heading { min-height: 0; margin-bottom: 30px; }
 body:not([data-textscale='1']) .login-panel :is(.text-input,.country-select) { height: auto; min-height: 100px; }
 body:not([data-textscale='1']) .auth-support { min-height: 0; margin-bottom: 20px; }
 body:not([data-textscale='1']) .auth-secondary { display: flex; flex-wrap: wrap; }
 @media (hover:hover) and (pointer:fine) {
  .key-button:hover:not(:active):not(:disabled) { border-color: rgba(223,205,255,.48); background: linear-gradient(150deg,#443859,#242037); box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 8px 24px rgba(0,0,0,.2); }
  .btn-primary:hover:not(:active):not(:disabled) { border-color: #fff0c6; box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 10px 28px rgba(255,178,52,.22); }
 }
}
@media screen {
 /* Enlarged text keeps the same login slots too; the page scrolls instead of clipping. */
 body:not([data-textscale='1']) .login-panel .screen-heading { min-height: calc(clamp(30px,4.8cqw,52px)*var(--text-scale)*3.6); }
 body:not([data-textscale='1']) .login-panel .auth-support { min-height: calc(112px*var(--text-scale)); margin-bottom: 0; }
 body:not([data-textscale='1']) .login-panel .auth-secondary { min-height: calc(100px*var(--text-scale)); }
}


/* v0.8.1 — stable spatial anchors; category content never recenters its surroundings. */
@media screen {
 .kiosk { --scene-top: clamp(20px,5cqh,96px); }
 .kiosk .app-header,.kiosk:has([data-screen='catalog']) .app-header { min-height: clamp(88px,8.3cqh,160px); padding-block: 16px; gap: clamp(10px,1.5cqw,18px); }
 .kiosk .app-header .header-logo { width: clamp(124px,22cqw,238px); }
 .kiosk > :is(.session-strip,.session-spacer) { min-height: clamp(40px,3cqh,58px); flex: 0 0 auto; padding-block: 8px; }
 .session-spacer { pointer-events: none; }
 .kiosk .main-content:not([data-screen='idle']):not([data-screen='attract']):not([data-screen='thank-you']) { padding-top: var(--scene-top); justify-content: flex-start; }
 .main-content > .screen:not(.hero-screen):not(.thank-you-screen) { min-height: 0; }
 .main-content > .status-screen { justify-content: flex-start; padding-top: 0; }
 .main-content > .screen > .screen-heading:not(.sr-only) { text-align: center; margin-top: 0; }
 .main-content > .screen > .screen-heading p { margin-inline: auto; }
 .main-content[data-screen='catalog'] .product-grid { --catalog-rows: var(--catalog-rows-wide,2); --catalog-row-height: 176px; grid-template-rows: repeat(var(--catalog-rows),var(--catalog-row-height)); grid-auto-rows: var(--catalog-row-height); align-items: stretch; }
 .main-content[data-screen='catalog'] .product-card { min-height: 0; height: 100%; }
 @container kiosk (min-width: 900px) {
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-grid { --catalog-row-height: 380px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-card { min-height: 0; padding: 24px; }
 }
 @container kiosk (max-width: 700px) {
  .main-content[data-screen='catalog'] .product-grid.has-five { --catalog-rows: var(--catalog-rows-narrow,3); }
 }
 /* Enlarged text retains the top anchor and column width, allowing readable growth. */
 body:not([data-textscale='1']) .main-content[data-screen='catalog'] .product-grid { grid-template-rows: none; grid-auto-rows: auto; }
 body:not([data-textscale='1']) .main-content[data-screen='catalog'] .product-card { height: auto; }
 .kiosk,.dialog-backdrop,.toast {
  --control-surface: linear-gradient(165deg,rgba(74,65,98,.72),rgba(26,23,43,.96) 74%);
  --control-edge: rgba(236,227,255,.22);
  --control-shadow: inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(0,0,0,.24),0 10px 24px rgba(0,0,0,.2);
  --control-primary-surface: radial-gradient(ellipse at 35% 0%,rgba(255,255,237,.45),transparent 68%),linear-gradient(115deg,#ffb52f,#ffdc66);
  --control-primary-shadow: inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 0 rgba(177,98,9,.15),0 10px 28px rgba(255,180,40,.17);
  --control-hover-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 12px 28px rgba(0,0,0,.25);
 }
 .kiosk .utility-button { border-radius: 999px; background: linear-gradient(160deg,rgba(55,49,75,.65),rgba(17,16,31,.94)); border-color: rgba(225,218,249,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.14),0 4px 16px rgba(0,0,0,.16); }
 .header-side .utility-button > svg { width: 30px; height: 30px; padding: 4px; border-radius: 50%; background: rgba(222,210,255,.07); color: #e1d7f4; }
 .btn-primary,.hero-actions .btn-primary,.login-panel .footer-actions .btn-primary { border-radius: 999px; background: var(--control-primary-surface); border-color: rgba(255,242,199,.8); box-shadow: var(--control-primary-shadow); color: #291c08; letter-spacing: -.015em; }
 .btn-primary > svg { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: rgba(83,48,0,.09); }
 :is(.btn-secondary,.btn-quiet,.payment-method,.toggle,.chip,.demo-button,.quantity-control button) { background: var(--control-surface); border-color: var(--control-edge); box-shadow: var(--control-shadow); }
 .btn-secondary,.btn-quiet,.payment-method { border-radius: 22px; }
 .btn-secondary > svg,.btn-quiet > svg { color: #e4d7ff; }
 :is(.btn,.utility-button,.tab,.payment-method,.toggle):is(.is-selected,.is-active,.active,[aria-pressed='true'],[aria-selected='true'],[aria-checked='true']):not(:disabled) { background: linear-gradient(145deg,rgba(181,255,45,.16),rgba(25,34,29,.96)); border-color: rgba(181,255,45,.62); box-shadow: inset 0 1px 0 rgba(228,255,192,.2),inset 0 0 0 1px rgba(181,255,45,.055),0 8px 22px rgba(0,0,0,.18); }
 .category-tabs { border-radius: 999px; padding: 7px; gap: 8px; background: rgba(12,10,29,.88); box-shadow: inset 0 2px 6px rgba(0,0,0,.24),0 1px 0 rgba(255,255,255,.08); }
 .category-tabs .tab { border-radius: 999px; }
 .product-card.premium { border-color: rgba(var(--premium-rgb),.29); background: radial-gradient(ellipse at 50% -25%,rgba(var(--premium-rgb),.19),transparent 68%),linear-gradient(160deg,rgba(33,27,52,.98),rgba(12,11,28,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16),0 12px 30px rgba(0,0,0,.2); }
 .product-card.premium::before { background: linear-gradient(135deg,rgba(255,255,255,.06),transparent 42%); box-shadow: none; }
 .product-card.premium::after { display: none; }
 .product-badge { border: 1px solid rgba(var(--premium-rgb),.16); }
 .key-button { background: linear-gradient(160deg,rgba(68,58,91,.94),rgba(28,25,45,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.2),0 10px 22px rgba(0,0,0,.2); }
 .key-button-utility { background: linear-gradient(160deg,rgba(37,31,53,.9),rgba(20,18,34,.96)); }
 .quick-action { border-radius: 999px; box-shadow: var(--control-shadow); }
 .balance-symbol { border: 0; background: rgba(221,204,255,.08); color: #e7d9ff; }
 .auth-secondary .btn { background: transparent; box-shadow: none; border: 0; }
 :is(.btn,.utility-button,.tab,.payment-method,.toggle,.chip,.demo-button,.quantity-control button):disabled { background: linear-gradient(150deg,#282535,#201d2e); border-color: rgba(225,218,249,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.045); color: #9690a8; }
 .btn:disabled > svg { color: inherit; background: transparent; }
 @media (hover:hover) and (pointer:fine) {
  .btn-primary:hover:not(:disabled):not(:active) { box-shadow: var(--control-primary-shadow),0 0 24px rgba(255,203,77,.10); border-color: #fff5d8; }
 }
}

@media screen {
 .login-panel .footer-actions .btn:disabled,.hero-actions .btn:disabled { background: linear-gradient(150deg,#282535,#201d2e); border-color: rgba(225,218,249,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.045); color: #9690a8; }
 .completion-screen > .success-check { margin: 0 auto 24px; }
}

@media screen {
 .detail-screen .detail-summary { min-height: clamp(230px,19cqh,365px); }
 .detail-quantity-slot { display: flow-root; min-height: 86px; }
 .detail-quantity-slot .detail-quantity { margin-top: 22px; }
 .detail-screen .ownership-note { min-height: 3.1em; margin-block: 18px 0; }
 .detail-screen .detail-terms { min-height: 1.55em; margin-top: 8px; }
}

@media screen {
 .payment-notice-slot { display: flow-root; min-height: calc(clamp(80px,5cqh,96px)*var(--text-scale)); }
 .payment-notice-slot .cash-no-change { margin-block: 12px 0; }
}
@media screen {
 .main-content > .scan-screen { padding-top: 0; justify-content: flex-start; }
}
@media screen {
 body[data-textscale='1'] .category-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
 body[data-textscale='1'] .category-tabs .tab { min-width: 0; width: 100%; }
}

/* v0.8.2 — sculpted controls: gold action, pearl touch surface, ink utilities.
   Geometry and business-state selectors remain those of v0.8.1. */
@media screen {
 .kiosk,.dialog-backdrop,.toast {
  --control-surface: linear-gradient(145deg,#302743,#191528);
  --control-pearl: linear-gradient(155deg,#f8f5ff 0%,#e2dced 100%);
  --control-edge: #ffffffa8;
  --control-shadow: inset 0 1px 0 #fff,inset 0 -2px 0 #8b7d9b40,0 8px 20px #02010e30;
  --control-hover-shadow: inset 0 1px 0 #fff,0 10px 28px #02010e45;
  --control-primary-surface: linear-gradient(130deg,#ffe99b 0%,#ffd04c 48%,#ffb528 100%);
  --control-primary-shadow: inset 0 1px 0 #fff6d2,inset 0 -3px 0 #a96b1730,0 10px 30px #ffb82d28;
 }
 /* Primary actions read as a solid, tailored control with a dark directional medallion. */
 .btn-primary,.hero-actions .btn-primary,.login-panel .footer-actions .btn-primary {
  border-radius:24px; background:var(--control-primary-surface); border-color:#ffecaf;
  color:#251704; box-shadow:var(--control-primary-shadow); font-weight:750;
 }
 .btn-primary > svg { background:#2c210e; color:#ffe294; border-radius:50%; box-shadow:inset 0 1px 0 #ffffff20; }
 /* Secondary actions form a deliberately brighter second level against the cosmic canvas. */
 :is(.btn-secondary,.payment-method,.chip,.demo-button,.quantity-control button) {
  background:var(--control-pearl); color:#211831; border-color:var(--control-edge);
  box-shadow:var(--control-shadow); border-radius:20px; font-weight:650;
 }
 :is(.btn-secondary,.payment-method,.chip,.demo-button) > svg { color:#594174; }
 .btn-quiet { border-radius:20px; background:linear-gradient(145deg,#302743,#191528); border-color:#bda2df59; color:#eee6fc; box-shadow:inset 0 1px 0 #ffffff14,0 6px 20px #00000020; }
 .btn-quiet > svg { color:#ceb3f0; }
 /* Header stays dark and compact; luminous icon tiles give every utility an explicit target. */
 .kiosk .utility-button { border-radius:18px; background:linear-gradient(155deg,#322a44,#14121f); border-color:#b9a5d34f; color:#f7f2ff; box-shadow:inset 0 1px 0 #ffffff26,inset 0 -2px 0 #00000050,0 6px 18px #00000026; }
 .header-side .utility-button > svg { border-radius:9px; background:#b5ff2d; color:#182400; box-shadow:inset 0 1px 0 #e9ffc2; }
 /* Number keys are pearl ceramic; clear/delete remain quieter ink controls. */
 .key-button { border-radius:22px; background:linear-gradient(145deg,#fff 0%,#eee9f5 54%,#d8d0e4 100%); color:#21182e; border-color:#fff9; box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 #88769838,0 7px 18px #03000f40; font-weight:600; text-shadow:none; }
 .key-button-utility { background:linear-gradient(145deg,#302741,#191425); color:#e8dafb; border-color:#b99bd14d; box-shadow:inset 0 1px 0 #ffffff1a,0 5px 16px #00000026; }
 .key-button:active:not(:disabled) { background:#252035; color:#b5ff2d; border-color:#b5ff2d; box-shadow:inset 0 3px 8px #00000050; }
 /* The track is recessed; the selected segment is a solid brand-lime surface. */
 .category-tabs { border-radius:24px; background:#0d0a1de8; border-color:#d2b2fb30; box-shadow:inset 0 2px 8px #00000070,0 1px 0 #ffffff18; }
 .category-tabs .tab { border-radius:18px; color:#c8bddb; background:transparent; }
 :is(.btn,.utility-button,.tab,.payment-method,.toggle):is(.is-selected,.is-active,.active,[aria-pressed='true'],[aria-selected='true'],[aria-checked='true']):not(:disabled) {
  background:linear-gradient(135deg,#d6ff87,#b5f54b); color:#20300d; border-color:#e7ffb8;
  box-shadow:inset 0 1px 0 #f2ffdc,inset 0 -2px 0 #53771930,0 5px 20px #a0f33116;
 }
 :is(.tab,.payment-method,.toggle):is(.active,.is-active,[aria-pressed='true'],[aria-selected='true'],[aria-checked='true']) > svg { color:#29450b; }
 .toggle { background:#282136; color:#d7c9e9; border-color:#a28aba66; box-shadow:inset 0 1px 0 #ffffff14; }
 .quick-action { border-radius:22px; background:linear-gradient(140deg,#ede4ff,#d0bcea); border-color:#f2e8ff; color:#2b193d; box-shadow:inset 0 1px 0 #fff,0 8px 24px #03000d40; }
 .quick-action .balance-symbol { background:#342045; color:#e8d3ff; border-radius:12px; box-shadow:inset 0 1px 0 #ffffff26; }
 .quick-action .balance-arrow { color:#4b2e67; background:transparent; }
 .quick-action .balance-copy :is(strong,span) { color:inherit; }
 .product-card.premium { border-radius:26px; border-color:rgba(var(--premium-rgb),.52); background:radial-gradient(ellipse at 100% 0%,rgba(var(--premium-rgb),.16),transparent 60%),linear-gradient(155deg,#20182e,#0c0a1d); box-shadow:inset 0 1px 0 #ffffff2b,inset 0 0 0 5px #ffffff04,0 12px 30px #02000e40; }
 .product-card.premium.is-selected { border-color:#ceff72; box-shadow:inset 0 0 0 2px #b5ff2d,0 8px 26px #0a130333; }
 .product-badge { border-radius:10px; background:rgba(var(--premium-rgb),.15); border-color:rgba(var(--premium-rgb),.26); }
 :is(.btn-danger,.remove-button) { border-radius:16px; background:linear-gradient(145deg,#543046,#2c192c); color:#ffd8e2; border-color:#f5a4be66; box-shadow:inset 0 1px 0 #ffd4e41f,0 6px 16px #00000026; }
 .auth-secondary .btn { background:transparent; color:#e1d4f2; border-radius:16px; box-shadow:none; }
 /* Disabled and keyboard focus are independently recognizable; no motion is required. */
 :is(.btn,.utility-button,.tab,.payment-method,.toggle,.chip,.demo-button,.quantity-control button,.key-button,.quick-action):disabled,
 .login-panel .footer-actions .btn:disabled,.hero-actions .btn:disabled {
  background:#242031; color:#91879e; border-color:#b9a8c929; box-shadow:inset 0 1px 0 #ffffff08; transform:none;
 }
 .btn:disabled > svg { background:#ffffff08; color:#91879e; box-shadow:none; }
 @media (hover:hover) and (pointer:fine) {
  :is(.btn-secondary,.payment-method,.chip,.demo-button,.quantity-control button,.key-button):hover:not(:active):not(:disabled) { border-color:#fff; box-shadow:inset 0 1px 0 #fff,0 10px 28px #02010e50; }
  .key-button:not(.key-button-utility):hover:not(:active):not(:disabled) { background:linear-gradient(145deg,#fff,#eee8f7); color:#21182e; }
  .btn-primary:hover:not(:active):not(:disabled) { background:linear-gradient(130deg,#fff0b4,#ffda64 48%,#ffc143); border-color:#fff3ce; box-shadow:var(--control-primary-shadow),0 0 0 3px #ffd96312; }
  .kiosk .utility-button:hover:not(:active):not(:disabled) { background:linear-gradient(155deg,#423450,#201a2c); border-color:#d6bbed99; }
 }
}

/* v0.8.3 — neutral floating glass over the attract video. */
@media screen {
 .attract-prompt {
  inset-inline:auto; left:50%; transform:translateX(-50%);
  width:max-content; max-width:84%; min-height:80px; padding:20px 32px;
  border:1px solid rgba(255,255,255,.42); border-radius:999px;
  background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.055) 48%,rgba(0,0,0,.17));
  -webkit-backdrop-filter:blur(24px) saturate(1.15); backdrop-filter:blur(24px) saturate(1.15);
  color:#fff; font-weight:600; text-shadow:0 1px 5px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.10),0 12px 36px rgba(0,0,0,.22);
 }
 .attract-prompt > svg { flex:none; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
 .attract-surface:active:not(:disabled) .attract-prompt { background:rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 5px 18px rgba(0,0,0,.18); }
 @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .attract-prompt { background:rgba(20,20,22,.58); }
 }
}

/* v0.8.4 — locally bundled, variable bilingual typography. */
@font-face { font-family:'Babylon Rubik'; src:url('/assets/fonts/rubik-variable.ttf') format('truetype'); font-style:normal; font-weight:300 900; font-display:swap; }
@font-face { font-family:'Babylon Manrope'; src:url('/assets/fonts/manrope-variable.ttf') format('truetype'); font-style:normal; font-weight:200 800; font-display:swap; }
@media screen {
 :root { --font-family:'Babylon Rubik','Babylon Manrope','Segoe UI',Arial,sans-serif; }
 :root[lang='en'] { --font-family:'Babylon Manrope','Babylon Rubik','Segoe UI',Arial,sans-serif; }
 .kiosk,.dialog-backdrop,.toast { font-weight:400; font-kerning:normal; }
 .screen-heading h1,.login-panel .screen-heading h1 { font-weight:650; letter-spacing:-.025em; line-height:1.18; }
 :root[lang='he'] .screen-heading h1 { letter-spacing:-.02em; }
 h2,.campaign h2 { font-weight:600; letter-spacing:-.02em; }
 :is(.btn,.utility-button,.tab,.payment-method,.chip,.demo-button,.toggle,.balance-label) { font-weight:550; letter-spacing:-.015em; }
 .btn-primary,.hero-actions .btn-primary,.login-panel .footer-actions .btn-primary { font-weight:650; }
 .key-button:not(.key-button-utility),.otp-input,.account-pill bdi,.product-coins > strong,.product-price,.grand-total strong,[data-testid='total'],.cash-received > strong,.cash-metric strong,.quantity-control output {
  font-family:'Babylon Manrope','Babylon Rubik',sans-serif; font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.035em;
 }
 .key-button:not(.key-button-utility) { font-weight:600; }
 .otp-input { letter-spacing:.25em; }
 .account-pill bdi { letter-spacing:.015em; font-weight:650; }
 .product-coins > strong,.product-price,.grand-total strong,.cash-received > strong,.cash-metric strong { font-weight:750; }
 .product-badge { font-weight:500; letter-spacing:0; }
 .helper,.ownership-note,.screen-heading p { font-weight:400; }
 .attract-prompt { font-weight:500; letter-spacing:-.015em; }
 /* Leave room for the new font metrics in the fullest compact checkout. */
 @container kiosk (max-width:850px) { .review-screen .review-layout { row-gap:10px; } }
}

/* v0.9.0 — in-place card selection and editable cart quantities. */
@media screen {
 .inline-cards { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 20px;padding:22px 0;margin-top:20px;border-block:1px solid #d4bfff33; }
 .inline-card-label { display:flex;align-items:center;gap:14px;font-size:.85em; }
 .inline-card-label > svg { color:var(--color-brand-primary);width:30px;height:30px;flex:none; }
 .inline-card-label strong { font-weight:550; }
 .inline-card-label small { display:block;font-size:.8em;color:var(--color-text-secondary);margin-top:5px; }
 .inline-cards .quantity-control { gap:14px;margin:0; }
 .inline-cards .quantity-control button { width:64px;height:64px;border-radius:18px; }
 .inline-cards .quantity-control output { min-width:40px;font-size:calc(32px*var(--text-scale));font-weight:650; }
 .inline-card-total,.detail-other { display:flex;justify-content:space-between;align-items:baseline;gap:20px;font-size:.75em; }
 .inline-card-total { grid-column:1/-1;min-height:1.5em; }
 .inline-card-total strong { font-family:'Babylon Manrope','Babylon Rubik',sans-serif;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap; }
 .inline-card-total del { color:var(--color-text-secondary);font-size:.75em; }
 .detail-other { min-height:1.5em;margin-top:12px;color:var(--color-text-secondary); }
 .detail-screen .inline-cards { margin-top:10px; }
 .detail-screen .ownership-note { font-size:.65em;min-height:3.1em;margin-top:12px; }
 .detail-screen .detail-terms { font-size:.65em; }
 .detail-screen .detail-summary .product-price del { font-size:.6em;color:var(--color-text-secondary); }
 [data-screen='catalog'] .inline-cards { margin-top:16px; }
 [data-screen='catalog'] .catalog-tools { justify-content:center; }
 .review-screen .line-price { display:grid;grid-template-columns:auto 44px;gap:6px 10px;max-width:none;align-items:center;justify-items:end; }
 .review-screen .line-price .line-amount { grid-column:1;grid-row:1;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap; }
 .review-screen .line-price .line-amount del { color:var(--color-text-secondary);font-size:.6em; }
 .review-screen .line-price .line-amount strong { white-space:nowrap; }
 .review-screen .line-price .quantity-control { grid-column:1;grid-row:2;gap:6px;margin:0; }
 .review-screen .line-price .quantity-control button { width:44px;height:44px;min-width:44px;border-radius:14px; }
 .review-screen .line-price .quantity-control svg { width:18px;height:18px; }
 .review-screen .line-price .quantity-control output { min-width:28px;font-size:calc(22px*var(--text-scale));font-weight:650; }
 .review-screen .line-price .remove-button { grid-column:2;grid-row:1/3; }
 .review-screen .order-line { padding-block:16px; }
 @container kiosk (max-width:850px) {
  .main-content[data-screen="review"] { gap:20px; }
  .inline-cards { padding-block:14px;gap:10px; }
  .inline-cards .quantity-control { gap:10px; }
  .inline-cards .quantity-control button { width:52px;height:52px;min-width:52px; }
  .inline-cards .quantity-control output { min-width:32px;font-size:calc(28px*var(--text-scale)); }
  .review-screen .order-line { padding-block:6px; }
  .review-screen .line-copy small { font-size:.6em; }
  .review-screen .method-heading { margin:8px 0 12px; }
 }
 @container kiosk (max-width:550px) {
  .inline-cards .quantity-control button { width:44px;height:44px;min-width:44px; }
  .inline-card-label { gap:8px; }
  .inline-card-label > svg { width:24px;height:24px; }
  .review-screen .order-line { grid-template-columns:minmax(0,1fr) auto; }
  .review-screen .order-line > :is(img,svg) { display:none; }
 }
 body:not([data-textscale='1']) .inline-cards { grid-template-columns:minmax(0,1fr); }
 body:not([data-textscale='1']) .inline-cards .quantity-control { justify-content:flex-start; }
 body:not([data-textscale='1']) .review-screen .order-line { grid-template-columns:minmax(0,1fr); }
 body:not([data-textscale='1']) .review-screen .order-line > :is(img,svg) { display:none; }
 body:not([data-textscale='1']) .review-screen .line-price { justify-self:stretch;justify-content:space-between; }
}
@media screen {
 @container kiosk (min-width:900px) and (max-width:999px) {
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-grid { --catalog-row-height:330px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-card { padding:20px;row-gap:6px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-art img { width:75px;height:75px; }
 }
}

/* v0.9.1 — one row contract and one integrated quantity control. */
@media screen {
 .quantity-row { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 20px;padding:18px 0;margin:0;border:0;border-bottom:1px solid #d4bfff29;font-size:1em; }
 .quantity-row-label { display:flex;align-items:center;gap:12px;min-width:0; }
 .quantity-row-label > svg { width:26px;height:26px;flex:none;color:var(--color-brand-primary); }
 .quantity-row-label strong { display:block;font-size:.82em;font-weight:550;line-height:1.4; }
 .quantity-row-label small { display:block;margin-top:4px;font-size:.64em;font-weight:400;line-height:1.4;color:var(--color-text-secondary); }
 .quantity-row-total { grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:1.5em;font-size:.68em;color:var(--color-text-secondary); }
 .quantity-row-total strong { font-family:'Babylon Manrope','Babylon Rubik',sans-serif;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--color-text-primary); }
 .quantity-row-total del { font-size:.8em;color:var(--color-text-secondary); }
 .detail-screen .detail-quantity-slot { min-height:0;margin-top:12px; }
 .detail-quantity-slot .detail-quantity,.detail-screen .inline-cards { margin:0; }
 /* Specificity intentionally overrides all earlier per-screen stepper sizes. */
 .kiosk .quantity-control { --step-size:56px;display:inline-grid;grid-template-columns:var(--step-size) 48px var(--step-size);gap:0;align-items:center;justify-content:center;margin:0;padding:4px;border:1px solid #e7dafa38;border-radius:22px;background:linear-gradient(160deg,#332844ed,#171322f5);box-shadow:inset 0 1px 0 #ffffff12,0 6px 18px #02010e30; }
 .kiosk .quantity-control button { width:var(--step-size);height:var(--step-size);min-width:var(--step-size);padding:0;border:1px solid transparent;border-radius:17px;background:linear-gradient(145deg,#ffffff12,#ffffff06);box-shadow:none;color:#f8f5ff;transform:none; }
 .kiosk .quantity-control button svg { width:20px;height:20px;stroke-width:1.8; }
 .kiosk .quantity-control output { min-width:0;width:100%;font-size:calc(28px * var(--text-scale));line-height:1.2;font-weight:600;letter-spacing:0;text-align:center; }
 .kiosk .quantity-control button:disabled { background:transparent;border-color:transparent;box-shadow:none;color:#a69bb980; }
 .kiosk .quantity-control button:active:not(:disabled) { background:#d2ffa92b;border-color:#c9ff8c66;box-shadow:inset 0 1px 5px #0005;transform:none; }
 .kiosk .quantity-control button:focus-visible { outline:2px solid var(--color-brand-primary);outline-offset:1px; }
 .kiosk .review-screen .quantity-control { --step-size:44px;grid-template-columns:var(--step-size) 36px var(--step-size);padding:1px;border-radius:18px; }
 .kiosk .review-screen .quantity-control button { border-radius:14px; }
 .kiosk .review-screen .quantity-control output { font-size:calc(22px * var(--text-scale)); }
 @media (hover:hover) { .kiosk .quantity-control button:hover:not(:active):not(:disabled) { background:#ffffff20;border-color:#ffffff30;box-shadow:none;color:#fff; } }
 @container kiosk (max-width:850px) {
  .quantity-row { padding-block:14px;gap:9px 12px; }
  .kiosk .quantity-control { --step-size:48px;grid-template-columns:var(--step-size) 40px var(--step-size);border-radius:20px; }
  .kiosk .quantity-control button { border-radius:15px; }
  .kiosk .quantity-control output { font-size:calc(26px * var(--text-scale)); }
 }
 @container kiosk (max-width:550px) {
  .quantity-row-label { gap:8px; }
  .quantity-row-label > svg { width:22px;height:22px; }
  .kiosk .quantity-control { --step-size:44px;grid-template-columns:var(--step-size) 36px var(--step-size); }
 }
 body:not([data-textscale='1']) .quantity-row { grid-template-columns:minmax(0,1fr); }
 body:not([data-textscale='1']) .quantity-row .quantity-control { justify-self:start; }
}

/* v0.9.2 — catalog content fits the portrait preview; no campaign panel. */
@media screen {
 .main-content[data-screen='catalog'] .catalog-tools { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center; }
 .main-content[data-screen='catalog'] .catalog-tools .coupon-result { margin:0;padding:6px 8px;font-size:.68em;line-height:1.3;gap:8px; }
 .main-content[data-screen='catalog'] .catalog-tools .coupon-result p { margin:3px 0 0; }
 .main-content[data-screen='catalog'] .catalog-tools .coupon-result svg { width:20px;height:20px;flex:none; }
 @container kiosk (max-width:700px) {
  body[data-textscale='1'] .kiosk .main-content[data-screen='catalog'] { --scene-top:20px;gap:12px;padding-bottom:12px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-grid.has-five { --catalog-row-height:128px;gap:12px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-grid.has-five .product-card { padding:6px;gap:2px 6px;grid-template-columns:42px minmax(0,1fr); }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-grid.has-five .product-art img { width:42px;height:42px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-grid.has-five .product-coins strong { font-size:28px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .product-grid.has-five .product-price { font-size:22px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .app-footer.has-sides { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;padding:12px 0 0; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .footer-actions { grid-column:2;grid-row:1; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .footer-summary { grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;gap:2px;font-size:12px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .footer-summary strong { font-size:24px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .footer-cart { grid-column:3;grid-row:1;min-width:0;padding:8px;font-size:13px;gap:6px; }
  body[data-textscale='1'] .main-content[data-screen='catalog'] .footer-actions .btn { min-height:56px;min-width:0;font-size:14px;padding:12px; }
 }
 body:not([data-textscale='1']) .main-content[data-screen='catalog'] .catalog-tools { grid-template-columns:minmax(0,1fr); }
}

/* v0.9.3 — separate item price from quantity and removal. */
@media screen {
 .review-screen .order-line.is-editable { grid-template-columns:52px minmax(0,1fr) auto;align-items:start;column-gap:14px;row-gap:12px;padding:18px 0; }
 .review-screen .order-line.is-editable > :is(img,svg) { grid-column:1;grid-row:1;width:48px;height:48px;align-self:center; }
 .review-screen .is-editable .line-copy { grid-column:2;grid-row:1; }
 .review-screen .is-editable .line-price { grid-column:3;grid-row:1;display:block;align-self:start;max-width:none;margin:0;padding:0;white-space:nowrap; }
 .review-screen .is-editable .line-price .line-amount { display:flex;flex-direction:column;align-items:flex-end;gap:3px;line-height:1.35; }
 .review-screen .is-editable .line-price strong { font-family:'Babylon Manrope','Babylon Rubik',sans-serif;font-size:.95em;font-weight:700;letter-spacing:-.02em; }
 .review-screen .line-controls { grid-column:2/-1;display:flex;align-items:center;justify-content:space-between;gap:20px; }
 .review-screen .line-controls .remove-button { display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;min-width:76px;height:44px;padding:8px 10px;margin:0;border:1px solid transparent;border-radius:12px;background:transparent;box-shadow:none;color:#c5b9d4;font-size:.65em;font-weight:400; }
 .review-screen .line-controls .remove-button svg { width:18px;height:18px; }
 .review-screen .line-controls .remove-button:active:not(:disabled) { background:#ffb8cc12;color:#ffd7e1;box-shadow:none; }
 @media (hover:hover) { .review-screen .line-controls .remove-button:hover:not(:active):not(:disabled) { background:#ffb8cc0c;border-color:#f5a4be38;color:#ffd7e1;box-shadow:none; } }
 @container kiosk (max-width:850px) {
  .review-screen .order-line.is-editable { grid-template-columns:40px minmax(0,1fr) auto;column-gap:10px;row-gap:8px;padding:6px 0; }
  .review-screen .order-line.is-editable > :is(img,svg) { width:36px;height:36px; }
 }
 @container kiosk (max-width:550px) {
  .review-screen .order-line.is-editable { grid-template-columns:minmax(0,1fr) auto; }
  .review-screen .order-line.is-editable > :is(img,svg) { display:none; }
  .review-screen .is-editable .line-copy { grid-column:1; }
  .review-screen .is-editable .line-price { grid-column:2; }
  .review-screen .line-controls { grid-column:1/-1; }
 }
 body:not([data-textscale='1']) .review-screen .order-line.is-editable { grid-template-columns:minmax(0,1fr); }
 body:not([data-textscale='1']) .review-screen .is-editable .line-copy { grid-column:1;grid-row:1; }
 body:not([data-textscale='1']) .review-screen .is-editable .line-price { grid-column:1;grid-row:2;justify-self:start; }
 body:not([data-textscale='1']) .review-screen .line-controls { grid-column:1;grid-row:3;flex-wrap:wrap; }
}

@media screen {
 .review-screen .review-extras:has(.coupon-result) { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px; }
 .review-screen .review-extras .coupon-result { margin:0;padding:10px 12px;font-size:.65em;line-height:1.4; }
 .review-screen .review-extras .coupon-result p { margin-top:4px; }
 body:not([data-textscale='1']) .review-screen .review-extras:has(.coupon-result) { grid-template-columns:minmax(0,1fr); }
}
@media screen {
 @container kiosk (max-width:550px) {
  body[data-textscale='1'] .main-content[data-screen='review'] { gap:12px; }
 }
}

/* v0.9.4 — persistent shopping bar outside the scrolling content. */
@media screen {
 .kiosk.has-pinned-footer { overflow:hidden; }
 .kiosk.has-pinned-footer > .main-content { flex:1 1 0;min-height:0;height:auto;overflow-y:auto;overflow-x:hidden;padding-bottom:24px; }
 .kiosk > .purchase-footer.app-footer.has-sides { position:relative;flex:0 0 auto;width:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;margin:0;padding:12px var(--kiosk-gutter) max(12px,env(safe-area-inset-bottom));border-top:1px solid #dbc8ff29;background:linear-gradient(160deg,#181126f5,#0c0919fa);box-shadow:0 -8px 30px #02010e40;backdrop-filter:blur(20px); }
 .kiosk > .purchase-footer .footer-summary { grid-column:1;grid-row:1;justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;font-size:calc(12px * var(--text-scale));line-height:1.3; }
 .kiosk > .purchase-footer .footer-summary strong { font-size:calc(clamp(24px,3cqw,32px) * var(--text-scale));line-height:1.2;white-space:nowrap; }
 .kiosk > .purchase-footer .footer-actions { grid-column:2;grid-row:1;justify-self:center;width:auto;max-width:100%;flex-wrap:nowrap; }
 .kiosk > .purchase-footer .footer-actions .btn { min-width:0;min-height:56px;padding:12px 20px;font-size:calc(clamp(14px,1.85cqw,20px) * var(--text-scale));border-radius:20px;margin:0;gap:10px; }
 .kiosk > .purchase-footer .footer-actions .btn > svg { width:22px;height:22px; }
 .kiosk > .purchase-footer .footer-cart { grid-column:3;grid-row:1;justify-self:end;min-width:0;min-height:48px;padding:8px 12px;gap:7px;font-size:calc(14px * var(--text-scale));border-radius:17px; }
 .kiosk > .purchase-footer .footer-cart svg { width:21px;height:21px; }
 .kiosk > .purchase-footer .cart-count { min-width:24px;height:24px; }
 .detail-browse-action { display:flex;justify-content:center;margin-top:12px; }
 .detail-browse-action .btn { min-height:56px;padding:12px 20px;font-size:.75em; }
 @container kiosk (max-width:600px) {
  .kiosk > .purchase-footer.app-footer.has-sides { gap:8px;padding-inline:20px; }
  .kiosk > .purchase-footer .footer-actions .btn { padding-inline:12px; }
  .kiosk > .purchase-footer .footer-cart { padding-inline:8px;font-size:calc(13px * var(--text-scale));gap:5px; }
 }
 /* Readable accessibility reflow keeps the action pinned, rather than shrinking type. */
 body:not([data-textscale='1']) .kiosk > .purchase-footer.app-footer.has-sides { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body:not([data-textscale='1']) .kiosk > .purchase-footer .footer-cart { grid-column:2;grid-row:1; }
 body:not([data-textscale='1']) .kiosk > .purchase-footer .footer-actions { grid-column:1/-1;grid-row:2; }
}

/* ===== v0.10.0 / CHG-20261006-007 =====
   Pinned purchase footer: twice the earlier 81px bar, fixed physical order
   primary (left) | cart | total (right) in both text directions. */
.kiosk > .purchase-footer.app-footer.has-sides { direction:ltr;box-sizing:border-box;min-height:162px;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;padding:24px var(--kiosk-gutter) max(25px,env(safe-area-inset-bottom)); }
.kiosk > .purchase-footer > * { direction:ltr; }
html[dir='rtl'] .kiosk > .purchase-footer > * { direction:rtl; }
.kiosk > .purchase-footer .footer-actions { grid-column:1;grid-row:1;justify-self:start; }
.kiosk > .purchase-footer .footer-actions .btn { min-height:112px;min-width:clamp(180px,31cqw,360px);padding:20px clamp(18px,3cqw,36px);font-size:calc(clamp(21px,3.1cqw,34px) * var(--text-scale));border-radius:32px;gap:14px; }
.kiosk > .purchase-footer .footer-actions .btn > svg { width:clamp(24px,3cqw,34px);height:clamp(24px,3cqw,34px); }
.kiosk > .purchase-footer .footer-cart { grid-column:2;grid-row:1;justify-self:center;min-height:88px;padding:14px clamp(12px,2cqw,24px);gap:10px;font-size:calc(clamp(15px,2.1cqw,23px) * var(--text-scale));border-radius:26px; }
.kiosk > .purchase-footer .footer-cart svg { width:clamp(24px,2.8cqw,32px);height:clamp(24px,2.8cqw,32px); }
.kiosk > .purchase-footer .cart-count { min-width:clamp(28px,3.2cqw,38px);height:clamp(28px,3.2cqw,38px);font-size:.9em; }
.kiosk > .purchase-footer .footer-summary { grid-column:3;grid-row:1;justify-self:end;align-items:flex-end;gap:4px;font-size:calc(clamp(13px,1.7cqw,18px) * var(--text-scale)); }
.kiosk > .purchase-footer .footer-summary strong { font-size:calc(clamp(34px,5.4cqw,58px) * var(--text-scale));line-height:1.1; }
/* The primary action is always the yellow one. Disabled keeps the family, clearly muted. */
.kiosk > .purchase-footer .footer-actions .btn.btn-primary:disabled { background:var(--control-primary-surface);border-color:rgba(255,242,199,.45);color:#3d2d0c;box-shadow:none;opacity:1;filter:saturate(.5) brightness(.58); }
body:not([data-textscale='1']) .kiosk > .purchase-footer.app-footer.has-sides { grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px; }
body:not([data-textscale='1']) .kiosk > .purchase-footer .footer-cart { grid-column:1;grid-row:1;justify-self:start; }
body:not([data-textscale='1']) .kiosk > .purchase-footer .footer-summary { grid-column:2;grid-row:1; }
body:not([data-textscale='1']) .kiosk > .purchase-footer .footer-actions { grid-column:1/-1;grid-row:2;justify-self:stretch;width:100%; }
body:not([data-textscale='1']) .kiosk > .purchase-footer .footer-actions .btn { width:100%;min-height:96px; }
@container kiosk (max-width:600px) {
 .kiosk > .purchase-footer.app-footer.has-sides { gap:10px;padding-inline:16px; }
 .kiosk > .purchase-footer .footer-actions .btn { min-width:0;padding-inline:16px; }
}
/* Welcome: two equal secondary actions under Start. */
.quick-actions { display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.2cqh,22px); }
/* Catalog: the real Babylon Park card as its own product. */
.product-card.card-product .product-art img,.detail-card .detail-art > img,.access-art img,.collect-item img { object-fit:contain;border-radius:0; }
.product-card.card-product .product-art img { width:auto;aspect-ratio:720/451;filter:drop-shadow(0 6px 12px #0006); }
.product-card.card-product .product-coins strong { font-size:calc(clamp(24px,3.6cqw,40px) * var(--text-scale)); }
/* Detail: unit price stays the price of one unit. */
.detail-screen .product-price .unit-label { margin-inline-start:.45em;font-size:.42em;font-weight:500;color:var(--color-text-secondary);white-space:nowrap; }
.detail-card .detail-art > img { width:100%;height:auto;max-height:100%;aspect-ratio:720/451;filter:drop-shadow(0 12px 22px #0007); }
.detail-screen .detail-browse-action { margin-top:clamp(14px,1.6cqh,28px); }
.detail-screen .detail-browse-action .btn { min-width:clamp(200px,40cqw,420px);min-height:clamp(64px,5.4cqh,96px);font-size:calc(clamp(20px,2.8cqw,30px) * var(--text-scale));border-radius:28px;gap:10px; }
.detail-screen .detail-browse-action .btn > svg { width:1.1em;height:1.1em; }
/* Unlimited: one included access medium per play pass. */
.access-chooser { margin-top:clamp(10px,1.2cqh,20px);padding-block:clamp(12px,1.3cqh,22px);border-bottom:1px solid #d4bfff29; }
.access-chooser-head { display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;margin-bottom:clamp(10px,1cqh,18px); }
.access-chooser-head strong { font-size:.82em;font-weight:650; }
.access-chooser-head small { font-size:.62em;color:var(--color-text-secondary); }
.access-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6cqw,20px); }
.access-option { position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:clamp(10px,1.6cqw,18px);min-height:clamp(96px,8cqh,150px);padding:clamp(12px,1.6cqw,20px);border-radius:24px;border:2px solid #d4bfff40;background:linear-gradient(155deg,#241b36,#100d22);color:inherit;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s; }
.access-option .access-art { grid-row:1/3;display:grid;place-items:center;width:clamp(64px,10cqw,112px);height:clamp(56px,8cqw,96px); }
.access-option .access-art img { width:100%;height:100%;filter:drop-shadow(0 6px 10px #0007); }
.access-option strong { align-self:end;font-size:.86em;font-weight:650; }
.access-option small { align-self:start;font-size:.6em;color:var(--color-text-secondary); }
.access-option .access-check { position:absolute;inset-block-start:10px;inset-inline-end:10px;display:none;width:28px;height:28px;border-radius:50%;place-items:center;background:#b5ff2d;color:#14210a; }
.access-option .access-check svg { width:18px;height:18px; }
.access-option.is-selected { border-color:#ceff72;box-shadow:inset 0 0 0 2px #b5ff2d,0 8px 26px #0a130333; }
.access-option.is-selected .access-check { display:grid; }
.access-option:active { transform:scale(.985); }
.access-option:focus-visible { outline:3px solid #fff;outline-offset:3px; }
body[data-reduced-motion='true'] .access-option { transition:none; }
body[data-reduced-motion='true'] .access-option:active { transform:none; }
@media (prefers-reduced-motion:reduce) { .access-option { transition:none; } .access-option:active { transform:none; } }
body:not([data-textscale='1']) .access-options { grid-template-columns:minmax(0,1fr); }
.order-line .line-access { color:#d9ffa0; }
/* Collection: what is being issued, by kind. */
.collect-items { display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2.4cqw,36px);margin-block:clamp(16px,2cqh,36px); }
.collect-item { display:grid;justify-items:center;gap:8px;min-width:clamp(140px,26cqw,280px);padding:clamp(14px,2cqw,26px);border-radius:26px;border:1px solid #d4bfff33;background:linear-gradient(155deg,#241b36,#100d22); }
.collect-item img { width:clamp(110px,20cqw,220px);height:clamp(80px,13cqw,150px);filter:drop-shadow(0 10px 18px #0007); }
.collect-item strong { font-size:1.2em;font-weight:650; }
.collect-item small { font-size:.62em;color:var(--color-text-secondary);text-align:center; }
/* Dialogs. */
.idle-countdown { margin-top:12px;font-size:1.25em;font-weight:650;font-variant-numeric:tabular-nums;color:#ffe08a; }
.pay-confirm-text { font-size:1.05em;line-height:1.5; }
.pay-confirm-text strong { white-space:nowrap;color:#ffe08a; }
.coupon-result.is-pending { border-color:#ffe08a66; }
.coupon-result.is-pending > svg { color:#ffe08a; }
.quick-actions { display:grid;grid-template-columns:minmax(0,1fr);justify-items:stretch;width:fit-content;max-width:100%;margin-inline:auto; }
.quick-actions .quick-action { width:100%; }
body:not([data-textscale='1']) .kiosk.has-pinned-footer > .purchase-footer .footer-actions { display:flex;justify-content:stretch;justify-self:stretch;width:100%;max-width:none; }
body:not([data-textscale='1']) .kiosk.has-pinned-footer > .purchase-footer .footer-actions .btn { flex:1 1 100%;width:100%;max-width:none; }

/* ===== v0.11.0 / CHG-20261007-001: customer-only status lines that replace in-frame simulation controls ===== */
.terminal-wait,.cash-insert-hint,.print-status { display:flex;align-items:center;justify-content:center;gap:12px;margin:clamp(14px,1.6cqh,28px) auto;max-width:min(100%,760px);color:var(--color-text-secondary);font-size:.8em;line-height:1.45;text-align:center; }
.terminal-wait .spinner { position:static;flex:0 0 auto;width:1.4em;height:1.4em; }
.cash-insert-hint > svg,.print-status > svg { flex:0 0 auto;width:1.5em;height:1.5em;color:var(--color-brand-primary); }
.print-status { padding:clamp(12px,1.4cqh,20px) clamp(14px,2cqw,24px);border:1px solid #d4bfff33;border-radius:20px;background:#ffffff0a;color:var(--color-text-primary); }

/* ===== v0.12.0 / CHG-20261007-002 =====
   Customer strip under the header: identity at the physical right, account balance at the physical left,
   one fixed height. Rows are fixed tracks so a name, balance, language or state change moves nothing. */
.kiosk > .session-strip { display:block;box-sizing:border-box;min-height:0;padding:clamp(4px,.42cqh,8px) var(--kiosk-gutter);background:transparent; }
.customer-strip { --strip-small:calc(clamp(11px,1.75cqw,19px) * var(--text-scale));--strip-main:calc(clamp(16px,2.9cqw,31px) * var(--text-scale));--strip-small-row:calc(var(--strip-small) * 1.38);--strip-main-row:calc(var(--strip-main) * 1.26);direction:ltr;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,5cqw,56px);height:calc(clamp(60px,6.25cqh,120px) * var(--text-scale));padding:0 clamp(14px,2.6cqw,30px);border:1px solid rgba(186,202,255,.17);border-radius:clamp(14px,2.2cqw,26px);background:rgba(13,18,48,.6);overflow:hidden; }
.customer-balance,.customer-identity-copy { direction:ltr;display:grid;grid-template-rows:var(--strip-small-row) var(--strip-main-row) var(--strip-small-row);align-items:center;min-width:0; }
.customer-balance { flex:0 0 auto;justify-items:start; }
.customer-balance > small { grid-row:1;color:var(--color-text-secondary);font-size:var(--strip-small);font-weight:500;line-height:1;white-space:nowrap; }
.customer-balance > strong { grid-row:2;display:inline-flex;align-items:center;gap:.36em;color:#fff;font-size:var(--strip-main);font-weight:700;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums; }
.customer-balance > strong > svg { flex:0 0 auto;width:.92em;height:.92em;color:var(--color-brand-primary); }
.customer-balance-number { font-family:var(--font-numeric,inherit);font-variant-numeric:tabular-nums; }
.customer-balance[data-balance-state='loading'] > strong,.customer-balance[data-balance-state='unavailable'] > strong { color:var(--color-text-secondary);font-weight:500;font-size:calc(var(--strip-main) * .78); }
.customer-balance[data-balance-state='loading'] > strong > svg,.customer-balance[data-balance-state='unavailable'] > strong > svg { color:currentColor;opacity:.55; }
.customer-balance[data-balance-state='unavailable'] > strong { font-style:italic; }
.customer-balance[data-balance-state='loading'] > strong { animation:customer-balance-wait 1.4s ease-in-out infinite; }
@keyframes customer-balance-wait { 50% { opacity:.45; } }
body[data-reduced-motion='true'] .customer-balance[data-balance-state='loading'] > strong { animation:none; }
.customer-identity { direction:ltr;display:flex;align-items:center;justify-content:flex-end;gap:clamp(8px,1.5cqw,16px);flex:1 1 0;min-width:0; }
.customer-identity-copy { justify-items:end;flex:0 1 auto; }
.customer-greeting { grid-row:2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:var(--strip-main);font-weight:700;line-height:1.2;letter-spacing:-.01em; }
.customer-phone { grid-row:3;color:var(--color-text-secondary);font-size:var(--strip-small);font-weight:500;line-height:1;letter-spacing:.04em;white-space:nowrap;font-variant-numeric:tabular-nums; }
.customer-phone.is-missing { letter-spacing:0; }
.customer-avatar { flex:0 0 auto;display:grid;place-items:center;width:calc(clamp(30px,4.8cqw,52px) * var(--text-scale));height:calc(clamp(30px,4.8cqw,52px) * var(--text-scale));border:1.5px solid rgba(226,232,255,.5);border-radius:50%;color:#e9edff; }
.customer-avatar > svg { width:56%;height:56%; }
html[dir='rtl'] .customer-balance > :is(small,strong),html[dir='rtl'] .customer-greeting { direction:rtl; }
@media print { .kiosk > .session-strip { display:none; } }

/* Pinned purchase footer: Cart and the purchase action share one footprint. Neither is sized by its
   label, the cart count or the screen. The arrow has its own slot so the label centres in the whole button. */
.kiosk > .purchase-footer.app-footer.has-sides { --footer-button-w:clamp(160px,30cqw,324px);--footer-button-h:88px;--footer-arrow:clamp(24px,3.1cqw,34px);--footer-arrow-slot:clamp(36px,5.2cqw,58px); }
/* Fixed tracks: the cart never moves when the total gains or loses a digit. */
body[data-textscale='1'] .kiosk > .purchase-footer.app-footer.has-sides { grid-template-columns:var(--footer-button-w) var(--footer-button-w) minmax(0,1fr);column-gap:clamp(10px,2.6cqw,28px); }
body[data-textscale='1'] .kiosk > .purchase-footer .footer-cart { justify-self:start; }
.kiosk > .purchase-footer .footer-summary { min-width:0;white-space:nowrap; }
.kiosk > .purchase-footer .footer-actions { display:flex; }
.kiosk > .purchase-footer .footer-actions .btn,.kiosk > .purchase-footer .footer-cart { box-sizing:border-box;flex:0 0 auto;width:var(--footer-button-w);min-width:var(--footer-button-w);max-width:var(--footer-button-w);height:var(--footer-button-h);min-height:var(--footer-button-h);max-height:var(--footer-button-h);border-radius:26px;overflow:hidden; }
.kiosk > .purchase-footer .footer-actions .btn { position:relative;justify-content:center;padding:6px var(--footer-arrow-slot);font-size:calc(clamp(16px,2.6cqw,28px) * var(--text-scale));line-height:1.16;text-align:center;text-wrap:balance;overflow-wrap:normal; }
.kiosk > .purchase-footer .footer-actions .btn > svg { position:absolute;top:50%;inset-inline-end:calc((var(--footer-arrow-slot) - var(--footer-arrow)) / 2 + 2px);width:var(--footer-arrow);height:var(--footer-arrow);margin-top:calc(var(--footer-arrow) / -2);padding:calc(var(--footer-arrow) * .2); }
.kiosk > .purchase-footer .footer-cart { justify-content:center;padding:8px clamp(8px,1.6cqw,18px); }
.kiosk > .purchase-footer .cart-count { flex:0 0 auto;width:clamp(28px,3.2cqw,38px);font-variant-numeric:tabular-nums; }
/* Enlarged text: total on its own row, then the two buttons side by side, still one size. */
body:not([data-textscale='1']) .kiosk > .purchase-footer.app-footer.has-sides { --footer-button-w:100%;--footer-button-h:100%;grid-template-columns:repeat(2,minmax(0,1fr)); }
body:not([data-textscale='1']) .kiosk > .purchase-footer .footer-summary { grid-column:1/-1;grid-row:1;justify-self:end; }
body:not([data-textscale='1']) .kiosk > .purchase-footer .footer-actions { grid-column:1;grid-row:2;justify-self:stretch;align-self:stretch;width:100%; }
body:not([data-textscale='1']) .kiosk > .purchase-footer .footer-cart { grid-column:2;grid-row:2;justify-self:stretch;align-self:stretch; }
body:not([data-textscale='1']) .kiosk > .purchase-footer .footer-actions .btn,body:not([data-textscale='1']) .kiosk > .purchase-footer .footer-cart { min-width:0;max-width:none;min-height:96px;max-height:none; }
/* The taller strip takes its room from the empty band above the screen content, not from the content. */
@media screen { .kiosk:has(> .session-strip) { --scene-top:clamp(8px,calc(5.2cqh - 37px),40px); } }
@container kiosk (max-width:700px) { body[data-textscale='1'] .kiosk:has(> .session-strip) .main-content[data-screen='catalog'] { --scene-top:clamp(8px,calc(5.2cqh - 37px),20px); } }

/* ===== v0.13.0 / CHG-20261007-003 =====
   Product detail: what Add will put in the cart and what it costs, grouped with the Add button and
   anchored to the bottom of the content for every product type. */
.kiosk.has-pinned-footer > .main-content > .detail-screen { display:flex;flex-direction:column;flex:1 0 auto;min-height:0; }
.selection-summary { display:grid;gap:clamp(6px,.75cqh,14px);margin-top:auto;padding-top:clamp(12px,1.5cqh,28px);border-top:1px solid rgba(214,200,255,.2); }
.detail-screen > .detail-terms { margin-bottom:clamp(10px,1.2cqh,24px); }
.selection-label { color:var(--color-text-secondary);font-size:calc(clamp(13px,1.9cqw,20px) * var(--text-scale));font-weight:500;line-height:1.3;text-align:start; }
.selection-row { direction:ltr;display:flex;align-items:baseline;justify-content:space-between;gap:clamp(12px,3cqw,32px); }
.selection-row > * { direction:ltr; }
html[dir='rtl'] .selection-row > * { direction:rtl; }
.selection-subtotal { order:1;flex:0 0 auto;color:#fff;font-family:'Babylon Manrope','Babylon Rubik',sans-serif;font-size:calc(clamp(26px,4.3cqw,46px) * var(--text-scale));font-weight:800;line-height:1.1;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums; }
.selection-description { order:2;min-width:0;color:#ece6fb;font-size:calc(clamp(14px,2.15cqw,23px) * var(--text-scale));font-weight:500;line-height:1.3;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums; }
.selection-qualifier { color:var(--color-text-secondary);font-size:calc(clamp(11px,1.6cqw,17px) * var(--text-scale));line-height:1.3;text-align:start; }
.selection-summary > .btn { width:100%;min-height:clamp(60px,5cqh,96px);margin-top:clamp(4px,.6cqh,12px);justify-content:center;font-size:calc(clamp(20px,2.8cqw,30px) * var(--text-scale));border-radius:clamp(20px,2.6cqw,28px); }

/* Balance scan: the attract start control, reused as a floating Back. Anchored to the 9:16 frame. */
.floating-back { position:fixed;display:grid;place-items:center;font-family:inherit;cursor:pointer;appearance:none;z-index:3; }
.floating-back > span { grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:18px;white-space:nowrap; }
.floating-back > .floating-sizer { visibility:hidden; }
.floating-back svg { flex:none;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.floating-back:active { background:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 5px 18px rgba(0,0,0,.18); }
.floating-back:focus-visible { outline:3px solid var(--color-brand-primary);outline-offset:5px; }
body[data-textscale='2'] .floating-back > span { white-space:normal;flex-wrap:wrap; }
@media print { .floating-back { display:none; } }

/* Shared header controls: one glass surface, the icon drawn directly on it in brand lime. */
.kiosk .header-side .utility-button { border:1px solid rgba(230,224,255,.2);border-radius:18px;background:linear-gradient(180deg,rgba(40,34,66,.6),rgba(16,14,32,.7));color:#f4f0ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 3px 10px rgba(0,0,0,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color 140ms ease-out,border-color 140ms ease-out,box-shadow 140ms ease-out; }
.kiosk .header-side .utility-button > svg { padding:2px;border-radius:0;background:none;box-shadow:none;color:var(--color-brand-primary);stroke-width:2; }
.kiosk .header-side .utility-button:active:not(:disabled) { transform:none;background:linear-gradient(180deg,rgba(64,56,96,.72),rgba(30,26,52,.8));border-color:rgba(236,230,255,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 4px rgba(0,0,0,.2); }
.kiosk .header-side .utility-button:disabled { background:linear-gradient(180deg,rgba(34,30,52,.45),rgba(16,14,30,.55));border-color:rgba(230,224,255,.1);color:rgba(236,230,250,.42);box-shadow:none; }
.kiosk .header-side .utility-button:disabled > svg { color:rgba(210,220,190,.38); }
@media (hover:hover) { .kiosk .header-side .utility-button:hover:not(:active):not(:disabled) { background:linear-gradient(180deg,rgba(50,43,80,.66),rgba(20,18,38,.74));border-color:rgba(236,230,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 3px 10px rgba(0,0,0,.2); } }
body[data-reduced-motion='true'] .kiosk .header-side .utility-button { transition:none; }
.kiosk.has-pinned-footer > .main-content[data-screen='detail'] { display:flex;flex-direction:column; }
/* Small preview frames: artwork and spacing give way first so the summary and Add stay on screen. */
@container kiosk (max-width:600px) {
 body[data-textscale='1'] .main-content[data-screen='detail'] { padding-bottom:12px; }
 body[data-textscale='1'] .detail-screen .screen-heading { margin-bottom:8px; }
 body[data-textscale='1'] .detail-screen .screen-heading h1 { font-size:26px; }
 body[data-textscale='1'] .detail-screen .detail-summary { min-height:0;padding:10px 16px;gap:12px; }
 body[data-textscale='1'] .detail-screen .detail-art img { max-height:92px;width:auto; }
 body[data-textscale='1'] .detail-screen .detail-breakdown { margin-top:6px; }
 body[data-textscale='1'] .detail-screen .product-price { margin-top:6px;padding-top:6px; }
 body[data-textscale='1'] .detail-screen .detail-quantity-slot { margin-top:8px; }
 body[data-textscale='1'] .detail-screen .quantity-row { padding-block:8px; }
 body[data-textscale='1'] .detail-screen .access-chooser { margin-top:6px;padding-block:6px;gap:6px; }
 body[data-textscale='1'] .detail-screen .access-option { min-height:60px;padding:6px 10px; }
 body[data-textscale='1'] .detail-screen .access-art img { max-height:44px;width:auto; }
 body[data-textscale='1'] .detail-screen .ownership-note { min-height:0;margin-top:6px; }
 body[data-textscale='1'] .detail-screen .detail-terms { min-height:0;margin:2px 0 6px; }
 body[data-textscale='1'] .selection-summary { gap:3px;padding-top:8px; }
 body[data-textscale='1'] .selection-summary > .btn { min-height:56px;margin-top:4px; }
}

/* ===== v0.14.0 / CHG-20261008-001 =====
   Purchase summary: the total and the payment choice are pinned above the footer and always visible.
   Only the list of cart items scrolls. (200% text keeps the whole page scrolling so nothing is squeezed.) */
body:not([data-textscale='2']) .kiosk.has-pinned-footer > .main-content[data-screen='review'] { display:flex;flex-direction:column;overflow:hidden;padding-bottom:clamp(10px,1.2cqh,24px); }
body:not([data-textscale='2']) .main-content[data-screen='review'] > .review-screen { display:flex;flex-direction:column;flex:1 1 0;min-height:0;width:100%; }
body:not([data-textscale='2']) .main-content[data-screen='review'] .review-layout { flex:1 1 0;min-height:0;gap:0; }
body:not([data-textscale='2']) .main-content[data-screen='review'] .review-items { flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(181,255,45,.5) rgba(11,9,35,.5);padding-inline-end:4px;outline:none; }
body:not([data-textscale='2']) .main-content[data-screen='review'] .review-pay { flex:0 0 auto;padding-top:clamp(8px,1cqh,18px);border-top:1px solid rgba(214,200,255,.22);box-shadow:0 -14px 22px -18px rgba(0,0,0,.75); }

/* ===== v0.15.0 / CHG-20261008-002 =====
   "Added to cart": one centred, non-interactive toast in the 9:16 frame. No dimming, no pointer capture. */
.cart-toast { position:fixed;z-index:130;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:clamp(8px,1.4cqw,16px);max-width:84cqw;padding:clamp(12px,1.5cqh,24px) clamp(18px,3cqw,36px);border:1px solid rgba(232,226,255,.24);border-radius:clamp(16px,2.4cqw,28px);background:rgba(18,15,38,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.34);color:#fff;font:600 calc(clamp(17px,2.9cqw,32px) * var(--text-scale))/1.25 var(--font-family);white-space:nowrap;pointer-events:none;user-select:none;cursor:default;animation:cart-toast-in 180ms ease-out both; }
.cart-toast > svg { flex:none;width:1.15em;height:1.15em;padding:.16em;border-radius:50%;background:rgba(181,255,45,.16);color:var(--color-brand-primary);stroke-width:2.4; }
.cart-toast.is-leaving { animation:cart-toast-out 180ms ease-in both; }
@keyframes cart-toast-in { from { opacity:0; } to { opacity:1; } }
@keyframes cart-toast-out { from { opacity:1; } to { opacity:0; } }
body[data-reduced-motion='true'] .cart-toast,body[data-reduced-motion='true'] .cart-toast.is-leaving { animation:none; }
@media (prefers-reduced-motion:reduce) { .cart-toast,.cart-toast.is-leaving { animation:none; } }
@media print { .cart-toast { display:none !important; } }

/* Product tiles: one neutral outline for every tile. Product colour stays in the badge, artwork and inner tint,
   so a coloured edge never reads as "selected". Hover lifts, focus outlines, press answers briefly. */
.kiosk .product-grid .product-card.premium { border:1px solid rgba(228,222,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 26px rgba(2,0,14,.24);transition:border-color 140ms ease-out,box-shadow 140ms ease-out,background-color 140ms ease-out,filter 140ms ease-out; }
@media (hover:hover) and (pointer:fine) { .kiosk .product-grid .product-card.premium:hover:not(:active):not(:disabled) { border-color:rgba(238,233,255,.36);filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 16px 34px rgba(2,0,14,.36);transform:none; } }
.kiosk .product-grid .product-card.premium:focus-visible { outline:3px solid #fff;outline-offset:4px;border-color:rgba(238,233,255,.5); }
.kiosk .product-grid .product-card.premium:active:not(:disabled) { transform:none;border-color:var(--color-brand-primary);filter:brightness(1.1);box-shadow:inset 0 0 0 1px rgba(181,255,45,.45),0 6px 16px rgba(2,0,14,.3); }
body[data-reduced-motion='true'] .kiosk .product-grid .product-card.premium { transition:none; }

/* Purchase summary: Clear cart beside the title, away from payment. */
.review-head { position:relative; }
.clear-cart { position:absolute;inset-block-start:50%;inset-inline-end:0;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.4em;min-height:clamp(44px,3.4cqh,60px);padding:6px clamp(8px,1.4cqw,16px);border:1px solid rgba(255,170,170,.24);border-radius:999px;background:rgba(40,18,30,.4);color:#ffc9c9;font-size:calc(clamp(12px,1.75cqw,19px) * var(--text-scale));font-weight:500;white-space:nowrap; }
.clear-cart > svg { width:1.2em;height:1.2em; }
.clear-cart:disabled { opacity:.38; }
.clear-cart:focus-visible { outline:3px solid var(--color-brand-primary);outline-offset:4px; }
.clear-cart:active:not(:disabled) { background:rgba(70,26,40,.6); }
body:not([data-textscale='1']) .clear-cart { position:static;transform:none;margin:0 auto 10px;display:flex;width:max-content; }

/* Shared touch keyboard (coupon codes, names). Keys never resize with their label. */
.touch-keyboard { --kb-gap:clamp(4px,.7cqw,8px);--kb-key-h:clamp(40px,4.1cqh,78px);display:grid;gap:var(--kb-gap);width:100%;margin-top:auto;padding-top:clamp(8px,1cqh,18px);user-select:none; }
.kb-row { display:flex;justify-content:center;gap:var(--kb-gap); }
.kb-key { flex:1 1 0;min-width:0;max-width:11%;height:var(--kb-key-h);display:grid;place-items:center;padding:0;border:1px solid rgba(226,220,255,.2);border-radius:clamp(8px,1.3cqw,14px);background:linear-gradient(180deg,rgba(52,45,82,.86),rgba(26,22,48,.92));color:#fff;font:600 calc(clamp(16px,2.7cqw,30px))/1 var(--font-family);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.24); }
.kb-key:active:not(:disabled) { background:#2a2440;border-color:var(--color-brand-primary);color:var(--color-brand-primary); }
.kb-key:focus-visible { outline:3px solid var(--color-brand-primary);outline-offset:2px; }
.kb-special { max-width:none;flex:1.5 1 0;background:linear-gradient(180deg,rgba(38,32,60,.9),rgba(18,15,34,.94));color:#e6dcfb;font-size:calc(clamp(12px,1.9cqw,21px)); }
.kb-special > svg { width:1.5em;height:1.5em; }
.kb-shift[aria-pressed='true'] { border-color:var(--color-brand-primary);color:var(--color-brand-primary); }
.kb-bottom .kb-space { flex:4 1 0; }
.kb-bottom .kb-submit { flex:3 1 0;background:var(--control-primary-surface,linear-gradient(145deg,#ffe9a0,#ffb62e));border-color:rgba(255,242,199,.6);color:#2a1d04;font-weight:700; }
.kb-bottom .kb-submit:disabled { filter:saturate(.5) brightness(.58);color:#3d2d0c; }
/* Coupon entry: typed code with the touch keyboard, or a barcode scan. */
.kiosk.has-pinned-footer > .main-content[data-screen='coupon'] { display:flex;flex-direction:column; }
.main-content[data-screen='coupon'] > .coupon-panel { display:flex;flex-direction:column;flex:1 0 auto;width:100%;max-width:none; }
.coupon-mode { display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.2cqw,14px);margin-bottom:clamp(10px,1.4cqh,24px); }
.coupon-mode-option { display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:clamp(48px,4.2cqh,76px);padding:6px 12px;border:1px solid rgba(226,220,255,.2);border-radius:clamp(14px,2cqw,22px);background:rgba(24,20,44,.6);color:#e9e2fb;font-size:calc(clamp(14px,2.2cqw,24px) * var(--text-scale));font-weight:550; }
.coupon-mode-option > svg { width:1.3em;height:1.3em;color:var(--color-brand-primary); }
.coupon-mode-option[aria-pressed='true'] { border-color:rgba(181,255,45,.7);background:linear-gradient(145deg,rgba(181,255,45,.16),rgba(25,34,29,.9));color:#fff; }
.coupon-mode-option:focus-visible { outline:3px solid var(--color-brand-primary);outline-offset:3px; }
.coupon-panel .coupon-input { min-height:clamp(56px,4.8cqh,88px); }
.coupon-body > .field-error:empty { display:none; }
.coupon-scan { display:grid;justify-items:center;gap:clamp(10px,1.4cqh,22px);padding:clamp(20px,3cqh,56px) 16px;border:1px dashed rgba(226,220,255,.26);border-radius:clamp(18px,2.6cqw,30px);text-align:center; }
.coupon-scan-mark { display:grid;place-items:center;width:clamp(64px,12cqw,128px);height:clamp(64px,12cqw,128px);border-radius:26%;background:rgba(181,255,45,.1);color:var(--color-brand-primary); }
.coupon-scan-mark > svg { width:56%;height:56%; }
.coupon-scan > p { font-size:calc(clamp(16px,2.6cqw,28px) * var(--text-scale));font-weight:550; }

/* Custom coin amount: amount field, live coin preview, compact number pad. */
.detail-custom .custom-summary { display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"field coins" "hint hint";align-items:center;gap:clamp(6px,.9cqh,16px) clamp(12px,3cqw,32px);min-height:0;padding:clamp(12px,1.6cqh,30px) clamp(14px,2.6cqw,32px); }
.custom-amount-field { grid-area:field;display:grid;gap:4px;min-width:0; }
.custom-amount-field > label { color:var(--color-text-secondary);font-size:calc(clamp(12px,1.8cqw,20px) * var(--text-scale)); }
.custom-amount-box { display:flex;align-items:center;gap:.3em;min-height:clamp(52px,4.8cqh,92px);padding:0 clamp(10px,2cqw,22px);border:1.5px solid rgba(226,220,255,.3);border-radius:clamp(12px,1.9cqw,20px);background:rgba(11,9,33,.75);font:700 calc(clamp(24px,4.4cqw,48px) * var(--text-scale))/1 'Babylon Manrope','Babylon Rubik',sans-serif;color:#fff; }
.custom-amount-box:focus-within { border-color:var(--color-brand-primary); }
.custom-amount-box > span { color:var(--color-text-secondary);font-weight:600; }
.custom-amount-box > input { flex:1 1 auto;min-width:0;width:100%;border:0;outline:0;background:none;color:inherit;font:inherit;font-variant-numeric:tabular-nums; }
.custom-amount-box > input[aria-invalid='true'] { color:#ffc9c9; }
.custom-coins { grid-area:coins;display:grid;justify-items:center;text-align:center; }
.custom-coins > strong { font:800 calc(clamp(26px,4.8cqw,52px) * var(--text-scale))/1.1 'Babylon Manrope','Babylon Rubik',sans-serif;font-variant-numeric:tabular-nums; }
.custom-coins > small { color:var(--color-text-secondary);font-size:calc(clamp(11px,1.7cqw,18px) * var(--text-scale)); }
.custom-hint { grid-area:hint;min-height:1.4em;margin:0;color:var(--color-text-secondary);font-size:calc(clamp(12px,1.8cqw,19px) * var(--text-scale));line-height:1.4; }
.custom-hint.is-error { color:#ffc9c9; }
.keypad.keypad-compact { margin-top:clamp(8px,1.1cqh,20px);gap:clamp(5px,.7cqh,10px) clamp(6px,1cqw,12px); }
.keypad.keypad-compact .key-button { min-height:0;height:clamp(40px,4.2cqh,80px); }
.line-edit { min-height:44px;padding:6px 14px;font-size:.7em; }

/* Unlimited name assignment: scrolling list of fields, actions and the shared keyboard always reachable. */
.kiosk.has-pinned-footer > .main-content[data-screen='names'] { display:flex;flex-direction:column;overflow:hidden;padding-bottom:clamp(8px,1cqh,18px); }
.main-content[data-screen='names'] > .names-screen { display:flex;flex-direction:column;flex:1 1 0;min-height:0;width:100%; }
.names-screen .screen-heading { margin-bottom:clamp(2px,.4cqh,8px);text-align:center; }
.names-progress { margin:0 0 clamp(6px,.9cqh,16px);text-align:center;color:var(--color-text-secondary);font-size:calc(clamp(13px,1.9cqw,20px) * var(--text-scale)); }
.name-fields { flex:1 1 0;min-height:clamp(64px,7cqh,120px);overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:clamp(6px,.9cqh,14px);padding:2px 4px 2px 2px;scrollbar-width:thin; }
.name-field { display:grid;grid-template-columns:clamp(72px,16cqw,170px) minmax(0,1fr);align-items:center;gap:4px clamp(8px,1.6cqw,18px); }
.name-field > label { color:#e9e2fb;font-size:calc(clamp(14px,2.1cqw,23px) * var(--text-scale));font-weight:550; }
.name-input { width:100%;min-width:0;height:clamp(46px,4.3cqh,82px);padding:0 clamp(10px,2cqw,22px);border:1.5px solid rgba(226,220,255,.26);border-radius:clamp(12px,1.9cqw,20px);background:rgba(11,9,33,.8);color:#fff;font:600 calc(clamp(17px,2.7cqw,30px) * var(--text-scale))/1 var(--font-family); }
.name-field.is-active .name-input,.name-input:focus { border-color:var(--color-brand-primary);outline:none;box-shadow:0 0 0 2px rgba(181,255,45,.18); }
.name-input[aria-invalid='true'] { border-color:var(--color-text-error,#ff9494); }
.name-error { grid-column:2;color:#ffc9c9;font-size:calc(clamp(12px,1.7cqw,18px) * var(--text-scale)); }
.names-actions { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(8px,1.4cqw,16px);margin-top:clamp(8px,1cqh,18px); }
.names-actions > .btn { min-height:clamp(52px,4.6cqh,88px);margin:0;font-size:calc(clamp(16px,2.5cqw,27px) * var(--text-scale)); }
.names-screen .touch-keyboard { margin-top:0; }
.line-holders { display:block;color:#e6dcfb; }
.link-button { display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border:0;background:none;color:var(--color-brand-primary);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px; }
.link-button:focus-visible { outline:3px solid var(--color-brand-primary);outline-offset:2px; }
.holder-choices { display:grid;gap:10px; }
.holder-choice { justify-content:flex-start;gap:12px;width:100%; }
.collect-names { list-style:none;display:grid;gap:8px;margin:clamp(12px,1.6cqh,28px) auto 0;padding:0;max-width:640px;width:100%; }
.collect-names > li { display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 16px;border:1px solid rgba(226,220,255,.16);border-radius:14px;font-weight:600; }
.collect-names > li > small { color:var(--color-text-secondary);font-weight:400;font-size:.72em; }
.collect-names > li[data-print='failed'] > small,.collect-names > li[data-print='unknown'] > small { color:#ffc9c9; }
.custom-product .product-coins > strong { font-size:calc(clamp(20px,3.3cqw,36px) * var(--text-scale)); }

/* ===== v0.16.0 / CHG-20261008-003 =====
   Completion screen: yellow Finish with its countdown, always in view below the purchase details. */
.main-content[data-screen='success'] { display:flex;flex-direction:column; }
.main-content[data-screen='success'] > .completion-screen { flex:1 0 auto;min-height:0; }
.finish-bar { position:sticky;bottom:0;z-index:2;flex:0 0 auto;display:flex;justify-content:center;margin-top:clamp(12px,1.6cqh,28px);padding:clamp(10px,1.2cqh,22px) 0 clamp(4px,.6cqh,12px);background:linear-gradient(180deg,rgba(8,7,27,0),rgba(8,7,27,.94) 34%); }
.finish-bar > .btn { display:grid;justify-items:center;align-content:center;gap:2px;width:min(100%,clamp(260px,62cqw,640px));height:clamp(76px,6.6cqh,124px);min-height:0;padding:6px 20px;border-radius:clamp(22px,2.8cqw,30px); }
.finish-label { font-size:calc(clamp(22px,3.3cqw,36px) * var(--text-scale));font-weight:700;line-height:1.1; }
.finish-countdown { font-size:calc(clamp(12px,1.75cqw,19px) * var(--text-scale));font-weight:500;line-height:1.2;opacity:.82;font-variant-numeric:tabular-nums;white-space:nowrap; }
body:not([data-textscale='1']) .finish-bar > .btn { height:auto;min-height:96px; }
@media print { .finish-bar { display:none !important; } }
/* Several coupons: one compact row each, with its own Remove. The list scrolls; the keyboard stays in place. */
.main-content[data-screen='coupon'] { overflow:hidden; }
.main-content[data-screen='coupon'] > .coupon-panel { flex:1 1 0;min-height:0; }
.coupon-body { flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px; }
.coupon-list { display:grid;gap:clamp(6px,.8cqh,12px);margin-top:clamp(8px,1cqh,16px); }
.coupon-list:empty { display:none; }
.coupon-list > .coupon-result { margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1.4cqw,16px);padding:clamp(8px,1cqh,14px) clamp(10px,1.8cqw,18px); }
.coupon-remove { display:grid;place-items:center;width:clamp(44px,5.4cqw,60px);height:clamp(44px,5.4cqw,60px);border:1px solid rgba(255,170,170,.26);border-radius:50%;background:rgba(40,18,30,.4);color:#ffc9c9; }
.coupon-remove > svg { width:46%;height:46%; }
.coupon-remove:focus-visible { outline:3px solid var(--color-brand-primary);outline-offset:3px; }
.review-extras { flex-wrap:wrap; }

/* ===== v0.17.0 / CHG-20261008-004 =====
   Station screen: checking, setup, maintenance, out of service. Shown instead of the opening video while the kiosk
   cannot serve, so the state is never hidden. No header, no development detail. */
.main-content[data-screen='station'] { display:flex;padding:0; }
.station-screen { position:relative;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;width:100%;min-height:100%;padding:clamp(28px,6cqh,110px) var(--kiosk-gutter) clamp(24px,4cqh,80px);text-align:center; }
.station-logo { width:clamp(150px,34cqw,360px);aspect-ratio:2.4/1; }
.station-message { align-self:center;display:grid;justify-items:center;gap:clamp(10px,1.6cqh,28px);max-width:min(100%,820px); }
.station-mark { display:grid;place-items:center;width:clamp(72px,15cqw,160px);height:clamp(72px,15cqw,160px);border:1px solid rgba(230,224,255,.2);border-radius:30%;background:linear-gradient(180deg,rgba(40,34,66,.6),rgba(16,14,32,.7));color:#ffd98a; }
.station-mark > svg { width:48%;height:48%; }
.station-mark.is-working { color:var(--color-brand-primary); }
.station-mark.is-working > svg { animation:kiosk-spin 1.6s linear infinite; }
body[data-reduced-motion='true'] .station-mark.is-working > svg { animation:none; }
.station-screen h1 { font-size:calc(clamp(30px,5.6cqw,60px) * var(--text-scale));font-weight:800;line-height:1.18;letter-spacing:-.02em;outline:none; }
.station-message > p { color:var(--color-text-secondary);font-size:calc(clamp(17px,2.9cqw,31px) * var(--text-scale));line-height:1.45; }
.station-message > .station-status { display:inline-flex;align-items:center;gap:.5em;margin-top:clamp(6px,1cqh,18px);padding:.5em 1em;border:1px solid rgba(181,255,45,.34);border-radius:999px;background:rgba(181,255,45,.08);color:#eaffc0;font-size:calc(clamp(15px,2.4cqw,26px) * var(--text-scale)); }
.station-status > svg { width:1.1em;height:1.1em;color:var(--color-brand-primary); }
.station-message > .station-code { color:#fff;font-weight:600; }
.station-code bdi { font-family:'Babylon Manrope','Babylon Rubik',sans-serif;font-size:1.3em;letter-spacing:.08em; }
.station-label { color:var(--color-text-secondary);font-size:calc(clamp(15px,2.3cqw,25px) * var(--text-scale));font-weight:600;letter-spacing:.02em; }
.station-language { position:absolute;inset-block-start:clamp(16px,2.4cqh,44px);inset-inline-end:var(--kiosk-gutter);min-width:clamp(72px,12cqw,130px);min-height:clamp(44px,3.6cqh,64px);padding:6px 16px;border:1px solid rgba(230,224,255,.2);border-radius:18px;background:linear-gradient(180deg,rgba(40,34,66,.6),rgba(16,14,32,.7));color:#f4f0ff;font-size:calc(clamp(14px,2cqw,21px) * var(--text-scale));font-weight:550; }
.station-language:focus-visible { outline:3px solid var(--color-brand-primary);outline-offset:4px; }
/* A fault while a customer is in a purchase: one calm notice tied to what they are doing. */
.ops-notice { display:flex;align-items:flex-start;gap:clamp(8px,1.4cqw,16px);margin:0 0 clamp(8px,1.2cqh,20px);padding:clamp(10px,1.2cqh,20px) clamp(12px,2cqw,24px);border:1px solid rgba(255,214,128,.42);border-radius:clamp(14px,2cqw,22px);background:rgba(60,42,8,.5);color:#ffe9bd;text-align:start; }
.ops-notice > svg { flex:none;width:1.5em;height:1.5em;color:#ffd98a; }
.ops-notice > p { margin:0;font-size:calc(clamp(14px,2.2cqw,24px) * var(--text-scale));line-height:1.4; }
@media print { .station-screen,.ops-notice { display:none !important; } }

/* ===== v0.18.0 / CHG-20261008-006 =====
   "Exit" in the persistent strip. Its place is always reserved, so nothing in the header moves between screens;
   on the catalog (which exits through Back) and during payment it is simply not shown. */
.customer-exit { flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:.4em;box-sizing:border-box;min-width:calc(clamp(64px,13cqw,140px) * var(--text-scale));height:calc(clamp(44px,3.9cqh,74px) * var(--text-scale));padding:0 clamp(8px,1.6cqw,18px);border:1px solid rgba(230,224,255,.2);border-radius:999px;background:rgba(24,20,44,.5);color:#e9e2fb;font-size:calc(clamp(13px,1.95cqw,21px) * var(--text-scale));font-weight:550;white-space:nowrap; }
html[dir='rtl'] .customer-exit { direction:rtl; }
.customer-exit > svg { width:1.25em;height:1.25em;color:#cbb7e9; }
.customer-exit[data-offered='false'] { visibility:hidden;pointer-events:none; }
.customer-exit:active:not(:disabled) { background:rgba(64,56,96,.7);border-color:rgba(236,230,255,.36); }
.customer-exit:focus-visible { outline:3px solid var(--color-brand-primary);outline-offset:3px; }
.customer-strip { gap:clamp(8px,2cqw,24px); }
.dialog-body > p + p { margin-top:.5em; }

/* ===== v0.19.0 / CHG-20261008-007: customer fields are read-only displays; manual coupon entry is one column ===== */
/* A customer field shows application state. It takes focus (to mark the active field) but is never edited in place. */
input[data-entry] { cursor: default; caret-color: transparent; -webkit-user-select: none; user-select: none; }
input[data-entry]::selection { background: transparent; }
/* Manual coupon entry: label, field on its own row, message, one centred check button. Everything is border-box and
   the column may shrink (min-width:0), so the field always fits the content width with equal outer margins. */
.coupon-entry { display:flex;flex-direction:column;align-items:stretch;gap:clamp(8px,1.1cqh,18px);width:min(100%,720px);min-width:0;margin-inline:auto;box-sizing:border-box; }
.coupon-entry > * { min-width:0;box-sizing:border-box; }
.coupon-entry > .coupon-label { margin:0;text-align:start; }
.coupon-panel .coupon-input { display:block;width:100%;max-width:100%;min-height:clamp(56px,4.8cqh,88px);margin:0; }
/* One focus indicator, drawn INSIDE the field's own box. The earlier ring sat 8px outside the field (3px outline at a
   5px offset) while its scroll container had 2px of padding, so the ring was cut at the right edge and ran into the
   neighbouring button. An inner ring needs no room outside the field and cannot collide with anything. */
.coupon-panel .coupon-input:focus-visible { outline:3px solid var(--color-brand-primary);outline-offset:-3px; }
/* Alignment follows the interface language; character order does not. The value is a code: its direction is always
   left to right (dir="ltr" once it has a value), so SAVE20 or AB-123 is never reordered. In Hebrew it sits at the right. */
[dir='rtl'] .coupon-panel .coupon-input { text-align:right; }
[dir='ltr'] .coupon-panel .coupon-input { text-align:left; }
.coupon-panel .coupon-input::placeholder { letter-spacing:normal;text-transform:none; }
.coupon-message { min-height:1.4em;text-align:start; }
.coupon-message > .field-error { margin:0; }
.coupon-message > .field-error:empty { display:none; }
.coupon-entry > .coupon-check { align-self:center;width:auto;min-width:min(100%,clamp(200px,34cqw,360px));max-width:100%;margin:0;white-space:normal; }
.coupon-body > .coupon-list { width:min(100%,720px);margin-inline:auto;margin-top:clamp(8px,1.1cqh,18px); }
/* Without the check key the bottom keyboard row holds Clear alone; it keeps a key's width instead of stretching. */
.coupon-panel .kb-bottom { justify-content:center; }
.coupon-panel .kb-bottom .kb-clear { flex:0 1 clamp(120px,34cqw,360px); }