/* Robowok online ordering — order.html · checkout.html · track.html. Same palette and rhythm as style.css.
   Learned from the heytea app (BRAND.md「学喜茶」第 16 条): categories on the left, two columns of bowls on the right,
   allergens behind one link, every option group pre-set, one black pill per screen. Orange stays with the site's "order" entrance only. */
[hidden]{display:none!important}
.shop{padding:var(--s2) 0 120px}
.shop .wrap{display:grid;grid-template-columns:200px 1fr;gap:var(--s3);align-items:start}
.catnav{position:sticky;top:96px}
.catnav a{display:flex;align-items:center;gap:12px;font-family:var(--hand);font-size:24px;letter-spacing:.04em;color:var(--mute);padding:8px 0;transition:color var(--fast) ease}
.catnav a.on,.catnav a:hover{color:var(--ink);opacity:1}
/* category icons: single-line, the current one draws itself (0.7s, strokes staggered), its last stroke orange */
.catnav .ic{width:30px;height:30px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.catnav a.on .ic path{stroke-dasharray:1;animation:icdraw .7s ease both}
.catnav a.on .ic path:nth-child(2){animation-delay:.12s}
.catnav a.on .ic path:nth-child(3){animation-delay:.24s}
.catnav a.on .ic path:last-child{stroke:var(--orange)}
@keyframes icdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.catnav a.on .ic path{animation:none}}
.shop .group{padding:0 0 var(--s3);scroll-margin-top:100px}
.shop .group h2{font-size:clamp(28px,3vw,38px);margin-bottom:var(--s1)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2) 3%}
.tile{text-align:left;display:block;width:100%;padding:0;cursor:pointer;transition:opacity var(--fast) ease}
.tile:hover{opacity:.7}
.tile .pic img{width:78%;height:auto}
/* drinks are product shots on pure white: show the whole bottle and let the white melt into the cream page (Di 2026-10-26) */
/* dish photos are instax prints: the print itself is .snap in style.css; here only what's particular to the tiles (Di 2026-10-27) */
.tiles{isolation:isolate}
.tile:nth-child(4n+1){--r:-1.8deg;--t:-4deg;--tw:38%}.tile:nth-child(4n+2){--r:1.4deg;--t:3deg;--tw:31%}.tile:nth-child(4n+3){--r:-.9deg;--t:-2deg;--tw:42%}.tile:nth-child(4n){--r:2deg;--t:5deg;--tw:34%}
.tiles .tile .pr{margin-top:14px}
#c-drinks .tile .pic img.photo{position:relative;object-fit:contain;mix-blend-mode:multiply;border-radius:0;padding:6%}   /* bottle over the backdrop order.html draws (drinkBackdrop) */
.tile .nm{font-size:clamp(20px,1.9vw,26px);line-height:1.05;margin-top:8px}
.tile .pr{font-size:13px;letter-spacing:.12em;color:var(--grey);margin-top:4px}
.tile.spicy .nm::after{content:"";display:inline-block;width:11px;height:11px;margin-left:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1c-1 2-3 3-3 6a3 3 0 006 0c0-3-2-4-3-6z' fill='none' stroke='%23171717' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/contain}
@media (max-width:900px){.shop .wrap{grid-template-columns:1fr;gap:0}.catnav{position:sticky;top:60px;z-index:5;background:var(--cream);display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;padding:10px 0;margin-bottom:var(--s1)}.catnav::-webkit-scrollbar{display:none}.catnav a{white-space:nowrap;padding:2px 0;font-size:20px;border-bottom:1.5px solid transparent}.catnav a.on{border-bottom-color:var(--orange)}.catnav a{gap:6px}.catnav .ic{width:22px;height:22px}.tiles{grid-template-columns:1fr 1fr;gap:var(--s2) 12px}.shop .group{scroll-margin-top:120px}}
/* phones/tablets: all seven categories in one row — hand-drawn icon, small word under, an orange squiggle under the one you're on (Di 2026-10-27; was a row that ran off the right edge) */
@media (max-width:900px){
  .catnav{display:grid;grid-template-columns:repeat(7,1fr);gap:0;overflow:visible;padding:8px 0 6px}
  .catnav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;letter-spacing:0;padding:4px 0 3px;border-bottom:0;white-space:nowrap}
  .catnav .ic{width:28px;height:28px}
  .catnav a.on{color:var(--ink)}
  .shop{padding-bottom:88px}.shop .group:last-child{padding-bottom:0}body:has(.shop) footer{padding-top:var(--s2)}   /* less gap under the last category (the 72px bar still clears it) */
  @media (max-width:360px){.catnav a{font-size:11px}.catnav .ic{width:24px;height:24px}}   /* small phones: "vegetable" still fits its column */
  .catnav a.on::after{content:"";width:22px;height:5px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M2 5c6-3 10 2 16-1s10-2 20 0' fill='none' stroke='%23FE7613' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
}

/* black pill = the one action on screen */
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{opacity:.85}
.btn-ink[disabled]{opacity:.35;cursor:default;transform:none}
.btn.wide{width:100%}

/* sheets: dim the page, white panel rises from the bottom (centres on a wide screen) */
.dim{position:fixed;inset:0;background:rgba(23,23,23,.35);opacity:0;pointer-events:none;transition:opacity var(--in) ease;z-index:40}
.dim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:88vh;background:var(--white);border-radius:22px 22px 0 0;transform:translateY(100%);transition:transform var(--in) ease,visibility 0s var(--in);z-index:41;display:flex;flex-direction:column;visibility:hidden;pointer-events:none}
.sheet.show{transform:none;visibility:visible;pointer-events:auto;transition:transform var(--in) ease,visibility 0s}
/* a closed sheet stays in the page (faded out on desktop) — hidden + no pointer so it can't swallow taps meant for the open one (2026-10-26: the closed bag sheet sat over the dish sheet's protein buttons) */
.sheet .hd{display:flex;align-items:center;justify-content:space-between;padding:18px var(--s2) 0}
.sheet .hd .x{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;color:var(--grey)}
.sheet .bd{overflow-y:auto;padding:0 var(--s2) var(--s2);-webkit-overflow-scrolling:touch}
.sheet .ft{border-top:1px solid var(--line);padding:14px var(--s2) calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:var(--s2);background:var(--white)}
@media (min-width:768px){.sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(560px,92vw);max-height:86vh;border-radius:22px;transform:translate(-50%,-50%) translateY(14px);opacity:0;transition:opacity var(--in) ease,transform var(--in) ease,visibility 0s var(--in)}.sheet.show{transform:translate(-50%,-50%);opacity:1;transition:opacity var(--in) ease,transform var(--in) ease,visibility 0s}}

