/* ============================================================
   滕马电竞 · 客户端（客户下单页）专用样式
   ------------------------------------------------------------
   只被 public/client/index.html 加载，**不影响中控台**。

   两套布局，靠媒体查询切换：
     · 手机（默认）  → 顶部店名条 + 底部 5 个标签 + 两列商品卡
     · 电脑（≥1000px）→ 左侧竖向导航栏 + 宽幅内容 + 四列商品卡

   视觉风格：电竞暗夜红金
     · 近黑底 + 红金发光，硬朗直角，细描边，数字用等宽粗体
     · 保留品牌色（中国红 + 金），不是纯赛博朋克青紫
   ============================================================ */

/* ---------- 1. 覆盖共用变量：整套组件自动变暗 ---------- */
/* app.css 里的 .card/.btn/.field 等都读这些变量，
   在这里改一次，客户端全局变深色，中控台不受影响。 */
:root{
  --bg:#07060a;
  --bg-2:#0c0a10;
  --card:#121016;
  --card-2:#17141d;
  --line:rgba(255,196,71,.16);
  /* app.css 里搜索框的底色来自这个变量（#ffffff），
     不一起改掉的话，暗色页面上会是一条扎眼的白色药丸。 */
  --searchbg:#0d0b11;

  --ink:#f2ebe6;
  --ink-2:#b6a9a5;
  --ink-3:#8b7f7e;

  --brand:#e8b04b;
  --brand-2:#ffd77a;
  --brand-soft:rgba(232,176,75,.14);
  --wine:#a2690a;
  --wine-2:#7a4d06;

  --gold:#e8b04b;
  --gold-2:#e8b04b;
  --gold-soft:rgba(232,176,75,.14);
  --gold-bright:#ffd77a;

  --ok:#20e3a2;
  --ok-soft:rgba(32,227,162,.14);
  --warn:#ffa53d;
  --danger:#ff2e4d;
  --danger-soft:rgba(255,46,77,.14);
  --info:#5aa9ff;

  --shadow:0 14px 40px rgba(0,0,0,.55);

  /* 客户端专用的强调色 */
  --glow-r:0 0 22px rgba(255,46,77,.42);
  --glow-g:0 0 22px rgba(255,196,71,.34);
  --hair:rgba(255,255,255,.06);
}

