/* ==========================================================================
   PC 产品库 UI 改版（Phase 2–5）
   --------------------------------------------------------------------------
   作用域：body[data-page="products"]（产品库页面根节点），本文件由 products.html
   在全部样式之后引入，作为最后一层视觉覆盖。

   边界（务必遵守）：
   - 只改布局 / 视觉 / 交互表现，不改任何业务逻辑、数据结构、筛选实现；
   - 不写全局选择器（body{}、.card{} 等），不重写全局 Design Token；
   - 不动首页与全站共享文件；手机端走 mobile-products.html，本文件不作用于 mobile-page。
   - 隔离机制：本文件**只在 products.html 引入**（mobile-products.html 不含此引用）。
     注意 mobile-products.html 的 body 也带 data-page="products"，所以**不要**把这个
     <link> 复制到手机页，否则下列规则会一并生效；如需跨页复用，请先给选择器补上
     :not(.mobile-page) 守卫。
   ========================================================================== */

/* ---------- 0. 产品库局部变量（只挂在本页根节点，不污染 :root） ---------- */
body[data-page="products"] {
  --products-brand: #00aceb;
  --products-brand-hover: #009bd4;
  --products-brand-soft: #eaf9ff;
  --products-brand-softer: #f3fbfe;
  --products-bg: #f7f9fc;
  --products-card: #ffffff;
  --products-text: #172033;
  /* B1B2: alias 到 ink-muted（#667085 → #2a5f7a；catalog 次级文本统一，对比度提升） */
  --products-text-2: var(--ink-muted);
  --products-text-3: #4A5C6E;
  --products-border: #e7edf3;
  --products-shadow-hover: 0 8px 24px rgba(23, 32, 51, .06);
  --products-header-offset: 84px;
  /* 页面底色走中性浅灰白，蓝色只作强调，不做整页底色 */
  background: var(--products-bg) !important;
}

/* ---------- 1. Hero（轻量入口，不是大 Banner） ---------- */
body[data-page="products"] .hero {
  padding: 12px 0 0;
}

body[data-page="products"] .hero-card {
  padding: 16px 32px 18px !important;
  border-radius: 14px !important;
  background: #fbfdfe !important;
  border: 1px solid rgba(231, 237, 243, .9) !important;
  box-shadow: none !important;
}

/* 检索模块（结构沿用既有实现，仅视觉）
   注意：ios-glass-theme.css 里有 `body[data-page="products"] .hero-product-search{margin:0!important}`
   会抹掉居中，这里用带 :not(.mobile-page) 的更高特异性夺回来；
   本文件的同类规则**不要**低于该特异性，否则会被旧层压住。 */
body[data-page="products"]:not(.mobile-page) .hero-product-search {
  width: min(760px, 100%) !important;
  margin-inline: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

body[data-page="products"]:not(.mobile-page) .hero-product-search h2 {
  font-size: clamp(22px, 2vw, 26px) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
  color: var(--products-text) !important;
}

body[data-page="products"] .hero-product-search p {
  margin: 0 auto 14px !important;
  max-width: 560px !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: var(--products-text-2) !important;
}

/* 检索框去投影：search-family.css 的 --ui-search-shadow 在本页过重（底部出现明显阴影带），PC 侧重定义为无投影，聚焦态仅保留描边提示 */
body[data-page="products"] {
  --ui-search-shadow: none;
  --ui-search-focus-shadow: none;
}

body[data-page="products"] .hero-product-search .hero-search-form {
  max-width: 760px !important;
  margin-inline: auto !important;
  padding: 5px 5px 5px 22px !important;
  border-radius: 999px !important;
  border: 1px solid var(--products-border) !important;
  background: var(--products-card) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}

body[data-page="products"] .hero-product-search .hero-search-form:focus-within {
  border-color: rgba(0, 172, 235, .55) !important;
}

body[data-page="products"] .hero-product-search .hero-search-form input {
  height: 52px !important;
  font-size: 15px !important;
  color: var(--products-text) !important;
}

body[data-page="products"] .hero-product-search .hero-search-form .hero-search-form__submit {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--products-brand) !important;
}

body[data-page="products"] .hero-product-search .hero-search-form .hero-search-form__submit:hover,
body[data-page="products"] .hero-product-search .hero-search-form .hero-search-form__submit:focus-visible {
  background: var(--products-brand-soft) !important;
  color: var(--products-brand-hover) !important;
}

body[data-page="products"] .hero-product-search .hero-search-form .hero-search-form__submit svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}

/* 输入框聚焦时不出现内层描边，由胶囊整体承担聚焦反馈 */
body[data-page="products"] .hero-product-search .hero-search-form input:focus {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 热门品牌 */
body[data-page="products"] .hero-product-search .product-quick-searches {
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

body[data-page="products"] .hero-product-search .product-quick-search-heading {
  color: var(--products-text-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body[data-page="products"] .hero-product-search .product-quick-search {
  height: 30px !important;
  padding: 0 13px !important;
  border: 1px solid var(--products-border) !important;
  border-radius: 8px !important;
  background: var(--products-card) !important;
  color: var(--products-text-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

body[data-page="products"] .hero-product-search .product-quick-search:hover,
body[data-page="products"] .hero-product-search .product-quick-search:focus-visible {
  border-color: rgba(0, 172, 235, .45) !important;
  background: var(--products-brand-soft) !important;
  color: var(--text-link, #00698F) !important;
}

body[data-page="products"] .hero-product-search .product-quick-search.active {
  border-color: var(--products-brand) !important;
  background: var(--products-brand-soft) !important;
  color: var(--text-link, #00698F) !important;
}

/* ---------- 2. 工作区：左筛选 + 右结果 ---------- */
body[data-page="products"] .page-grid {
  padding: 20px 0 48px;
}

body[data-page="products"] .panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="products"] .products-workspace {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* 左侧筛选：PC 常驻 + 吸顶（不再依赖"标签筛选"开关） */
body[data-page="products"] .filter-panel,
body[data-page="products"] .filter-panel.open {
  display: block !important;
  position: sticky;
  top: var(--products-header-offset);
  max-height: calc(100vh - var(--products-header-offset) - 24px);
  overflow: auto;
  margin: 0 !important;
  padding: 18px !important;
  border-radius: 16px !important;
  background: var(--products-card) !important;
  border: 1px solid var(--products-border) !important;
  box-shadow: none !important;
}

body[data-page="products"] .filter-panel .filter-row {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
}

body[data-page="products"] .filter-panel .block-title {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--products-border);
}

body[data-page="products"] .filter-panel .block-title h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--products-text);
}

body[data-page="products"] .filter-panel .filter-heading strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--products-text);
}

body[data-page="products"] .filter-panel .filter-heading span,
body[data-page="products"] .filter-panel .installation-filter-subheading {
  color: #4A5C6E;
  font-size: 12px;
}

body[data-page="products"] .filter-panel .chip-list {
  gap: 7px;
}

body[data-page="products"] .filter-panel .filter-chip {
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid var(--products-border);
  background: #fbfdff;
  color: var(--products-text-2);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

body[data-page="products"] .filter-panel .filter-chip:hover {
  border-color: rgba(0, 172, 235, .45);
  color: #008fc5;
}

body[data-page="products"] .filter-panel .filter-chip.active {
  border-color: var(--products-brand);
  background: var(--products-brand-soft);
  color: #008fc5;
  font-weight: 700;
}

/* 筛选区底部的"收起/查看结果"是手机筛选浮层用的，PC 不展示 */
body[data-page="products"] .filter-panel .filter-done-bar {
  display: none !important;
}

/* 结果列 */
body[data-page="products"] .products-results {
  display: grid;
  gap: 14px;
  min-width: 0;
}

body[data-page="products"] .section-head {
  align-items: flex-end;
  margin-bottom: 4px;
}

body[data-page="products"] .section-head h2 {
  /* VA-502（P1-2）：分区标题回归 type-section-title 18px（原 20px）。 */
  font-size: 18px;
  font-weight: 800;
  color: var(--products-text);
}

body[data-page="products"] .section-head p {
  margin-top: 6px;
  font-size: 13px;
  color: var(--products-text-2);
}

/* 左侧常驻后，"标签筛选/收起筛选"开关在 PC 上已无意义 */
body[data-page="products"] .list-tools {
  display: none !important;
}

/* ---------- 3. 已选条件（由 products-page-ui.js 依据真实筛选状态渲染） ---------- */
body[data-page="products"] .products-toolbar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 24px;
}

body[data-page="products"] .products-count {
  font-size: 20px;
  font-weight: 800;
  color: var(--products-text);
  letter-spacing: -.01em;
}
body[data-page="products"] .active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--products-card);
  border: 1px solid var(--products-border);
}

body[data-page="products"] .active-filters[hidden] {
  display: none !important;
}

body[data-page="products"] .active-filters__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--products-text-2);
}

