/* ==========================================================================
   線上點餐頁 · 夜空月光 Night Moon
   建立在 theme-night.css 之上(色彩 token --n-*、夜空底、NightSerif、焦點樣式、[hidden] 全域補丁都在那支),
   這裡只放點餐頁自己的版面與表面。2026-09-30 改版:只換外觀(配色、表面、字體、圓角、陰影、動效),
   選擇器、黏頂位置、層級(z-index)、各元件的顯示/隱藏規則一律沿用改版前,不動版面結構與互動。
   動效只動 transform / opacity(掃光從改 left 換成 translateX)。
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  /* 舊 token 對到夜空月光(保險:漏改的地方也不會跑出淺色紙底或赭紅字) */
  --primary: #f0c038;        /* = --n-moon */
  --primary-2: #ffe07a;      /* = --n-moon-hi */
  --primary-dark: #ffe07a;   /* 舊版在淺底上當深色強調字 → 深底上改用亮月黃 */
  --primary-soft: rgba(240, 192, 56, .12);
  --gold: #f0c038;
  --gold-lite: #ffe07a;
  --red: #ff8a7a;
  --amber: #f2a14a;
  --green: #72e4ab;
  --ink: #f5f2e9;
  --muted: #97a5c8;
  --line: rgba(172, 190, 255, .16);
  --bg: #0c1a3d;
  --card: #152a5c;
  --ok: #72e4ab;
  --warn: #ffae93;
  --radius: var(--n-radius);   /* 卡片圓角 20(共用圓角規則,見 THEME §1) */
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 26px rgba(2, 8, 26, .34);
  --shadow-lg: 0 18px 44px rgba(2, 8, 26, .5);
  --frame: 460px;
  /* 點餐頁自己的表面:一律引用共用 token(以前各寫一份數值,跟會員頁、加盟頁對不上) */
  --c-field: var(--n-field-bg);             /* 輸入框底 */
  --c-field-solid: var(--n-field-solid);    /* 輸入框實心底(自動填入時蓋掉瀏覽器的淺黃底) */
  --c-chip: var(--n-chip-bg);               /* 未選的選項 / 次要小按鈕 */
  --c-sel: var(--n-sel);                    /* 選中的選項底:冷月光 + 月黃框 + 亮月黃字(金色低透明鋪面會發灰褐,只准用在框和字) */
  --c-bar: #0a1636;                         /* 黏頂分類列(不透明,不用 blur:LINE 舊 WebView 也順,捲過去的卡片不會透出來) */
}
/* 線條圖示:跟隨文字色與字級,細膩收邊 */
.ic { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.15em; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html { font-size: 16px; }
body {
  font-family: var(--n-sans);
  min-height: 100vh; min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  /* 底色 / 字色 / 夜空漸層由 theme-night.css 提供(舊版在這裡寫死 #ded6c8 奶油底,會把夜空蓋回去) */
}
button { font-family: inherit; border: none; cursor: pointer; background: none; color: inherit; }
a { color: inherit; }

/* ===== 整頁底:固定在視窗後面的靜態夜空(星點 + 冷色月暈)=====
   舊版是四顆會旋轉的模糊色球(filter blur 64px + mix-blend,手機很吃電);改成完全靜止的一層,不吃效能。 */
#wc-bg { position: fixed; top:0; right:0; bottom:0; left:0; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: none;
  -webkit-mask-image: linear-gradient(#000 0, #000 40%, transparent 88%); mask-image: linear-gradient(#000 0, #000 40%, transparent 88%); }
#wc-bg::before {
  content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%;
  box-shadow:
    8vw 6vh 0 0 rgba(222, 230, 255, .34), 21vw 14vh 0 0 rgba(222, 230, 255, .22), 34vw 4vh 0 0 rgba(255, 226, 160, .36),
    47vw 19vh 0 0 rgba(222, 230, 255, .26), 61vw 9vh 0 .5px rgba(222, 230, 255, .30), 74vw 23vh 0 0 rgba(222, 230, 255, .20),
    88vw 5vh 0 0 rgba(222, 230, 255, .38), 95vw 17vh 0 0 rgba(255, 226, 160, .26), 4vw 28vh 0 0 rgba(222, 230, 255, .18),
    15vw 37vh 0 0 rgba(222, 230, 255, .24), 29vw 31vh 0 0 rgba(222, 230, 255, .16), 41vw 42vh 0 0 rgba(255, 226, 160, .22),
    56vw 34vh 0 0 rgba(222, 230, 255, .20), 68vw 45vh 0 0 rgba(222, 230, 255, .16), 81vw 38vh 0 .5px rgba(222, 230, 255, .24),
    92vw 49vh 0 0 rgba(222, 230, 255, .18), 11vw 55vh 0 0 rgba(222, 230, 255, .14), 36vw 60vh 0 0 rgba(222, 230, 255, .14),
    63vw 58vh 0 0 rgba(255, 226, 160, .16), 85vw 64vh 0 0 rgba(222, 230, 255, .14);
}
#wc-bg::after {   /* 冷色月暈(右上):大面積光暈一律用冷月光,金色低透明鋪大面積會發灰 */
  content: ""; position: absolute; top: -170px; right: -130px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(206, 220, 255, .16), rgba(150, 176, 255, .06) 50%, transparent 74%);
}

/* ===== 手機比例外框(桌面置中成手機寬) ===== */
.view {
  position: relative; z-index: 1;
  max-width: var(--frame); margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  overflow-x: clip;   /* 輪播側卡/裝飾球不造成整頁橫向捲動;clip 不建立捲動容器→不影響 sticky 表頭與直向捲動 */
  /* 手機:透明,直接露出夜空;桌機(寬於外框)才畫出手機外框的邊(見檔尾 @media)。
     舊版這裡有 backdrop-filter(整頁霧面),很吃效能,也會讓 position:fixed 的子元素失效,拿掉 */
  background: transparent;
}

/* ===== 頂端一條:小 LOGO + 店名 + 營業狀態小圓點 | 會員中心 + 切換分店 =====
   2026-10-02 畫面整理:以前分店色帶與店名頁首兩條都寫店名、往下捲還三條一起黏在上面(佔畫面三分之一);
   現在合成一條約 60px、跟著頁面捲走,往下捲時只固定分類列。分店色留在左側 5px 細色條(防點錯的視覺錨點)。
   營業狀態只畫一顆小圓點(綠 = 營業中、紅 = 沒營業),文字給讀屏軟體;沒營業時下面的說明卡會寫清楚原因 */
