@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap');

/* ─── BNR DESIGN TOKENS ───────────────────────────────────────── */
:root {
  --bg:       #231F20;   /* brand dark grey */
  --pink:     #EC008C;   /* brand pink — border / outline */
  --yellow:   #FFF200;   /* brand yellow — signage text */
  --red:      #E0282A;   /* hard drop-shadow under the yellow signage type */
  --white:    #FFFFFF;
  --ink:      #231F20;   /* dark text on yellow (matches the brand dark grey) */
  --muted:    rgba(255,255,255,.6);   /* raised for WCAG AA contrast on the dark bg */
  --hairline: rgba(236,0,140,.22);
  --grid:     var(--pink);

  /* offset-right red shadow on the noir signage text (per mockup). Scaled per size. */
  --sign-shadow:    3px 2px 0 var(--red);
  --sign-shadow-sm: 2px 1px 0 var(--red);

  --line-w:     2px;   /* single source of truth for ALL border/stroke widths (~30% thinner) */
  --frame-w:    var(--line-w);
  --frame-gap:  10px;

  --corner-sz:  38px;
  --topbar-h:   101px;  /* header +20% */
  --botbar-h:   72px;
  --side-w:     0px;
}
@media (min-width: 640px)  { :root { --side-w: 10px; } }
@media (min-width: 1024px) { :root { --side-w: 28px; } }

/* ─── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--white);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;          /* default body/reading text (was the 16px browser default) */
  -webkit-font-smoothing: antialiased;
  padding: var(--frame-gap);
}
a { color: inherit; text-decoration: none; }
/* Keyboard focus — visible ring on every interactive element (WCAG 2.4.7). */
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ─── FRAME ───────────────────────────────────────────────────── */
/* The frame is now the border of .bnr-page itself (see PAGE GRID), so it
   shares one coordinate space with the grid lines + corner brackets and
   stays flush under scroll/overscroll. The old fixed overlays are retired. */
.bnr-frame-outer,
.bnr-frame-inner { display: none; }

/* ─── PAGE GRID ───────────────────────────────────────────────── */
.bnr-page {
  position: relative;
  min-height: calc(100dvh - 2 * var(--frame-gap));
  border: var(--frame-w) solid var(--pink);
  display: grid;
  grid-template-columns: [sl] var(--side-w) [cl] 1fr [cr] var(--side-w) [sr];
  grid-template-rows:    [ts] var(--topbar-h) [te bs] 1fr [be bts] var(--botbar-h) [bte];
}
/* Inner frame lines 2 and 3, nested inside the same box. Both are hidden in the
   header/footer rows (those sit above them), so they read as a three-line
   channel (frame + this pair) down the left/right body sides. Line 2 sits a
   wide gap in from the main frame; line 3 sits a narrow gap past line 2. */
.bnr-page::before,
.bnr-page::after {
  content: ""; position: absolute; z-index: 1;
  border: var(--frame-w) solid var(--pink);
  pointer-events: none;
}
.bnr-page::before { inset: 26px; }  /* line 2 — wide gap from frame */
.bnr-page::after  { inset: 36px; }  /* line 3 — narrow gap past line 2 */

/* ─── TOP BAR ─────────────────────────────────────────────────── */
.bnr-top {
  grid-column: sl/sr; grid-row: ts/te;
  position: relative; z-index: 2;       /* above the inner-frame line */
  background: var(--bg);                 /* hides the inner line in the header row */
  display: grid;
  grid-template-columns: var(--topbar-h) 1fr minmax(140px, 2.5fr) 1fr var(--topbar-h);
  align-items: stretch;
  border-bottom: var(--line-w) solid var(--grid);
}

/* On the bean-order page the header drops the Order/About nav panels and the
   brand spans the middle (3-column header: 中 | BELT & ROAST | 国). */
.bnr-page--beans .bnr-top {
  grid-template-columns: var(--topbar-h) 1fr var(--topbar-h);
}
.bnr-page--beans .bnr-nav-panel { display: none; }
/* Beans content is a single narrow product column (matches the mockup), so the
   kicker, card, controls and checkout all share one left edge. */
.bnr-page--beans .bnr-inner { max-width: min(72%, 640px); }

/* ─── SIDE PANELS ─────────────────────────────────────────────── */
.bnr-side-l { grid-column: sl/cl; grid-row: bs/be; }
.bnr-side-r { grid-column: cr/sr; grid-row: bs/be; }

