/* Layout: a reading column of ink and gold, with the phone prototype breaking out as a lit stage.
   Single dark theme on purpose - the product is a night menu and every film is shot on black. */
:root{
  --ink:#0D100F; --ink-2:#141917; --ink-3:#1B211E; --line:#2A312E; --line-2:#3A443F;
  --cream:#F3EEE6; --cream-dim:rgba(243,238,230,.66); --cream-faint:rgba(243,238,230,.40);
  --gold:#C9A227; --gold-soft:#E0C06A; --oxblood:#9B1B1B; --jade:#2EC4B6;
  --good:#4E9A5B; --warn:#C9A227; --bad:#C4553E;
  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* motion tokens (19 Oct, claude/gd-motion-spec-18oct.md): micro 120-200 ms, state 200-300 ms */
  --micro:160ms; --state:220ms; --ease:cubic-bezier(.2,.7,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}

.tnum{font-variant-numeric:tabular-nums}

/* ---- phone internals: inventory UI over an unveiled film ---- */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--body);color:var(--cream)}
.filmlayer{position:absolute;inset:0;overflow:hidden;background:#000}
.filmlayer video,.filmlayer .filmstill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
/* Most dishes have a photograph and no footage. A still is a film with one frame. */
.filmlayer .filmstill{background-size:cover;background-position:center}
.filmlayer .on{opacity:1}
.stilllayer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .35s ease;pointer-events:none}
.stilllayer.on{opacity:1}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(135% 85% at 50% 42%,transparent 42%,rgba(5,7,6,.60) 100%)}
.pendbadge{position:absolute;z-index:5;top:92px;right:10px;font:600 8px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(243,238,230,.5);background:rgba(8,10,9,.55);
  border:1px solid rgba(243,238,230,.18);backdrop-filter:blur(8px);padding:4px 6px}
.pendbadge[hidden]{display:none}

.seal{display:block;object-fit:contain}
.sealmount{display:grid;place-items:center;flex:0 0 auto}
.wm{font-family:var(--display);letter-spacing:.05em;line-height:1;font-size:14px}
.wm em{font-style:normal;color:var(--cream)}
.wm b{color:var(--gold-soft);font-weight:600}

/* header carries identity, state and the bag */
.homebtn{flex:1;min-width:0;min-height:38px;display:flex;align-items:center;gap:8px;padding:2px 4px 2px 0;
  background:transparent;border:0;cursor:pointer;color:inherit;text-align:left}
.homebtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mebtn{position:relative;flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  background:rgba(8,10,9,.5);border:1px solid rgba(243,238,230,.26);color:var(--cream-dim);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.mebtn .ico{width:19px;height:19px;color:inherit}
.mebtn .dot{position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.mebtn .ini{font:700 12px/1 var(--mono);color:#17120A}
.mebtn.in{background:var(--gold);border-color:var(--gold)}
.ph-top{position:relative;z-index:5;display:flex;align-items:center;gap:7px;padding:8px 9px 7px;
  background:rgba(6,8,7,.62);backdrop-filter:blur(14px);border-bottom:1px solid rgba(243,238,230,.10)}
.idblock{min-width:0;display:block}
.ph-status{display:block}
.ph-status{margin-top:3px;font:600 8.5px/1 var(--mono);letter-spacing:.1em;color:var(--cream-dim)}
.ph-status b{color:#5FD08A}.ph-status b.shut{color:#E8775F}
.bagchip{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:7px 10px;cursor:pointer;
  background:rgba(8,10,9,.5);border:1px solid rgba(243,238,230,.26);color:var(--cream-dim);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.bagchip .ico{width:15px;height:15px}
.bagchip .bn{font:700 11px/1 var(--mono);min-width:9px;text-align:center}
.bagchip{min-height:38px}
.bagchip .bt{font:700 11.5px/1 var(--mono);letter-spacing:0}
.bagchip.has{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,162,39,.14)}
.bagchip[disabled]{cursor:default}

/* the icon rail: no labels, learned by shape */
.iconrail{position:relative;z-index:5;display:flex;gap:2px;padding:5px;overflow:hidden;
  background:rgba(6,8,7,.5);backdrop-filter:blur(12px);border-bottom:1px solid rgba(243,238,230,.08)}
.rchip{flex:1 1 0;min-width:0;height:44px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;padding:0 1px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:rgba(243,238,230,.56);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.rchip .ico{width:18px;height:18px;flex:0 0 auto}
.rchip .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;
  font:600 6.3px/1 var(--mono);letter-spacing:0;text-transform:uppercase}
.rchip.on{color:var(--gold);border-color:var(--gold);background:rgba(201,162,39,.16)}

.subbar{position:relative;z-index:5;display:flex;align-items:center;gap:8px;padding:7px 10px 2px;min-height:14px}
.backbtn{display:flex;align-items:center;gap:4px;flex:0 0 auto;max-width:112px;height:32px;padding:0 9px 0 7px;
  cursor:pointer;color:var(--cream);background:rgba(8,10,9,.5);border:1px solid rgba(243,238,230,.26);
  backdrop-filter:blur(8px);overflow:hidden;white-space:nowrap;min-height:32px;
  font:700 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.backbtn .ar{font-size:13px;line-height:1;letter-spacing:0}
.backbtn[hidden]{display:none}
/* the crumb gets its own frosted chip rather than floating on the film: a dragon's whisker
   running behind 9px type was making it unreadable, and the answer is a surface, not a scrim */
.crumb{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:9px 8px;background:rgba(8,10,9,.5);border:1px solid rgba(201,162,39,.34);backdrop-filter:blur(8px);
  font:700 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.crumb:empty{display:none}
.sbgap{flex:1;min-width:4px}
/* the crumb always holds its place so the controls stay right-aligned */

.ph-stage{position:relative;z-index:4;flex:1;overflow-y:auto;scrollbar-width:none;
  display:flex;flex-direction:column;gap:8px;padding:6px 10px 10px}
.ph-stage::-webkit-scrollbar{display:none}
.ph-stage > *:first-child{margin-top:auto}
/* a column flexbox shrinks its children when the content is taller than the box, which was
   silently crushing the checkout rows. Nothing in the stage flexes. */
.ph-stage > *{flex:0 0 auto}
.ph-foot{position:relative;z-index:5;padding:0 10px}
.ph-foot:empty{display:none}

/* one surface language */
.panel,.cat,.cell,.gtab,.addchip,.qline{background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.26);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--cream)}
.cat,.cell,.gtab,.addchip{cursor:pointer;transition:border-color .12s,background .12s}
.cat:focus-visible,.cell:focus-visible,.gtab:focus-visible,.add:focus-visible,.rchip:focus-visible,
.open:focus-visible,.quick:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.off{opacity:.34;cursor:default}
.ico{width:24px;height:24px;color:var(--gold-soft)}
.cut{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}

.lockup{display:flex;align-items:center;gap:12px;padding:11px 12px;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.lockup .wm{font-size:22px}
.lockup .sm{display:block;margin-top:4px;font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}

.catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.cat{min-height:58px;padding:9px 8px;display:flex;align-items:center;gap:9px;text-align:left;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.cat .ct{flex:1;min-width:0}
.cat b{display:block;font-size:12px;font-weight:600;line-height:1.2}
.cat .subs{display:block;margin-top:2px;font:500 7.5px/1.4 var(--mono);letter-spacing:.01em;
  text-transform:uppercase;color:var(--gold-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat .ico{width:23px;height:23px;flex:0 0 23px}
.cat:hover{border-color:var(--gold)}

/* the sub-category switch: one joined control, full width, impossible to read as decoration */
.segnav{position:sticky;top:-6px;z-index:6;display:flex;margin:-2px 0 0;
  background:rgba(8,10,9,.74);border:1px solid rgba(201,162,39,.55);backdrop-filter:blur(12px);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.segb{flex:1 1 0;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:7px 4px;cursor:pointer;background:transparent;border:0;border-left:1px solid rgba(201,162,39,.32);
  color:var(--cream-dim)}
.segb:first-child{border-left:0}
.segb b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 10.5px/1.1 var(--body);letter-spacing:.01em}
.segb i{font-style:normal;font:600 7.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-faint)}
.segb.on{background:var(--gold);color:#17120A}
.segb.on i{color:rgba(23,18,10,.72)}
.segb.on + .segb{border-left-color:transparent}
.lockmsg{margin:0;font:600 9.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#E8775F;text-shadow:0 1px 6px rgba(0,0,0,.95)}

/* compact horizontal cells: the icon and two lines need no more room than this */
.itemgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;align-content:start}
.cell{position:relative;min-height:56px;padding:7px 8px;display:flex;align-items:center;gap:8px;text-align:left;
  overflow:hidden;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.cell .ic{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(201,162,39,.22),transparent 70%)}
.cell .ic .ico{width:20px;height:20px}
.cell .mid{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.cell .nm{font-size:11px;font-weight:600;line-height:1.2}
.cell .pr{font:700 11.5px/1 var(--mono);color:var(--gold-soft)}
.cell .pr em{font-style:normal;font-size:8px;color:var(--cream-faint);text-transform:uppercase}
.cell .tag{position:absolute;top:0;left:0;font:700 7.5px/1 var(--mono);color:#17120A;background:var(--gold);padding:2px 4px}
.cell.t1{border-color:rgba(201,162,39,.75)}
.cell.t2{border-color:rgba(201,162,39,.4)}
.cell.got{background:rgba(201,162,39,.14)}
@media (hover:hover){.cell:hover{border-color:var(--gold)}}
.cell .open{position:absolute;inset:0;background:transparent;border:0;cursor:pointer;z-index:1}
/* quick-add was 28x28 sitting inside a 290x52 target that does something else.
   It is the most-repeated control in the menu, so it gets the biggest box the cell can give it. */
.cell .quick{position:absolute;right:0;top:0;bottom:0;z-index:2;width:46px;display:grid;place-items:center;
  cursor:pointer;background:rgba(201,162,39,.14);border:0;border-left:1px solid rgba(201,162,39,.4);
  color:var(--gold-soft)}
.cell .quick .ico{width:19px;height:19px}
.cell .quick.on{background:var(--gold);color:#17120A}
.cell .quick b{font:700 13px/1 var(--mono)}
/* The + is absolutely placed over the cell's right edge and comes after the text in the markup, so
   a "~" rule never reached the text and long names ran under it (18 Oct, owner's screenshot).
   Reserve its width (46px) plus a gap from the text itself; the same for the quantity badge. */
.cell:has(.quick) .mid{padding-right:50px}
.cell:has(.qtyb) .mid{padding-right:26px}
.cell .nm{overflow-wrap:anywhere} /* only a word too long for its line breaks; it never runs under the + */
/* swipe (18 Oct): the stage leaves vertical scrolling to the browser and sideways to the menu. The
   pager under a section or a dish says where you are; its labels are buttons. */
@media (max-width:1023px){ .gd-stage{touch-action:pan-y} }
.pager{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;margin:2px 0 4px}
.pager .pgn{flex:1 1 0;min-width:0;min-height:30px;padding:0 2px;background:none;border:0;cursor:pointer;
  color:var(--cream-faint);font:500 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pager .pgn.pv{text-align:left}
.pager .pgn.nx{text-align:right}
.pager .pgd{flex:0 0 auto;display:flex;align-items:center;gap:4px;font:500 9px/1 var(--mono);color:var(--cream-faint)}
.pager .pgd i{width:5px;height:5px;border-radius:50%;background:rgba(243,238,230,.32);transition:width .2s,background .2s}
.pager .pgd i.on{width:14px;border-radius:3px;background:var(--gold)}
.swpeek{position:fixed;z-index:15;pointer-events:none;opacity:0;transition:opacity .15s;padding:6px 10px;max-width:60vw;
  background:rgba(8,10,9,.84);border:1px solid rgba(201,162,39,.55);color:var(--gold-soft);
  font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swpeek.r{right:8px;top:34%}
.swpeek.l{left:8px;top:34%}
.swpeek.t{left:50%;top:24%;transform:translateX(-50%)}
@media (min-width:1024px){ .pager,.swpeek{display:none} }
/* On a phone the cell is ~170px wide: a smaller dish icon and a slightly narrower + give the name
   the room the reserve takes (the + stays a 40px-wide, full-height target). */
@media (max-width:440px){
  .cell{padding:7px 6px;gap:6px}
  .cell .ic{width:24px;height:24px;flex:0 0 24px}
  .cell .ic .ico{width:16px;height:16px}
  .cell .quick{width:40px}
  .cell:has(.quick) .mid{padding-right:44px}
  .cell:has(.quick) .open{right:40px}
}
.cell:has(.quick) .open{right:46px}
.cell .qtyb{position:absolute;right:6px;top:6px;z-index:2;min-width:22px;height:22px;display:grid;place-items:center;
  border-radius:999px;background:var(--gold);color:#17120A;font:700 10px/1 var(--mono)}
.corner{position:absolute;width:6px;height:6px;border:1.4px solid var(--gold);opacity:0;transition:opacity .12s;z-index:2}
.corner.tl{top:3px;left:3px;border-right:0;border-bottom:0}
.corner.tr{top:3px;right:3px;border-left:0;border-bottom:0}
.corner.bl{bottom:3px;left:3px;border-right:0;border-top:0}
.corner.br{bottom:3px;right:3px;border-left:0;border-top:0}
.cell.on .corner{opacity:1}
/* a finger leaves :hover behind on a phone, so the spot just tapped showed the next screen's
   first option as picked while the button still said pick one (16 Oct) */
@media (hover:hover){.cell:hover .corner{opacity:1}}
.cell.on{border-color:var(--gold);background:rgba(201,162,39,.20)}

/* detail screen */
.media{position:relative;border:1px solid rgba(243,238,230,.26);overflow:hidden;aspect-ratio:16/9;flex:0 0 auto;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.mtrack{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.mtrack::-webkit-scrollbar{display:none}
.mpane{flex:0 0 100%;scroll-snap-align:start;background-size:cover;background-position:center;position:relative}
.mpane video{width:100%;height:100%;object-fit:cover;display:block}
.mdots{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);display:flex;gap:5px}
.mdots i{width:5px;height:5px;border-radius:50%;background:rgba(243,238,230,.4)}
.mdots i.on{background:var(--gold)}
.mhint{position:absolute;bottom:6px;right:8px;font:600 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-dim);background:rgba(6,8,7,.6);padding:4px 6px}
.mhint[hidden]{display:none}

.dhead{padding:10px 12px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.dtop{display:flex;align-items:baseline;gap:10px}
.dhead h5{font-family:var(--display);margin:0;font-size:22px;font-weight:600;flex:1;min-width:0}
.dpr{font:700 17px/1 var(--mono);color:var(--gold-soft)}
.dhead p{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--cream-dim)}
.dhead .dsub{display:block;margin-top:5px;font:500 9px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cream-faint)}

.qline{display:flex;align-items:center;gap:8px;padding:7px 11px;font:600 10px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--cream);background:rgba(8,10,9,.72);border:0;border-left:2px solid var(--gold);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.qline span{flex:1}
.qline .req{font-style:normal;color:var(--cream-dim);font-size:8.5px}
.qline .ok{font-style:normal;color:#5FD08A}

.addonrow{display:flex;gap:6px;flex-wrap:wrap}
.addchip{display:flex;align-items:center;gap:6px;padding:7px 9px;font-size:11px;font-weight:600;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.addchip .ico{width:15px;height:15px}
.addchip .p{font:700 10.5px/1 var(--mono);color:var(--gold-soft)}
.addchip.on{border-color:var(--gold);background:rgba(201,162,39,.2)}

.dfoot{display:flex;gap:7px;align-items:stretch;padding:8px 0 10px}
.qstep{display:flex;align-items:center;gap:2px;background:rgba(8,10,9,.55);border:1px solid rgba(243,238,230,.26);
  backdrop-filter:blur(10px);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.qstep .qb{width:32px;height:48px;background:transparent;border:0;color:var(--cream);font-size:16px;cursor:pointer}
.qstep b{min-width:18px;text-align:center;font:700 13px/1 var(--mono)}
.add{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:.02em;
  background:var(--gold);color:#17120A;border:1px solid var(--gold);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.add.off{background:rgba(8,10,9,.52);color:var(--cream-dim);border-color:rgba(243,238,230,.26);
  backdrop-filter:blur(10px);font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}

.mk{font-style:normal;font-size:9px;margin-left:4px}
.mk.hot{color:#E8775F}.mk.veg{color:#5FD08A}.mk.nut{color:#D9A463}
.flydot{position:fixed;z-index:9999;width:14px;height:14px;border-radius:50%;background:var(--gold);
  pointer-events:none;margin:-7px 0 0 -7px}

/* ============ tiers: the sales rank does the triage the grid used to refuse to do ============
   The rank number is always printed, so identity is never carried by colour alone.
   Gold 1-5, jade 6-10, blue 11-20 — the owner's own three bands.
   Separation computed in OKLab, not eyeballed: worst normal pair dE 19.3, worst CVD pair 12.5,
   lowest contrast against the ink surface 5.5:1. */
:root{--t1:#C9A227;--t2:#2EC4B6;--t3:#5C86E8}
.cell .rank{position:absolute;top:0;left:0;z-index:2;min-width:15px;padding:2px 3px;text-align:center;
  font:700 7.5px/1 var(--mono);color:#17120A;background:rgba(243,238,230,.7)}
.cell.g1 .rank{background:var(--t1)}
.cell.g2 .rank{background:var(--t2)}
.cell.g3 .rank{background:var(--t3);color:#0B0F1A}
.cell.g1{border-color:rgba(201,162,39,.78);box-shadow:inset 0 0 0 1px rgba(201,162,39,.16)}
.cell.g2{border-color:rgba(46,196,182,.66)}
.cell.g3{border-color:rgba(92,134,232,.58)}
.cell .mid{padding-left:1px}
.cell .pr .cl{display:block;font:500 7.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-faint);font-style:normal;margin-top:2px}
.sold{display:block;margin-top:7px;font:700 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-faint)}
.sold.g1{color:var(--t1)}.sold.g2{color:var(--t2)}.sold.g3{color:var(--t3)}

/* ---- delivery-minimum meter, directly under the header ---- */
.meter{position:relative;z-index:5;height:16px;display:flex;align-items:center;
  background:rgba(6,8,7,.6);backdrop-filter:blur(10px);border-bottom:1px solid rgba(243,238,230,.08);overflow:hidden}
.meter[hidden]{display:none}
/* .gd-meter is the live header meter (the prototype called it .meter). Until 19 Oct it had no
   rules for its fill or its words, so the fill never showed and the words were body text. */
.meter i,.gd-meter i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(201,162,39,.42),rgba(201,162,39,.16));
  transform-origin:left center;transition:transform .4s var(--ease)}
.meter span,.gd-meter span{position:relative;z-index:1;padding-left:10px;font:700 8px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-soft)}

/* ---- subbar additions: points, sound, search ---- */
.iconbtn{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;cursor:pointer;
  background:rgba(8,10,9,.5);border:1px solid rgba(243,238,230,.22);color:var(--cream-dim);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.iconbtn .ico{width:17px;height:17px;color:inherit}
.iconbtn.on{border-color:var(--gold);color:var(--gold-soft)}
.iconbtn[hidden]{display:none}
.ptschip{margin-left:auto;cursor:pointer;display:flex;align-items:center;gap:4px;padding:4px 7px;font:700 9.5px/1 var(--mono);
  color:var(--gold-soft);background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.45);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.ptschip .ico{width:13px;height:13px}
.ptschip[hidden]{display:none}
.srch{flex:1;display:flex;align-items:center;gap:4px;min-width:0;background:rgba(8,10,9,.62);
  border:1px solid var(--gold);backdrop-filter:blur(10px);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.srch[hidden]{display:none}
.srch input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--cream);
  font:500 12px/1 var(--body);padding:7px 2px 7px 9px}
.srch input::placeholder{color:var(--cream-faint)}
.srch input::-webkit-search-cancel-button{display:none}
.srchx{width:26px;height:26px;background:transparent;border:0;color:var(--cream-dim);font-size:14px;cursor:pointer}
.subhead2{font:700 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  padding:4px 2px 0;text-shadow:0 1px 6px rgba(0,0,0,.95)}

/* ---- the rail teaches its own glyphs, then gets out of the way ---- */

/* ---- first screen: closed state and the one-tap reorder ---- */
.closedban{padding:9px 12px;border-color:rgba(232,119,95,.5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.closedban b{display:block;font-size:12px;color:#E8775F;margin-bottom:2px}
.closedban span{font-size:11px;line-height:1.45;color:var(--cream-dim)}
.again{padding:9px 10px 10px;border-color:rgba(201,162,39,.5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.again .at{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.again .lab{flex:1;font:700 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.again .tot{font:700 13px/1 var(--mono);color:var(--gold-soft)}
.again .lines{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.again .ln{display:flex;align-items:center;gap:4px;padding:3px 6px;font-size:9.5px;font-weight:600;
  color:var(--cream-dim);border:1px solid rgba(243,238,230,.18)}
.again .ln .ico{width:13px;height:13px}
.again .go{width:100%;min-height:38px;display:flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;font:700 12.5px/1 var(--body);background:var(--gold);color:#17120A;border:1px solid var(--gold);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.again .go .ico{width:16px;height:16px;color:#17120A}
.again .go.off{background:rgba(8,10,9,.5);color:var(--cream-dim);border-color:rgba(243,238,230,.26)}
.srchhint{padding:10px 12px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.srchhint b{display:block;font-size:13px;margin-bottom:3px}
.srchhint span{font-size:11.5px;line-height:1.5;color:var(--cream-dim)}

/* ---- media box: capped so the first question stays above the fold ---- */
.media{aspect-ratio:16/9;max-height:168px}
.mtag{position:absolute;top:6px;left:7px;font:700 7.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-dim);background:rgba(6,8,7,.66);padding:4px 6px}
.mtag.on{color:var(--gold-soft);border:1px solid rgba(201,162,39,.4)}
.mdots{bottom:7px;gap:6px}
.mdots{bottom:2px;padding:6px}
.mdots .dot{width:24px;height:24px;padding:0;border:0;cursor:pointer;background:transparent;position:relative}
.mdots .dot::after{content:'';position:absolute;inset:9px;border-radius:50%;background:rgba(243,238,230,.45)}
.mdots .dot.on::after{background:var(--gold)}
.mnudge{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;
  place-items:center;cursor:pointer;border-radius:50%;background:rgba(6,8,7,.6);border:1px solid rgba(201,162,39,.55);
  color:var(--gold-soft);animation:nudge 1.9s ease-in-out 3}
.mnudge .ico{width:14px;height:14px}
.mnudge[hidden]{display:none}
@keyframes nudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(3px)}}
@media(prefers-reduced-motion:reduce){.mnudge{animation:none}}
.qline.done{border-left-color:#5FD08A}
.qline .ok .ico{width:12px;height:12px;color:#5FD08A}

/* ---- the bag: the screen that was missing ---- */
.baglines{display:flex;flex-direction:column;gap:5px}
.bagline{position:relative;display:flex;align-items:center;gap:8px;padding:7px 8px;
  background:rgba(8,10,9,.56);border:1px solid rgba(243,238,230,.24);backdrop-filter:blur(10px);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.bagline .ic{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(201,162,39,.22),transparent 70%)}
.bagline .ic .ico{width:18px;height:18px}
.bl-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bl-nm{font-size:11.5px;font-weight:600;line-height:1.2}
.bl-op{font:500 9.5px/1.3 var(--mono);color:var(--gold-soft)}
.bl-ed{font:700 7.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-faint);margin-top:2px}
.bl-pr{font:700 11.5px/1 var(--mono);color:var(--cream)}
.bl-hit{position:absolute;inset:0 128px 0 0;background:transparent;border:0;cursor:pointer;z-index:1}
.bl-qty{position:relative;z-index:2;display:flex;align-items:center;gap:1px;flex:0 0 auto}
.blq{width:40px;height:40px;display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;
  background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.22);color:var(--cream)}
.blq .ico{width:15px;height:15px;color:#E8775F}
.bl-qty b{min-width:18px;text-align:center;font:700 12px/1 var(--mono)}
.bagline:hover{border-color:rgba(201,162,39,.6)}

.seg{display:flex;gap:6px}
.sgb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;cursor:pointer;
  background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);color:var(--cream-dim);
  font:600 10.5px/1 var(--body);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.sgb .ico{width:18px;height:18px}
.sgb i{font-style:normal;font:500 8px/1 var(--mono);letter-spacing:.06em;color:var(--cream-faint)}
.sgb.on{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,162,39,.16)}
.sgb.on i{color:var(--gold-soft)}

.minban{padding:9px 10px 10px;border-color:rgba(201,162,39,.55);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.minban .mt b{display:block;font:700 13px/1 var(--mono);color:var(--gold-soft);margin-bottom:2px}
.minban .mt span{font-size:10.5px;line-height:1.4;color:var(--cream-dim)}
.mbar{height:5px;margin:8px 0;background:rgba(243,238,230,.14);overflow:hidden}
.mbar i{display:block;width:100%;height:100%;background:var(--gold);transform-origin:left center;transition:transform .4s var(--ease)}
.minacts{display:flex;gap:6px}
.mina{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 6px;cursor:pointer;
  font:600 10px/1 var(--body);background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.5);color:var(--gold-soft)}
.mina .ico{width:14px;height:14px}

.sums{padding:8px 11px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.sumrow{display:flex;align-items:baseline;gap:10px;padding:3px 0;font-size:11px;color:var(--cream-dim)}
.sumrow span{flex:1}
.sumrow b{font:700 11.5px/1 var(--mono);color:var(--cream)}
.sumrow.good b{color:#5FD08A}
.sumrow.tot{margin-top:4px;padding-top:6px;border-top:1px solid rgba(243,238,230,.18)}
.sumrow.tot span{font-weight:700;color:var(--cream);font-size:12px}
.sumrow.tot b{font-size:16px;color:var(--gold-soft)}
.sumrow.pts b{color:var(--gold-soft);font-size:10.5px}
.sumrow.pts b i{font-style:normal;color:var(--cream-faint)}

.foot2{display:flex;gap:7px;align-items:stretch;padding:8px 0 10px}
.alt{flex:0 0 auto;min-height:48px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;font:600 11px/1 var(--body);background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.28);
  color:var(--cream);backdrop-filter:blur(10px);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.alt .ico{width:15px;height:15px}
.foot2 .add{flex:1}

/* ---- checkout ---- */
.cohead{padding:9px 12px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.cot b{display:block;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.cot span{font-size:11px;line-height:1.4;color:var(--cream-dim)}
.slotrow{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.slotrow::-webkit-scrollbar{display:none}
.slot{flex:0 0 auto;min-width:72px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 9px;
  cursor:pointer;background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);
  color:var(--cream-dim);font:700 11px/1 var(--mono);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.slot .ico{width:16px;height:16px}
.slot b{font:700 10.5px/1.2 var(--body);text-align:center}
.slot i{font-style:normal;font:500 8px/1 var(--mono);color:var(--cream-faint)}
.slot.on{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,162,39,.16)}
.slot.on i{color:var(--gold-soft)}
.slotrow.pay .slot{flex:1}
.profile{display:flex;align-items:center;gap:10px;padding:9px 11px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.profile .pic{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(201,162,39,.22),transparent 70%)}
.profile .pm{min-width:0}
.profile .pm b{display:block;font-size:11.5px}
.profile .pm span{display:block;font:500 10px/1.3 var(--mono);color:var(--gold-soft);margin-top:2px}
.profile .pm i{display:block;font-style:normal;font-size:9.5px;line-height:1.35;color:var(--cream-faint);margin-top:3px}
.rewardrow{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
.rewardrow::-webkit-scrollbar{display:none}
.reward{flex:0 0 auto;min-width:78px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 8px;
  cursor:pointer;background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);
  color:var(--cream-dim);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.reward .ico{width:17px;height:17px}
.reward b{font:600 10px/1.2 var(--body);text-align:center}
.reward i{font-style:normal;font:700 8.5px/1 var(--mono);color:var(--gold-soft)}
.reward.on{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,162,39,.18)}
.rewnote{font-size:10.5px;line-height:1.45;color:var(--cream-faint);padding:2px 2px 0}

/* ---- confirmation: the beat the flow never had ---- */
.donecard{padding:16px 14px;text-align:center;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.donecard .tick{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 10px;border-radius:50%;
  background:rgba(95,208,138,.16);border:1px solid #5FD08A}
.donecard .tick .ico{width:26px;height:26px;color:#5FD08A}
.donecard b{display:block;font-family:var(--display);font-size:21px;font-weight:600}
.donecard .sub{display:block;margin-top:5px;font:700 10px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-soft)}
.donecard .sub2{display:block;margin-top:7px;font-size:11px;color:var(--cream-dim)}
.ptscard{padding:10px 12px;border-color:rgba(201,162,39,.5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.ptscard .pt{display:flex;align-items:center;gap:8px}
.ptscard .lab{flex:1;display:flex;align-items:center;gap:6px;font:700 9px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.ptscard .lab .ico{width:16px;height:16px}
.ptscard .pt b{font:700 17px/1 var(--mono);color:var(--gold-soft)}
.pbar{height:5px;margin:8px 0 7px;background:rgba(243,238,230,.14);overflow:hidden}
.pbar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform-origin:left center;transition:transform .6s var(--ease)}
.pnote{display:block;font-size:10.5px;line-height:1.45;color:var(--cream-dim)}
.pnote b{color:var(--gold-soft)}
.pmul{display:block;margin-top:4px;font:700 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}

/* ============ sub-groups as chips, join offer, accounts ============ */
.cat .subs{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.cat .sg{font-style:normal;font:600 7.5px/1 var(--mono);letter-spacing:.03em;text-transform:uppercase;
  padding:3px 5px;color:var(--gold-soft);background:rgba(201,162,39,.16);border:1px solid rgba(201,162,39,.34)}
.cat .sg.lim{color:var(--t2);background:rgba(46,196,182,.14);border-color:rgba(46,196,182,.36)}

.joinban{display:flex;align-items:center;gap:9px;padding:9px 10px;border-color:rgba(201,162,39,.5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.joinban .gi{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:rgba(201,162,39,.18)}
.joinban .gi .ico{width:18px;height:18px}
.jm{flex:1;min-width:0}
.jm b{display:block;font-size:12px}
.jm span{display:block;margin-top:2px;font-size:10px;line-height:1.4;color:var(--cream-dim)}
.jgo{flex:0 0 auto;min-height:42px;padding:8px 14px;cursor:pointer;font:700 11px/1 var(--body);
  background:var(--gold);color:#17120A;border:1px solid var(--gold);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.jgo.wide{width:100%;margin-top:9px;min-height:40px;display:flex;align-items:center;justify-content:center;gap:7px}
.jgo .ico{width:15px;height:15px;color:#17120A}

.joincard{padding:16px 14px;text-align:center;border-color:rgba(201,162,39,.5);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.joincard .gi.big{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 10px;border-radius:50%;
  background:rgba(201,162,39,.18);border:1px solid rgba(201,162,39,.5)}
.joincard .gi.big .ico{width:26px;height:26px}
.joincard b{display:block;font-family:var(--display);font-size:21px;font-weight:600}
.joincard .sub{display:block;margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--cream-dim)}

.ways{display:flex;flex-direction:column;gap:5px}
.way{display:flex;align-items:center;gap:10px;padding:10px 11px;cursor:pointer;text-align:left;
  background:rgba(8,10,9,.56);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);color:var(--cream);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.way > .ico:first-child{width:19px;height:19px;flex:0 0 19px}
.way > .ico:last-child{width:13px;height:13px;flex:0 0 13px;color:var(--cream-faint)}
.wm2{flex:1;min-width:0}
.wm2 b{display:block;font-size:12.5px;font-weight:600}
.wm2 i{display:block;margin-top:2px;font-style:normal;font-size:10px;color:var(--cream-faint)}
.way:hover{border-color:var(--gold)}
.finesmall{margin:0;font-size:9.5px;line-height:1.45;color:var(--cream-faint);padding:0 2px}

.benefits{display:flex;flex-direction:column;gap:5px}
.ben{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;
  background:rgba(8,10,9,.46);border:1px solid rgba(243,238,230,.18);backdrop-filter:blur(8px)}
.ben .bi{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(201,162,39,.22),transparent 70%)}
.ben .bi .ico{width:15px;height:15px}
.bm b{display:block;font-size:11.5px}
.bm span{display:block;margin-top:2px;font-size:10px;line-height:1.45;color:var(--cream-dim)}

.profile.big{padding:12px}
.profile .pedit{margin-left:auto;flex:0 0 auto;min-height:40px;padding:7px 12px;cursor:pointer;font:700 9px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;background:transparent;border:1px solid rgba(243,238,230,.3);
  color:var(--cream-dim)}

.formcard{padding:10px 11px;display:flex;flex-direction:column;gap:9px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.fld{display:block}
.fld > span{display:block;margin-bottom:4px;font:700 8.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.fld input{width:100%;padding:9px 10px;background:rgba(6,8,7,.6);color:var(--cream);
  border:1px solid rgba(243,238,230,.26);font:500 12.5px/1.2 var(--body);outline:0}
.fld input:focus{border-color:var(--gold)}
.fld input::placeholder{color:var(--cream-faint)}

.hist{display:flex;flex-direction:column;gap:5px}
.hrow{display:flex;align-items:center;gap:9px;padding:9px 10px;
  background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.24);backdrop-filter:blur(10px)}
.hn{flex:1;min-width:0;font:700 11.5px/1.2 var(--mono)}
.hn i{display:block;margin-top:2px;font-style:normal;font:500 9px/1 var(--mono);color:var(--cream-faint)}
.ht{font-size:10.5px;color:var(--cream-dim)}
.hgo{flex:0 0 auto;min-height:40px;display:flex;align-items:center;gap:5px;padding:7px 11px;cursor:pointer;
  font:700 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.5);color:var(--gold-soft)}
.hgo .ico{width:12px;height:12px}
.hgo.off{opacity:.34}

.ptscard.guest{border-color:rgba(243,238,230,.26)}
.ptscard .pt b.miss{color:var(--cream-faint);text-decoration:line-through;text-decoration-thickness:2px}
.ptscard.guest .lab{color:var(--cream-dim)}

/* order tracker on the confirmation */
.track{display:flex;gap:4px}
.tstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;
  background:rgba(8,10,9,.46);border:1px solid rgba(243,238,230,.16);color:var(--cream-faint)}
.tstep .ico{width:16px;height:16px}
.tstep i{font-style:normal;font:600 8px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tstep.on{color:#5FD08A;border-color:rgba(95,208,138,.5);background:rgba(95,208,138,.1)}
/* the link to the tracking page under the steps (15 Oct) */
.trackopen{display:block;margin-top:8px;text-align:center;font:600 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#E0C06A;text-decoration:underline}

/* dietary filters in search */
.dietrow{display:flex;gap:5px;flex-wrap:wrap}
.dchip{display:flex;align-items:center;gap:5px;min-height:36px;padding:6px 11px;cursor:pointer;font:600 10px/1 var(--body);
  background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);color:var(--cream-dim);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.dchip .ico{width:13px;height:13px}
.dchip.on{border-color:#5FD08A;color:#5FD08A;background:rgba(95,208,138,.14)}

/* sound control, now beside the film it unmutes */
.msound{position:absolute;top:6px;right:6px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  border-radius:50%;background:rgba(6,8,7,.62);border:1px solid rgba(243,238,230,.3);color:var(--cream-dim)}
.msound .ico{width:14px;height:14px;color:inherit}
.msound.on{border-color:var(--gold);color:var(--gold-soft)}

/* an unanswered question, pointed at */
.qline.flash{background:rgba(201,162,39,.2);border-left-color:var(--gold-soft)}

/* toast */
.toast{position:absolute;z-index:40;left:50%;bottom:74px;transform:translateX(-50%);max-width:84%;
  display:flex;align-items:center;gap:7px;padding:9px 13px;font-size:11.5px;line-height:1.4;
  background:rgba(6,8,7,.88);border:1px solid var(--gold);color:var(--cream);backdrop-filter:blur(14px);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.toast .ico{width:16px;height:16px;flex:0 0 16px;color:var(--gold-soft)}
.toast b{color:var(--gold-soft)}

/* ============ search bar, light add-ons, flat options, upsells, notes, allergens ============ */
.srchbar{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:0 12px;cursor:pointer;
  background:rgba(8,10,9,.56);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);
  color:var(--cream-dim);font:500 12.5px/1 var(--body);text-align:left;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.srchbar .ico{width:17px;height:17px;flex:0 0 17px}
.srchbar span{flex:1}
.srchbar:hover{border-color:var(--gold)}

/* a £1 can does not get a hero film, a display face and a best-seller rank */
.litehead{display:flex;align-items:center;gap:11px;padding:12px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.litehead .lic{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(201,162,39,.24),transparent 70%)}
.litehead .lic .ico{width:24px;height:24px}
.lm{flex:1;min-width:0}
.lm b{display:block;font-size:15px;font-weight:600}
.lm span{display:block;margin-top:3px;font:500 10px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream-faint)}

/* when every option costs the same and draws the same glyph, drop both */
.flatopts{display:flex;flex-wrap:wrap;gap:6px}
.fopt{flex:1 1 30%;min-width:88px;min-height:46px;padding:8px 10px;cursor:pointer;
  font:600 12px/1.2 var(--body);background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.26);
  backdrop-filter:blur(10px);color:var(--cream);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.fopt.on{border-color:var(--gold);background:rgba(201,162,39,.2);color:var(--gold-soft)}
@media (hover:hover){.fopt:hover{border-color:var(--gold)}}
.qline .opt{font-style:normal;color:var(--cream-dim);font-size:8.5px}

/* the question the counter always asks */
.upsrow{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
.upsrow::-webkit-scrollbar{display:none}
.ups{flex:1 0 auto;min-width:80px;min-height:62px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;cursor:pointer;padding:8px 10px;
  background:rgba(8,10,9,.52);border:1px solid rgba(201,162,39,.4);backdrop-filter:blur(10px);color:var(--cream);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.ups .ico{width:18px;height:18px}
.ups b{font:600 10.5px/1.1 var(--body);text-align:center}
.ups i{font-style:normal;font:700 10px/1 var(--mono);color:var(--gold-soft)}
.ups:hover{border-color:var(--gold);background:rgba(201,162,39,.14)}

.sidecard{padding:10px 11px;display:flex;flex-direction:column;gap:9px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.fhelp{display:block;margin-top:4px;font-style:normal;font-size:9.5px;line-height:1.4;color:var(--cream-faint)}
.cutrow{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:8px 10px;cursor:pointer;
  background:rgba(8,10,9,.4);border:1px solid rgba(243,238,230,.22);color:var(--cream-dim);text-align:left}
.cutrow .ico{width:17px;height:17px;flex:0 0 17px}
.cutrow b{flex:1;font-size:11.5px;font-weight:600}
.cutrow i{font-style:normal;font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-faint)}
.cutrow.on{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,162,39,.12)}
.cutrow.on i{color:var(--gold-soft)}

/* the total never scrolls away */
.foottot{display:flex;align-items:baseline;gap:10px;padding:9px 11px 8px;margin-bottom:-2px;
  background:rgba(6,8,7,.78);border:1px solid rgba(243,238,230,.2);border-bottom:0;backdrop-filter:blur(14px);
  clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px)}
.foottot span{flex:1;font:700 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}
.foottot b{font:700 18px/1 var(--mono);color:var(--gold-soft)}

/* both paths out of checkout are buttons, and the guest one comes first */
.fork{display:flex;gap:6px}
.fguest,.fjoin{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:62px;padding:9px 8px;cursor:pointer;text-align:center;backdrop-filter:blur(10px);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.fguest{background:rgba(243,238,230,.1);border:1px solid rgba(243,238,230,.5);color:var(--cream)}
.fguest .ico{width:18px;height:18px;flex:0 0 18px}
.fguest b,.fjoin b{font-size:11.5px;font-weight:700;line-height:1.2}
.fguest i,.fjoin i{font-style:normal;font:600 9px/1.2 var(--mono)}
.fguest i{color:var(--cream-faint)}
.fjoin{background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.55);color:var(--gold-soft)}
.fjoin .ico{width:18px;height:18px;flex:0 0 18px}
.fguest:hover{border-color:var(--cream)}
.fjoin:hover{border-color:var(--gold)}
.guestok{display:flex;align-items:center;gap:9px;padding:9px 11px;
  background:rgba(95,208,138,.1);border:1px solid rgba(95,208,138,.45);backdrop-filter:blur(10px);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.guestok > .ico{width:18px;height:18px;flex:0 0 18px;color:#5FD08A}
.guestok b{display:block;font-size:12px;color:#5FD08A}
.guestok span{display:block;margin-top:2px;font-size:10px;color:var(--cream-dim)}
.guestok > span{flex:1;min-width:0}
.undo{flex:0 0 auto;min-height:40px;padding:7px 11px;cursor:pointer;font:700 9px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;background:transparent;border:1px solid rgba(201,162,39,.5);
  color:var(--gold-soft)}

.allergy{display:flex;gap:8px;padding:9px 10px;background:rgba(8,10,9,.5);border:1px solid rgba(243,238,230,.2);
  backdrop-filter:blur(10px)}
.allergy .ico{width:15px;height:15px;flex:0 0 15px;color:var(--cream-dim)}
.allergy span{font-size:10px;line-height:1.5;color:var(--cream-dim)}
.allergy b{color:var(--gold-soft);white-space:nowrap}

.donecard .sub3{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;
  font-size:10.5px;line-height:1.4;color:var(--cream-dim)}
.donecard .sub3 .ico{width:14px;height:14px;flex:0 0 14px;color:var(--gold-soft)}
.donecard .sub3 b{display:inline;font-family:var(--mono);font-size:10.5px;color:var(--gold-soft)}

.whereline{display:flex;align-items:center;gap:7px;margin:0;padding:0 2px;
  font-size:10.5px;line-height:1.4;color:var(--cream-dim);text-shadow:0 1px 6px rgba(0,0,0,.95)}
.whereline .ico{width:15px;height:15px;flex:0 0 15px;color:var(--gold-soft)}

/* ============================== DESKTOP ==============================
   Not the phone stretched. Three panes: sections down the left where there is room for
   whole words, dishes in the middle, and the order docked on the right where it never
   leaves the screen — which is the one thing a wide window actually buys you. */

  margin-top:4px;overflow:hidden}

  border:1px solid var(--line-2);border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.ph.desk{font-size:16px}

.d-top{position:relative;z-index:6;display:flex;align-items:center;gap:16px;padding:12px 18px;
  background:rgba(6,8,7,.66);backdrop-filter:blur(16px);border-bottom:1px solid rgba(243,238,230,.10)}
.desk .homebtn{flex:0 0 auto;min-width:0;gap:11px}
.desk .wm{font-size:19px}
.desk .ph-status{font-size:9.5px;margin-top:4px}
.d-search{flex:1;max-width:520px;display:flex;align-items:center;gap:9px;padding:0 13px;
  background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.d-search .ico{width:17px;height:17px;flex:0 0 17px;color:var(--cream-faint)}
.d-search input{flex:1;min-width:0;height:42px;background:transparent;border:0;outline:0;color:var(--cream);
  font:500 14px/1 var(--body)}
.d-search input::placeholder{color:var(--cream-faint)}
.d-search input::-webkit-search-cancel-button{display:none}
.d-search:focus-within{border-color:var(--gold)}
.desk .ptschip{margin-left:auto;padding:7px 11px;font-size:11px}
.desk .ptschip .ico{width:15px;height:15px}
.desk .mebtn{flex:0 0 42px;width:42px;height:42px}
.desk .mebtn .ico{width:21px;height:21px}
.desk .mebtn .ini{font-size:15px}

.d-body{position:relative;z-index:5;flex:1;min-height:0;display:grid;
  grid-template-columns:238px minmax(0,1fr) 340px}
.d-rail{display:flex;flex-direction:column;gap:3px;padding:14px 10px;overflow-y:auto;scrollbar-width:none;
  background:rgba(6,8,7,.46);backdrop-filter:blur(12px);border-right:1px solid rgba(243,238,230,.08)}
.d-rail::-webkit-scrollbar{display:none}
.rrow{display:flex;align-items:center;gap:11px;width:100%;min-height:52px;padding:8px 11px;cursor:pointer;
  text-align:left;background:transparent;border:1px solid transparent;color:var(--cream-dim);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.rrow .ico{width:21px;height:21px;flex:0 0 21px}
.rrow .rm{flex:1;min-width:0}
.rrow .rm b{display:block;font-size:13.5px;font-weight:600;line-height:1.15}
.rrow .rm i{display:block;margin-top:2px;font-style:normal;font:500 8.5px/1.3 var(--mono);
  letter-spacing:.02em;text-transform:uppercase;color:var(--cream-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .rn{flex:0 0 auto;font:700 10px/1 var(--mono);color:var(--cream-faint)}
.rrow:hover{background:rgba(243,238,230,.06);border-color:rgba(243,238,230,.18)}
.rrow.on{color:var(--gold);border-color:var(--gold);background:rgba(201,162,39,.14)}
.rrow.on .rm i,.rrow.on .rn{color:var(--gold-soft)}

.d-main{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column}
/* grid and flex children default to min-height:auto, which let the menu column grow to its
   content instead of scrolling — the desktop menu was clipped at one screenful. */
.d-sub{padding:12px 18px 2px}
.desk .ph-stage{padding:8px 18px 16px;gap:10px}
.desk .ph-stage > *:first-child{margin-top:0}
.desk .ph-foot{padding:0 18px 14px}
.desk .itemgrid{grid-template-columns:repeat(3,1fr);gap:8px}
.desk .cell{min-height:62px}
.desk .cell .nm{font-size:12px}
.desk .cell .pr{font-size:12.5px}
.desk .segnav{top:0}
.desk .segb b{font-size:12px}
.desk .joinban,.desk .again{max-width:none}
.desk .subhead2{font-size:10px}

/* the order, always on screen */
.d-side{display:flex;flex-direction:column;min-height:0;
  background:rgba(6,8,7,.6);backdrop-filter:blur(14px);border-left:1px solid rgba(243,238,230,.1)}
.sidehead{display:flex;align-items:center;gap:9px;padding:14px 16px 10px;
  border-bottom:1px solid rgba(243,238,230,.1)}
.sidehead .sh{flex:1;display:flex;align-items:center;gap:8px;font:700 10px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.sidehead .sh .ico{width:17px;height:17px}
.sidehead b{font:700 11px/1 var(--mono);color:var(--cream-dim)}
.sidebody{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:8px;
  padding:12px 14px}
.sidebody::-webkit-scrollbar{display:none}
.sidebody > *{flex:0 0 auto}
.sidefoot{padding:0 14px 14px}
.d-side .upsrow{flex-wrap:wrap}
.d-side .ups{flex:1 1 44%;min-width:0}
.d-side .seg{flex-direction:column}
.d-side .sgb{flex-direction:row;justify-content:flex-start;gap:8px;min-height:44px;padding:8px 11px}
.d-side .sgb i{margin-left:auto}
.d-side .foot2{flex-direction:column;padding:8px 0 0}
.d-side .alt,.d-side .add{width:100%}
.d-side .bagline{padding:8px}
.d-side .bl-hit{inset:0 108px 0 0}
.d-side .minacts{flex-direction:column}

/* a dish opens over the grid instead of replacing it, so you never lose your place */
.d-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:28px;
  background:rgba(4,6,5,.62);backdrop-filter:blur(3px)}
.d-overlay[hidden]{display:none}
.ovlcard{position:relative;width:min(680px,100%);max-height:100%;display:flex;flex-direction:column;
  background:rgba(10,13,12,.94);border:1px solid rgba(201,162,39,.4);box-shadow:0 30px 80px rgba(0,0,0,.7);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.ovlbody{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:10px;
  padding:18px 18px 4px}
.ovlbody::-webkit-scrollbar{display:none}
.ovlbody > *{flex:0 0 auto}
.ovlfoot{padding:6px 18px 16px}
.ovlx{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;display:grid;place-items:center;
  cursor:pointer;font-size:15px;line-height:1;background:rgba(8,10,9,.7);border:1px solid rgba(243,238,230,.3);
  color:var(--cream)}
.ovlx:hover{border-color:var(--gold);color:var(--gold-soft)}
.ovlcard .media{max-height:300px}
.ovlcard .itemgrid.opts{grid-template-columns:repeat(3,1fr)}
.ovlcard .dhead h5{font-size:28px}
.ovlcard .dpr{font-size:21px}
.ovlcard .dhead p{font-size:13.5px}

/* hover is free on a desktop and worth using */
.desk .cell:hover{border-color:var(--gold);background:rgba(201,162,39,.08)}
.desk .cell:hover .corner{opacity:1}
.desk .ups:hover,.desk .fopt:hover{border-color:var(--gold)}

/* continuous menu: section and group headers instead of tabs, because on one scroll
   a header is a landmark and a tab is a thing you have to find */
.dsec{display:flex;flex-direction:column;gap:8px}
.dsech{position:sticky;top:-8px;z-index:4;display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;
  background:rgba(6,8,7,.82);backdrop-filter:blur(14px);border-left:2px solid var(--gold);
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold)}
.dsech .ico{width:18px;height:18px}
.dsech b{font-weight:700}
.dgrph{display:flex;align-items:center;gap:10px;padding:2px 2px 0;
  font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.dgrph span{flex:0 0 auto}
.dgrph i{font-style:normal;font-size:8.5px;color:var(--t2);padding:3px 6px;
  border:1px solid rgba(46,196,182,.4);background:rgba(46,196,182,.12)}
.dgrph em{margin-left:auto;font-style:normal;color:var(--cream-faint)}
.desk .ph-stage{scroll-behavior:smooth}

@media(max-width:520px){.media{max-height:146px}}


/* ---- production aliases: the prototype's selectors, under production names ----
   Renaming 509 rules would have been a day of risk for no gain. These eight lines make
   .gd-stage behave as .ph-stage, .gd-rail as .iconrail on a phone and .d-rail on a desktop,
   and so on, so the prototype sheet and the live site cannot drift apart. */
.gd-stage{position:relative;z-index:4;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 10px 10px}
.gd-stage > *:first-child{margin-top:auto}
.gd-stage > *{flex:0 0 auto}
.gd-foot{position:relative;z-index:5;padding:0 10px}
.gd-foot:empty{display:none}
.gd-rail{position:relative;z-index:5;display:flex;gap:2px;padding:5px;overflow:hidden;
  background:rgba(6,8,7,.5);backdrop-filter:blur(12px);border-bottom:1px solid rgba(243,238,230,.08)}
.gd-meter{position:relative;z-index:5;height:16px;display:flex;align-items:center;overflow:hidden;
  background:rgba(6,8,7,.6);backdrop-filter:blur(10px);border-bottom:1px solid rgba(243,238,230,.08)}
.gd-meter[hidden]{display:none}
@media (min-width:1024px){
  .gd-stage{padding:8px 18px 16px;gap:10px;scroll-behavior:smooth}
  .gd-stage > *:first-child{margin-top:0}
  .gd-foot{padding:0 18px 14px}
  .gd-rail{flex-direction:column;gap:3px;padding:14px 10px;overflow-y:auto;border-bottom:0;
    background:rgba(6,8,7,.46);border-right:1px solid rgba(243,238,230,.08)}
}

/* Golden Dragon — production shell.
   One DOM, two layouts. The phone layout is the default; the desktop layout takes over at
   1024px through grid-template-areas alone, so there is no second markup tree to keep in step
   and nothing remounts when a window crosses the breakpoint.
   The main column is display:contents on a phone — its three parts drop into the outer grid —
   and becomes a real flex column on a desktop. No JavaScript re-parenting anywhere. */
html{height:100%}
body.gd{margin:0;height:100%;background:var(--ink);color:var(--cream);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;overflow:hidden}

.gd-app{position:fixed;inset:0;height:100dvh;display:grid;overflow:hidden;background:#000;
  grid-template-columns:100%;
  grid-template-rows:auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"top" "rail" "meter" "stage" "foot"}
.gd-app > .filmlayer,.gd-app > .vig,.gd-app > .gd-ovl{grid-column:1/-1;grid-row:1/-1}
.gd-app > .filmlayer{z-index:0}
.gd-app > .vig{z-index:1}
.gd-app > .gd-ovl{z-index:20}
.gd-app > .ph-top{grid-area:top}
.gd-app > .gd-rail{grid-area:rail}
.gd-app > .gd-meter{grid-area:meter}
.gd-app > .gd-side{display:none}
.gd-main{display:contents}
.gd-main > .subbar{grid-area:stage;align-self:start;z-index:5}
.gd-main > .gd-stage{grid-area:stage;min-height:0;padding-top:40px}
.gd-main > .gd-foot{grid-area:foot}

/* a phone's home indicator must never sit on top of Add to bag */
.gd-app > .ph-top{padding-top:calc(8px + env(safe-area-inset-top))}
.gd-main > .gd-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom))}

@media (min-width:1024px){
  .gd-app{
    grid-template-columns:238px minmax(0,1fr) 340px;
    grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:
      "top   top   top"
      "meter meter meter"
      "rail  main  side"}
  .gd-app > .gd-side{grid-area:side;display:flex}
  .gd-main{grid-area:main;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
  .gd-main > .subbar{align-self:auto;padding:12px 18px 2px}
  .gd-main > .gd-stage{flex:1;min-height:0;padding-top:8px}
  .gd-main > .gd-foot{padding-bottom:14px}
}

/* a page that is only a menu needs no page chrome */
.gd-app ::-webkit-scrollbar{display:none}
.gd-app *{scrollbar-width:none}

/* live region: announced, never seen */
.gd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* the two states where the menu cannot be shown at all */
.gd-down,.gd-noscript{position:fixed;inset:0;z-index:99;display:grid;place-items:center;
  margin:0;padding:32px;text-align:center;background:var(--ink);color:var(--cream);
  font:500 15px/1.6 var(--body)}
.gd-down a,.gd-noscript a{color:var(--gold-soft)}

@media (min-width:1024px){
  /* the docked order replaces the cart chip; two of them would be two sources of truth */
  .gd-app > .ph-top .bagchip{display:none}
  .gd-app > .ph-top .homebtn{flex:0 0 auto}
  .gd-app > .ph-top{gap:16px}
  .gd-app > .ph-top .mebtn{margin-left:auto;width:42px;height:42px;flex:0 0 42px}
  .gd-main > .subbar .srch{max-width:420px}
}

/* ---------- the card sheet ----------
   Its own layer, above everything, so a repaint of the app cannot pull Stripe's iframe
   out from under someone halfway through a card number. The fields themselves sit on a
   light panel: Stripe's own look is built for that ground, and fighting it inside an
   iframe is how a card form ends up unreadable on somebody's phone. */
.paysheet{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;
  background:rgba(4,6,5,.78);backdrop-filter:blur(4px);overflow-y:auto}
html.paying,html.paying body{overflow:hidden}
.paycard{position:relative;width:min(460px,100%);max-height:calc(100dvh - 32px);
  display:flex;flex-direction:column;gap:12px;
  padding:20px 18px 16px;background:rgba(10,13,12,.97);border:1px solid rgba(201,162,39,.45);
  box-shadow:0 30px 80px rgba(0,0,0,.75);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.payhead{display:flex;flex-direction:column;gap:2px;padding-right:40px}
.payhead b{font-family:var(--display,inherit);font-size:24px;letter-spacing:.01em;color:var(--gold-soft)}
.payhead i{font-style:normal;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#9A9389}
/* Stripe decides how tall its own form is, and with Link's sign-up switched on it is
   taller than a phone. So the fields scroll and the Pay button does not: whatever Stripe
   puts in there, the thing you came to press is already under your thumb. */
.payfields{flex:1 1 auto;min-height:120px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#FBF8F2;border:1px solid rgba(201,162,39,.35);border-radius:10px;padding:14px 12px}
.payhead,.payerr,.payfoot,.paynote{flex:0 0 auto}
.payerr{margin:0;min-height:18px;font-size:13.5px;line-height:1.35;color:#F0B4B4}
.payfoot .add{width:100%}
.paynote{margin:0;font-size:11.5px;letter-spacing:.04em;color:#7E7870;text-align:center}
@media (max-width:420px){
  .paycard{width:100%;padding:18px 14px 14px}
  .payhead b{font-size:21px}
}

/* ---------- checkout on a phone (16 Oct, owner: "the checkout screen shouldnt need the top
   menu bar. everything should fit on the screen without needing to scroll") ----------
   render() sets html.gd-co only on a phone's checkout. The brand bar and the section rail go
   (the back button still returns to the bag, so the footer's Bag button goes too), the help
   lines under the fields go (the labels say it), and every block is tighter, so the form and
   Place order fit a 360x640 phone, delivery included. Anything taller scrolls, never clips. */
html.gd-co .gd-app > .ph-top,html.gd-co .gd-app > .gd-rail,html.gd-co .gd-app > .gd-meter{display:none}
html.gd-co .subbar .iconbtn,html.gd-co .subbar .ptschip,html.gd-co .foot2 .alt{display:none}
html.gd-co .gd-main > .subbar{padding-top:calc(7px + env(safe-area-inset-top))}
html.gd-co .gd-main > .gd-stage{padding-top:calc(44px + env(safe-area-inset-top));gap:7px}
html.gd-co .sgb{flex-direction:row;justify-content:center;gap:7px;padding:9px 6px}
html.gd-co .subhead2{padding-top:3px}
html.gd-co .slot{padding:7px 8px;min-width:66px}
html.gd-co .slotrow:not(.pay) .slot .ico{display:none}
html.gd-co .slotrow.pay .slot{flex-direction:row;justify-content:center;gap:7px;padding:9px 8px}
html.gd-co .formcard{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:8px;padding:9px 10px}
html.gd-co .fld input{padding:8px 9px}
html.gd-co .fhelp{display:none}
html.gd-co .fguest,html.gd-co .fjoin{flex-direction:row;flex-wrap:wrap;column-gap:6px;row-gap:2px;min-height:0;padding:8px 6px}
html.gd-co .fguest i{display:none}
html.gd-co .allergy{padding:7px 9px}
html.gd-co .allergy span{font-size:9.5px;line-height:1.4}
html.gd-co .foot2{padding:6px 0 8px}
/* phone dish screen over the section's film (16 Oct): no picture box, so the stage itself
   darkens from a third of the way down and the options sit on near-solid ground */
html.gd-dish .gd-stage{background:linear-gradient(180deg,rgba(5,7,6,0) 0%,rgba(5,7,6,.62) 34%,rgba(5,7,6,.80) 100%)}
/* 17 Oct. #53's dish-screen band named the prototype's .ph-stage; the live stage is .gd-stage
   (fixed on the line above). The rest: */
/* bag: the points line under the totals */
.ptsnote{margin:0;padding:7px 11px;font:500 11.5px/1.4 var(--body);color:var(--cream-dim);
  background:rgba(8,10,9,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(243,238,230,.12)}
.ptsnote b{font:700 11px/1 var(--mono);color:var(--gold-soft)}
.ptsnote i{font-style:normal;color:var(--cream-faint)}
/* tablets and small laptops under the desktop layout: the phone layout stays, but reads as a
   centred column over the full-width film instead of stretching edge to edge */
@media (min-width:640px) and (max-width:1023px){
  .gd-main > .gd-stage,.gd-main > .gd-foot,.gd-main > .subbar,.gd-app > .gd-rail,.gd-app > .gd-meter{
    padding-left:max(10px,calc((100% - 640px) / 2));padding-right:max(10px,calc((100% - 640px) / 2))}
}
/* wide desktops: three dishes a row instead of two very long ones */
@media (min-width:1600px){
  .gd-stage .itemgrid:not(.opts){grid-template-columns:repeat(3,1fr)}
}

/* ---- motion, part 1 (19 Oct; agreed with Grok, spec in claude/gd-motion-spec-18oct.md) ----
   Motion means one of five things: working, alive, new, done, problem. Only opacity and
   transform move. A busy button keeps its size: the idle and working labels share one grid
   cell, so the button is always as wide as the longer of the two. The arc appears only after
   300 ms (a quick answer never flickers a spinner) and is never the seal. */
.gd-lbls{display:inline-grid;align-items:center;justify-items:center;max-width:100%}
.gd-l{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.gd-idle{visibility:hidden}
.gd-arc{width:16px;height:16px;flex:none;display:inline-block;opacity:0;
  animation:gd-show 1ms linear var(--gd-wait,300ms) forwards}
.gd-arc svg{display:block;width:100%;height:100%;animation:gd-spin .9s linear infinite}
.gd-arc circle{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.gd-arc .t{opacity:.22}
.gd-arc .h{stroke-dasharray:22 100}
@keyframes gd-spin{to{transform:rotate(360deg)}}
@keyframes gd-show{to{opacity:1}}
.add.busy{cursor:progress}
.add.busy:disabled{opacity:1}

/* Pay declined: one red pulse (400 ms) on the card sheet, then a steady red border beside the
   words, until the next try. The pulse is a static border whose opacity moves. */
.paycard::after{content:"";position:absolute;inset:0;border:2px solid var(--bad);opacity:0;pointer-events:none}
.paycard.declined{border-color:var(--bad)}
.paycard.declined.gd-pulse::after{animation:gd-pulse 400ms ease-out}
@keyframes gd-pulse{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* ---- motion, part 2 (19 Oct): the customer's own changes ---- */
/* stepper roll, 160 ms; tabular figures so nothing beside the number moves */
.qstep b,.bl-qty b{font-variant-numeric:tabular-nums}
.gd-roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1}
.gd-roll .o{position:absolute;left:0;right:0;top:0;animation:gd-roll-out 160ms var(--ease) forwards}
.gd-roll .n{display:block;animation:gd-roll-in 160ms var(--ease) backwards}
.gd-roll .o.dn{animation-name:gd-roll-out-dn}
.gd-roll .n.dn{animation-name:gd-roll-in-dn}
@keyframes gd-roll-out{to{transform:translateY(-100%);opacity:0}}
@keyframes gd-roll-in{from{transform:translateY(100%);opacity:0}}
@keyframes gd-roll-out-dn{to{transform:translateY(100%);opacity:0}}
@keyframes gd-roll-in-dn{from{transform:translateY(-100%);opacity:0}}
/* a bag line on its way out fades first; the FLIP that follows is set inline */
.bagline.gd-going{opacity:0;transition:opacity 150ms var(--ease);pointer-events:none}
/* postcode check: arc while checking, a jade tick drawn once, one red pulse on "no" */
.whereline{position:relative}
.whereline .gd-arc{color:var(--gold-soft);width:15px;height:15px}
.gd-tick{width:15px;height:15px;flex:0 0 15px}
.gd-tick path{fill:none;stroke:var(--jade);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.gd-tick.go path{stroke-dasharray:30;stroke-dashoffset:30;animation:gd-draw 220ms var(--ease) forwards}
@keyframes gd-draw{to{stroke-dashoffset:0}}
.whereline::after{content:"";position:absolute;inset:-4px -6px;border:1px solid var(--bad);opacity:0;pointer-events:none}
.whereline.gd-fail::after{animation:gd-pulse 400ms ease-out}
/* reward taken: the free line slides in and glows gold once (a static glow, opacity only) */
.sumrow.gd-new{position:relative;animation:gd-slide 200ms var(--ease) backwards}
.sumrow.gd-new::after{content:"";position:absolute;inset:-2px -6px;pointer-events:none;
  background:rgba(201,162,39,.18);box-shadow:0 0 12px rgba(201,162,39,.35);opacity:0;animation:gd-glow 1.5s ease-out}
@keyframes gd-slide{from{transform:translateY(-6px);opacity:0}}
@keyframes gd-glow{0%{opacity:1}100%{opacity:0}}
/* the shop opens while the page is open: the closed banner slides away, OPEN flashes once */
.closedban.gd-leaving{transform:translateY(-10px);opacity:0;transition:transform 220ms var(--ease),opacity 220ms var(--ease)}
.ph-status b.gd-flash{animation:gd-flash 600ms ease-out}
@keyframes gd-flash{0%{opacity:.25}30%{opacity:1}55%{opacity:.55}100%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .meter i,.gd-meter i,.mbar i,.pbar i{transition:none}
  .gd-roll .o,.gd-roll .n,.gd-tick.go path,.whereline.gd-fail::after,.sumrow.gd-new,.sumrow.gd-new::after,.ph-status b.gd-flash{animation:none}
  .gd-tick.go path{stroke-dashoffset:0}
  .bagline.gd-going,.closedban.gd-leaving{transition:none}
  .gd-arc svg{animation:none}   /* still after 300 ms: the wait is not motion */
  .paycard.declined.gd-pulse::after{animation:none}
}