@charset "utf-8";
/* 详情页「网址二维码」2026-09-21（product.html / news.html 专用，不动 yunu.css）
   形态＝面包屑行(.yunu-curmbs)最右端一行小字「手机访问此页」，鼠标移上去才弹出二维码：
   不占正文地方、不遮挡内容。二维码内容仍是 <link rel="canonical"> 那个干净的伪静态地址。
   ★ 移动端整行由 yunu.css 里的 .yunu-curmbs{display:none}(≤767px) 一并隐藏，
     JS 另有 matchMedia('(max-width:767px)') 兜底 —— 两层断点边界一致。 */

/* 触发文字：浮动到面包屑第一行最右端。
   ★ 这个 include 必须放在 .yunu-curmbs 的【最前面】：浮动盒要排在行内内容之前才落在第一行，
     写在后面会被前面的文字顶到下一行去。
   ★ 这里【不要用 <span> 包文字】：.yunu-curmbs span 带 (0,1,1) 的实心竖条样式，会串进来。 */
.detail-qr{position:relative;float:right;font-size:12px;line-height:20px;color:#999;
  cursor:default;border-bottom:1px dashed #c9c9c9;padding-bottom:1px}
.detail-qr:hover{color:#c8161d;border-bottom-color:#c8161d}

/* 弹出层：绝对定位 ⇒ 不占文档流；visibility 收起 ⇒ 不挡鼠标、不抢先吃掉 hover。
   ★ 用 visibility 而不是 display:none —— 布局始终在，canvas 该画就画得出来。
   ★ padding-top 是"过桥"：鼠标从文字往下移进面板时不会中途离开 hover 区域而闪掉
     （弹出层是 .detail-qr 的后代，悬停它同样让 .detail-qr:hover 成立）。 */
.detail-qr-pop{position:absolute;right:0;top:100%;z-index:9999;padding-top:8px;
  visibility:hidden;opacity:0;transition:opacity .15s ease}
.detail-qr:hover .detail-qr-pop{visibility:visible;opacity:1}

.detail-qr-panel{width:132px;padding:8px 6px 6px;text-align:center;
  background:#fff;border:1px solid #ddd;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.detail-qr-code{width:116px;height:116px;margin:0 auto}
/* qrcodejs 会生成 canvas（table 兜底时是 <table>），按住尺寸防止被全局 img/table 规则缩放 */
.detail-qr-code canvas,.detail-qr-code img{display:block;width:116px!important;height:116px!important;margin:0 auto}
/* ★ 显式写全：这段 <p> 落在 .yunu-curmbs 里，同层还有 .yunu-curmbs span 这类后代规则，
   而"覆盖"只覆盖我【声明过】的属性 —— 没声明的会照旧漏进来（上一版就是被 min-height:250px 撑爆的） */
.detail-qr-panel p{margin:6px 0 0;min-height:0;padding:0;font-size:12px;color:#666;line-height:1.5;text-align:center}