/* Barn Door. Brand: craft paper ground, Dark Green, Vibrant Green, Sunshine
   Yellow, black, white. Archivo Black headlines, Sofia Sans Condensed body.
   Paper-cut shapes, tilted stickers with hard shadows, hand-drawn icons. */

:root {
  --craft: #ede8de;
  --dark: #005B5C;
  --green: #38AD33;
  --yellow: #FFB400;
  --ink: #000000;
  --paper: #ffffff;
  --muted: #333333;
  --head: 'Archivo Black', sans-serif;
  --body: 'Sofia Sans Condensed', sans-serif;
  --shadow: 7px 7px 0 var(--dark);
  --shadow-sm: 4px 4px 0 var(--dark);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--craft);
  color: var(--ink);
  font-family: var(--body);
  font-size: 22px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.grain { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .14; pointer-events: none; mix-blend-mode: multiply; z-index: 0; }
#app, .bar { position: relative; z-index: 1; }
h1, h2, h3 { font-family: var(--head); color: var(--dark); margin: 0; line-height: 1.05; font-weight: 400; }
h1 { font-size: clamp(38px, 5vw, 58px); }
h2 { font-size: clamp(30px, 3.4vw, 42px); }
h3 { font-size: 24px; }
p { margin: 0; }
.muted { color: var(--muted); }
.strong { font-weight: 700; }
.big-text { font-size: 28px; }
.hidden { display: none !important; }
a { color: var(--dark); }
button, input { font-family: var(--body); font-size: inherit; }
img { display: block; }

/* Top bar (customer screens) */
.bar { display: flex; align-items: center; gap: 16px; padding: 22px 40px 0; }
.bar-logo img { height: 72px; width: auto; }
.bar-right { margin-left: auto; }
.stand .bar, body.in-stand .bar { display: none; }

/* Chips, stickers, buttons */
.chip { display: inline-block; font-weight: 700; color: var(--dark); background: var(--paper); border: 3px solid var(--dark); border-radius: 999px; padding: 6px 18px; box-shadow: var(--shadow-sm); font-size: 20px; }
.chip-yellow { background: var(--yellow); color: var(--ink); font-family: var(--head); }
.chip-white { background: var(--paper); }
.chip.small { font-size: 16px; padding: 3px 12px; box-shadow: none; border-width: 2px; }
.tilt-l { transform: rotate(-1.5deg); }
.tilt-r { transform: rotate(1.2deg); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 12px 28px; border: 3px solid var(--dark); border-radius: 999px; background: var(--paper); color: var(--dark); font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 5px 5px 0 var(--dark); transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--dark); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--dark); color: var(--paper); font-family: var(--head); box-shadow: 5px 5px 0 var(--green); }
.btn-primary:hover:not(:disabled) { box-shadow: 8px 8px 0 var(--green); }
.btn-yellow { background: var(--yellow); color: var(--ink); font-family: var(--head); }
.btn-white { background: var(--paper); }
.btn-ghost { border: none; box-shadow: none; background: none; padding: 6px 0; min-height: 44px; }
.btn-ghost:hover { transform: none !important; box-shadow: none !important; text-decoration: underline; }
.btn-ghost::before { content: ""; width: 12px; height: 12px; border-left: 3px solid var(--dark); border-bottom: 3px solid var(--dark); transform: rotate(45deg); margin-right: 4px; }
.btn.big { font-size: 26px; min-height: 74px; padding: 14px 40px; }
.btn.small { min-height: 44px; padding: 6px 16px; font-size: 18px; box-shadow: none; }
.link { font-weight: 700; }
.link-white { color: var(--paper); font-weight: 700; text-decoration: none; padding: 8px 12px; }
.self-center { align-self: center; }
.self-start { align-self: flex-start; }
.grow { flex-grow: 1; }
.row { display: flex; gap: 16px; align-items: center; }
.row.gap { gap: 14px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; min-height: 60vh; padding: 40px 24px; position: relative; }
.center-items { align-items: center; }
.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: start; }
.split { display: flex; align-items: center; justify-content: center; gap: 72px; padding: 40px 24px; min-height: 60vh; flex-wrap: wrap; }