/* dish detail */
.dish .pic{display:flex;justify-content:center;margin:6px 0 4px}
.dish .pic img{width:46%;height:auto}
.dish .pic img.photo{width:100%;max-width:420px;aspect-ratio:1;object-fit:cover;border-radius:16px}
.dish h2{font-size:clamp(30px,3.4vw,40px);line-height:1.05}
.dish .intro{margin-top:8px;color:var(--ink)}
.dish .alg{display:inline-block;margin-top:10px;font-size:13px;letter-spacing:.1em;color:var(--grey);border-bottom:1px solid var(--line);padding-bottom:1px}
.dish .alg-body{font-size:13px;color:var(--grey);margin-top:6px}
.grp{margin-top:28px}
.grp .lbl{display:flex;width:100%;justify-content:space-between;align-items:baseline;font-size:13px;letter-spacing:.14em;padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--ink);text-align:left}
.grp .lbl em{font-style:normal;color:var(--mute);letter-spacing:.08em;font-size:12px}
/* options as rows: a round mark (pick one) or square mark (pick several), the name, the price on the right; picked = filled mark with a tick (Di 2026-10-27: pills looked messy) */
.opts{display:block}
.opt{display:flex;width:100%;align-items:center;gap:12px;min-height:46px;padding:0 4px;border-bottom:1px solid var(--line);font-size:14px;letter-spacing:.04em;text-align:left;transition:background var(--fast) ease}
.opt:hover{background:rgba(23,23,23,.025)}
.opt::before{content:"";flex:none;width:18px;height:18px;border:1px solid #BDBDBD;border-radius:50%;transition:background var(--fast) ease,border-color var(--fast) ease}
.grp.multi .opt::before{border-radius:5px}
.opt.on::before{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3L9.5 3.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--ink)}
.opt .pc{margin-left:auto;color:var(--grey);font-size:13px}
/* folded add-ons: the title is the toggle, picks listed in orange under it */
.grp.fold .lbl{cursor:pointer;border-bottom-color:var(--line)}
.grp.fold .lbl span::after{content:"  ＋";color:var(--grey)}
.grp.fold.open .lbl span::after{content:"  －"}
.grp.fold .opts{display:none}
.grp.fold.open .opts{display:block}
.grp .lbl .save{font-weight:400;color:var(--orange);letter-spacing:.06em;margin-left:10px;text-transform:none}
.grp .sum{display:block;font-size:12px;color:var(--orange);letter-spacing:.04em;margin-top:6px}
.grp .sum:empty{display:none}
.opt[aria-disabled="true"]{opacity:.4}
/* family combo: picked dishes as cards (each with its own must-pick choices), the list to pick from below (2026-10-29) */
.grp.combo .opt.add::before{border:0;border-radius:0;background:none;content:"+";font-size:20px;line-height:18px;text-align:center;color:var(--grey)}
.cpk{margin:10px 0 2px;padding:8px 12px 10px;border:1px solid var(--ink);border-radius:12px}
.cpk-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;letter-spacing:.04em}
.cpk-h .pc{color:var(--grey);font-size:13px;margin-left:8px}
.cpk .rm{flex:none;font-size:12px;letter-spacing:.12em;color:var(--mute);border-bottom:1px solid var(--line)}
.cpk .clbl{font-size:12px;letter-spacing:.12em;color:var(--mute);margin-top:8px}
.cpk .clbl em{font-style:normal;font-size:11px;letter-spacing:.06em}
.cpk .opt{min-height:38px;font-size:13px}
.note{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font:inherit;letter-spacing:inherit;color:var(--ink);background:var(--white);resize:none;min-height:56px}
.note:focus,.fld input:focus,.fld select:focus{outline:none;border-color:var(--ink)}
.qty{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:9999px;height:44px;padding:0 6px}
.qty button{width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.qty span{min-width:22px;text-align:center;font-size:15px}

/* bag bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--cream);border-top:1px solid var(--line);transform:translateY(110%);transition:transform var(--in) ease}
.bar.show{transform:none}
/* checkout: the chef (drawing 171) pushes his cart toward the button — mirrored so he faces it. Still picture, no animation (Di 2026-10-26: the chef never moves) */
.co-wrap{display:inline-flex;align-items:center;gap:6px}
.co-cart{width:70px;height:70px;pointer-events:none;transform:scaleX(-1);-webkit-user-drag:none}
.bar{-webkit-user-select:none;user-select:none}   /* a double-click on the bar must not paint a selection box over the chef */
@media (max-width:480px){.co-cart{width:56px;height:56px}}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--s2);padding-bottom:env(safe-area-inset-bottom)}
.bagbtn{display:inline-flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.1em}
.bagbtn svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bagbtn .n{position:absolute;margin-left:18px;margin-top:-22px;min-width:18px;height:18px;border-radius:9px;background:var(--ink);color:var(--white);font-size:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;letter-spacing:0}
.bagbtn .tot{letter-spacing:.12em}