/* ─── MAIN ────────────────────────────────────────────────────── */
.bnr-main {
  grid-column: cl/cr; grid-row: bs/be;
  overflow-y: auto;
}
/* Center-mode: for pages where content should float vertically centered */
.bnr-main--center {
  display: flex; flex-direction: column; justify-content: center;
}
.bnr-inner {
  width: 100%; max-width: 720px;
  margin: 0 auto; padding: 32px 24px 88px;
}
@media (min-width: 640px)  { .bnr-inner { padding: 44px 36px 88px; } }
@media (min-width: 1024px) { .bnr-inner { max-width: 860px; padding: 52px 48px 88px; } }

/* ─── BOTTOM BAR ──────────────────────────────────────────────── */
.bnr-bot {
  grid-column: sl/sr; grid-row: bts/bte;
  position: relative; z-index: 2;       /* above the inner-frame line */
  background: var(--bg);                 /* hides the inner line in the footer row */
  display: grid;
  grid-template-columns: var(--botbar-h) 1fr minmax(140px, 2.5fr) 1fr var(--botbar-h);
  align-items: stretch;
  border-top: var(--line-w) solid var(--grid);
}
/* Empty filler cells flanking the footer center, mirroring the header's nav
   panels so the center 一带一烘 sits in its own bordered cell. */
.bnr-bot-side {
  border-left: var(--line-w) solid var(--grid);
  border-right: var(--line-w) solid var(--grid);
}

/* ─── CORNER BADGES ───────────────────────────────────────────── */
.bnr-corner {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.bnr-corner a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}

/* Medallion sits centered in its bordered corner cell (cell edges come from
   the frame border + adjacent grid lines, so no extra bracket decoration). */
.med-sq {
  position: relative; flex-shrink: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* Outlined circle sized to the corner cell so its stroke overlaps (shares) the
   frame + grid lines it touches, without poking into the body. Same stroke
   width as every other line. Transparent center, no fill. */
.bnr-corner .medallion {
  border-radius: 50%; flex-shrink: 0;
  background: transparent; border: var(--line-w) solid var(--pink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: var(--yellow); line-height: 1;
}
.bnr-top .medallion {
  width: var(--topbar-h); height: var(--topbar-h);
  font-size: 40px;
}
.bnr-bot .medallion {
  width: var(--botbar-h); height: var(--botbar-h);
  font-size: 34px;
}

/* ─── NAV PANELS ──────────────────────────────────────────────── */
.bnr-nav-panel {
  display: flex; align-items: center; justify-content: center;
  border-left: var(--line-w) solid var(--grid);
  border-right: var(--line-w) solid var(--grid);
}
.bnr-nav-panel a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.bnr-nav-en {
  font-size: clamp(11px, 1.5vw, 15px); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--white);
}
.bnr-nav-zh {
  font-size: clamp(14px, 1.9vw, 18px); font-weight: 700;
  color: var(--white); letter-spacing: .04em;
}
/* Order + About labels stay white on every page (no yellow active state). */
.bnr-nav-panel a[aria-current="page"] .bnr-nav-en { color: var(--white); }

/* Hover the Order label to PREVIEW an alternate hanzi (订餐 → 下单). This is a
   non-destructive review aid: 订餐 leans "order food", 下单 is "place an order".
   Default shows 订餐; hover swaps to 下单 so a Chinese reader can compare before
   anyone commits the final term. */
.zh-alt { display: none; }
.bnr-nav-panel a:hover .zh-base,
.bnr-subhead a:hover .zh-base { display: none; }
.bnr-nav-panel a:hover .zh-alt,
.bnr-subhead a:hover .zh-alt  { display: inline; }

/* ─── TOP CENTER ──────────────────────────────────────────────── */
.bnr-top-center {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--topbar-h) * 0.04) 8px;   /* 4% top/bottom around the logo */
  border-left: var(--line-w) solid var(--grid);
  border-right: var(--line-w) solid var(--grid);
}
/* When the brand is a home link (about/beans/etc), the <a> must fill the
   column — otherwise it shrink-wraps to the hidden text and the wordmark
   art renders smaller than on the home page. */
.bnr-top-center a {
  display: flex; width: 100%; align-items: center; justify-content: center;
}
.bnr-brand {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 5vw, 52px); font-weight: 900;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--yellow); line-height: 1; white-space: nowrap;
}

