/* 滚轮选择器 / 底部弹层 / 全站悬浮填生辰入口 / 字号放大 + 安卓兜底
   放在各页 <style> 之后加载，所以同权重规则会覆盖页面内联样式。 */

/* ---------- 1. 安卓兜底：防横向切缺 ---------- */
/* 注意：html/body 上不要写 overflow-x（hidden 会破坏 position:sticky，clip 会让整页无法滚动）。
   横向溢出改为从根因上治：fixed 光晕容器自带 overflow:hidden；图片与长串分别限宽、自动换行；
   宽表格在窄屏自己横向滚动。 */
html, body { max-width: 100%; }
*, *::before, *::after { min-width: 0; }
img, video, canvas, svg { max-width: 100%; height: auto; }
table { max-width: 100%; }
@media (max-width: 820px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { white-space: normal !important; }
  .pad { padding: 18px 14px; }
  .wrap { padding: 0 16px; }
  h1 { font-size: clamp(26px, 7.4vw, 34px) !important; line-height: 1.18 !important; }
  h2 { font-size: clamp(21px, 5.6vw, 27px) !important; }
}
/* 老安卓不认 backdrop-filter：给一层接近的实色底，避免发虚看不清 */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .glass, .bar.glass { background: linear-gradient(150deg, rgba(255,255,255,.96), rgba(255,255,255,.9)); }
}

/* ---------- 2. 字号放大（目标用户年长，正文不低于 16.5px） ---------- */
body { font-size: 17px; line-height: 1.62; }
.glass p, .card p, .lead { font-size: 17px !important; }
.card h3, .glass h3 { font-size: 19.5px !important; }
.sub, .formhint, .src, footer { font-size: 15px !important; }
.eyebrow { font-size: 12.5px !important; }
.tag { font-size: 13.5px !important; }
table { font-size: 16px !important; }
th { font-size: 12.5px !important; }
.bar nav { font-size: 15px !important; }
.brand { font-size: 13px !important; }
button, .btn { font-size: 16px !important; }
.ib-row label, .field label { font-size: 12.5px !important; }
@media (max-width: 760px) {
  body { font-size: 17.5px; }
  .glass p, .card p, .lead { font-size: 17.5px !important; }
  .card h3, .glass h3 { font-size: 20px !important; }
}

/* ---------- 3. 滚轮选择器 ---------- */
.wheelbox { display: flex; gap: 6px; align-items: stretch; justify-content: center; }
.wheel { position: relative; flex: 1 1 0; min-width: 72px; }
.wheel .wh-title {
  text-align: center; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #7A5A1E; font-weight: 700; margin-bottom: 4px;
}
.wheel .wh-scroll {
  height: calc(var(--item-h, 46px) * 5); overflow-y: auto; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; position: relative;
  border-radius: 16px; background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.9);
}
.wheel .wh-scroll::-webkit-scrollbar { display: none; }
.wheel .wh-pad { height: calc(var(--item-h, 46px) * 2); }
.wheel .wh-item {
  display: flex; align-items: center; justify-content: center;
  height: var(--item-h, 46px); scroll-snap-align: center; width: 100%;
  background: none; border: 0; padding: 0; font: inherit; font-size: 20px; font-weight: 600;
  color: #0B1220; opacity: .32; cursor: pointer; transition: opacity .15s ease;
}
.wheel .wh-item.on { opacity: 1; }
.wheel .wh-frame {
  position: absolute; left: 0; right: 0; top: calc(var(--item-h, 46px) * 2); height: var(--item-h, 46px);
  border-top: 1px solid rgba(200,161,90,.55); border-bottom: 1px solid rgba(200,161,90,.55);
  pointer-events: none;
}

/* 小屏：弹层里的滚轮矮一点 + 保存按钮固定在底部，保证一眼能看到 */
@media (max-width: 820px) {
  .bs-sheet { max-height: 96vh; padding: 16px 14px 12px; }
  .bs-sheet .wheel .wh-item { font-size: 19px; }
  #bs-date .wheel, #bs-time .wheel { --item-h: 40px; }
  .bs-actions {
    position: sticky; bottom: 0; margin: 16px -14px -12px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,253,248,0), #FFFDF8 34%);
  }
  .bs-actions .btn { padding: 15px 22px; }
  .bs-pill { font-size: 16.5px !important; }
}
/* 弹层打开时压住其它悬浮元素 */
body:has(.bs-sheet.open) .bs-pill { opacity: 0; pointer-events: none; }