.c-header {
  position: relative; z-index: 20;
  background: var(--n-grain), linear-gradient(180deg, rgba(14, 29, 68, .98) 0%, rgba(10, 22, 54, .97) 100%);
  background-color: #0b1838;
  color: var(--n-ink);
  min-height: 60px; padding: 8px 12px 8px 17px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--n-line);
  box-shadow: inset 5px 0 0 var(--store-accent, var(--n-moon)), 0 8px 22px rgba(2, 8, 26, .32);
}
.c-store { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.c-store #c-store-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; flex-shrink: 0;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); }
.c-store > span:not(.pill-open) {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--n-serif); font-size: 18px; font-weight: 900; letter-spacing: .04em; line-height: 1.35;
  color: #ffe9a8;   /* 漸層字不支援時的實色退路 */
  background: linear-gradient(180deg, #fff7da 10%, #f0c038 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* 營業狀態小圓點:字還在(讀屏軟體念得到、測試讀得到),畫面上只留圓點 */
.pill-open {
  position: relative; flex: 0 0 auto; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  overflow: hidden; white-space: nowrap; font-size: 0; line-height: 0; color: transparent;
  background: var(--n-ok); box-shadow: 0 0 0 3px rgba(114, 228, 171, .16), 0 0 8px rgba(114, 228, 171, .55);
}
.pill-open.closed { background: var(--red); box-shadow: 0 0 0 3px rgba(255, 138, 122, .16); }
.pill-open.is-wait { background: var(--n-line-2); box-shadow: none; }   /* 還在查營業狀態:灰點,不先亮綠 */
/* 右側:會員中心、切換分店(腳本放進 #store-bar / #t-acts) */
.c-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.c-acts:empty { display: none; }

/* ===== 標題區夜空:跟首頁頁首同一套(靜態星點 + 五顆小閃光 + 偶爾一顆流星) =====
   夜空放在 .c-header 裡面當背景:標題列本身是實心深藍(黏頂時底下的菜單不能透出來),夜空畫在它的底色上面、字的後面。
   z-index:-1 = 蓋過標題列自己的底色、墊在店名與營業膠囊後面;pointer-events:none(.n-sky 已有)不擋點擊;
   範圍被標題列裁住(.n-sky 自帶 overflow:hidden),不會撐出版面、不造成橫向捲動。
   星點位置用「外框寬度」換算(--c-skyw):手機 = 整個視窗寬,桌機外框 460px 時 = 460px,星星不會全擠在左邊。
   五顆閃光(.n-tw,共用樣式在 theme-night.css)由 customer.js initNightSky() 補上;只動 opacity / transform。 */
.c-header > .c-sky { --c-skyw: 100vw; z-index: -1; bottom: 0; height: auto;
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
@media (min-width: 461px) { .c-header > .c-sky { --c-skyw: var(--frame); } }
.c-sky::before {
  box-shadow:
    calc(var(--c-skyw) * 0.078) 70px 0 0 rgba(222, 230, 255, .28),
    calc(var(--c-skyw) * 0.624) 44px 0 0 rgba(222, 230, 255, .44),
    calc(var(--c-skyw) * 0.978) 22px 0 0 rgba(222, 230, 255, .29),
    calc(var(--c-skyw) * 0.036) 75px 0 0 rgba(255, 226, 160, .48),
    calc(var(--c-skyw) * 0.398) 57px 0 0 rgba(255, 226, 160, .52),
    calc(var(--c-skyw) * 0.373) 36px 0 0 rgba(222, 230, 255, .31),
    calc(var(--c-skyw) * 0.122) 111px 0 0 rgba(222, 230, 255, .43),
    calc(var(--c-skyw) * 0.108) 59px 0 0 rgba(255, 226, 160, .3),
    calc(var(--c-skyw) * 0.238) 21px 0 0 rgba(222, 230, 255, .45),
    calc(var(--c-skyw) * 0.107) 86px 0 0 rgba(222, 230, 255, .47),
    calc(var(--c-skyw) * 0.482) 12px 0 0 rgba(222, 230, 255, .36),
    calc(var(--c-skyw) * 0.842) 78px 0 0 rgba(222, 230, 255, .43),
    calc(var(--c-skyw) * 0.716) 124px 0 .5px rgba(222, 230, 255, .21),
    calc(var(--c-skyw) * 0.915) 29px 0 0 rgba(222, 230, 255, .48),
    calc(var(--c-skyw) * 0.24) 112px 0 0 rgba(222, 230, 255, .53),
    calc(var(--c-skyw) * 0.059) 117px 0 0 rgba(222, 230, 255, .29),
    calc(var(--c-skyw) * 0.33) 60px 0 0 rgba(222, 230, 255, .34),
    calc(var(--c-skyw) * 0.516) 130px 0 0 rgba(222, 230, 255, .21),
    calc(var(--c-skyw) * 0.646) 75px 0 0 rgba(222, 230, 255, .23);
}
/* 流星:跟首頁同一顆(14 秒一輪、只在最後一小段劃過),劃過的距離縮短,不超出這條標題列 */
.c-sky .meteor { position: absolute; top: 12px; left: 78%; width: 90px; height: 1px; border-radius: 1px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 246, 220, .8), rgba(255, 236, 190, 0));
  animation: meteor 14s linear 3s infinite; }
@keyframes meteor {
  0%, 88% { opacity: 0; transform: rotate(-24deg) translateX(0); }
  90% { opacity: .85; }
  96% { opacity: 0; transform: rotate(-24deg) translateX(-200px); }
  100% { opacity: 0; transform: rotate(-24deg) translateX(-200px); }
}
/* 節電:標題列已黏在頂端(頁面往下捲)時暫停閃光,流星一併收起(暫停在半途會留下一道定格的亮線) */
.c-sky.n-off .meteor { visibility: hidden; }
/* 哨兵:放在標題列正上方的 1px 空元素,捲過它 = 標題列離開頁面頂端(IntersectionObserver 看這個,不是看黏頂的標題列本身) */
.c-sky-sentinel { display: block; height: 1px; margin-bottom: -1px; pointer-events: none; visibility: hidden; }
/* 減少動態:流星不顯示(閃光停在半亮,theme-night.css 已處理),靜態星點照常 */
@media (prefers-reduced-motion: reduce) { .c-sky .meteor { display: none; } }

/* hero 新品小標(扇形卡上) */
.fan-new {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  background: linear-gradient(180deg, #ffe382, #f0c038);
  color: var(--n-on-moon); font-size: 12px; font-weight: 900; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 999px; box-shadow: 0 3px 10px rgba(2, 8, 26, .45);
}

/* 品牌標語:跟首頁同一句(後台品牌標語),頂端那條下面一行小字,不黏在上方 */
.c-slogan { margin: 10px 14px 0; text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; color: var(--n-moon-hi); opacity: .9; }
body.c-hard-off .c-slogan { display: none; }

/* ===== hero:三卡扇形旋轉輪播 =====
   2026-10-02 縮小(中間卡約 120 寬、整塊約 160 高):打開點餐頁第一個畫面至少要看得到 2 張菜。
   高度跟著內容(不再寫死):小圓點一定完整露在分類列上方 */
.c-hero { position: relative; margin: 8px 14px 8px; }
.fan { position: relative; height: 126px; }
/* 中央卡後面墊一圈冷月光(卡通圖放在亮面上才不像貼紙) */
.fan::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 230px; height: 230px; margin: -115px 0 0 -115px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(206, 220, 255, .16), rgba(150, 176, 255, .06) 52%, transparent 76%); }
.fan-card {
  position: absolute; top: 3px; left: 50%; width: 112px; height: 120px;
  margin-left: -56px; border-radius: 16px; overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--n-night-3);
  box-shadow: 0 16px 36px rgba(2, 8, 26, .55);
  transition: transform .75s cubic-bezier(.5,.05,.2,1), opacity .6s;
  cursor: pointer; will-change: transform;
}
/* 超窄螢幕(≤320px):扇形卡片縮小 + 側卡視覺完全隱藏 */
@media (max-width: 320px) {
  .fan-card { width: 104px; height: 112px; margin-left: -52px; }
  .fan-card.pos-left { transform: translateX(-50px) rotate(-10deg) scale(.6); opacity: 0; }
  .fan-card.pos-right { transform: translateX(50px) rotate(10deg) scale(.6); opacity: 0; }
  .fan { height: 118px; }
}
.fan-card::after {   /* 底部漸層讓卡面更有層次 */
  content: ""; position: absolute; top:0; right:0; bottom:0; left:0; inset: 0;
  background: linear-gradient(transparent 58%, rgba(9, 19, 46, .55));
}
/* 三個位置:左後、中前、右後(側卡在深底上用透明度就夠暗,不再疊 brightness/blur 濾鏡) */
.fan-card.pos-left   { transform: translateX(-62px) rotate(-12deg) scale(.8); opacity: .38; z-index: 1; }
.fan-card.pos-center { transform: translateX(0) rotate(0) scale(1.04); opacity: 1; z-index: 3; }
.fan-card.pos-right  { transform: translateX(62px) rotate(12deg) scale(.8); opacity: .38; z-index: 2; }
.fan-card.pos-hidden { transform: translateX(0) scale(.6); opacity: 0; z-index: 0; }
/* 中央卡月黃細框 + 掃光 */
.fan-card.pos-center { box-shadow: 0 18px 44px rgba(2, 8, 26, .6), 0 0 0 2px var(--n-moon), 0 0 26px rgba(240, 192, 56, .22); }
.fan-card.pos-center::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: 0;
  background: linear-gradient(105deg, transparent, rgba(255, 245, 210, .42), transparent);
  transform: translateX(-140%);
  animation: fan-shine 3.4s ease-in-out infinite; z-index: 2;
}
@keyframes fan-shine { 0% { transform: translateX(-140%); } 55%, 100% { transform: translateX(300%); } }
.fan-cap { text-align: center; margin-top: 6px; height: 22px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fan-name { font-size: 15.5px; font-weight: 900; color: var(--n-ink); letter-spacing: .04em; }
.fan-price { font-size: 14.5px; font-weight: 900; color: var(--n-moon-hi); margin-left: 8px; }
.fan-dots { display: flex; gap: 6px; justify-content: center; margin-top: 6px; height: 6px; }
.fan-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--n-line-2); transition: all .3s; }
.fan-dots i.on { background: var(--n-moon); width: 18px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .fan-card.pos-center::before { animation: none; opacity: 0; } }

/* ===== 活動區:本期活動(大格)+ 下期預告(灰格,點開展開) =====
   2026-10-08。後台「點餐頁活動區」開著且有活動可放時,取代上面的新品輪播(位置相同、同一個 margin)。
   兩格並排;.ab-solo(只有本期、沒有下期預告)時大格撐滿整排。 */
