/* 云梦鱼面 · 带一份回家（线上商城）——官网主页、扫码点单页、包装卡共用的一套界面。
   视觉与扫码点单页（guest.html 的 ui-apple）同一套设计变量、同一套组件形态。 */
.ys{--bg:#F4F4F1;--card:#FFFFFF;--fill:rgba(118,118,128,.12);--fill2:rgba(118,118,128,.2);--ink:#1D1D1F;--ink2:#3A3A3C;--sub:#6E6E73;--sep:rgba(60,60,67,.14);
  --brand:#B8341F;--brand-2:#C8432B;--brand-weak:rgba(184,52,31,.09);--ok:#1E7B3C;--ok-weak:rgba(52,199,89,.14);--warn:#A14B00;--warn-weak:rgba(255,141,40,.16);
  --blue:#0066CC;--bar:rgba(244,244,241,.78);--shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);--r:20px;
  --ease:cubic-bezier(.32,.72,0,1);--spring:cubic-bezier(.34,1.4,.64,1);--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px);--fs:1;--ys-off:0px;
  font:calc(17px*var(--fs))/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei UI",system-ui,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:0;text-align:left}
@media (prefers-color-scheme:dark){.ys{--bg:#0B0B0C;--card:#1C1C1E;--fill:rgba(118,118,128,.24);--fill2:rgba(118,118,128,.36);--ink:#F5F5F7;--ink2:#D1D1D6;--sub:#A1A1A6;--sep:rgba(84,84,88,.5);
  --brand:#E85A40;--brand-2:#E85A40;--brand-weak:rgba(232,90,64,.16);--ok:#2E9E52;--ok-weak:rgba(48,209,88,.16);--warn:#FFA056;--warn-weak:rgba(255,146,48,.18);--blue:#3B9EFF;--bar:rgba(22,22,24,.78);--shadow:none}}
.ys *,.ys *::before,.ys *::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html .ys button{font:inherit;color:inherit;border:0;border-radius:0;background:none;padding:0;margin:0;cursor:pointer;box-shadow:none;min-height:0;width:auto;text-transform:none;transition:transform .2s var(--ease),opacity .2s,background-color .25s;letter-spacing:0}
html .ys button:active{transform:scale(.96);opacity:.85}
html .ys input,html .ys textarea,html .ys select{font:inherit;font-size:max(16px,calc(16px*var(--fs)));color:var(--ink);letter-spacing:0}
.ys h2,.ys h3,.ys p{margin:0}
.ys .hide{display:none!important}

/* 底部条：和扫码点单页的购物车同一形态 */
.ys .ys-bar{position:fixed;left:0;right:0;bottom:var(--ys-off);z-index:9990;padding:10px 14px calc(10px + var(--sb));pointer-events:none}
.ys .ys-bar .in{pointer-events:auto;max-width:620px;margin:0 auto;display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);border-radius:22px;padding:8px 8px 8px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .45s var(--spring),opacity .3s}
.ys .ys-bar.empty .in{transform:translateY(160%);opacity:0;pointer-events:none}
.ys .ys-bar .sum{flex:1;min-width:0;text-align:left}
.ys .ys-bar .sum b{font-size:calc(20px*var(--fs));display:block;line-height:1.15}
.ys .ys-bar .sum span{font-size:calc(13px*var(--fs));opacity:.72}
.ys .ys-bar .go{background:var(--brand);color:#fff;font-weight:700;border-radius:16px;padding:13px 20px;font-size:calc(17px*var(--fs));white-space:nowrap}
.ys .ys-mine{position:fixed;left:14px;bottom:calc(var(--ys-off) + 14px + var(--sb));z-index:9989;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  background:var(--ok-weak);color:var(--ok);font-weight:650;font-size:calc(14.5px*var(--fs));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow)}
.ys .ys-mine.pend{background:var(--warn-weak);color:var(--warn)}
.ys .ys-mine i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:ys-pulse 1.6s infinite}
@keyframes ys-pulse{50%{opacity:.3}}
.ys .ys-bump{animation:ys-bump .35s var(--spring)}
@keyframes ys-bump{40%{transform:scale(1.1)}}

