/* NWS 网站端「商品展示栏」 v3
* 纯客户端注入，服务端 HTML 不含商品内容 → 对 SEO / 爬虫零影响。
* ⚠️ 卡片类名统一用 gr- 前缀，与 ads.js/ads.css 的联盟广告体系(.goods-card*)完全隔离，避免同名覆盖。
* 桌面：核心内容区在左，商品栏在右（sticky，宽 300px，够用不抢视线）；
* 移动：所有布局容器强制单列贯通满宽，商品栏沉到内容底部，改为「横向滑动卡带」。 */
/* 自动包的「左内容 + 右商品栏」：限宽居中 → 右栏始终紧贴内容区，不随宽屏被推远 */
.page-rail { display: flex; gap: 28px; align-items: flex-start; max-width: 1160px; margin: 0 auto; }
.page-main { flex: 1 1 auto; min-width: 0; }
/* 详情/搜索页自带 .layout（main-col + side-col）：同样限宽居中，side-col 紧贴正文 */
.layout { max-width: 1160px; margin: 0 auto; }
.product-rail {
flex: 0 0 340px;
width: 340px;
align-self: flex-start;
position: sticky;
top: 88px;
display: none; /* 默认隐藏，注入成功后才显示，避免空栏占位 */
}
.product-rail.is-active { display: block; }
/* 商品列表容器（右栏或 .side-col 内通用）
* 桌面：竖向排列 + 内部滚动。加 max-height 后即使版位塞到 5~6 张也不会撑破 sticky 吸顶栏，
* 避免第 6 张被永久钉在折叠线以下滚不到（sticky 溢出坑）。 */
.goods-rail {
display: flex; flex-direction: column; gap: 12px;
max-height: calc(100vh - 120px);
overflow-y: auto; overflow-x: hidden;
padding-right: 2px;
}
.goods-rail__title {
font-size: 14px; font-weight: 700; color: #1f1f1f; margin: 0 0 2px;
display: flex; align-items: center; gap: 6px;
}
.goods-rail__title::before {
content: ""; width: 3px; height: 14px; border-radius: 2px;
background: #1677ff; display: inline-block;
}
/* 卡片（2026-10-04 三次调整，最终版）：左「完整封面」+ 右「名称/价格/介绍」横排。
* 迭代过程与踩坑（勿回退）：
* v1 左侧 116x116 方框 + img{width/height:100%} → 竖版主图被压扁、上下裁切、封面偏小
* v2 改竖版「上大图+下文字」+ height:150px → 卡片被 .goods-rail 的 max-height+overflow
* 挤压，.gr-card__body{flex:1} 高度归零，
* 文字整块消失（用户反馈"更扁了、文字没了"）
* v3（本版）横排 + 图片容器高度自适应 + body 不设 flex
* → 封面按原比例完整显示、不裁切，
* 文字始终可见，封面也足够大 */
.goods-rail .gr-card {
display: flex; flex-direction: row; gap: 12px; align-items: stretch;
text-decoration: none;
background: #fff; border: 1px solid #eee; border-radius: 12px;
padding: 10px;
transition: box-shadow .15s ease, transform .15s ease;
}
.goods-rail .gr-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .08); transform: translateY(-1px); }
/* 封面容器：宽度固定（160px，比常规缩略图明显更大）、高度 auto
* —— 让图片按自身比例撑开，整张图完整可见不裁切 */
.goods-rail .gr-card__media {
flex: 0 0 auto; width: 160px; height: auto; border-radius: 8px;
background: #fff; border: 1px solid #f2f2f2;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
/* 图片完全按原始比例显示：不设固定宽高、不裁切，容器多高图就多高 */
.goods-rail .gr-card__media img {
display: block; width: auto; height: auto;
max-width: 100%; max-height: 230px; /* 上限防超长竖图把卡片撑得过高 */
object-fit: contain;
}
/* 文字区：不再用 flex:1（那会把高度压成 0 导致文字消失），改普通流式 + 自身撑开 */
.goods-rail .gr-card__body {
flex: 1 1 auto; min-width: 0;
display: flex; flex-direction: column;
gap: 4px; align-items: flex-start; text-align: left;
}
.goods-rail .gr-card__name { font-size: 14px; font-weight: 600; color: #222; line-height: 1.35; }
.goods-rail .gr-card__price { color: #e4393c; font-weight: 700; font-size: 16px; line-height: 1.25; }
.goods-rail .gr-card__price small { font-size: 11px; font-weight: 600; margin-right: 1px; }
/* 介绍完整显示，不再截断（商品宣传语一般较短，长文案自然换行） */
.goods-rail .gr-card__desc {
font-size: 12px; color: #666; line-height: 1.55; text-align: left;
word-break: break-word;
}
/* 移动端：内容横向贯通不留白（block 流强制全宽）；
* 商品栏改为「横向滑动卡带」——手机上竖排沉底既占纵向空间又难发现，横滑更省地、可扫多件。 */
@media (max-width: 980px) {
.page-rail { display: block !important; max-width: 100% !important; }
.page-main { width: 100% !important; }
.product-rail { position: static !important; width: auto !important; margin-top: 24px; }
.layout { display: block !important; max-width: 100% !important; }
.main-col, .side-col { width: auto !important; max-width: 100% !important; }
.side-col { position: static !important; }
/* 横滑卡带：容器横向滚动，卡片定宽 */
.goods-rail {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch;
gap: 10px; padding-bottom: 6px;
max-height: none; /* 移动端取消竖向滚动，改横滑 */
}
/* 标题改为独立一行、不参与横向滚动（否则会跟着卡片被滑走）
* sticky + left:0 让它在横向滚动时固定在左侧；z-index 保证盖住滑过的卡片 */
.goods-rail__title {
position: sticky; left: 0; z-index: 2;
align-self: center;
background: #fff;
box-shadow: 6px 0 8px -6px rgba(0,0,0,.12);
padding-right: 10px;
}
/* 移动端（≤560px）：竖版卡定宽 150px。
* 2026-10-06 用户反馈"底部横排 + 竖大卡片显得又大又占屏"→ 压缩卡片尺寸：
* 定宽 150px→124px、封面限高 130px→96px，让一屏能看到更多商品、减少"占满整屏"的压迫感。
* 仍保持横滑卡带（row + overflow-x），因为窄屏 124px 放不下"左图+右文字"。 */
.goods-rail .gr-card {
flex: 0 0 124px; width: 124px;
flex-direction: column; align-items: stretch;
padding: 8px; gap: 6px;
}
.goods-rail .gr-card__media {
flex: 0 0 auto; width: 100%; height: auto;
}
.goods-rail .gr-card__media img { max-height: 96px; }
.goods-rail .gr-card__body { align-items: flex-start; }
}
/* ===================== 底部商品横带（2026-10-08 改版） =====================
商品位从「右栏」挪到「页面底部横滑卡带」：右栏整体让给广告（SSR 的 .side-col > #tu-rail），
商品在内容末尾以横向卡带呈现，桌面/移动统一，不再撑破 sticky 右栏、也不再包 main 骨架。 */
.goods-band { display: none; }
.goods-band.is-active {
display: block;
max-width: 1160px;
margin: 32px auto 0;
padding: 0 18px;
}
.goods-band .goods-rail__title {
font-size: 14px; font-weight: 700; color: #1f1f1f; margin: 0 0 10px;
display: flex; align-items: center; gap: 6px;
}
.goods-band .goods-rail__title::before {
content: ""; width: 3px; height: 14px; border-radius: 2px;
background: #1677ff; display: inline-block;
}
/* 桌面也走横向卡带：覆盖 .goods-rail 的竖向 + max-height 设置 */
.goods-band .goods-rail {
flex-direction: row; flex-wrap: nowrap;
overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch;
gap: 10px; padding-bottom: 6px; padding-right: 0;
max-height: none;
}
.goods-band .gr-card {
flex: 0 0 150px; width: 150px;
flex-direction: column; align-items: stretch;
padding: 8px; gap: 6px;
}
.goods-band .gr-card__media { flex: 0 0 auto; width: 100%; height: auto; }
.goods-band .gr-card__media img { max-height: 100px; }
.goods-band .gr-card__body { align-items: flex-start; }