.c-ab { margin: 8px 14px 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.c-ab[hidden] { display: none !important; }
.ab-cur, .ab-next { flex: 1 1 0; min-width: 132px; text-align: left; border: none; border-radius: 16px; cursor: pointer;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; color: var(--n-ink); font-family: inherit; }
.c-ab.ab-solo .ab-cur { flex: 1 1 100%; }
.ab-cur { background: var(--n-grain), linear-gradient(135deg, rgba(240, 192, 56, .16), rgba(22, 40, 92, .5) 65%);
  background-color: var(--n-night-3); box-shadow: 0 16px 36px rgba(2, 8, 26, .45); border: 1px solid rgba(240, 192, 56, .3); }
.ab-next { background-color: var(--n-night-2); border: 1px dashed var(--n-line-2); opacity: .88; }
.ab-next.ab-on { opacity: 1; border-style: solid; border-color: var(--n-moon); }
.ab-tag { font-size: 11px; font-weight: 800; color: var(--n-moon-hi); letter-spacing: .06em; }
.ab-title { font-size: 15.5px; font-weight: 900; }
.ab-q { font-size: 20px; font-weight: 900; color: var(--n-ink-2); line-height: 1; margin: 2px 0; }
.ab-line { font-size: 12.5px; color: var(--n-ink-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.ab-tail { font-size: 11.5px; font-weight: 700; color: var(--n-moon-hi); margin-top: 1px; }
.ab-extra { font-size: 11px; color: var(--n-ink-2); text-decoration: underline; margin-top: 2px; }
.ab-detail { flex: 1 1 100%; margin-top: -2px; padding: 10px 12px; border-radius: 14px; background: var(--n-night-2);
  border: 1px solid var(--n-line-2); font-size: 13px; line-height: 1.55; color: var(--n-ink); }
.ab-detail[hidden] { display: none !important; }

/* ===== categories ===== */
.c-cats {
  position: sticky; top: 0; z-index: 21;   /* 往下捲時唯一固定在上方的一列(頂端店名那條跟著捲走) */
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px 10px;
  background: linear-gradient(var(--c-bar) 78%, rgba(10, 22, 54, 0));
  scrollbar-width: none;
}
.c-cats::-webkit-scrollbar { display: none; }
.c-cats:empty { background: none; }   /* 菜單載入失敗時分類列是空的:不要蓋住頁首的「載入失敗」膠囊 */
.c-cats button {
  flex: 0 0 auto; font-size: 16px; font-weight: 700; padding: 10px 18px; border-radius: 999px;
  min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center;
  background: var(--c-chip); color: var(--n-ink-2); box-shadow: none;
  border: 1.5px solid var(--n-line-2); transition: color .15s, background-color .15s, border-color .15s, transform .15s;
}
/* 選中:月黃細框 + 亮月黃字(實心月黃留給最底下的「查看購物車」,一個畫面只有一顆實心) */
.c-cats button.active {
  background: var(--c-sel); color: var(--n-moon-hi); border-color: var(--n-moon);
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(240, 176, 40, .16), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ===== items ===== */
.c-items { padding: 4px 14px 100px; position: relative; }
.c-cat-title {
  font-family: var(--n-serif); font-size: 19px; font-weight: 900; letter-spacing: .08em; margin: 20px 4px 10px;
  display: flex; align-items: center; gap: 10px; color: var(--n-ink);
}
.c-cat-title::before {   /* 月黃四角星(同 theme 的 .n-title) */
  content: ""; width: 12px; height: 12px; flex: 0 0 auto; background: var(--n-moon);
  -webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.c-cat-title::after { content: ""; flex: 1; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, var(--n-line-2), transparent); }
.c-item {
  width: 100%; text-align: left; position: relative;
  background: var(--n-grain), var(--n-glass);
  background-color: var(--n-night-2);   /* 漸層失效時的實心底 */
  color: var(--n-ink);
  border-radius: var(--radius); padding: 12px 14px;
  margin-bottom: 11px;
  display: flex; align-items: center; gap: 13px;
  box-shadow: var(--shadow);
  transition: transform .12s, border-color .15s;
  animation: card-in .45s ease backwards;
  border: 1px solid var(--n-line);
}
.c-item:active { transform: scale(.98); }
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }
.c-items.no-anim .c-item { animation: none; }   /* 畫面稽核 U5-15:淡入只在第一次畫菜單時播,加購物車重畫不再整頁閃 */
/* 卡通品項圖:暖色琥珀光 + 深藍底的圖框。圖本身是不透明白紙底,以前鋪滿整格、底色一點都露不出來,像貼紙;
   現在留 4px 內距,底色變成一圈暖光框(img 的圓角會同時裁掉圖的四角),外面再一圈琥珀光暈 */
.c-item .thumb {
  width: 78px; height: 78px; padding: 4px; border-radius: var(--n-radius-md); object-fit: cover; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 45%, rgba(255, 214, 120, .42), rgba(242, 161, 74, .16) 62%, rgba(242, 161, 74, .10) 100%), #172a5c;
  box-shadow: 0 0 0 1px rgba(255, 214, 140, .38), 0 0 18px rgba(242, 161, 74, .24), 0 8px 18px rgba(2, 8, 26, .4);
}
.c-item .thumb.ph {
  display: flex; align-items: center; justify-content: center; color: var(--n-moon);
  background: radial-gradient(circle at 50% 42%, rgba(255, 214, 120, .26), rgba(240, 160, 60, .06) 58%, transparent 74%), #172a5c;
}
.thumb.ph .ic { width: 42%; height: 42%; stroke-width: 1.5; opacity: .85; }
.c-item .l { flex: 1; min-width: 0; }
.c-item .n { font-size: 16.5px; font-weight: 800; color: var(--n-ink); }
.c-item .desc {
  font-size: 12.5px; color: var(--n-muted); margin-top: 4px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c-item .sub { font-size: 12px; color: var(--n-moon-hi); margin-top: 5px; opacity: .9; }
.c-item .r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.c-item .p { font-size: 17px; font-weight: 900; color: var(--n-moon-hi); white-space: nowrap; }
.c-item .add-fab {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-sel); color: var(--n-moon-hi);
  border: 1px solid rgba(240, 192, 56, .55);
  font-size: 21px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(240, 176, 40, .14);
}
.c-item.soldout { opacity: .55; filter: grayscale(.5); }
.c-item.soldout .add-fab { display: none; }
/* 沒營業時(body.c-closed,customer.js renderClosedBanner 掛上):「+」換成灰色小字「營業後可點」,
   以前「+」照樣亮著,按了才跳紅字。卡片照樣點得開(會先重問營業狀態) */
.c-item .add-later { display: none; font-size: 12px; font-weight: 700; color: var(--n-muted); white-space: nowrap; line-height: 34px; }
body.c-closed .c-item .add-fab { display: none; }
body.c-closed .c-item .add-later { display: inline-block; }

/* ===== 新品上市:月黃角落斜帶 + 月光掃過 ===== */
.c-item.isnew { border: 1px solid rgba(240, 192, 56, .5); box-shadow: var(--shadow), 0 8px 24px rgba(240, 176, 40, .12); overflow: hidden; }
.c-item.isnew::after {   /* 整卡月光掃過(只動 transform) */
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: 0;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 200, .16), transparent);
  transform: translateX(-140%);
  animation: new-shine 3.2s ease-in-out infinite; pointer-events: none; z-index: 2;
}
@keyframes new-shine { 0% { transform: translateX(-140%); } 55%, 100% { transform: translateX(360%); } }
.c-item .new-ribbon {
  position: absolute; top: 0; left: 0; width: 78px; height: 78px; overflow: hidden; z-index: 3; pointer-events: none;
}
.c-item .new-ribbon::before {
  content: "新品上市"; position: absolute; width: 150%; height: 22px; top: 14px; left: -38px;
  transform: rotate(-45deg);
  background: linear-gradient(180deg, #ffe382 0%, #f0c038 60%, #e2a728 100%);
  color: var(--n-on-moon); font-size: 12px; font-weight: 900; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(2, 8, 26, .45);
}
.c-item.isnew .thumb { box-shadow: 0 0 0 2px rgba(240, 192, 56, .6), 0 0 18px rgba(242, 161, 74, .26), 0 8px 18px rgba(2, 8, 26, .4); }
.c-item .soldout-tag {
  font-size: 12px; font-weight: 800; color: var(--n-ink-2); background: rgba(255, 255, 255, .08);
  border: 1px solid var(--n-line-2); border-radius: 999px; padding: 3px 10px;
}
.c-item .badge-qty {
  background: var(--n-moon); color: var(--n-on-moon); font-size: 13px; font-weight: 800;
  border-radius: 999px; min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 6px; vertical-align: 2px;
}

/* ===== cart bar ===== */
.c-cart-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 30;
  width: 100%; max-width: var(--frame);
  padding: 12px 14px 12px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(8, 18, 49, 0), rgba(8, 18, 49, .94) 42%);
}
/* 點餐頁最重要的一顆:實心月亮黃 + 深藍字 */
.c-cart-bar button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--n-moon-grad);
  color: var(--n-on-moon); font-size: 17px; font-weight: 900; letter-spacing: .04em;
  border-radius: 16px; padding: 16px 20px;
  box-shadow: 0 10px 26px rgba(240, 176, 40, .28), 0 14px 34px rgba(2, 8, 26, .45), inset 0 1px 0 rgba(255, 255, 255, .55);
  position: relative; overflow: hidden;
}
.c-cart-bar button::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .34), transparent);
  animation: shimmer 3s infinite; left: 0; transform: translateX(-90px);
}
@keyframes shimmer { 0% { transform: translateX(-90px); } 55%, 100% { transform: translateX(520px); } }
.c-cart-bar button.bump { animation: bump .32s ease; }
@keyframes bump { 40% { transform: scale(1.04); } }
/* 畫面稽核 U5-13:購物車列真的固定在畫面底部後,頁尾(隱私權連結)要讓出列的高度,免得被蓋住按不到 */
body.has-cart-bar { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.cart-count {
  background: var(--n-on-moon); color: var(--n-moon-hi); border-radius: 999px;
  min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900;
}

/* ===== bottom sheet ===== */
.sheet-mask {
  position: fixed; top:0; right:0; bottom:0; left:0; inset: 0; z-index: 50; background: rgba(4, 10, 30, .62);
  display: flex; align-items: flex-end; justify-content: center;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.sheet-mask[hidden] { display: none; }
.sheet {
  background: var(--n-grain), linear-gradient(180deg, #182f66 0, #132653 260px, #10214a 100%);
  background-color: #11224c;
  color: var(--n-ink);
  width: 100%; max-width: var(--frame);
  border-radius: 26px 26px 0 0;
  border: 1px solid var(--n-line-2); border-bottom: 0;
  box-shadow: 0 -18px 50px rgba(2, 8, 26, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  padding: 0 18px 20px; padding: 0 18px calc(20px + env(safe-area-inset-bottom));
  animation: up .28s cubic-bezier(.2,.85,.3,1);
}
@keyframes up { from { transform: translateY(50%); opacity: .5; } }
.sheet > h3:first-child, .sheet > *:not(.sheet-hero):first-child { margin-top: 14px; }
.sheet::-webkit-scrollbar { width: 0; }
/* 灰橫桿是「往下拉關閉」的把手:加大可觸區(視覺仍是細桿)、禁用系統手勢搶走 touch */
.sheet .drag { display: block; width: 44px; height: 5px; border-radius: 999px; background: var(--n-line-2);
  margin: 8px auto 4px; padding: 0; position: relative; cursor: grab; touch-action: none; }
.sheet .drag::after { content: ''; position: absolute; left: -40px; right: -40px; top: -12px; bottom: -12px; }
.sheet .drag:active { background: var(--n-muted); cursor: grabbing; }
.sheet h3 { font-size: 21px; font-weight: 900; color: var(--n-ink); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sheet h3 .ic { color: var(--n-moon); }
.sheet h3 .p { color: var(--n-moon-hi); font-size: 19px; white-space: nowrap; }
.sheet .s-desc { font-size: 13.5px; color: var(--n-ink-2); margin-top: 7px; line-height: 1.55; }

/* 品項大圖:置中的方形圖框(同菜單卡的暖光框),後面是深藍底 + 暖色圓光。
   以前是整寬模糊同圖當底 + contain 前景:白紙底的圖模糊後兩側變成大片灰藍色塊,像信箱遮幅。
   品項圖都是正方形,方框 cover 不會裁到。.sheet-hero 本身的 inline 背景圖被下面這層整片蓋住。 */
.sheet-hero {
  position: relative; width: calc(100% + 36px); margin: 0 -18px 8px;
  height: 230px; overflow: hidden; background: #0b1738;
  background-size: cover; background-position: center;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 1px 0 var(--n-line);
}
.sheet-hero::before {
  content: ""; position: absolute; inset: -20px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 214, 120, .24), rgba(240, 160, 60, .07) 34%, transparent 56%),
    linear-gradient(180deg, #172f66 0%, #10214a 100%);
}
.sheet-hero-img {
  position: relative; z-index: 1; display: block;
  width: 202px; height: 202px; margin: 14px auto; padding: 5px;
  object-fit: cover; border-radius: var(--n-radius);
  background: radial-gradient(circle at 50% 45%, rgba(255, 214, 120, .42), rgba(242, 161, 74, .16) 62%, rgba(242, 161, 74, .10) 100%), #172a5c;
  box-shadow: 0 0 0 1px rgba(255, 214, 140, .38), 0 0 30px rgba(242, 161, 74, .28), 0 12px 26px rgba(2, 8, 26, .45);
}

.s-group { margin-top: 16px; }
.s-group .g-t { font-size: 14px; font-weight: 800; color: var(--n-ink); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.s-group .g-t .req { color: var(--n-warn); background: var(--n-warn-bg); border: 1px solid var(--n-warn-line); font-size: 12px; border-radius: 6px; padding: 2px 7px; }
.s-opts { display: flex; flex-wrap: wrap; gap: 9px; }
.s-opts button {   /* 數值對齊共用 .n-opt(圓角 12、內距 10px 16px) */
  font-size: 14.5px; font-weight: 600; padding: 10px 16px; border-radius: var(--n-radius-xs); min-height: 44px;
  background: var(--c-chip); color: var(--n-ink); border: 1.5px solid var(--n-line-2);
  transition: color .12s, background-color .12s, border-color .12s;
}
.s-opts button.sel {
  background: var(--c-sel); border-color: var(--n-moon); color: var(--n-moon-hi);
  font-weight: 800; box-shadow: 0 4px 12px rgba(240, 176, 40, .16);
}
.s-note { margin-top: 16px; }
/* 深色輸入框(品項備註、聯絡資訊、優惠券下拉、優惠碼、載具、統編、點數):數值一律對齊共用 .n-field ——
   底 --n-field-bg、1px 框、圓角 12、最小高 48、內距 12px 14px、16px 字(防 iOS 聚焦放大)、聚焦月黃框 + 光圈。
   欄位是 JS 畫出來的,沿用原本的選擇器套同一組值(以前三組各寫一份:圓角 13/10、框 1.5px、高 46/44 對不上) */
.s-note input, .cart-form input, .cart-form select, #coupon-sec select, #cf-promo, #cf-carrier, #cf-taxid, #cf-points {
  width: 100%; min-width: 0; min-height: 48px; margin: 0;
  font: inherit; font-size: 16px; line-height: 1.4; padding: 12px 14px; border-radius: var(--n-radius-xs);
  border: 1px solid var(--n-line-2); background-color: var(--c-field); color: var(--n-ink); caret-color: var(--n-moon);
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.s-note input:focus, .cart-form input:focus, .cart-form select:focus, #coupon-sec select:focus,
#cf-promo:focus, #cf-carrier:focus, #cf-taxid:focus, #cf-points:focus {
  outline: none; border-color: var(--n-moon); box-shadow: var(--n-focus-ring);
}
/* 下拉:月黃箭頭(同 .n-field) */
.cart-form select, #coupon-sec select {
  padding-right: 40px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c038' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.s-foot { display: flex; gap: 12px; margin-top: 20px; align-items: center; }
.qty-step { display: flex; align-items: center; gap: 2px; }
.qty-step button {
  width: 44px; height: 44px; border-radius: 13px; background: var(--c-chip);
  border: 1px solid var(--n-line-2);
  font-size: 22px; font-weight: 800; color: var(--n-ink);
}
.qty-step button:active { background: var(--c-sel); border-color: var(--n-moon-line); }
.qty-step .q { min-width: 42px; text-align: center; font-size: 19px; font-weight: 900; color: var(--n-ink); }
/* 主要動作:實心月亮黃 + 深藍字;次要:玻璃框。數值對齊共用 .n-btn-primary + .n-btn-lg / .n-btn-ghost
   (52px 高、16px 字、字距 .06em、圓角 16、ghost 框 1px;顏色一律引用 --n-moon-grad / --n-moon-glow)。
   按鈕是 JS 畫的、JS 用 .c-btn 找它,所以沿用這個 class,不另外疊 .n-btn */
.c-btn {
  flex: 1; background: var(--n-moon-grad);
  color: var(--n-on-moon); font-size: 16px; font-weight: 900; letter-spacing: .06em; line-height: 1.25;
  border-radius: var(--n-radius-md); padding: 12px 15px;
  box-shadow: var(--n-moon-glow);
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center; text-align: center;
  text-decoration: none; transition: transform .15s var(--n-ease), filter .15s;
}
.c-btn:active:not(:disabled) { transform: scale(.98); }
.c-btn[hidden] { display: none; }
.c-btn:disabled { opacity: .4; box-shadow: none; cursor: default; }
.c-btn.ghost { background: rgba(255, 255, 255, .045); color: #e5e9f6; border: 1px solid var(--n-line-2); box-shadow: none; }
.c-btn.ghost:active:not(:disabled) { border-color: rgba(240, 192, 56, .6); color: #fff3c4; }

/* cart sheet */
.cart-line { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--n-line); }
.cart-line .info { flex: 1; min-width: 0; }
.cart-line .n { font-size: 16px; font-weight: 800; color: var(--n-ink); }
.cart-line .o { font-size: 12.5px; color: var(--n-muted); margin-top: 3px; line-height: 1.4; }
.cart-line .lp { font-size: 15px; font-weight: 800; color: var(--n-moon-hi); white-space: nowrap; }
.cart-line .qty-step button { width: 34px; height: 34px; font-size: 18px; border-radius: 11px; position: relative; }
/* 視覺維持 34px,可按範圍往外擴到 44px(觸控下限),版面寬度不變 */
.cart-line .qty-step button::after { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; }   /* 有 1px 邊框:從內框往外 6px = 外框 +5px,共 44px */
.cart-form { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.cart-form .f-label, .f-label { font-size: 13px; font-weight: 800; color: var(--n-ink-2); letter-spacing: .04em; }
.cart-form .f-label { margin-bottom: -4px; }
/* 表單外的欄位標題(優惠碼、付款方式、電子發票、優惠券、點數):跟上一塊拉開一點,不再黏在上一個欄位底下 */
#c-sheet > .f-label, #coupon-sec > .f-label, #points-sec > .f-label { margin: 14px 0 7px; }
.pickup-when { display: flex; gap: 8px; }
.pickup-when button {   /* 選項樣式對齊共用 .n-opt(圓角 12) */
  flex: 1; font-size: 14.5px; font-weight: 700; padding: 11px; border-radius: var(--n-radius-xs); min-height: 44px;
  background: var(--c-chip); color: var(--n-ink-2); border: 1.5px solid var(--n-line-2);
  transition: color .12s, background-color .12s, border-color .12s;
}
.pickup-when button .ic { color: var(--n-moon); }
.pickup-when button.sel { background: var(--c-sel); border-color: var(--n-moon); color: var(--n-moon-hi); font-weight: 800; }
.pickup-when button:disabled { opacity: .5; }   /* 畫面稽核 U5-07:快打烊沒有可預約時段 */
.sched-hint { font-size: 12px; line-height: 1.6; color: var(--n-muted); margin-top: -4px; }   /* 預約時段的限制說明:只在選了「預約時間」才出現 */
.pay-hint { font-size: 13px; color: var(--n-muted); margin-top: 2px; text-align: left; line-height: 1.6; }   /* 提示小字一律靠左 */

/* ===== 購物車(2026-10-02 重排)=====
   由上往下:標題「購物車 · ○○店取餐」(右上「繼續點餐」小字)→ 品項 → 加購提示 / 優惠加購 / 推薦加購 → 取餐時間 → 聯絡資訊
   → 「優惠」一區(會員券、點數、優惠碼與折抵結果)→ 付款方式 → 電子發票(收成一行)→ 固定在視窗最底下的「應付 + 送出訂單」。
   區塊標題一律只有粗體字、不放圖示;提示小字一律靠左 */
#c-sheet.is-cart { padding-bottom: 0; }   /* 底部固定列自己留安全區 */
.cart-head { margin-top: 6px; }
.cart-head h3 { align-items: center; }
.cart-head .ch-t { min-width: 0; line-height: 1.35; }
.cart-head .ch-store { font-size: 16px; font-weight: 800; color: var(--n-ink-2); }
/* 店名(含前面的分店色點)整段一起換行,不拆成「不早脆 / 皮雞排 示範一店」;店名比一整行還長時才在裡面換行 */
.cart-head .ch-store b { display: inline-block; max-width: 100%; color: var(--n-ink); }
.cart-head .ch-store b::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 5px 0 2px; vertical-align: 2px;
  background: var(--sc, var(--store-accent, var(--n-moon))); box-shadow: 0 0 0 1.5px rgba(245, 242, 233, .55); }
.cart-head .ch-back { flex: 0 0 auto; min-height: 44px; padding: 0 2px 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .02em;
  color: var(--n-moon-hi); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cart-head .ch-addr { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--n-muted); }
.cart-blk { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cart-blk > .f-label { margin-bottom: -2px; }
.cart-blk .f-sub { font-size: 12.5px; font-weight: 700; color: var(--n-muted); margin-bottom: -4px; }
#coupon-sec, #points-sec { display: flex; flex-direction: column; gap: 8px; }
.pts-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pts-row #cf-points { width: 110px; flex: 0 0 auto; }
.cart-blk .cart-combo-row { margin-top: 0; }
/* 電子發票:預設收成一行「需要載具或統編?」,點開才出現兩個輸入框(記住過載具/統編的客人預設展開) */
.einv-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px;
  border-radius: var(--n-radius-xs); border: 1px solid var(--n-line-2); background: var(--c-chip); color: var(--n-ink);
  font-size: 15px; font-weight: 700; text-align: left; }
.einv-toggle .ic { color: var(--n-moon); transition: transform .2s; }
.einv-toggle[aria-expanded="true"] .ic { transform: rotate(90deg); }
#einv-box { display: flex; flex-direction: column; gap: 8px; }
#einv-box #cf-carrier, #einv-box #cf-taxid { margin-bottom: 0; }
/* 固定在購物車視窗最底下:左邊應付金額(有折扣時小字劃掉原價),右邊「送出訂單」大按鈕 */
.cart-foot { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px;
  margin: 18px -18px 0; padding: 12px 18px 12px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: var(--n-grain), linear-gradient(180deg, rgba(19, 38, 83, .98), #10214a); background-color: #10214a;
  border-top: 1px solid var(--n-line-2); box-shadow: 0 -12px 26px rgba(2, 8, 26, .45); }
.cart-foot .cf-sum { flex: 0 0 auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cart-foot .cf-lbl { font-size: 12.5px; font-weight: 800; color: var(--n-ink-2); white-space: nowrap; }
.cart-foot #cart-tot { font-size: 23px; font-weight: 900; color: var(--n-moon-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-foot .cart-gross { margin: 0 0 0 4px; font-size: 12.5px; }
.cart-foot #cart-submit { flex: 1 1 auto; min-width: 0; }
.t-summary .row.tot.paid span:first-child, .row.tot.paid { color: var(--n-ok); }
.t-summary .row.combo-saved span { color: var(--n-ok); font-weight: 900; }

/* ===== 雞排加購:購物車顯示 ===== */
.cart-combo-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 16px; font-weight: 900; color: var(--n-ok);
  background: var(--n-ok-bg); border: 1px solid var(--n-ok-line); border-radius: 12px;
  padding: 9px 13px; margin-top: 12px;
}
/* display:flex 蓋過 [hidden] 的 display:none → 沒折扣時「活動折扣 -$0」藏不住。必須明寫。 */
.cart-combo-row[hidden] { display: none !important; }
.cart-combo-row span:last-child { color: var(--n-ok); }
.cart-gross { color: var(--n-muted); font-weight: 700; font-size: 15px; text-decoration: line-through; margin-right: 6px; }
.cart-combo-hint {
  font-size: 13.5px; font-weight: 800; color: #ffe9a8;
  background: var(--n-grain), linear-gradient(155deg, rgba(66, 98, 186, .24), rgba(22, 40, 92, .44)); border: 1px dashed var(--n-moon-line);
  border-radius: 12px; padding: 9px 13px; margin-top: 12px; text-align: left;
  line-height: 2;
}
.cart-combo-hint .ic, .cart-join-hint .ic { color: var(--n-moon); margin-right: 3px; }
/* 加購提示裡可點的品項:看起來就是能按的按鈕,點了直接加入(有必選口味的會開客製彈層) */
.cart-combo-hint .addon-pick {
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  color: #fff3c4; background: var(--c-sel);
  border: 1px solid rgba(240, 192, 56, .6); border-radius: 999px; padding: 5px 13px; margin: 0 3px;
  box-shadow: 0 3px 9px rgba(240, 176, 40, .14);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.cart-combo-hint .addon-pick::after { content: ""; position: absolute; top: -8px; right: -2px; bottom: -8px; left: -2px; }   /* 可按範圍補到 44px 高 */
.cart-combo-hint .addon-pick:active { transform: scale(.95); }

/* 再點一次(會員中心帶過來的餐點):購物車上方的提醒。要重新選口味的品名是按鈕(點了開選口味視窗),沒有帶入的列在下面一行;
   右上 ✕ 關掉提醒。按鈕間距用 margin(舊 WebView 的 flex 沒有 gap),可點範圍至少 44px */
.again-note { position: relative; margin-top: 12px; padding: 9px 44px 10px 13px; border-radius: 12px; text-align: left;
  font-size: 13.5px; font-weight: 700; line-height: 1.6; color: #ffe9a8;
  background: var(--n-grain), linear-gradient(155deg, rgba(66, 98, 186, .24), rgba(22, 40, 92, .44)); border: 1px dashed var(--n-moon-line); }
.again-note .an-t { font-weight: 800; }
.again-note .an-items { display: flex; flex-wrap: wrap; margin: 2px -6px 0 0; }
.again-note .an-item { min-height: 44px; margin: 4px 6px 0 0; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; color: #fff3c4; background: var(--c-sel); border: 1px solid rgba(240, 192, 56, .6);
  -webkit-tap-highlight-color: transparent; }
.again-note .an-item:active { transform: scale(.96); }
.again-note .an-skip { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--n-ink-2); overflow-wrap: anywhere; }
.again-note .an-x { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  font-size: 15px; color: var(--n-ink-2); }

/* 非會員入會提示(購物車結帳前最後一哩) */
.cart-join-hint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-start;
  font-size: 13px; color: var(--n-ink-2);
  background: var(--n-grain), linear-gradient(135deg, rgba(6, 199, 85, .10), rgba(22, 40, 92, .4));
  border: 1px solid rgba(6, 199, 85, .32);
  border-radius: 12px; padding: 10px 13px; margin-top: 0; text-align: left;
}
/* display:flex 蓋過 [hidden] → 已是會員/沒開會員功能時購物車仍多一條空的框線色帶。必須明寫。 */
.cart-join-hint[hidden] { display: none !important; }
.cart-join-hint .cjh-txt { flex: 1 1 auto; min-width: 0; }
.cart-join-hint b { color: var(--n-moon-hi); }
.cart-join-hint .cjh-btn { flex: 0 0 auto; }
/* LINE 綠小按鈕(加 LINE 好友 / 加入會員 / 用 LINE 開啟並登錄):老闆拍板全站 #06c755 底 + 深綠字 #06301a(對比 6.4:1,不用白字)。
   數值對齊共用 .n-btn-line + .n-btn-sm(44px 高、14px 字、全圓膠囊);以前四顆各寫一份,字級 12.5~13.5、內距都不一樣。
   按鈕是 JS 畫的,沿用原本的 class,這裡統一成一組 */
.join-banner .jb-btn, .cart-join-hint .cjh-btn, .claim-pending .cp-btn, .t-compensation .tc-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--n-line-green); color: var(--n-on-line-green);
  font-size: 14px; font-weight: 900; letter-spacing: .04em; line-height: 1.2; white-space: nowrap; text-decoration: none;
  box-shadow: 0 8px 20px rgba(6, 199, 85, .22);
  transition: transform .15s var(--n-ease), filter .15s;
}
.join-banner .jb-btn:active, .cart-join-hint .cjh-btn:active, .claim-pending .cp-btn:active, .t-compensation .tc-btn:active { transform: scale(.98); }

/* ===== 驚喜特效:彩帶 + 中央橫幅 ===== */
.celebrate-layer { position: fixed; top:0; right:0; bottom:0; left:0; inset: 0; z-index: 500; pointer-events: none; overflow: hidden; }
.celebrate-layer .confetti { position: absolute; top:0; right:0; bottom:0; left:0; inset: 0; }
.celebrate-layer .confetti i {
  position: absolute; top: -24px; border-radius: 2px; opacity: .95;
  animation-name: confetti-fall; animation-timing-function: cubic-bezier(.25,.6,.4,1); animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-30px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(102vh) rotate(680deg); opacity: .9; }
}
/* 省錢橫幅:實心月亮黃 + 深藍字(短暫出現的慶祝,不是按鈕) */
.celebrate-toast {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%,-50%) scale(.7);
  background: linear-gradient(135deg, #fff1b0 0%, #ffe07a 30%, #f0c038 70%, #e2a728 100%); color: var(--n-on-moon);
  font-size: 20px; font-weight: 900; padding: 16px 24px; border-radius: 18px;
  box-shadow: 0 14px 40px rgba(2, 8, 26, .55), 0 0 40px rgba(240, 192, 56, .35), inset 0 1px 0 rgba(255, 255, 255, .6); text-align: center;
  max-width: 88vw; box-sizing: border-box;   /* 手機不溢出:長字改換行,不硬撐出畫面 */
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  animation: celebrate-pop 2.6s ease forwards;
}
.celebrate-toast span { font-size: 14px; font-weight: 800; opacity: .9; }
@keyframes celebrate-pop {
  0%   { transform: translate(-50%,-50%) scale(.6); opacity: 0; }
  12%  { transform: translate(-50%,-50%) scale(1.08); opacity: 1; }
  22%  { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  82%  { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-58%) scale(.94); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .celebrate-layer .confetti { display: none; }
  .celebrate-toast { animation: none; opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* 公告懸浮視窗:全視窗打霧遮罩 */
#notice-mask {
  position: fixed; top:0; right:0; bottom:0; left:0; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(4, 10, 30, .72);
  animation: notice-fade .3s ease both;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #notice-mask { background: rgba(4, 10, 30, .5); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
}
#notice-mask[hidden] { display: none; }
@keyframes notice-fade { from { opacity: 0; } }
#notice-card {
  width: 92vw; max-width: 420px; color: var(--n-ink);
  background: var(--n-grain), linear-gradient(160deg, #1b336f, #132755 60%, #10214a);
  background-color: var(--n-glass-solid); border-radius: 22px;
  padding: 30px 26px 24px; text-align: center; box-shadow: 0 24px 60px rgba(2, 8, 26, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
  border: 1px solid var(--n-warn-line); animation: notice-pop .35s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes notice-pop { from { opacity: 0; transform: translateY(22px) scale(.96); } }
#notice-card .n-icon { display: flex; justify-content: center; margin-bottom: 12px; }
#notice-card .n-icon svg {
  width: 52px; height: 52px; fill: none; stroke: var(--n-warn);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
#notice-card h2 { font-family: var(--n-serif); font-size: 22px; font-weight: 900; color: var(--n-warn); letter-spacing: .06em; }
#notice-card p { margin-top: 12px; font-size: 15px; line-height: 1.85; color: var(--n-ink-2); white-space: pre-line; text-align: left; }
#notice-close {
  margin-top: 20px; width: 100%; padding: 14px; border: none; border-radius: 14px; min-height: 48px;
  background: var(--n-moon-grad); color: var(--n-on-moon);
  font-size: 16.5px; font-weight: 900; letter-spacing: .06em; cursor: pointer;
  box-shadow: var(--n-moon-glow);
}
#notice-close:active { transform: scale(.98); }

/* 暫停接單大幅提示(一進頁就看到,別讓客人白點)。外殼對齊共用 .n-note-warn(警示淡底 + 警示細框、圓角 14) */
#closed-banner {
  margin: 10px 14px 4px; padding: 18px 16px; border-radius: var(--n-radius-sm); text-align: center;
  background: var(--n-grain), linear-gradient(var(--n-warn-bg), var(--n-warn-bg));
  background-color: var(--n-night-2);
  border: 1px solid var(--n-warn-line);
  box-shadow: var(--shadow); animation: card-in .4s ease both;
}
#closed-banner .cb-title { font-family: var(--n-serif); font-size: 22px; font-weight: 900; color: var(--n-warn); letter-spacing: .08em; }
#closed-banner .cb-sub { margin-top: 6px; font-size: 14px; color: var(--n-ink-2); line-height: 1.6; text-wrap: balance; }
/* 撥號鈕 = 主按鈕樣式(圓角 14,以前是全圓膠囊、兩行字時高 76,跟全站主按鈕不一樣)。
   用一般文字排版(不用 flex):放不下一行時整串號碼換到下一行置中、圖示跟著第一行,
   不會再像以前那樣把「撥打店內電話」擠成兩行、號碼歪在一邊、中間空一大塊。320 寬字縮一級,龍安店那顆一行放得下 */
#closed-banner .cb-call {
  display: inline-block; max-width: 100%; margin-top: 12px; padding: 12px 20px; min-height: 48px;
  border-radius: var(--n-radius-sm); background: var(--n-moon-grad);
  color: var(--n-on-moon); font-size: 16px; font-weight: 900; line-height: 1.5; text-align: center; text-decoration: none;
  box-shadow: var(--n-moon-glow);
}
#closed-banner .cb-call .ic { margin-right: 4px; }
/* 號碼另起一行、大字、不准斷行(以前 390 寬把「03-」和「0000000」拆成兩行) */
#closed-banner .cb-call > span { display: block; font-size: 19px; letter-spacing: .04em; white-space: nowrap; }
#closed-banner .cb-call:active { transform: scale(.98); }
@media (max-width: 360px) { #closed-banner .cb-call { padding: 12px 14px; font-size: 15px; } }
#closed-banner .cb-switch { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--n-moon-hi); text-decoration: none; }
#closed-banner .cb-switch:hover { color: #fff3c4; }
/* 畫面稽核 U5-04:整頁停用(本店未開放線上點餐)只留上面那張說明,菜單、輪播、分類、購物車都不畫出來讓人白挑 */
body.c-hard-off #c-hero, body.c-hard-off #join-banner, body.c-hard-off #c-cats, body.c-hard-off #c-items,
body.c-hard-off #c-cart-bar, body.c-hard-off #cart-fab { display: none !important; }
/* 畫面稽核 U5-12:收據登錄碼沒登錄成功時的常駐提示(不會自己消失,客人自己按 ✕ 關) */
.claim-pending { position: relative; margin: 10px 14px 4px; padding: 14px 40px 14px 16px; border-radius: 14px;
  background: var(--n-grain), linear-gradient(155deg, rgba(66, 98, 186, .24), rgba(22, 40, 92, .46));
  background-color: var(--n-night-2);
  border: 1px solid var(--n-moon-line); color: var(--n-ink-2); font-size: 14px; line-height: 1.6; }
.claim-pending b { color: var(--n-moon-hi); }
.claim-pending .cp-code b { font-family: ui-monospace, monospace; font-size: 17px; letter-spacing: 1px; }
.claim-pending .cp-sub { font-size: 13px; color: var(--n-ink-2); }
.claim-pending .cp-btn { margin-top: 8px; }   /* 顏色與尺寸在上面 LINE 綠小按鈕那組 */
.claim-pending .cp-close { position: absolute; top: 6px; right: 6px; border: none; background: none; font-size: 16px;
  color: var(--n-muted); cursor: pointer; padding: 8px; }
.claim-pending .cp-close::after { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; }   /* 可按範圍補到 44px */
.pay-hint::before {
  content: ""; display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px;
  background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2397a5c8" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="6" width="19" height="12" rx="2.5"/><circle cx="12" cy="12" r="2.6"/></svg>');
}
.pay-hint:empty { display: none; }   /* 空的提示行(如折扣預估未觸發)不要留一顆孤兒圖示 */
/* 統編輸入框下的小字:售價是含稅價,打統編總額不變 */
.taxid-note { font-size: 12.5px; color: var(--n-muted); margin: 4px 2px 0; line-height: 1.5; }

/* 優惠加購區 */
.promo-sec {
  margin-top: 16px; border-radius: 16px; padding: 13px;
  background: var(--n-grain), linear-gradient(155deg, rgba(66, 98, 186, .22), rgba(22, 40, 92, .42));
  border: 1.5px dashed var(--n-moon-line); position: relative; overflow: hidden;
}
.promo-sec::before {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(242, 161, 74, .22), transparent 70%);
  pointer-events: none;
}
.promo-sec .p-t { font-size: 14px; font-weight: 900; color: var(--n-moon-hi); margin-bottom: 8px; position: relative; }
.promo-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; position: relative; }
/* 加購小圖:同菜單卡的暖光圖框(3px 內距露出暖光底,不再是白方塊) */
.promo-row .thumb { width: 46px; height: 46px; padding: 3px; border-radius: var(--n-radius-xs); object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 45%, rgba(255, 214, 120, .42), rgba(242, 161, 74, .16) 62%, rgba(242, 161, 74, .10) 100%), #172a5c;
  color: var(--n-moon); box-shadow: 0 0 0 1px rgba(255, 214, 140, .34), 0 0 12px rgba(242, 161, 74, .2); }
.promo-row .info { flex: 1; min-width: 0; }
.promo-row .n { font-size: 15px; font-weight: 800; color: var(--n-ink); }
.promo-row .pr { font-size: 13px; }
.promo-row .pr .orig { color: var(--n-ink-2); text-decoration: line-through; margin-right: 6px; }
.promo-row .pr .now { color: var(--n-moon-hi); font-weight: 900; font-size: 15px; }
.promo-row .pr .lim { color: var(--n-ink-2); font-size: 12px; margin-left: 6px; }
.promo-add {
  background: var(--c-sel); color: var(--n-moon-hi); font-size: 14px; font-weight: 800;
  border: 1px solid rgba(240, 192, 56, .6);
  border-radius: 999px; padding: 8px 16px; flex: 0 0 auto; min-height: 44px;
  box-shadow: 0 3px 10px rgba(240, 176, 40, .14);
}
.promo-add:disabled { opacity: .4; box-shadow: none; }
.cart-line .promo-tag { font-size: 12px; background: var(--n-moon-tint); color: #ffe9a8; border: 1px solid rgba(240, 192, 56, .35); border-radius: 5px; padding: 1px 6px; margin-left: 6px; font-weight: 800; }

/* 推薦加購:購物車裡一列「要不要加點這些?」橫向可滑的小卡(不跳視窗)。
   只有這一列左右滑,整頁不會左右捲;小卡間距用外距(舊瀏覽器沒有 flex 間距) */
.ups-sec { margin-top: 16px; min-width: 0; }
.ups-sec .p-t { font-size: 14px; font-weight: 900; color: var(--n-ink); margin-bottom: 8px; }
.ups-sec .p-t .ic { color: var(--n-moon); }
.ups-row {
  display: flex; overflow-x: auto; overflow-y: hidden; max-width: 100%;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 2px 6px;
}
.ups-row::-webkit-scrollbar { display: none; }
.ups-card {
  flex: 0 0 132px; width: 132px; min-width: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; padding: 8px;
  background: var(--n-grain), var(--n-glass); background-color: var(--n-night-2);
  border: 1px solid var(--n-line); border-radius: 14px;
}
.ups-card + .ups-card { margin-left: 10px; }
.ups-card .ups-thumb { width: 100%; height: 74px; padding: 3px; border-radius: 10px; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 26px; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 45%, rgba(255, 214, 120, .42), rgba(242, 161, 74, .16) 62%, rgba(242, 161, 74, .10) 100%), #172a5c;
  color: var(--n-moon); box-shadow: 0 0 0 1px rgba(255, 214, 140, .34); }
.ups-card .ups-n { margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--n-ink); line-height: 1.3; min-height: 2.6em;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.ups-card .ups-f { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.ups-card .ups-p { font-size: 14.5px; font-weight: 900; color: var(--n-moon-hi); white-space: nowrap; margin-right: 6px; }
.ups-add {
  flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-sel); color: var(--n-moon-hi); font-size: 22px; font-weight: 900; line-height: 1;
  border: 1px solid rgba(240, 192, 56, .6); box-shadow: 0 3px 10px rgba(240, 176, 40, .14);
}
.ups-done { min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 800; color: var(--n-ok); white-space: nowrap; }
.ups-card.added { border-color: var(--n-ok-line); }
@media (prefers-reduced-motion: no-preference) {
  .ups-card { transition: border-color .2s ease; }
}
/* P0#4 補(審查 R4):item sheet 帶加購價開表時的劃線原價與「加購優惠」標籤(原本只有 promo-row/upsell/cart-line 有樣式) */
#c-sheet h3 .p .orig { color: var(--n-muted); text-decoration: line-through; font-weight: 400; font-size: 15px; margin-right: 6px; }
#c-sheet h3 .promo-tag { font-size: 12px; background: var(--n-moon-tint); color: #ffe9a8; border: 1px solid rgba(240, 192, 56, .35); border-radius: 5px; padding: 1px 6px; margin-left: 6px; font-weight: 800; vertical-align: middle; }

/* ===== tracking ===== */
.t-main { padding: 30px 20px 30px; padding: 30px 20px calc(30px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.t-label { font-size: 14px; font-weight: 700; color: var(--n-ink-2); letter-spacing: 3px; }
/* 大字取餐號:明體 + 月光漸層字(同首頁店名),先給實色退路 */
.t-no {
  font-family: var(--n-serif); font-size: 92px; font-weight: 900; line-height: 1; letter-spacing: 3px;
  color: var(--n-moon);
  background: linear-gradient(180deg, #fff7da 8%, #ffe07a 40%, #f0c038 88%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 18px rgba(240, 192, 56, .22));
}
/* 狀態卡(2026-10-02):以前「大框寫狀態 + 步驟點又寫一次 + 一段等候文字」三處講同一件事,框還長得像按鈕、各狀態寬窄不一。
   現在合成一張跟明細卡同寬的卡:第一行大字狀態、第二行小字(預約時間 / 前面幾單、預計幾分鐘),步驟點在卡片下緣 */
.t-card { width: 100%; max-width: 400px; border-radius: var(--radius); padding: 16px 18px 14px; text-align: center;
  background: var(--n-grain), var(--n-glass); background-color: var(--n-night-2);
  border: 1px solid var(--n-line); color: var(--n-ink); box-shadow: var(--shadow); }
.t-banner { font-size: 21px; font-weight: 900; line-height: 1.4; letter-spacing: .04em; color: var(--n-ink); }
.t-banner.preparing { color: var(--n-moon-hi); }
.t-banner.pending { color: var(--n-ink); }
.t-banner.ready { color: var(--n-ok); font-size: 23px; animation: ready-glow 1.6s ease-in-out infinite; }
.t-banner.done { color: var(--n-ink-2); }
.t-banner.voided { color: var(--n-warn); }
.t-banner.awaiting-pay { color: var(--n-warn); font-size: 18px; }
@keyframes ready-glow { 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .t-banner.ready { animation: none; } }
/* 取餐號下面的下單日期時間 */
.t-placed { margin-top: -10px; font-size: 13px; font-weight: 600; color: var(--n-ink-2); letter-spacing: .04em; }
.t-placed[hidden] { display: none; }
.t-sched { margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--n-moon-hi); }
.t-sched .ic { margin-right: 3px; }
.t-steps { display: flex; gap: 4px; width: 100%; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--n-line-2); }
.t-step { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12.5px; color: var(--n-muted); flex: 1; }
.t-step .dot { width: 13px; height: 13px; border-radius: 50%; background: var(--n-line-2); transition: background .3s; }
.t-step.on { color: var(--n-ink); font-weight: 800; }
.t-step.on .dot { background: var(--n-ok); box-shadow: 0 0 0 4px rgba(114, 228, 171, .16), 0 0 10px rgba(114, 228, 171, .45); }
.t-wait { margin-top: 6px; font-size: 14px; color: var(--n-ink-2); line-height: 1.6; }
.t-wait:empty { display: none; }
.t-wait .nw { white-space: nowrap; }   /* 「預計約 15 分鐘」整組一起換行,「分」「鐘」不拆開 */
/* 等候時間的變動說明:刻意做小一級、不搶主文,但一定要看得到(LO 2026-09-09:時間不能講死) */
.t-wait-note { font-size: 12.5px; line-height: 1.5; color: var(--n-muted); margin-top: 2px; }
/* 畫面稽核 U5-09:LINE Pay 還沒付款的單 —— 兩顆按鈕(改付現/重新付款),說明放在按鈕下面的小字 */
.t-pay { width: 100%; max-width: 400px; }
.t-pay-btns { display: flex; gap: 10px; }
.t-pay-btns .c-btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; letter-spacing: .02em; }
.t-pay-note { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--n-muted); text-align: left; }
/* 取消訂單:紅色小字連結,跟其他按鈕分開,靠明細卡右下 */
.t-cancel-row { width: 100%; max-width: 400px; margin-top: -12px; text-align: right; }
.t-cancel { min-height: 44px; padding: 0 2px; font-size: 13.5px; font-weight: 700; color: var(--red);
  text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
.t-cancel:disabled { opacity: .5; }
/* 看取餐看板:小的外框按鈕(只在製作中、請取餐時出現);「回菜單再點餐」才是主按鈕 */
.t-board { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: var(--n-ink); text-decoration: none; border: 1px solid var(--n-line-2); background: rgba(255, 255, 255, .045); }
.t-board .ic { color: var(--n-moon); }
.t-board[hidden] { display: none; }
#t-again { flex: none; width: 100%; max-width: 400px; }
.t-summary {
  width: 100%; max-width: 400px; border-radius: var(--radius); padding: 16px 18px;
  background: var(--n-grain), var(--n-glass); background-color: var(--n-night-2);
  border: 1px solid var(--n-line); color: var(--n-ink);
  font-size: 14.5px; box-shadow: var(--shadow);
}
.t-summary .row { display: flex; justify-content: space-between; padding: 5px 0; gap: 10px; }
.t-summary .opt { color: var(--n-muted); font-size: 12.5px; margin-top: 2px; }
.t-summary .tot { border-top: 1.5px dashed var(--n-line-2); margin-top: 8px; padding-top: 10px; font-weight: 900; font-size: 16px; }
.t-summary .tot span:last-child { color: var(--n-moon-hi); }
.t-summary .tot.voided span:last-child { color: var(--n-muted); text-decoration: line-through; }   /* 已取消的單:金額灰色加刪除線,不再是醒目的金黃大字 */
.t-summary .tot.voided span:first-child { color: var(--n-ink-2); }

/* toast */
/* 畫面稽核 U5-08/U5-17:提示要壓在公告霧面(300)、送出前確認層(999)、前往 LINE Pay 遮罩(998)之上,
   以前 z-index 99 被蓋住,收據登錄結果、購物車被調整、系統更新這些提示都看不到。
   U5-M2:提示只是看的,不擋點擊(以前剛加完品項想點右下購物車鈕,點到的是提示) */
#c-toast-wrap { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: 88vw; pointer-events: none; }
/* 2026-10-02:品項視窗、購物車開著時提示改到畫面頂端,不蓋住備註欄、付款方式;一般提示同時只留一條(customer.js toast) */
body.sheet-open #c-toast-wrap { bottom: auto; top: 14px; top: calc(14px + env(safe-area-inset-top)); }
.c-toast {
  background: rgba(34, 60, 124, .98); color: var(--n-ink); border-radius: 13px; padding: 12px 20px;
  border: 1px solid rgba(172, 190, 255, .38);
  font-size: 15px; font-weight: 700; animation: up .2s ease; text-align: center; box-shadow: 0 14px 34px rgba(2, 8, 26, .55);
}
.c-toast.ok { border-color: var(--n-ok-line); }
.c-toast.err { background: rgba(118, 26, 38, .97); border-color: rgba(255, 140, 140, .45); color: #fff; }
/* 畫面稽核 U5-23:送出後等 LINE Pay 付款頁的那一兩秒,蓋一層說明,別讓客人看著空菜單以為單不見了 */
.c-lp-wait { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; background: rgba(4, 10, 30, .86);
  color: var(--n-ink); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
  flex-direction: column; gap: 16px; padding: 16px; text-align: center; }
/* 交叉審查 X17:跳頁沒真的離開時,讓客人自己拿掉遮罩回到訂單 */
.c-lp-wait-back { font: inherit; font-size: 15px; font-weight: 700; color: var(--n-ink); background: rgba(255, 255, 255, .05);
  border: 1.5px solid var(--n-line-2); border-radius: 999px; padding: 10px 18px; cursor: pointer; min-height: 44px; }

/* 送出前確認:取餐分店、取餐時間、付款、電話…一行一項,左邊小標題、右邊內容(以前一行串一排彩色表情符號) */
.ccf-rows { margin: 10px 0 2px; }
.ccf-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--n-line); font-size: 14px; line-height: 1.5; }
.ccf-row:last-child { border-bottom: 0; }
.ccf-row > span:first-child { flex: 0 0 5em; color: var(--n-muted); font-weight: 700; font-size: 13px; }
.ccf-row > span:last-child { flex: 1 1 auto; min-width: 0; color: var(--n-ink); font-weight: 700; overflow-wrap: anywhere; }
.ccf-row small { display: block; font-weight: 400; color: var(--n-ink-2); font-size: 12.5px; }
.ccf-row .ccf-dot::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
  background: var(--sc, var(--store-accent, var(--n-moon))); box-shadow: 0 0 0 1.5px rgba(245, 242, 233, .55); }