/* ─── BOT CENTER ──────────────────────────────────────────────── */
.bnr-bot-center {
  display: flex; align-items: center; justify-content: center;
  /* borders kept for cell width but invisible (content shows, dividers hidden) */
  border-left: var(--line-w) solid transparent;
  border-right: var(--line-w) solid transparent;
  font-size: clamp(30px, 6vw, 52px); font-weight: 700;
  color: var(--yellow); letter-spacing: .04em;
  text-shadow: var(--sign-shadow);
}

/* ─── TYPOGRAPHY ──────────────────────────────────────────────── */
.section-title {
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pink); margin-bottom: 14px;
}
.page-title {
  font-size: clamp(28px, 5.5vw, 44px); font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase; color: var(--yellow);
  line-height: 1.05; margin-bottom: 8px;
}
.page-sub {
  font-size: 15px; color: var(--muted); margin-bottom: 28px; line-height: 1.65;
}

/* ─── CARDS ───────────────────────────────────────────────────── */
.card {
  background: rgba(255,255,255,.04);
  padding: 18px 20px; margin-bottom: 12px;
}
.card-title {
  font-size: 13px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--white); margin-bottom: 4px;
}
.card-sub { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* ─── POPUP BANNER ────────────────────────────────────────────── */
.popup-banner {
  border: 1px solid var(--pink);
  padding: 14px 18px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.popup-banner .pb-label {
  font-size: 9px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pink); white-space: nowrap;
}
.popup-banner .pb-when {
  font-size: 14px; font-weight: 800; color: var(--yellow); letter-spacing: .06em;
}
.popup-banner .pb-where { font-size: 12px; color: var(--muted); }

/* ─── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  white-space: nowrap; transition: background .15s, color .15s;
}
.btn-outline {
  border: 2px solid var(--yellow); color: var(--yellow); background: transparent;
}
.btn-outline:hover { background: var(--yellow); color: var(--ink); }
.btn-fill {
  background: var(--pink); color: var(--white); border: 2px solid var(--pink);
}
.btn-fill:hover { background: #e0006f; border-color: #e0006f; }
.btn-ghost {
  border: 1px solid rgba(255,255,255,.2); color: var(--white); background: transparent;
}
.btn-ghost:hover { border-color: var(--white); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ─── DIVIDER ─────────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--hairline); margin: 24px 0; }

/* ─── PHOTO PLACEHOLDER ───────────────────────────────────────── */
.photo-placeholder {
  width: 100%; aspect-ratio: 4/3;
  background: rgba(236,0,140,.08);
  border: 1px dashed rgba(236,0,140,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--pink); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ─── ITEM CARD (menu) ────────────────────────────────────────── */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.item-card {
  background: rgba(255,255,255,.04);
  display: flex; flex-direction: column;
}
.item-card .item-photo {
  aspect-ratio: 4/3;
  background: rgba(236,0,140,.08);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: rgba(236,0,140,.5); letter-spacing: .08em; text-transform: uppercase;
}
.item-card .item-body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.item-card .item-name {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--white);
}
.item-card .item-desc { font-size: 11px; color: var(--muted); line-height: 1.4; flex: 1; }
.item-card .item-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-top: 1px solid var(--hairline);
}
.item-card .item-price { font-size: 13px; font-weight: 800; color: var(--yellow); }
.item-card .item-add {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--pink); border: none; color: var(--white);
  font-size: 18px; font-weight: 300; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ─── CATEGORY TABS ───────────────────────────────────────────── */
.cat-tabs {
  display: flex; gap: 0; overflow-x: auto;
  border-bottom: 1px solid var(--hairline); margin-bottom: 20px;
  scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  padding: 10px 18px; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid transparent;
  white-space: nowrap; cursor: pointer; flex-shrink: 0;
}
.cat-tab.active { color: var(--yellow); border-bottom-color: var(--yellow); }

/* ─── STICKY CART BAR ─────────────────────────────────────────── */
.cart-bar {
  position: fixed; bottom: calc(var(--botbar-h) + var(--frame-gap) + var(--frame-w) + 10px);
  left: calc(var(--frame-gap) + var(--frame-w) + 10px);
  right: calc(var(--frame-gap) + var(--frame-w) + 10px);
  background: var(--pink); padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 100; display: none;
}
.cart-bar.visible { display: flex; }
.cart-bar .cb-count { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--white); }
.cart-bar .cb-total { font-size: 16px; font-weight: 900; color: var(--yellow); }
.cart-bar .cb-cta {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--white);
  border: 2px solid var(--white); padding: 8px 16px;
}

