/* ==========================================================================
   szwcw.store 布局优化补丁（预览专用叠加层）
   每项由 <html> 上的 opt-* class 独立控制，互不依赖。
   上线时把对应规则合并进 homepage.css / section-page.css 即可。
   ========================================================================== */

/* ---------------- 预览控制面板（不属于优化内容） ---------------- */
#opt-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 99999;
  width: 268px; max-height: calc(100vh - 32px); overflow: auto;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  font-size: 13px; color: #e8f1f8;
  background: #0d1b28; border: 1px solid rgba(120,180,230,.35);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.45);
}
#opt-panel * { box-sizing: border-box; }
#opt-panel .op-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid rgba(120,180,230,.22);
  font-weight: 700; font-size: 13.5px; letter-spacing: .3px; cursor: pointer;
}
#opt-panel .op-head .op-toggle-main {
  display: inline-flex; align-items: center; gap: 6px;
}
#opt-panel .op-body { padding: 10px 12px 12px; }
#opt-panel.op-collapsed .op-body { display: none; }
#opt-panel .op-row { display: flex; align-items: flex-start; gap: 8px; margin: 7px 0; line-height: 1.45; }
#opt-panel .op-row input { margin: 2px 0 0; width: 15px; height: 15px; accent-color: #2f8fe0; flex: 0 0 auto; }
#opt-panel .op-row label { cursor: pointer; }
#opt-panel .op-row small { display: block; color: #8fa9bf; font-size: 11.5px; margin-top: 1px; }
#opt-panel .op-sep { height: 1px; background: rgba(120,180,230,.18); margin: 10px 0 8px; }
#opt-panel .op-title { color: #7fc4f5; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; margin-bottom: 4px; }
#opt-panel .op-btn {
  display: block; width: 100%; margin-top: 4px; padding: 7px 10px;
  border: 1px solid rgba(120,180,230,.4); border-radius: 8px;
  background: rgba(47,143,224,.16); color: #dcecf8;
  font-size: 12.5px; text-align: center; cursor: pointer; text-decoration: none;
}
#opt-panel .op-btn:hover { background: rgba(47,143,224,.3); }
#opt-panel .op-btn.on { background: #2f8fe0; border-color: #2f8fe0; color: #fff; font-weight: 700; }
#opt-panel .op-nav { display: flex; gap: 6px; margin-top: 8px; }
#opt-panel .op-nav a { flex: 1; }
#opt-panel .op-hint { color: #7f97ac; font-size: 11px; margin-top: 8px; line-height: 1.5; }
@media (max-width: 640px) {
  #opt-panel { right: 8px; left: 8px; width: auto; bottom: 96px; max-height: 52vh; }
}

/* ==========================================================================
   1. opt-header —— 头部拆分：信息条滚走 + 导航吸顶收缩（169px → 72px → 56px）
   ========================================================================== */
html.opt-header .site-header { position: sticky !important; top: 0 !important; height: auto !important; }
html.opt-header main { padding-top: 0 !important; }

/* 头部内容比正文列宽：
   8 个导航项 + 品牌 + 6 个功能按钮实测需约 1300px，1240 的正文列放不下会截断，
   故头部容器单独放宽到 1440px（正文仍 1240px）。 */
html.opt-width .site-header .container,
html.opt-width .topbar .container { width: min(calc(100% - (var(--page-gutter) * 2)), 1440px) !important; }

html.opt-header .nav-wrap {
  padding: 8px 0 !important; column-gap: 12px !important; row-gap: 4px !important;
  flex-wrap: wrap !important; align-items: center !important;
}
/* 排布改为「品牌 · 导航 · 功能」三栏，导航居中 */
html.opt-header .brand { order: 1; padding: 4px 10px 4px 4px !important; gap: 9px !important; }
html.opt-header .site-nav {
  order: 2; flex: 1 1 auto !important; min-width: 0 !important;
  flex-wrap: wrap !important; justify-content: center !important;
  column-gap: 8px !important; row-gap: 2px !important;
  border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important;
}
html.opt-header .nav-actions { order: 3; gap: 8px !important; flex: 0 0 auto !important; margin-left: auto !important; }
html.opt-header .brand-mark { width: 56px !important; height: auto !important; }
/* 品牌英文名：原站本来就展示（.brand-copy 竖排：中文在上、英文在下），必须保留。
   压到 10.5px 并收紧行高/字距，保证不增加品牌总宽（中文名 17px×14 字更宽），也不撑高头部。 */