/* 弹层 */
.ys .ys-mask{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9995;opacity:0;pointer-events:none;transition:opacity .3s}
.ys .ys-mask.show{opacity:1;pointer-events:auto}
.ys .ys-sheet{position:fixed;left:0;right:0;bottom:0;z-index:9996;background:var(--bg);border-radius:22px 22px 0 0;max-height:92vh;height:92vh;display:flex;flex-direction:column;
  transform:translateY(105%);transition:transform .45s var(--ease);max-width:680px;margin:0 auto;box-shadow:0 -10px 40px rgba(0,0,0,.18)}
.ys .ys-sheet.show{transform:none}
.ys .ys-sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--sep);margin:8px auto 2px;flex:none}
.ys .ys-sheet .hd{display:flex;align-items:center;gap:10px;padding:8px 18px 10px;flex:none}
.ys .ys-sheet .hd b{flex:1;font-size:calc(20px*var(--fs));letter-spacing:-.2px}
.ys .ys-sheet .hd button{color:var(--blue);font-size:calc(16px*var(--fs))}
.ys .ys-sheet .bd{flex:1;overflow-y:auto;padding:0 16px 16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ys .ys-sheet .ft{flex:none;padding:10px 16px calc(12px + var(--sb));border-top:.5px solid var(--sep);background:var(--bar);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
@media (min-width:760px){.ys .ys-sheet{bottom:4vh;border-radius:26px;height:88vh;max-height:860px}}

.ys .ys-cta{display:block;width:100%;background:var(--brand);color:#fff!important;font-weight:700;border-radius:16px;padding:16px;font-size:calc(18px*var(--fs));text-align:center;text-decoration:none}
.ys .ys-cta:disabled{opacity:.45}
.ys .ys-cta.sec{background:var(--fill);color:var(--ink)!important}
.ys .ys-cta+.ys-cta{margin-top:10px}
.ys .ys-tot{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;padding:0 4px;gap:10px}
.ys .ys-tot span{color:var(--sub);font-size:calc(14px*var(--fs))}
.ys .ys-tot b{font-size:calc(26px*var(--fs));letter-spacing:-.4px}

/* 首卡：与扫码点单页欢迎卡同款 */
.ys .ys-hero{background:linear-gradient(135deg,var(--brand),#8E2614);color:#fff;border-radius:22px;padding:20px 18px 18px;position:relative;overflow:hidden}
.ys .ys-hero h2{font-size:calc(23px*var(--fs));letter-spacing:-.4px;margin:0 0 4px}
.ys .ys-hero p{opacity:.9;font-size:calc(15px*var(--fs))}
.ys .ys-steps{display:flex;gap:6px;margin-top:16px}
.ys .ys-steps div{flex:1;background:rgba(255,255,255,.16);border-radius:12px;padding:8px 4px;text-align:center;font-size:calc(12.5px*var(--fs));font-weight:600;line-height:1.25}
.ys .ys-steps i{display:block;font-style:normal;font-size:calc(17px*var(--fs));font-weight:800;margin-bottom:2px}
.ys .ys-sect{margin:22px 4px 10px;display:flex;align-items:baseline;gap:8px}
.ys .ys-sect h3{font-size:calc(20px*var(--fs));letter-spacing:-.3px}
.ys .ys-sect small{color:var(--sub);font-size:calc(13.5px*var(--fs))}

/* 商品卡 */
.ys .ys-list{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.ys .ys-it{display:flex;gap:12px;padding:12px 14px 12px 12px;align-items:center;position:relative}
.ys .ys-it+.ys-it::before{content:"";position:absolute;left:12px;right:0;top:0;border-top:.5px solid var(--sep)}
.ys .ys-it.out{opacity:.5}
.ys .ys-th{width:92px;height:92px;border-radius:16px;flex:none;overflow:hidden;position:relative;display:grid;place-items:center;color:#fff;
  background:radial-gradient(120% 90% at 20% 15%,#D9583D 0,#B8341F 45%,#7A1E10 100%)}
.ys .ys-th.g2{background:radial-gradient(120% 90% at 20% 15%,#4D3A2A 0,#2B2118 60%,#15100B 100%)}
.ys .ys-th.g3{background:radial-gradient(120% 90% at 20% 15%,#7C8A4E 0,#56632F 55%,#2F3818 100%)}
.ys .ys-th b{font-size:34px;font-weight:800;letter-spacing:-1px;font-family:"Songti SC","STSong","Noto Serif SC",serif;line-height:1}
.ys .ys-th small{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:11px;font-weight:600;opacity:.85}
.ys .ys-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ys .ys-tx{flex:1;min-width:0}
.ys .ys-nm{font-weight:650;font-size:calc(17.5px*var(--fs))}
.ys .ys-tag{display:inline-block;font-size:calc(12px*var(--fs));font-weight:650;padding:2px 7px;border-radius:7px;background:var(--brand-weak);color:var(--brand);vertical-align:2px;margin-left:4px}
.ys .ys-sp{color:var(--sub);font-size:calc(13.5px*var(--fs));margin-top:2px}
.ys .ys-ds{color:var(--ink2);font-size:calc(14px*var(--fs));margin-top:2px}
.ys .ys-pr{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ys .ys-pr b{font-size:calc(18px*var(--fs))}
.ys .ys-add{width:calc(38px*var(--fs));height:calc(38px*var(--fs));border-radius:50%;background:var(--brand);color:#fff;font-size:calc(24px*var(--fs));font-weight:500;line-height:1;display:grid;place-items:center;flex:none;box-shadow:0 3px 10px rgba(184,52,31,.3)}
.ys .ys-step{display:flex;align-items:center;gap:2px;background:var(--fill);border-radius:999px;padding:3px;flex:none}
.ys .ys-step button{width:calc(34px*var(--fs));height:calc(34px*var(--fs));border-radius:50%;font-size:calc(22px*var(--fs));line-height:1;display:grid;place-items:center;font-weight:500}
.ys .ys-step .p{background:var(--brand);color:#fff}
.ys .ys-step .m{background:var(--card)}
.ys .ys-step b{min-width:calc(28px*var(--fs));text-align:center;font-size:calc(17px*var(--fs))}
.ys .ys-step input{box-shadow:none;border-radius:0;margin:0;height:auto;width:calc(44px*var(--fs));text-align:center;border:0;background:transparent;font-weight:700;padding:0;outline:none}

/* 选项、分段、表单：和点单页“核对”弹层同款 */
.ys .ys-lbl{font-size:calc(13px*var(--fs));color:var(--sub);font-weight:600;margin:18px 4px 8px}
.ys .ys-grp{background:var(--card);border-radius:16px;overflow:hidden}
.ys .ys-opt{display:flex;align-items:center;width:100%;text-align:left;padding:14px 16px;background:var(--card);font-size:calc(17px*var(--fs));gap:12px}
.ys .ys-opt+.ys-opt{border-top:.5px solid var(--sep)}
.ys .ys-opt .ck{width:24px;height:24px;border-radius:50%;border:2px solid var(--sep);flex:none;display:grid;place-items:center;font-size:14px;color:#fff}
.ys .ys-opt.on .ck{background:var(--brand);border-color:var(--brand)}
.ys .ys-opt .t{flex:1;min-width:0}
.ys .ys-opt .t small{display:block;color:var(--sub);font-size:calc(13px*var(--fs))}
.ys .ys-opt .r{color:var(--ink);font-weight:650;white-space:nowrap}
.ys .ys-opt .r.sub{color:var(--sub);font-weight:500;font-size:calc(14px*var(--fs))}
.ys .ys-seg{display:flex;background:var(--fill);border-radius:12px;padding:3px}
.ys .ys-seg button{flex:1;padding:10px;border-radius:10px;font-weight:600;color:var(--sub)}
.ys .ys-seg button.on{background:var(--card);color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.ys .ys-f{display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--card);min-height:52px}
.ys .ys-f+.ys-f{border-top:.5px solid var(--sep)}
.ys .ys-f label{width:72px;flex:none;color:var(--ink);font-size:calc(16px*var(--fs))}
.ys .ys-f input,.ys .ys-f select,.ys .ys-f textarea{flex:1;min-width:0;width:auto;height:auto;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;padding:14px 0;-webkit-appearance:none;appearance:none}
.ys .ys-f select{color:var(--ink);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238e8e93' stroke-width='2'/%3E%3C/svg%3E") right 2px center no-repeat;padding-right:20px}
.ys .ys-f select:invalid{color:var(--sub)}
.ys .ys-f textarea{resize:none;min-height:64px;line-height:1.45}
.ys .ys-f.err{box-shadow:inset 3px 0 0 var(--brand)}
.ys .ys-note{color:var(--sub);font-size:calc(13px*var(--fs));line-height:1.55;margin:8px 6px 0}
.ys .ys-warn{background:var(--warn-weak);color:var(--warn);border-radius:12px;padding:10px 12px;font-size:calc(14px*var(--fs));margin-top:14px;line-height:1.5}
.ys .ys-okbox{background:var(--ok-weak);color:var(--ok);border-radius:12px;padding:10px 12px;font-size:calc(14px*var(--fs));margin-top:14px;line-height:1.5}
.ys .ys-wh{display:flex;gap:12px;align-items:center;margin-top:12px;padding:14px 16px;border-radius:16px;background:var(--card);width:100%;text-align:left;box-shadow:var(--shadow)}
.ys .ys-wh .tx{flex:1}
.ys .ys-wh small{display:block;color:var(--sub);font-size:calc(13px*var(--fs))}
.ys .ys-sw{width:51px;height:31px;border-radius:999px;background:var(--fill2);position:relative;flex:none;transition:background .25s}
.ys .ys-sw::after{content:"";position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .3s var(--spring)}
.ys .ys-wh.on .ys-sw{background:var(--ok)}
.ys .ys-wh.on .ys-sw::after{transform:translateX(20px)}

/* 进度页：和扫码点单页的“等号”页同款 */
.ys .ys-trk{position:fixed;inset:0;z-index:9998;background:var(--bg);overflow-y:auto;transform:translateY(100%);transition:transform .5s var(--ease);padding:calc(var(--st) + 14px) 18px calc(30px + var(--sb))}
.ys .ys-trk.show{transform:none}
.ys .ys-trk .cls{display:flex;justify-content:space-between;align-items:center;max-width:560px;margin:0 auto}
.ys .ys-trk .cls button{color:var(--blue);font-size:calc(16px*var(--fs));padding:6px 0}
.ys .ys-tk{max-width:560px;margin:10px auto 0;text-align:center}
.ys .ys-badge{width:84px;height:84px;border-radius:50%;margin:14px auto 14px;display:grid;place-items:center;font-size:40px;color:#fff;background:var(--warn);animation:ys-pop .5s var(--spring)}
.ys .ys-badge.ok{background:var(--ok)}.ys .ys-badge.rd{background:var(--brand)}.ys .ys-badge.no{background:#8e8e93}
@keyframes ys-pop{0%{transform:scale(.4);opacity:0}}
.ys .ys-tk h2{font-size:calc(26px*var(--fs));letter-spacing:-.4px}
.ys .ys-tk .lead{color:var(--sub);margin:8px 0 0;font-size:calc(16px*var(--fs));line-height:1.5}
.ys .ys-pay{background:var(--card);border-radius:22px;padding:20px;margin:20px 0 0;box-shadow:var(--shadow)}
.ys .ys-pay .k{color:var(--sub);font-size:calc(14px*var(--fs))}
.ys .ys-pay .v{font-size:calc(44px*var(--fs));font-weight:800;letter-spacing:-1px;margin:2px 0 4px}
.ys .ys-pay .qr{width:220px;max-width:70vw;aspect-ratio:1;margin:12px auto 6px;border-radius:16px;background:#fff;padding:10px;display:block}
.ys .ys-pay .code{display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:var(--brand-weak);color:var(--brand);font-weight:700;border-radius:12px;padding:9px 14px;font-size:calc(17px*var(--fs))}
.ys .ys-pay .code button{font-size:calc(14px*var(--fs));color:var(--blue);font-weight:600}
.ys .ys-pay ol{text-align:left;margin:14px 0 0;padding-left:22px;color:var(--ink2);font-size:calc(14.5px*var(--fs));line-height:1.6}
.ys .ys-prog{display:flex;align-items:center;margin:22px 0 4px}
.ys .ys-prog div{flex:1;text-align:center;font-size:calc(13px*var(--fs));color:var(--sub);position:relative}
.ys .ys-prog div i{display:block;width:14px;height:14px;border-radius:50%;background:var(--sep);margin:0 auto 6px;position:relative;z-index:1}
.ys .ys-prog div::before{content:"";position:absolute;top:6px;left:-50%;right:50%;height:2px;background:var(--sep)}
.ys .ys-prog div:first-child::before{display:none}
.ys .ys-prog div.on{color:var(--ink);font-weight:700}
.ys .ys-prog div.on i,.ys .ys-prog div.on::before{background:var(--ok)}
.ys .ys-prog div.cur i{box-shadow:0 0 0 5px var(--ok-weak)}
.ys .ys-rows{background:var(--card);border-radius:18px;margin:18px 0 0;text-align:left;overflow:hidden}
.ys .ys-rows div{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;font-size:calc(15.5px*var(--fs))}
.ys .ys-rows div+div{border-top:.5px solid var(--sep)}
.ys .ys-rows small{color:var(--sub)}
.ys .ys-rows span:last-child{text-align:right}
.ys .ys-acts{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.ys .ys-lnk{color:var(--sub);font-size:calc(15px*var(--fs));padding:10px}
.ys .ys-ord{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;background:var(--card)}
.ys .ys-ord+.ys-ord{border-top:.5px solid var(--sep)}
.ys .ys-ord .tx{flex:1;min-width:0}
.ys .ys-ord small{display:block;color:var(--sub);font-size:calc(13px*var(--fs))}
.ys .ys-pill{font-size:calc(13px*var(--fs));font-weight:650;padding:4px 9px;border-radius:999px;background:var(--fill);color:var(--sub);white-space:nowrap}
.ys .ys-pill.w{background:var(--warn-weak);color:var(--warn)}.ys .ys-pill.k{background:var(--ok-weak);color:var(--ok)}
.ys .ys-toast{position:fixed;left:50%;top:calc(var(--st) + 18px);transform:translate(-50%,-140%);z-index:10000;background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:14px;font-size:15px;font-weight:600;
  transition:transform .4s var(--spring);max-width:88vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.ys .ys-toast.show{transform:translate(-50%,0)}
.ys .ys-toast.err{background:var(--brand);color:#fff}
.ys .ys-sk{height:92px;border-radius:16px;background:linear-gradient(90deg,var(--fill),rgba(118,118,128,.05),var(--fill));background-size:200% 100%;animation:ys-sk 1.2s infinite;margin:10px 0}
@keyframes ys-sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.ys *{animation:none!important;transition:none!important}}