/* ─── BRAND IMAGE SWAP ─────────────────────────────────────────────
   Founder-designed art (uploaded; rasterized to webp) replaces the rendered
   TEXT for the wordmark, footer brushmark, nav labels, and corner medallions.
   The original text stays in the DOM as a backup + a11y label (hidden via
   font-size:0). To restore the text version, delete this whole block.
   To upgrade to crisp SVG: re-upload the 8 files via /admin/assets.html and
   change the urls below from /img/brand/*.webp to the .svg paths. */

/* header wordmark — BELT & ROAST. Inline-block sized by its (transparent) text
   at the base font-size; the art is a contained background. Parent is
   text-align:center. */
.bnr-brand {
  display: inline-block; color: transparent; text-shadow: none;
  height: calc(var(--topbar-h) * 0.92);   /* fill the bar (with the parent's 4% pad) */
  width: min(520px, 100%);                 /* wide enough that the wordmark is height-bound, i.e. big */
  background: url('/img/brand/wordmark.webp') center / contain no-repeat;
}
/* footer brushmark — 一带一烘 (image carries its own red shadow) */
.bnr-bot-center {
  font-size: 0 !important; color: transparent; text-shadow: none;
  background: url('/img/brand/brushmark.webp') center / auto 86% no-repeat;
}
/* nav labels — the English label is the uploaded art (on the EN span); the
   Chinese label stays as TEXT below it (订餐 / 关于). */