html.opt-header .brand-name-en {
  display: block !important;
  font-size: 10.5px !important;
  line-height: 1.05 !important;
  letter-spacing: .015em !important;
  color: rgba(196, 214, 228, .92) !important;
  white-space: nowrap !important;
}
html.opt-header .brand-copy { gap: 2px !important; }
html.opt-header .brand-name-cn { font-size: 17px !important; letter-spacing: .01em !important; white-space: nowrap !important; }
html.opt-header .site-nav a { padding: 5px 8px !important; min-height: 36px !important; font-size: 15px !important; white-space: nowrap !important; }
html.opt-header .search-trigger { white-space: nowrap !important; }
html.opt-header .language-switcher { max-width: 116px !important; }
html.opt-header .language-switcher select { max-width: 84px !important; }
/* 中等宽度再收一档，避免换行 */
@media (max-width: 1460px) {
  html.opt-header .site-nav a { font-size: 14px !important; padding: 5px 6px !important; }
  html.opt-header .site-nav { column-gap: 5px !important; }
  html.opt-header .brand-name-cn { font-size: 16px !important; }
  html.opt-header .language-switcher { max-width: 108px !important; }
  html.opt-header .language-switcher select { max-width: 76px !important; }
}
/* 窄桌面（1181–1330）再收一档，让导航仍保持单行；再窄由原站汉堡菜单接管 */
@media (min-width: 1181px) and (max-width: 1330px) {
  html.opt-header .site-nav a { font-size: 13.5px !important; padding: 5px 5px !important; }
  html.opt-header .site-nav { column-gap: 3px !important; }
  html.opt-header .brand-name-cn { font-size: 15px !important; }
  html.opt-header .brand-name-en { font-size: 9.5px !important; }
  html.opt-header .brand-mark { width: 48px !important; }
  html.opt-header .language-switcher { max-width: 90px !important; }
  html.opt-header .language-switcher select { max-width: 58px !important; }
  html.opt-header .nav-wrap { column-gap: 8px !important; }
}
/* 滚动后二次收缩 */
html.opt-header.is-scrolled .nav-wrap { padding: 4px 0 !important; }
html.opt-header.is-scrolled .brand-mark { width: 44px !important; }
html.opt-header.is-scrolled .brand-name-cn { font-size: 16px !important; }
html.opt-header.is-scrolled .brand-name-en { font-size: 9.5px !important; }
html.opt-header.is-scrolled .site-nav a { min-height: 32px !important; }

