/* ============================================================
   moment酒吧 · 点单系统样式（order.html / product.html 专用）
   ------------------------------------------------------------
   参考设计语言：
     · 暗色酒吧头图 + 悬浮搜索胶囊
     · 酒水 / 餐食 / 无醇 分段开关，下接带图标的分类 chips
     · 商品双列网格：4:5 大图 + 名称 + 英文名 + 副标题 + 价格 + 圆形加购
     · 商品详情：大图 hero + 白色圆角面板 + 参数表 + 可展开描述 + 底部加购条
   保持项目既有令牌（--bg / --card / --ink / --accent），只做加法。
   加载顺序必须在 style.css 与 h5.css 之后。
   ============================================================ */

:root{
  /* 2026-09-25 电蓝方向：商品图的底衬与浮层都换成蓝系（不再有暖米色/木棕） */
  --mk-tint:#E6F1FB;         /* 商品图底衬（雾蓝） */
  --mk-tint2:#D7E7F7;
  --mk-dark:#07121F;         /* 暗色头图基色 = 午夜底 */
  --mk-wine:#E24B4A;         /* 只用于 LIVE / 收藏 / 角标提醒（珊瑚红） */
  --mk-sheet:#EAF3FB;        /* 详情面板：比页面略深的雾蓝，靠分割线分区 */
  /* 照片页上的浮层：导航圆钮 / 吸顶条与底部操作条 */
  --mk-veil:rgba(230,241,251,.9);
  --mk-bar:rgba(244,248,252,.95);
  --mk-r:16px;
}

/* 点单页内容区改为整幅出血，由内部模块自己控制留白 */
.phone-content.bleed{padding:0 0 122px}

/* ===================== 顶部酒吧头图 ===================== */
.bar-hero{position:relative;height:216px;overflow:hidden;border-radius:0 0 24px 24px;background:var(--mk-dark);isolation:isolate}
.bar-hero picture,.bar-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bar-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,18,31,.62) 0%,rgba(7,18,31,.22) 30%,rgba(7,18,31,.58) 58%,rgba(7,18,31,.94) 100%)}
.bar-hero .bh-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top)) 20px 30px}
.bh-top{display:flex;align-items:center;gap:10px}
.bh-logo{font-size:12.5px;font-weight:800;letter-spacing:2.4px;color:#fff;text-transform:uppercase}
.bh-table{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);padding:5px 10px;border-radius:20px;backdrop-filter:blur(6px)}
.bh-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#EDE6DA;margin-top:auto}
.bh-live i{width:6px;height:6px;border-radius:50%;background:#E0685C;box-shadow:0 0 0 0 rgba(224,104,92,.6);animation:bhPulse 2s ease-out infinite}
@keyframes bhPulse{0%{box-shadow:0 0 0 0 rgba(224,104,92,.55)}70%{box-shadow:0 0 0 7px rgba(224,104,92,0)}100%{box-shadow:0 0 0 0 rgba(224,104,92,0)}}
.bar-hero h2{font-size:26px;line-height:1.2;font-weight:800;color:#fff;letter-spacing:.6px;margin-top:8px}
.bar-hero h2 em{font-style:normal;color:var(--accent2)}
/* 头图是照片，货架边缘/灯串的高光细线会正好落在文字腰线上，远看像被划了删除线。
   靠换取景只能躲开某一张图，加一层柔和阴影才能对任何底图都成立。 */
.bar-hero h2,.bh-live,.bh-logo{text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.35)}

/* ===================== 主体留白容器 ===================== */
.mk-body{padding:0 16px}

/* ===================== 搜索胶囊（压在头图下沿） ===================== */
.mk-search{position:relative;z-index:3;margin-top:-24px;display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--panel-line);border-radius:15px;padding:12px 14px}
.mk-search svg{flex:0 0 auto;color:var(--ink3)}
.mk-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:13.5px;color:var(--ink)}
.mk-search input::placeholder{color:var(--ink3)}
.mk-search .clr{flex:0 0 auto;display:none;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:transparent;border:1px solid var(--line-strong);color:var(--ink3);font-size:12px;line-height:1;cursor:pointer}
.mk-search.has .clr{display:flex}

