/* 辉利仓库 网上订货 · 京东式(2026-10-23 店主挑的) */
:root{--jd:#E1251B;--jd2:#F2270C;--jdbg:#FFF0EF;--bg:#F6F6F6;--ink:#1A1A1A;--muted:#666;--faint:#999;--line:#EEE;--green:#0F7B0F;--tabh:56px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
/* 字体: 鸿蒙黑体, 跟配货系统同一份(2026-10-25 店主「网站也换成跟配货系统一样的鸿蒙字体」; 文件 nginx /fonts/harmonyos/ 指到配货系统那里) */
body{background:#E9E9E9;font-family:"HarmonyOS Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);font-size:14px}
#app{max-width:560px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom))}
#app.nobar{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
input{font:inherit}
textarea,select{font-family:inherit}
.up{text-transform:uppercase}
[data-lang],[data-login],[data-add]{cursor:pointer}   /* iPhone: 没 href 的也要能点(点击是整页统一处理的) */
/* 连着点 + / - 、底栏时不要选中文字(手机上会跳出复制菜单) */
.step,.addc,.tabs,.dbar,.cbar,.sortbar,.fchips,.cside,.ck,.lang,.seg2{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img{display:block}

/* 顶栏 */
.jhead{background:linear-gradient(180deg,var(--jd2),var(--jd));color:#fff;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;position:sticky;top:0;z-index:20}
.jt{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:19px;font-weight:900}
.jt>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 西语店名长, 窄手机上放不下就省略, 不把中/ES 挤走 */
@media (max-width:370px){html[lang=es] .jt{font-size:16px}}   /* 窄手机上西语店名整个放得下 */
@media (max-width:340px){html[lang=es] .jt{font-size:14px}}
.lang{font-size:12px;font-weight:700;background:rgba(255,255,255,.22);border-radius:999px;padding:3px 4px;display:flex;gap:2px}
.lang span{padding:1px 8px;border-radius:999px;cursor:pointer}
.lang span.on{background:#fff;color:var(--jd)}
.jsb{margin-top:9px;background:#fff;border-radius:999px;padding:3px 3px 3px 12px;display:flex;align-items:center;gap:6px;color:var(--faint);font-size:14px}
.jsb input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px;color:var(--ink);padding:6px 0}
.jsb .go{background:linear-gradient(90deg,#FF4B2B,var(--jd));color:#fff;border-radius:999px;padding:7px 16px;font-weight:800;font-size:13px;flex:none}
.whead{background:#fff;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;position:sticky;top:0;z-index:20;border-bottom:.5px solid var(--line);display:flex;align-items:center;gap:8px}
.whead .bk{font-size:26px;line-height:1;padding:0 6px 2px 2px;color:#333;flex:none}
.whead .ttl{flex:1;font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.whead .jsb{margin:0;flex:1;background:#F2F2F2}
.whead .jsb .go{padding:6px 12px}
.whead .hbtn{flex:none;display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:#333;background:#F2F2F2;border-radius:999px;padding:5px 11px 5px 9px;white-space:nowrap}
.whead .hbtn i{font-style:normal;font-size:15px;line-height:1}
.chipq{background:#fff;color:#333;border-radius:999px;padding:2px 10px;font-weight:700;font-size:13px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;flex:none}

/* 首页 */
.redband{background:linear-gradient(180deg,var(--jd) 0,var(--jd) 40px,var(--bg) 40px);padding:0 10px}
/* 轮播广告(圣诞 / 清仓 / 新到 / 网上订货) */
.adwrap{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 3px 10px rgba(150,20,10,.14)}
.ads{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ads::-webkit-scrollbar{display:none}
.ad{flex:0 0 100%;scroll-snap-align:start;min-height:132px;position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;padding:10px 0 10px 16px}
.ad::before,.ad::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.11);pointer-events:none}
.ad::before{width:170px;height:170px;right:-40px;top:-70px}
.ad::after{width:96px;height:96px;left:40%;bottom:-56px}
.adt{position:relative;z-index:1;flex:1;min-width:0;padding:0 4px 8px 0}
.adtag{display:inline-block;font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px;background:#fff;color:var(--jd);margin-bottom:4px}
.adt b{display:block;font-size:20px;font-weight:900;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.18)}
html[lang=es] .adt b{font-size:18px}
.adt small{display:block;font-size:12px;line-height:1.35;margin-top:3px;opacity:.95;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.adt em{display:inline-block;font-style:normal;font-size:12px;font-weight:800;margin-top:7px;padding:3px 12px;border-radius:999px;background:#FFE27A;color:#7A2400}
.adimg{position:relative;z-index:1;flex:none;width:128px;height:112px}
.adimg span{position:absolute;background:#fff;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.adimg span img{width:88%;height:88%;object-fit:contain}
.adimg .p0{width:76px;height:76px;left:28px;top:20px;z-index:3}
.adimg .p1{width:54px;height:54px;left:2px;top:2px;transform:rotate(-8deg);z-index:2}
.adimg .p2{width:54px;height:54px;right:8px;bottom:4px;transform:rotate(7deg);z-index:2}
.adimg.svc span{font-size:28px}
.ad-xmas{background:linear-gradient(120deg,#B0101C 0%,#D8262F 50%,#0E7A43 100%)}
.ad-xmas .adtag{color:#0E7A43}
.ad-sp{background:linear-gradient(120deg,#FF7A00 0%,#F2270C 65%,#C90E0E 100%)}
.ad-new{background:linear-gradient(120deg,#6A3CF0 0%,#2F6BFF 100%)}
.ad-new .adtag{color:#3D4FF2}
.ad-svc{background:linear-gradient(120deg,#FFA000 0%,#FF6A2B 100%)}
.ad-svc .adtag{color:#E05A00}
.adots{position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:4px;z-index:2}
.adots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.55);transition:width .25s;cursor:pointer}
.adots i.on{width:14px;background:#fff}
.chan{margin:8px 10px 0;background:#fff;border-radius:10px;padding:10px 2px 6px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));row-gap:8px}
.ch{text-align:center;font-size:11.5px;color:#333;padding:0 2px}
.ch .ci{width:46px;height:46px;border-radius:50%;margin:0 auto 3px;background:#fff;border:1px solid #F0E6E4;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ch .ci img{width:76%;height:76%;object-fit:contain}
.ch .ci.all{background:var(--jdbg);font-size:20px;color:var(--jd)}
.ch span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec{margin:8px 10px 0;background:#fff;border-radius:10px;padding:9px 10px}
.sec .h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.sec .h b{font-size:16px;font-weight:900;font-style:italic;color:var(--jd);flex:none;white-space:nowrap}
.sec .h b.n{font-style:normal;color:#222}
.sec .h a{margin-left:auto;font-size:12px;color:var(--faint);flex:none}
.sec .h small{font-size:11px;color:#999;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 该补货了 / 同行在买: 价格下面橙色两行写为什么, 图右上角「+」直接加购物车 */
.strip a.wn{position:relative}
.strip small.why{color:#C2410C;white-space:normal;line-height:1.3;height:26px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sadd{position:absolute;right:0;top:44px;width:24px;height:24px;border-radius:50%;background:var(--jd);color:#fff;font-size:17px;line-height:24px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.sadd i{position:absolute;top:-6px;right:-6px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:#FF9500;color:#fff;font-size:10px;line-height:15px;font-style:normal}
.strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.strip::-webkit-scrollbar{display:none}
.strip a{flex:none;width:78px;text-align:center}
.strip img{width:78px;height:70px;object-fit:contain;background:#fff;margin:0 auto}
.strip b{display:block;color:var(--jd);font-size:14px;margin-top:2px}
.strip small{display:block;font-size:10px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec{text-align:center;margin:12px 0 8px;font-size:15px;font-weight:900;color:#333}
.rec span{border-bottom:3px solid var(--jd);padding:0 4px 1px}
.rec small{display:block;margin-top:6px;font-size:11.5px;font-weight:400;color:var(--faint)}
.feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 7px}
@media (min-width:480px){.feed{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gc{background:#fff;border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.gc .im{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center}
.gc .im img{width:92%;height:92%;object-fit:contain}
.gc .tx{padding:6px 8px 8px;display:flex;flex-direction:column;flex:1}
.gc .nm{font-size:12.5px;line-height:1.35;height:34px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-transform:uppercase;word-break:break-word}
.gc.out .im img{opacity:.35}
.gc.out .pr b,.gc.out .pr em{color:#AAA}
.tg{display:inline-block;font-size:10px;color:#fff;background:var(--jd);border-radius:3px;padding:0 4px;line-height:15px;margin-right:3px;vertical-align:1px;text-transform:none;font-weight:700}
.tg.x{background:#BBB}
.pr{display:flex;align-items:baseline;gap:3px;margin-top:5px}
.pr b{font-size:18px;color:var(--jd);font-weight:800}
.pr em{font-style:normal;font-size:11px;color:var(--jd);font-weight:700}
.ms{font-size:11px;color:var(--faint);margin-top:2px;display:flex;justify-content:space-between;align-items:center;gap:4px}
.ms span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addc{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#FF4B2B,var(--jd));color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;line-height:1;position:relative}
.addc.dis{background:#DDD}
.addc i{position:absolute;top:-6px;right:-6px;font-style:normal;background:#fff;color:var(--jd);border:1px solid var(--jd);border-radius:999px;font-size:10px;line-height:14px;padding:0 4px;font-weight:800}

/* 底栏 */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:560px;margin:0 auto;display:flex;border-top:.5px solid #E5E5E5;background:#fff;height:calc(var(--tabh) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;text-align:center;font-size:11px;color:#555;padding-top:6px;position:relative}
.tabs a b{display:block;font-size:20px;line-height:1.2;font-weight:400;filter:grayscale(1);opacity:.7}
.tabs a.on{color:var(--jd);font-weight:700}
.tabs a.on b{filter:none;opacity:1}
.tabs .badge{position:absolute;top:2px;left:56%;background:var(--jd);color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:0 5px;line-height:15px}

/* 分类 */
.cw{display:flex;height:calc(100vh - 58px - var(--tabh) - env(safe-area-inset-bottom) - env(safe-area-inset-top))}
@supports (height:100dvh){.cw{height:calc(100dvh - 58px - var(--tabh) - env(safe-area-inset-bottom) - env(safe-area-inset-top))}}
.cside{width:92px;flex:none;background:var(--bg);overflow-y:auto;scrollbar-width:none}
.cside::-webkit-scrollbar{display:none}
/* 左边一栏: 短名字、每格一样高、细线隔开(店主 1027 挑 B); 西语长的最多两行 */
.cside a{display:flex;align-items:center;justify-content:center;height:48px;padding:0 4px;font-size:13px;color:#333;text-align:center;position:relative;line-height:1.2}
.cside a span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.cside a span.lg{font-size:11.5px}
.cside a+a{border-top:.5px solid #EBEBEB}
.cside a.on{background:#fff;color:var(--jd);font-weight:800}
.cside a.on:before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 3px 3px 0;background:var(--jd)}
.cmain{flex:1;background:#fff;padding:8px;overflow-y:auto}
.cban{border-radius:8px;background:linear-gradient(110deg,#FFE3DE,#FFF6F3);padding:10px 76px 10px 12px;position:relative;margin-bottom:8px;min-height:66px;display:block}
.cban b{color:#B3160E;font-size:16px;font-weight:900;display:block}
.cban small{color:#9A4A3A;font-size:11px}
.cban img{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:54px;height:54px;object-fit:contain;background:#fff;border-radius:8px}
.ct{font-size:13px;font-weight:800;margin:6px 2px 8px;display:flex;justify-content:space-between}
.ct span{font-weight:500;color:var(--faint);font-size:11px}
/* 分类页横幅里的白色按钮「▦ 查看全部 N 样 ›」(店主 1027 挑 A: 原来横幅下面另一整条跟横幅写的重复, 合成一块) */
.cban .vall{display:flex;width:fit-content;align-items:center;gap:5px;margin-top:8px;background:linear-gradient(90deg,#FF4B2B,var(--jd));color:#fff;font-size:15px;font-weight:800;border-radius:999px;padding:8px 18px 8px 16px;box-shadow:0 3px 10px rgba(225,37,27,.4)}   /* 1027 店主挑 A: 原来白底红字在粉横幅上不显眼, 改实心红、白字、大一号 */
.cban .vall em{font-style:normal;font-size:15px;line-height:1}
.cban .vall i{font-style:normal}
@media (max-width:360px){.cban{padding-right:56px}.cban img{width:40px;height:40px}.cban .vall{font-size:12.5px;padding:5px 10px}.cban .vall i{display:none}}   /* 320 宽小手机: 图小一点、去掉 ▦, 按钮还是一行 */
/* 没分小类的大类右边直接摆货(店主 1027「情人节显示空的」): 用列表页一样的卡片, 窄的那一栏两列 */
.ct a{font-weight:500;color:var(--faint);font-size:11px}
.cmain #lst.cgl{padding:0;background:transparent;gap:6px}
.cmain #lst.cgl .li{box-shadow:inset 0 0 0 .5px #ECECEC}
.subg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 6px}
.sbt{text-align:center;display:block}
.sbt .im{height:62px;display:flex;align-items:center;justify-content:center}
.sbt .im img{max-width:100%;max-height:100%;object-fit:contain}
.sbt .im.all{font-size:26px;color:var(--jd);background:var(--jdbg);border-radius:8px}
.sbt b{display:block;font-size:11.5px;font-weight:500;color:#333;margin-top:3px;line-height:1.2;max-height:28px;overflow:hidden;word-break:break-word}
.sbt small{display:block;font-size:10px;color:var(--faint)}

/* 列表 */
.sortbar{display:flex;background:#fff;font-size:13px;color:#333;border-bottom:.5px solid var(--line);position:sticky;top:var(--hh,54px);z-index:15}
.sortbar a{flex:1;text-align:center;padding:10px 0}
.sortbar a.on{color:var(--jd);font-weight:800}
.fchips{display:flex;gap:6px;padding:7px 10px;background:#fff;overflow-x:auto;scrollbar-width:none;border-bottom:.5px solid var(--line)}
.fchips::-webkit-scrollbar{display:none}
.fchips a{flex:none;background:#F5F5F5;border-radius:6px;padding:4px 10px;font-size:12px;color:#333;white-space:nowrap}
.fchips a.on{background:var(--jdbg);color:var(--jd);font-weight:700;box-shadow:inset 0 0 0 .5px #F4B8B0}
/* 小牌子那一排两头左右箭头(店主 1027「没有箭头」): 有鼠标的才出, 翻到头那边的藏起来(.off) */
.fcw{position:relative}
.fcb{display:none;position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 1px 7px rgba(0,0,0,.25);align-items:center;justify-content:center;z-index:2;cursor:pointer}
.fcb svg{width:16px;height:16px}
.fcb.l{left:4px}
.fcb.r{right:4px}
.fcb:hover{box-shadow:0 2px 11px rgba(0,0,0,.32)}
@media (hover:hover){.fcb{display:flex}}
.fcb.off{display:none}
.rinfo{font-size:12px;color:var(--muted);padding:8px 12px 4px}
.li{display:flex;gap:10px;background:#fff;padding:10px;border-bottom:.5px solid var(--line)}
.li .im{flex:none;width:108px;height:108px;border-radius:8px;background:#fff;border:.5px solid #F0F0F0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.li .im img{width:94%;height:94%;object-fit:contain}
.li .x{flex:1;min-width:0;display:flex;flex-direction:column}
.li .nm{font-size:13px;line-height:1.35;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.li .sp{font-size:11px;color:var(--faint);margin-top:4px}
.bc{font-variant-numeric:tabular-nums;letter-spacing:.3px}
.bc b{color:#444;font-weight:700}
.gc .bcl{font-size:11px;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv .v .bc b{color:inherit}
.li .bt{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:6px}
.li .bt .pr{margin-top:0}
.li .bt .pr b{font-size:19px}
.li.out .im img{opacity:.35}
.li.out .nm,.li.out .pr b,.li.out .pr em{color:#AAA}
/* 商品列表(分类 / 搜索 / 新到货): 大图卡片, 手机一排 2、宽一点的屏一排 3、电脑一排 5(店主 1025 挑 B); 「该补货了」这类带原因的还是一行一样 */
#lst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:7px;background:var(--bg)}
@media (min-width:480px){#lst{grid-template-columns:repeat(3,minmax(0,1fr))}}
#lst .li{flex-direction:column;border:0;border-radius:8px;gap:6px;padding:8px}
#lst .li .im{width:100%;height:auto;aspect-ratio:1/1;border:0}
#lst .li .nm{min-height:35px}
.nog{font-size:12px;color:#999;background:#F2F2F2;border-radius:999px;padding:4px 10px;font-weight:700;white-space:nowrap}
.more{text-align:center;color:var(--faint);font-size:12px;padding:14px 0 18px}
.empty{text-align:center;color:var(--faint);padding:50px 20px;font-size:14px;line-height:1.7}
.empty .big{font-size:40px;margin-bottom:6px}
.empty a.btn{display:inline-block;margin-top:12px;border:1px solid var(--jd);color:var(--jd);border-radius:999px;padding:6px 20px}
.hintbar{margin:8px 10px 0;background:#FFF7E6;color:#9A5A00;border-radius:8px;padding:8px 10px;font-size:13px}

/* 详情 */
#dt{max-width:560px;margin:0 auto;min-height:100%;background:var(--bg);padding-bottom:calc(70px + env(safe-area-inset-bottom));position:relative}
#dt>.mhead{display:none}
#dt>.fx{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.32);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:400;z-index:5}
.dimg{background:#fff;aspect-ratio:1/1;max-height:62vh;width:100%;display:flex;align-items:center;justify-content:center;position:relative}
.dimg img{max-width:100%;max-height:100%;object-fit:contain}
/* 上一样 / 下一样: 白色小圆钮 + 淡阴影, 右下角第几样(店主 1026 挑 B) */
.dimg .nvb{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;z-index:2;cursor:pointer}
.dimg .nvb.l{left:10px}
.dimg .nvb.r{right:10px}
.dimg .nvb:hover{background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.26)}
.dimg .ncnt{position:absolute;bottom:12px;right:12px;background:rgba(255,255,255,.92);box-shadow:0 1px 6px rgba(0,0,0,.12);color:#555;font-size:12px;padding:2px 10px;border-radius:999px}
.card{background:#fff;border-radius:10px;margin:8px 8px 0;padding:10px 12px}
.dp{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.dp b{font-size:28px;color:var(--jd);font-weight:900}
.dp em{font-style:normal;color:var(--jd);font-weight:800;font-size:14px}
.dp small{color:var(--faint);font-size:12px;margin-left:auto}
.dsub{display:inline-block;font-size:12px;color:#B3160E;background:var(--jdbg);border-radius:6px;padding:3px 8px;margin-top:6px}
.dnm{font-size:16px;font-weight:800;margin-top:8px;line-height:1.35;text-transform:uppercase;word-break:break-word}
.kv>div{display:flex;padding:10px 0;font-size:13px;border-bottom:.5px solid var(--line);align-items:center;gap:8px}
.kv>div:last-child{border:0}
.kv span.k{min-width:46px;color:var(--faint);flex:none;white-space:nowrap}
.kv .v{flex:1;min-width:0;line-height:1.4}
.kv a.v{color:#333}
.kv i{font-style:normal;color:#CCC}
.step{display:inline-flex;align-items:center;border:.5px solid #DDD;border-radius:6px;overflow:hidden;font-size:13px;font-weight:700;background:#fff;flex:none}
.step button{width:30px;height:28px;display:flex;align-items:center;justify-content:center;color:#333;background:#F7F7F7;font-size:16px}
.step button:disabled{color:#CCC}
.step em{font-style:normal;min-width:46px;text-align:center}
/* 包数直接改 + 常用包数 + 金额(商品窗口), 购物车点包数弹「要几包」(店主 1026 挑 A+B) */
.step .qin{width:58px;height:28px;margin:0 2px;border:1.5px solid var(--jd);border-radius:6px;text-align:center;font:inherit;font-size:16px;font-weight:800;color:var(--ink);background:#fff;outline:none;padding:0;-webkit-user-select:text;user-select:text}
#qv b{display:block;color:var(--jd);font-size:12px;font-weight:700;margin-top:2px}
.kv>div.qrow{display:block;padding:0 0 10px}
.qch{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.qch::-webkit-scrollbar{display:none}
.qch span{flex:none;padding:4px 12px;border-radius:999px;background:#F6F6F6;font-size:13px;color:#333;cursor:pointer}
.qch span.on{background:var(--jdbg);color:var(--jd);font-weight:700}
/* 散拿(店主 1026): 买法 整包 / 散拿 两个按钮、橙色「散拿」小牌子、散拿的说明 */
.kv>div.qmode{padding:8px 0}
.seg3{display:flex;gap:6px;margin-left:auto}
.seg3 a{padding:5px 12px;border-radius:999px;border:1px solid #DDD;font-size:13px;color:#555;cursor:pointer;white-space:nowrap}
.seg3 a.on{border-color:var(--jd);color:var(--jd);background:var(--jdbg);font-weight:700}
.incart{font-size:12px;color:var(--muted);margin-top:6px}
.lnote{font-size:12px;color:#B26A00;background:#FFF6E5;border-radius:6px;padding:4px 8px;margin-top:8px}
.cit .step em.js-q{cursor:pointer;margin:0 2px;border:1px solid #E5E5E5;border-radius:5px;background:#fff;line-height:22px}
.qmask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:flex-end;justify-content:center}
.qsheet{background:#fff;width:100%;max-width:560px;border-radius:16px 16px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
.qsheet h4{margin:0 0 4px;font-size:16px}
.qsheet .nm{font-size:12px;color:var(--faint);margin-bottom:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbox{display:flex;align-items:center;justify-content:center;gap:10px}
.qbox button{width:44px;height:44px;border-radius:50%;background:#F2F2F2;font-size:22px;color:#333}
.qbox button:disabled{color:#CCC}
.qbox .in{width:130px;height:52px;border:2px solid var(--jd);border-radius:10px;display:flex;align-items:center;justify-content:center;gap:4px}
.qbox .in input{width:70px;border:0;outline:none;text-align:center;font:inherit;font-size:28px;font-weight:800;background:transparent;color:var(--ink);padding:0}
.qbox .in small{font-size:14px;color:var(--muted)}
.qeq{text-align:center;color:var(--jd);font-size:14px;margin:10px 0 14px}
.qchips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
.qchips span{padding:6px 14px;border-radius:999px;background:#F6F6F6;font-size:14px;color:#333;cursor:pointer}
.qchips span.on{background:var(--jdbg);color:var(--jd);font-weight:700}
.qbtns{display:flex;gap:10px}
.qbtns button{flex:1;padding:12px 0;border-radius:999px;font-size:15px;font-weight:800}
.qbtns .c{background:#F2F2F2;color:#666}
.qbtns .o{background:linear-gradient(90deg,#FF4B2B,var(--jd));color:#fff}
@media (min-width:700px){.qmask{align-items:center}.qmask .qsheet{border-radius:16px;max-width:420px}}
.hs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.hs::-webkit-scrollbar{display:none}
/* 同类的货左右白钮(电脑 / 有鼠标的才出; 手机手指滑)+ 标题右边「全部 ›」(店主 1027) */
.hsw{position:relative}
/* 加入购物车飞的小图(店主 1027) */
.flyx{position:fixed;z-index:400;pointer-events:none;width:0;height:0}
.flyy{position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#fff;border:2px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.flyy img{width:100%;height:100%;object-fit:contain}
.hsb{display:none;position:absolute;top:48px;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 2px 10px rgba(0,0,0,.22);align-items:center;justify-content:center;z-index:2;cursor:pointer}
.hsb.l{left:-4px}
.hsb.r{right:-4px}
.hsb:hover{background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.28)}
@media (hover:hover){.hsb{display:flex}}
.smore{margin-left:auto;font-size:12px;font-weight:400;color:var(--faint)}
.hs a{flex:none;width:96px}
.hs img{width:96px;height:96px;object-fit:contain;background:#fff;border:.5px solid #F0F0F0;border-radius:6px}
.hs .n{font-size:11px;line-height:1.3;height:29px;overflow:hidden;margin-top:3px;text-transform:uppercase;word-break:break-word}
.hs b{color:var(--jd);font-size:13px}
.dbar{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:560px;margin:0 auto;background:#fff;border-top:.5px solid #E5E5E5;padding:6px 8px calc(6px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:4px}
.dbar .mi{width:46px;text-align:center;font-size:10px;color:#555;position:relative;flex:none}
.dbar .mi b{display:block;font-size:19px;font-weight:400}
.dbar .mi em{position:absolute;top:-2px;right:4px;font-style:normal;background:var(--jd);color:#fff;font-size:9px;border-radius:999px;padding:0 4px;line-height:13px;font-weight:800}
.dbar .b2{flex:1;display:flex;gap:6px}
.dbar .b2 button{flex:1;padding:12px 0;border-radius:999px;font-size:14px;font-weight:800;color:#fff;text-align:center}
.dbar .b2 button:disabled{background:#CCC!important}
.y1{background:linear-gradient(90deg,#FFB21E,#FF8A00)}
.y2{background:linear-gradient(90deg,#FF4B2B,var(--jd))}
/* 「查看购物车」右上角的件数红点(1027 左边小购物车去掉了, 店主挑 A) */
#bn{position:relative}
#bn .bnb{position:absolute;top:-6px;right:14px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#fff;color:var(--jd);font-size:12px;font-weight:800;line-height:20px;box-shadow:0 1px 4px rgba(0,0,0,.25);font-style:normal}

/* 购物车 */
.ck{width:20px;height:20px;border-radius:50%;border:1.5px solid #CCC;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:900}
.ck.on{background:var(--jd);border-color:var(--jd)}
.shop{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px;padding:2px 0 6px}
.cit{display:flex;gap:8px;align-items:center;padding:9px 0;border-top:.5px solid #F3F3F3}
.cit:first-of-type{border-top:0}
.cit .im{flex:none;width:60px;height:60px;border-radius:8px;background:#fff;border:.5px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cit .im img{width:94%;height:94%;object-fit:contain}
.cit .x{flex:1;min-width:0}
.cit .nm{font-size:13.5px;text-transform:uppercase;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
/* 购物车清单式(店主 1027 挑 A): 名字下面一行灰字「单价 · 每包几个」, 右边这一行多少钱 + 加减 */
.cit .sp{font-size:11.5px;color:#999;margin-top:3px}
.cit .sp .lz{font-style:normal;color:#B26A00;font-weight:700}
.cit .rt{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cit .rt b{font-size:16px;color:var(--jd);font-weight:800;white-space:nowrap}
.cit.out{opacity:.55}
.del{font-size:12px;color:var(--faint);padding:2px 4px}
.cbar{position:fixed;left:0;right:0;bottom:calc(var(--tabh) + env(safe-area-inset-bottom));z-index:29;max-width:560px;margin:0 auto;background:#fff;border-top:.5px solid #E5E5E5;padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:13px}
.cbar .tot{margin-left:auto;text-align:right;font-size:12px;color:#333}
.cbar .tot b{font-size:19px;color:var(--jd);white-space:nowrap}   /* 西语按钮字长, 合计的 € 别掉到下一行 */
.cbar .tot small{display:block;font-size:10px;color:#999}
.cbar .go{background:linear-gradient(90deg,#FF4B2B,var(--jd));color:#fff;border-radius:999px;padding:10px 20px;font-weight:800;font-size:15px;flex:none}
.cbar .go:disabled{background:#CCC}
.cartpad{height:64px}

/* 我的 */
.mehead{background:linear-gradient(160deg,#FF4B2B,var(--jd));color:#fff;padding:calc(20px + env(safe-area-inset-top)) 16px 22px}
.av{display:flex;align-items:center;gap:12px}
.av .p{width:58px;height:58px;border-radius:50%;background:#fff;color:var(--jd);font-size:26px;display:flex;align-items:center;justify-content:center;font-weight:900;flex:none}
.av b{font-size:19px;display:block}
.av small{font-size:12px;opacity:.92}
.row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:.5px solid var(--line);font-size:14px}
.row:last-child{border:0}
.row .r{color:var(--faint);font-size:13px}
.seg2{display:flex;gap:6px}
.seg2 a{border:1px solid #DDD;border-radius:999px;padding:4px 12px;font-size:13px;color:#555}
.seg2 a.on{border-color:var(--jd);color:var(--jd);background:var(--jdbg);font-weight:700}
.mebtns{display:flex;gap:10px;margin-top:16px}
.mebtns a{flex:1;text-align:center;border:1.5px solid #fff;border-radius:999px;padding:10px 0;font-weight:800;font-size:15px;color:#fff}
.mebtns a.w{background:#fff;color:var(--jd)}
/* 「我的」宫格式(店主 1027 挑 A): 订单四格压在红头下面一点、常用图标格子、打电话给仓库 */
.ocard{background:#fff;margin:-12px 10px 0;border-radius:14px;padding:12px 4px 10px;position:relative;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.ocard .ot{display:flex;justify-content:space-between;align-items:center;padding:0 10px 10px;font-size:15px;font-weight:800}
.ocard .ot a{font-size:12.5px;color:#999;font-weight:500}
.ost{display:flex}
.ost a{flex:1;text-align:center;font-size:12.5px;color:#333;position:relative}
.ost a i,.megrid a i{display:block;font-style:normal;font-size:26px;line-height:1.25}
.ost a em{position:absolute;top:-4px;left:58%;background:var(--jd);color:#fff;font-style:normal;font-size:11px;font-weight:800;border-radius:999px;padding:0 6px;line-height:17px}
.megrid{background:#fff;margin:10px;border-radius:14px;padding:14px 4px 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px}
.megrid .gt{grid-column:1/-1;font-size:15px;font-weight:800;padding:0 10px 2px}
.megrid a{text-align:center;font-size:12.5px;color:#333;cursor:pointer;padding:0 2px;word-break:break-word;line-height:1.3}
.mecall{background:#fff;margin:10px;border-radius:14px;padding:12px;display:flex;align-items:center;gap:12px;color:#222}
.mecall i{font-style:normal;font-size:28px;flex:none}
.mecall b{display:block;font-size:15px}
.mecall small{display:block;font-size:12.5px;color:#888}
.mecall span{margin-left:auto;flex:none;background:linear-gradient(90deg,#FF4B2B,var(--jd));color:#fff;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:800}
.melo{display:block;text-align:center;color:#999;font-size:14px;padding:6px 0 14px}

/* 第二步: 没登录看不到价格 / 登录注册 */
.seep{font-size:12.5px;color:var(--jd);font-weight:700;border:1px solid #F4B8B0;background:var(--jdbg);border-radius:999px;padding:2px 9px;white-space:nowrap;cursor:pointer}
.seep.big{font-size:16px;padding:6px 14px}
.loginbar{margin:8px 10px 0;background:#FFF7E6;border:1px solid #FFD591;border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:#8A5A00;cursor:pointer}
.loginbar b{color:var(--jd);white-space:nowrap}
.auth{background:#fff;min-height:calc(100vh - 54px);padding:6px 20px 30px}
.auth .logo{text-align:center;margin:14px 0 16px}
.auth .logo b{display:block;font-size:24px}
.auth .logo small{color:var(--faint);font-size:12.5px}
.atabs{display:flex;gap:24px;justify-content:center;margin-bottom:8px}
.atabs a{font-size:17px;font-weight:800;color:#BBB;padding-bottom:5px;border-bottom:3px solid transparent}
.atabs a.on{color:#111;border-bottom-color:var(--jd)}
.fld{display:block;border-bottom:1px solid #EEE;padding:9px 0 6px}
.fld span{display:block;font-size:12px;color:var(--faint);margin-bottom:2px}
.fld input{width:100%;border:0;outline:0;font-size:16px;padding:4px 0;background:transparent;color:var(--ink)}
.fld input:disabled{color:#999}
.fld input::placeholder{color:#C4C4C4;font-size:14px}
.fld.bad{border-bottom-color:var(--jd)}
.fld.bad span{color:var(--jd)}
.ferr{display:block;font-style:normal;font-size:12px;color:var(--jd);margin-top:2px}
.rq{font-style:normal;color:var(--jd)}
.rqn{font-size:12px;color:var(--faint);margin:4px 0 6px}
.fld input[name=store],.fld input[name=address],.fld input[name=nif]{text-transform:uppercase}
.two{display:flex;gap:14px}
.two .fld{flex:1;min-width:0}
.aerr{color:var(--jd);font-size:13px;min-height:18px;margin-top:10px}
.abtn{width:100%;margin-top:6px;background:linear-gradient(90deg,#FF4B2B,var(--jd));color:#fff;border-radius:999px;padding:13px 0;font-weight:800;font-size:16px}
.abtn:disabled{opacity:.6}
.abtn2{background:#fff;color:var(--jd);border:1.5px solid var(--jd);margin-top:14px}   /* 找回密码: 发验证码 */
.fgl{color:var(--jd);font-weight:700}
.anote.fgnote{text-align:left;margin:12px 0 2px}
.anote{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.6;text-align:center}
.btnw{width:100%;background:#fff;border:1px solid var(--jd);color:var(--jd);border-radius:999px;padding:10px 0;font-weight:800;font-size:14px}

/* 第三步: 确认订单 / 我的订单 / 订单进度 */
.addr{background:#fff;margin:8px 8px 0;border-radius:10px;padding:12px 60px 14px 12px;position:relative;overflow:hidden;line-height:1.5}
.addr:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(-45deg,var(--jd) 0 10px,#fff 10px 15px,#3A7CF5 15px 25px,#fff 25px 30px)}
.addr .t{font-size:11px;color:#fff;background:var(--jd);border-radius:3px;padding:1px 5px;margin-right:6px;font-weight:700}
.addr b{font-size:15px}
.addr .m{font-size:14px;font-weight:700;margin-top:5px;transition:opacity .2s}
.addr .m .noad{font-weight:400;font-size:13px;color:#C26B00;text-transform:none}
.addr .m .noad.k{color:var(--muted)}
.addr-edit{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:13px}
.lab0{font-size:13px;color:#333;font-weight:700;margin-bottom:8px}
.seg{display:flex;gap:8px}
.seg span{flex:1;text-align:center;padding:9px 0;border-radius:8px;font-size:14px;font-weight:700;color:#333;background:#F5F5F5;border:1px solid #F5F5F5;cursor:pointer}
.seg span.on{background:var(--jdbg);color:var(--jd);border-color:#F4B8B0}
.dnote{font-size:12px;color:var(--faint);margin-top:6px}
.dnote div+div{margin-top:3px}
.dnote b{color:var(--jd);font-weight:700}
.dnote b.ok{color:#1A8F3C}
.pmo{font-size:12px;color:#B26A00;margin-top:4px;line-height:1.35}   /* 满5箱-5%: 出送货单时减(店主 1028) */
#dt .pmo{font-size:13.5px;margin-top:8px}
.pmt{font-size:12px;color:#B26A00;text-align:right;padding:0 0 8px}
.pmo.ok{color:#1A8F3C;font-weight:600}
.cit .js-lt s{display:block;font-size:12px;color:#AAA;font-weight:400;text-align:right}
.pmv{color:#1A8F3C}
.ivat{font-size:11px;color:var(--faint);font-weight:400;margin-left:4px}   /* 结算页合计后面「含 IVA」(店主 1028) */
.throw{display:flex;gap:6px;flex-wrap:wrap}
.throw div{width:58px;height:58px;border-radius:6px;background:#fff;border:.5px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.throw div img{width:90%;height:90%;object-fit:contain}
.throw div i{position:absolute;right:2px;bottom:2px;font-style:normal;background:rgba(0,0,0,.6);color:#fff;font-size:10px;border-radius:999px;padding:0 5px;line-height:15px}
.throw .more8{font-size:13px;color:var(--faint);background:#F7F7F7}
.card textarea{width:100%;border:1px solid #EEE;border-radius:8px;padding:8px 10px;font:inherit;font-size:14px;resize:vertical;outline:0;margin-bottom:4px}
.card textarea:focus{border-color:#F4B8B0}
.lab{font-size:13px;color:#333;display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:.5px solid var(--line)}
.lab:last-child{border:0}
.lab span:first-child{color:#999;flex:none}
.stc{flex:none;font-size:12px;font-weight:800;border-radius:999px;padding:3px 9px;white-space:nowrap}
.stc.wait{background:#FFF4CE;color:#9D5D00}
.stc.picking{background:#E8F3FD;color:#0067B8}
.stc.done{background:#DFF6DD;color:var(--green)}
.stc.cancel{background:#F2F2F2;color:#999}
.ord{display:block}
.mini{display:flex;gap:10px;align-items:center}
.mini .im{width:56px;height:56px;border-radius:6px;background:#fff;border:.5px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mini .im img{width:90%;height:90%;object-fit:contain}
.mini .x{flex:1;min-width:0;font-size:12px;color:#666;line-height:1.5}
.mini .x b{display:block;font-size:14px;color:#111}
.okban{margin:8px 8px 0;background:#DFF6DD;border:1px solid #9FD89F;color:#0B5A0B;border-radius:10px;padding:12px;font-size:13px;line-height:1.6}
.okban b{display:block;font-size:17px}
.sban{background:linear-gradient(90deg,#FF4B2B,var(--jd));color:#fff;padding:14px 16px;margin-top:8px}
.sban.done{background:linear-gradient(90deg,#1E9E3A,var(--green))}
.sban.cancel{background:#999}
.sban.wait{background:linear-gradient(90deg,#F5A623,#E58A00)}
.sban b{font-size:19px;display:block}
.sban small{font-size:12px;opacity:.92}
.tl{position:relative;padding-left:24px}
.tl .e{position:relative;padding:0 0 14px}
.tl .e:before{content:'';position:absolute;left:-18px;top:5px;width:10px;height:10px;border-radius:50%;background:#CCC}
.tl .e:after{content:'';position:absolute;left:-14px;top:17px;bottom:-3px;width:2px;background:#EEE}
.tl .e:last-child{padding-bottom:0}
.tl .e:last-child:after{display:none}
.tl .e.on:before{background:var(--jd);box-shadow:0 0 0 4px #FDDAD7}
.tl .e.ok:before{background:var(--green)}
.tl .e b{font-size:14px;display:block}
.tl .e.on b{color:var(--jd)}
.tl .e small{font-size:12px;color:#999}
.oli{display:flex;gap:8px;align-items:center;padding:7px 0;border-top:.5px solid #F3F3F3}
.oli:first-of-type{border-top:0}
.oli img{width:46px;height:46px;object-fit:contain;border:.5px solid var(--line);border-radius:6px;background:#fff}
.oli .x{flex:1;min-width:0}
.oli .nm{font-size:12px;text-transform:uppercase;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 中文版商品名用中文名, 不再全转大写(不然 mm / ml 变成 MM / ML); 西语版照旧大写 (店主 1025) */
html[lang=zh] .gc .nm,html[lang=zh] .li .nm,html[lang=zh] .dnm,html[lang=zh] .hs .n,html[lang=zh] .cit .nm,html[lang=zh] .oli .nm{text-transform:none}
.oli small{font-size:11px;color:#999}
.lst{flex:none;font-size:12px;font-weight:800;white-space:nowrap}
.lst.g{color:var(--green)} .lst.w{color:#0067B8} .lst.sh{color:var(--jd)} .lst.n{color:#999}
.obar{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:560px;margin:0 auto;background:#fff;border-top:.5px solid #E5E5E5;padding:8px 10px calc(8px + env(safe-area-inset-bottom));display:flex;gap:10px}
.ob{flex:1;text-align:center;border:1px solid #DDD;border-radius:999px;padding:10px 0;font-size:14px;font-weight:800;color:#333;background:#fff}
.ob.o{border-color:var(--jd);color:var(--jd)}

/* 弹层 / 提示 */
#toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;border-radius:8px;padding:9px 16px;font-size:14px;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s;max-width:80vw;text-align:center}
#toast.on{opacity:1}
.mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;display:flex;align-items:center;justify-content:center;padding:24px}
.dlg{background:#fff;border-radius:14px;max-width:340px;width:100%;padding:20px 18px 14px;text-align:center}
.dlg b{display:block;font-size:17px;margin-bottom:8px}
.dlg p{margin:0 0 14px;color:#555;line-height:1.6;font-size:14px}
.dlg button{width:100%;background:linear-gradient(90deg,#FF4B2B,var(--jd));color:#fff;border-radius:999px;padding:11px 0;font-weight:800}
.skel{background:linear-gradient(90deg,#F2F2F2,#FAFAFA,#F2F2F2);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* 登录页「用邮箱验证码登录」按钮(店主 1025) */
.codebtn{display:block;text-align:center;text-decoration:none;margin:0 0 12px;line-height:44px;padding:0}
/* 没登录下单的联系方式(店主 1025) */
.gform .lab0{display:flex;justify-content:space-between;align-items:center}
.glogin{font-size:12px;font-weight:400;color:var(--jd);cursor:pointer}
.gform .fld:last-child{border-bottom:0}
/* 公司信息(「我的」页最下面)+ 法律页面 + 注册 / 下单那行「即表示同意」(店主 1025) */
.lgfoot{padding:22px 16px 10px;text-align:center;color:var(--faint);font-size:12px;line-height:1.9}
.lgfoot b{color:var(--muted);font-size:13px}
.lgfoot a{color:var(--muted)}
.lgfoot .lk{margin-top:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px}
.lgfoot .lk a{text-decoration:underline}
.lgfoot .cp{margin-top:6px;font-size:11px}
.lgfoot .grp{margin-top:12px}
.lgfoot .grp i{display:block;font-style:normal;font-weight:700;color:var(--muted)}
.lgfoot .grp .lk{margin-top:2px}
.lgfoot .co{margin-top:14px;font-size:11px;line-height:1.7}
.legal{padding:12px 16px 20px}
.legal h3{font-size:15px;font-weight:800;margin:18px 0 6px}
.legal p,.legal li{font-size:13.5px;line-height:1.75;color:#333;margin:4px 0}
.legal ul{padding-left:18px;margin:4px 0}
.legal a{color:var(--jd)}
.legal table{width:100%;border-collapse:collapse;margin:8px 0;font-size:12.5px}
.legal th,.legal td{border:.5px solid #DDD;padding:6px;text-align:left;vertical-align:top;line-height:1.5}
.legal th{background:#F6F6F6}
.lgup{font-size:12px;color:var(--faint)}
.agree{font-size:12px;color:var(--faint);text-align:center;margin:10px 8px 0;line-height:1.6}
.agree a{color:var(--jd)}
mark.todo{background:#FFF3B0;color:#8A6D00;padding:0 4px;border-radius:3px;font-weight:700}
/* Miravia 样子(店主 1027 挑「样子照 Miravia、留 + 和底下 5 个按钮」, 先做商品列表; 只有 ?mv=1 打开过的机器才用): 红头 + 白条 ‹ 返回、灰色方块小类牌子、两列卡片(灰底大图右下角红色「+」/ 名字一行 / 红色价格欧分小一号) */
#app.mvl{background:#fff}
.mvh{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,var(--jd2),var(--jd));color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 12px}
.mvh .t{display:flex;align-items:center;gap:12px}
.mvh .mn{font-size:22px;line-height:1;color:#fff}
.mvh .lg{font-size:19px;font-weight:700;color:#fff;white-space:nowrap}
.mvh .ic{margin-left:auto;display:flex;gap:16px;font-size:21px}
.mvh .ic a{color:#fff;position:relative;line-height:1}
.mvh .bag em{position:absolute;top:-7px;right:-10px;background:#fff;color:var(--jd);font-style:normal;font-size:11px;font-weight:800;border-radius:999px;padding:0 5px;line-height:16px}
.mvb{margin-top:10px;background:#fff;color:#333;border-radius:999px;display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:15px}
.mvb .bk{font-size:22px;line-height:1;color:#333;padding-right:4px}
.mvb span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvb .mvcat{flex:none;display:flex;align-items:center;gap:4px;margin:-4px 0 -4px -8px;padding:5px 11px 5px 9px;border-radius:999px;background:var(--jdbg);color:var(--jd);font-size:14px;font-weight:600;white-space:nowrap}   /* 「‹」前面「▦ 分类」(店主 1027) */
.mvb .mvfam{color:var(--jd);font-weight:600}   /* 标题里「文具系列」能点, 红字(店主 1027) */
#app.mvl .fchips{background:#fff;border-bottom:0;padding:12px 14px;gap:8px}
#app.mvl .fchips a{border-radius:0;background:#F2F2F2;font-size:14px;padding:7px 12px;box-shadow:none;font-weight:400;color:#1A1A1A}
#app.mvl .fchips a.on{background:var(--jd);color:#fff;font-weight:600}
#app.mvl .rinfo{padding:2px 14px 8px;font-size:13px;color:#888}
#lst.mvg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px;padding:0 14px 10px;background:#fff}
@media (min-width:480px){#lst.mvg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mvc{display:block;color:#1A1A1A}
.mvc .im{background:#F5F5F5;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.mvc .im img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.mvc .mvt{position:absolute;left:0;bottom:0;background:#888;color:#fff;font-size:11px;padding:2px 6px}
.mvc .im .addc{position:absolute;right:6px;bottom:6px;width:34px;height:34px;font-size:24px;box-shadow:0 2px 6px rgba(225,37,27,.35)}
.mvc .n{font-size:14px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvp{color:var(--jd);font-weight:800;margin-top:4px;display:flex;align-items:baseline}
.mvp b{font-size:20px}
.mvp small{font-size:13px}
.mvp i{font-style:normal;font-size:12px;color:#888;font-weight:400;margin-left:3px}
.mvc .s{font-size:12px;color:#888;margin-top:2px}
.mvc.out .im img{opacity:.4}
.mvc.out .mvp{color:#AAA}
/* Miravia 样子的商品窗口(同上, 只有 html.mv): 灰底大图、红色大价格欧分小一号、一段一段细线隔开、方框按钮和包数、底下浅紫「加入购物车」+ 黑色「查看购物车」、不要首页小图标 */
html.mv #dt{background:#fff}
html.mv #dt .dimg{background:#F5F5F5}
html.mv #dt .dimg img{mix-blend-mode:multiply}
html.mv #dt .card{border-radius:0;margin:0;padding:14px 16px;border-bottom:1px solid #EEE;box-shadow:none}
html.mv #dt .dp{gap:0}
html.mv #dt .dp b{font-size:32px}
html.mv #dt .dp small{font-size:17px;color:var(--jd);font-weight:800;margin-left:0}
html.mv #dt .dp em{color:#888;font-weight:400;font-size:14px;margin-left:3px}
html.mv #dt .dsub{background:none;color:#888;padding:0;font-size:14px;border-radius:0}
html.mv #dt .dnm{font-weight:500;font-size:17px}
html.mv #dt .tg{border-radius:0}
html.mv #dt .seg3 a{border-radius:0}
html.mv #dt .seg3 a.on{border-color:var(--jd);color:var(--jd);background:var(--jdbg)}
html.mv #dt .step{border-radius:0}
html.mv #dt .step .qin{border-radius:0;border-color:var(--jd)}
html.mv #dt .qch span{border-radius:0;background:#F2F2F2}
html.mv #dt .qch span.on{background:var(--jd);color:#fff}
html.mv #dt .lnote{border-radius:0}
html.mv #dt .hs a img{background:#F5F5F5;mix-blend-mode:multiply}
html.mv #ov .dbar a.mi{display:none}
html.mv #ov .dbar .b2{gap:10px}
html.mv #ov .dbar .b2 button{border-radius:2px;font-weight:600;font-size:16px}
html.mv #ov #ac{background:var(--jdbg);color:var(--jd);box-shadow:inset 0 0 0 1.5px #F4B8B0}
html.mv #ov #bn{background:linear-gradient(90deg,#FF4B2B,var(--jd));color:#fff}
html.mv #ov #bn .bnb{background:#fff;color:var(--jd)}
/* Miravia 样子的分类 / 购物车 / 结算 / 我的(店主 1027「首页不改其他 6 页都改, 颜色要跟我们首页搭配」, 只有 html.mv): 白底、去掉圆角卡片改细线隔开、灰底方块图、方角按钮, 颜色都用首页的红 */
html.mv #app.pg-cat .whead,html.mv #app.pg-cart .whead,html.mv #app.pg-co .whead{background:linear-gradient(180deg,var(--jd2),var(--jd));border-bottom:0;color:#fff}
html.mv #app.pg-cat .whead .jsb{background:#fff}
html.mv #app.pg-cart .whead .ttl,html.mv #app.pg-co .whead .ttl,html.mv #app.pg-co .whead .bk{color:#fff;font-weight:600}
/* 大类横幅: 浅红底 + 大图(店主 1027 问「会太单调吗」, 看了 现在 / A / B 挑 A; 原来白底、图 54 小, 电脑上右边一大片空) */
html.mv #app.pg-cat .cban{background:linear-gradient(110deg,#FFE3DE,#FFF6F3);border-radius:8px;padding:14px 84px 14px 14px;margin-bottom:10px}
html.mv #app.pg-cat .cban b{font-size:20px;font-weight:900;color:#B3160E}
html.mv #app.pg-cat .cban small{color:#9A4A3A;font-size:12px}
html.mv #app.pg-cat .cban img{width:64px;height:64px;right:12px;background:#fff;border-radius:8px}
html.mv #app.pg-cat .cban .vall{border-radius:2px}
@media (max-width:360px){html.mv #app.pg-cat .cban{padding:12px 58px 12px 10px}html.mv #app.pg-cat .cban img{width:42px;height:42px;right:8px}}   /* 320 宽小手机: 按钮还是一行 */
html.mv #app.pg-cat .sbt .im{background:#F5F5F5;height:auto;aspect-ratio:1/1;border-radius:0}
html.mv #app.pg-cat .sbt .im img{width:86%;height:86%;mix-blend-mode:multiply}
html.mv #app.pg-cat .sbt .im.all{background:#F5F5F5;color:var(--jd)}
html.mv .cmain #lst.mvg{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 8px;padding:0;background:transparent}
html.mv #app.pg-cart,html.mv #app.pg-co{background:#fff}
html.mv #app.pg-cart .card,html.mv #app.pg-co .card,html.mv #app.pg-co .addr{border-radius:0;margin:0;box-shadow:none;border-bottom:8px solid #F5F5F5}
html.mv #app.pg-cart .loginbar,html.mv #app.pg-co .loginbar{border-radius:0}
html.mv #app.pg-cart .cit .im{background:#F5F5F5;border:0;border-radius:0}
html.mv #app.pg-cart .cit .im img{mix-blend-mode:multiply}
html.mv #app.pg-cart .step,html.mv #app.pg-cart .step em.js-q{border-radius:0}
html.mv #app.pg-cart .cbar .go,html.mv #app.pg-co .cbar .go{border-radius:2px}
html.mv #app.pg-co .seg span{border-radius:0;background:#fff;border:1px solid #DDD}
html.mv #app.pg-co .seg span.on{border:2px solid var(--jd);background:var(--jdbg);color:var(--jd)}
html.mv #app.pg-co .throw div{border-radius:0;background:#F5F5F5;border:0}
html.mv #app.pg-co .throw div img{mix-blend-mode:multiply}
html.mv #app.pg-co textarea{border-radius:0}
html.mv #app.pg-me .mebtns a{border-radius:2px}
html.mv #app.pg-me .ocard{border-radius:0;margin:-12px 12px 0}
html.mv #app.pg-me .megrid{border-radius:0;margin:10px 12px;padding:0;grid-template-columns:1fr;row-gap:0}
html.mv #app.pg-me .megrid .gt{padding:12px 14px 8px}
html.mv #app.pg-me .megrid a{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 14px;border-top:1px solid #EEE;font-size:15px}
html.mv #app.pg-me .megrid a i{display:inline;font-size:20px;line-height:1}
html.mv #app.pg-me .megrid a:after{content:'›';margin-left:auto;color:#BBB;font-size:18px}
html.mv #app.pg-me .mecall{border-radius:0;margin:10px 12px}
html.mv #app.pg-me .mecall span{border-radius:2px}
/* 店主 1027 照「改了以后」: 细线图标 + Lato 字体(首页内容不套) + 字变细(分类菜单样子试过, 换回左边一栏) */
html.mv .ico{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
html.mv #app:not(.pg-home),html.mv #ov{font-family:Lato,"HarmonyOS Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
html.mv .tabs a b{filter:none;opacity:1;font-size:22px;line-height:1.2}
html.mv .mvh .ic{gap:20px;font-size:24px}
html.mv .mvh .mn{font-size:24px}
html.mv #app:not(.pg-home) .card .shop,html.mv #app:not(.pg-home) .lab0,html.mv .ocard .ot,html.mv .megrid .gt{font-weight:500}
html.mv .mvc .n,html.mv #dt .dnm,html.mv .cit .nm{font-weight:400}
html.mv .mvp b,html.mv #dt .dp b,html.mv #app:not(.pg-home) .cbar .tot b,html.mv .cit .rt b{font-weight:900}
html.mv .ocard .ost a i,html.mv .megrid a i,html.mv .mecall i{color:var(--jd)}
html.mv .ocard .ost a i .ico{width:1.05em;height:1.05em}
html.mv .empty .big .ico{width:1.3em;height:1.3em;stroke-width:1.3}
/* 商品列表「大图 / 列表」切换(店主 1027 ⑤): 「188 样」右边两个方块; 列表看法一行一样, 右边「+」加过变「− N 包 +」 */
.rbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tgl{display:flex;border:1px solid #DDD;flex:none;background:#fff}
.tgl a{padding:5px 9px;color:#999;display:flex;font-size:16px;cursor:pointer}
.tgl a.on{background:var(--jd);color:#fff}
#lst.mvr{display:block;padding:0;background:#fff}
.mvrow{display:flex;gap:10px;padding:9px 14px;border-bottom:1px solid #F0F0F0;align-items:center;color:var(--ink)}
.mvrow .im{width:84px;height:84px;background:#F5F5F5;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mvrow .im img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.mvrow .x{flex:1;min-width:0;display:flex;flex-direction:column}
.mvrow .n{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.mvrow .s{font-size:12px;color:#888;margin-top:2px}
.mvrow .s b{color:var(--ink);font-weight:700}
.mvrow .mvp{margin-top:2px}
.mvrow .addc{width:34px;height:34px;font-size:24px}
.mvrow.out .im img{opacity:.4}
.mvrow.out .mvp{color:#AAA}
.mvt2{flex:none;font-size:12px;color:#999;border:1px solid #DDD;padding:3px 8px}
.lqty{flex:none}
.cstp{display:flex;align-items:center;justify-content:space-between;width:124px;height:34px;background:#fff;border:1.5px solid var(--jd);border-radius:999px}
.cstp i{font-style:normal;width:34px;text-align:center;color:var(--jd);font-size:22px;font-weight:700;line-height:31px;cursor:pointer;flex:none}
.cstp em{font-style:normal;font-weight:800;font-size:13.5px;color:var(--ink);border-bottom:1.5px dashed #F4B8B0;cursor:pointer;white-space:nowrap}
/* 电脑大屏幕(1100px 以上): 加宽、整体放大、一排放更多(2026-10-25 店主挑 B); 手机、平板上照旧 */
@media (min-width:1100px){
  html{zoom:1.25}
  #app,.tabs,.cbar,.obar{max-width:1000px}
  .chan{grid-template-columns:repeat(10,minmax(0,1fr))}
  .feed{grid-template-columns:repeat(5,minmax(0,1fr))}
  .subg{grid-template-columns:repeat(6,minmax(0,1fr))}
  /* 分类页两栏的高: 整体放大 1.25 倍时 100vh 也跟着放大, 原来比窗口高出四分之一(左边一栏下面压在底栏下、整页能上下滚), 按 1÷1.25 = 80vh 算回来(1027); 整页最矮一屏 #app、登录页 .auth 同理 */
  .cw{height:calc(80vh - 58px - var(--tabh))}
  #app{min-height:80vh}
  .auth{min-height:calc(80vh - 54px)}
  @supports (height:100dvh){.cw{height:calc(80dvh - 58px - var(--tabh))}}
  #lst{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:8px}
  #lst.mvg{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 14px;padding:0 14px 12px}
  html.mv .cmain #lst.mvg{grid-template-columns:repeat(4,minmax(0,1fr));padding:0}
  html.mv #app.pg-cat .cban{padding:22px 190px 22px 26px;min-height:150px}   /* 电脑: 横幅高一点、字大、图 140 */
  html.mv #app.pg-cat .cban b{font-size:26px}
  html.mv #app.pg-cat .cban img{width:140px;height:140px;right:26px}
  #lst.mvr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;padding:0 4px}
  .auth{max-width:480px;margin:0 auto}
  #ov{background:rgba(0,0,0,.5);padding:26px 0}
  /* 商品窗口: 跟列表一样宽, 左边图、右边价格和数量、同类的货放下面(店主 1025 挑 B);
     1026 店主要像 Saldaña 那样的小窗口: 浮在列表上面(上下留空、圆角阴影), 顶上一行分类 › 商品名, × 在窗口右上角, 按钮条在窗口里最下边 */
  #dt{max-width:1000px;display:grid;grid-template-columns:400px minmax(0,1fr);align-content:start;min-height:0;padding-bottom:0;border-radius:14px;box-shadow:0 12px 48px rgba(0,0,0,.35)}
  #dt>.mhead{display:block;grid-column:1/-1;padding:12px 56px 4px 16px;font-size:13px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #dt>.mhead b{color:#333;font-weight:700}
  #dt>.fx{top:10px;background:#F2F2F2;color:#555}
  #dt>.dimg{margin:8px 0 0 8px;border-radius:10px;width:auto;max-height:none;overflow:hidden}
  #dt>.dright{align-self:start}
  #dt>.card,#dt>.empty{grid-column:1/-1}
  #ov .dbar{position:sticky;bottom:0;grid-column:1/-1;max-width:none;margin:10px 0 0;border-radius:0 0 14px 14px}
  .lgfoot .grps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;text-align:left;max-width:820px;margin:0 auto}
  .lgfoot .grps .lk{justify-content:flex-start}
}