/* 移动端：压到单行约 56px */
@media (max-width: 900px) {
  html.opt-header .nav-wrap { flex-wrap: nowrap !important; padding: 5px 0 !important; gap: 8px !important; }
  html.opt-header .brand { padding: 2px 8px 2px 2px !important; gap: 7px !important; border-radius: 12px !important; }
  html.opt-header .brand-mark { width: 42px !important; }
  html.opt-header .brand-name-cn { font-size: 14.5px !important; text-shadow: none !important; }
  html.opt-header .brand-name-en { font-size: 9px !important; letter-spacing: 0 !important; }
  html.opt-header .brand-copy { padding-left: 8px !important; }
  /* 移动端：nav-actions 强制单行，语言切换等收进菜单 */
  html.opt-header .site-header .nav-actions {
    display: flex !important; flex-wrap: nowrap !important;
    align-items: center !important; gap: 8px !important; margin-left: auto !important;
    /* 原站移动端把 nav-actions 设成 100% 宽的 grid，若让它保留 100% 宽会顶出屏幕 */
    flex: 0 0 auto !important; width: auto !important; min-width: 0 !important;
  }
  html.opt-header .site-header .nav-actions > *:not(.nav-hotline):not(.nav-wechat):not(.nav-whatsapp):not(.menu-toggle) {
    display: none !important;
  }
  /* 特异性高于 opt-touch 的 44px，移动端空间有限取 40px 折中 */
  html.opt-header .site-header .nav-hotline,
  html.opt-header .site-header .nav-wechat,
  html.opt-header .site-header .nav-whatsapp {
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
  }
  html.opt-header .site-header .menu-toggle { padding: 0 !important; width: 40px !important; height: 40px !important; }
  html.opt-header .nav-hotline img { width: 22px !important; height: auto !important; }
}
/* 320–380 超窄屏：图标再收一档，保证单行不出屏 */
@media (max-width: 380px) {
  html.opt-header .site-header .nav-hotline,
  html.opt-header .site-header .nav-wechat,
  html.opt-header .site-header .nav-whatsapp { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
  html.opt-header .site-header .menu-toggle { width: 36px !important; height: 36px !important; min-width: 36px !important; }
  html.opt-header .brand { gap: 6px !important; }
  html.opt-header .brand-mark { width: 36px !important; }
  html.opt-header .brand-name-cn { font-size: 14px !important; }
}

/* ==========================================================================
   2. opt-cta —— 首屏 CTA 收敛：1 主 + 1 次，其余降级为文字链
   ========================================================================== */
html.opt-cta .hero-actions a:nth-child(n+3),
html.opt-cta .hero-quick-links a {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #8fd8ff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  min-height: 0 !important; height: auto !important;
  padding: 4px 2px !important;
  font-size: 14px !important;
  align-self: center !important;
}
html.opt-cta .hero-quick-links { margin-top: 2px !important; gap: 18px !important; }

/* ==========================================================================
   3. opt-width —— 容器收窄 1240px + 正文行长 68ch
   ========================================================================== */
html.opt-width { --container: 1240px !important; }
html.opt-width .about-layout p,
html.opt-width .case-grid p,
html.opt-width .section-heading > p:not(.eyebrow),
html.opt-width .hero-copy p,
html.opt-width .rfq-template-copy p { max-width: 68ch !important; }
/* 「企业实力」段保留原站的 0.78 : 1.22 列比例（不要改成 1:1 —— 那会把视频压窄，
   视频高度按 16:9 跟着变矮，右列下方会留出约 176px 空白）。 */
html.opt-width .strengths-layout { grid-template-columns: minmax(0, 0.78fr) minmax(520px, 1.22fr) !important; }
/* 视频卡拉伸填满整行：视频本体仍按 16:9 居中，不裁切、不变形 */
@media (min-width: 1181px) {
  html.opt-width #strengths .company-video-card {
    aspect-ratio: auto !important; align-self: stretch !important; min-height: 0 !important;
  }
  html.opt-width #strengths .company-video-stage {
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  html.opt-width #strengths .company-video-card video { max-height: 100% !important; }
}
/* 产品页正文同样受 68ch 约束 */
html.opt-width .section-heading > p:not(.eyebrow),
html.opt-width .rfq-form-grid > p,
html.opt-width .product-intro > p { max-width: 68ch !important; }

/* -------- 3.1 窄屏（≤640）：恢复被「guardrail」抹掉的页边距 --------
   原站 styles.css:6016 给 ≤640 的 .container 定义过 width: calc(100% - 28px)，
   但 styles.css:6826 后面那块 “Narrow-screen guardrails” 又把它覆盖成
   width: 100%，于是手机端**所有页面**（首页 / 产品体系页 / 详情页）的容器
   变成满幅，标题、正文、按钮全部贴到屏幕边缘，首字母还会被裁掉。
   这里按原站本意把 28px（左右各 14px）页边距补回来；guardrail 里的
   overflow-x: hidden 保持不变，所以不会重新引入横向溢出。 */
