/* ============================================================
   记美好食光 · C 端 H5
   令牌与版式沿用设计画布（canvas.html），保证稿子与实现是同一套视觉
   ============================================================ */

:root{
  --ink:#2A1A10;
  --ink2:#6B5445;
  --ink3:#9C8677;
  --brand:#B5341F;
  --brand2:#8E2415;
  --brand-soft:#F8E5DE;
  --wheat:#DE9C33;
  --wheat-soft:#FBEDD6;
  --paper:#FDF8EF;
  --card:#FFFFFF;
  --line:#EFE2D2;
  --green:#3F7A4F;
  --r:16px;
  --r-sm:10px;
  --sh:0 8px 24px rgba(120,72,40,.08);
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",SimSun,serif;
  --tabh:54px;
  --safe:env(safe-area-inset-bottom,0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 必须放在组件规则之前也用 !important：.badge 等组件设了 display，
   会盖掉浏览器对 [hidden] 的默认 display:none，导致空角标常显 */
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:var(--font);color:var(--ink);background:#EDE3D5;
  font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* 手机容器：桌面打开时居中成窄栏，移动端铺满 */
#app{
  max-width:520px;margin:0 auto;min-height:100vh;background:var(--paper);
  position:relative;overflow-x:hidden;
  box-shadow:0 0 60px rgba(80,50,30,.10);
}
@media (min-width:560px){
  body{background:#E7DCCC}
}

/* ── 通用 ─────────────────────────────────────────── */
.page{padding-bottom:calc(20px + var(--safe));min-height:100vh}
.page.has-tab{padding-bottom:calc(var(--tabh) + 16px + var(--safe))}
.page.has-dock{padding-bottom:calc(92px + var(--safe))}

.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  height:48px;padding:0 14px;background:rgba(253,248,239,.94);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(239,226,210,.7);
}
.topbar h1{font-size:16px;font-weight:700;letter-spacing:.3px;flex:1;text-align:center}
.topbar .tb-l,.topbar .tb-r{width:56px;display:flex;align-items:center;gap:8px}
.topbar .tb-r{justify-content:flex-end}
.topbar .tb-btn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:17px;color:var(--ink)}
.topbar .tb-btn:active{background:rgba(0,0,0,.05)}

.sec{padding:0 16px;margin-top:18px}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.sec-h h2{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.4px;
  display:flex;align-items:center;gap:7px}
.sec-h h2::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--brand);display:block}
.sec-h .more{font-size:11.5px;color:var(--ink3);display:flex;align-items:center;gap:1px}

.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:14px}
.divider{height:1px;background:var(--line);margin:12px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:42px;padding:0 20px;border-radius:22px;background:var(--brand);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.3px;
  box-shadow:0 6px 16px rgba(181,52,31,.24);transition:transform .12s,opacity .12s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;box-shadow:none;transform:none;cursor:not-allowed}