/* 整單優惠活動橫幅 */
.camp-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 2px 4px; }
.camp-chip { background: var(--n-moon-tint); border: 1px solid rgba(240, 192, 56, .32);
  color: #ffe9a8; font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }

/* 頂端那條右側的「切換分店」(#store-bar 現在是頂端那條裡的按鈕區,見 .c-acts;以前是另一條黏頂的分店色帶)。
   分店色只留在頂端那條左側 5px 細色條(.c-header 的 inset 陰影,色碼由 JS 寫進根元素的 --store-accent)。
   畫面稽核 U5-18:頂端那條 z-index(20)低於彈層遮罩(50),開購物車/品項時「切換分店」按不到,結帳中不會誤觸離開 */
#store-bar .sb-switch { color: var(--n-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--n-line-2); border-radius: 999px; padding: 6px 12px; text-decoration: none; flex: none;
  background: rgba(255, 255, 255, .05);
  min-height: 44px; display: inline-flex; align-items: center; }
#store-bar .sb-switch:active { border-color: var(--n-moon-line); color: var(--n-moon-hi); }
/* LINE 會員「會員中心」鈕 + 面板。
   老闆 2026-09-30:以前是右下角浮動鈕,深藍底跟夜空背景太像、又蓋住品項的「+」與價格 →
   收進頂端分店列(切換分店左邊,腳本放進 #store-bar),不再浮在菜單上,任何寬度都不會蓋到品項或購物車列。
   月黃粗框 + 淡金底 + 亮月黃字 + 金色光暈,跟旁邊白框的「切換分店」一眼分得出來;
   底部「查看購物車」已經是實心月黃,這顆不做實心(一個畫面不要兩顆實心月黃) */
