/* 厂家能力频道（/manufacturers 列表 + /manufacturers/{id} 厂家店铺）
   版式取自原型 pc-manufacturers.html 与 pc-vendor.html；类名一律带 mfr- 前缀：
   本文件排在 commerce.css 之后（见 global_robot.go 的 writeRobotHTML），但 commerce.css
   对 .card/.side/.tag/.hero/.crumb 等写了大量 !important，随手取短类名会被整条接管
   （与 jobs.css 同一套约定）。

   hero 的通栏浅色带样式仍由 commerce.css 统一提供（用户 2026-09-29 口径：hero 样式不变、
   只换内容），这里只排 hero 内部新加的内容，以及详情页的信息卡 / 在租设备区。 */

/* ---------- hero 内容（列表页 .channel-hero 与详情页 .hero 共用） ---------- */
.mfr-kicker{font-size:12.5px;font-weight:800;letter-spacing:2.4px;color:#c81623;margin:0 0 10px}
.mfr-hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.mfr-hero-acts a{height:46px;padding:0 24px;border-radius:9px;border:1px solid #f3cbc6;background:#fff;color:#d02b23;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.mfr-hero-acts a:hover{border-color:#E63939}
.mfr-hero-acts a.p{background:linear-gradient(135deg,#FF6B5B,#E63939);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(230,57,57,.22)}
.mfr-hero-acts a.p:hover{color:#fff}
.mfr-hero-pts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:18px}
.mfr-hero-pts span{font-size:14.5px;color:#606a78}

/* ---------- 面包屑 ---------- */
.mfr-crumb{font-size:14.5px;color:#9A9AA5;padding:20px 0 16px}
.mfr-crumb a:hover{color:#E63939}
.mfr-crumb b{color:#55585F;font-weight:600}
.mfr-crumb span{margin:0 8px;color:#c6c9d0}

/* ---------- 详情页：厂家基本信息卡 ---------- */
/* 同列表页：通栏 hero 自身没有下边距，紧接的信息卡不补上边距就会贴死（实测 gap=0）。 */
.mfr-page{margin-top:24px;padding-bottom:56px}
.mfr-top{background:#fff;border-radius:14px;box-shadow:var(--gr-card-shadow);padding:26px 28px;display:flex;gap:24px;align-items:flex-start;margin-bottom:34px}
.mfr-logo{width:84px;height:84px;border-radius:18px;background:linear-gradient(135deg,#FF6B5B,#E63939);color:#fff;font-size:34px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mfr-hd{flex:1;min-width:0}
/* 名称行：h1 只装厂家名（徽标是兄弟节点）—— 徽标塞进 h1 里会让标题读成
   「深圳勇艺达机器人有限公司已认证能力节点」。 */
.mfr-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mfr-name{font-size:25px;font-weight:800;color:#1B1B1F;line-height:1.4;margin:0}
.mfr-badge{font-size:12.5px;font-weight:700;color:#1F9D57;background:#EAF7F0;border-radius:6px;padding:4px 10px}
.mfr-desc{font-size:15px;color:#55585F;line-height:1.85;margin:12px 0 0}
.mfr-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.mfr-tag{font-size:13px;font-weight:600;color:#E63939;background:#FDEDED;border-radius:20px;padding:5px 14px;white-space:nowrap}
.mfr-stats{display:flex;margin-top:20px;background:linear-gradient(180deg,#FBFBFC,#F6F7F9);border:1px solid #F2F3F5;border-radius:10px;padding:12px 0}
.mfr-s{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 20px;border-left:1px solid #F2F3F5}
.mfr-s:first-child{border-left:0}
.mfr-s b{display:flex;align-items:baseline;font-size:23px;font-weight:800;color:#E63939;line-height:1.15;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.mfr-s b i{font-style:normal;font-size:13px;font-weight:700;margin-left:2px}
.mfr-s b.z{color:#B4B5BE}
.mfr-s b.tp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:26px;align-self:flex-start;margin-top:2px}
.mfr-s b.tp i{font-size:12.5px;font-weight:600;color:#E63939;background:#FDEDED;border:1px solid #FFC9C4;border-radius:6px;padding:3px 9px;margin:0;white-space:nowrap}
.mfr-s span{font-size:13px;color:#9A9AA5;margin-top:6px}
.mfr-acts{display:flex;flex-direction:column;gap:10px;flex-shrink:0;width:190px}
.mfr-acts a,.mfr-acts button{height:46px;border:0;border-radius:9px;font-size:15px;font-weight:700;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;cursor:pointer}
.mfr-acts .a1{background:linear-gradient(135deg,#FF6B5B,#E63939);color:#fff;box-shadow:0 5px 14px rgba(230,57,57,.22)}
.mfr-acts .a1:hover{color:#fff;filter:brightness(1.04)}
.mfr-acts .a1 svg{width:17px;height:17px;flex-shrink:0}
.mfr-acts .a1[disabled]{opacity:.72;cursor:default}
/* 已关注：浅红底 + 红字、星标实心（原型 pc-vendor.html 的 .v-acts .a1.on） */
.mfr-acts .a1.on{background:#FDEDED;color:#E63939;border:1px solid #FFC9C4;box-shadow:none}
.mfr-acts .a1.on svg{fill:currentColor}
.mfr-acts .a2{background:#FDEDED;color:#E63939}
.mfr-acts .a3{background:#fff;border:1px solid #ECECF0;color:#55585F}
.mfr-acts .a3:hover{border-color:#FFC9C4;color:#E63939}

/* ---------- 详情页：在租设备 ---------- */
.mfr-sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.mfr-sec-head .t{font-size:26px;font-weight:800;letter-spacing:-.3px;color:#1B1B1F;display:flex;align-items:center;gap:12px}
.mfr-sec-head .t i{width:5px;height:24px;border-radius:3px;background:#E63939;display:inline-block}
.mfr-sec-head .more{font-size:15.5px;font-weight:800;color:#E63939}
.mfr-sec-head .c{font-size:14.5px;color:#9A9AA5}
.mfr-sec-head .r{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* ---------- 详情页：厂家供求（原型 pc-vendor.html 的 .lrow） ----------
   供应/求购用同一套浅红（与 /procurement 的「求购」标签同色系），靠左侧「供 / 求」字与右侧动作文案区分。 */
.mfr-lrow{background:#fff;border-radius:14px;box-shadow:var(--gr-card-shadow);padding:22px 26px;display:flex;gap:20px;margin-bottom:16px;transition:transform .14s,box-shadow .14s}
.mfr-lrow:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(27,27,31,.06),0 16px 36px rgba(27,27,31,.1)}
.mfr-lrow-ico{width:64px;height:64px;border-radius:12px;background:#fff0ec;color:#d51d25;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}
.mfr-lrow-bd{flex:1;min-width:0}
.mfr-lrow-ti{font-size:19px;font-weight:800;color:#1B1B1F;line-height:1.4}
.mfr-lrow-ds{font-size:15px;color:#55585F;line-height:1.7;margin-top:8px}
.mfr-lrow-mt{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:12px;font-size:14px;color:#9A9AA5}
.mfr-lrow-tag{font-size:13px;font-weight:600;color:#E63939;background:#FDEDED;border-radius:6px;padding:4px 10px}
.mfr-lrow-pr{color:#E63939;font-weight:800;font-size:17px}
.mfr-lrow-arr{align-self:center;flex-shrink:0;color:#9A9AA5;font-size:14px;font-weight:700;white-space:nowrap}
.mfr-empty{background:#fff;border-radius:14px;box-shadow:var(--gr-card-shadow);padding:54px 24px;text-align:center}
.mfr-empty b{display:block;font-size:19px;font-weight:800;color:#1B1B1F}
.mfr-empty span{display:block;font-size:14.5px;color:#9A9AA5;margin-top:10px}
.mfr-empty a{display:inline-flex;align-items:center;height:44px;padding:0 22px;margin-top:18px;border-radius:9px;background:#FDEDED;color:#E63939;font-size:15px;font-weight:700}

/* ---------- 列表页（/manufacturers）：筛选卡之后的横排厂家卡 ----------
   版式照原型 pc-manufacturers.html 的 .mcard；指标条复用上面详情页的 .mfr-stats/.mfr-s
   （原型两张卡也是同一套视觉，不另写一份）。筛选卡本身来自 rental-filter.css。 */
/* hero 是通栏带（自身无下边距），筛选卡不补上边距就会贴死在它的下边缘上。
   24px 与 /robots 的 `.r-market{margin-top:24px}` 一致 —— 同一张筛选卡，同样的间距。 */
.mfr-list{margin-top:24px;padding-bottom:56px}
.mfr-mcard{background:#fff;border-radius:14px;box-shadow:var(--gr-card-shadow);padding:24px 26px;display:flex;gap:22px;margin-bottom:16px;transition:transform .14s,box-shadow .14s}
.mfr-mcard:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(27,27,31,.06),0 16px 36px rgba(27,27,31,.1)}
.mfr-mcard-av{width:70px;height:70px;border-radius:14px;background:linear-gradient(135deg,#FF6B5B,#E63939);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800}
.mfr-mcard-bd{flex:1;min-width:0}
/* 厂家头像（列表卡与详情页信息卡共用一套规则）：**二选一**，不是叠加 ——
   商家上传了 logo 就只有 <img>（模板不再渲染首字），没上传才渲染首字 + 红渐变底。
   与商品详情页的 `.ent .av`、收银台的 `.supplier-logo` 同一口径（都是 either/or）。 */
.mfr-mcard-av,.mfr-logo{position:relative;overflow:hidden}
/* 有 logo 时（模板加 .has-logo）底**整块刷白**。
   ⚠️ 不能只让 img 自己刷白底：容器圆角裁切 + img 自己的 border-radius 是两层圆角，
   四角各会留约 1px 抗锯齿缝，透出底下那条红渐变（2026-09-29 用户报「四个角还有红边」）。
   底色一起刷白后，缝也是白的；透明 logo 的透明区域同样落在白色上。 */
.mfr-mcard-av.has-logo,.mfr-logo.has-logo{background:#fff}
/* ⚠️ 兼容**旧 DOM** 的兜底，别删：站内契约是「静态先发、二进制后发」，中间那段时间新 CSS 配旧模板
   （首字垫在 img 下面、没有 .has-logo）会退回红底；浏览器缓存住旧 HTML 时同理
   （2026-09-29 用户就撞上了这一档：`?v=` 没变，页面还是旧 DOM，看上去像「改坏了」）。
   `:has(img)` 让「有图就是白底」不依赖模板版本；旧 DOM 里的首字是容器给的 #fff 白字，
   落在白底上自然看不见，不需要再单独隐藏。站内多处已在用 :has()（marketplace-compact / rental-checkout）。 */
.mfr-mcard-av:has(img),.mfr-logo:has(img){background:#fff}
.mfr-mcard-av img,.mfr-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mfr-mcard-nm{font-size:20px;font-weight:800;color:#1B1B1F;line-height:1.4}
.mfr-mcard-ds{font-size:15px;color:#55585F;line-height:1.7;margin-top:9px}
.mfr-mcard .mfr-stats{margin-top:16px}
.mfr-mcard-act{flex-shrink:0;align-self:center;height:46px;padding:0 22px;border-radius:9px;background:linear-gradient(135deg,#FF6B5B,#E63939);color:#fff;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-shadow:0 3px 10px rgba(230,57,57,.22)}
.mfr-mcard:hover .mfr-mcard-act{filter:brightness(1.04);color:#fff}

@media(max-width:900px){
  .mfr-kicker{letter-spacing:1.8px}
  .mfr-top{flex-wrap:wrap}
  .mfr-acts{width:100%;flex-direction:row}
  .mfr-acts a,.mfr-acts button{flex:1}
  .mfr-stats{flex-wrap:wrap;padding:10px 0}
  .mfr-s{flex:1 1 45%;padding:8px 16px}
  .mfr-sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  .mfr-mcard{flex-wrap:wrap}
  .mfr-mcard-act{width:100%;align-self:stretch}
  .mfr-lrow{flex-wrap:wrap}
  .mfr-lrow-arr{align-self:flex-start}
}