.btn.line{background:#fff;color:var(--brand);border:1px solid rgba(181,52,31,.38);box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink2);box-shadow:none;border:1px solid var(--line)}
.btn.wheat{background:var(--wheat);box-shadow:0 6px 16px rgba(222,156,51,.28)}
.btn.sm{height:32px;padding:0 14px;font-size:12.5px;border-radius:16px}
.btn.block{display:flex;width:100%}

.tag{display:inline-flex;align-items:center;gap:3px;font-size:10px;line-height:1;
  padding:4px 7px;border-radius:5px;background:var(--brand-soft);color:var(--brand);
  font-weight:700;letter-spacing:.2px}
.tag.solid{background:var(--brand);color:#fff}
.tag.wheat{background:var(--wheat-soft);color:#9A6316}
.tag.green{background:#E6F1E8;color:var(--green)}
.tag.grey{background:#F2ECE4;color:var(--ink3)}

.pr{font-size:19px;font-weight:800;color:var(--brand);letter-spacing:-.4px;
  font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:1px}
.pr em{font-size:11px;font-style:normal;font-weight:700;margin-right:1px}
.pr .unit{font-size:10.5px;color:var(--ink3);font-weight:600;letter-spacing:0;margin-left:2px}

/* 菜品占位图：品牌色渐变 + 首字，不放假图片干扰版式判断 */
.ph{position:relative;overflow:hidden;border-radius:var(--r-sm);flex-shrink:0;
  display:grid;place-items:center;background:linear-gradient(140deg,#F0C98A,#DE9C33)}
.ph span{font-family:var(--serif);font-size:22px;font-weight:700;color:rgba(255,255,255,.94);
  text-shadow:0 1px 6px rgba(120,60,10,.30)}
.ph::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 12%,rgba(255,255,255,.28),transparent 60%)}
.ph.g1{background:linear-gradient(140deg,#F2C98C,#DFA03C)}
.ph.g2{background:linear-gradient(140deg,#E9A97F,#C4643C)}
.ph.g3{background:linear-gradient(140deg,#D9C08A,#A98A45)}
.ph.g4{background:linear-gradient(140deg,#C9B49B,#96785C)}
.ph.g5{background:linear-gradient(140deg,#E5B279,#B9762F)}
.ph.g6{background:linear-gradient(140deg,#D7C9A6,#A08F63)}
.ph.g7{background:linear-gradient(140deg,#EFAE8B,#C2664A)}
.ph.g8{background:linear-gradient(140deg,#BFCB9B,#7E9155)}

/* ── 首页 ─────────────────────────────────────────── */
.hero{position:relative;height:250px;overflow:hidden;
  background:linear-gradient(155deg,#2E1A0F 0%,#48260F 46%,#7C4318 100%)}
.hero .glow{position:absolute;left:-40px;top:-60px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(226,140,54,.30),transparent 66%)}
.hero-arc{position:absolute;right:-96px;bottom:-140px;width:330px;height:330px;border-radius:50%;
  border:1px solid rgba(226,160,70,.20);box-shadow:0 0 0 34px rgba(226,160,70,.028)}
.hero-mark{position:absolute;right:18px;top:58px;writing-mode:vertical-rl;
  font-family:var(--serif);font-size:80px;line-height:1;letter-spacing:9px;font-weight:700;
  color:rgba(255,240,214,.11);user-select:none;pointer-events:none}
.hero-grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .5px);background-size:3px 3px}
.hero-in{position:absolute;inset:0;padding:18px 20px 0;display:flex;flex-direction:column}
.brandline{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:2.4px;
  color:rgba(255,232,200,.72);font-weight:600}
.brandline i{width:16px;height:1px;background:rgba(226,160,70,.6);display:block}
.open-pill{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:10px;letter-spacing:.4px;padding:4px 9px;border-radius:20px;
  background:rgba(255,255,255,.12);color:#FFE9C9;border:1px solid rgba(255,220,170,.22);
  font-weight:600;white-space:nowrap}
.open-pill .live{width:5px;height:5px;border-radius:50%;background:#7BD389;
  box-shadow:0 0 0 2.5px rgba(123,211,137,.24)}
.open-pill.closed{color:#FFC9BC;border-color:rgba(255,150,120,.3)}
.open-pill.closed .live{background:#FF8A6B;box-shadow:0 0 0 2.5px rgba(255,138,107,.22)}
.hero h1{font-family:var(--serif);font-size:33px;line-height:1.16;font-weight:700;
  color:#FFF6E8;letter-spacing:3px;margin-top:14px;
  text-shadow:0 3px 18px rgba(0,0,0,.36)}
.hero .slg{margin-top:9px;font-size:10.5px;letter-spacing:3.4px;color:rgba(255,226,190,.78)}
.hero .seal{position:absolute;right:22px;top:118px;width:46px;height:46px;border-radius:4px;
  border:1.4px solid rgba(226,132,60,.72);color:#EFAF6A;font-family:var(--serif);font-size:11px;
  line-height:1.12;display:grid;place-items:center;text-align:center;letter-spacing:.5px;
  transform:rotate(-7deg);background:rgba(180,60,30,.16)}
.addrbar{position:absolute;left:20px;right:20px;bottom:54px;display:flex;align-items:center;gap:5px;
  font-size:11px;color:rgba(255,232,205,.82);letter-spacing:.3px}
.addrbar .ic{font-size:13px;color:#E8A85F}

.entries{display:flex;gap:9px;margin:-34px 14px 0;position:relative;z-index:5}
.entry{flex:1;background:#fff;border-radius:14px;padding:13px 8px 12px;text-align:center;
  box-shadow:0 10px 24px rgba(120,72,40,.12);transition:transform .12s}
.entry:active{transform:scale(.97)}
.entry .ico{width:34px;height:34px;border-radius:11px;margin:0 auto 7px;display:grid;place-items:center;
  font-size:18px;background:var(--wheat-soft);color:#A96C1C}
.entry.on .ico{background:var(--brand-soft);color:var(--brand)}
.entry b{display:block;font-size:12.5px;font-weight:700;letter-spacing:.2px}
.entry span{display:block;font-size:9.5px;color:var(--ink3);margin-top:3px}

.member{margin:14px 14px 0;display:flex;align-items:center;gap:10px;padding:11px 13px;
  border-radius:13px;background:linear-gradient(100deg,#FFF4E2,#FBE7C6);
  border:1px solid rgba(222,156,51,.24)}
.member .ic{font-size:17px;color:#B77A22}
.member .mtxt{flex:1;min-width:0}
.member b{display:block;font-size:12px;font-weight:700;color:#8A5714}
.member span{font-size:10px;color:#A98246}
.member .mbtn{font-size:11px;font-weight:700;color:#fff;background:linear-gradient(120deg,#D89A34,#B9762F);
  padding:6px 12px;border-radius:14px;white-space:nowrap}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 14px 0}
.grid4 a{text-align:center;padding:9px 2px}
.grid4 .ico{width:30px;height:30px;border-radius:10px;margin:0 auto 6px;display:grid;place-items:center;
  font-size:16px;background:#FBF2E6;color:#A97B3E}
.grid4 b{font-size:11px;font-weight:600;color:var(--ink2)}

.rail{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 6px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail .r{width:132px;flex-shrink:0;scroll-snap-align:start;background:#fff;border-radius:13px;
  overflow:hidden;box-shadow:0 6px 18px rgba(120,72,40,.08)}
.rail .r .ph{width:100%;height:82px;border-radius:0}
.rail .r .ri{padding:8px 10px 10px}
.rail .r b{font-size:12px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail .r .pr{font-size:15px;margin-top:4px}

.goods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g{background:#fff;border-radius:13px;overflow:hidden;box-shadow:0 6px 18px rgba(120,72,40,.08)}
.g .ph{width:100%;height:104px;border-radius:0}
.g .gi{padding:8px 10px 10px;position:relative}
.g b{font-size:12.5px;font-weight:700;display:block;line-height:1.35}
.g p{font-size:10px;color:var(--ink3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g .gb{display:flex;align-items:flex-end;justify-content:space-between;margin-top:7px}
.g .add{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:12px;box-shadow:0 3px 8px rgba(181,52,31,.28)}
.g .soldout{position:absolute;inset:0;background:rgba(255,255,255,.72);display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--ink3);border-radius:0}

.review{background:#fff;border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.review .rh{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.review .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(140deg,#E9C08A,#C98C46);
  display:grid;place-items:center;font-size:11px;color:#fff;font-weight:700}
.review .rn{flex:1;font-size:12px;font-weight:600}
.review .stars{color:var(--wheat);font-size:11px;letter-spacing:1px}
.review p{font-size:12px;color:var(--ink2);line-height:1.65}
.review .rt{font-size:10px;color:var(--ink3);margin-top:7px}

.shopcard{background:#fff;border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.shopcard .srow{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);padding:7px 0}
.shopcard .srow .ic{font-size:14px;color:var(--brand);flex-shrink:0}
.shopcard .srow b{margin-left:auto;font-weight:600;color:var(--ink)}

/* ── 点单页 ───────────────────────────────────────── */
.page-menu{display:flex;flex-direction:column;height:100vh;height:100dvh;padding-bottom:0}
.page-menu .topbar,.page-menu > div{flex-shrink:0}
.menu-wrap{flex:1;min-height:0;display:flex;overflow:hidden}
.cats{width:84px;flex-shrink:0;background:#F7EFE2;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cats::-webkit-scrollbar{display:none}
.cats a{display:block;padding:15px 6px 15px 12px;font-size:11.5px;color:#7A6656;line-height:1.35;
  position:relative;transition:background .15s}
.cats a.on{background:var(--paper);color:var(--brand);font-weight:700}
.cats a.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:16px;border-radius:0 2px 2px 0;background:var(--brand)}
.dishes{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 140px}
.dishes::-webkit-scrollbar{display:none}
.cat-label{font-size:11px;color:var(--ink3);font-weight:600;letter-spacing:.6px;margin:4px 0 10px}
.dish{display:flex;gap:10px;margin-bottom:14px}
.dish .ph{width:74px;height:74px}
.dish .di{flex:1;min-width:0;display:flex;flex-direction:column}
.dish .di b{font-size:13.5px;font-weight:700;line-height:1.35}
.dish .di .sub{font-size:10.5px;color:var(--ink3);margin-top:3px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.dish .di .mt{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px}
.dish .di .mt .pr{font-size:16px}
.dish .sold{font-size:10.5px;color:var(--ink3);font-weight:600}

.stepper{display:inline-flex;align-items:center;gap:0}
.stepper button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;transition:transform .1s}
.stepper button:active{transform:scale(.9)}
.stepper .minus{border:1px solid rgba(181,52,31,.4);color:var(--brand);background:#fff}
.stepper .plus{background:var(--brand);color:#fff;box-shadow:0 3px 8px rgba(181,52,31,.26)}
.stepper .qty{min-width:22px;text-align:center;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums}

/* 吸底购物车 */
.dock{position:fixed;left:0;right:0;bottom:calc(var(--tabh) + 8px + var(--safe));z-index:40;
  max-width:520px;margin:0 auto;padding:0 14px;transition:transform .18s}
.dock-in{display:flex;align-items:center;gap:10px;height:54px;padding:0 8px 0 14px;
  border-radius:27px;background:linear-gradient(120deg,#2E1A0F,#4A2712);
  box-shadow:0 12px 30px rgba(60,32,12,.34)}
.dock .cartico{position:relative;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:18px;color:#FFE3BE}
.dock .badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--brand);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;border:1.5px solid #3A1E0D;font-variant-numeric:tabular-nums}
.dock .dinfo{flex:1;min-width:0;color:#FFF1DE}
.dock .dinfo b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.dock .dinfo b em{font-size:10.5px;font-style:normal;font-weight:700}
.dock .dinfo span{display:block;font-size:9.5px;color:rgba(255,226,190,.66);margin-top:1px}
.dock .dbtn{height:38px;padding:0 20px;border-radius:19px;background:var(--brand);color:#fff;
  font-size:13.5px;font-weight:700;letter-spacing:.3px;display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(181,52,31,.4)}
.dock .dbtn:disabled{background:#5C4133;color:rgba(255,255,255,.4);box-shadow:none}
.dock.is-empty .dinfo b{font-size:12.5px;color:rgba(255,226,190,.6)}

/* 购物车抽屉 */
.cart-sheet{padding:16px 0 6px}
.cart-sheet .cs-h{display:flex;align-items:center;justify-content:space-between;
  padding:0 16px 10px;border-bottom:1px solid var(--line)}
.cart-sheet .cs-h b{font-size:13.5px}
.cart-sheet .cs-h button{font-size:11.5px;color:var(--ink3)}
.cart-sheet .cs-list{max-height:44vh;overflow-y:auto;padding:6px 16px}
.cs-item{display:flex;align-items:center;gap:9px;padding:9px 0}
.cs-item .ph{width:44px;height:44px;border-radius:9px}
.cs-item .ph span{font-size:15px}
.cs-item .csi{flex:1;min-width:0}
.cs-item .csi b{font-size:12.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-item .csi span{font-size:10px;color:var(--ink3)}
.cs-item .pr{font-size:13px}

/* ── 详情页 ───────────────────────────────────────── */
.pdp-hero{position:relative;height:268px;overflow:hidden;
  background:linear-gradient(150deg,#3A2110,#6E3F18 58%,#A9682A)}
.pdp-hero .big{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  font-family:var(--serif);font-size:158px;line-height:1;font-weight:700;
  color:rgba(255,242,214,.13);user-select:none;text-align:center}
.pdp-veil{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 8%,rgba(255,246,228,.26),transparent 58%),
    radial-gradient(100% 70% at 50% 116%,rgba(72,36,6,.34),transparent 62%)}
.pdp-nav{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between}
.pdp-nav button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(30,16,8,.42);color:#FFF1DE;font-size:16px;backdrop-filter:blur(6px)}
.pdp-body{margin-top:-22px;border-radius:20px 20px 0 0;background:var(--paper);
  position:relative;padding-top:18px}
.pdp-title{padding:0 16px}
.pdp-title h1{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:.6px}
.pdp-title .sub{font-size:11.5px;color:var(--ink3);margin-top:5px}
.pdp-title .tags{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.pdp-price{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.pdp-price .pr{font-size:26px}
.pdp-price .off{font-size:11.5px;color:var(--ink3);text-decoration:line-through}
.pdp-desc{padding:0 16px;margin-top:12px;font-size:12px;color:var(--ink2);line-height:1.75}

.blk{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin:12px 12px 0;padding:14px}
.blk-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.blk-h b{font-size:13px;font-weight:700}
.blk-h span{font-size:10.5px;color:var(--ink3)}
.specs{display:flex;gap:9px;flex-wrap:wrap}
.spec{flex:1;min-width:calc(33.33% - 6px);border:1px solid var(--line);border-radius:11px;
  padding:9px 8px;text-align:center;transition:all .15s;background:#fff}
.spec b{display:block;font-size:12.5px;font-weight:700}
.spec span{display:block;font-size:10.5px;color:var(--ink3);margin-top:3px}
.spec.on{border-color:var(--brand);background:var(--brand-soft)}
.spec.on b{color:var(--brand)}
.spec.dis{opacity:.42}
.addon{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #F8F2E9}
.addon:last-child{border-bottom:0}
.addon .l{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
.addon .l .ph{width:34px;height:34px;border-radius:8px}
.addon .l .ph span{font-size:12px;opacity:.9}
.addon .l > div:not(.ph) > b{font-size:12.5px;font-weight:600;display:block}
.addon .l > div:not(.ph) > span{font-size:10px;color:var(--ink3);display:block;margin-top:1px}
.addon .r{display:flex;align-items:center;gap:9px}
.addon .r .plus-t{font-size:11.5px;color:var(--brand);font-weight:700}
.ck{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;
  font-size:10px;color:#fff;transition:all .15s}
.ck.on{background:var(--brand);border-color:var(--brand)}

.pdp-dock{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:520px;margin:0 auto;
  padding:10px 14px calc(10px + var(--safe));background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);box-shadow:0 -6px 20px rgba(120,72,40,.09);
  display:flex;align-items:center;gap:10px}
.pdp-dock .price{flex:1}
.pdp-dock .price > b{font-size:20px;font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:1px;line-height:1.1}
.pdp-dock .price > b em{font-size:11px;font-style:normal;font-weight:700}
.pdp-dock .price > b i{font-style:normal}
.pdp-dock .price > span{display:block;font-size:10px;color:var(--ink3);margin-top:2px}
.pdp-dock .btn{flex:0 0 auto;height:44px;padding:0 28px;border-radius:22px}

/* ── 购物车页 ─────────────────────────────────────── */
.citem{display:flex;gap:10px;padding:11px 14px;background:#fff;border-bottom:1px solid #F8F2E9}
.citem:first-child{border-radius:var(--r) var(--r) 0 0}
.citem:last-child{border-radius:0 0 var(--r) var(--r);border-bottom:0}
.citem .ph{width:58px;height:58px}
.citem .ci{flex:1;min-width:0;display:flex;flex-direction:column}
.citem .ci b{font-size:13px;font-weight:700;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citem .ci .sp{font-size:10.5px;color:var(--ink3);margin-top:3px}
.citem .ci .bt{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px}
.citem .ci .bt .pr{font-size:15px}
.citem.invalid{opacity:.55}
.invalid-tip{display:flex;align-items:center;gap:6px;margin:10px 12px 0;padding:9px 12px;
  border-radius:10px;background:#FFF4E5;color:#9A6316;font-size:11px}
.invalid-tip span{flex:1}
.invalid-tip button{font-size:11px;font-weight:700;color:var(--brand)}
.progress{margin:10px 12px 0;background:#FFF8EC;border-radius:12px;padding:10px 13px;
  border:1px solid rgba(222,156,51,.2)}
.progress .pt{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#8A5714}
.progress .pt b{color:var(--brand);font-weight:700}
.progress .bar{height:4px;border-radius:2px;background:#F2E3CC;margin-top:7px;overflow:hidden}
.progress .bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#DE9C33,#B5341F)}

.cart-dock{position:fixed;left:0;right:0;bottom:calc(var(--tabh) + 8px + var(--safe));z-index:40;
  max-width:520px;margin:0 auto;padding:0 12px}
.cart-dock .cd-in{display:flex;align-items:center;gap:12px;height:56px;padding:0 8px 0 16px;
  border-radius:28px;background:#fff;box-shadow:0 10px 28px rgba(120,72,40,.16)}
.cart-dock .tot{flex:1;min-width:0}
.cart-dock .tot b{font-size:19px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.cart-dock .tot b em{font-size:11px;font-style:normal}
.cart-dock .tot span{display:block;font-size:9.5px;color:var(--ink3)}

/* ── 结算页 ───────────────────────────────────────── */
.ck-hero{position:relative;height:142px;overflow:hidden;padding:16px 20px 0;
  background:linear-gradient(140deg,#2E1A0F 0%,#4E2A16 58%,#7A4620 100%)}
.ck-hero .eyebrow{font-size:9.5px;letter-spacing:2.6px;color:rgba(226,160,70,.85);font-weight:700}
.ck-hero h1{font-family:var(--serif);font-size:22px;color:#FFF6E8;letter-spacing:2px;
  font-weight:700;margin-top:5px}
.ck-hero .meta{font-size:10.5px;color:rgba(255,226,190,.66);margin-top:5px}
.fulfil{margin:-24px 12px 0;position:relative;z-index:5;display:flex;gap:5px;padding:5px;
  background:#fff;border-radius:14px;box-shadow:0 8px 22px rgba(120,72,40,.12)}
.fulfil button{flex:1;height:38px;border-radius:10px;font-size:12px;font-weight:600;color:var(--ink2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:all .15s}
.fulfil button .ic{font-size:14px}
.fulfil button.on{background:var(--brand-soft);color:var(--brand);font-weight:700}
.ck-card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin:12px 12px 0;padding:14px}
.ck-card .ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ck-card .ch b{font-size:13px;font-weight:700}
.ck-card .ch span{font-size:10.5px;color:var(--ink3);display:flex;align-items:center;gap:2px}
.kv{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:12.5px}
.kv em{font-style:normal;color:var(--ink3);font-size:12px;width:52px;flex-shrink:0;line-height:1.65}
.kv .v{flex:1;text-align:right;color:var(--ink);font-weight:600;line-height:1.65;word-break:break-all}
.kv .v input{width:100%;border:0;background:#FAF3E8;border-radius:8px;padding:8px 10px;
  font-size:12.5px;text-align:right;outline:none;font-weight:600}
.kv .v input::placeholder{color:#C4B2A2;font-weight:400}
.kv .v input:focus{background:#F6ECDD;box-shadow:0 0 0 1.5px rgba(181,52,31,.18)}
.sumline{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:12px;
  color:var(--ink2)}
.sumline .num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.sumline .num.minus{color:var(--green)}
.sumline.big{padding-top:11px;margin-top:5px;border-top:1px dashed var(--line);
  font-size:13.5px;font-weight:700;color:var(--ink)}
.sumline.big .num{font-size:19px;font-weight:800}
.ck-dock{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:520px;margin:0 auto;
  padding:10px 14px calc(10px + var(--safe));background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);box-shadow:0 -6px 20px rgba(120,72,40,.09);
  display:flex;align-items:center;gap:12px}
.ck-dock .amt{flex:1;font-size:10.5px;color:var(--ink3)}
.ck-dock .amt b{display:block;font-size:20px;font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums;line-height:1.2}
.ck-dock .amt b em{font-size:11px;font-style:normal}
.ck-dock .btn{height:44px;padding:0 26px;border-radius:22px}
.item-row{display:flex;align-items:center;gap:9px;padding:7px 0}
.item-row .ph{width:40px;height:40px;border-radius:9px}
.item-row .ph span{font-size:14px}
.item-row .ir{flex:1;min-width:0}
.item-row .ir b{font-size:12.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-row .ir span{font-size:10px;color:var(--ink3)}
.item-row .iq{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.item-row .ip{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;min-width:52px;text-align:right}

/* ── 订单 ─────────────────────────────────────────── */
.tabs-status{display:flex;gap:0;padding:0 8px;background:rgba(253,248,239,.96);
  position:sticky;top:48px;z-index:29;backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(239,226,210,.7);overflow-x:auto}
.tabs-status::-webkit-scrollbar{display:none}
.tabs-status button{flex:1;min-width:62px;height:42px;font-size:12.5px;color:var(--ink2);
  position:relative;white-space:nowrap}
.tabs-status button.on{color:var(--brand);font-weight:700}
.tabs-status button.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:0;width:18px;height:2.5px;border-radius:2px;background:var(--brand)}

.ocard{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin:12px 12px 0;padding:13px 14px}
.ocard .oh{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.ocard .oh .ic{font-size:14px;color:var(--brand)}
.ocard .oh b{font-size:12.5px;font-weight:700;flex:1}
.ocard .oh .st{font-size:11.5px;font-weight:700}
.ocard .thumbs{display:flex;gap:6px;margin-bottom:9px}
.ocard .thumbs .ph{width:52px;height:52px;border-radius:9px}
.ocard .thumbs .ph span{font-size:16px}
.ocard .thumbs .moren{width:52px;height:52px;border-radius:9px;background:#F7F0E5;
  display:grid;place-items:center;font-size:10.5px;color:var(--ink3);font-weight:600}
.ocard .odesc{font-size:11.5px;color:var(--ink3);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ocard .of{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;
  border-top:1px solid #F8F2E9}
.ocard .of .sum{flex:1;font-size:11px;color:var(--ink3)}
.ocard .of .sum b{font-size:15px;font-weight:800;color:var(--ink);margin-left:3px;
  font-variant-numeric:tabular-nums}
.ocard .of .btn{height:30px;padding:0 14px;font-size:12px;border-radius:15px}

.ohead{position:relative;padding:8px 20px 20px;overflow:hidden;
  background:linear-gradient(140deg,#2E1A0F 0%,#4E2A16 58%,#7A4620 100%)}
.ohead .eyebrow{font-size:9.5px;letter-spacing:2.4px;color:rgba(226,160,70,.85);font-weight:700}
.ohead h1{font-family:var(--serif);font-size:25px;color:#FFF6E8;letter-spacing:2px;
  font-weight:700;margin-top:6px}
.ohead .sub{font-size:10.5px;color:rgba(255,226,190,.68);margin-top:6px}
.ohead .code{margin-top:14px;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;
  border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,220,170,.2)}
.ohead .code span{font-size:9.5px;color:rgba(255,226,190,.7);letter-spacing:1.2px}
.ohead .code b{font-size:20px;font-weight:800;color:#FFE9C9;letter-spacing:3px;
  font-variant-numeric:tabular-nums}
.steps{display:flex;padding:12px 20px 10px;background:#fff}
.steps .st{flex:1;text-align:center;position:relative}
.steps .st .dot{width:9px;height:9px;border-radius:50%;background:#EFE2D2;margin:0 auto 6px;
  transition:all .2s;position:relative;z-index:2}
.steps .st .ln{position:absolute;top:4px;left:50%;width:100%;height:1.5px;background:#EFE2D2;z-index:1}
.steps .st:last-child .ln{display:none}
.steps .st.done .dot{background:var(--brand)}
.steps .st.done .ln{background:var(--brand)}
.steps .st.now .dot{background:var(--brand);box-shadow:0 0 0 4px rgba(181,52,31,.16);width:11px;height:11px}
.steps .st.now b{color:var(--brand)}
.steps .st b{font-size:9.5px;font-weight:600;color:var(--ink3);display:block}
.oitem{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #F8F2E9}
.oitem:last-child{border-bottom:0}
.oitem .ph{width:46px;height:46px;border-radius:9px}
.oitem .ph span{font-size:15px}
.oitem .oi{flex:1;min-width:0}
.oitem .oi b{font-size:12.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oitem .oi span{font-size:10px;color:var(--ink3)}
.oitem .oq{font-size:11.5px;color:var(--ink3);align-self:center}
.oitem .op{font-size:13px;font-weight:700;align-self:center;min-width:52px;text-align:right;
  font-variant-numeric:tabular-nums}
.o-dock{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:520px;margin:0 auto;
  padding:10px 14px calc(10px + var(--safe));background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);box-shadow:0 -6px 20px rgba(120,72,40,.09);
  display:flex;gap:9px}
.o-dock .btn{flex:1;height:44px;border-radius:22px}

/* ── 我的 ─────────────────────────────────────────── */
.mhead{position:relative;padding:22px 20px 44px;overflow:hidden;
  background:linear-gradient(140deg,#2E1A0F 0%,#4E2A16 58%,#7A4620 100%)}
.mhead .ring{position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;
  border:1px solid rgba(226,160,70,.18);box-shadow:0 0 0 26px rgba(226,160,70,.03)}
.mhead .who{display:flex;align-items:center;gap:12px;position:relative}
.mhead .av{width:52px;height:52px;border-radius:50%;background:linear-gradient(140deg,#E9C08A,#C98C46);
  display:grid;place-items:center;font-family:var(--serif);font-size:20px;color:#fff;font-weight:700;
  border:2px solid rgba(255,232,200,.2)}
.mhead .wi{flex:1;min-width:0}
.mhead .wi b{font-family:var(--serif);font-size:19px;color:#FFF6E8;letter-spacing:1px;
  display:flex;align-items:center;gap:7px}
.mhead .wi b .vip{font-size:9px;background:linear-gradient(120deg,#E8B54F,#B9762F);color:#3A1E0D;
  padding:2px 7px;border-radius:9px;font-weight:700;letter-spacing:.3px;font-family:var(--font)}
.mhead .wi span{display:block;font-size:10.5px;color:rgba(255,226,190,.66);margin-top:4px}
.mhead .code-btn{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);
  display:grid;place-items:center;color:#FFE3BE;font-size:16px}
.mcard{margin:-30px 14px 0;position:relative;z-index:5;border-radius:16px;padding:15px 16px;
  background:linear-gradient(115deg,#3B2316,#5A3018 60%,#7C4318);
  box-shadow:0 12px 30px rgba(60,32,12,.28);overflow:hidden}
.mcard .ring2{position:absolute;right:-40px;bottom:-56px;width:150px;height:150px;border-radius:50%;
  border:1px solid rgba(226,160,70,.16)}
.mcard .mh{display:flex;align-items:center;gap:7px;font-size:10.5px;color:rgba(255,226,190,.72);
  letter-spacing:.6px;position:relative}
.mcard .mh .ic{color:#E8A85F;font-size:13px}
.mcard .assets{display:flex;margin-top:13px;position:relative}
.mcard .assets .a{flex:1;text-align:center}
.mcard .assets .a + .a{border-left:1px solid rgba(255,232,200,.14)}
.mcard .assets .a b{display:block;font-family:var(--serif);font-size:19px;color:#FFE9C9;
  font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.mcard .assets .a span{display:block;font-size:9.5px;color:rgba(255,226,190,.6);margin-top:3px}
.mcard .mfoot{margin-top:12px;display:flex;align-items:center;gap:8px;position:relative}
.mcard .mfoot u{flex:1;text-decoration:none;font-size:10px;color:rgba(255,226,190,.66)}
.mcard .mfoot .recharge{font-size:11px;font-weight:700;color:#3A1E0D;
  background:linear-gradient(120deg,#E8B54F,#D89A34);padding:5px 13px;border-radius:12px}

.ostat{display:flex;background:#fff;border-radius:var(--r);box-shadow:var(--sh);
  margin:12px 14px 0;padding:13px 0}
.ostat a{flex:1;text-align:center;position:relative}
.ostat a + a{border-left:1px solid #F8F2E9}
.ostat a b{display:block;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--ink);line-height:1.2}
.ostat a span{display:block;font-size:10px;color:var(--ink3);margin-top:3px}
.ostat a .badge{position:absolute;top:-4px;right:50%;transform:translateX(18px);
  min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--brand);color:#fff;
  font-size:9px;font-weight:700;display:grid;place-items:center}
.grid4m{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--r);
  box-shadow:var(--sh);margin:12px 14px 0;padding:14px 0}
.grid4m a{text-align:center}
.grid4m .ico{width:32px;height:32px;border-radius:10px;margin:0 auto 6px;display:grid;place-items:center;
  font-size:16px;background:#FBF2E6;color:#A97B3E}
.grid4m b{font-size:10.5px;font-weight:600;color:var(--ink2)}
.ml{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin:12px 14px 0;overflow:hidden}
.ml a{display:flex;align-items:center;gap:11px;padding:13px 15px;font-size:13px;
  border-bottom:1px solid #F8F2E9}
.ml a:last-child{border-bottom:0}
.ml a .ic{font-size:16px;color:var(--brand)}
.ml a span{margin-left:auto;font-size:11px;color:var(--ink3)}
.ml a:active{background:#FDF8EF}

/* ── 地址 ─────────────────────────────────────────── */
.addr{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin:12px 14px 0;
  padding:14px;display:flex;align-items:flex-start;gap:11px}
.addr .ai{flex:1;min-width:0}
.addr .ai .an{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700}
.addr .ai .an span{font-size:11.5px;color:var(--ink3);font-weight:400}
.addr .ai .ad{font-size:11.5px;color:var(--ink2);margin-top:6px;line-height:1.6}
.addr .ai .def{display:inline-flex;margin-top:7px}
.addr .edit{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink3);font-size:15px}
.form-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #F8F2E9}
.form-row:last-child{border-bottom:0}
.form-row label{width:66px;font-size:12.5px;color:var(--ink2);flex-shrink:0}
.form-row input{flex:1;border:0;background:#FAF3E8;border-radius:9px;padding:9px 11px;
  font-size:13px;outline:none}
.form-row input:focus{background:#F6ECDD;box-shadow:0 0 0 1.5px rgba(181,52,31,.18)}

/* ── 空态 / 骨架 / 提示 ───────────────────────────── */
.empty-state{text-align:center;padding:60px 30px}
.empty-state .eico{width:64px;height:64px;border-radius:50%;background:#F7EDDF;display:grid;place-items:center;
  margin:0 auto 14px;font-size:27px;color:#C4AA88}
.empty-state b{display:block;font-size:13.5px;font-weight:600;color:var(--ink2)}
.empty-state p{font-size:11.5px;color:var(--ink3);margin-top:6px;line-height:1.6}
.empty-state .btn{margin-top:16px}

.skel{background:linear-gradient(90deg,#F2E9DC 25%,#F9F3E9 37%,#F2E9DC 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skel-row{display:flex;gap:10px;padding:12px}
.skel-row .s1{width:74px;height:74px;flex-shrink:0}
.skel-row .s2{flex:1}
.skel-row .s2 i{display:block;height:12px;margin-bottom:8px}
.skel-row .s2 i:nth-child(1){width:60%}
.skel-row .s2 i:nth-child(2){width:85%}
.skel-row .s2 i:nth-child(3){width:35%}

.toast{position:fixed;left:50%;bottom:120px;transform:translate(-50%,16px);z-index:200;
  max-width:78%;padding:10px 18px;border-radius:20px;background:rgba(42,26,16,.93);color:#FFF6E8;
  font-size:12.5px;line-height:1.5;text-align:center;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;backdrop-filter:blur(8px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 底部弹层 */
.sheet-wrap{position:fixed;inset:0;z-index:150;display:flex;align-items:flex-end;justify-content:center}
.sheet-mask{position:absolute;inset:0;background:rgba(28,14,6,.55);opacity:0;transition:opacity .22s}
.sheet-body{position:relative;width:100%;max-width:520px;background:var(--paper);
  border-radius:20px 20px 0 0;padding-bottom:calc(8px + var(--safe));
  transform:translateY(100%);transition:transform .26s cubic-bezier(.32,.72,0,1);
  max-height:88vh;overflow-y:auto}
.sheet-wrap.on .sheet-mask{opacity:1}
.sheet-wrap.on .sheet-body{transform:translateY(0)}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 9px}
.sheet-h b{font-size:14.5px;font-weight:700}
.sheet-h button{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink3);font-size:15px;background:#F2E9DC}

/* tabbar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;max-width:520px;margin:0 auto;
  height:calc(var(--tabh) + var(--safe));padding-bottom:var(--safe);
  display:flex;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  border-top:1px solid rgba(239,226,210,.8)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ink3);font-size:9.5px;position:relative;transition:color .15s}
.tabbar a .ic{font-size:20px}
.tabbar a.on{color:var(--brand);font-weight:700}
.tabbar a .badge{position:absolute;top:6px;left:50%;transform:translateX(6px);
  min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--brand);color:#fff;
  font-size:9px;font-weight:700;display:grid;place-items:center}

/* 储值弹层 */
.rc-list{display:flex;gap:9px;padding:0 16px}
.rc{flex:1;border:1.5px solid var(--line);border-radius:13px;padding:14px 6px;text-align:center;
  position:relative;background:#fff;transition:all .15s}
.rc.on{border-color:var(--brand);background:var(--brand-soft)}
.rc .amt{font-size:19px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.rc .amt em{font-size:10px;font-style:normal}
.rc .give{font-size:9.5px;color:var(--wheat);font-weight:700;margin-top:4px}
.rc .thr{font-size:9.5px;color:var(--ink3);margin-top:3px}
.rc .hot{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:9px;
  background:var(--brand);color:#fff;padding:2px 8px;border-radius:9px;font-weight:700;white-space:nowrap}
.rc-note{padding:14px 16px 6px;font-size:10.5px;color:var(--ink3);line-height:1.8}
.rc-note div{display:flex;gap:6px}
.rc-note .ic{font-size:12px;color:var(--green);margin-top:2px;flex-shrink:0}
.rc-btn{padding:8px 16px calc(10px + var(--safe))}
.rc-btn .btn{width:100%;height:46px;border-radius:23px;font-size:15px}

/* 支付结果 */
.pay-done{text-align:center;padding:52px 24px 0}
.pay-done .pico{width:72px;height:72px;border-radius:50%;background:#E9F3EB;color:var(--green);
  display:grid;place-items:center;margin:0 auto 18px;font-size:34px;
  animation:pop .4s cubic-bezier(.34,1.4,.5,1)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.pay-done h1{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:1px}
.pay-done p{font-size:12px;color:var(--ink3);margin-top:8px;line-height:1.7}
.pay-done .amt{margin-top:16px;font-size:26px;font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums}
.pay-done .amt em{font-size:13px;font-style:normal}
.pay-done .acts{display:flex;gap:10px;margin-top:26px}
.pay-done .acts .btn{flex:1;height:44px;border-radius:22px}

/* 滚动条（桌面预览） */
::-webkit-scrollbar{width:0;height:0}