/* Customer order page: phone first, centered column on bigger screens. */
/* --band is the tile strip's height; screens under the header pad past it. */
:root { --band: 60px; }
body { background: var(--paper); }
.shell { max-width: 560px; margin: 0 auto; min-height: 100dvh; background: var(--paper); position: relative; padding-bottom: 110px; }
@media (min-width: 600px) { body { background: #E9E7E0; } .shell { box-shadow: 0 0 0 1px var(--line); } }

.bar { position: sticky; top: 0; z-index: 10; height: 64px; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 16px; }
/* A strip of the oven's green tile under the header: the brand color stays on the page
   even after real pie photos replace the green placeholders. */
.bar::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: var(--band); pointer-events: none;
  /* The website's tile wall: near-black grout, greens scattered at random, a bevel on each tile.
     Built by scripts/make-tile-band.mjs. */
  background: #1B1F1C url(/img/tile-band.svg) 0 0 / 560px 60px repeat-x; }
.bar img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
.bar .title { font-family: var(--display); font-size: 21px; font-weight: 700; flex: 1; }
.bar a.back { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; }
.bar button.back { background: none; border: 0; color: #fff; display: flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; font-size: 16px; padding: 0 6px 0 0; }

.intro { padding: calc(var(--band) + 24px) 16px 6px; display: flex; flex-direction: column; gap: 10px; }
.intro h1 { font-size: 32px; }
.intro p { margin: 0; font-size: 15px; color: #444; line-height: 1.45; }

.notice { margin: 8px 16px; padding: 14px 16px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.notice b { display: block; font-size: 17px; margin-bottom: 2px; }
.notice.paused { background: var(--amber); }
.notice.closed { background: #fff; border: 1px solid var(--line); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

.pickup { padding: 4px 16px 6px; display: flex; flex-direction: column; gap: 8px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip-btn { flex-shrink: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: #fff; font-weight: 700; font-size: 15px; }
.chip-btn[aria-pressed="true"] { background: var(--tile); color: var(--ink); border-color: var(--ink); }
.chip-btn:disabled { opacity: .35; }
.where { font-size: 14px; color: #444; }

.list { padding: 10px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.list h2 { font-size: 22px; margin: 6px 0 2px; }
.item { display: flex; gap: 12px; padding: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; }
.item.in-cart { border-color: var(--tile); box-shadow: 0 0 0 1.5px var(--tile); }
.item.sold { opacity: .55; }
.item .ph, .item .photo { flex-shrink: 0; width: 96px; height: 96px; border-radius: 12px; }
.item .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.item .nm { font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.1; }
.item .ds { font-size: 13px; color: var(--muted); line-height: 1.35; }
.item .foot { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.item .price { font-size: 16px; font-weight: 800; }
.item .tag { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: var(--ink); color: #fff; }
.item .tag.gray { background: var(--line); color: #444; }
.round { width: 40px; height: 40px; border-radius: 50%; font-size: 21px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.round.add { border: 0; background: var(--tile); color: var(--ink); }
.round.sub { border: 1.5px solid var(--ink); background: #fff; color: var(--ink); }
.item .q { min-width: 16px; text-align: center; font-size: 17px; font-weight: 800; }

.cartbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); width: min(528px, calc(100vw - 32px)); z-index: 20; }
.cartbar button { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--ink); color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.25); padding-left: 10px; }
.cb-left { display: flex; align-items: center; gap: 12px; }
.cb-count { min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; background: var(--tile); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; }

.checkout { padding: calc(var(--band) + 16px) 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.box { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.box h1 { font-size: 22px; }
.row { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; }
.row.small { font-size: 14px; color: #444; }
.row.total { font-size: 18px; font-weight: 800; }
.rule { height: 1px; background: #ECEAE3; }
.pick { display: flex; align-items: center; gap: 12px; }
.pick .ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--tile); display: flex; align-items: center; justify-content: center; }
.pick .t { flex: 1; display: flex; flex-direction: column; }
.pick .t b { font-size: 16px; }
.pick .t span { font-size: 13px; color: var(--muted); }
.linkbtn { background: none; border: 0; font-weight: 700; font-size: 15px; text-decoration: underline; min-height: 44px; padding: 0 4px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 600; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); }
.cardbox { min-height: 52px; }
.demo-card { display: grid; grid-template-columns: minmax(0, 1fr) 82px 64px 70px; gap: 6px; }
.demo-card .input { padding: 0 8px; font-size: 16px; }
.err { color: #8B1E1E; font-weight: 700; font-size: 15px; }
.paybar { position: sticky; bottom: 0; margin: 0 -16px; padding: 12px 16px max(20px, env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); }

.done { padding: calc(var(--band) + 44px) 28px 64px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.done .big { width: 88px; height: 88px; border-radius: 50%; background: var(--tile); display: flex; align-items: center; justify-content: center; }
.done h1 { font-size: 34px; }
.done p { margin: 0; font-size: 16px; color: #444; line-height: 1.5; }
.demo-note { margin: 0 16px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px dashed var(--line-strong); font-size: 13px; color: #444; }