#member-fab { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 3px 11px 3px 4px;
  border-radius: 999px; border: 1.5px solid rgba(240, 192, 56, .9);
  background: linear-gradient(180deg, rgba(255, 224, 122, .24), rgba(240, 192, 56, .10)); background-color: #1d3674;
  color: var(--n-moon-hi); font-family: inherit; font-size: 13px; font-weight: 900; letter-spacing: .04em; line-height: 1.2; cursor: pointer;
  box-shadow: 0 0 14px rgba(240, 192, 56, .30), 0 4px 12px rgba(2, 8, 26, .4), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .12s, background-color .15s; }
#member-fab:active { transform: scale(.96); background-color: #24407f; }
#member-fab img, #member-fab .mf-ic { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1.5px var(--n-moon); }
#member-fab .mf-ic { padding: 5px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; background: rgba(6, 14, 38, .45); }
#member-fab span { white-space: nowrap; }
/* 375 寬以下(有會員中心鈕時右邊兩顆約佔 190px):LOGO、店名、按鈕都收一點,「內壢忠孝店」這種五個字的店名才放得下 */
@media (max-width: 374.98px) {
  .c-header { gap: 6px; padding-left: 15px; padding-right: 10px; }
  .c-store { gap: 6px; }
  .c-store #c-store-logo { width: 28px; height: 28px; }
  .c-store > span:not(.pill-open) { font-size: 16.5px; letter-spacing: .02em; }
  .c-acts { gap: 5px; }
  #store-bar .sb-switch { padding: 6px 10px; }
  #member-fab { padding-right: 9px; }
}
#member-mask { position: fixed; top:0; right:0; bottom:0; left:0; inset: 0; z-index: 70; background: rgba(4, 10, 30, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center; }
#member-mask[hidden] { display: none; }
.member-panel { width: 100%; max-width: 560px; max-height: 78vh; overflow-y: auto;
  background: var(--n-grain), linear-gradient(180deg, #182f66 0, #11224c 100%); background-color: #11224c; color: var(--n-ink);
  border: 1px solid var(--n-line-2); border-bottom: 0; box-shadow: 0 -18px 50px rgba(2, 8, 26, .55);
  border-radius: 18px 18px 0 0; padding: 16px 16px 24px; }
.mp-head { font-size: 17px; font-weight: 800; margin-bottom: 8px; color: var(--n-ink); }
.mp-stats { background: var(--c-sel); border: 1px solid var(--n-moon-line); color: #ffe9a8; border-radius: 10px;
  padding: 9px 12px; font-size: 14px; margin-bottom: 10px; }
/* ⚠ 2026-09-15:.mp-code(櫃檯會員報號)已隨現場報號折抵功能一起拿掉,請勿加回來 */
.mp-order { border: 1px solid var(--n-line); border-radius: 12px; padding: 10px 12px; margin-bottom: 9px;
  background: var(--n-grain), var(--n-glass); background-color: var(--n-night-2); }
.mo-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mo-head small { color: var(--n-muted); flex: 1; }
.mo-lines { color: var(--n-ink-2); font-size: 13px; margin: 5px 0 8px; }
.mo-again { border: 1px solid var(--n-moon-line); color: var(--n-moon-hi); background: var(--c-chip); border-radius: 8px;
  padding: 5px 12px; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 44px; }
.mp-empty { text-align: center; color: var(--n-muted); padding: 26px 0; }
/* 會員面板最重要的一顆:實心月亮黃(舊版紫色 + 會動 box-shadow 的脈動,改成只動 transform/opacity 的外圈光) */
.mp-center-link { position: relative; display: block; text-align: center;
  background: var(--n-moon-grad); color: var(--n-on-moon); font-weight: 900;
  border-radius: var(--n-radius-sm); padding: 15px; font-size: 17px; text-decoration: none; margin-bottom: 10px;
  box-shadow: var(--n-moon-glow); }
.mp-center-link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(240, 192, 56, .55); animation: mp-pulse 1.8s ease-out infinite; }   /* 外圈光往外擴散吸引點擊 */
@keyframes mp-pulse {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04, 1.18); }
}
.mp-center-link:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .mp-center-link::after { animation: none; opacity: 0; } }
.mp-center-link small { display: block; font-weight: 700; font-size: 12px; opacity: .85; margin-top: 2px; }
.mp-stats small { display: block; font-weight: 400; font-size: 12px; color: var(--n-ink-2); margin-top: 2px; }