/* ---------- 2. 基础 ---------- */
html{ background:#07060a; }
body{
  min-height:100vh;
  background:
    radial-gradient(1100px 520px at 50% -180px, rgba(255,46,77,.20), transparent 62%),
    radial-gradient(760px 420px at 88% 6%, rgba(255,196,71,.10), transparent 60%),
    #07060a;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
/* 极淡的网格纹理，营造"电竞面板"质感 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(70% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%, #000 40%, transparent 100%);
}
#app, .m-top, .m-tabs { position:relative; z-index:1; }

/* 共用组件的暗色微调 */
.card{
  background:linear-gradient(180deg, #151219, #100e14);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.btn{ border-radius:4px; border-color:var(--line); background:#181420; color:var(--ink); }
.btn:hover{ border-color:var(--gold); color:var(--gold); }
.btn-primary{
  background:linear-gradient(135deg,#ffd77a,#b5790b);
  border:none; color:#1a1204; font-weight:800; letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(232,176,75,.28);
}
.btn-primary:hover{ box-shadow:0 10px 30px rgba(232,176,75,.45); color:#1a1204; }
.field label{ color:var(--ink-2); }
input, textarea, select{
  background:#0e0c13 !important; color:var(--ink) !important;
  border:1px solid var(--line) !important; border-radius:4px !important;
}
input:focus, textarea:focus, select:focus{ border-color:var(--gold) !important; outline:none; }
.hint-box, .mini-note{ color:var(--ink-2); }
hr, .divider{ border-color:var(--line); }
footer{ color:var(--ink-3); border-top:1px solid var(--line); margin-top:26px; padding-top:18px; }
footer a{ color:var(--ink-2) !important; }
/* 首页容器底部留白：iPhone 上还有 34px 的 home 指示条，标签栏实际高 92px，
   原来只留 78px，最后一张商品卡会被挡掉一截。 */
body.has-mtabs .m-app{ padding-bottom:96px; }

/* ---------- 3. 顶部店名条 ---------- */
.m-top{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:10px;
  height:56px; padding:0 16px;
  background:rgba(9,7,12,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.m-top .m-cs{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; color:var(--ink-2);
  padding:6px 12px; border:1px solid var(--line); border-radius:999px;
}
.m-top .m-cs:active{ color:var(--gold); border-color:var(--gold); }
/* ⚠️ 必须写成 .m-top .m-name：
   app.css 里有 `.m-top .m-name{color:var(--brand)}`（权重 0,2,0），
   只写 .m-name（0,1,0）会被压成纯红 —— 渐变字、字号全部失效。 */
.m-top .m-name{
  flex:1; text-align:center;
  font-size:17px; font-weight:900; letter-spacing:.14em;
  background:linear-gradient(92deg,#ffeeb6,#e8b04b 62%,#b5790b);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* 渐变字不能加 text-shadow（会糊在透明文字后面），发光改用 drop-shadow */
  filter:drop-shadow(0 0 12px rgba(232,176,75,.4));
}
.m-top .m-more{ font-size:16px; color:var(--ink-3); padding:6px 8px; }

/* ---------- 3.5 搜索框 ---------- */
/* app.css 里的 .m-search 是浅色药丸（白底），在暗色页面上会变成一块突兀的白条，
   而里面 input 又被上面的 !important 强制成深色 —— 白底深框，很难看。整块重做。 */
.m-search{
  display:flex; align-items:center; gap:9px;
  margin:0 0 14px; padding:0 13px;
  background:var(--searchbg);
  border:1px solid var(--line); border-radius:4px;
}
.m-search span{ font-size:14px; opacity:.7; }
.m-search input{
  flex:1; min-width:0;
  background:transparent !important;
  border:none !important; border-radius:0 !important;
  box-shadow:none !important;
  color:var(--ink) !important;
  /* 字号必须 ≥16px：iOS 上小于 16px 时聚焦会自动放大整个页面，很难用 */
  padding:12px 0 !important; font-size:16px;
}
.m-search input::placeholder{ color:var(--ink-3); }
.m-search:focus-within{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(255,196,71,.25); }
.m-tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:stretch;
  height:calc(58px + env(safe-area-inset-bottom, 0px));
  /* app.css 给 .m-tabs 留了 padding:6px 0 8px，会把可用高度吃掉 14px，
     这里清零，高度完全由上面的 height 决定。 */
  padding:0 0 env(safe-area-inset-bottom, 0px);
  background:rgba(9,7,12,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
.m-tabs a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-size:11px; color:var(--ink-3);
  text-decoration:none; position:relative;
}
.m-tabs a .m-i{ font-size:19px; line-height:1; filter:grayscale(.55); opacity:.75; }
.m-tabs a.on{ color:var(--gold); }
.m-tabs a.on .m-i{ filter:none; opacity:1; }
.m-tabs a.on::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:30px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 10px var(--gold);
}

/* ---------- 5. 广告轮播 ---------- */
.m-carousel{
  position:relative; margin:0 0 14px; overflow:hidden;
  border-radius:4px; border:1px solid var(--line);
  box-shadow:0 16px 44px rgba(0,0,0,.5), var(--glow-g);
}
.m-slide{ flex:0 0 100%; min-width:100%; cursor:pointer; position:relative; background:#0e0c13; }
.m-slide img{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
.m-slide .ph{
  width:100%; aspect-ratio:16/9; display:grid; place-items:center;
  background:linear-gradient(135deg,#1a1420,#0e0c13); color:var(--ink-3); font-size:13px;
}
.m-cdots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; }
.m-cdots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); }
.m-cdots i.on{ background:var(--gold); box-shadow:0 0 8px var(--gold); width:16px; border-radius:3px; }

/* ---------- 6. 公告条 ---------- */
.m-notice{
  display:flex; align-items:center; gap:9px;
  padding:11px 14px; margin-bottom:16px;
  font-size:12.5px; color:var(--ink-2);
  background:linear-gradient(90deg, rgba(255,46,77,.10), rgba(255,196,71,.06));
  border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:3px;
}
.m-notice .m-sp{ color:var(--gold); }

/* ---------- 7. 分类圆钮 ---------- */
.m-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px 8px;
  padding:16px 10px; margin-bottom:16px;
  background:rgba(18,16,22,.72);
  border:1px solid var(--line); border-radius:4px;
}
/* ⚠️ 必须用 .m-grid a 而不是 .m-grid > *：
   app.css 里有 `.m-grid a`（权重 0,1,1），`.m-grid > *`（0,1,0）会被它压住，
   那样这里写的纵向排列和间距一个都不生效。 */
.m-grid a{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.m-ico{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 32% 28%, #241d2e, #100e15);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 0 16px rgba(255,46,77,.14);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.m-ico.avatar{
  /* ⚠️ 必须重写 background：app.css 有 `.m-ico.avatar{background:var(--iconbg)}`，
     而 --iconbg 是浅桃色径向渐变（给亮色主题用的）。
     不覆盖的话，选中的分类会变成一个刺眼的浅色圆，在暗底上很突兀。 */
  background:radial-gradient(circle at 35% 30%, #3a2418, #17121c);
  border-color:var(--gold);
  box-shadow:0 0 18px rgba(255,196,71,.42), inset 0 0 16px rgba(255,196,71,.18);
}
.m-grid a:active .m-ico{ transform:scale(.94); }
/* 图标字形单独指定（别用 span:last-child，那会把 .m-ph 也压成标签字号） */
.m-grid a .m-ico .m-ph{ font-size:21px; line-height:1; filter:grayscale(.2); }
.m-grid a .m-lb{
  font-size:11.5px; color:var(--ink-2);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 选中态：JS 只给 .m-ico 加 .avatar，标签是它的兄弟节点，所以用 ~ 选 */
.m-grid a .m-ico.avatar ~ .m-lb{ color:var(--gold); }

/* ---------- 8. 付款方式卡 ---------- */
.m-pay{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 16px; margin-bottom:16px;
  background:linear-gradient(100deg, rgba(255,46,77,.14), rgba(255,196,71,.07));
  border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:3px; font-size:13px; color:var(--ink-2);
}

/* ---------- 9. 商品卡 ---------- */
/* 注意：app.css 里已经有 `.m-sect` 的布局和左侧渐变装饰条（.m-sect::before），
   这里**只调间距和字重**，不要重复加装饰条，否则会出现两条。 */
.m-sect{
  margin:22px 0 10px;
  font-size:14px;
  letter-spacing:.05em;
  color:var(--ink);
}
.m-sect .m-more2{ font-size:12px; color:var(--ink-3); }

.m-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.pcard{
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,#16131c,#0f0d14);
  border:1px solid var(--line); border-radius:4px;
  /* 必须自己给阴影：app.css 的 .pcard 带一层暖棕色阴影，在暗底上会发脏 */
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.pcard:active{ transform:scale(.985); }
.pcard .pic{
  position:relative; width:100%; aspect-ratio:1/1;
  background:#0e0c13; overflow:hidden;
}
.pcard .pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcard .pic .tag{
  position:absolute; left:0; top:9px; z-index:2;
  padding:3px 9px; font-size:10.5px; font-weight:800;
  /* 金底必须配深字：白字压金底对比度只有 1.8:1，看着就廉价 */
  color:#1a1204;
  background:linear-gradient(90deg,#ffd77a,#b5790b);
  box-shadow:0 3px 10px rgba(232,176,75,.42);
  border-radius:0 3px 3px 0;
}
.pcard .info{ padding:10px 11px 12px; display:flex; flex-direction:column; gap:6px; }
/* ⚠️ 权重必须 (0,3,0)：app.css 里是 `.pcard .info .nm`，只写 .pcard .nm 会被它压住，
   商品名会一直是浅色主题的 12.5px 深棕字（在暗底上几乎看不见）。 */
.pcard .info .nm{
  font-size:13.5px; font-weight:800; line-height:1.32; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:36px;
}
.pcard .meta{ display:flex; gap:10px; font-size:10.5px; color:var(--ink-3); }
.pcard .prow{ display:flex; align-items:baseline; gap:3px; margin-top:auto; }
.pcard .prow .now{
  font-family:var(--mono); font-size:17px; font-weight:900; letter-spacing:-.02em;
  color:var(--brand-2);
}
.pcard .prow .unit{ font-size:10.5px; color:var(--ink-3); }
.pcard .prow .old{ font-size:10.5px; color:var(--ink-3); text-decoration:line-through; margin-left:2px; }

/* 无图时的自动配色卡（背景渐变由 JS 内联给，这里只管排版和字色） */
.autocard{
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  font-size:30px; color:rgba(255,255,255,.55);
}
.autocard .ic{ font-size:30px; line-height:1; }
/* 配色卡里的图标和商品名。
   ⚠️ 权重必须写到 (0,4,0)：app.css 有 `.pcard .pic .autocard .nm` 和 `.pcard .pic .autocard .ic`，
   只写 .pcard .autocard .nm（0,3,0）会被压住，覆盖永远不生效。 */
.pcard .pic .autocard .ic{ font-size:30px; line-height:1; }
.pcard .pic .autocard .nm{ font-size:12px; font-weight:600; color:rgba(255,255,255,.62); }
.m-dl-thumb .autocard .ic{ font-size:34px; }

/* ---------- 10. 商品详情 ---------- */
.m-dl-head{
  display:flex; gap:13px; padding:13px;
  background:linear-gradient(180deg,#16131c,#0f0d14);
  border:1px solid var(--line); border-radius:4px; margin-bottom:13px;
}
.m-dl-thumb{
  width:112px; height:112px; flex:0 0 112px; border-radius:3px; overflow:hidden;
  background:#0e0c13; border:1px solid var(--hair);
}
.m-dl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.m-dl-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.m-dl-name{ font-size:15px; font-weight:900; line-height:1.34; }
.m-dl-price{ display:flex; align-items:baseline; gap:3px; }
/* 实际 DOM：<div class="m-dl-price"><span>¥168</span><small> / 小时</small>[<span style=…>原价</span>]</div>
   价格就是一个裸 <span>，没有 .now 类 —— 所以只能按位置选。 */
.m-dl-price > span:first-child{
  font-family:var(--mono); font-size:22px; font-weight:900; color:var(--brand-2);
}
.m-dl-price > small{ font-size:11px; color:var(--ink-3); }
.m-dl-meta{ display:flex; flex-wrap:wrap; gap:6px; }
.m-dl-meta .badge{ font-size:10.5px; padding:2px 8px; }
.m-dl-body{
  background:linear-gradient(180deg,#131019,#0d0b11);
  border:1px solid var(--line); border-radius:4px;
  padding:15px 16px; margin-bottom:13px;
  white-space:pre-wrap; font-size:13px; line-height:1.95; color:#cfc3be;
}

/* 注意：这里**故意不覆盖全局 .badge 配色**。
   app.css 给每种工单状态（.badge-st-*）配了不同颜色，全都覆盖成一个金色
   等于把状态区分功能搞没了 —— 那是功能，不是装饰。
   浅色小标签在暗底上看着没问题。 */

/* 工单 / 订单状态标签：暗底上必须够亮。
   app.css 里 assigned 用 #6b3fa0（深紫）、review 用 #8a5800（深棕），
   在近黑底上对比度只有 2~3:1，等于看不见 —— 而这两个恰恰是"待核验"这种关键状态，
   看不见就会漏单、忘了核验（核验通过才计工资）。这里统一换成亮色。 */
.badge-st-pending{ color:#ffc447; }
.badge-st-paid{ color:#6fb8ff; }
.badge-st-assigned{ color:#c9a2ff; border-color:rgba(201,162,255,.40); background:rgba(139,92,246,.16); }
.badge-st-running{ color:#ffd166; }
.badge-st-review{ color:#5ce1e6; border-color:rgba(92,225,230,.45); background:rgba(92,225,230,.14); }
.badge-st-done{ color:#3ee0a0; }
.badge-st-cancelled{ color:var(--ink-3); }

/* 空状态 */
.empty{ color:var(--ink-3); }

/* ---------- 11. 电脑端：左侧竖向导航 + 宽幅四列 ---------- */
@media (min-width:1000px){
  /* 内容整体右移，给左侧导航让位 */
  body.has-mtabs{ padding-bottom:0; padding-left:224px; }

  /* 顶部条：靠左，品牌在左，右侧可放东西 */
  .m-top{
    height:64px; padding:0 34px; gap:16px;
    border-bottom:1px solid var(--line);
    background:rgba(8,6,10,.82);
  }
  /* 写足权重：(0,2,0) 才能盖掉 app.css 的 `.m-top .m-name` */
  .m-top .m-name{
    flex:0 0 auto; order:-1; text-align:left;
    font-size:20px; letter-spacing:.2em; margin-right:20px;
  }
  .m-top .m-cs{
    font-size:13px; padding:8px 16px;
    margin-left:auto;   /* 把客服/更多推到右边，店名留在左边 */
  }
  .m-top .m-cs:hover{ color:var(--gold); border-color:var(--gold); }
  .m-top .m-more{ margin-left:0; font-size:14px; }

  /* 底部标签 → 左侧竖向导航栏 */
  .m-tabs{
    top:0; bottom:0; right:auto; width:224px; height:100vh;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:4px; padding:78px 12px 22px;
    border-top:none; border-right:1px solid var(--line);
    background:linear-gradient(180deg,#0c0a10,#08070b);
  }
  .m-tabs a{
    flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:12px;
    height:46px; padding:0 14px; border-radius:3px;
    font-size:14px; color:var(--ink-2);
    border-left:2px solid transparent;
    transition:background .15s, color .15s, border-color .15s;
  }
  .m-tabs a .m-i{ font-size:17px; filter:none; opacity:.9; }
  .m-tabs a:hover{ background:rgba(255,255,255,.045); color:var(--ink); }
  .m-tabs a.on{
    background:linear-gradient(90deg, rgba(255,46,77,.20), rgba(255,46,77,0));
    border-left-color:var(--brand); color:var(--gold);
  }
  .m-tabs a.on::after{ display:none; }

  /* 左侧栏底部：备案号。既填掉竖向空白，也让备案信息在每一页都看得到
     （首页底部那条是带链接的，这里只是纯文字补充）。 */
  .m-tabs::after{
    content:"湘ICP备2026052148号-1";
    margin-top:auto;
    padding:14px 14px 0;
    border-top:1px solid var(--line);
    font-size:11px; line-height:1.7; color:var(--ink-3);
    letter-spacing:.02em;
  }

  /* 内容区：居中、限宽、更宽的四列 */
  #app{
    max-width:1200px; margin:0 auto;
    padding:30px 40px 70px;
  }
  #app > .wrap{ padding:0; }

  /* 🔴 必须覆盖两个地方，否则电脑端首页还是被卡成一条 520px 的窄栏：
       app.css:411 `body.has-mtabs .m-app{max-width:520px}`  ← 首页用的是 .m-app
       app.css:414 `body.has-mtabs .wrap{max-width:520px}`   ← 订单/售后/消息用的是 .wrap
     只改 .wrap 的话，首页（客户最先看到的）依旧是手机宽度，四列铺不开。 */
  body.has-mtabs .m-app,
  body.has-mtabs .wrap{
    max-width:none;
    padding-bottom:0;
  }

  .m-grid2{ grid-template-columns:repeat(4,1fr); gap:18px; }
  .m-notice{ font-size:13px; padding:13px 18px; }

  /* ---- 搜索框：电脑上不要铺满整行，限宽居中更像正经站点 ---- */
  .m-search{
    max-width:680px; margin:0 auto 22px;
    height:48px; padding:0 18px; border-radius:6px;
  }
  /* 字号保持 16px：iPad 横屏也 ≥1000px，小于 16px 会触发 iOS 聚焦放大整页 */
  .m-search input{ font-size:16px; }

  /* ---- 广告位：不能按 16:9 铺满 ----
     内容宽 1120px 时 16:9 就是 630px 高，一屏全被广告占掉，商品全在下面。
     电脑上固定 380px 高、左右裁切，首屏才看得到商品。 */
  .m-carousel{ max-height:380px; }
  .m-slide img{
    height:380px; aspect-ratio:auto; object-fit:cover;
  }
  .m-slide .ph{ height:380px; aspect-ratio:auto; }

  /* ---- 分类条：电脑上排成一行，图标缩小，别占太多高度 ---- */
  .m-grid{
    grid-template-columns:repeat(8,1fr);
    gap:10px 6px; padding:16px 12px; margin-bottom:18px;
  }
  .m-grid a{ gap:6px; }
  .m-ico{ width:46px; height:46px; }
  .m-grid a .m-ico .m-ph{ font-size:19px; }

  .m-sect{ margin:26px 0 14px; font-size:15px; }

  .pcard{ border-radius:5px; }
  .pcard:hover{
    transform:translateY(-3px);
    border-color:rgba(255,196,71,.55);
    box-shadow:0 18px 46px rgba(0,0,0,.62), var(--glow-g);
  }
  .pcard .info .nm{ font-size:15px; min-height:40px; }
  .pcard .prow .now{ font-size:20px; }
  .pcard .info{ padding:13px 14px 15px; gap:8px; }

  /* 详情页在电脑上更宽、两栏 */
  .m-dl-head{ padding:20px; gap:20px; }
  .m-dl-thumb{ width:180px; height:180px; flex:0 0 180px; }
  .m-dl-name{ font-size:21px; }
  .m-dl-price > span:first-child{ font-size:30px; }
  .m-dl-price > small{ font-size:13px; }
  .m-dl-body{ font-size:14px; line-height:2.05; padding:22px 26px; }

  /* 鼠标才有意义的效果：键盘用户也能看到焦点 */
  a:focus-visible, button:focus-visible, .pcard:focus-visible{
    outline:2px solid var(--gold); outline-offset:3px;
  }
}