html { font-size: min(calc(100vw / 53), 10px); }
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
background:#f5f6f8; color:#1a1a1a; -webkit-font-smoothing:antialiased;
}
img { display:block; }
.page { display:none; padding-bottom:calc(9rem + env(safe-area-inset-bottom, 0px)); }
.page.on { display:block; }
/* ===== 黄色头部 ===== */
.hd {
background:#ffe236;
padding:calc(env(safe-area-inset-top) + 1.6rem) 1.6rem 0;
}
.hd-row { display:flex; align-items:center; }
.hd-title { font-size:2.1rem; font-weight:900; color:#000; letter-spacing:.1rem; }
.hd-sep { color:#c9a800; font-weight:300; font-size:1.9rem; margin:0 1rem; }
.hd-sub { font-size:2.1rem; font-weight:800; color:#51470a; }
.hd-right { margin-left:auto; display:flex; align-items:center; gap:1rem; }
.hd-loc { display:flex; align-items:center; gap:.4rem; font-size:1.6rem; font-weight:700; color:#000; }
.hd-loc img { width:1.7rem; height:auto; }
.hd-loc svg { width:.8rem; height:1.3rem; }
.hd-chat img { width:2.9rem; height:auto; }
.hd-order-title { font-size:2.2rem; font-weight:900; color:#000; text-align:center; letter-spacing:.4rem; }
.hd-order-icons { position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:1.6rem; }
.hd-order-icons img.s { width:2.1rem; height:auto; }
.hd-order-icons img.m { width:3rem; height:auto; }
.hd-rel { position:sticky; top:0; z-index:30; }
/* ===== 搜索框 ===== */
.search {
margin:1.4rem 0 0; background:#fff; border-radius:999px;
display:flex; align-items:center; height:3.5rem; padding:0 .4rem 0 1.4rem;
}
.search > img.mag { width:1.7rem; height:auto; margin-right:1rem; }
.search > img.ai { width:2.2rem; height:auto; margin-right:.7rem; }
.search .ph { flex:1; font-size:1.5rem; color:#262626; overflow:hidden; white-space:nowrap; }
.search .btn {
background:#fede00; color:#111; font-size:1.5rem; font-weight:800;
border-radius:999px; padding:.75rem 2.4rem; flex-shrink:0;
}
/* ===== 首页分类 ===== */
.cat-sheet { background:#fff; border-radius:2rem 2rem 0 0; margin-top:1.2rem; padding:2rem 0.4rem .6rem; }
.cat-grid { display:grid; grid-template-columns:repeat(5,1fr); }
.cat { display:flex; flex-direction:column; align-items:center; }
.cat img { width:6.4rem; height:6.4rem; object-fit:contain; }
.cat span { font-size:1.5rem; color:#1a1a1a; margin-top:.7rem; }
.dots { display:flex; align-items:center; justify-content:center; gap:.6rem; padding:1.2rem 0 .4rem; }
.dots i { width:1.2rem; height:.4rem; border-radius:.2rem; background:#ffd100; }
.dots i.g { width:.4rem; background:#dcdcdc; }
/* ===== 通用卡片 ===== */
.card { background:#fff; border-radius:1.4rem; margin:1rem; padding:1.4rem; }
.row { display:flex; align-items:center; }
/* 拼好饭 / 神抢手 双卡 */
.duo { display:flex; gap:1rem; margin:1rem; }
.duo .card { flex:1; margin:0; padding:1.2rem; }
.duo-tt { display:flex; align-items:center; }
.duo-tt img.tt { height:2.1rem; width:auto; }
.duo-tt .sub1 { font-size:1.3rem; font-weight:700; color:#ff3c26; margin-left:.6rem; }
.duo-tt .sub2 { font-size:1.3rem; font-weight:700; color:#ff5219; margin-left:.6rem; }
.duo-item { display:flex; margin-top:1.2rem; }
.duo-item img { width:7.6rem; height:7.6rem; border-radius:.8rem; object-fit:cover; flex-shrink:0; }
.duo-item .inf { flex:1; min-width:0; margin-left:1rem; display:flex; flex-direction:column; justify-content:space-between; padding:.2rem 0; }
.duo-item .n1 { font-size:1.5rem; font-weight:700; color:#1a1a1a; }
.duo-item .n2 { font-size:1.3rem; color:#3d3d3d; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.price { display:flex; align-items:baseline; color:#ff3c26; }
.price .y { font-size:1.2rem; font-weight:800; }
.price .v { font-size:2rem; font-weight:800; }
.price .u { font-size:1.2rem; color:#ff6a1f; margin-left:.4rem; }
/* 极速送达横幅 */
.banner { display:flex; align-items:center; padding:1.2rem 1.4rem; }
.banner img { height:2rem; width:auto; }
.banner .sep { width:1px; height:1.6rem; background:#e3e3e3; margin:0 1.2rem; }
.banner .tx { font-size:1.5rem; font-weight:700; color:#1a1a1a; }
.banner .go {
margin-left:auto; background:#ff7a1f; color:#fff; font-size:1.4rem; font-weight:700;
border-radius:999px; padding:.8rem 1.8rem;
}
/* 附近商家 */
.nb-head { display:flex; align-items:center; }
.nb-head .t { font-size:1.9rem; font-weight:900; color:#1a1a1a; }
.nb-head .o { font-size:1.7rem; font-weight:800; color:#ff5219; margin-left:1.4rem; }
.nb-head .pill {
margin-left:1rem; border:1px solid #ff9d4d; color:#ff5219; font-size:1.2rem;
border-radius:999px; padding:.3rem 1rem;
}
.shop { display:flex; margin-top:1.6rem; }
.shop > img { width:11.8rem; height:11.8rem; border-radius:1rem; object-fit:cover; flex-shrink:0; }
.shop > img.tall { height:13.9rem; }
.shop .mid { flex:1; min-width:0; margin-left:1.1rem; }
.shop .tt-row { display:flex; align-items:flex-start; }
.shop .name { font-size:1.65rem; font-weight:800; color:#000; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shop .name.has-home { cursor:pointer; }
.shop .more { color:#c8c8c8; font-weight:800; font-size:1.6rem; line-height:1; padding:.2rem 0 .2rem .8rem; flex-shrink:0; }
.shop .meta { margin-top:.7rem; font-size:1.25rem; color:#828487; display:flex; align-items:center; }
.shop .meta .grn { color:#00b578; }
.shop .meta .mt { background:#f5d9a0; color:#8a4b16; font-size:1.1rem; border-radius:.3rem; padding:.2rem .6rem; margin-left:auto; }
.shop .dist { margin-top:.8rem; font-size:1.25rem; color:#828487; display:flex; }
.shop .dist .r { margin-left:auto; }
.shop .score { margin-top:1rem; display:flex; align-items:center; }
.shop .score .sc { font-size:1.6rem; font-weight:800; color:#ff4d0a; }
.shop .score img { width:1.7rem; height:auto; margin:0 .6rem; }
.shop .score .rk {
background:#fdf0e8; color:#a3571c; font-size:1.2rem; font-weight:600;
border-radius:.4rem; padding:.5rem .8rem; display:flex; align-items:center; overflow:hidden; white-space:nowrap;
}
.shop .score .rk svg { width:.7rem; height:1.1rem; margin-left:.4rem; flex-shrink:0; }
.shop .cps { margin-top:1.1rem; display:flex; align-items:center; }
.shop .cps .sq { font-size:1.4rem; font-weight:900; color:#ff2d6a; margin-right:.8rem; flex-shrink:0; }
.tag-pink { background:#fdecec; color:#f42a2a; font-size:1.25rem; border-radius:.4rem; padding:.3rem .8rem; margin-right:.8rem; white-space:nowrap; }
.tag-pink .big { font-weight:800; }
.shop2-head { margin-top:1.6rem; display:flex; }
.shop2-head .name { font-size:1.65rem; font-weight:800; color:#000; }
.score2 { margin-top:1rem; display:flex; align-items:center; flex-wrap:wrap; gap:.8rem; }
.score2 .sc { font-size:1.5rem; font-weight:800; color:#ff4d0a; }
/* 购物车浮球 & 资质 */
.fab {
position:fixed; right:1.4rem; bottom:16rem; z-index:30;
width:5.4rem; height:5.4rem; border-radius:50%; background:#fff;
box-shadow:0 .4rem 1.6rem rgba(0,0,0,.14);
display:none; align-items:center; justify-content:center;
}
.fab img { width:3rem; height:auto; }
.page.on .fab { display:flex; }
.zz {
position:fixed; right:.4rem; top:42%; z-index:25;
writing-mode:vertical-rl; font-size:1rem; color:#9a9a9a;
background:rgba(255,255,255,.85); border-radius:.6rem; padding:.8rem .2rem; letter-spacing:.2rem;
display:none;
}
.page.on .zz { display:block; }
/* ===== 订单页 ===== */
.tabs { display:flex; gap:1rem; padding:1.6rem 0 1.6rem; }
.tab {
position:relative; flex:1; height:3.6rem; border-radius:999px; background:#fdf495;
display:flex; align-items:center; justify-content:center;
font-size:1.65rem; font-weight:800; color:#1a1a1a;
}
.tab.on { background:#fffef2; }
.tab .bdg {
position:absolute; top:-1rem; right:.6rem; min-width:1.9rem; height:1.9rem; border-radius:999px;
background:#ff2b1d; color:#fff; font-size:1.2rem; font-weight:700;
display:flex; align-items:center; justify-content:center; padding:0 .4rem;
}
.tab .dt { position:absolute; top:.6rem; right:1.6rem; width:.7rem; height:.7rem; border-radius:50%; background:#ff2b1d; }
.od-shop { display:flex; align-items:center; }
.od-shop > img { width:3.7rem; height:3.7rem; border-radius:.6rem; object-fit:cover; flex-shrink:0; }
.od-shop .nm { font-size:1.65rem; font-weight:800; color:#000; margin-left:.9rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.od-shop .nm.has-home { cursor:pointer; }
.od-shop svg { width:.9rem; height:1.4rem; margin:0 .8rem 0 .6rem; flex-shrink:0; }
.od-shop .st { margin-left:auto; font-size:1.5rem; font-weight:600; color:#8a8b8f; flex-shrink:0; }
.od-shop .st.or { color:#ff9900; }
.od-tags { margin-top:1rem; display:flex; gap:.7rem; flex-wrap:wrap; }
.tag-red {
border:1px solid #f5b9b9; color:#f42a2a; font-size:1.25rem; border-radius:.4rem;
padding:.25rem .8rem; white-space:nowrap; background:#fff;
}
.tag-red .sep { color:#e8b2b2; margin:0 .2rem; }
.blue-row { margin-top:1.1rem; display:flex; gap:.8rem; align-items:center; }
.tag-blue { background:#dff3ff; color:#00a6ff; font-size:1.3rem; border-radius:.4rem; padding:.35rem .8rem; }
.od-body { margin-top:1.2rem; display:flex; }
.od-body .imgs { display:flex; gap:1rem; }
.od-body .im { width:auto; max-width:9.6rem; }
.od-body .im img { width:7.6rem; height:7.6rem; border-radius:.8rem; object-fit:cover; }
.od-body .im .n { font-size:1.4rem; color:#1a1a1a; margin-top:.7rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.od-body .big { flex:1; min-width:0; margin-left:1rem; font-size:1.55rem; color:#1a1a1a; line-height:1.45; }
.od-body .col { margin-left:auto; text-align:right; flex-shrink:0; }
.od-body .col .p { font-size:2rem; font-weight:800; color:#1a1a1a; }
.od-body .col .c { font-size:1.3rem; color:#828487; margin-top:.8rem; }
.od-rv {
margin-top:1.6rem; padding:1.1rem 1.2rem;
background:#fafafa; border-radius:1rem;
display:flex; align-items:center;
}
.od-rv .t { font-size:1.45rem; color:#1a1a1a; font-weight:700; }
.od-rv .t b { color:#ff9d00; font-weight:800; padding:0 .3rem; }
.od-rv .stars { margin-left:auto; display:flex; align-items:center; gap:.9rem; cursor:pointer; }
.od-rv .stars i { width:2.3rem; height:2.3rem; display:block; }
.od-rv .stars svg { display:block; width:100%; height:100%; }
.od-btns { margin-top:1.6rem; display:flex; justify-content:flex-end; gap:.9rem; }
.obtn {
height:3.2rem; border-radius:.8rem; border:1px solid #dcdcdc; background:#fff;
font-size:1.45rem; color:#1a1a1a; padding:0 1.6rem; display:flex; align-items:center;
}
.obtn.pri { background:#ffe12b; border-color:#ffe12b; font-weight:800; }
.mstores { margin-top:.4rem; }
.ms-head { display:flex; align-items:center; }
.ms-head .t { font-size:1.9rem; font-weight:900; }
.ms-head .m { margin-left:auto; font-size:1.35rem; color:#828487; display:flex; align-items:center; }
.ms-head .m svg { width:.8rem; height:1.2rem; margin-left:.3rem; }
.ms-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:1.4rem; }
.ms { min-width:0; }
.ms img { width:100%; aspect-ratio:1; border-radius:.8rem; object-fit:cover; }
.ms .n { font-size:1.25rem; color:#1a1a1a; margin-top:.5rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ms .c { font-size:1.2rem; color:#828487; margin-top:.3rem; }
.ms .c b { color:#ff4d0a; font-weight:700; }
/* ===== 底部导航 ===== */
.navbar {
position:fixed; left:0; right:0; bottom:0; z-index:40;
background:#fff; border-top:1px solid #f0f0f0;
display:grid; grid-template-columns:repeat(4,1fr);
padding:.7rem 0 calc(env(safe-area-inset-bottom) + .8rem);
}
.nav-i { display:flex; flex-direction:column; align-items:center; }
.nav-i img { height:3.6rem; width:auto; }
.nav-i span { font-size:1.3rem; color:#666; margin-top:.3rem; }
.nav-i.on span { color:#1a1a1a; font-weight:700; }
/* 多文件版：底部导航改用 a 链接，去掉浏览器默认样式 */
.navbar a { text-decoration:none; color:inherit; display:flex; }