@media (max-width: 640px) {
  html.opt-width .container,
  html.opt-width .hero-grid {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--container)) !important;
    max-width: none !important;
  }
}

/* ==========================================================================
   4. opt-faq —— FAQ 改为 2 列（原 auto-fit 在宽屏变 4 列、每列仅 318px）
   ========================================================================== */
html.opt-faq .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 860px) {
  html.opt-faq .faq-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ==========================================================================
   5. opt-scenarios —— 场景卡 2 列 → 3 列（整段 1858px → 约 1200px）
   ========================================================================== */
html.opt-scenarios .home-scenarios-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html.opt-scenarios .home-scenario-card { aspect-ratio: 4 / 3 !important; }
html.opt-scenarios .home-scenario-caption strong { font-size: 20px !important; }
@media (max-width: 1180px) {
  html.opt-scenarios .home-scenarios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   6. opt-metrics —— 数据指标卡精简（4 → 3 张，去掉条件限定长文案）
   ========================================================================== */
html.opt-metrics .hero-metrics-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html.opt-metrics .hero-metrics-row article:nth-child(n+4) { display: none !important; }
html.opt-metrics .hero-grid:has(.hero-visual) .hero-metrics-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 560px) {
  html.opt-metrics .hero-metrics-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   7. opt-touch —— 触摸目标补到 44px
   注意：不能给 .menu-toggle 强制 display，否则桌面端会凭空多出一个汉堡按钮
   （原站桌面端 display:none），既占 56px 又看不出是按钮。
   ========================================================================== */
html.opt-touch .nav-hotline,
html.opt-touch .nav-wechat,
html.opt-touch .nav-whatsapp {
  min-width: 44px !important; min-height: 44px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
html.opt-touch .menu-toggle { min-width: 44px !important; min-height: 44px !important; }
html.opt-touch .floating-contact a { min-height: 44px !important; }
/* 导航项做到 44px 只在触屏设备上生效，桌面端保持 36px 的紧凑高度 */
@media (pointer: coarse) {
  html.opt-touch .site-nav a { min-height: 44px !important; }
}

/* ==========================================================================
   8. opt-font —— 12px 小字提到 13px
   ========================================================================== */
html.opt-font .hero-metrics-row span,
html.opt-font .hero-metrics-row small,
html.opt-font .footer-compliance,
html.opt-font .topbar-meta span { font-size: 13px !important; }

/* ==========================================================================
   9. opt-entry —— 首页产品入口区（DOM 由 optimize.js 注入）
   注：此处不再放认证条——认证信息已在顶栏细条与「企业实力」段的认证面板出现，
      同一页重复三次以上会稀释可信度。
   ========================================================================== */
.opt-entry-section { padding: 56px 0 26px !important; }
.opt-entry-head { margin-bottom: 20px; }
.opt-entry-head h2 { font-size: clamp(26px, 2.6vw, 38px) !important; margin: 6px 0 8px; }
.opt-entry-head p { max-width: 68ch; color: #334e68 !important; margin: 0; }
.opt-entry-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px; align-items: stretch !important; }
@media (max-width: 1180px) { .opt-entry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 700px) {
  /* 移动端改横向滑动，避免 5 张卡纵向堆叠把页面拉长 */
  .opt-entry-grid {
    display: flex !important; overflow-x: auto; gap: 12px;
    padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .opt-entry-card { flex: 0 0 78%; scroll-snap-align: start; }
  .opt-entry-card h3 { font-size: 16px !important; }
  .opt-entry-card p { font-size: 13px !important; }
  .opt-entry-section { padding: 36px 0 18px !important; }
}
/* 卡片：纵向 flex，规格与说明在上，跳转链接用 margin-top:auto 压到底部，
   5 张卡的链接因此水平对齐（原实现跟随文字流，长文短文的链接位置参差不齐） */
.opt-entry-card {
  display: flex !important; flex-direction: column;
  padding: 18px 16px 0 !important;
  border-radius: 14px; text-decoration: none;
  background: #fff; border: 1px solid rgba(16,42,67,.1);
  box-shadow: 0 8px 22px rgba(11,32,52,.08); transition: transform .2s ease, box-shadow .2s ease;
}
.opt-entry-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(11,32,52,.14); }
.opt-entry-card h3 { margin: 0 0 7px !important; font-size: 17px; line-height: 1.35; color: #0f3a5f; }
.opt-entry-card .oe-spec { display: block; color: #1f6ea8; font-size: 12.5px; font-weight: 700; margin-bottom: 9px; }
.opt-entry-card p { margin: 0 0 14px !important; font-size: 13.5px; color: #4a6274 !important; line-height: 1.6; }
.opt-entry-card .oe-go {
  /* 负外边距让分隔线通栏，与卡片内边距对齐 */
  margin: auto -16px 0 !important; padding: 11px 16px 12px;
  display: flex !important; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(16,42,67,.09);
  color: #0f6ea8; font-size: 13.5px; font-weight: 700;
}
.opt-entry-card .oe-go::after { content: "→"; font-size: 15px; transition: transform .2s ease; }
.opt-entry-card:hover .oe-go::after { transform: translateX(4px); }

/* ==========================================================================
   10. opt-footer —— 页脚扩为 4 列 + 完整联系方式（DOM 由 optimize.js 注入）
   ========================================================================== */
.opt-footer-4 { padding: 42px 0 30px !important; }
.opt-footer-grid { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1.3fr !important; gap: 28px; }
@media (max-width: 900px) { .opt-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 560px) { .opt-footer-grid { grid-template-columns: minmax(0,1fr) !important; } }
.opt-footer-grid h4 { margin: 0 0 10px; font-size: 15px; color: #fff; font-weight: 700; }
.opt-footer-grid ul { list-style: none; margin: 0; padding: 0; }
.opt-footer-grid li { margin: 5px 0; font-size: 13.5px; }
.opt-footer-grid a { color: rgba(235,246,255,.9) !important; text-decoration: none; }
.opt-footer-grid a:hover { text-decoration: underline; }
.opt-f-contact p { margin: 5px 0; font-size: 13.5px; color: rgba(235,246,255,.88) !important; }
.opt-f-bottom {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  font-size: 12.5px; color: rgba(230,244,255,.75) !important;
}

/* ==========================================================================
   11. opt-prodimg —— 产品图去掉常驻 scale(1.12)，改为仅 hover 放大
   ========================================================================== */
html.opt-prodimg .product-card img,
html.opt-prodimg .product-media img,
html.opt-prodimg .product-grid img {
  transform: none !important;
  transition: transform .35s ease !important;
}
html.opt-prodimg .product-card:hover img { transform: scale(1.05) !important; }

/* ==========================================================================
   12. opt-prodmeta —— 恢复被 display:none 隐藏的三组决策信息
   ========================================================================== */
html.opt-prodmeta .product-meta,
html.opt-prodmeta .product-support,
html.opt-prodmeta .product-facts {
  display: block !important;
  margin: 10px 0 !important;
  padding: 10px 12px !important;
  border-radius: 10px;
  background: rgba(15,58,95,.05);
  border: 1px solid rgba(15,58,95,.1);
}

/* ==========================================================================
   13. opt-prodcard —— 产品卡两态（列表态紧凑 + 点击展开）+ 品类锚点导航
   ========================================================================== */
html.opt-prodcard .product-grid { gap: 16px !important; }
html.opt-prodcard .product-card { position: relative; }
html.opt-prodcard .product-card.is-collapsed .product-index,
html.opt-prodcard .product-card.is-collapsed ul,
html.opt-prodcard .product-card.is-collapsed .product-meta,
html.opt-prodcard .product-card.is-collapsed .product-support,
html.opt-prodcard .product-card.is-collapsed .product-facts { display: none !important; }
html.opt-prodcard .product-card.is-collapsed .product-actions a:nth-child(n+3) { display: none !important; }
html.opt-prodcard .product-card.is-collapsed > p { display: none !important; }
.opt-card-more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  padding: 5px 10px; border: 1px dashed rgba(15,58,95,.35); border-radius: 999px;
  background: transparent; color: #0f5d8c; font-size: 12.5px; cursor: pointer;
}
.opt-prodnav {
  position: sticky; top: 0; z-index: 40;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 0; margin-bottom: 6px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(16,42,67,.1);
}
.opt-prodnav a {
  padding: 5px 11px; border-radius: 999px; font-size: 13px; text-decoration: none;
  background: #eef5fa; color: #0f4d75; border: 1px solid rgba(15,77,117,.14);
}
.opt-prodnav a:hover { background: #d9ebf7; }

/* ==========================================================================
   5. opt-pdphero —— 产品详情页首屏改两列（左文案 + 右产品图）

   根因：styles.css 里 .hero-grid 默认 grid-template-columns: minmax(0,1fr)
   即单列，只有 .localized-page（本地化首页）才在 ≥1181px 切成两列。
   产品详情页 body 是 .fiberglass-product-page，拿不到那套规则 → hero 永远
   单列、产品图掉到文案下方；而 .hero-image-card 只在 .localized-page 下才
   有 height 限制，于是卡片高度由原图比例决定，被 object-fit:cover 一路撑开：
   ptfe-tube.webp（790×951 竖图）那一页 hero 高 1901px、图片卡 1245×1519。
   ========================================================================== */

/* -------- 5.0 标题字号：全宽统一，避免 1024–1180 反而比宽屏更大 --------
   原站 .hero h1 是 clamp(34px, 4.9vw, 60px)：1180px 时约 57.8px，而 ≥1181px
   时本层把它压到 36px —— 结果是「屏幕越窄、标题越大」，并在 1181px 处有
   一次肉眼可见的跳变（57.8 → 36）。这里把同一套 clamp 应用到所有宽度，
   ≤900px 再由 5.3 覆盖成更小的一档，保证字号随宽度单调变化。 */
html.opt-pdphero .hero h1 {
  max-width: 680px !important;
  font-size: clamp(34px, 3.05vw, 46px) !important;
  line-height: 1.06 !important;
}

/* -------- 5.1 宽屏：两列 -------- */
@media (min-width: 1181px) {
  html.opt-pdphero .hero { padding: 46px 0 42px !important; }
  html.opt-pdphero .hero-grid {
    grid-template-columns: minmax(0, 0.98fr) minmax(420px, 0.92fr) !important;
    gap: clamp(36px, 4.2vw, 68px) !important;
    align-items: center !important;
  }
  html.opt-pdphero .hero-copy { max-width: 680px !important; }
  html.opt-pdphero .hero-text {
    max-width: 640px !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
  }
  /* 图片卡：固定 4:3 + 限高，图片始终按卡片尺寸裁切 */
  html.opt-pdphero .hero-panel { width: 100% !important; margin: 0 !important; }
  html.opt-pdphero .hero-image-card {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 470px !important;
    margin: 0 !important;
  }
  html.opt-pdphero .hero-image-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  html.opt-pdphero .hero-actions { margin-top: 22px !important; }
  html.opt-pdphero .hero-trustbar { margin-top: 14px !important; }
}

/* -------- 5.2 中屏（≤1180）：图片回到文案下方，但统一限高 -------- */
@media (max-width: 1180px) {
  html.opt-pdphero .hero-copy { max-width: 100% !important; }
  html.opt-pdphero .hero-panel { width: 100% !important; }
  html.opt-pdphero .hero-image-card {
    height: clamp(220px, 32vw, 340px) !important;
    margin: 26px 0 0 !important;
  }
  html.opt-pdphero .hero-image-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* -------- 5.3 窄屏（≤900） -------- */
@media (max-width: 900px) {
  html.opt-pdphero .hero { padding: 32px 0 26px !important; }
  html.opt-pdphero .hero h1 { font-size: clamp(28px, 8vw, 34px) !important; }
  html.opt-pdphero .hero-image-card { height: clamp(180px, 46vw, 260px) !important; }
}