/* ===================== 分段开关：酒水 / 餐食 / 无醇 ===================== */
.mk-seg{display:flex;gap:6px;background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:5px;margin-top:16px}
.mk-seg button{position:relative;flex:1;border:none;background:transparent;font-size:13px;font-weight:700;color:var(--ink3);padding:9px 0;border-radius:10px;letter-spacing:.2px;transition:color var(--dur-pop) ease,background-color var(--dur-pop) ease,transform var(--dur-press) var(--ease-out)}
.mk-seg button:active{transform:scale(.97)}
.mk-seg button.on{background:var(--panel2);color:var(--ink)}

/* ===================== 分类 chips（带图标） ===================== */
/* 右缘渐隐，提示还能横向滑动 */
.mk-cats{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding:14px 0 4px;margin:0 -16px;padding-left:16px;padding-right:26px;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
.mk-cats::-webkit-scrollbar{display:none}
.mk-cat{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:66px;border:none;background:transparent;padding:0;cursor:pointer}
/* 分类：默认 = 雾蓝底 + 深蓝字；选中 = 深海蓝底 + 白字（规范）
   默认态不再描边，靠底色区分，避免一排空心方块的机械感 */
.mk-cat .ic{width:48px;height:48px;border-radius:15px;background:var(--panel);border:1px solid transparent;display:flex;align-items:center;justify-content:center;color:var(--deep);transition:background-color var(--dur-pop) var(--ease-out),color var(--dur-pop) var(--ease-out),border-color var(--dur-pop) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.mk-cat .ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mk-cat .lb{font-size:11px;font-weight:600;color:var(--ink3);letter-spacing:.2px;white-space:nowrap}
.mk-cat:active .ic{transform:scale(.93)}
.mk-cat.on .ic{background:var(--deep);border-color:var(--deep);color:#fff}
.mk-cat.on .lb{color:var(--ink);font-weight:700}
@media (hover:hover) and (pointer:fine){.mk-cat:hover .ic{border-color:var(--accent2)}}

/* ===================== 区块标题 ===================== */
.mk-head{display:flex;align-items:baseline;gap:8px;margin:20px 0 12px}
.mk-head h3{font-size:15.5px;font-weight:800;color:var(--ink);letter-spacing:.3px}
.mk-head .sub{font-size:11px;color:var(--ink3)}
.mk-head .more{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--accent)}

/* ===================== 横向小卡（最近看过 / 相关推荐） ===================== */
.mk-rail{display:flex;gap:11px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 6px}
.mk-rail::-webkit-scrollbar{display:none}
/* 横滑小卡同样不抬白卡：图片 + 图下信息，靠间距断开 */
.mk-mini{flex:0 0 auto;width:132px;background:transparent;border:none;border-radius:0;overflow:visible;display:block}
.mk-mini .ph{aspect-ratio:1/1;border-radius:var(--mk-r);background:var(--mk-tint);overflow:hidden}
.mk-mini .ph img{width:100%;height:100%;object-fit:cover;display:block}
.mk-mini .bd{padding:8px 0 10px;border-bottom:1px solid var(--line)}
.mk-mini .nm{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-mini .pr{font-size:12.5px;font-weight:800;color:var(--ink);margin-top:4px}
.mk-mini .pr .y{font-size:10px;color:var(--accent);margin-right:1px}

/* ===================== 商品网格 ===================== */
/* hidden 属性必须能压住 display:grid / flex（作者样式优先于 UA 的 [hidden]） */
.mk-grid[hidden],.mk-head[hidden],.cart-bar[hidden],.mk-cats[hidden]{display:none}
.mk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
/* 商品不再是一件件浮起的白卡。结构 =
     图片（圆角，暖灰底衬）
     ────────────   ← 一条细线
     名称 / 描述 / 价格 + 加购
   信息区与页面同底、无边框无阴影，商品之间靠分割线断开 ——
   整块连续，读起来是酒单，不是商品列表。 */
.mk-card{position:relative;display:flex;flex-direction:column;background:transparent;border:none;border-radius:0;overflow:visible;text-align:left;transition:transform var(--dur-press) var(--ease-out)}
.mk-card:active{transform:scale(.985)}
.mk-card .ph{position:relative;aspect-ratio:4/5;border-radius:var(--mk-r);background:linear-gradient(165deg,var(--mk-tint),var(--mk-tint2));overflow:hidden}
.mk-card .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.mk-card:hover .ph img{transform:scale(1.045)}}
.mk-card .tag{position:absolute;top:9px;left:9px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.4px;padding:3px 8px;border-radius:8px;background:rgba(27,24,21,.78);color:#fff;backdrop-filter:blur(4px)}
/* 角标：招牌/热门 = 行动蓝；新品 = 深海蓝；其余 = 深蓝半透明。
   规范要求「只保留一个标签」，标签的取舍在 order.html 的模板里控制。 */
.mk-card .tag.hot{background:var(--accent)}
.mk-card .tag.new{background:var(--deep)}
.mk-card .tag.soft{background:rgba(12,68,124,.86)}
.mk-card .bd{display:flex;flex-direction:column;gap:3px;flex:1;padding:10px 2px 14px;border-bottom:1px solid var(--line)}
.mk-card .nm{font-size:14px;font-weight:800;color:var(--ink);line-height:1.25;letter-spacing:.2px}
.mk-card .en{font-size:9.5px;font-weight:600;color:var(--ink3);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-card .sh{font-size:11.5px;color:var(--ink3);line-height:1.45;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:33px}
.mk-card .ft{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.mk-card .pr{font-size:16px;font-weight:800;color:var(--ink);line-height:1}
.mk-card .pr .y{font-size:10.5px;font-weight:700;color:var(--accent);margin-right:1px}
.mk-card .pr .u{font-size:10px;font-weight:600;color:var(--ink3);margin-left:2px}
.mk-card .rate{display:flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:var(--ink3);margin-top:5px}
.mk-card .rate svg{color:#D9A441}

/* 整卡可点：不要 button 嵌 a，改成在卡片里铺一层透明链接盖住整张卡。
   踩过的坑：`.mk-hit` 在 order.html 里渲染出来了，但**全项目没有它的 CSS**，
   于是它是个 height:0 的静态 <a> —— 点商品图、点名字都没反应（点不进去详情页），
   而横滑小卡 `.mk-mini` 是 <a> 包整块，看着又像"能点"，很容易误判为偶发。
   注意层级：加购按钮 / 数量控件必须抬到 z-index:2，
   否则它们的点击会被这层 z-index:1 的链接吃掉（点了直接跳详情页，加不进购物车）。 */
.mk-card .mk-hit{position:absolute;inset:0;z-index:1;border-radius:inherit;-webkit-tap-highlight-color:transparent}

/* 加购 = 小型圆形木色按钮（规范：「加入按钮：小型圆形木色按钮」） */
.mk-add{position:relative;z-index:2;flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:none;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-pop) ease}
.mk-add:active{transform:scale(.86)}
.mk-add.done{background:var(--block)}
@media (hover:hover) and (pointer:fine){.mk-add:hover{background:#2E7AC7}}
.mk-add svg{width:16px;height:16px;pointer-events:none}
/* 已在购物车里显示数量：透明底 + 细木描边 */
.mk-qbadge{position:relative;z-index:2;flex:0 0 auto;display:inline-flex;align-items:center;gap:1px;background:transparent;border:1px solid var(--line-strong);border-radius:20px;padding:2px}
.mk-qbadge button{width:24px;height:24px;border:none;border-radius:50%;background:transparent;color:var(--ink2);font-size:14px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center}
.mk-qbadge button:active{background:var(--panel2)}
.mk-qbadge b{min-width:16px;text-align:center;font-size:12px;font-weight:800;color:var(--ink)}

/* 空状态 */
.mk-empty{text-align:center;padding:52px 20px;color:var(--ink3)}
.mk-empty svg{color:var(--accent2);margin-bottom:12px}
.mk-empty .t{font-size:14px;font-weight:700;color:var(--ink2)}
.mk-empty .d{font-size:12px;margin-top:6px;line-height:1.6}

/* ===================== 购物车条（覆盖默认样式） ===================== */
.cart-bar.mk-cart{left:16px;right:16px;bottom:100px;padding:11px 12px;border-radius:17px}
.cart-bar.mk-cart .ico{position:relative;display:inline-flex}
.cart-bar.mk-cart .cart-ic{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;position:relative}
.cart-bar.mk-cart .badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--block)}
.cart-bar.mk-cart .btn{padding:11px 18px}

/* ===================== 商品详情页 ===================== */
.pd-wrap{position:relative}
.pd-hero{position:relative;aspect-ratio:1/1;background:linear-gradient(170deg,var(--mk-tint) 0%,var(--mk-tint2) 100%);overflow:hidden}
.pd-hero picture,.pd-hero img{width:100%;height:100%;object-fit:cover;display:block}
.pd-hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.34) 0%,rgba(20,18,16,0) 26%)}
/* 顶部操作条：未滚动时浮在大图上（白圆钮），滚过大图后变成实心工具条并显示商品名，
   避免按钮压在正文上读不清 */
.pd-nav{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px;border-bottom:1px solid transparent;
  transition:background-color var(--dur-pop) ease,box-shadow var(--dur-pop) ease,border-color var(--dur-pop) ease}
.pd-nav .rb{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--mk-veil);backdrop-filter:blur(8px);border:1px solid var(--panel-line);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background-color var(--dur-pop) ease,border-color var(--dur-pop) ease,transform var(--dur-press) var(--ease-out)}
.pd-nav .rb:active{transform:scale(.9)}
.pd-nav .ttl{flex:1;min-width:0;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  opacity:0;transform:translateY(5px);transition:opacity var(--dur-pop) ease,transform var(--dur-pop) var(--ease-out)}
.pd-nav.stuck{background:var(--mk-bar);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.pd-nav.stuck .ttl{opacity:1;transform:none}
.pd-nav.stuck .rb{background:transparent;border-color:transparent}
.pd-nav .fav.on{color:var(--mk-wine)}
.pd-nav .fav.on svg{fill:currentColor}

/* 详情面板：比页面略浅的暖面板（2026-09-25 起不再是白色圆角面板） */
.pd-sheet{position:relative;z-index:2;background:var(--mk-sheet);border-radius:24px 24px 0 0;margin-top:-22px;padding:20px 16px 26px}
.pd-cat{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.6px;color:var(--accent);background:transparent;border:1px solid var(--line-strong);padding:4px 9px;border-radius:8px;text-transform:uppercase}
.pd-title{font-size:23px;font-weight:800;color:var(--ink);letter-spacing:.4px;margin-top:11px;line-height:1.25}
.pd-en{font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.8px;text-transform:uppercase;margin-top:6px}
.pd-meta{display:flex;align-items:center;gap:10px;margin-top:11px;font-size:11.5px;color:var(--ink3)}
.pd-stars{display:flex;align-items:center;gap:2px;color:#D9A441}
.pd-stars svg{width:13px;height:13px}
.pd-meta b{color:var(--ink2);font-weight:700}
.pd-price{display:flex;align-items:flex-end;gap:8px;margin-top:14px}
.pd-price .now{font-size:29px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.5px}
.pd-price .now .y{font-size:15px;font-weight:700;color:var(--accent);margin-right:2px}
.pd-price .unit{font-size:12px;color:var(--ink3);padding-bottom:3px}
.pd-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}

.pd-div{height:1px;background:var(--line);margin:20px 0}
.pd-h{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:.3px;margin-bottom:12px}
.pd-h::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--accent)}