.bnr-nav-l a, .bnr-nav-r a { flex-direction: column; gap: 5px; justify-content: center; }
.bnr-nav-l .bnr-nav-en, .bnr-nav-r .bnr-nav-en {
  font-size: 0; height: 18px; width: clamp(74px, 9vw, 104px);
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
.bnr-nav-l .bnr-nav-en { background-image: url('/img/brand/nav-order.webp'); }
.bnr-nav-r .bnr-nav-en { background-image: url('/img/brand/nav-about.webp'); }
/* corner medallions — 中 国 咖 啡 (kept inside their circle borders) */
.bnr-corner .medallion {
  font-size: 0 !important; color: transparent; text-shadow: none;
  background-position: center; background-repeat: no-repeat; background-size: 100%;
}
.bnr-corner-tl .medallion { background-image: url('/img/brand/med-zhong.webp'); }
.bnr-corner-tr .medallion { background-image: url('/img/brand/med-guo.webp'); }
.bnr-corner-bl .medallion { background-image: url('/img/brand/med-ka.webp'); }
.bnr-corner-br .medallion { background-image: url('/img/brand/med-fei.webp'); }

/* Next-popup banner visibility is now operator-controlled, not hard-coded.
   It was force-hidden storefront-wide on 2026-06-11; on 2026-06-14 that became
   the admin "Show banner on storefront" toggle (setting next_popup_enabled,
   default off). Storefront pages render the banner only when the toggle is on,
   so there is intentionally no #nextpopup display rule here. */

/* ─── NATIVE PAY (Square Web Payments SDK card form) ──────────── */
.pay-card #bnr-card { margin: 6px 0 14px; min-height: 44px; }
.pay-card .pay { display: block; width: 100%; text-align: center; cursor: pointer; }
.pay-card .pay:disabled { opacity: .55; cursor: default; }
.pay-msg { font-size: 13px; min-height: 18px; margin-top: 8px; color: var(--muted); }
.pay-msg.err { color: var(--pink); }
.pay-secure { font-size: 11px; color: var(--muted); margin-top: 10px; }
.pay-done { font-size: 16px; font-weight: 800; color: var(--yellow); padding: 10px 0; }

/* ─── HERO BLOB ───────────────────────────────────────────────── */
.hero-blob {
  position: relative;
  width: 100%; max-width: 680px;   /* fit the content box (not 96vw → overflowed past the frame at 601-800px) */
  margin: 0 auto 20px;
  text-align: center;
}
.hero-blob .blob-bg {
  display: block; width: 100%; height: auto;
}
.hero-blob .blob-content {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Official logo lockup (BELT & ROAST + 一带一烘 + 咖 COFFEE MADE IN CHINA 啡),
   masked to yellow. The source PNG is white-on-transparent; using its alpha as
   a mask recolors it to exact --yellow regardless of the source color. */
.hero-blob .blob-logo {
  width: 82%; aspect-ratio: 1 / 1;
  background-color: var(--yellow);
  -webkit-mask: url('/logo.png') center / contain no-repeat;
          mask: url('/logo.png') center / contain no-repeat;
}

/* Order/About subheader — only shown on mobile (see media query). The outline
   (sides + cloud-scallop bottom) is drawn by an inline SVG stroke so it stays
   "just the border" with no fill. */
.bnr-subhead { display: none; }
.subhead-edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.subhead-edge path { fill: none; stroke: var(--grid); stroke-width: var(--line-w); }
.bnr-subhead a { position: relative; }   /* above the SVG */
/* Click Order/About → the panel falls (gravity ease-in) as a page transition. */
/* Gravity fall: stays solid (no fade) and accelerates downward, pivoting slightly
   from the top like a dropped curtain. Single transform transition so the JS
   navigates only when the fall actually finishes. */
.bnr-subhead { transition: transform .6s cubic-bezier(.5, 0, .85, .3); transform-origin: top center; will-change: transform; }
.bnr-subhead.falling { transform: translateY(120vh) rotate(5deg); }

/* ─── PAGE CURTAIN — Order/About transition ───────────────────────
   A panel whose LEADING (bottom) edge is the hero-cloud scallop. It lives
   UNDER the frame: the curtain is a grid cell spanning the content row of
   .bnr-page (header/footer/corners/border stay on top, untouched), with an
   inner mover that slides. -100% = scallop tucked under the header, so the
   drop emerges from beneath the top bar and sweeps only the content area.
   On the home page it DROPS to cover the cloud, then we navigate while
   covered; on the destination it's seated on arrival and LIFTS away to
   reveal the shop ("beans appear"). The fill is brand grey and the page
   background is also grey, so the scallop notches read seamlessly (no
   white flash) — only the pink scalloped line is visible sweeping across.
   Tuned in /anim.html. */
.bnr-curtain {
  grid-column: sl/sr; grid-row: bs/be;
  position: relative; z-index: 4;       /* above content, inner frame lines AND the mobile subhead (z3) */
  overflow: hidden; pointer-events: none;
}
.bnr-curtain[hidden] { display: none; }
.bnr-curtain .bnr-curtain-mover {
  position: absolute; inset: 0;
  transform: translateY(-100%); will-change: transform;
}
.bnr-curtain .bnr-curtain-fill {
  position: absolute; left: 0; right: 0; top: 0;
  bottom: calc(var(--edge-h, 60px) - 4px);
  background: var(--pink);
}
/* A full CLONE of the hero cloud (pink blob + yellow lockup) pinned ABOVE the
   mover, at the exact position/size of the page's .hero-blob (carried across
   the nav in sessionStorage) — so on the home page it overlays the real hero
   1:1 and they read as one. It does not ride the falling curtain: it fades in
   with the drop, holds through the covered beat and the reveal, then fades to
   nothing over the new page. JS sets width/height/top when geometry is known;
   the defaults below center it as a fallback. */
.bnr-curtain .bnr-curtain-hero {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(86%, 680px); aspect-ratio: 750.67 / 498;
  opacity: 0; transition: opacity .35s ease;
}
.bnr-curtain .bnr-curtain-blob { position: absolute; inset: 0; width: 100%; height: 100%; }
.bnr-curtain .bnr-curtain-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 82%; aspect-ratio: 1 / 1;        /* mirrors .hero-blob .blob-logo */
  background-color: var(--yellow);
  -webkit-mask: url('/logo.png') center / contain no-repeat;
          mask: url('/logo.png') center / contain no-repeat;
}
.bnr-curtain.drop .bnr-curtain-hero { opacity: 1; }
.bnr-curtain.seated .bnr-curtain-hero { opacity: 1; transition: none; }  /* instant on arrival — continuity across the nav */
/* The cloud dissolves WHILE the curtain falls (slight delay so they part
   first) — gone by the time the reveal ends, no lingering over content. */
.bnr-curtain.lift .bnr-curtain-hero { opacity: 0; transition: opacity var(--curtain-lift, .4s) ease .08s; }
.bnr-curtain.fade .bnr-curtain-hero { opacity: 0; transition: opacity .2s ease; }
/* The scallop is sized to the hero cloud (JS sets --edge-w/--edge-h from the
   .hero-blob, carried across the nav in sessionStorage) so the curtain's edge
   IS the cloud outline, centered — not a stretched full-width version. */
.bnr-curtain .bnr-curtain-edgewrap {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: var(--edge-w, 100%); height: var(--edge-h, 60px);
}
.bnr-curtain .bnr-curtain-edge { width: 100%; height: 100%; display: block; }
.bnr-curtain .bnr-curtain-edge .cf { fill: var(--pink); stroke: none; }  /* pink cloud body */
.bnr-curtain .bnr-curtain-edge .cs { fill: none; stroke: var(--pink); stroke-width: 2.5; }
/* Flat grey shoulders beside a narrower-than-viewport edge, with a pink
   hairline continuing the scallop's shoulder line out to the screen sides. */
.bnr-curtain .bnr-curtain-skirt {
  position: absolute; top: 0; display: none;
  width: calc((100% - var(--edge-w, 100%)) / 2 + 1px);
  bottom: calc(var(--edge-h, 60px) * 0.914);
  background: var(--pink); border-bottom: 2.5px solid var(--pink);
}
.bnr-curtain.narrow .bnr-curtain-skirt { display: block; }
.bnr-curtain .bnr-curtain-skirt.l { left: 0; }
.bnr-curtain .bnr-curtain-skirt.r { right: 0; }
/* TRAILING edge — the cloud TOP silhouette hung just above the mover (the
   same edge SVG flipped vertically) + mirrored shoulders. The curtain reads
   as one giant cloud banner: when the reveal FALLS off the bottom, this
   trailing scallop sweeps down uncovering the page — no abrupt flat tail. */
.bnr-curtain .bnr-curtain-tailwrap {
  position: absolute; bottom: calc(100% - 6px);   /* 6px overlap into the fill — kills the seam */
  left: 50%; transform: translateX(-50%) scaleY(-1);
  width: var(--edge-w, 100%); height: var(--edge-h, 60px);
}
.bnr-curtain .bnr-curtain-tailskirt {
  position: absolute; bottom: calc(100% - 6px); display: none;
  width: calc((100% - var(--edge-w, 100%)) / 2 + 1px);
  height: calc(var(--edge-h, 60px) * 0.086 + 6px);   /* shoulder line down into the fill */
  background: var(--pink); border-top: 2.5px solid var(--pink);
}
.bnr-curtain.narrow .bnr-curtain-tailskirt { display: block; }
.bnr-curtain .bnr-curtain-tailskirt.l { left: 0; }
.bnr-curtain .bnr-curtain-tailskirt.r { right: 0; }
/* DROP: gravity-ish accel to cover the cloud. */
.bnr-curtain.drop .bnr-curtain-mover { transition: transform var(--curtain-drop, .68s) cubic-bezier(.45, 0, .75, .35); transform: translateY(0); }
/* LIFT (reveal): seated → keeps FALLING off the bottom, under the footer —
   the curtain passes through rather than bouncing back up. */
.bnr-curtain.seated .bnr-curtain-mover { transform: translateY(0); }
.bnr-curtain.lift .bnr-curtain-mover   { transition: transform var(--curtain-lift, .4s) cubic-bezier(.32, .12, .2, 1); transform: translateY(calc(112% + var(--edge-h, 60px))); }  /* + edge-h so the trailing dome fully exits too */
@media (prefers-reduced-motion: reduce) {
  .bnr-curtain { display: none !important; }   /* no motion → instant nav, no reveal */
}

/* ─── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Smaller corner bars + tighter frame gap for the narrow viewport. */
  :root { --topbar-h: 74px; --botbar-h: 56px; --frame-gap: 7px; }

  /* Header collapses to 中 | BELT & ROAST | 国 — Order/About hidden on mobile. */
  .bnr-top { grid-template-columns: var(--topbar-h) 1fr var(--topbar-h); }
  .bnr-nav-panel { display: none; }

  /* Pull the 3-line side channel in so it doesn't eat the content width. */
  .bnr-page::before { inset: 12px; }
  .bnr-page::after  { inset: 18px; }

  /* Scale type/medallions to the smaller bars. */
  .bnr-top .medallion { font-size: 28px; }
  .bnr-bot .medallion { font-size: 24px; }
  .bnr-brand { font-size: clamp(18px, 6.5vw, 30px); }
  /* Side padding must clear the inner channel line (≈21px) so left-aligned
     text isn't drawn over by it. */
  .bnr-inner { padding: 26px 28px 64px; }
  /* Cloud = 94% of the span between the third (innermost) channel lines.
     Third line inner edge = frame-gap + page-border + ::after inset(18) +
     ::after border, from each side; centered via margin:auto. */
  .hero-blob {
    width: calc((100vw - 2 * (var(--frame-gap) + 18px + 2 * var(--line-w))) * 0.94);
    max-width: none;
  }

  /* Order/About subheader: a bordered rectangle (NO fill, just the border) hung
     under the brand column; its side borders continue the lines next to the
     中/国 circles (both at --topbar-h from each edge). */
  .bnr-subhead {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    position: absolute; z-index: 3;
    top: var(--topbar-h); left: var(--topbar-h); right: var(--topbar-h);
    padding: 8px 8px 30px;   /* extra bottom room for the cloud-bottom curve */
  }
  .bnr-subhead a { display: inline-flex; gap: 6px; align-items: baseline; }
  .bnr-subhead .sh-en { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
  .bnr-subhead .sh-zh { font-size: 16px; color: var(--white); }

  /* Tighter offset on the smaller mobile signage type. */
  :root { --sign-shadow: 2px 1px 0 var(--red); }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECONDARY / UTILITY PAGES — wallet · rewards · card · feedback
   Scoped under .bnr-doc so none of this can touch the storefront pages.
   These were on the old maroon app.css; this is the noir equivalent.
   ═══════════════════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.bnr-doc { max-width: 600px; margin: 0 auto; }

/* —— panels —————————————————————————————————————————————— */
.bnr-doc .card { background: rgba(255,255,255,.04); padding: 18px 20px; margin-bottom: 14px; }
.bnr-doc .card h2 { font-size: 16px; font-weight: 800; color: var(--white); margin: 0 0 4px; }
.bnr-doc .card .sub, .bnr-doc .sub { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.bnr-doc .k, .bnr-doc .card > .k {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pink); margin-bottom: 6px;
}
.bnr-doc .lead { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
.bnr-doc .note {
  background: rgba(255,255,255,.04); padding: 11px 13px; font-size: 12px;
  color: var(--muted); line-height: 1.55; margin-top: 12px;
}

/* —— forms ——————————————————————————————————————————————— */
.bnr-doc label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 16px 0 7px;
}
.bnr-doc input, .bnr-doc select, .bnr-doc textarea {
  display: block; width: 100%; padding: 12px 13px; font: inherit; font-size: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15);
  color: var(--white); font-family: inherit;
}
.bnr-doc input:focus, .bnr-doc select:focus, .bnr-doc textarea:focus {
  outline: none; border-color: var(--yellow);
}
.bnr-doc textarea { min-height: 90px; resize: vertical; }
.bnr-doc input::placeholder, .bnr-doc textarea::placeholder { color: rgba(255,255,255,.35); }
.bnr-doc .helper { font-size: 12px; color: var(--muted); margin-top: 6px; }
.bnr-doc .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bnr-doc .row2 input { width: 100%; }
.bnr-doc .opt {
  display: flex; gap: 9px; align-items: flex-start; margin: 11px 0 0;
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--white);
}
.bnr-doc .opt input { width: auto; margin-top: 2px; flex-shrink: 0; }
.bnr-doc .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* —— buttons (full-width primary; overrides the compact global .btn) ——— */
.bnr-doc .btn {
  display: block; width: 100%; margin-top: 14px; padding: 15px; min-height: 48px;
  background: var(--pink); color: var(--white); border: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  transition: background .15s;
}
.bnr-doc .btn:hover { background: #e0006f; }
.bnr-doc .btn:disabled, .bnr-doc .btn-ghost:disabled { opacity: .5; cursor: default; }
.bnr-doc .btn-ghost {
  display: block; width: 100%; margin-top: 10px; padding: 14px; min-height: 48px;
  background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.3);
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.bnr-doc .btn-ghost:hover { border-color: var(--yellow); color: var(--yellow); }
.bnr-doc .linkbtn {
  background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: var(--yellow); font-weight: 700; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; min-height: 0; width: auto;
}

/* —— text helpers ——————————————————————————————————————— */
.bnr-doc .muted { color: var(--muted); font-size: 13px; }
.bnr-doc .center { text-align: center; }
.bnr-doc .err { color: #ff8a8a; font-size: 13px; font-weight: 700; margin-top: 8px; min-height: 1em; }
.bnr-doc a { color: var(--yellow); }
.bnr-doc .nav { margin-top: 22px; font-size: 13px; text-align: center; }
.bnr-doc .nav a { color: var(--yellow); font-weight: 700; text-decoration: none; margin: 0 6px; }

/* —— balance / ledger (wallet + rewards + card) ——————————————— */
.bnr-doc .balance { text-align: center; padding: 6px 0 2px; }
.bnr-doc .balance .num { font-size: 48px; font-weight: 800; color: var(--yellow); line-height: 1; }
.bnr-doc .balance .lbl {
  font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px;
}
.bnr-doc .refchip {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800;
  background: rgba(255,255,255,.08); padding: 5px 10px; letter-spacing: .06em; color: var(--white);
}
.bnr-doc .ledger .row {
  display: flex; justify-content: space-between; padding: 9px 0;
  border-top: 1px solid var(--hairline); font-size: 14px; color: var(--white);
}
.bnr-doc .ledger .row:first-child { border-top: none; }
.bnr-doc .pos { color: #4ade80; font-weight: 700; }
.bnr-doc .neg { color: #ff8a8a; font-weight: 700; }
.bnr-doc .bar {
  height: 12px; background: rgba(255,255,255,.1); overflow: hidden; margin: 14px 0 8px;
}
.bnr-doc .bar > i { display: block; height: 100%; background: var(--yellow); transition: width .4s; }
.bnr-doc .reward-banner {
  background: rgba(236,0,140,.1); padding: 12px; text-align: center; font-weight: 700;
  color: var(--white); margin-top: 12px;
}

/* —— wallet: gift redeem + pay-it-forward ——————————————————— */
.bnr-doc .gift-ok { background: rgba(236,0,140,.08); padding: 14px; text-align: center; margin-top: 10px; }
.bnr-doc .gift-ok .amt { font-size: 30px; font-weight: 800; color: var(--yellow); }
.bnr-doc .pif { background: rgba(255,255,255,.04); padding: 14px; }
.bnr-doc .pif .big { font-weight: 800; font-size: 15px; color: var(--white); }

/* —— loyalty card (/card) + QR ——————————————————————————— */
.bnr-doc .lcard { background: rgba(255,255,255,.04); padding: 18px; text-align: center; margin-bottom: 14px; }
.bnr-doc .lcard .k { color: var(--pink); margin-bottom: 10px; }
.bnr-doc .lcard .sub { color: var(--muted); font-size: 13px; margin-top: 8px; }
.bnr-doc .qrwrap { display: flex; justify-content: center; margin: 14px 0 8px; }
.bnr-doc .qrwrap img {
  width: 230px; height: 230px; image-rendering: pixelated; background: #fff; padding: 10px;
}
.bnr-doc .lid-big {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; font-size: 22px;
  letter-spacing: .10em; color: var(--yellow); margin: 6px 0;
}

/* —— error box (card page) ——————————————————————————————— */
.bnr-doc .errbox { background: rgba(255,138,138,.1); padding: 18px; text-align: center; margin-top: 8px; color: var(--white); }
.bnr-doc .errbox button {
  margin-top: 12px; width: auto; padding: 12px 20px; background: var(--pink); color: var(--white);
  border: none; font: inherit; font-weight: 800; cursor: pointer; min-height: 44px;
}

/* —— feedback: star rating + thanks ——————————————————————— */
.bnr-doc .stars { font-size: 40px; text-align: center; letter-spacing: 6px; user-select: none; margin: 8px 0 14px; }
.bnr-doc .stars [role="radio"] {
  background: none; border: none; padding: 0 3px; font: inherit; font-size: 40px; line-height: 1;
  color: rgba(255,255,255,.25); cursor: pointer; min-height: 44px; min-width: 44px;
}
.bnr-doc .stars [role="radio"].on { color: var(--yellow); }
.bnr-doc .done { text-align: center; padding: 24px 8px; }
.bnr-doc .done .big { font-size: 44px; }
.bnr-doc .done-actions, .bnr-doc .socials {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px;
}
.bnr-doc .done-actions a, .bnr-doc .socials a {
  flex: 1; min-width: 130px; text-align: center; text-decoration: none; font-weight: 800;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--white);
  border: 1px solid rgba(255,255,255,.3); padding: 12px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.bnr-doc .done-actions a:hover, .bnr-doc .socials a:hover { border-color: var(--yellow); color: var(--yellow); }
.bnr-doc .done-actions a.primary { background: var(--pink); border-color: var(--pink); color: var(--white); }
.bnr-doc .done-actions a.primary:hover { background: #e0006f; }