/**
 * hp-responsive.css — 响应式与排版补丁（在原站 CSS 之上的适配，不影响桌面原生版式）
 * ---------------------------------------------------------------------------
 * 1. 产品详情页「产品参数」表使用固定列宽（colgroup ≈ 957px），
 *    在 ≤1359px 视口下会撑破 .product-details 卡片造成整页横向滚动。
 *    这里让参数表在卡片容器内横向滑动：版式、列宽与桌面完全一致，
 *    仅窄屏时出现容器内滚动条（手机/平板上习惯的交互）。
 * 2. 空图片容器占位（.hp-img-placeholder）：源站部分卡片图在源站即 404，
 *    修复后卡片图区为空，渲染期注入品牌 logo 占位，这里负责其观感。
 */

.product-details .content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 触屏设备上隐藏滚动条但保留滑动（避免占位破坏卡片圆角） */
@media (hover: none) and (pointer: coarse) {
  .product-details .content::-webkit-scrollbar {
    height: 0;
  }
}

/* ---- 空图片容器的品牌占位 ---- */
.hp-img-placeholder {
  display: block;
  width: 46%;
  max-width: 190px;
  margin: 0 auto;
  padding: 34px 0;
  opacity: .32;
}

.img:has(> .hp-img-placeholder) {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f5f9;
}

/* ---- 页脚友情链接（后台「网站参数」配置） ---- */
.hp-fl {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 12px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .75);
}
.hp-fl-t { margin-right: 6px; }
.hp-fl a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  margin-right: 12px;
  white-space: nowrap;
}
.hp-fl a:hover { color: #fff; text-decoration: underline; }