/* Cards */
.card { background: var(--paper); border: 3px solid var(--dark); border-radius: 28px 36px 30px 40px / 36px 28px 40px 30px; box-shadow: var(--shadow); padding: 28px 30px; display: flex; flex-direction: column; gap: 16px; }
.card-yellow { background: var(--yellow); border-radius: 36px 28px 40px 30px / 28px 40px 30px 36px; }
.card.pad { padding: 20px; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--dark); font-size: 20px; }
label.zip { width: 170px; flex-shrink: 0; }
input[type=text], input[type=email], input[type=search], input[type=tel] { font-size: 24px; padding: 11px 16px; border: 3px solid var(--dark); border-radius: 16px 12px 18px 12px; min-height: 56px; background: var(--paper); color: var(--ink); width: 100%; }
input:focus { outline: 4px solid var(--yellow); outline-offset: 2px; }
.check { flex-direction: row; align-items: center; gap: 14px; font-weight: 400; color: var(--ink); font-size: 21px; min-height: 48px; cursor: pointer; }
.check.strong { font-weight: 700; }
.check input { width: 30px; height: 30px; accent-color: var(--dark); flex-shrink: 0; }
.tour-form { display: flex; justify-content: center; }
.tour-form .card { width: 100%; max-width: 760px; }
.check.fine { font-size: 15px; color: var(--muted); min-height: 36px; }
.check.fine input { width: 20px; height: 20px; }
.check.fine a { color: var(--dark); font-weight: 700; }
.self-end { align-self: flex-end; }
.error { color: #8C3A2B; font-weight: 700; }

/* Farm picker */
.farm-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 10px; }
.farm-choices button { font-family: var(--head); font-size: 28px; color: var(--dark); background: var(--paper); border: 3px solid var(--dark); border-radius: 30px 40px 28px 44px / 44px 28px 40px 30px; padding: 26px 36px; min-width: 260px; box-shadow: 7px 7px 0 var(--dark); cursor: pointer; }
.farm-choices button:nth-child(2) { background: var(--yellow); transform: rotate(1deg); }
.farm-choices button:nth-child(3) { background: var(--green); transform: rotate(-1deg); }
#farm-chip { cursor: default; font-family: var(--body); }
#farm-chip.switchable { cursor: pointer; }

/* Screens */
.screen { padding: 0 40px 40px; max-width: 1240px; margin: 0 auto; }
.screen-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 26px; }

/* Welcome: fits the window with no scrolling. The header floats over the sky,
   the scene takes what height is left after the tiles, and the sky group in
   the SVG is drawn low enough that cropping the top never hides the sun. */
body.in-welcome { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.in-welcome .bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 18px 40px 0; }
#screen-welcome { padding: 0; max-width: none; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
/* The scene is drawn to fit its box by height ("meet"), never cropped. The
   hills carry on far past the drawing's edges, and the wrap clips them, so a
   wide window shows ground to both sides instead of a cropped barn. */