/* 长串（链接、英文专名）不撑破窄屏 */
p, li, td, th, h1, h2, h3, .lead, .sub, .bs-note { overflow-wrap: anywhere; }

/* 弹层里的正面批语 */
.bs-praise p { font-size: 17px; line-height: 1.62; margin: 0 0 10px; color: #2A3446; }
.bs-praise .bs-hint { background: rgba(200,161,90,.16); border-radius: 14px; padding: 12px 14px; color: #7A5A1E; }
.praise-lead{font-size:17px;color:#2A3446}
.praise-line{font-size:17px;color:#0B1220;margin:0 0 8px}
.praise-stem{font-size:16.5px;color:#2A3446;margin:0 0 4px}
.praise-hint{font-size:16.5px;color:#7A5A1E;background:rgba(200,161,90,.14);border-radius:12px;padding:12px 14px}

/* 头部常驻：确保任何页面都冻结在顶部（此前被 overflow:hidden 破坏） */
header{position:sticky !important;top:0;z-index:40}
html{scroll-padding-top:96px}
section[id],div[id],#buy,#birth,#signals,#how,#treasures{scroll-margin-top:100px}
/* 首页在导航里也标出来，用户永远知道怎么回去 */

/* 悬浮条可能遮住页脚与按钮：小屏给底部留出空间 */
@media (max-width: 760px) {
  body { padding-bottom: 92px; }
  footer { padding-bottom: 110px; }
}
/* 语言按钮的可读性 */
.lang button { min-width: 46px; }
/* 触摸目标不小于 44px */
.bar nav a, .lang button { min-height: 40px; display: inline-flex; align-items: center; }
.menu-btn { min-height: 40px; }

/* 「说白了」那句：最大最醒目，先让人看懂 */
.praise-plain{font-size:19px !important;font-weight:650;color:#0B1220;background:rgba(200,161,90,.16);
  border-radius:14px;padding:14px 16px;margin:0 0 14px;line-height:1.55}
.praise-plain span{display:block}

/* 滚轮顺滑：关闭惯性叠加带来的抖动，固定滚动容器 */
.wheel .wh-scroll{overscroll-behavior:contain;scroll-behavior:auto}
.wheel .wh-item{will-change:opacity}

/* 安卓（华为等）弹层叠字修复：
   原因一 backdrop-filter 与 position:fixed 同用会产生重绘残影；
   原因二 transform: translate(-50%, ...) 的百分比平移在部分安卓 WebView 上不重绘。
   对策：实色底 + 只做 Y 轴位移 + 独立合成层。 */
.bs-sheet{
  left: 0 !important; right: 0 !important; margin: 0 auto !important;
  background: #FFFDF8 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transform: translateY(105%) !important;
  will-change: transform; contain: paint;
  -webkit-transform: translateZ(0);
  box-shadow: 0 -18px 50px rgba(24,32,56,.30) !important;
}
.bs-sheet.open{ transform: translateY(0) !important; }
.bs-back{ background: rgba(11,18,32,.5); }
@media (min-width: 761px){
  .bs-sheet{ max-width: 560px; bottom: 24px; transform: translateY(130%) !important; }
  .bs-sheet.open{ transform: translateY(0) !important; }
}
.bs-sheet, .bs-sheet *{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* 小屏（含华为等安卓内核）统一关闭毛玻璃：外观用半透明实色替代，避免重绘残影 */
@media (max-width: 820px) {
  .glass, .bar.glass, .card, header::before {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .glass { background: linear-gradient(150deg, rgba(255,255,255,.96), rgba(255,255,255,.86)) !important; }
  .bar.glass { background: #fff !important; }
}
/* 悬浮入口现在是普通链接，样式保持 */
.bs-pill { text-decoration: none; }

/* 用户评价 */
.rv-sum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 6px}
.rv-avg{font-size:30px;font-weight:750}
.rv-star{color:#C8A15A;letter-spacing:2px;font-size:15px}
.rv-count{font-size:15.5px;color:#5C6B80}
.rv-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
@media(min-width:760px){.rv-grid{grid-template-columns:1fr 1fr}}
.rv-card{background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:14px 16px;
  box-shadow:0 10px 26px rgba(24,32,56,.06)}
.rv-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rv-head b{font-size:16.5px}
.rv-line{font-size:12.5px;color:#7A5A1E;background:rgba(200,161,90,.16);border:1px solid rgba(200,161,90,.35);
  border-radius:999px;padding:2px 9px}
.rv-text{margin:8px 0 6px;font-size:16px;color:#2A3446;line-height:1.6}
.rv-meta{font-size:13.5px;color:#8B959E}
.rv-ok{color:#2E7D5B}
.rv-filter{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.rv-filter button{padding:9px 14px;border-radius:999px;border:1px solid rgba(11,18,32,.14);background:#fff;
  font:inherit;font-size:15px;cursor:pointer;min-height:42px}
.rv-filter button.on{background:#0B1220;color:#fff;border-color:#0B1220}
.rv-more{margin-top:14px}

/* 滚轮选中行：不再用上下两条线，改为一条柔和高亮带 */
.wheel .wh-frame{
  border-top: 0 !important; border-bottom: 0 !important;
  background: rgba(200,161,90,.16);
  border-radius: 12px;
  left: 4px; right: 4px;
}

/* 取消独立高亮层（它靠绝对定位与滚动内容对齐，安卓上会偏移/残影）。
   改为：选中那一格自己带底色——不产生额外图层，也就不可能对不上。 */
.wheel .wh-frame { display: none !important; }
.wheel .wh-item.on {
  background: rgba(200, 161, 90, .20);
  border-radius: 12px;
  opacity: 1;
}
.wheel .wh-scroll { background: transparent; border: 0; }

/* 表格更好看：行距、斑马纹、圆角、表头更轻 */
table{border-collapse:separate;border-spacing:0;width:100%}
th{background:rgba(200,161,90,.10);padding:12px 12px !important;border-bottom:1px solid rgba(200,161,90,.35) !important}
td{padding:14px 12px !important;vertical-align:top;line-height:1.6}
tbody tr:nth-child(even){background:rgba(200,161,90,.05)}
tbody tr:hover{background:rgba(200,161,90,.09)}
th:first-child{border-radius:12px 0 0 0} th:last-child{border-radius:0 12px 0 0}
tbody tr:last-child td:first-child{border-radius:0 0 0 12px} tbody tr:last-child td:last-child{border-radius:0 0 12px 0}
@media(max-width:820px){ th,td{padding:11px 9px !important} }

/* —— 窄屏修正（2026-10-08）——————————————————————————————
   1) 导航：原来只在 ≤760px 收进汉堡，横屏手机/小平板（约 800–1080px）仍是整排中文导航，
      中文会逐字断行（「首/页」「五禽与导/引」）。这里把断点提到 1080px。
   2) 表格：列多的表在窄屏会被挤成一列一个字。没有加手机标签的表统一改为横向滚动。 */
@media (max-width:1080px){
  .menu-btn{display:flex}
  .bar.glass{overflow:visible}
  .bar nav{display:none}
  .bar nav a{white-space:nowrap}
  body.nav-open .bar nav{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:64px;left:12px;right:12px;
    gap:2px;padding:10px;border-radius:18px;z-index:50;background:linear-gradient(150deg,rgba(255,255,255,.97),rgba(255,255,255,.9));
    border:1px solid rgba(255,255,255,.95);box-shadow:0 20px 44px rgba(24,32,56,.16);backdrop-filter:blur(18px)}
  body.nav-open .bar nav a{padding:12px 14px;font-size:15px;color:var(--ink)}
  body.nav-open .bar nav a:hover{background:rgba(200,161,90,.12);border-radius:12px}
}
/* 没有手机标签的表统一横向滚动（.cardtable 的走下面的卡片样式） */
@media (max-width:820px){
  table:not(.cardtable){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  table:not(.cardtable)>thead,
  table:not(.cardtable)>tbody{display:table;width:100%;min-width:600px}
}

/* —— 窄屏表格折成「磨砂玻璃卡片」：每行一张卡，按行轮换色块 ——————————————
   .mlabel 是每格的小标题（桌面隐藏，卡片里显示）；--acc 是强调色，--tint 是玻璃底色。 */
.mlabel{display:none}
@media (max-width:900px){
  table.cardtable{display:block;overflow:visible}
  table.cardtable>thead{display:none}
  table.cardtable>tbody{display:block}
  table.cardtable>tbody>tr{
    display:block;position:relative;margin:0 0 14px;padding:16px 18px 18px 22px;border-radius:20px;
    background-color:var(--tint);background-image:linear-gradient(150deg,rgba(255,255,255,.60),rgba(255,255,255,.18));
    -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
    border:1px solid rgba(255,255,255,.80);
    box-shadow:0 16px 38px rgba(24,32,56,.10),inset 0 1px 0 rgba(255,255,255,.92);
  }
  table.cardtable>tbody>tr::before{content:"";position:absolute;left:9px;top:18px;bottom:18px;width:4px;border-radius:4px;background:var(--acc)}
  table.cardtable>tbody>tr:nth-child(4n+1){--acc:#8C93A3;--tint:rgba(140,147,163,.16)}
  table.cardtable>tbody>tr:nth-child(4n+2){--acc:#3F8A63;--tint:rgba(78,154,106,.15)}
  table.cardtable>tbody>tr:nth-child(4n+3){--acc:#B07E1E;--tint:rgba(200,147,60,.17)}
  table.cardtable>tbody>tr:nth-child(4n+4){--acc:#B7332B;--tint:rgba(183,51,43,.13)}
  table.cardtable>tbody>tr:last-child{margin-bottom:0}
  table.cardtable>tbody>tr>td{display:block;border:0 !important;padding:2px 0 !important;background:none !important;white-space:normal !important}
  table.cardtable td.tname{font-size:18.5px;font-weight:750;line-height:1.3;margin:0 0 8px;color:var(--acc)}
  table.cardtable td.tname br+span,table.cardtable td.tname span[style]{color:var(--acc) !important;opacity:.7}
  table.cardtable .mlabel{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:700;margin:9px 0 2px;opacity:.85}
}

/* —— 文案排版修正（2026-10-08）——————————————————————————————
   首页 hero / 各区块小标题 / 页脚免责声明都是居中排的，中文一居中就容易出现
   「末行只剩一两个字」（例如首页那段结尾只剩「法。」）。三条一起上：
   1) text-wrap:pretty  —— 长段落避免末行孤字
   2) text-wrap:balance —— 居中短段落自动均衡各行长度（Chrome/Safari 支持，不支持则无副作用）
   3) line-break:strict —— 中文标点不落在行首
   注：这两条是排版属性，不改任何文案，桌面与手机都生效。 */
p, li, figcaption, .lead, .sub, .fine { text-wrap: pretty; line-break: strict; }
h1, h2, h3 { text-wrap: balance; line-break: strict; }
.hero p, .sec-head p, .sec-head h2, .birth p, .birth h2, footer p, footer .fine { text-wrap: balance; }

/* =============== 尝试升级版（TRIAL）· 2026-10-08 ===============
   1) 方案 A「团花光影」：把各页已有的 .blob 光斑加慢速漂移（46–58 秒一轮）
   2) .bgfx 区块底图动画层：五行方位图 / 世界航线，压磨砂玻璃卡片下面
   全部只动 transform / opacity / stroke-dashoffset，走 GPU 合成层，不写 JS。 */

/* 1) 方案 A */
.blob{will-change:transform}
.blob.b1{animation:jqsDrift1 46s ease-in-out infinite}
.blob.b2{animation:jqsDrift2 58s ease-in-out infinite}
.blob.b3{animation:jqsDrift3 52s ease-in-out infinite}
@keyframes jqsDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9%,6%,0) scale(1.12)}}
@keyframes jqsDrift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-8%,9%,0) scale(.94)}}
@keyframes jqsDrift3{0%,100%{transform:translate3d(0,0,0) scale(.98)}50%{transform:translate3d(6%,-7%,0) scale(1.1)}}

/* 2) 区块底图动画层 */
.bgfx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.glass.has-bgfx>*:not(.bgfx){position:relative;z-index:1}
.bgfx svg{display:block;opacity:.95}
.bgfx .ringA{transform-origin:300px 300px;animation:jqsSpin 90s linear infinite}
.bgfx .ringB{transform-origin:300px 300px;animation:jqsSpin 140s linear infinite reverse}
.bgfx .node{animation:jqsBreathe 7s ease-in-out infinite}
.bgfx .node:nth-of-type(2){animation-delay:1.4s}
.bgfx .node:nth-of-type(3){animation-delay:2.8s}
.bgfx .node:nth-of-type(4){animation-delay:4.2s}
.bgfx .node:nth-of-type(5){animation-delay:5.6s}
.bgfx .arc{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:10 14;animation:jqsFlow 9s linear infinite}
.bgfx .arc2{animation-duration:13s;animation-delay:-3s}
.bgfx .arc3{animation-duration:11s;animation-delay:-6s}
.bgfx .arc4{animation-duration:15s;animation-delay:-2s}
.bgfx .port{animation:jqsBreathe 5.5s ease-in-out infinite}
.bgfx .port:nth-of-type(2){animation-delay:1.1s}
.bgfx .port:nth-of-type(3){animation-delay:2.2s}
.bgfx .port:nth-of-type(4){animation-delay:3.3s}
.bgfx .port:nth-of-type(5){animation-delay:4.4s}
@keyframes jqsSpin{to{transform:rotate(360deg)}}
@keyframes jqsBreathe{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes jqsFlow{to{stroke-dashoffset:-240}}

/* 系统开「减少动态效果」时全部静止 */
@media (prefers-reduced-motion: reduce){
  .blob,.bgfx .ringA,.bgfx .ringB,.bgfx .node,.bgfx .arc,.bgfx .port{animation:none !important}
}

/* 页脚链接行（配送/隐私/条款/联系）：之前只有首页有，且都是 href="#" 死链 */
footer .fl{margin-top:20px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:12.5px}
footer .fl a{color:#5C6B80;border-bottom:1px solid transparent}
footer .fl a:hover{color:var(--seal);border-bottom-color:currentColor}
footer .fl span{color:#8B959E}

/* 法务/说明类页面（Contact / Shipping / Privacy / Terms）排版 */
.legal{padding:30px 28px}
.legal h2{font-size:19.5px;letter-spacing:-.01em;margin:26px 0 8px}
.legal h2:first-child{margin-top:0}
.legal p{font-size:15px;color:var(--ink-2);line-height:1.85;margin:6px 0}
.legal ul{margin:6px 0 6px 20px}
.legal li{font-size:15px;color:var(--ink-2);line-height:1.85;margin:4px 0}
.legal .btn{margin-top:10px}
.legal .updated{font-size:12.5px;color:#8B959E;margin-top:14px}
.legal .todo{font-size:13px;color:#8A2B24;background:rgba(183,51,43,.08);border:1px solid rgba(183,51,43,.28);
  border-radius:12px;padding:11px 13px;margin:10px 0;line-height:1.7}
@media(max-width:760px){.legal{padding:22px 18px}.legal h2{font-size:18px}}

/* 导航项不逐项换行（页头多了 TRIAL 标签后 1080–1400px 之间会被挤） */
.bar nav a{white-space:nowrap}

/* =============== 账号 · 订单 · 物流（升级版闭环原型）=============== */
.tl{margin-top:14px;border-left:2px solid rgba(200,161,90,.45);padding-left:18px}
.tl .st{position:relative;padding:9px 0}
.tl .st::before{content:"";position:absolute;left:-25px;top:15px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid #C8A15A}
.tl .st.done::before{background:#C8A15A;border-color:#C8A15A}
.tl .st.now::before{background:#B7332B;border-color:#B7332B;box-shadow:0 0 0 4px rgba(183,51,43,.16)}
.tl .st h4{font-size:14.5px;font-weight:650;margin:0}
.tl .st p{font-size:13px;color:#5C6B80;margin:2px 0 0}
.tl .st .when{font-size:12px;color:#8B959E}
.order{border:1px solid rgba(11,18,32,.08);border-radius:16px;padding:14px 16px;margin-top:12px;background:#FFFDF9}
.order .row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.order .muted{font-size:13.5px;color:#5C6B80}
.okmsg{font-size:13.5px;color:#2F6B4A;background:rgba(78,154,106,.12);border:1px solid rgba(78,154,106,.35);border-radius:12px;padding:10px 12px;margin-top:10px}
.errmsg{font-size:13.5px;color:#8A2B24;background:rgba(183,51,43,.08);border:1px solid rgba(183,51,43,.28);border-radius:12px;padding:10px 12px;margin-top:10px}
.acc-card{padding:20px}
.acc-card h2{font-size:19px;margin-bottom:6px}
.acc-card .ib-row{margin-top:12px}
.acc-who{font-size:15px;color:#2A3446}

/* 售卖排行 + 评价筛选（评价与排行页） */
.rank{margin-top:14px}
.rank .it{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(11,18,32,.08)}
.rank .no{width:22px;font-weight:750;color:#C8A15A}
.rank .nm{flex:1;font-size:14.5px;min-width:0}
.rank .bar{height:8px;border-radius:999px;background:rgba(200,161,90,.20);flex:0 0 32%;overflow:hidden}
.rank .bar i{display:block;height:100%;background:linear-gradient(90deg,#D9B46A,#B7332B)}
.rank .qty{font-size:12.5px;color:#5C6B80;width:74px;text-align:right}
.srcnote{font-size:12.5px;color:#8B959E;margin-top:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.chips button{font:inherit;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer;
  background:rgba(200,161,90,.14);border:1px solid rgba(200,161,90,.4);color:#7A5A1E}
.chips button.on{background:#0B1220;border-color:#0B1220;color:#fff}
.sample{font-size:11px;letter-spacing:.08em;color:#8A2B24;background:rgba(183,51,43,.10);
  border:1px solid rgba(183,51,43,.3);border-radius:999px;padding:2px 9px;margin-left:8px;white-space:nowrap}

/* =============== 动画：调到「看得见」 ===============
   之前 46–58 秒、位移 9%、透明度 .55 —— 静态看一眼根本发现不了。
   现在 20–28 秒、位移 16–20%、带缩放，肉眼能看出在缓慢流动，但仍不抢内容。 */
.blob{opacity:.8 !important;will-change:transform}
.blob.b1{animation:jqsDrift1 22s ease-in-out infinite}
.blob.b2{animation:jqsDrift2 26s ease-in-out infinite}
.blob.b3{animation:jqsDrift3 24s ease-in-out infinite}
@keyframes jqsDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(16%,10%,0) scale(1.28)}}
@keyframes jqsDrift2{0%,100%{transform:translate3d(0,0,0) scale(1.1)}50%{transform:translate3d(-15%,14%,0) scale(.92)}}
@keyframes jqsDrift3{0%,100%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(12%,-12%,0) scale(1.22)}}
@keyframes jqsSpin{to{transform:rotate(360deg)}}
@keyframes jqsBreathe{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes jqsFlow{to{stroke-dashoffset:-260}}
.bgfx .ringA{animation-duration:44s}
.bgfx .ringB{animation-duration:68s}
.bgfx .arc{stroke-width:2.1;stroke-dasharray:12 12;animation-duration:6s}
.bgfx .node{animation-duration:4.5s}

/* 首页 hero：加一层缓慢旋转的团花，让「底纹在动」一眼可见 */
.hero{position:relative;overflow:hidden}
.hero-tuan{position:absolute;inset:-40% -10%;z-index:0;pointer-events:none;opacity:.5;
  animation:jqsSpin 64s linear infinite;transform-origin:50% 50%}
.hero-tuan svg{width:100%;height:100%}
.hero > *:not(.hero-tuan){position:relative;z-index:1}
@media (prefers-reduced-motion: reduce){
  .blob,.hero-tuan,.bgfx .ringA,.bgfx .ringB,.bgfx .node,.bgfx .arc{animation:none !important}
  .hero-tuan{opacity:.28}
}

/* =============== 产品图（网页用）=============== */
.opt-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;display:block;margin:0 0 14px;
  background:#F1EAD9;box-shadow:0 8px 20px rgba(11,18,32,.10)}
.prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media(max-width:900px){.prodgrid{grid-template-columns:repeat(2,1fr);gap:12px}}
.prod{display:block;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:16px;
  overflow:hidden;box-shadow:0 10px 24px rgba(11,18,32,.08);text-decoration:none}
.prod img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.prod .meta{padding:11px 13px 13px}
.prod .nm{font-size:14.5px;font-weight:650;color:#0B1220;line-height:1.3}
.prod .en{font-size:12px;color:#8B959E;margin-top:3px}
.prod .pr{font-size:13px;color:#7A5A1E;margin-top:7px;font-weight:600}
.bag-thumb{width:64px;height:80px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:#F1EAD9}
.rank .it img{width:40px;height:50px;border-radius:9px;object-fit:cover;flex:0 0 auto;background:#F1EAD9}