/* bag lines (sheet + checkout) */
.lines{list-style:none}
.line{display:grid;grid-template-columns:1fr auto;gap:4px var(--s1);padding:14px 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line .nm{font-family:var(--hand);font-size:22px;line-height:1.05}
.line .ops{font-size:12px;color:var(--grey);margin-top:3px;letter-spacing:.06em}
.line .pr{font-size:14px;letter-spacing:.12em;text-align:right}
.line .ctl{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.line .rm{font-size:12px;letter-spacing:.12em;color:var(--mute);border-bottom:1px solid var(--line)}
.qty.sm{height:34px}.qty.sm button{width:28px;height:28px;font-size:17px}

/* checkout */
.co{padding:var(--s2) 0 var(--s5)}
.co .wrap{max-width:720px}
.co h1{font-size:clamp(34px,4vw,48px);margin-bottom:var(--s2)}
.card-b{background:var(--white);border-radius:18px;padding:var(--s2);margin-bottom:var(--s1)}
.card-b h3{font-size:13px;letter-spacing:.14em;font-weight:400;color:var(--grey);margin-bottom:12px;text-transform:lowercase}
.store{display:flex;justify-content:space-between;gap:var(--s2);align-items:flex-start}
.store .hand{font-size:26px;line-height:1.05}
.store .sm{margin-top:4px}
.store .q{font-size:13px;color:var(--ink);margin-top:10px}
.store .q b{font-weight:400;letter-spacing:.12em}
.fld{display:grid;gap:12px}
.fld label{display:grid;gap:6px;font-size:12px;letter-spacing:.14em;color:var(--grey)}
.fld input,.fld select{border:1px solid var(--line);border-radius:12px;height:46px;padding:0 14px;font:inherit;letter-spacing:.04em;color:var(--ink);background:var(--white);width:100%}
.fld .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.fld .two{grid-template-columns:1fr}}
.tips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tips button{height:44px;border:1px solid var(--line);border-radius:12px;font-size:13px;letter-spacing:.08em;transition:all var(--fast) ease}
.tips button.on{border-color:var(--ink);background:var(--ink);color:var(--white)}
.tips input{height:44px;border:1px solid var(--line);border-radius:12px;padding:0 10px;font:inherit;width:100%;text-align:center}
.tots{display:grid;gap:8px;font-size:14px;letter-spacing:.08em}
.tots div{display:flex;justify-content:space-between}
.tots .big{font-size:18px;letter-spacing:.12em;padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
#card{min-height:92px}
.pay-alt{display:grid;gap:10px;margin-top:12px}
#gpay,#apay{min-height:48px}
#apay{display:none;-webkit-appearance:-apple-pay-button;appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;border-radius:9999px;height:48px}
.err{min-height:1em;margin-top:10px}
/* when something goes wrong it shows as a pale orange sticky note with a circled "!" (Di 2026-10-27; was small red text) */
.err:not(:empty){display:flex;gap:10px;align-items:flex-start;background:#FFE9D6;color:var(--ink);font-family:var(--hand);font-size:19px;letter-spacing:.03em;line-height:1.25;padding:10px 14px;margin-top:14px;transform:rotate(-.6deg);box-shadow:2px 6px 10px -6px rgba(43,37,34,.35)}
.err:not(:empty)::before{content:"!";flex:none;width:24px;height:24px;border:2px solid var(--orange);border-radius:50%;color:var(--orange);font-size:17px;line-height:20px;text-align:center}
.legal{font-size:12px;color:var(--mute);letter-spacing:.04em;margin-top:12px}
.co .btn.wide{margin-top:var(--s1);min-height:52px}
.toggle{font-size:12px;letter-spacing:.14em;color:var(--mute);border-bottom:1px solid var(--line);white-space:nowrap}

/* track */
.tk{padding:var(--s3) 0 var(--s5);text-align:center}
.tk .wrap{max-width:560px}
.tk .no{font-size:clamp(72px,14vw,120px);line-height:1}
.tk .sm{margin-top:4px}
.steps3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:var(--s3) 0 var(--s2);position:relative}
.steps3::before{content:"";position:absolute;left:16%;right:16%;top:36px;height:1px;background:var(--line)}
.st{position:relative}
.st svg{width:72px;height:72px;margin:0 auto 6px;display:block;stroke:var(--mute);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;background:var(--cream);border-radius:50%;padding:6px;transition:stroke var(--in) ease}
.st .hand{font-size:22px;color:var(--mute);transition:color var(--in) ease}
.st.on svg{stroke:var(--ink)}
.st.on .hand{color:var(--ink)}
.st.now svg{stroke:var(--orange)}
.tk .msg{font-size:15px;margin-top:var(--s1)}
.tk .card-b{text-align:left;margin-top:var(--s2)}
.tk .acts{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s1)}
.tk .acts a{font-size:13px;letter-spacing:.14em;border-bottom:1px solid var(--orange);padding-bottom:1px}
.empty{color:var(--grey);padding:var(--s3) 0;text-align:center}
/* "we're closed" and "you have N sizzles": pale orange sticky notes, a little crooked (Di 2026-10-27, picked of three) */
.closed{text-align:center;padding:14px var(--s2) 6px}
.closed span{display:inline-block;background:#FFE9D6;color:var(--ink);font-family:var(--hand);font-size:clamp(17px,2vw,21px);letter-spacing:.04em;padding:10px 20px;transform:rotate(.8deg);box-shadow:2px 6px 10px -6px rgba(43,37,34,.35)}
.closed i{font-style:normal}
.closed .moon{width:20px;height:20px;vertical-align:-4px;margin-right:8px;fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- rewards (member.html) — phase 3 ---- */
.mb-top{padding-top:var(--s2)}
.mb-bal{display:flex;align-items:baseline;gap:10px;margin-top:2px}
.mb-bal .hand{font-size:clamp(64px,14vw,96px);line-height:1}
.mb-can{font-size:16px;letter-spacing:.06em;margin-top:6px}
.mb-big{font-size:28px;margin:4px 0 8px}
.mb-bar{height:6px;border-radius:9999px;background:var(--cream);overflow:hidden;margin:14px 0 8px}
.mb-bar i{display:block;height:100%;background:var(--orange);border-radius:9999px}
.tix{display:grid;gap:10px}
.tix-t{display:grid;grid-template-columns:92px 1fr;border:1px dashed var(--line);border-radius:14px;overflow:hidden;color:var(--mute)}
.tix-t.on{border-style:solid;border-color:var(--ink);color:var(--ink)}
.tix-p{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 6px;border-right:1px dashed var(--line);background:var(--cream)}
.tix-t.on .tix-p{background:var(--ink);color:var(--white);border-right-color:var(--ink)}
.tix-p b{font-family:var(--hand);font-weight:400;font-size:28px;line-height:1}
.tix-p span{font-size:11px;letter-spacing:.12em}
.tix-n{padding:12px 14px;font-size:15px;letter-spacing:.04em;display:flex;flex-direction:column;justify-content:center;gap:4px}
.tix-n span{font-size:12px;letter-spacing:.1em;color:var(--mute)}
.tix-t.on .tix-n span{color:var(--orange)}
.mb-hist{display:grid;gap:8px;font-size:14px;letter-spacing:.04em}
.mb-hist div{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mb-hist div:last-child{border-bottom:0}
.mb-hist b{font-weight:400}
.mb-hist b.neg{color:var(--mute)}
.earn{display:flex;gap:10px;align-items:flex-start;font-size:13px;letter-spacing:.04em;color:var(--ink);margin-top:4px}
.earn input{width:18px;height:18px;margin-top:1px;accent-color:var(--ink);flex:none}
.pts-banner{display:inline-block;background:#FFE9D6;color:var(--ink);font-family:var(--hand);font-size:clamp(19px,2vw,22px);letter-spacing:.04em;padding:12px 20px;margin:0 0 var(--s1);transform:rotate(-1.2deg);box-shadow:2px 6px 10px -6px rgba(43,37,34,.35)}
.pts-banner b{font-family:var(--hand);font-weight:400;font-size:28px;color:var(--orange)}

/* rewards — hand-drawn touches: the chef sits inside each card's top-right corner (one background behind it), a squiggle under the title */
.mb .card-b{position:relative}
/* rewards and checkout pages, made like the rest of the site (Di 2026-10-27): paper cards with a pen outline, handwritten titles,
   fields written on a pen line, buttons outlined by hand. The outlines are drawn per element by assets/ink.js (--ln, --lb). */
.co .card-b{position:relative;background:#FBFAF6;border-radius:4px;box-shadow:4px 5px 0 rgba(43,37,34,.08);margin-bottom:var(--s3);padding:var(--s3) var(--s3) var(--s2)}
.co .card-b::after{content:"";position:absolute;inset:-8px;pointer-events:none;background:var(--ln) center/100% 100% no-repeat}
.co .card-b h3{font-family:var(--hand);font-size:clamp(24px,2.4vw,30px);letter-spacing:.04em;color:var(--ink);text-transform:none;margin-bottom:10px}
.co .fld input:not([type=checkbox]),.co .fld select{border:0;border-radius:0;height:46px;padding:0 4px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C40 3 80 6 120 4.5S200 3 240 5 290 4 298 4.6' fill='none' stroke='rgba(43,37,34,.55)' stroke-width='1.3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom/100% 8px no-repeat;font-family:var(--hand);font-size:24px;letter-spacing:.06em}
.co .fld input::placeholder{color:#B9B2AA}
.co .fld input:focus,.co .fld select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C40 3 80 6 120 4.5S200 3 240 5 290 4 298 4.6' fill='none' stroke='rgba(43,37,34,.9)' stroke-width='1.3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.co .btn-ink{position:relative;background:transparent var(--lb) center/100% 100% no-repeat;color:var(--ink);font-family:var(--hand);font-size:24px;letter-spacing:.04em;border-radius:0}
.co .btn-ink:hover{background-color:rgba(254,118,19,.08);opacity:1}
/* checkout only: tip choices in hand-drawn boxes (the chosen one coloured in), the total handwritten under a dashed pen line,
   and "pay" in orange — the one order action on the page */
.co .tips button{position:relative;border:0;border-radius:0;background:transparent var(--lb) center/100% 100% no-repeat;font-family:var(--hand);font-size:20px;color:var(--ink)}
.co .tips button.on{background:var(--lb) center/100% 100% no-repeat,var(--fl,none) center/100% 100% no-repeat;color:var(--ink)}
.co .tips input{border:0;border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C40 3 80 6 120 4.5S200 3 240 5 290 4 298 4.6' fill='none' stroke='rgba(43,37,34,.55)' stroke-width='1.3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom/100% 8px no-repeat;font-family:var(--hand);font-size:20px}
.co .tots .big{font-family:var(--hand);font-size:30px;letter-spacing:.04em;border-top:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 6' preserveAspectRatio='none'%3E%3Cpath d='M2 3C60 2 120 4 180 3S270 2 298 3.4' fill='none' stroke='rgba(43,37,34,.4)' stroke-width='1.1' stroke-dasharray='4 6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left top/100% 6px no-repeat;padding-top:14px}
.co #pay{--fl:none;background:var(--lb) center/100% 100% no-repeat,var(--fl) center/100% 100% no-repeat;color:var(--ink);font-size:28px;min-height:58px}
.co #pay:hover{filter:saturate(1.8) brightness(.96)}
.co #pay[disabled]{opacity:.35}
.co h1.hand{font-size:clamp(40px,5vw,60px)}
/* the earn-sizzles box: drawn by hand, on the same line as its words, ticked in orange (Di 2026-10-27) */
.co .fld label.earn{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.04em;color:var(--ink);margin-top:8px;cursor:pointer}
.co .fld label.earn input{-webkit-appearance:none;appearance:none;flex:none;width:28px;height:28px;margin:0;border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M5 6C12 4.6 19 5.4 25.6 4.8C26 12 25 19 25.8 25.4C18 26 12 25.2 4.6 25.8C5.2 19 4.2 12 5 6' fill='none' stroke='rgba%2843,37,34,.6%29' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;cursor:pointer}
.co .fld label.earn input:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M7 15C9.5 17 11 19.5 12.6 22.4C15.6 15 20.6 8.4 28 2.6' fill='none' stroke='%23FE7613' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 4px -5px/30px 30px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M5 6C12 4.6 19 5.4 25.6 4.8C26 12 25 19 25.8 25.4C18 26 12 25.2 4.6 25.8C5.2 19 4.2 12 5 6' fill='none' stroke='rgba%2843,37,34,.6%29' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.co .fld label.earn input:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media (max-width:480px){.co .card-b{padding:var(--s2)}.co .tips{grid-template-columns:repeat(3,1fr);gap:12px 10px}.co .tips button,.co .tips input{font-size:19px}}
/* rewards as a punch card: one hand-drawn circle per reward, the ones you've reached scribbled in orange (Di 2026-10-27) */
.mb .tix{grid-template-columns:repeat(3,1fr);gap:22px 12px}
/* the reward tickets and the big balance are pictures, not text to copy: a tap on a phone must not select a word and pop up Google search (Di 2026-10-27) */
.mb .tix,.mb-bal{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mb .tix-t,.mb .tix-t.on{display:flex;flex-direction:column;align-items:center;text-align:center;border:0;border-radius:0;background:none;overflow:visible;color:var(--ink)}
.mb .tix-p,.mb .tix-t.on .tix-p{width:96px;height:96px;padding:0;border:0;color:var(--ink);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M62 8C34 2 8 20 7 49C6 78 28 94 52 93C79 92 95 72 93 46C91 22 72 7 46 9C40 10 35 12 31 15' fill='none' stroke='rgba%2843,37,34,.55%29' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.mb .tix-t.on .tix-p{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M62 8C34 2 8 20 7 49C6 78 28 94 52 93C79 92 95 72 93 46C91 22 72 7 46 9C40 10 35 12 31 15' fill='none' stroke='rgba%2843,37,34,.75%29' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24 30L40 18M18 46L58 14M16 62L72 18M20 76L84 26M30 86L88 40M44 90L90 56M60 90L86 70' stroke='rgba%28254,118,19,.35%29' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center/86% 86% no-repeat}
.mb .tix-p b{font-size:34px}
.mb .tix-n{padding:8px 0 0;align-items:center;font-family:var(--hand);font-size:22px;letter-spacing:.04em}
.mb .tix-n span{font-family:var(--body);font-size:12px}
.mb .tix-t.on .tix-n span{color:var(--orange)}
.mb .tix-t:not(.on) .tix-p b,.mb .tix-t:not(.on) .tix-n{color:var(--mute)}
@media (max-width:480px){.mb .tix{grid-template-columns:repeat(2,1fr)}}
.mb-chef{float:right;height:124px;width:auto;margin:0 0 6px 12px;pointer-events:none}
.mb .card-b .fld,.mb .card-b .mb-bar,.mb .card-b>.btn{clear:both}
.mb-h1{position:relative;display:inline-block}
.mb-name{text-transform:none}
.mb .card-b h3.mb-hi{font-family:var(--hand);font-size:26px;letter-spacing:.04em;color:var(--ink);margin-bottom:4px}
.mb-squig{position:absolute;left:0;bottom:-10px;width:100%;height:14px;overflow:visible}
.mb-squig path{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round}
.mb-empty{display:flex;align-items:center;gap:12px}
.mb-empty img{width:84px;height:auto}
@media (max-width:520px){.mb-chef{height:100px}}
/* phone: the little chef sits in the card's top-right corner beside the title only, so the words below get the full width (Di 2026-10-27) */
@media (max-width:767px){
  .mb .card-b{position:relative}
  .mb .card-b > .mb-chef{float:none;position:absolute;top:18px;right:18px;height:64px;margin:0}
  .mb .card-b:has(> .mb-chef) > h3{padding-right:76px;min-height:58px}
}
/* "about you": name, birthday and email in one form */
#aboutform .lbl{display:block;margin-top:14px}
#bdf{display:grid;gap:12px}
#aboutform .two{grid-template-columns:1fr 1fr}
#aboutform .bnote{margin-top:-6px;color:var(--mute)}
#aboutform .btn{margin-top:18px}
/* post for sizzles: a link, or a screenshot picked with a dashed drop box (rule 10) */
#post{scroll-margin-top:90px}   /* the reminder text lands on member.html#post: keep the title clear of the sticky header */
/* checkout: pay with a gift card (rule 9) */
.co .gcl{margin-top:14px;text-align:center}
.co #gcbox{display:grid;gap:12px;margin-top:10px}
.co #gcbox[hidden]{display:none}
#postform{display:grid;gap:12px}
#postform .lbl{display:block;margin-top:2px}
#postform .pfile{display:block;position:relative;border:1.5px dashed rgba(43,37,34,.35);border-radius:6px;padding:14px;text-align:center;cursor:pointer;font-family:var(--hand);font-size:20px;color:var(--ink)}
#postform .pfile input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
#postform #pprev{max-width:140px;max-height:220px;border-radius:4px;box-shadow:2px 3px 0 rgba(43,37,34,.08);justify-self:center}
#postform .btn{margin-top:6px}

/* the dish sheet and the bag, hand-drawn but kept light (Di 2026-10-27: 风格不要太重): paper, a faint pen outline just inside
   the edge, faint pen lines between options and bag lines, hand-drawn choice marks, add to bag / checkout lightly tinted orange.
   The outlines on the sheets and those buttons are drawn per element by assets/ink.js (--ln, --lb). */
.sheet{background:#FBFAF6;border-radius:8px 8px 0 0}
@media (min-width:768px){.sheet{border-radius:8px}}
.sheet::after{content:"";position:absolute;inset:6px;pointer-events:none;z-index:3;background:var(--ln) center/100% 100% no-repeat}
.sheet .ft{background:transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%206%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%203.4C50%202.4%20100%204%20150%203S250%202.4%20298%203.4%22%20fill%3D%22none%22%20stroke%3D%22rgba(43%2C37%2C34%2C.3)%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E") left top/100% 6px no-repeat;border-top:0}
.dish .pic img.photo{border-radius:4px;box-shadow:4px 5px 0 rgba(43,37,34,.08)}
.grp .lbl{border-bottom:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%206%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%203.4C50%202.4%20100%204%20150%203S250%202.4%20298%203.4%22%20fill%3D%22none%22%20stroke%3D%22rgba(43%2C37%2C34%2C.55)%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E") left bottom/100% 6px no-repeat}
.grp.fold .lbl{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%206%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%203.4C50%202.4%20100%204%20150%203S250%202.4%20298%203.4%22%20fill%3D%22none%22%20stroke%3D%22rgba(43%2C37%2C34%2C.3)%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E")}
.opt{border-bottom:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%206%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%203.4C50%202.4%20100%204%20150%203S250%202.4%20298%203.4%22%20fill%3D%22none%22%20stroke%3D%22rgba(43%2C37%2C34%2C.18)%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E") left bottom/100% 6px no-repeat}
.opt::before,.grp.multi .opt::before{width:22px;height:22px;border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M19%204.2C11%202.8%203.8%208.6%204%2015.4C4.2%2022%209.6%2026.4%2015.8%2026C22.6%2025.6%2026.6%2020.2%2026%2014C25.4%207.8%2020%203.8%2013.6%204.6%22%20fill%3D%22none%22%20stroke%3D%22rgba(43%2C37%2C34%2C.5)%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.grp.multi .opt::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M5%206C12%204.6%2019%205.4%2025.6%204.8C26%2012%2025%2019%2025.8%2025.4C18%2026%2012%2025.2%204.6%2025.8C5.2%2019%204.2%2012%205%206%22%20fill%3D%22none%22%20stroke%3D%22rgba(43%2C37%2C34%2C.5)%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}
.opt.on::before{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M11%2013.6C12.6%2010.6%2018%2010.4%2019.4%2014C20.6%2017.4%2016.6%2020.4%2013.4%2019.2C10.6%2018.2%2010.4%2015.6%2011.6%2014%22%20fill%3D%22%23FE7613%22%20stroke%3D%22%23FE7613%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M19%204.2C11%202.8%203.8%208.6%204%2015.4C4.2%2022%209.6%2026.4%2015.8%2026C22.6%2025.6%2026.6%2020.2%2026%2014C25.4%207.8%2020%203.8%2013.6%204.6%22%20fill%3D%22none%22%20stroke%3D%22rgba(43%2C37%2C34%2C.5)%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.grp.multi .opt.on::before{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M7%2015C9.5%2017%2011%2019.5%2012.6%2022.4C15.6%2015%2020.6%208.4%2028%202.6%22%20fill%3D%22none%22%20stroke%3D%22%23FE7613%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3px -4px/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M5%206C12%204.6%2019%205.4%2025.6%204.8C26%2012%2025%2019%2025.8%2025.4C18%2026%2012%2025.2%204.6%2025.8C5.2%2019%204.2%2012%205%206%22%20fill%3D%22none%22%20stroke%3D%22rgba(43%2C37%2C34%2C.5)%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.qty{border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M4%204.6C30%203.4%2070%204.4%2096%203.8C96.6%2012%2095.8%2019%2096.4%2026.2C70%2026.8%2030%2025.8%203.6%2026.4C4.2%2019%203.4%2012%204%204.6%22%20fill%3D%22none%22%20stroke%3D%22rgba(43%2C37%2C34%2C.4)%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.qty span{font-family:var(--hand);font-size:20px}
#add,#co1,#co2{--fl:none;background:var(--lb) center/100% 100% no-repeat,var(--fl) center/100% 100% no-repeat;color:var(--ink);font-family:var(--hand);font-size:clamp(18px,4.8vw,22px);white-space:nowrap;letter-spacing:.04em;border-radius:0}
#add:hover,#co1:hover,#co2:hover{opacity:1;filter:saturate(1.8) brightness(.96)}
.line{border-bottom:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%206%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%203.4C50%202.4%20100%204%20150%203S250%202.4%20298%203.4%22%20fill%3D%22none%22%20stroke%3D%22rgba(43%2C37%2C34%2C.18)%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E") left bottom/100% 6px no-repeat}
.line:last-child{background:none}

/* pickup page, same light hand-drawn style (Di 2026-10-27): the customer's name written big under the pickup number,
   the order card as paper with a faint pen outline (drawn by assets/ink.js into --ln), the total handwritten */
.tk .card-b{position:relative;background:#FBFAF6;border-radius:4px;box-shadow:4px 5px 0 rgba(43,37,34,.08);padding:var(--s3)}
.tk .card-b::after{content:"";position:absolute;inset:-8px;pointer-events:none;background:var(--ln) center/100% 100% no-repeat}
.tk .tots .big{font-family:var(--hand);font-size:28px;letter-spacing:.04em;border-top:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%206%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%203C60%202%20120%204%20180%203S270%202%20298%203.4%22%20fill%3D%22none%22%20stroke%3D%22rgba(43%2C37%2C34%2C.35)%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%224%206%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E") left top/100% 6px no-repeat;padding-top:12px}
.tk .card-b h3{font-family:var(--hand);font-size:24px!important;color:var(--ink)}
.tk .who{font-family:var(--hand);font-size:clamp(30px,5vw,40px);line-height:1.1;margin-top:2px}

/* checkout in fewer cards (Di 2026-10-27): store + pickup time in one, details fold to one line for members, order·tip·total·pay in one */
.ck .store{display:block}
.ck .store .hand{padding-right:96px}
.ck .store>a.toggle{position:absolute;right:var(--s3);top:var(--s3)}
.ck .store .pick{margin-top:10px}
.ck .more{display:flex;gap:18px;font-size:13px;letter-spacing:.06em;margin:10px 0 8px}
.ck .fld label.earn{margin-top:4px}
.ck .cardname{margin:4px 0 14px}
.ck #card{position:relative;margin:6px 0 4px;padding:2px 6px}
.ck #card::after{content:"";position:absolute;top:-6px;left:-6px;right:-6px;height:calc(var(--ch,100%) + 12px);pointer-events:none;background:var(--lb) center/100% 100% no-repeat}
.ck .pay-alt{margin-top:18px}
.ck #pay{margin-top:18px}
.ck .more button{color:var(--grey);border-bottom:1px solid var(--line)}
.ck .me{font-family:var(--hand);font-size:22px;line-height:1.35;letter-spacing:.03em}
.ck .me .toggle{margin-left:8px}
.ck .me .sm{font-family:var(--body);font-size:13px;color:var(--grey);letter-spacing:.06em}
.ck .me .ok{color:var(--orange)}
.ck .card-b .sub{font-family:var(--hand);font-size:22px;font-weight:400;letter-spacing:.04em;color:var(--ink);margin:20px 0 8px}
.ck .card-b .tots{margin:18px 0 14px}
@media (max-width:480px){.ck .store>a.toggle{right:var(--s2);top:var(--s2)}}
@media (max-width:767px){
  .ck{padding-top:var(--s1)}.ck h1.hand{font-size:34px;margin-bottom:var(--s1)}
  .ck .card-b{margin-bottom:22px;padding:18px 16px 14px}.ck .card-b h3{font-size:22px;margin-bottom:6px}
  .ck .store>a.toggle{right:16px;top:18px}.ck .store .hand{font-size:22px}
  .ck .fld{gap:8px}.ck .fld .two{grid-template-columns:1fr 1fr}
  .ck .fld input:not([type=checkbox]),.ck .fld select{height:40px;font-size:20px}
  .ck .line{padding:8px 0}.ck .pay-alt{margin-top:8px}.ck .legal{font-size:11px}
  .ck .card-b .sub{font-size:20px;margin-top:16px}
}
/* checkout: no full footer while paying — just the phone and "tell us" in one small line (Di 2026-10-27) */
.co.ck{padding-bottom:var(--s2)}
footer.ck-foot{padding:0 0 var(--s4)}
footer.ck-foot .wrap{display:block;max-width:720px;text-align:center}
footer.ck-foot .sm{color:var(--grey);line-height:1.6}
footer.ck-foot .sm + .sm{margin-top:6px}
footer.ck-foot a{white-space:nowrap}
/* pickup page: "show this number" sits under the name; the one-line footer follows the receipt closely */
.tk .show{margin-top:6px;color:var(--ink)}
.tk{padding-bottom:var(--s3)}

/* checkout: spend sizzles — one reward per order, rows drawn like the tip buttons (Di 2026-10-27) */
.co .rwl{display:grid;gap:10px;margin-bottom:var(--s2)}
.co .rwl button{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;min-height:46px;padding:8px 16px;text-align:left;border:0;background:transparent var(--lb) center/100% 100% no-repeat;font-family:var(--hand);font-size:20px;color:var(--ink)}
.co .rwl button.on{background:var(--lb) center/100% 100% no-repeat,var(--fl,none) center/100% 100% no-repeat}
.co .rwl button > span:first-child{flex:1 1 auto}
.co .rwl .rwp{font-family:var(--body);font-size:12px;letter-spacing:.06em;color:var(--grey);white-space:nowrap}
.co .rw .sub .sm{font-family:var(--body);text-transform:none;letter-spacing:.04em;color:var(--grey)}
.co .tots .rwline span,.tk .tots .rwline span{color:var(--orange)}
.co .tots.wait{opacity:.4;transition:opacity .15s ease}   /* re-pricing after a reward tap: old numbers stay, dimmed */

/* pop-up over a dimmed page (rules 6–7, Di 2026-10-27) */
.pop{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto;background:rgba(43,37,34,.28);opacity:0;transition:opacity .2s ease}
.pop.show{opacity:1}
/* the pen outline sits 8px outside the card, so the card must not clip or scroll; a tall card scrolls the dimmed layer instead */
.pop .pop-card{position:relative;width:min(420px,100%);margin:auto;background:#FBFAF6;text-align:center;outline:none}
.pop .pop-acts{display:grid;gap:10px;margin-top:18px}
.pop .pop-light{background:transparent;border:0;font:inherit;letter-spacing:.12em;color:var(--grey);text-decoration:underline;text-underline-offset:4px;padding:8px}
.pop .stamp{display:inline-block;transform:rotate(-8deg);border:2px solid var(--orange);color:var(--orange);border-radius:50%;padding:14px 18px;font-size:22px;margin-bottom:8px}
/* welcome tickets: tear-off stubs */
.tkts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.tkts{grid-template-columns:1fr}}
.tkt{position:relative;display:grid;gap:2px;padding:14px 14px 12px;text-align:left;background:var(--lb,none) center/100% 100% no-repeat,#fff8f1;border-left:2px dashed rgba(254,118,19,.45)}
.tkt b{font-size:30px;line-height:1;color:var(--orange);font-weight:400}
.tkt .tkt-for{font-size:19px;color:var(--ink)}
.tkt small{font-size:11px;letter-spacing:.06em;color:var(--grey);margin-top:6px}
.soon{color:#C8341E;font-weight:500}   /* a ticket's last 3 days (rule 12) */
.tkt .tkt-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.mb-gift{margin-top:8px}
.mb .mb-later{display:block;margin:12px auto 0}