body[data-page="products"] .active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px 0 11px;
  border: 1px solid rgba(0, 172, 235, .32);
  border-radius: 8px;
  background: var(--products-brand-soft);
  color: #008fc5;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

body[data-page="products"] .active-filter-chip:hover {
  border-color: var(--products-brand);
}

body[data-page="products"] .active-filter-chip i {
  font-style: normal;
  font-size: 13px;
  line-height: 1;
  opacity: .75;
}

body[data-page="products"] .active-filter-chip:hover i {
  opacity: 1;
}

body[data-page="products"] .active-filters__clear {
  margin-left: auto;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--products-border);
  border-radius: 8px;
  background: var(--products-card);
  color: var(--products-text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

body[data-page="products"] .active-filters__clear:hover {
  border-color: rgba(0, 172, 235, .45);
  color: #008fc5;
}

/* ---------- 4. 产品 Grid：1280 容器下 4 列 ---------- */
body[data-page="products"] .result-product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* 大屏第 5 列（P2B FIX A）已撤：统一 4 列后 pageSize=12 恰好 3 整行，
   末行不再出现 2 卡 + 大片空白；同时 5 列与加宽后的筛选栏比例失衡。
   见文末 P2H-2 SIDEBAR + GRID REBALANCE。 */

body[data-page="products"] .catalog-pagination {
  margin-top: 20px;
}

/* ---------- 5. 产品卡 ---------- */
body[data-page="products"] .product-card,
body[data-page="products"] .result-product-grid .product-card {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--products-border);
  border-radius: 14px;
  background: var(--products-card);
  box-shadow: none;
  transition: transform .18s ease, border-color .35s ease, box-shadow .35s ease, background-color .35s ease;
}

body[data-page="products"] .product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 172, 235, .35);
  box-shadow: var(--products-shadow-hover);
}

body[data-page="products"] .product-card-main,
body[data-page="products"] .result-product-grid .product-card-main {
  display: block !important;
  flex: 1 1 auto;
  min-width: 0;
}

/* 图片区：统一高度 + contain，绝不裁切或拉伸。
   注意：products-page.js 会在运行时注入内联样式，其中
   `body[data-page="products"] .result-product-grid .product-visual{aspect-ratio:1/1;height:auto}`
   与常规写法特异性相同、靠注入顺序取胜，所以这里统一加 :not(.mobile-page) 抬高一级。 */
body[data-page="products"]:not(.mobile-page) .product-visual-wrap,
body[data-page="products"]:not(.mobile-page) .result-product-grid .product-visual-wrap {
  display: block !important;
  width: auto !important;
  padding: 12px 12px 0;
}

body[data-page="products"]:not(.mobile-page) .product-visual,
body[data-page="products"]:not(.mobile-page) .result-product-grid .product-visual {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 180px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 10px;
  background: #f8fbfd;
  overflow: hidden;
}

body[data-page="products"] .product-visual img,
body[data-page="products"] .product-visual canvas,
body[data-page="products"] .product-visual .product-photo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

body[data-page="products"] .product-visual .product-photo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

body[data-page="products"] .product-body,
body[data-page="products"] .result-product-grid .product-body {
  padding: 12px 14px 0 !important;
}

body[data-page="products"] .product-name {
  margin: 0;
  /* B1A: type-item-title（mobile 端 computed 由其 !important winner 决定，不受此行影响） */
  font-size: var(--type-item-title-size);
  font-weight: var(--type-item-title-weight);
  line-height: var(--type-item-title-line-height);
  color: var(--products-text);
}

body[data-page="products"] .product-name a {
  color: inherit;
  text-decoration: none;
}

body[data-page="products"] .product-card:hover .product-name a {
  color: #008fc5;
}

body[data-page="products"] .product-summary,
body[data-page="products"] .result-product-grid .product-summary {
  margin: 6px 0 0 !important;
  color: var(--products-text-2) !important;
  /* B1A: type-supporting（mobile 端 computed 由 mobile-force 的 !important 决定，不变） */
  font-size: var(--type-supporting-size);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body[data-page="products"] .product-tags,
body[data-page="products"] .result-product-grid .product-tags {
  margin-top: 10px !important;
  gap: 6px !important;
}

body[data-page="products"] .product-tags span,
body[data-page="products"] .result-product-grid .product-tags span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: #f3f7fa;
  color: #526173;
  font-size: 11.5px;
  line-height: 1;
}

body[data-page="products"] .product-card:hover .product-tags span {
  background: var(--products-brand-soft);
  color: #008fc5;
}

/* 卡片操作区：三个等宽按钮，收在卡片底部 */
body[data-page="products"] .product-actions,
body[data-page="products"] .result-product-grid .product-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: auto;
  padding: 14px;
}