/* 非會員點餐頁「加入會員」橫幅(玻璃卡 + LINE 綠按鈕;LINE 綠只留給按鈕,整條不再鋪綠)。
   2026-10-02:縮成一行「加入會員領優惠券」+ 右邊小按鈕(說明小字拿掉),第一個畫面多留位置給菜 */
.join-banner { display: flex; align-items: center; gap: 10px; justify-content: space-between;
  margin: 2px 14px 0; padding: 6px 8px 6px 14px; border-radius: 14px;
  background: var(--n-grain), linear-gradient(135deg, rgba(6, 199, 85, .14), rgba(22, 40, 92, .46) 62%);
  background-color: var(--n-night-2);
  border: 1px solid rgba(6, 199, 85, .34);
  color: var(--n-ink); box-shadow: var(--shadow); }
.join-banner[hidden] { display: none !important; }   /* display:flex 蓋過 [hidden],必須明寫 */
.join-banner .jb-txt { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 800; line-height: 1.3; min-width: 0; }
.join-banner .jb-txt .ic { color: var(--n-moon); width: 18px; height: 18px; }
.join-banner .jb-btn { flex: 0 0 auto; }   /* 顏色與尺寸在「LINE 綠小按鈕」那組 */
@media (max-width: 360px) { .join-banner .jb-btn { padding: 0 12px; letter-spacing: 0; } }   /* 320 寬:按鈕收窄一點,左邊說明字不被擠成一字一行 */
/* 畫面稽核 U5-24:「再點一單」後上一張單還沒完成 → 菜單頁上方的「查看取餐進度」入口 */
.c-active-order { display: block; width: calc(100% - 28px); margin: 10px 14px 0; padding: 12px 14px; border-radius: 14px;
  background: var(--n-grain), linear-gradient(155deg, rgba(110, 140, 230, .26), rgba(22, 40, 92, .46)); background-color: var(--n-night-2);
  border: 1px solid var(--n-moon-line); color: var(--n-ink); font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; min-height: 48px; }