/* 参数表：不裹卡，只用虚线分行 */
.pd-specs{padding:0}
.pd-specs .r{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.pd-specs .r:last-child{border-bottom:none}
.pd-specs .k{flex:0 0 62px;color:var(--ink3)}
.pd-specs .v{flex:1;color:var(--ink);font-weight:600;text-align:right}

/* 描述（可展开） */
.pd-desc{font-size:13px;line-height:1.78;color:var(--ink2);letter-spacing:.1px}
.pd-desc.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pd-more{margin-top:8px;font-size:12px;font-weight:700;color:var(--accent);background:none;border:none;padding:0;display:inline-flex;align-items:center;gap:3px}
.pd-more svg{transition:transform var(--dur-pop) var(--ease-out)}
.pd-more.on svg{transform:rotate(180deg)}

.pd-pair{display:flex;gap:9px;align-items:flex-start;background:var(--panel);border-radius:13px;padding:12px 13px;font-size:12.5px;line-height:1.65;color:var(--ink2)}
.pd-pair svg{flex:0 0 auto;color:var(--accent);margin-top:2px}

/* 数量 + 底部操作条 */
.pd-qrow{display:flex;align-items:center;justify-content:space-between;padding:4px 0 22px}
.pd-qrow .lb{font-size:13px;font-weight:700;color:var(--ink)}
.pd-stepper{display:inline-flex;align-items:center;gap:4px;background:transparent;border:1px solid var(--line-strong);border-radius:13px;padding:4px}
.pd-stepper button{width:34px;height:34px;border:none;border-radius:10px;background:var(--panel2);color:var(--ink);font-size:17px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center}
.pd-stepper button:active{background:var(--accent);color:#fff}
.pd-stepper button:disabled{opacity:.42}
.pd-stepper b{min-width:34px;text-align:center;font-size:15px;font-weight:800;color:var(--ink)}

/* 底部操作条 = 深色舞台块（页面里最重的一块，和购物车条同一语言） */
.pd-cta{position:absolute;left:0;right:0;bottom:0;z-index:20;background:var(--block);border-top:none;padding:11px 16px calc(11px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;color:#fff}
.pd-cta .mini-cart{position:relative;flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff}
.pd-cta .mini-cart .badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--block)}
.pd-cta .buy{flex:1}
.pd-cta .sum{font-size:11px;color:rgba(255,255,255,.62);font-weight:600}
.pd-cta .sum b{font-size:15px;color:#fff;font-weight:800;margin-left:4px}

/* 详情页免责小字：不裹卡，左侧一条木色细线 */
.pd-note{display:flex;gap:7px;align-items:flex-start;font-size:11px;line-height:1.6;color:var(--ink3);background:transparent;border:none;border-left:2px solid var(--line-strong);border-radius:0;padding:2px 0 2px 10px}
.pd-note svg{flex:0 0 auto;margin-top:1px}

/* ===================== 进入动画 ===================== */
@keyframes mkRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mk-grid .mk-card{animation:mkRise .34s var(--ease-out) both}
.mk-seq-1{animation-delay:.02s}.mk-seq-2{animation-delay:.05s}.mk-seq-3{animation-delay:.08s}
.mk-seq-4{animation-delay:.11s}.mk-seq-5{animation-delay:.14s}.mk-seq-6{animation-delay:.17s}
.mk-seq-7{animation-delay:.2s}.mk-seq-8{animation-delay:.23s}
.pd-sheet{animation:mkRise .38s var(--ease-out) both}

/* 加购成功时圆钮的确认脉冲 */
@keyframes mkPop{0%{transform:scale(.86)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
.mk-add.done{animation:mkPop .34s var(--ease-out)}
@keyframes mkBadge{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}
.cart-bar.mk-cart .badge.bump{animation:mkBadge .34s var(--ease-out)}

/* ===================== 减少动态效果 ===================== */
@media (prefers-reduced-motion: reduce){
  .mk-grid .mk-card,.pd-sheet,.bar-hero .bh-live i{animation:none}
  .mk-add.done,.cart-bar.mk-cart .badge.bump{animation:none}
  .mk-card .ph img{transition:none}
  .mk-card:active,.mk-add:active{transform:none}
}

/* 窄屏（小于 360px）把网格间距收紧 */
@media (max-width:359px){
  .mk-grid{gap:9px}
  .mk-card .nm{font-size:13px}
  .bar-hero h2{font-size:23px}
}