/* ============================================================
瞳予瞳 · 移动端商城外壳
------------------------------------------------------------
与 site.css 的分工：
site.css —— 品牌站（宽屏、大图、滚动动效）与购物袋/弹窗等通用组件
shop.css —— 商城页面的移动端骨架：顶栏、搜索、分类、商品卡、底部 Tab
两者共用 :root 里的同一套变量，所以颜色字体天然一致。
布局基调：移动优先。桌面端不另做一套版式，而是把容器放宽、
把网格从 2 列加到 4 列 —— 省一半 CSS，也不会出现「手机好看电脑难看」。
============================================================ */
:root{
--m-bg:#F4F6F8; /* 商城页面底色，比品牌站略灰，衬白卡片 */
--m-tab-h:58px; /* 底部 Tab 高度，页面留白要用到 */
--m-top-h:52px;
}
/* ---------- 外壳 ---------- */
.m-app{
max-width:560px;margin:0 auto;min-height:100vh;
background:var(--m-bg);
padding-bottom:calc(var(--m-tab-h) + env(safe-area-inset-bottom,0px));
position:relative;
}
@media(min-width:900px){
.m-app{max-width:1080px;box-shadow:0 0 0 1px var(--line-2)}
}
/* ---------- 顶栏 ---------- */
.m-top{
position:sticky;top:0;z-index:60;
background:rgba(244,246,248,.94);backdrop-filter:blur(14px) saturate(1.3);
border-bottom:1px solid var(--line-2);
}
.m-top-in{
height:var(--m-top-h);display:flex;align-items:center;gap:10px;padding:0 14px;
}
.m-top h1{font-family:var(--serif);font-size:16.5px;font-weight:600;letter-spacing:.02em}
.m-top .sp{flex:1}
.m-top .ico{
width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
color:var(--ink-2);transition:.2s;position:relative;flex:none;
}
.m-top .ico:hover{background:rgba(11,42,52,.06);color:var(--ink)}
.m-top .ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.m-back{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--ink-2);
padding:6px 10px 6px 4px;border-radius:10px;transition:.2s;flex:none}
.m-back:hover{background:rgba(11,42,52,.06);color:var(--ink)}
.m-back svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
/* ---------- 搜索 ---------- */
.m-search{display:flex;gap:9px;padding:11px 14px}
.m-search .box{
flex:1;display:flex;align-items:center;gap:9px;min-width:0;
background:var(--surface);border:1px solid var(--line);border-radius:999px;
padding:0 15px;height:40px;transition:.25s;
}
.m-search .box:focus-within{border-color:var(--aqua);box-shadow:0 0 0 3px rgba(15,163,177,.11)}
.m-search .box svg{width:16px;height:16px;stroke:var(--ink-3);fill:none;stroke-width:1.9;
stroke-linecap:round;flex:none}
.m-search input{
flex:1;min-width:0;border:0;outline:0;background:none;font-family:inherit;
font-size:13.5px;color:var(--ink);height:100%;
}
.m-search input::placeholder{color:var(--ink-3);font-weight:300}
.m-search .go{
flex:none;height:40px;padding:0 20px;border-radius:999px;background:var(--aqua);
color:#fff;font-size:13.5px;font-weight:500;transition:.25s;
}
.m-search .go:hover{background:var(--aqua-deep)}
.m-search .clr{
width:18px;height:18px;border-radius:50%;background:var(--ink-3);color:#fff;flex:none;
display:none;place-items:center;font-size:11px;line-height:1;
}
.m-search .clr.on{display:grid}
/* ---------- 公告条 ---------- */
.m-notice{
display:flex;gap:11px;align-items:flex-start;margin:2px 14px 12px;padding:12px 14px;
border:1px solid rgba(217,80,63,.34);background:var(--surface);border-radius:12px;
}
.m-notice .bd{
flex:none;width:24px;height:24px;border-radius:6px;border:1.5px solid var(--danger);
display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--danger);
font-family:var(--serif);
}
.m-notice p{font-size:12.5px;color:var(--ink-2);line-height:1.75;font-weight:300}
/* ---------- 圆形分类网格 ---------- */
.m-cats{
display:grid;grid-template-columns:repeat(5,1fr);gap:14px 6px;
padding:16px 10px 18px;background:var(--surface);
}
@media(min-width:900px){.m-cats{grid-template-columns:repeat(10,1fr)}}
.m-cat{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.m-cat .bub{
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(150deg,#E4F4F8,#CFEAF1);color:var(--aqua-deep);
transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s;
}
.m-cat:hover .bub{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 20px -12px rgba(6,115,127,.8)}
.m-cat .bub svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.m-cat .bub b{font-family:var(--serif);font-size:12px;font-weight:700;line-height:1.1}
.m-cat span{font-size:11.5px;color:var(--ink-2);font-weight:400;line-height:1.35}
.m-cat.on .bub{background:var(--aqua);color:#fff}
.m-cat.on span{color:var(--aqua-deep);font-weight:500}
/* ---------- 区块标题 ---------- */
.m-sec{margin-top:10px;background:var(--surface);padding:16px 0 4px}
.m-sec-h{display:flex;align-items:center;gap:10px;padding:0 14px 12px}
.m-sec-h h2{font-family:var(--serif);font-size:16.5px;font-weight:600;letter-spacing:.01em}
.m-sec-h .sp{flex:1}
.m-sec-h .more{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:3px}
.m-sec-h .more:hover{color:var(--aqua-deep)}
.m-sec-h .more svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
/* ---------- 横滑商品轨 ---------- */
.m-rail{
display:flex;gap:11px;overflow-x:auto;padding:0 14px 16px;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.m-rail::-webkit-scrollbar{height:0}
.m-rail>*{scroll-snap-align:start;flex:none;width:132px}
/* ---------- 商品卡（竖版） ---------- */
.m-card{display:block;border-radius:14px;overflow:hidden;background:var(--surface);
border:1px solid var(--line-2);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.m-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-s)}
.m-card .vis{
position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
background:linear-gradient(165deg,#F7FBFC,#EAF4F7);
}
.m-card .vis .halo{position:absolute;width:76%;aspect-ratio:1;border-radius:50%;filter:blur(22px);opacity:.8}
.m-card .vis .disc{position:relative;width:64%;aspect-ratio:1;border-radius:50%;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 8px 18px -10px rgba(6,60,74,.5);
transition:transform .45s cubic-bezier(.22,1,.36,1)}
.m-card:hover .vis .disc{transform:scale(1.06) rotate(5deg)}
.m-card .vis .out{
position:absolute;inset:0;display:grid;place-items:center;background:rgba(244,246,248,.78);
backdrop-filter:blur(2px);font-size:12.5px;color:var(--ink-2);font-weight:500;letter-spacing:.04em;
}
.m-card .bd{padding:9px 10px 11px}
.m-card .nm{font-size:13px;line-height:1.45;font-weight:400;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:37.7px}
.m-card .pr{margin-top:6px;font-family:var(--serif);font-size:17px;font-weight:700;
color:var(--danger);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.m-card .pr small{font-size:11px;font-weight:400;color:var(--ink-3);margin-left:3px;
font-family:var(--sans);letter-spacing:0}
/* ---------- 数量步进器 ---------- */
.m-step{display:flex;align-items:center;justify-content:space-between;gap:2px;
margin-top:8px;border:1px solid var(--line);border-radius:9px;overflow:hidden;height:30px}
.m-step button{
width:30px;height:100%;display:grid;place-items:center;background:transparent;
font-size:16px;color:var(--ink-2);line-height:1;transition:.18s;
}
.m-step button:hover:not(:disabled){background:var(--surface-2);color:var(--aqua-deep)}
.m-step button:disabled{opacity:.32;cursor:not-allowed}
.m-step .n{flex:1;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
/* ---------- 排序 / 筛选条 ---------- */
.m-sort{
display:flex;align-items:center;background:var(--surface);
border-bottom:1px solid var(--line-2);position:sticky;top:var(--m-top-h);z-index:50;
}
.m-sort button{
flex:1;padding:11px 4px;font-size:13px;color:var(--ink-2);transition:.2s;
display:flex;align-items:center;justify-content:center;gap:4px;
}
.m-sort button.on{color:var(--aqua-deep);font-weight:500}
.m-sort button svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.m-sort button.desc svg{transform:rotate(180deg)}
/* ---------- 分类页：左栏 + 右列表 ---------- */
.m-split{display:flex;align-items:flex-start;gap:0}
.m-side{
flex:none;width:96px;background:var(--surface-2);position:sticky;top:var(--m-top-h);
max-height:calc(100vh - var(--m-top-h) - var(--m-tab-h));overflow-y:auto;
}
.m-side::-webkit-scrollbar{width:0}
.m-side a{
display:block;padding:15px 10px;font-size:12.5px;color:var(--ink-2);line-height:1.4;
position:relative;transition:.2s;border-bottom:1px solid rgba(11,42,52,.04);
}
.m-side a.on{background:var(--surface);color:var(--ink);font-weight:600}
.m-side a.on::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:3px;height:17px;border-radius:0 3px 3px 0;background:var(--aqua);
}
.m-side a .n{display:block;font-size:10.5px;color:var(--ink-3);margin-top:2px;font-weight:300}
.m-list{flex:1;min-width:0;background:var(--surface);min-height:60vh}
@media(min-width:900px){.m-side{width:170px}}
/* ---------- 商品行（分类页 / 搜索结果） ---------- */
.m-row{
display:grid;grid-template-columns:78px 1fr;gap:11px;padding:13px 13px;
border-bottom:1px solid var(--line-2);align-items:start;
}
.m-row .vis{
position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;display:grid;
place-items:center;background:linear-gradient(165deg,#F7FBFC,#EAF4F7);
}
.m-row .vis .halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;filter:blur(15px);opacity:.8}
.m-row .vis .disc{position:relative;width:62%;aspect-ratio:1;border-radius:50%;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.m-row .vis .out{position:absolute;inset:0;display:grid;place-items:center;
background:rgba(244,246,248,.76);font-size:11.5px;color:var(--ink-2);font-weight:500}
.m-row .bd{min-width:0;display:flex;flex-direction:column;min-height:78px}
.m-row .nm{font-size:13.5px;line-height:1.5;font-weight:400;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m-row .sub{font-size:11px;color:var(--ink-3);margin-top:4px;line-height:1.5;font-weight:300}
.m-row .ft{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:8px}
.m-row .pr{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--danger);
font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.m-row .m-step{margin-top:0;width:96px;flex:none}
/* ---------- 商品网格（桌面端分类页） ---------- */
.m-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;padding:13px}
@media(min-width:620px){.m-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.m-grid{grid-template-columns:repeat(4,1fr)}}
/* ---------- 空态 / 加载 ---------- */
.m-empty{padding:64px 24px;text-align:center;color:var(--ink-3);font-size:13px;font-weight:300;line-height:1.8}
.m-empty b{display:block;font-size:14.5px;color:var(--ink-2);font-weight:500;margin-bottom:6px}
.m-empty svg{width:44px;height:44px;stroke:var(--line);fill:none;stroke-width:1.3;
margin:0 auto 14px;display:block}
.m-loading{padding:40px;text-align:center;color:var(--ink-3);font-size:13px}
.m-spin{
width:22px;height:22px;margin:0 auto 12px;border-radius:50%;
border:2px solid var(--line);border-top-color:var(--aqua);animation:m-spin .8s linear infinite;
}
@keyframes m-spin{to{transform:rotate(360deg)}}
/* ---------- 底部 Tab ---------- */
.m-tabs{
position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:70;
width:100%;max-width:560px;
height:calc(var(--m-tab-h) + env(safe-area-inset-bottom,0px));
padding-bottom:env(safe-area-inset-bottom,0px);
background:rgba(255,255,255,.95);backdrop-filter:blur(16px) saturate(1.4);
border-top:1px solid var(--line-2);
display:grid;grid-template-columns:repeat(4,1fr);
}
@media(min-width:900px){.m-tabs{max-width:1080px}}
.m-tabs a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
font-size:10.5px;color:var(--ink-3);position:relative;transition:color .2s;
}
.m-tabs a.on{color:var(--aqua-deep)}
.m-tabs a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.m-tabs a.on svg{stroke-width:2}
.m-tabs .cnt{
position:absolute;top:5px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;
border-radius:9px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:600;
display:grid;place-items:center;line-height:1;
}
.m-tabs .cnt[hidden]{display:none}
/* ---------- 全局页脚 ----------
由 shop.js 注入到每个页面 #pageBody 之后。备案号是法定公示项，
所以单独占一行、字号给足、可点，不能被压成看不见的小灰字。 */
.m-foot{
border-top:1px solid var(--line-2);
background:var(--m-bg);
}
.m-foot-in{padding:20px 16px 26px;text-align:center}
.m-foot-icp{
font-size:12.5px;margin-bottom:8px;font-variant-numeric:tabular-nums;
}
.m-foot-icp a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.m-foot-icp a:hover{color:var(--aqua-deep);border-bottom-color:var(--aqua)}
.m-foot-icp[hidden]{display:none}
.m-foot-co{font-size:11.5px;color:var(--ink-3);font-weight:300}
/* 隐私政策 / 服务条款：法律页面的入口必须点得到。
字号比版权行大一点、颜色深一点 —— 这两个链接不该被当成装饰小字藏起来。 */
.m-foot-links{margin-bottom:9px;font-size:12.5px}
.m-foot-links a{
color:var(--ink-2);text-decoration:none;margin:0 7px;
border-bottom:1px solid var(--line);padding-bottom:1px;
}
.m-foot-links a:hover{color:var(--aqua-deep);border-bottom-color:var(--aqua)}
.m-foot-disc{font-size:11px;color:var(--ink-3);font-weight:300;line-height:1.75;margin-top:6px;opacity:.8}
/* 同意勾选（结算页）。默认不勾；文字部分可点，方便手指操作。
结构是 ，
而不是把 input 包在 label 里 —— 因为文字里有《隐私政策》链接，
label 只包文字时，点链接不会顺带把勾选框也切一下。 */
.m-consent{
display:flex;align-items:flex-start;gap:9px;
margin:12px 0 0;font-size:12.5px;line-height:1.75;color:var(--ink-2);
text-align:left;
}
.m-consent input{
flex:none;width:17px;height:17px;margin-top:2px;accent-color:var(--aqua);cursor:pointer;
}
.m-consent label{cursor:pointer}
.m-consent a{color:var(--aqua-deep);text-decoration:none;border-bottom:1px solid var(--line)}
.m-consent a:hover{border-bottom-color:var(--aqua)}
.m-consent.err label{color:#9E3323}
.m-consent.err input{outline:2px solid #9E3323;outline-offset:1px;border-radius:4px}
/* ---------- 商品详情 ---------- */
.m-detail{background:var(--surface)}
.m-hero{
position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
background:linear-gradient(165deg,#F7FBFC,#E7F3F7);
}
.m-hero .halo{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;filter:blur(46px);opacity:.85}
.m-hero .disc{position:relative;width:56%;aspect-ratio:1;border-radius:50%;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 30px 60px -28px rgba(6,60,74,.55)}
.m-hero .ring{position:absolute;border-radius:50%;border:1px dashed rgba(15,163,177,.22)}
.m-hero .r1{inset:8%}
.m-hero .r2{inset:18%;border-style:solid;border-color:rgba(214,211,240,.5)}
.m-detail .hd{padding:16px 16px 14px}
.m-detail .pr{font-family:var(--serif);font-size:27px;font-weight:700;color:var(--danger);
letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.m-detail .pr small{font-size:12px;font-weight:400;color:var(--ink-3);font-family:var(--sans)}
.m-detail .nm{font-size:16px;line-height:1.55;margin-top:9px;font-weight:400}
.m-detail .sub{font-size:12px;color:var(--ink-3);margin-top:7px;font-weight:300}
.m-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.m-tags span{font-size:11.5px;color:var(--ink-2);background:var(--surface-2);
border:1px solid var(--line-2);padding:4px 10px;border-radius:999px}
.m-tags span.hot{background:var(--danger-soft);border-color:#F6D3CD;color:#9E3323}
.m-block{margin-top:10px;background:var(--surface);padding:16px}
.m-block>h3{font-family:var(--serif);font-size:15px;font-weight:600;margin-bottom:13px;
display:flex;align-items:center;gap:8px}
.m-block>h3::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--aqua)}
.m-kv{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:13px}
.m-kv dt{color:var(--ink-3);font-weight:300;white-space:nowrap}
.m-kv dd{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.m-para{font-size:13.5px;color:var(--ink-2);line-height:1.9;font-weight:300}
.m-warn{
margin-top:12px;padding:12px 14px;border-radius:12px;background:#FFF4EC;
border:1px solid #F6DCC6;font-size:12.5px;color:#8A5220;line-height:1.8;
}
.m-warn b{color:#9A6108}
/* ---------- 规格选择 ---------- */
.m-axes{padding:14px 16px 4px}
.m-axis{margin-bottom:16px}
.m-axis .lb{font-size:12.5px;color:var(--ink-2);margin-bottom:9px;display:flex;gap:7px;align-items:baseline}
.m-axis .lb b{font-weight:500;color:var(--ink)}
.m-axis .lb i{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:300}
.m-chips{display:flex;flex-wrap:wrap;gap:8px}
.m-chip{
min-width:62px;padding:9px 13px;border-radius:10px;border:1px solid var(--line);
background:var(--surface);font-size:13px;color:var(--ink);transition:.2s;text-align:center;
font-variant-numeric:tabular-nums;position:relative;
}
.m-chip:hover:not(:disabled){border-color:var(--aqua);color:var(--aqua-deep)}
.m-chip.on{background:var(--aqua);border-color:var(--aqua);color:#fff;font-weight:500}
.m-chip:disabled{
opacity:.42;cursor:not-allowed;background:var(--surface-2);
background-image:linear-gradient(to top right,transparent 48%,var(--line) 49%,var(--line) 51%,transparent 52%);
}
.m-stock-note{font-size:12px;color:var(--ink-3);padding:2px 16px 0;font-weight:300}
.m-stock-note b{color:var(--aqua-deep);font-weight:500}
/* ---------- 底部操作条 ---------- */
.m-bar{
position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:70;
width:100%;max-width:560px;
background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
border-top:1px solid var(--line-2);
padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
display:flex;align-items:center;gap:10px;
}
@media(min-width:900px){.m-bar{max-width:1080px}}
.m-bar .sm{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;
font-size:10.5px;color:var(--ink-3);padding:0 8px}
.m-bar .sm svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.m-bar .grow{flex:1}
.m-bar .btn{flex:none;padding:12px 26px;font-size:14.5px}
.m-bar .tot{flex:none;font-size:12px;color:var(--ink-3);line-height:1.3;text-align:right}
.m-bar .tot b{display:block;font-family:var(--serif);font-size:18px;color:var(--danger);
font-variant-numeric:tabular-nums;font-weight:700}
/* ---------- 购物车页 ---------- */
.m-cart-line{
display:grid;grid-template-columns:24px 74px 1fr;gap:11px;padding:14px;
background:var(--surface);border-bottom:1px solid var(--line-2);align-items:start;
}
.m-check{
width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);margin-top:26px;
display:grid;place-items:center;flex:none;transition:.2s;
}
.m-check.on{background:var(--aqua);border-color:var(--aqua)}
.m-check.on::after{
content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;
transform:rotate(-45deg) translate(1px,-1px);
}
.m-cart-line .vis{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;
display:grid;place-items:center;background:linear-gradient(165deg,#F7FBFC,#EAF4F7)}
.m-cart-line .vis .halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;filter:blur(15px);opacity:.8}
.m-cart-line .vis .disc{position:relative;width:62%;aspect-ratio:1;border-radius:50%;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.m-cart-line .bd{min-width:0}
.m-cart-line .nm{font-size:13.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden}
.m-cart-line .sp{font-size:11.5px;color:var(--ink-3);margin-top:5px;line-height:1.5}
.m-cart-line .ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.m-cart-line .pr{font-size:15px;font-weight:600;color:var(--danger);
font-variant-numeric:tabular-nums;font-family:var(--serif)}
.m-cart-line .m-step{width:88px;margin-top:0}
.m-cart-line .rm{font-size:11.5px;color:var(--ink-3);align-self:flex-end}
.m-cart-line .rm:hover{color:var(--danger)}
/* 购物袋顶部的配送说明。它长得像商品行但只是说明文字 ——
单独一个类，免得统计商品数量时把它也算进去。 */
.m-cart-note{
display:flex;align-items:center;gap:10px;padding:13px 16px;
background:var(--surface);border-bottom:1px solid var(--line-2);
font-size:13px;color:var(--ink-2)}
.m-cart-note svg{width:17px;height:17px;stroke:var(--aqua-deep);fill:none;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;flex:none}
.m-cartbar{
position:fixed;left:50%;transform:translateX(-50%);z-index:70;
width:100%;max-width:560px;
background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
border-top:1px solid var(--line-2);
/* 底部 Tab 永远是 fixed bottom:0。m-cartbar 也固定底部，但出现在 cart 与 checkout 页时
不能压在 Tab 下面 —— 升到底栏上方。安全区也一起让，免得小屏遮挡。 */
bottom:calc(var(--m-tab-h) + env(safe-area-inset-bottom,0px));
padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
display:flex;align-items:center;gap:12px;
}
@media(min-width:900px){.m-cartbar{max-width:1080px}}
.m-cartbar .all{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);flex:none}
.m-cartbar .all .m-check{margin-top:0}
.m-cartbar .sum{flex:1;text-align:right;font-size:11.5px;color:var(--ink-3);line-height:1.35}
.m-cartbar .sum b{display:block;font-family:var(--serif);font-size:19px;font-weight:700;
color:var(--danger);font-variant-numeric:tabular-nums}
.m-cartbar .btn{flex:none;padding:12px 26px;font-size:14.5px;border-radius:999px}
.m-cartbar .btn[disabled]{opacity:.42;cursor:not-allowed;transform:none}
/* ---------- 结算 / 表单 ---------- */
.m-form{background:var(--surface);padding:4px 16px 16px}
.m-field{padding:14px 0;border-bottom:1px solid var(--line-2)}
.m-field:last-child{border-bottom:0}
.m-field label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:8px;font-weight:500}
.m-field label i{color:var(--danger);font-style:normal;margin-left:2px}
.m-field input,.m-field textarea,.m-field select{
width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;
background:var(--surface-2);font-family:inherit;font-size:14px;color:var(--ink);
transition:.2s;outline:0;
}
.m-field input:focus,.m-field textarea:focus,.m-field select:focus{
border-color:var(--aqua);background:var(--surface);box-shadow:0 0 0 3px rgba(15,163,177,.11)}
.m-field textarea{resize:vertical;min-height:72px;line-height:1.7}
.m-field .hint{font-size:11.5px;color:var(--ink-3);margin-top:7px;font-weight:300;line-height:1.6}
.m-err{
margin:12px 16px;padding:11px 14px;border-radius:11px;background:var(--danger-soft);
border:1px solid #F6D3CD;color:#9E3323;font-size:12.5px;line-height:1.7;
}
.m-ok{
margin:12px 16px;padding:11px 14px;border-radius:11px;background:var(--ok-soft);
border:1px solid #C8EBDF;color:#0A7256;font-size:12.5px;line-height:1.7;
}
/* ---------- 订单确认 / 查单结果 ---------- */
.m-order{margin:10px 0 0;background:var(--surface);padding:16px}
.m-order .no{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.01em}
.m-order .st{
display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 10px;
border-radius:999px;margin-left:8px;vertical-align:middle;
}
.m-order .rows{margin-top:14px;border-top:1px dashed var(--line-2);padding-top:12px}
.m-order .r{display:flex;justify-content:space-between;gap:12px;font-size:13px;
color:var(--ink-2);padding:5px 0;font-weight:300}
.m-order .r b{color:var(--ink);font-weight:500;text-align:right}
.m-order .r.tot{margin-top:8px;padding-top:11px;border-top:1px solid var(--line-2);
font-size:14px;color:var(--ink)}
.m-order .r.tot b{font-family:var(--serif);font-size:19px;color:var(--danger);font-weight:700}
.m-items{margin-top:14px;border-top:1px dashed var(--line-2);padding-top:12px}
.m-items .it{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;
color:var(--ink-2);padding:5px 0;font-weight:300}
.m-items .it b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
/* ---------- 我的 ---------- */
.m-me{background:linear-gradient(160deg,#0B4A57,#0FA3B1);padding:24px 16px 22px;color:#fff}
.m-me .who{display:flex;align-items:center;gap:13px}
.m-me .av{
width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.2);flex:none;
display:grid;place-items:center;font-family:var(--serif);font-size:21px;font-weight:600;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}
.m-me .nm{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.02em}
.m-me .ph{font-size:12.5px;color:rgba(255,255,255,.75);margin-top:4px;font-weight:300}
.m-me .role{
display:inline-block;margin-top:7px;font-size:11px;padding:3px 10px;border-radius:999px;
background:rgba(255,255,255,.18);color:rgba(255,255,255,.92);
}
.m-me .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.m-me .grid div{text-align:center}
.m-me .grid b{display:block;font-family:var(--serif);font-size:19px;font-weight:700}
.m-me .grid span{font-size:11px;color:rgba(255,255,255,.72);font-weight:300}
.m-menu{margin-top:10px;background:var(--surface)}
.m-menu a{
display:flex;align-items:center;gap:12px;padding:15px 16px;
border-bottom:1px solid var(--line-2);font-size:14px;transition:.2s;
}
.m-menu a:last-child{border-bottom:0}
.m-menu a:hover{background:var(--surface-2)}
.m-menu a .ic{width:22px;height:22px;flex:none;display:grid;place-items:center}
.m-menu a .ic svg{width:20px;height:20px;stroke:var(--aqua-deep);fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.m-menu a .sp{flex:1}
.m-menu a .arrow{width:15px;height:15px;stroke:var(--ink-3);fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.m-menu a .sub{font-size:12px;color:var(--ink-3);font-weight:300}
.m-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:16px 8px 18px;
background:var(--surface)}
.m-quick a{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;
color:var(--ink-2);position:relative}
.m-quick a svg{width:23px;height:23px;stroke:var(--aqua-deep);fill:none;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.m-quick a .cnt{
position:absolute;top:-4px;left:calc(50% + 5px);min-width:16px;height:16px;padding:0 4px;
border-radius:8px;background:var(--danger);color:#fff;font-size:10px;font-weight:600;
display:grid;place-items:center;line-height:1;
}
/* ---------- 提示条 ---------- */
.m-toast{
position:fixed;left:50%;bottom:calc(var(--m-tab-h) + 26px);transform:translateX(-50%) translateY(12px);
z-index:120;max-width:82vw;padding:11px 18px;border-radius:12px;
background:rgba(11,42,52,.92);color:#fff;font-size:13px;line-height:1.6;
opacity:0;transition:.3s;pointer-events:none;text-align:center;
}
.m-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* 商城页不需要品牌站的滚动显现动效（首屏内容会一直藏着） */
.m-app .reveal{opacity:1;transform:none}
/* 无头截图与「减少动态效果」偏好下，过渡时钟不推进会让内容卡在初始态。
这里统一压掉，保证任何环境下首屏都是最终状态。 */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}
/* ============================================================
我的（App 结构）：订单卡片 / 子页 / 地址表单
============================================================ */
/* 卡片头：标题 + 「全部 ›」 */
.m-ord-h{display:flex;align-items:center;margin-bottom:14px}
.m-ord-h>h3{flex:1;margin:0;padding-left:11px;position:relative;
font-family:var(--serif);font-size:15px;font-weight:600}
.m-ord-h>h3::before{content:"";position:absolute;left:0;top:2px;width:3px;height:14px;
border-radius:2px;background:var(--aqua)}
.m-ord-h>a{display:flex;align-items:center;gap:2px;font-size:12.5px;color:var(--ink-3)}
.m-ord-h>a svg{width:14px;height:14px}
/* 五个订单档位 */
.m-ord-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.m-ord-tabs a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
padding:4px 0;font-size:12px;color:var(--ink-2)}
.m-ord-tabs a .ic{color:var(--aqua);line-height:0}
.m-ord-tabs a .ic svg{width:23px;height:23px}
.bdg{position:absolute;top:0;right:calc(50% - 24px);min-width:16px;height:16px;padding:0 4px;
border-radius:8px;background:#E5484D;color:#fff;font-size:10px;font-style:normal;
line-height:16px;text-align:center}
/* 子页返回条 */
.m-sub{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px;
padding:11px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.m-sub>a{display:grid;place-items:center;width:26px;height:26px;color:var(--ink)}
.m-sub>a svg{width:20px;height:20px}
.m-sub>b{font-size:15.5px}
.m-empty{padding:28px 16px;color:var(--ink-3);font-size:13px;line-height:1.9;text-align:center}
.m-empty b{color:var(--ink-2)}
/* 订单列表的分档 tabs */
.m-tabs{display:flex;gap:18px;padding:12px 14px;overflow-x:auto;
background:var(--surface);border-bottom:1px solid var(--line)}
.m-tabs a{position:relative;padding-bottom:5px;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.m-tabs a.on{color:var(--aqua);font-weight:600}
.m-tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
border-radius:1px;background:var(--aqua)}
.m-tabs .bdg{position:static;display:inline-block;margin-left:4px;vertical-align:top}
/* 订单卡 */
.m-ord{margin:12px;padding:14px;background:var(--surface);border-radius:var(--r-s)}
.m-ord .hd{display:flex;justify-content:space-between;margin-bottom:8px;
font-size:12.5px;color:var(--ink-3)}
.m-ord .hd .st{color:var(--aqua);font-weight:600}
.m-ord .bd{display:flex;justify-content:space-between;align-items:center;
margin-bottom:9px;font-size:13.5px}
.m-ord .bd b{font-size:15px;font-variant-numeric:tabular-nums}
.m-ord .ft{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3)}
.m-ord .ft a{color:var(--aqua)}
/* 地址卡 */
.m-addr{margin-bottom:10px;padding:14px;background:var(--surface);border-radius:var(--r-s)}
.m-addr .nm{margin-bottom:6px;font-size:14px;font-weight:600}
.m-addr .nm span{margin-left:6px;font-size:12.5px;font-weight:300;color:var(--ink-3)}
.m-addr .df{margin-left:4px;padding:0 4px;border:1px solid var(--aqua);border-radius:3px;
font-size:11px;font-style:normal;color:var(--aqua)}
.m-addr .ad{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.m-addr .op{display:flex;gap:18px;margin-top:9px;font-size:12.5px}
.m-addr .op a{color:var(--ink-3)}
/* 通栏按钮 */
.m-out{width:100%;height:44px;border:1px solid var(--line);border-radius:22px;
background:var(--surface);font-size:14.5px;color:var(--ink-2)}
.m-out.primary{border-color:var(--aqua);background:var(--aqua);color:#fff;font-weight:600}
/* 确认弹窗（底部 sheet 里的样式） */
.m-cfm{padding:20px 18px 14px;text-align:center}
.m-cfm h3{margin:0 0 10px;font-size:16px}
.m-cfm p{margin:0 0 16px;font-size:13px;line-height:1.8;color:var(--ink-2)}
.m-cfm-op{display:flex;gap:12px}
/* 地址表单 */
.frm2{display:grid;gap:12px}
.fld2{display:block;font-size:13px}
.fld2>span{display:block;margin-bottom:5px;font-size:12.5px;color:var(--ink-3)}
.fld2 input{width:100%;height:40px;padding:0 12px;border:1px solid var(--line);
border-radius:8px;background:var(--surface-2);font-size:14px;color:var(--ink)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
/* ============ 功能增强（v14）============ */
/* 商品主图：卡片/行/详情头里的 ![]()
填满可视区，不拉伸变形 */
.vis .pimg, .m-hero .pimg{width:100%;height:100%;object-fit:cover;display:block}
/* 商品详情多图横滑轮播 */
.m-gallery{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.m-gallery::-webkit-scrollbar{height:0}
.m-gallery img{flex:none;width:78%;max-width:320px;border-radius:10px;background:var(--surface-2)}
.m-rich{font-size:13.5px;line-height:1.8;color:var(--ink-2);word-break:break-word}
.m-rich img{max-width:100%;border-radius:10px}
/* 付款方式单选 */
.m-pay{display:flex;flex-direction:column;gap:8px}
.m-pay-opt{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);
border-radius:10px;font-size:14px;color:var(--ink);cursor:pointer}
.m-pay-opt input{accent-color:var(--aqua);width:16px;height:16px}
.m-pay-opt.dis{opacity:.55;cursor:not-allowed}
.m-pay-opt.dis i{font-style:normal;font-size:11px;color:var(--ink-3);background:var(--surface-2);
padding:1px 6px;border-radius:8px;margin-left:2px}
/* 收款账户展示 */
.m-payee{margin-top:12px;padding:12px;background:var(--surface-2);border-radius:10px}
.m-payee h4{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.m-payee .r{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;
color:var(--ink-3);border-bottom:1px dashed var(--line)}
.m-payee .r:last-child{border-bottom:0}
.m-payee .r b{color:var(--ink);font-weight:500;text-align:right}
.m-payee .r .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.5px}
.m-payee img{display:block;width:140px;height:140px;object-fit:contain;margin-top:6px;background:#fff;border-radius:8px}
/* 站内留言气泡 */
.m-msg{max-width:82%;margin:10px 0;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.6}
.m-msg .who{font-size:11px;color:var(--ink-3);margin-bottom:2px}
.m-msg .txt{color:var(--ink);word-break:break-word}
.m-msg .at{font-size:11px;color:var(--ink-3);margin-top:4px;text-align:right}
.m-msg.mine{margin-left:auto;background:var(--aqua);border-bottom-right-radius:3px}
.m-msg.mine .txt,.m-msg.mine .at,.m-msg.mine .who{color:#fff}
.m-msg.cs{background:var(--surface-2);border-bottom-left-radius:3px}
/* 表单里的 textarea（退款原因 / 留言） */
.fld2 textarea,.m-cfm textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
border-radius:8px;background:var(--surface-2);font-size:14px;color:var(--ink);
font-family:inherit;resize:vertical;box-sizing:border-box}
.m-cfm textarea{margin-bottom:14px;text-align:left}
.m-cfm{text-align:center}
.m-cfm p{text-align:left}
/* ---- v16 收银台弹层 ---- */
.m-cashier{position:fixed;inset:0;background:rgba(20,40,45,.6);z-index:90;
display:flex;align-items:center;justify-content:center;padding:24px}
.m-cashier-box{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:340px;text-align:center}
.m-cashier-title{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:12px}
.m-cashier-qr{background:#fff;border:1px solid #e2ecef;border-radius:12px;padding:12px;
display:inline-flex;align-items:center;justify-content:center;min-width:200px;min-height:200px}
.m-cashier-qr svg{display:block}
.m-cashier-raw{margin-top:8px;font-size:10px;color:#87a4ae;word-break:break-all;line-height:1.5}
.m-cashier-tip{margin-top:10px;font-size:13px;color:var(--ink)}
.m-cashier-state{margin:8px 0;font-size:14px;color:#06737F;font-weight:600}
.m-cashier .btn{margin-top:10px;width:100%}
/* 物流轨迹（v18）：查单页展示物流节点 */
.tk-head { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.tk-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; line-height: 1.6; }
.tk-row:last-child { border-bottom: 0; }
.tk-t { color: var(--ink-3); white-space: nowrap; flex: 0 0 auto; }
.tk-d { color: var(--ink-2); }
/* 收款码并排（v20 请付款弹窗） */
.m-qrs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.m-qrs .r{display:flex;flex-direction:column;align-items:center;font-size:12px;color:var(--ink-2)}
.m-qrs .r img{width:150px;height:150px;object-fit:contain;margin-top:6px;background:#fff;border-radius:8px}
/* 批量下单行（v20） */
.bo-line{display:flex;gap:8px;margin-bottom:8px}
.bo-line .boSku{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:13px;background:var(--surface-2)}
.bo-line .boQty{width:72px;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:13px;background:var(--surface-2)}