.scene-wrap { flex: 0 0 46vh; min-height: 160px; width: 100%; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.scene { display: block; width: 100%; height: 100%; overflow: visible; }
.sky { transform: translateY(12px); }
.welcome-body { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1500px; margin: 0 auto; padding: 10px 40px 18px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.welcome-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; flex: 0 0 auto; }
.welcome-head h1 { font-size: clamp(30px, 4vw, 52px); }
.welcome-head p { font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; }
.tiles { flex: 0 1 auto; }
.tiles .cut { min-height: clamp(150px, 28vh, 320px); padding: clamp(14px, 2vh, 26px) 26px; gap: 8px; }
.tiles .cut svg { width: clamp(64px, 11vh, 130px); height: auto; }
.tiles .cut-title { font-size: clamp(22px, 2.4vw, 32px); }
.tiles .cut-sub { font-size: clamp(16px, 1.5vw, 20px); margin-top: 4px; }
.tiles, .tenders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 6px 12px 12px 4px; }
.tenders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cut { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 260px; padding: 26px 28px 28px; text-decoration: none; color: var(--dark); background: var(--paper); border: none; box-shadow: 8px 8px 0 var(--dark); clip-path: polygon(0 3%, 97% 0, 100% 97%, 2% 100%); cursor: pointer; text-align: left; transition: transform .15s ease, box-shadow .15s ease; }
.cut:nth-child(1) { transform: rotate(-1.2deg); }
.cut:nth-child(2) { transform: rotate(1deg); clip-path: polygon(2% 0, 100% 2%, 98% 100%, 0 98%); }
.cut:nth-child(3) { transform: rotate(-.6deg); clip-path: polygon(0 0, 98% 3%, 100% 100%, 3% 97%); }
.cut:nth-child(4) { transform: rotate(.7deg); clip-path: polygon(1% 2%, 100% 0, 99% 98%, 0 100%); }
.cut:hover { transform: translate(-3px, -3px) rotate(0deg); box-shadow: 11px 11px 0 var(--dark); }
.cut svg { width: 120px; height: 92px; }
.tenders .cut svg { width: 56px; height: 56px; fill: none; stroke: var(--dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tenders .cut { min-height: 200px; }
.cut-title { font-family: var(--head); font-size: clamp(26px, 2.8vw, 36px); line-height: 1.05; display: block; }
.cut-sub { font-size: 22px; color: #222; display: block; margin-top: 6px; }
.cut-white { background: var(--paper); }
.cut-yellow { background: var(--yellow); }
.cut-green { background: var(--green); }
.cut-dark { background: var(--dark); color: var(--paper); box-shadow: 8px 8px 0 var(--green); }
.cut-dark .cut-title, .cut-dark .cut-sub { color: var(--paper); }
.cut-dark svg { stroke: var(--yellow) !important; }
.tagline { align-self: flex-end; font-weight: 700; color: var(--paper); background: var(--dark); padding: 6px 16px; box-shadow: 4px 4px 0 var(--yellow); transform: rotate(1.5deg); font-size: 17px; }

/* Scene animation */
@keyframes drift { to { transform: translateX(60px); } }
@keyframes peck { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-8deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes rays { 50% { transform: translateX(-10px); } }
.cloud { animation: drift 30s linear infinite alternate; }
.cloud-2 { animation-delay: -12s; }
.rooster { animation: peck 5s ease-in-out infinite; transform-origin: 700px 230px; }
.flower { animation: sway 4s ease-in-out infinite; transform-origin: bottom center; transform-box: fill-box; }
.flower-2 { animation-delay: .7s; } .flower-3 { animation-delay: 1.4s; } .flower-4 { animation-delay: 2.1s; }
.rays { animation: rays 6s ease-in-out infinite; }

/* Loaders and celebrations */
@keyframes grow { 0% { stroke-dashoffset: 80; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes pop { 0%, 55% { transform: scale(0); } 75% { transform: scale(1.15); } 90%, 100% { transform: scale(1); } }
@keyframes fall { 0% { transform: translateY(-60px) rotate(0); opacity: 1; } 100% { transform: translateY(80vh) rotate(260deg); opacity: 0; } }
@keyframes bounce { 50% { transform: translateY(-12px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.5); opacity: 0; } }
.sprout { width: 180px; height: 180px; fill: none; stroke: var(--dark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sprout.small { width: 110px; height: 110px; }
.sprout .stem { stroke-dasharray: 80; animation: grow 2s ease-out infinite; }
.sprout .leaf { fill: var(--green); transform-origin: 60px 60px; animation: pop 2s ease-out infinite; }
.sprout .leaf-2 { animation-delay: .25s; }
.sun-check, .basket, .radish, .check-circle, .stand-icon { fill: none; stroke: var(--dark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sun-check { width: 150px; height: 150px; animation: sway 4s ease-in-out infinite; }
.basket { width: 84px; height: 84px; }
.basket.big-icon { width: 150px; height: 150px; }
.radish { width: 220px; height: 220px; margin-top: 30px; }
.check-circle { width: 120px; height: 120px; }
.stand-icon { width: 120px; height: 120px; }
.bounce { animation: bounce 1.2s ease-in-out infinite; }
.leaves { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.leaves svg { position: absolute; top: 0; width: 40px; height: 40px; animation: fall 3.2s ease-in infinite; }

/* Pickup */
.pickup-list { display: flex; flex-direction: column; gap: 18px; }
.pickup-head { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.pickup-head > div { flex-grow: 1; }
.search { width: 340px; }
.names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 6px 8px 8px 4px; }
.tag { display: flex; align-items: center; gap: 12px; text-align: left; font-size: 25px; font-weight: 700; color: var(--dark); background: var(--paper); border: 3px solid var(--dark); border-radius: 20px 14px 22px 14px / 14px 22px 14px 20px; padding: 16px 20px; min-height: 74px; box-shadow: 5px 5px 0 var(--dark); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.tag svg { width: 26px; height: 26px; flex-shrink: 0; }
.tag .tag-name { flex: 1 1 auto; min-width: 0; }
.tag .tag-kind { font-size: 15px; font-weight: 700; color: var(--ink); background: var(--yellow); border: 2px solid var(--dark); border-radius: 999px; padding: 1px 10px; white-space: nowrap; }
.tag .tag-kind.harvest { background: var(--craft); }
.tag .tag-day { font-size: 15px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tag:hover { transform: translate(-2px, -2px) rotate(0) !important; box-shadow: 7px 7px 0 var(--dark); background: var(--yellow); }
.name-plate { font-size: clamp(36px, 5vw, 58px); background: var(--yellow); border: 3px solid var(--dark); border-radius: 30px 40px 28px 44px / 44px 28px 40px 30px; padding: 14px 40px; box-shadow: 8px 8px 0 var(--dark); }

/* Stand */
.stand { padding: 0; max-width: none; min-height: 100vh; display: flex; flex-direction: column; }
.stand-bar { background: var(--dark); color: var(--paper); padding: 0 32px; display: flex; align-items: center; justify-content: space-between; min-height: 78px; }
.stand-bar-left { display: flex; align-items: center; gap: 16px; font-family: var(--head); font-size: 26px; }
.stand-bar-left img { height: 42px; width: auto; }
.stand-bar-right { display: flex; align-items: center; gap: 12px; }
.wave { display: block; width: 100%; height: 26px; margin-top: -1px; }
.stand .step { padding: 24px 40px 40px; flex-grow: 1; }
.pin-screen { display: flex; align-items: center; justify-content: center; gap: 96px; flex-wrap: wrap; }
.pin-copy { display: flex; flex-direction: column; gap: 14px; max-width: 380px; }
.dots { display: flex; gap: 18px; margin-top: 8px; }
.dots i { width: 30px; height: 30px; border-radius: 50% 46% 54% 50%; border: 3px solid var(--dark); background: var(--paper); display: block; }
.dots i.on { background: var(--green); }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 340px; }
.keypad button { font-family: var(--head); font-size: 30px; color: var(--dark); background: var(--craft); border: 3px solid var(--dark); border-radius: 50% 46% 54% 50% / 48% 52% 48% 52%; min-height: 86px; box-shadow: 4px 4px 0 var(--dark); cursor: pointer; }
.keypad button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--dark); }

.till { display: flex; gap: 24px; min-height: 0; padding-top: 18px !important; }
.till-left { flex-grow: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cats { display: flex; flex-wrap: wrap; gap: 10px; }
.cats button { font-size: 19px; font-weight: 700; border-radius: 999px; padding: 9px 18px; min-height: 46px; border: 3px solid var(--dark); background: var(--paper); color: var(--dark); box-shadow: 3px 3px 0 var(--dark); cursor: pointer; }
.cats button.on { background: var(--dark); color: var(--paper); }
.items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 6px 10px 10px 4px; }
.item { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--paper); border: 3px solid var(--dark); border-radius: 22px 16px 24px 16px / 16px 24px 16px 22px; padding: 14px 16px; min-height: 112px; box-shadow: 5px 5px 0 var(--dark); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.item:hover { transform: translate(-2px, -2px) rotate(0) !important; box-shadow: 7px 7px 0 var(--dark); }
.item .blob { flex-shrink: 0; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--dark); border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%; }
.item .blob svg { width: 44px; height: 44px; fill: var(--paper); stroke: var(--dark); stroke-width: 2; }
.item .meta { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.item .cat { font-size: 15px; font-weight: 700; color: #4a4a4a; text-transform: uppercase; letter-spacing: .05em; }
.item .name { font-size: 23px; font-weight: 700; line-height: 1.1; }
.item .price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.item .price { font-family: var(--head); font-size: 22px; color: var(--dark); }
.item .qty { font-size: 17px; font-weight: 700; background: var(--yellow); border: 2px solid var(--dark); border-radius: 999px; padding: 1px 12px; }
.till-right { width: 390px; flex-shrink: 0; display: flex; flex-direction: column; }
.receipt { flex-grow: 1; background: var(--paper); border: 3px solid var(--dark); border-radius: 22px 22px 0 0; box-shadow: var(--shadow); padding: 20px 22px 10px; display: flex; flex-direction: column; gap: 12px; }
.receipt-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--head); font-size: 24px; color: var(--dark); }
.receipt-head svg { width: 34px; height: 34px; }
.lines { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.line { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 2px dashed var(--craft); }
.line .meta { flex-grow: 1; min-width: 0; }
.line .name { font-size: 20px; font-weight: 700; line-height: 1.15; }
.line .each { font-size: 17px; color: #4a4a4a; }
.line .amt { width: 78px; text-align: right; font-size: 20px; font-weight: 700; }
.line .count { width: 26px; text-align: center; font-size: 22px; font-weight: 700; }
.qtybtn { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--dark); background: var(--paper); color: var(--dark); font-size: 24px; font-weight: 700; cursor: pointer; }
.qtybtn.plus { background: var(--green); color: var(--ink); }
.totals { border-top: 3px solid var(--dark); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 19px; }
.totals > div { display: flex; justify-content: space-between; }
.totals .total { font-family: var(--head); font-size: 26px; color: var(--dark); margin-top: 2px; }
.tear { display: block; width: 100%; height: 22px; margin-top: -3px; filter: drop-shadow(7px 7px 0 var(--dark)); }
.till-right .btn { margin-top: 16px; }
.summary { gap: 10px; align-self: start; }
.summary .srow { display: flex; justify-content: space-between; gap: 12px; font-size: 20px; }
.summary .stotal { font-family: var(--head); font-size: 24px; color: var(--dark); border-top: 3px solid var(--dark); padding-top: 10px; margin-top: 4px; display: flex; justify-content: space-between; }
.pay-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.price-plate { font-family: var(--head); font-size: 46px; background: var(--yellow); border: 3px solid var(--dark); border-radius: 999px; padding: 6px 30px; box-shadow: 6px 6px 0 var(--dark); }
.due { font-size: 24px; } .due strong { font-family: var(--head); font-size: 40px; }
.reader { width: 230px; height: 380px; background: #1e1e1e; border-radius: 34px; padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 8px 8px 0 var(--dark); }
.reader-screen { flex-grow: 1; background: var(--craft); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; }
.reader-screen small { font-size: 17px; font-weight: 700; color: var(--dark); }
.reader-screen strong { font-family: var(--head); font-size: 34px; }
.reader-screen span { font-size: 17px; font-weight: 700; }
.reader-label { text-align: center; font-size: 14px; color: #bdbdbd; }
.ring-wrap { position: relative; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--green); animation: pulse 1.6s ease-out infinite; }
.ring-wrap svg { width: 44px; height: 44px; fill: none; stroke: var(--dark); stroke-width: 2; stroke-linecap: round; }
.qr-card { padding: 22px; }
.qr { width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font-size: 18px; }
.qr svg, .qr img { width: 100%; height: 100%; }
.cash-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 4px 8px 8px 2px; margin-bottom: 18px; }
.cash-options button { font-family: var(--head); font-size: 26px; border-radius: 50% 46% 54% 50% / 48% 52% 48% 52%; min-height: 84px; border: 3px solid var(--dark); box-shadow: 5px 5px 0 var(--dark); background: var(--paper); color: var(--dark); cursor: pointer; }
.cash-options button.on { background: var(--dark); color: var(--paper); }
.huge { font-family: var(--head); font-size: 46px; display: block; }
.cash .two-col { margin-bottom: 18px; }
.steps { font-size: 22px; padding-left: 26px; display: flex; flex-direction: column; gap: 8px; margin: 0; }

/* Narrow tablets: two item columns so names and prices never collide */
@media (max-width: 1280px) {
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .till-right { width: 340px; }
}

/* Phone and small tablets */
@media (max-width: 820px) {
  body { font-size: 19px; }
  .bar { padding: 14px 16px 0; }
  .bar-logo img { height: 52px; }
  .screen { padding: 0 16px 24px; }
  .welcome-body { padding: 12px 16px 24px; }
  .tiles, .tenders, .names, .items { grid-template-columns: 1fr; }
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cut { min-height: 170px; flex-direction: row; align-items: center; gap: 18px; }
  .cut svg { width: 80px; height: 62px; flex-shrink: 0; }
  .two-col { grid-template-columns: 1fr; gap: 20px; }
  .split { gap: 24px; padding: 20px 16px; }
  .till { flex-direction: column; }
  .till-right { width: 100%; }
  .search { width: 100%; }
  .pin-screen { gap: 24px; }
  .keypad { width: 100%; }
  .cash-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stand .step { padding: 16px 16px 24px; }
  .stand-bar { padding: 0 16px; min-height: 60px; }
  .stand-bar-left { font-size: 22px; }
  .reader { width: 170px; height: 280px; }
  .radish { display: none; }
  label.zip { width: 130px; }
  .tagline { align-self: center; }
}

/* Portrait tablets and phones: the three welcome tiles stack as short rows,
   icon left, title and line stacked right, so all three plus the tagline fit
   under the scene without scrolling. */
@media (max-width: 820px) {
  .scene-wrap { flex-basis: 30vh; }
  .welcome-body { padding: 10px 16px 16px; gap: 10px; }
  .tiles { gap: 14px; padding: 4px 8px 8px 2px; }
  .tiles .cut { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; min-height: clamp(92px, 13vh, 140px); padding: 12px 20px; }
  .tiles .cut svg { grid-row: 1 / span 2; width: clamp(56px, 7vh, 84px); height: auto; }
  .tiles .cut-title, .tiles .cut-sub { grid-column: 2; }
  .tiles .cut-title { font-size: clamp(22px, 3vh, 30px); }
  .tiles .cut-sub { font-size: clamp(15px, 2vh, 19px); margin-top: 2px; }
}

/* Phones: a small header so the chips never cover the barn */
@media (max-width: 480px) {
  body.in-welcome .bar { padding: 10px 12px 0; gap: 8px; }
  body.in-welcome .bar-logo img { height: 40px; }
  .bar .chip { font-size: 13px; padding: 3px 10px; white-space: nowrap; border-width: 2px; box-shadow: 2px 2px 0 var(--dark); }
  .welcome-head h1 { font-size: 30px; }
  .welcome-head p { font-size: 19px; }
}