body[data-page="products"] .product-actions > * {
  flex: 1 1 0;
  min-width: 0;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

body[data-page="products"] .product-actions .primary-btn {
  border: 0 !important;
  background: var(--products-brand) !important;
  color: var(--action-text, #002E3D) !important;
  box-shadow: none !important;
}

body[data-page="products"] .product-actions .primary-btn:hover {
  background: var(--products-brand-hover) !important;
}

body[data-page="products"] .product-actions .compare-inline-btn {
  border: 1px solid var(--products-border) !important;
  background: var(--products-card) !important;
  color: var(--products-text-2) !important;
  box-shadow: none !important;
}

body[data-page="products"] .product-actions .compare-inline-btn:hover {
  border-color: rgba(0, 172, 235, .45) !important;
  color: var(--text-link, #00698F) !important;
}

body[data-page="products"] .product-actions .compare-inline-btn.active {
  border-color: var(--products-brand) !important;
  background: var(--products-brand-soft) !important;
  color: var(--text-link, #00698F) !important;
}

body[data-page="products"] .product-actions .compare-inline-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* 深链聚焦态（2026-10-08 升级）：is-deep-linked 仅为渲染期标记（无永久视觉），
   可见高亮走 .is-focused-product——浅蓝底 + 品牌蓝边 + 内圈环，3.2s 后随 JS
   移除类名平滑淡回普通卡（transition 在基础规则延长 background-color）。 */
body[data-page="products"] .product-card {
  scroll-margin-top: 96px;
}

body[data-page="products"] .product-card.is-deep-linked {
  border-color: var(--products-brand);
}

body[data-page="products"] .product-card.is-focused-product {
  /* ios-glass-theme 对 .product-card 的 bg/border/shadow 是 !important 声明，
     高亮三属性必须同样 !important（特异性 (0,3,1) > (0,1,0) 必胜，hover 态也被覆盖）。 */
  background: #F2FBFF !important;
  border-color: var(--products-brand) !important;
  box-shadow: 0 0 0 4px rgba(0, 172, 235, .14), 0 12px 26px rgba(0, 172, 235, .10) !important;
  transform: translateY(-1px);
}

/* ---------- 6. 详情：右侧 Overlay Drawer（复用既有 #detail-modal 结构与逻辑） ---------- */
body:is([data-page="products"], [data-page="site-search"]) .detail-modal {
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  background: rgba(15, 23, 42, .16) !important;
  backdrop-filter: none !important;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-card {
  display: flex;
  flex-direction: column;
  width: min(480px, 42vw) !important;
  min-width: 420px;
  max-width: 480px !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border-left: 1px solid var(--products-border);
  background: var(--products-card);
  box-shadow: -18px 0 44px rgba(23, 32, 51, .12);
  transform: translateX(100%);
  transition: transform .24s ease;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal.open .modal-card {
  transform: translateX(0);
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-head {
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--products-border) !important;
  background: var(--products-card) !important;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal #modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--products-text);
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal #modal-subtitle {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--products-text-2);
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .product-detail-panel {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 20px 28px;
}

/* Drawer 内参数分组：标题 + 字段表 */
body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--products-border);
  scroll-margin-top: 12px;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-section:last-child {
  border-bottom: 0;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-section h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--products-text);
}

/* 参数分组锚点导航（由 products-page-ui.js 注入） */
body:is([data-page="products"], [data-page="site-search"]) .drawer-anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--products-border);
  background: var(--products-card);
}

body:is([data-page="products"], [data-page="site-search"]) .drawer-anchor-nav button {
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--products-border);
  border-radius: 8px;
  background: #fbfdff;
  color: var(--products-text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

body:is([data-page="products"], [data-page="site-search"]) .drawer-anchor-nav button:hover,
body:is([data-page="products"], [data-page="site-search"]) .drawer-anchor-nav button.active {
  border-color: var(--products-brand);
  background: var(--products-brand-soft);
  color: #008fc5;
}

/* 参数表：字段 / 值 两列（压平既有卡片式行，改为表格观感） */
body:is([data-page="products"], [data-page="site-search"]) .detail-modal .summary-list {
  display: grid;
  gap: 0;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .summary-list > *,
body:is([data-page="products"], [data-page="site-search"]) .detail-modal .selection-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 7px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.6;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .selection-row + .selection-row {
  border-top: 1px solid #f2f6f9;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .selection-row strong {
  color: var(--products-text-3);
  font-size: 13px;
  font-weight: 600;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .selection-row strong::before,
body:is([data-page="products"], [data-page="site-search"]) .detail-modal .selection-row span::before {
  content: none;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .selection-row span {
  color: var(--products-text);
  word-break: break-word;
}

/* 支持 / 不支持：轻量状态，不用红绿告警色（专业参数库，不是告警后台） */
body:is([data-page="products"], [data-page="site-search"]) .detail-modal .selection-row.is-supported span {
  color: var(--products-brand);
  font-weight: 700;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .selection-row.is-unsupported span {
  color: var(--products-text-3);
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-visual-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin: 16px 0 4px;
  border-radius: 12px;
  background: #f8fbfd;
  overflow: hidden;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-visual-frame img,
body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-visual-frame canvas {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .source-note {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fbfd;
  color: var(--products-text-3);
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- 7. 分页 ---------- */
body[data-page="products"] .catalog-page-btn {
  min-width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--products-border);
  background: var(--products-card);
  color: var(--products-text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

body[data-page="products"] .catalog-page-btn:hover:not(:disabled) {
  border-color: rgba(0, 172, 235, .45);
  color: #008fc5;
}

body[data-page="products"] .catalog-page-btn.active {
  border-color: var(--products-brand);
  background: var(--products-brand-soft);
  color: #008fc5;
}

body[data-page="products"] .catalog-page-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- 8. 响应式：先缩边距与栏宽，不缩字体 ---------- */
@media (max-width: 1366px) {
  body[data-page="products"] .products-workspace {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 18px;
  }

  body[data-page="products"] .result-product-grid {
    gap: 14px !important;
  }
}

@media (max-width: 1180px) {
  body[data-page="products"] .result-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1000px) {
  body[data-page="products"] .products-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="products"] .filter-panel,
  body[data-page="products"] .filter-panel.open {
    position: static;
    max-height: none;
  }

  body[data-page="products"] .filter-panel .filter-panel .filter-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="products"] .result-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Drawer 在窄窗口占满 */
@media (max-width: 900px) {
  body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-card {
    width: 100% !important;
    min-width: 0;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   第三轮视觉精修（定点优化，不动结构与业务逻辑）
   ========================================================================== */

/* 5. 列表标题区：主标题 + 数量同行，说明单独一行 */
body[data-page="products"] .section-head {
  align-items: flex-start;
  margin-bottom: 2px;
}

body[data-page="products"] .section-head-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="products"] .products-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--products-text-2);
}

body[data-page="products"] .products-results {
  gap: 10px;
}

/* 2. 产品区不再整块浅蓝铺底，蓝色只做强调 */
body[data-page="products"] .page-grid,
body[data-page="products"] .catalog-groups {
  background: transparent;
}

/* 3. 筛选栏去胶囊化：轻量矩形选项 + 小方形选中控件 */
body[data-page="products"] .filter-panel .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--products-border);
  border-radius: 8px;
  background: #fff;
  color: var(--products-text-2);
  font-size: 12px;
  font-weight: 500;
}

body[data-page="products"] .filter-panel .filter-chip::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  border: 1px solid #c9d6e0;
  border-radius: 3px;
  background: #fff;
}

body[data-page="products"] .filter-panel .filter-chip.active {
  border-color: var(--products-brand);
  background: var(--products-brand-soft);
  color: #008fc5;
  font-weight: 700;
}

body[data-page="products"] .filter-panel .filter-chip.active::before {
  border-color: var(--products-brand);
  background: var(--products-brand);
  box-shadow: inset 0 0 0 2px #fff;
}

/* P2B FIX C：多选筛选语义 cue——ui-families.css:220-224 用 !important 强制圆形
   （radio 观感），与本页「可多选」语义冲突。其选择器特异性为 (0,4,1) 且加载更晚，
   此处以 +.ui-chip 的 (0,5,1) 稳定压回圆角方形 checkbox cue；逻辑/JS/API 零改动，仅视觉形状。 */
body[data-page="products"] .filter-panel .filter-chip.ui-chip.ui-chip--multi::before {
  border-radius: 4px !important;
}

/* 已选态：品牌蓝底 + 白色 ✓（ui-families 的 ✓ content 被本文件上方 content:'' 压制，此处恢复），
   同时去掉 inset 白圈让 12px 方块内 ✓ 可读。 */
body[data-page="products"] .filter-panel .filter-chip.ui-chip.ui-chip--multi.active::before {
  content: '✓';
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 12px;
  text-align: center;
  box-shadow: none;
}

body[data-page="products"] .filter-panel .filter-chip:hover {
  border-color: #b9d8e8;
}

/* “更多品牌 +N”保留但视觉减弱 */
body[data-page="products"] .filter-panel [id$="-more"] {
  height: 26px;
  border-style: dashed !important;
  background: transparent !important;
  color: var(--products-text-3) !important;
  font-weight: 500 !important;
}

/* 「更多品牌 / 更多门型」expandable entry（P2H 定方向，P2H-3 归入统一 family）：
      整行虚线大框已废——统一为 chip 同高的轻边框入口，见文末 P2H-3 RHYTHM family 块。 */

/* 4. 产品卡去商城化：操作区压扁、次级按钮弱化 */
body[data-page="products"] .product-body,
body[data-page="products"] .result-product-grid .product-body {
  padding: 10px 12px 0 !important;
}

body[data-page="products"] .product-summary,
body[data-page="products"] .result-product-grid .product-summary {
  margin-top: 4px !important;
}

body[data-page="products"] .product-tags,
body[data-page="products"] .result-product-grid .product-tags {
  margin-top: 8px !important;
}

body[data-page="products"] .product-tags span,
body[data-page="products"] .result-product-grid .product-tags span {
  height: 22px !important;
  font-size: 11px !important;
}

body[data-page="products"] .product-actions,
body[data-page="products"] .result-product-grid .product-actions {
  padding: 10px 12px !important;
  gap: 6px !important;
}

body[data-page="products"] .product-actions > * {
  height: 30px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

body[data-page="products"] .product-actions .compare-inline-btn {
  border-color: transparent !important;
  background: #f6f8fa !important;
  color: var(--products-text-3) !important;
  font-weight: 600 !important;
}

body[data-page="products"] .product-actions .compare-inline-btn:hover {
  background: var(--products-brand-soft) !important;
  color: var(--text-link, #00698F) !important;
}

/* 6. Drawer 轻量化：图片区缩小、少外框多分隔 */
body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-visual-frame {
  min-height: 150px;
  margin: 14px 0 2px;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-visual-frame img,
body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-visual-frame canvas {
  max-height: 170px;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-section {
  padding: 14px 0;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-section h4 {
  font-size: 13.5px;
  letter-spacing: .01em;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .modal-badges span {
  height: 22px;
  font-size: 11.5px;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .drawer-anchor-nav {
  padding: 10px 20px;
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .drawer-anchor-nav button {
  height: 26px;
  border-color: transparent;
  background: #f6f8fa;
  color: var(--products-text-3);
}

body:is([data-page="products"], [data-page="site-search"]) .detail-modal .source-note {
  background: transparent;
  padding: 8px 0;
}

/* 收尾：运行时注入的样式与本文件特异性相同、靠注入顺序取胜，
   这里统一抬一级，确保筛选 chip 的矩形形态与紧凑间距生效。 */
body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip {
  height: 28px !important;
  padding: 0 10px 0 8px !important;
  border-radius: 8px !important;
  border: 1px solid var(--products-border) !important;
  background: #fff !important;
  color: var(--products-text-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip.active {
  border-color: var(--products-brand) !important;
  background: var(--products-brand-soft) !important;
  color: var(--text-link, #00698F) !important;
  font-weight: 700 !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .chip-list {
  gap: 6px !important;
}

/* 筛选选项改单列：窄侧栏下多列会把品牌名截断（“德施曼”→“德施”），
   单列也让筛选更像数据库选项清单而不是胶囊墙。 */
body[data-page="products"]:not(.mobile-page) .filter-panel .chip-list,
body[data-page="products"]:not(.mobile-page) .filter-panel #brand-filters,
body[data-page="products"]:not(.mobile-page) .filter-panel .desktop-brand-options {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
  gap: 6px !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip {
  height: 28px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* 运行时注入的规则用了 ID 选择器（#brand-filters 等），普通类选择器权重不够，
   这里用同权重 ID 覆盖，保证筛选项单行铺开、品牌名不被截断。 */
body[data-page="products"]:not(.mobile-page) #brand-filters,
body[data-page="products"]:not(.mobile-page) #feature-filters,
body[data-page="products"]:not(.mobile-page) #installation-door-filters,
body[data-page="products"]:not(.mobile-page) #installation-thickness-filters,
body[data-page="products"]:not(.mobile-page) #installation-support-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
  gap: 6px !important;
}

/* Drawer 图片区封顶：无图占位会被拉伸成整屏高，限制上限让参数更快进入视野 */
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .modal-visual-frame {
  min-height: 150px !important;
  max-height: 200px !important;
  overflow: hidden !important;
}

/* ==========================================================================
   第四轮最终收尾（5 项定点）
   ========================================================================== */

/* 2. 左侧筛选定稿：220px 栏内两列紧凑布局，宽度统一、品牌名完整显示 */
body[data-page="products"]:not(.mobile-page) #brand-filters,
body[data-page="products"]:not(.mobile-page) #feature-filters,
body[data-page="products"]:not(.mobile-page) #installation-door-filters,
body[data-page="products"]:not(.mobile-page) #installation-thickness-filters,
body[data-page="products"]:not(.mobile-page) #installation-support-filters {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 30px !important;
  padding: 0 8px !important;
  gap: 6px !important;
  border: 1px solid #eef2f6 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--products-text-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip::before {
  width: 13px !important;
  height: 13px !important;
  border: 1px solid #cfdae3 !important;
  border-radius: 3px !important;
  background: #fff !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip.active {
  border-color: #d6ecf8 !important;
  background: #fff !important;
  color: var(--text-link, #00698F) !important;
  font-weight: 600 !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip.active::before {
  border-color: var(--products-brand) !important;
  background: var(--products-brand) !important;
  box-shadow: inset 0 0 0 2.5px #fff !important;
}

/* 3. 去掉产品区外层大卡片：层级收敛为「页面背景 → 筛选卡 / 产品卡」 */
body[data-page="products"]:not(.mobile-page) #catalog-panel,
body[data-page="products"]:not(.mobile-page) .page-grid,
body[data-page="products"]:not(.mobile-page) .content-stack {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="products"]:not(.mobile-page) .page-grid {
  padding: 16px 0 48px !important;
}

/* 4. 产品卡操作区：查看为主操作，对比/收藏降为轻量文字操作 */
body[data-page="products"]:not(.mobile-page) .product-actions,
body[data-page="products"]:not(.mobile-page) .result-product-grid .product-actions {
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px 10px !important;
}

body[data-page="products"]:not(.mobile-page) .product-actions .primary-btn {
  flex: 0 0 82px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: var(--products-brand) !important;
  color: var(--action-text, #002E3D) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

body[data-page="products"]:not(.mobile-page) .product-actions .compare-inline-btn {
  flex: 1 1 auto !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--products-text-3) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body[data-page="products"]:not(.mobile-page) .product-actions .compare-inline-btn:hover {
  background: transparent !important;
  color: var(--products-brand) !important;
}

body[data-page="products"]:not(.mobile-page) .product-actions .compare-inline-btn.active {
  background: transparent !important;
  border: 0 !important;
  color: var(--products-brand) !important;
}

/* 5. Drawer 顶部层级：4 个一级锚点 + 次级功能降级，图片完整展示不裁切 */
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .drawer-anchor-nav {
  padding: 10px 20px 8px !important;
  row-gap: 6px !important;
  border-bottom: 1px solid var(--products-border) !important;
}

body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .drawer-anchor-nav button {
  height: 28px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #f4f7f9 !important;
  color: var(--products-text-2) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .drawer-anchor-nav button.active {
  background: var(--products-brand-soft) !important;
  color: var(--products-brand) !important;
}

body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .drawer-anchor-nav button:not(.active):not(.is-secondary):hover {
  background: #edf3f7 !important;
  color: var(--products-text-2) !important;
}

/* 次级功能（同品牌其他型号 / 参数纠错）不再与一级锚点同视觉层级 */
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .drawer-anchor-nav button.is-secondary {
  height: 24px !important;
  padding: 0 4px !important;
  background: transparent !important;
  color: var(--products-text-3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .drawer-anchor-nav button.is-secondary:hover,
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .drawer-anchor-nav button.is-secondary.active {
  color: var(--products-brand) !important;
}

body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .modal-visual-frame {
  min-height: 0 !important;
  max-height: 200px !important;
}

body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .modal-visual-frame img,
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .modal-visual-frame canvas {
  max-height: 200px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* 筛选两列定稿：运行时注入的 #brand-filters 规则与上一版同权重、靠注入顺序取胜，
   这里补上 .filter-panel 再抬一级，确保两列紧凑布局生效。 */
body[data-page="products"]:not(.mobile-page) .filter-panel #brand-filters,
body[data-page="products"]:not(.mobile-page) .filter-panel #feature-filters,
body[data-page="products"]:not(.mobile-page) .filter-panel #installation-door-filters,
body[data-page="products"]:not(.mobile-page) .filter-panel #installation-thickness-filters,
body[data-page="products"]:not(.mobile-page) .filter-panel #installation-support-filters,
body[data-page="products"]:not(.mobile-page) .filter-panel .chip-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

/* 两列下每个 chip 仅约 73px，把内边距与勾选框收紧，保证三字品牌名（如“德施曼”）完整不裁切 */
body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip {
  padding: 0 6px !important;
  gap: 5px !important;
  font-size: 11.5px !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip::before {
  width: 12px !important;
  height: 12px !important;
}

/* ==========================================================================
   提交前 Bug 修正（仅视觉，不动筛选逻辑）
   ========================================================================== */

/* 1. 两列按筛选栏实际可用宽度平分：chip 撑满列宽，不再被固定成 ~66px 的窄项。
      不改字号、不改 checkbox、不改间距来“腾地方”。 */
body[data-page="products"]:not(.mobile-page) .filter-panel .filter-group,
body[data-page="products"]:not(.mobile-page) .filter-panel .desktop-brand-options,
body[data-page="products"]:not(.mobile-page) .filter-panel .installation-filter-group,
body[data-page="products"]:not(.mobile-page) .filter-panel .filter-heading + * {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel #brand-filters,
body[data-page="products"]:not(.mobile-page) .filter-panel #feature-filters,
body[data-page="products"]:not(.mobile-page) .filter-panel #installation-door-filters,
body[data-page="products"]:not(.mobile-page) .filter-panel #installation-thickness-filters,
body[data-page="products"]:not(.mobile-page) .filter-panel #installation-support-filters,
body[data-page="products"]:not(.mobile-page) .filter-panel .chip-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 8px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  gap: 6px !important;
  font-size: 12px !important;
}

/* 2.「全部」等选项删除右侧额外 ✓：只保留左侧 checkbox 一套选中视觉 */
body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   Round 5 视觉收口（2026-09-21）：产品卡操作带 / 筛选"更多"就地展开 /
   搜索区单一边界 / 弹层配置行与品牌联系按钮对齐。
   作用域仅 body[data-page="products"]:not(.mobile-page)；手机端与其它栏目不受影响。
   ============================================================ */

/* 1. 产品卡底部操作带：查看（主）+ 对比/收藏（次按钮）等分三格，同高同圆角，
      并与卡内容用一条分隔线收口，不再是一个实心按钮 + 两段裸文字。
      用 grid 三列而非 flex：实测 flex(1 1 0) 下三按钮实际宽度仍不等（55/69/69），
      网格列宽是确定性的，才能保证「一条完整操作带」。 */
body[data-page="products"]:not(.mobile-page) .product-actions,
body[data-page="products"]:not(.mobile-page) .result-product-grid .product-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px 12px !important;
  border-top: 1px solid var(--products-border) !important;
}

body[data-page="products"]:not(.mobile-page) .product-actions > * {
  width: 100% !important;
  min-width: 0 !important;
  height: 30px !important;
  /* 页面运行时注入的卡片样式设了 min-height:34px（无 !important，但 min-height 会压过 height） */
  min-height: 30px !important;
  max-height: 30px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  justify-self: stretch !important;
}

body[data-page="products"]:not(.mobile-page) .product-actions .primary-btn {
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
  background: var(--products-brand) !important;
  color: var(--action-text, #002E3D) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

body[data-page="products"]:not(.mobile-page) .product-actions .compare-inline-btn {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 6px !important;
  border: 1px solid rgba(154, 193, 225, .55) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #48627A !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
}

body[data-page="products"]:not(.mobile-page) .product-actions .compare-inline-btn:hover {
  border-color: rgba(0, 172, 235, .45) !important;
  background: #F5FBFF !important;
  color: #00698F !important;
}

body[data-page="products"]:not(.mobile-page) .product-actions .compare-inline-btn.active {
  border-color: #6FD4F4 !important;
  background: #E6F7FD !important;
  color: #00698F !important;
}

body[data-page="products"]:not(.mobile-page) .product-actions .compare-inline-btn:disabled {
  border-color: rgba(154, 193, 225, .35) !important;
  background: #F7FAFD !important;
  color: #93A5B5 !important;
  opacity: 1 !important;
}

/* 2. 卡片文字节奏统一：名称与摘要各收敛到 2 行，半行差不再把操作带顶得高低不一。 */
body[data-page="products"]:not(.mobile-page) .product-name {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body[data-page="products"]:not(.mobile-page) .product-summary {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  /* P2B FIX B：1366 下「 · 」join 串换行出现 1 字孤行/行首分隔符，两行均衡收尾；
     join 串本身的不间断分隔仍属 renderer（CODEX_ESCALATION_REQUIRED，本轮不动）。 */
  text-wrap: balance;
}

/* 3. 筛选区「更多品牌」：从 620px 绝对定位浮层改为侧栏内的就地展开——
      浮层在 220px 滚动容器里会被裁切并触发横向滚动（实测 scrollWidth 638 / clientWidth 218，
      点击后 scrollLeft=33 导致左侧文字被切）。就地展开与「更多门型」保持同一种交互语言。 */
body[data-page="products"]:not(.mobile-page) .brand-filter-popover {
  position: static !important;
  width: 100% !important;
  max-height: 320px !important;
  margin-top: 10px !important;
  padding: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid rgba(160, 188, 220, .42) !important;
  border-radius: 12px !important;
  background: #F7FBFF !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-page="products"]:not(.mobile-page) .brand-filter-popover .chip-list {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
}

body[data-page="products"]:not(.mobile-page) .brand-popover-search {
  height: 32px !important;
  font-size: 12.5px !important;
}

body[data-page="products"]:not(.mobile-page) .brand-popover-head {
  align-items: center;
}

body[data-page="products"]:not(.mobile-page) #desktop-brand-close {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

body[data-page="products"]:not(.mobile-page) #desktop-brand-close svg {
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* 侧栏本身不允许横向滚动：任何展开内容都必须在 220px 内完成布局。 */
body[data-page="products"]:not(.mobile-page) .filter-panel {
  overflow-x: hidden !important;
}

/* 4. 顶部搜索区减重：外层胶囊是唯一边界，去掉内层输入框自己的边框与圆角；
      聚焦反馈改由外层胶囊承担（:focus-within），可用性不变。 */
body[data-page="products"]:not(.mobile-page) .hero-product-search .hero-search-form input,
body[data-page="products"]:not(.mobile-page) .hero-search-form input {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="products"]:not(.mobile-page) .hero-search-form:focus-within {
  border-color: rgba(0, 172, 235, .55) !important;
  box-shadow: 0 10px 26px rgba(0, 172, 235, .16) !important;
}

/* 5. 弹层配置行：行首文字原来紧贴分隔线起点（padding 只有纵向 7px），
      补横向内边距并把标签列略微加宽，长标签不再挤在边线上。 */
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .selection-row {
  grid-template-columns: 118px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 9px 10px !important;
  border-radius: 8px !important;
}

body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .selection-row + .selection-row {
  border-top: 1px solid #f2f6f9 !important;
}

/* 6. 弹层徽标行：标签 28px 与「一键联系品牌方」30px 同排不同高 → 统一到同高一排，
      按钮保留品牌浅底以示可点，但不再是行里唯一的异形块。 */
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .modal-badges {
  align-items: center !important;
  gap: 7px !important;
}

body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .modal-badges .product-brand-contact,
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .product-brand-contact {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: none !important;
}

body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .modal-badges .product-brand-contact:hover,
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .modal-badges .product-brand-contact:focus-visible,
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .product-brand-contact:hover,
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .product-brand-contact:focus-visible {
  background: rgba(0, 172, 235, .18) !important;
  border-color: rgba(0, 172, 235, .62) !important;
  transform: none !important;
}

/* ============================================================
   Round 6 层级收口（2026-09-21）：产品卡主次 / 占位减重 /
   筛选模块标题两行 / 顶部 hero 压缩。作用域仍限 products PC。
   ============================================================ */

/* 1. 产品卡主次：名称回到正文深色体系（外层是 <a>，会被全站链接蓝压成蓝色），
      hover 才进入蓝色链接态；摘要维持次级灰；标签保持轻量不加权。 */
body[data-page="products"]:not(.mobile-page) .product-name,
body[data-page="products"]:not(.mobile-page) .result-product-grid .product-name {
  color: #172033 !important;
  /* B1A: type-item-title */
  font-weight: var(--type-item-title-weight) !important;
}

body[data-page="products"]:not(.mobile-page) .product-name a {
  color: #172033 !important;
  text-decoration: none !important;
  transition: color .16s ease !important;
}

body[data-page="products"]:not(.mobile-page) .product-card:hover .product-name a,
body[data-page="products"]:not(.mobile-page) .product-card:focus-within .product-name a,
body[data-page="products"]:not(.mobile-page) .product-name a:hover,
body[data-page="products"]:not(.mobile-page) .product-name a:focus-visible {
  color: #00698F !important;
}

/* 摘要：保持次级灰与最多 2 行（层级：图片 > 名称 > 摘要 > 标签 > 操作）。 */
body[data-page="products"]:not(.mobile-page) .product-summary,
body[data-page="products"]:not(.mobile-page) .result-product-grid .product-summary {
  /* B1B2: ink-muted */ color: var(--ink-muted) !important;
  font-weight: 500 !important;
}

/* 标签：轻量语义保持，不加视觉重量（仅统一字号/高度，避免与操作带抢焦点）。 */
body[data-page="products"]:not(.mobile-page) .product-tags span {
  font-weight: 600 !important;
}

/* 3. 筛选模块标题：主标题一行 + 辅助说明第二行（原为 64px + 1fr 的单行网格，
      侧栏 219px 下「安装适配 门型、门厚、锁体与应急…」被 nowrap 裁切）。 */
body[data-page="products"]:not(.mobile-page) .filter-panel .filter-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 3px !important;
  min-height: 0 !important;
  margin-bottom: 11px !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-heading strong {
  font-size: 14px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-heading span {
  white-space: normal !important;
  overflow: visible !important;
  color: #5A6B7E !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

/* 安装适配：门型/门厚/锁体 三个子标题与固定 3 列网格在侧栏里过窄，改为单列纵向。 */
body[data-page="products"]:not(.mobile-page) .filter-panel .installation-filter-group .installation-filter-subgroups {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .installation-filter-subheading {
  display: block !important;
  margin-bottom: 7px !important;
  color: #5A6B7E !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
}

/* 4. 顶部 hero / 搜索区上下压缩：让「产品列表」更早进入首屏（不改搜索框本身）。 */
body[data-page="products"]:not(.mobile-page) .hero {
  padding: 6px 0 0 !important;
}

body[data-page="products"]:not(.mobile-page) .hero-card {
  padding: 11px 32px 13px !important;
}

body[data-page="products"]:not(.mobile-page) .hero-copy h1 {
  margin-bottom: 4px !important;
}

body[data-page="products"]:not(.mobile-page) .hero-product-search {
  margin-top: 8px !important;
}

body[data-page="products"]:not(.mobile-page) .product-quick-searches,
body[data-page="products"]:not(.mobile-page) .hero-hotwords {
  margin-top: 8px !important;
}

body[data-page="products"]:not(.mobile-page) .page-grid {
  padding: 8px 0 44px !important;
  margin-top: 18px;
}

/* 卡高统一：同一页 3 行卡片按最高行对齐（此前行间 391/371 不等，节奏跳动）。 */
body[data-page="products"]:not(.mobile-page) .result-product-grid {
  grid-auto-rows: 1fr !important;
}

/* ---------- P2D：卡片三操作按钮统一为前台轻量控件家族 ----------
   参照：品牌筛选 / 热搜控件（浅边框 + 柔和圆角 + 浅背景 + 品牌蓝状态强调）。
   仅覆盖与目标 family 的差异项；ui-families 的 (0,5,2)!important 基础块
   （高度 40 / 字号 12.5 / 字重 700 / 次级浅边框 / active 浅蓝底蓝字 / disabled / focus）
   已符合目标，保持不动。此处 (0,6,2)+!important 只改：
   1) primary 阴影移除（无重阴影）；
   2) 三按钮圆角 10 → 12px 统一（10–12 区间上限，柔化“过于方正”观感）；
   3) primary 前景 2026-10-20 起由 #fff 改回 #002E3D（Oil UI P0-1 对比度：白字在
      品牌蓝仅 2.59:1，深墨为 5.56:1；此前 2026-10-19 的白色决定按可读性撤回）。
   逻辑/结构/高度/位置零改动；Mobile 不进入（:not(.mobile-page)）。 */
html body[data-page="products"]:not(.mobile-page) .result-product-grid .product-card .product-actions .ui-button--card-action {
  border-radius: 12px !important;
}

html body[data-page="products"]:not(.mobile-page) .result-product-grid .product-card .product-actions .ui-button--card-action.ui-button--primary {
  /* VA-501（Oil UI P0-1）：白字在品牌蓝 #00ACEB 上仅 2.59:1，改回深墨前景
     （#002E3D 在 #00ACEB 上 5.56:1；与 ui-families 的 card-action 原意一致）。 */
  color: #002E3D !important;
  box-shadow: none !important;
}

html body[data-page="products"]:not(.mobile-page) .result-product-grid .product-card .product-actions .ui-button--card-action.ui-button--primary:hover {
  color: #002E3D !important;
}

/* ---------- 需求 01（2026-10-23）：产品卡「收藏」按钮补齐边框 ----------
   文档要求 PC / 手机两端的产品卡「收藏」与「查看 / 对比」视觉同族。共享
   css/components/ui-families.css 的 VA-504 把收藏定为“透明静音三级按钮”
   （PC 规则 (0,7,2)!important，页内旧规则打不过），该文件属全局共享样式、不在
   本任务改动范围，故在页面层用带 #catalog-groups 的更高特异性 (1,7,2)!important
   补回与「对比」一致的浅描边白底；已收藏（.active）保留 ui-families 的浅蓝强调态。
   UI/文案/结构零改动，仅视觉。 */
html body[data-page="products"]:not(.mobile-page) #catalog-groups .result-product-grid .product-card .product-actions .ui-button[data-action="favorite"]:not(.active) {
  border: 1px solid #b8dce9 !important;
  background: #fff !important;
  color: #2a5f7a !important;
  box-shadow: none !important;
}

html body[data-page="products"]:not(.mobile-page) #catalog-groups .result-product-grid .product-card .product-actions .ui-button[data-action="favorite"]:not(.active):hover {
  border-color: #63c9ed !important;
  background: #f3fbfe !important;
  color: #00698f !important;
}

html body[data-page="products"]:not(.mobile-page) #catalog-groups .result-product-grid .product-card .product-actions .ui-button[data-action="favorite"].active {
  border: 1px solid #63c9ed !important;
  background: #e6f7fd !important;
  color: #00698f !important;
}

/* ---------- P2E：热门品牌/搜索提交后滚动落点修正 ----------
   现状：submit handler 对 #catalog-groups 调 scrollIntoView(block:'start')，
   网格顶被对齐到视口 0，被 sticky 导航（实测高 67px）遮住首排卡，
   「产品列表」标题块（head→grid 59.4px）整体卷走。
   修法：scroll-margin-top 让对齐边上移——header 67 + 呼吸间距 20 + 标题块 59.4 ≈ 146；
   已选条件条（.active-filters，实测 +72px）在场时自适应 218。纯 CSS，
   滚动逻辑/筛选逻辑零改动；:has 不支持时优雅降级为默认 146。 */
body[data-page="products"]:not(.mobile-page) #catalog-groups {
  scroll-margin-top: 146px;
}

body[data-page="products"]:not(.mobile-page):has(.active-filters:not([hidden])) #catalog-groups {
  scroll-margin-top: 218px;
}

/* ==========================================================================
   P2H-2 SIDEBAR + GRID REBALANCE（2026-10-06 用户授权）
   1) 筛选栏 210/220 → 300px：短筛选项稳定两列，侧栏/网格比例平衡；
   2) 全部 chip 组以 ID 权重收口为 grid 两列（历史 flex/grid 混战终局），
      长项安全展示、字号不缩；
   3) 产品网格全宽度统一 4 列（P2B ≥1680 第 5 列已撤），
      pageSize=12 → 4×3 整行铺满，末行不再出现 2 卡 + 大片空白。
   仅 PC（:not(.mobile-page)），Mobile / 筛选逻辑 / Shared 均不动。
   ========================================================================== */
body[data-page="products"]:not(.mobile-page) .products-workspace {
  grid-template-columns: 300px minmax(0, 1fr) !important;
  gap: 24px !important;
}

@media (max-width: 1366px) {
  body[data-page="products"]:not(.mobile-page) .products-workspace {
    grid-template-columns: 300px minmax(0, 1fr) !important;
    gap: 20px !important;
  }
}

html body[data-page="products"]:not(.mobile-page) .filter-panel :is(#brand-filters, #feature-filters, #installation-door-filters, #installation-thickness-filters, #installation-support-filters, #desktop-brand-list) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body[data-page="products"]:not(.mobile-page) .filter-panel .brand-filter-popover .chip-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body[data-page="products"]:not(.mobile-page) .filter-panel :is(#brand-filters, #feature-filters, #installation-door-filters, #installation-thickness-filters, #installation-support-filters, #desktop-brand-list) .filter-chip,
html body[data-page="products"]:not(.mobile-page) .filter-panel .brand-filter-popover .chip-list .filter-chip {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
}

/* ==========================================================================
   P2H-3 SIDEBAR RHYTHM（2026-10-06 用户授权）——侧栏内部排版规范统一
   1) expandable entry family：更多品牌 / 更多门型 同一轻边框入口
      （chip 同高 40px、白底、1px 浅蓝实线边、左对齐、▾ chevron、无 checkbox；
        hover 极浅蓝底 + 边框加深；expanded 文案变「收起…」+ 箭头翻转，无实心蓝填充；
        整行虚线大框废止）；
   2) section rhythm：title→helper 3px、helper→options 9px、组间 22px、
      安装子组间 20px、子标题→grid 8px，全侧栏一套数值。
   仅 PC；筛选逻辑 / Shared JS / Mobile 零改动。
   ========================================================================== */
body[data-page="products"]:not(.mobile-page) .filter-panel .brand-more-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: var(--ui-chip-height, 40px) !important;
  margin: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  gap: 6px !important;
  border: 1px solid rgba(0, 172, 235, .32) !important;
  border-style: solid !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #2a5f7a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .brand-more-toggle::after {
  content: "▾";
  font-size: 10px;
  font-weight: 700;
  color: rgba(0, 135, 179, .8);
  transition: transform .16s ease, color .16s ease;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .brand-more-toggle:hover {
  background: rgba(0, 172, 235, .07) !important;
  border-color: rgba(0, 172, 235, .62) !important;
  color: #0a4a63 !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .brand-more-toggle:focus-visible {
  outline: 2px solid #0087b3 !important;
  outline-offset: 2px !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .brand-more-toggle[aria-expanded="true"] {
  background: rgba(0, 172, 235, .06) !important;
  border-color: rgba(0, 172, 235, .5) !important;
  color: #0087b3 !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .brand-more-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
  color: #0087b3;
}

/* 各语境下的落位间距：品牌入口贴 chips 区 8px（block 流，纯 margin）；门型入口由子组 grid gap 8 供距 */
body[data-page="products"]:not(.mobile-page) .filter-panel #desktop-brand-more {
  margin-top: 8px !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel #desktop-installation-door-more {
  margin-top: 0 !important;
  justify-self: start !important;
}

/* section rhythm：一套数值管全侧栏 */
body[data-page="products"]:not(.mobile-page) .filter-panel .filter-row {
  gap: 22px !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-heading {
  margin-bottom: 9px !important;
  row-gap: 3px !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-heading strong {
  font-weight: 700 !important;
  color: #16324a !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-heading span {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #5a6b7e !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .installation-filter-subgroups {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 20px !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .installation-filter-group .installation-filter-subgroups {
  gap: 20px !important;
}

/* 子组内：标题→grid→(更多门型) 由子组 grid gap 8 统一供距，标题不再额外加 margin */
body[data-page="products"]:not(.mobile-page) .filter-panel .installation-filter-subgroup {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .installation-filter-subheading {
  margin-bottom: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #16324a !important;
}

/* chip 选项网格行列距统一 8px（此前 6px 行距在新侧栏偏紧） */
html body[data-page="products"]:not(.mobile-page) .filter-panel :is(#brand-filters, #feature-filters, #installation-door-filters, #installation-thickness-filters, #installation-support-filters, #desktop-brand-list) {
  gap: 8px 8px !important;
}

/* ==========================================================================
   P2I FILTER DENSITY + LIST HEADER + STICKY DETAIL NAV（2026-10-06 用户授权）
   1) 品牌分类 3 列：宽侧栏下提升空间利用率；更多品牌入口改全宽控制条，
      与普通品牌 chip 明确区分；展开面板（popover 2 列 + 搜索）不动。
   2) 「产品列表」右侧计数由 PC 层隐藏（#catalog-count-label）：
      Shared JS（products-page.js renderSummary）与空态「产品整理中」
      （网格 .empty-state，products-page.js:1726）均不受影响，Mobile 不动。
   3) 详情抽屉 4 标签锚点导航 sticky：products-page-ui.js 的点击滚动是
      手工 scrollTop(delta-8)，scroll-margin-top 对其无效——用
      padding + 负 margin 把 h4 推回 sticky nav 之下、文档流视觉不变，
      clip-path 让被抬高的盒顶条带不参与命中（不遮挡上一 section 尾部）。
      全程零 JS 改动。
   ========================================================================== */

/* 1a. 品牌分类 3 列等宽（覆盖 rebalance 的 2 列；其余分组仍 2 列） */
html body[data-page="products"]:not(.mobile-page) .filter-panel #brand-filters {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px 8px !important;
}

/* 1b. 长品牌名不挤压 checkbox：横向 padding 收窄、字号不动；极端长名裁切不外溢 */
html body[data-page="products"]:not(.mobile-page) .filter-panel #brand-filters .filter-chip {
  padding-left: 6px !important;
  padding-right: 6px !important;
  overflow: hidden !important;
}

/* 1c. 更多品牌 = 独立控制条：全宽、文案居左 chevron 居右，不再是"某一格"的chip */
html body[data-page="products"]:not(.mobile-page) .filter-panel #desktop-brand-more {
  width: 100% !important;
  justify-content: space-between !important;
  margin-top: 8px !important;
}

/* 2. 产品列表主标题右侧「共 N 款产品」：PC 隐藏（该元素不承载任何状态分支，
   PC 空态由网格 .empty-state「产品整理中」呈现） */
body[data-page="products"]:not(.mobile-page) #catalog-count-label {
  display: none !important;
}

/* 3a. 锚点导航 sticky：吸附在抽屉标题栏（.modal-head）下沿 = 滚动容器 top:0，
   天然不遮标题栏、不越出抽屉内容区；轻底影 + 既有 1px 下边框 + 实色背景 */
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .drawer-anchor-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 6 !important;
  box-shadow: 0 10px 18px -16px rgba(23, 32, 51, .4) !important;
}

/* 3b. 点击落点补偿：JS 落点 = 滚动容器 top+8，h4 需在 nav(实测 105px：
   按钮 40px×2 行 + padding 18 + 边框 1，四宽度/多产品一致) 之下 12~24px →
   padding-top = 14 + comp，负 margin 抵消、文档流视觉不变；
   comp=100 → 点击后 h4 距 nav 底 17px。负 margin 使首组盒顶落在 nav 带内
   （不触产品图/徽章），后组盒顶抬入上一组尾部 56px——clip-path 将各
   section 盒顶 100px 变为不命中区，该区域本就透明，视觉零变化。 */
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .modal-section {
  --drawer-nav-comp: 100px;
  margin-top: calc(-1 * var(--drawer-nav-comp)) !important;
  padding-top: calc(14px + var(--drawer-nav-comp)) !important;
  clip-path: inset(var(--drawer-nav-comp) 0 0 0);
  scroll-margin-top: 121px; /* nav 105 + 16：仅对未来锚点/scrollIntoView 路径生效 */
}

/* 组间 22px 视觉间距保持不变（22 - comp + comp 抵消） */
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .modal-section + .modal-section {
  margin-top: calc(22px - var(--drawer-nav-comp)) !important;
}

/* ============================================================
   2026-10-10 筛选 chip 选中态图标契约（PC）：实心品牌蓝圆 + 白色 ✓
   用户参考图2样式；此前多 important 分层（925/951/1166/1181 叠出
   inset 白圈 + 4px 方形 radius + 小盒）把 ✓ 挤成"圆圈短横"观感。
   (0,6,2)!important 无论加载顺序压过 ui-families (0,4,1) 圆形规则
   与本文件上方各分层。本文件仅在 products.html 加载，mobile 走
   ui-families 原生 ✓ 样式不受影响。
   ============================================================ */
html body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip.ui-chip.ui-chip--multi::before {
  width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
}
html body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip.ui-chip.ui-chip--multi.active::before {
  content: '✓' !important;
  box-sizing: border-box !important;
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--products-brand) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 14px !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* Same PC detail tokens for catalog and global-search drawers. */
body[data-page="site-search"]:not(.mobile-page) {
  --products-brand: #00aceb; --products-brand-soft: #eaf9ff;
  --products-card: #fff; --products-text: #172033;
  --products-text-2: var(--ink-muted, #2a5f7a); --products-text-3: #4a5c6e;
  --products-border: #e7edf3;
}
body:is([data-page="products"], [data-page="site-search"]):not(.mobile-page) .detail-modal .mobile-detail-values > span {
  display: inline;
}

/* Long filter values must fit the existing column without truncation.
   Keep the current font, width and selection cue; allow a second text line. */
html body[data-page="products"]:not(.mobile-page) #filter-panel .filter-chip.ui-chip {
  height: auto !important;
  min-height: var(--ui-chip-height, 40px) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: left !important;
  line-height: 1.4 !important;
}
html body[data-page="products"]:not(.mobile-page) #filter-panel .filter-chip.ui-chip::before {
  flex-shrink: 0 !important;
}