.c-active-order b { color: var(--n-moon-hi); }
.c-active-order[hidden] { display: none; }
/* 之前營業日留下、還沒結束的舊單:一行小提示(不搶菜單的位置),要看再點開 */
.c-active-order.stale { font-size: 13.5px; font-weight: 600; color: var(--n-ink-2); min-height: 40px; padding: 9px 14px;
  background: var(--n-night-2); border-color: var(--n-line-2); }
/* 畫面稽核 U5-05:菜單載不到時的說明與重新載入鈕 */
.menu-load-err { text-align: center; color: var(--n-ink-2); padding: 60px 0; line-height: 2; }
.menu-load-err .c-btn { flex: none; margin-top: 12px; padding: 12px 28px; }
.mp-sec-t { font-size: 14px; font-weight: 800; color: var(--n-ink-2); margin: 12px 0 8px; }
.mp-clear { border: none; background: none; color: var(--n-muted); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 2px 0; min-height: 44px; }
.mp-sec-t small { font-weight: 400; color: var(--n-muted); margin-left: 6px; }
/* 收合式消費紀錄:一行摘要,點開才看明細 */
.mp-order .mo-head { cursor: pointer; user-select: none; }
.mp-order .mo-st { font-size: 12.5px; color: var(--n-ink-2); background: rgba(255, 255, 255, .07); border: 1px solid var(--n-line); border-radius: 6px; padding: 1px 7px; }
.mp-order .mo-amt { margin-left: auto; color: var(--n-moon-hi); }
.mp-order .mo-caret { color: var(--n-moon); font-weight: 700; transition: transform .15s; }
.mp-order:not(.collapsed) .mo-caret { transform: rotate(180deg); }
.mo-detail { margin-top: 8px; border-top: 1px dashed var(--n-line-2); padding-top: 6px; }
.mo-line { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; padding: 3px 0; }
.mo-line span:first-child { flex: 1; min-width: 0; }
.mo-line span:first-child small { display: block; color: var(--n-muted); font-size: 12px; }
.mo-line span:last-child { font-weight: 700; min-width: 48px; text-align: right; }

/* 結帳頁優惠券選單 + 優惠碼輸入 */
#coupon-sec { margin: 4px 0; }
/* 優惠碼、載具、統編、點數這幾格在 .cart-form 容器外,共用欄位樣式寫在上面「深色輸入框」那組
   (2026-08-25 LO 手機實測:沒規則 = 瀏覽器預設裸 input,比例跟其他欄位完全不同;點數格以前是預設白框)。這裡只留各自的差異 */
/* 打字機字型、加寬字距、大寫只套在客人打進去的碼;沒輸入時的提示字跟其他欄位一樣(以前提示字也被拉開成「( 不是券號 )」) */
#cf-promo, #cf-carrier { font-family: ui-monospace, monospace; letter-spacing: 1px; text-transform: uppercase; }
#cf-promo::placeholder, #cf-carrier::placeholder { font-family: var(--n-sans); letter-spacing: 0; text-transform: none; }
#cf-carrier, #cf-taxid { margin-bottom: 8px; }
/* 所有欄位共用:placeholder、disabled、下拉選項底色、瀏覽器自動填入(蓋掉淺黃底) */
.s-note input::placeholder, .cart-form input::placeholder, #cf-promo::placeholder, #cf-carrier::placeholder,
#cf-taxid::placeholder, #cf-points::placeholder { color: var(--n-muted); opacity: 1; }
.s-note input:disabled, .cart-form input:disabled, .cart-form select:disabled, #coupon-sec select:disabled,
#cf-promo:disabled, #cf-carrier:disabled, #cf-taxid:disabled, #cf-points:disabled { opacity: .5; cursor: not-allowed; }
.cart-form select option, #coupon-sec select option { background-color: var(--n-glass-solid); color: var(--n-ink); }
#coupon-sec select option:disabled { color: var(--n-muted); }
.s-note input:-webkit-autofill, .cart-form input:-webkit-autofill, #cf-promo:-webkit-autofill,
#cf-carrier:-webkit-autofill, #cf-taxid:-webkit-autofill, #cf-points:-webkit-autofill {
  -webkit-text-fill-color: var(--n-ink); caret-color: var(--n-moon);
  -webkit-box-shadow: 0 0 0 1000px var(--c-field-solid) inset; box-shadow: 0 0 0 1000px var(--c-field-solid) inset;
  transition: background-color 9999s ease-out 0s;
}

/* 懸浮購物車鈕(免捲到底;數量 badge + 小計)。老闆 2026-09-30 拍板:玻璃底 + 月黃細框 + 亮月黃字
   (底部「查看購物車」列已經是實心月黃,一個畫面不要兩顆實心;以前是實心分店色,龍崗是一顆橘色圓鈕緊貼月黃列) */
#cart-fab { position: fixed; right: 12px; bottom: 20px; z-index: 56; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; color: var(--n-moon-hi);
  background: var(--n-grain), linear-gradient(160deg, #1d3674, #142958); background-color: var(--n-glass-solid);
  border: 1.5px solid rgba(240, 192, 56, .72);
  border-radius: 50%; width: 64px; height: 64px; font-size: 22px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(2, 8, 26, .55), 0 0 16px rgba(240, 176, 40, .16), inset 0 1px 0 rgba(255, 255, 255, .12); }
#cart-fab[hidden] { display: none; }
#cart-fab:active { transform: scale(.96); }
/* 數量 badge:實心月黃 + 深藍字(以前是配色表外的玫瑰紅) */
#cart-fab em { position: absolute; top: -4px; right: -4px; font-style: normal; background: var(--n-moon); color: var(--n-on-moon);
  font-size: 12.5px; font-weight: 800; min-width: 22px; height: 22px; line-height: 22px; border-radius: 999px;
  padding: 0 4px; border: 2px solid var(--n-night-1); }
#cart-fab small { font-size: 12px; font-weight: 700; line-height: 1; }

/* ===== P2-11 修正(2026-08-11 audit):層級與疊位 ===== */
/* 浮動鈕:降到彈層遮罩(z50)之下,開單/會員彈層時自然被蓋住點不到;
   底部購物車列(fixed z30)讓位:fab 錯位到其上方,不遮總額 */
#cart-fab { z-index: 40; bottom: 88px; }
/* 老闆 2026-10-01 決策 A:手機上內容框佔滿整個寬度,圓鈕會壓在品項的「+」與價格上;
   底部「查看購物車」列出現時(兩者同功能)圓鈕就藏起來。
   612px 以上(iPad/桌機)內容框(460px)置中,圓鈕落在框外的空白處,本來就蓋不到,維持原樣。
   門檻算法:圓鈕左緣 = 寬 - 12 - 64,內容框右緣 = (寬 + 460) / 2,兩者不重疊要寬 >= 612 */
@media (max-width: 611.98px) { body.has-cart-bar #cart-fab { display: none; } }
/* 畫面稽核 U5-06 + 2026-10-02:往下捲時只有分類列固定在最上方(top:0);點分類捲過去時,標題停在分類列下方,不被蓋住。
   分類列高度由 JS 量(--cats-h) */
.c-cat-title { scroll-margin-top: calc(var(--cats-h, 64px) + 6px); }

/* 取消補償(追蹤頁):會員顯示已送券,非會員引導入會 */
.t-compensation {
  margin-top: 14px; padding: 14px 16px; border-radius: 14px; text-align: center;
  background: var(--n-grain), linear-gradient(155deg, rgba(66, 98, 186, .24), rgba(22, 40, 92, .46)); background-color: var(--n-night-2);
  border: 1px solid var(--n-moon-line);
}
.t-compensation .tc-title { font-size: 15px; font-weight: 900; color: var(--n-moon-hi); }
.t-compensation .tc-body { margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: var(--n-ink-2); }
.t-compensation .tc-body b { color: var(--n-moon-hi); }
.t-compensation .tc-btn { margin-top: 11px; }   /* 顏色與尺寸在「LINE 綠小按鈕」那組 */

/* C1(2026-09-09 Posky 比對):每日限量剩餘份數標籤。只在低於店家設的提醒量時才出現,
   平常不顯示——天天曝露完整庫存既無意義,也等於公開營業狀況。 */
.lowleft-tag { display: inline-block; font-size: 12px; font-weight: 800; line-height: 1;
  padding: 3px 7px; border-radius: 999px; margin-right: 6px;
  color: #ffc98a; background: rgba(242, 161, 74, .14); border: 1px solid rgba(242, 161, 74, .42); }

/* 買一送一活動(LO 2026-09-24):菜單卡片上的活動標籤 + 品項視窗裡的說明。
   折扣是結帳時自動算的,這兩個只負責讓客人「看得到有這個活動」(原本線上頁完全沒提示)。 */
.c-item .bogo-tag { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 800; line-height: 1;
  padding: 4px 8px; border-radius: 999px; color: #ffe9a8;
  background: rgba(240, 192, 56, .16); border: 1px solid rgba(240, 192, 56, .45); }
#c-sheet .s-bogo { margin: 6px 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 800;
  color: #ffe9a8; background: var(--c-sel); border: 1px dashed var(--n-moon-line); }

/* 買一送一:數量減到會少送時的確認視窗(2026-10-05)。蓋在品項視窗/購物車上面(那兩個 z-index 50),比最後確認(999)低、提示(1000)高。
   兩顆鈕等寬、至少 52px 高:想只要少的份數就按左邊,保留整組按右邊 */
.c-reduce-ov { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 990; background: rgba(4, 10, 30, .66);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.c-reduce-card { width: 100%; max-width: 420px; box-sizing: border-box; padding: 20px 18px 18px; border-radius: 20px;
  background: linear-gradient(180deg, #182f66, #11224c); background-color: #11224c; color: var(--n-ink);
  border: 1px solid var(--n-line-2); box-shadow: 0 18px 50px rgba(2, 8, 26, .55); animation: up .2s ease; }
.c-reduce-card .rd-msg { font-size: 18px; font-weight: 900; line-height: 1.5; }
.c-reduce-card .rd-sub { margin-top: 6px; font-size: 14px; color: var(--n-ink-2); }
.c-reduce-card .rd-btns { display: flex; gap: 10px; margin-top: 16px; }
.c-reduce-card .rd-btns .c-btn { flex: 1 1 0; min-width: 0; box-sizing: border-box; padding-left: 8px; padding-right: 8px; letter-spacing: .02em; }
.c-reduce-card .rd-btns .c-btn:not(.ghost) { border: 1px solid transparent; }   /* 空心鈕有 1px 框,實心鈕補一圈透明框,兩顆才會一樣寬 */

/* ===== 桌機(寬於手機外框):外框畫出邊界,看得出是一支手機寬的點餐頁 ===== */
@media (min-width: 461px) {
  .view { background: rgba(9, 19, 48, .42); box-shadow: 0 0 0 1px var(--n-line), 0 20px 80px rgba(2, 8, 26, .5); }
}