/* B10: semantic front-end control families. Keep Admin styles out of this layer. */
:root {
  --ui-chip-height: 40px;
  --ui-chip-radius: 999px;
  --ui-chip-border: #dce9f0;
  --ui-chip-bg: #fff;
  --ui-chip-ink: #2a5f7a;
  --ui-chip-selected-border: #63c9ed;
  --ui-chip-selected-bg: #e6f7fd;
  --ui-chip-selected-ink: #00698f;
  --ui-button-height: 40px;
  /* VA-504（Oil UI P1-3）：按钮家族两档 —— compact 40 / CTA 48，圆角统一 12px
     （原 compact 10px 与页面层 12/14/999 并存，同一卡内三种形状）。 */
  --ui-button-radius: 12px;
  --ui-button-cta-height: 48px;
  --ui-button-cta-radius: 12px;
}

.ui-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--ui-chip-height);
  min-height: var(--ui-chip-height);
  padding: 0 12px;
  border: 1px solid var(--ui-chip-border);
  border-radius: var(--ui-chip-radius);
  background: var(--ui-chip-bg);
  color: var(--ui-chip-ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  vertical-align: middle;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.ui-chip:hover {
  border-color: #9edcf0;
  background: #f3fbfe;
  color: var(--ui-chip-selected-ink);
  transform: none;
}

.ui-chip:active {
  transform: none !important;
}

.ui-chip:focus-visible,
.ui-button:focus-visible {
  outline: 2px solid #0087b3;
  outline-offset: 2px;
}

.ui-chip--selected,
.ui-chip.active,
.ui-chip[aria-pressed="true"] {
  border-color: var(--ui-chip-selected-border);
  background: var(--ui-chip-selected-bg);
  color: var(--ui-chip-selected-ink);
}

.ui-chip--category > svg,
.ui-chip--category > span,
.ui-chip--multi::before {
  flex: none;
  vertical-align: middle;
}

.ui-chip--category .quick-nav-count {
  line-height: 1;
}

.ui-chip--multi::before {
  content: '';
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid #a8c9d7;
  border-radius: 999px;
  background: #fff;
}

.ui-chip--multi.active::before,
.ui-chip--multi[aria-pressed="true"]::before {
  content: '✓';
  border-color: #00aceb;
  background: #00aceb;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 10px;
  text-align: center;
  box-shadow: none;
}

.ui-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--ui-button-height);
  border-radius: var(--ui-button-radius);
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.ui-button--card-action {
  height: var(--ui-button-height);
  min-height: var(--ui-button-height);
  border-radius: var(--ui-button-radius);
}

.ui-button--cta {
  height: var(--ui-button-cta-height);
  min-height: var(--ui-button-cta-height);
  border-radius: var(--ui-button-cta-radius);
  gap: 10px;
}

.ui-button--primary {
  border: 1px solid #00aceb;
  background: #00aceb;
  color: #002e3d;
}

.ui-button--secondary {
  border: 1px solid #b8dce9;
  background: #fff;
  color: #00698f;
}

.ui-button--secondary.active {
  border-color: var(--ui-chip-selected-border);
  background: var(--ui-chip-selected-bg);
}

.ui-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.ui-status-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(81,145,201,.24);
  border-radius: 999px;
  background: #e6f7fd;
  color: #3475b4;
  line-height: 1.2;
  white-space: nowrap;
}

/* Existing page owners used stronger square/rectangular rules. These adapters
   preserve their layout and business state while applying the shared family. */
body[data-page="home"]:not(.mobile-page) .hm-hotwords .ui-chip,
html body.mobile-page[data-page="home"] #home-hot-search .ui-chip,
body[data-page="products"] .product-quick-search.ui-chip,
body[data-page="knowledge"] #category-filters .ui-chip {
  height: var(--ui-chip-height) !important;
  min-height: var(--ui-chip-height) !important;
  padding-inline: 12px !important;
  border-radius: var(--ui-chip-radius) !important;
  transform: none !important;
}

html body[data-page="publish"]:not(.mobile-page) .quick-nav-tag.ui-chip {
  height: var(--ui-chip-height);
  min-height: var(--ui-chip-height);
  padding-inline: 12px;
  border-radius: var(--ui-chip-radius);
  transform: none;
}

html body[data-page="publish"]:not(.mobile-page) .quick-nav-tag.ui-chip:hover {
  transform: none;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip.ui-chip,
body.mobile-page[data-page="products"] .filter-panel .filter-chip.ui-chip {
  height: var(--ui-chip-height) !important;
  min-height: var(--ui-chip-height) !important;
  padding-inline: 12px !important;
  border: 1px solid var(--ui-chip-border) !important;
  border-radius: var(--ui-chip-radius) !important;
  background: var(--ui-chip-bg) !important;
  color: var(--ui-chip-ink) !important;
  transform: none !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 #desktop-brand-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip.ui-chip {
  width: auto !important;
  max-width: 100% !important;
}

body[data-page="products"]:not(.mobile-page) .filter-panel .filter-chip.ui-chip.active,
body.mobile-page[data-page="products"] .filter-panel .filter-chip.ui-chip.active {
  border-color: var(--ui-chip-selected-border) !important;
  background: var(--ui-chip-selected-bg) !important;
  color: var(--ui-chip-selected-ink) !important;
}

body[data-page="products"] .filter-panel .filter-chip.ui-chip::before {
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
}

body[data-page="products"] .active-filter-chip.ui-chip {
  height: var(--ui-chip-height) !important;
  padding-inline: 12px !important;
  border-radius: var(--ui-chip-radius) !important;
}

html body[data-page="products"]:not(.mobile-page) .result-product-grid .product-actions .ui-button--card-action,
html body.mobile-page[data-page="products"] .result-product-grid .product-actions .ui-button--card-action {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: var(--ui-button-height) !important;
  min-height: var(--ui-button-height) !important;
  max-height: var(--ui-button-height) !important;
  padding: 0 6px !important;
  border-radius: var(--ui-button-radius) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: none !important;
}

html body[data-page="products"] .result-product-grid .product-actions .ui-button--card-action.ui-button--primary {
  border: 1px solid #00aceb !important;
  background: #00aceb !important;
  color: #002e3d !important;
  box-shadow: 0 3px 8px rgba(0, 172, 235, .16) !important;
}

html body[data-page="products"] .result-product-grid .product-actions .ui-button--card-action.ui-button--secondary {
  border: 1px solid #b8dce9 !important;
  background: #fff !important;
  color: #2a5f7a !important;
  box-shadow: none !important;
}

html body[data-page="products"] .result-product-grid .product-actions .ui-button--card-action.ui-button--primary:hover {
  border-color: #009bd4 !important;
  background: #009bd4 !important;
}

html body[data-page="products"] .result-product-grid .product-actions .ui-button--card-action.ui-button--secondary:hover {
  border-color: #63c9ed !important;
  background: #f3fbfe !important;
  color: #00698f !important;
}

html body[data-page="products"] .result-product-grid .product-actions .ui-button--card-action.ui-button--secondary.active {
  border-color: #63c9ed !important;
  background: #e6f7fd !important;
  color: #00698f !important;
}

html body[data-page="products"] .result-product-grid .product-actions .ui-button--card-action:disabled {
  border-color: #dbe4ea !important;
  background: #f5f8fa !important;
  color: #8395a3 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

html body[data-page="products"] .result-product-grid .product-actions .ui-button--card-action:focus-visible {
  outline: 2px solid #0087b3 !important;
  outline-offset: 2px !important;
}

html body.mobile-page[data-page="products"] .result-product-grid .product-actions .ui-button--card-action[data-action="favorite"] {
  display: none !important;
}

html body.mobile-page[data-page="knowledge"] #category-filters .filter-chip.ui-chip {
  height: var(--ui-chip-height) !important;
  min-height: var(--ui-chip-height) !important;
  background: var(--ui-chip-bg);
}

body[data-page="tools"]:not(.mobile-page) .tools-pc-tag.ui-chip {
  height: var(--ui-chip-height);
  min-height: var(--ui-chip-height);
  border-radius: var(--ui-chip-radius);
}

html body[data-page="tools"]:not(.mobile-page) .tools-pc-card__cta.ui-button--cta {
  height: var(--ui-button-cta-height);
  min-height: var(--ui-button-cta-height);
  padding: 0 20px;
  border: 1px solid #008fc7;
  border-radius: var(--ui-button-cta-radius);
  background: #00aceb;
  box-shadow: 0 5px 14px rgba(0, 172, 235, .16);
  font-size: 15px;
  gap: 10px;
}

html body[data-page="tools"]:not(.mobile-page) .tool-card.tools-pc-card:hover .tools-pc-card__cta.ui-button--cta,
html body[data-page="tools"]:not(.mobile-page) .tool-card.tools-pc-card:focus-visible .tools-pc-card__cta.ui-button--cta {
  border-color: #0087b3;
  background: #009bd4;
}

html body[data-page="tools"]:not(.mobile-page) .tool-card.tools-pc-card:focus-visible .tools-pc-card__cta.ui-button--cta {
  outline: 2px solid #0087b3;
  outline-offset: 2px;
}

html body.mobile-page[data-page="tools"] .tool-entry-cta.ui-button--cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--ui-button-cta-height);
  min-height: var(--ui-button-cta-height);
  margin-top: 12px !important;
  padding: 0 12px;
  border-radius: var(--ui-button-cta-radius);
  font-size: 13px !important;
  line-height: 1;
  gap: 6px;
}

html body.mobile-page[data-page="tools"] .tool-entry-cta.ui-button--cta.ui-button--primary {
  border: 1px solid #008fc7;
  background: #00aceb;
  color: #002e3d !important;
}

html body.mobile-page[data-page="tools"] .tool-entry-cta.ui-button--cta.ui-button--secondary {
  border: 1px solid #b8dce9;
  background: #f5fbfe;
  color: #00698f !important;
}

html body.mobile-page[data-page="tools"] .tool-entry-cta.ui-button--cta:hover {
  border-color: #0087b3;
  background: #dff5fd;
}

html body.mobile-page[data-page="tools"] .tool-entry-cta.ui-button--cta.ui-button--primary:hover {
  background: #009bd4;
}

html body[data-page="tools"] .ui-button--cta [aria-hidden] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
}

body[data-page="tools"]:not(.mobile-page) .tool-card.tools-pc-card:hover,
body[data-page="tools"]:not(.mobile-page) .tool-card.tools-pc-card:focus-visible {
  transform: none;
}

body[data-page="forum"] .forum-post-sheet .tag-option.ui-chip,
body[data-page="forum-post"] .forum-post-tag.ui-chip {
  height: var(--ui-chip-height) !important;
  min-height: var(--ui-chip-height) !important;
  padding-inline: 12px !important;
  border-radius: var(--ui-chip-radius) !important;
  transform: none !important;
}

/* Earlier page styles reserved a trailing indicator. The shared family uses a
   compact leading check; remove the old slot so labels never overlap it. */
body[data-page="products"] .filter-panel .filter-chip.ui-chip--multi,
body[data-page="forum"] .forum-post-sheet .tag-option.ui-chip--multi,
body[data-page="forum-post"] .forum-post-tag.ui-chip--multi {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

body[data-page="products"] .filter-panel .filter-chip.ui-chip--multi::after,
body[data-page="forum"] .forum-post-sheet .tag-option.ui-chip--multi::after,
body[data-page="forum-post"] .forum-post-tag.ui-chip--multi::after {
  content: none !important;
  display: none !important;
}

body[data-page="products"] .filter-panel .filter-chip.ui-chip--multi.active,
body[data-page="forum"] .forum-post-sheet .tag-option.ui-chip--multi.active,
body[data-page="forum-post"] .forum-post-tag.ui-chip--multi.active {
  border-color: var(--ui-chip-selected-border) !important;
  background: var(--ui-chip-selected-bg) !important;
  color: var(--ui-chip-selected-ink) !important;
  box-shadow: none !important;
}

/* ---------- VA-504（Oil UI P1-3）：产品卡动作按钮家族收敛 ----------
   问题：同一产品卡内「查看/对比/收藏」出现 34px/999px/11px 与 40px/12px 两套几何，
   主/次/三级只是页面层各自手写。这里统一到 compact 档：40px 高 / 12px 圆角 / 12px 字号；
   三个变体只差视觉层级，几何完全一致：
     主（detail）= 品牌蓝底 + 深墨前景；次（对比）= 白底浅描边；
     三级（收藏）= 透明静音（无边框/无底色）。
   PC 产品卡动作原本已是 40/12，不受影响；search CTA 属 search family，不在本家族内。 */
html body.mobile-page[data-page="products"] :is(.result-product-grid, #catalog-groups) .product-actions :is(.ui-button, .primary-btn, .compare-inline-btn) {
  height: var(--ui-button-height, 40px) !important;
  min-height: var(--ui-button-height, 40px) !important;
  border-radius: var(--ui-button-radius, 12px) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding-inline: 4px !important;
  white-space: nowrap !important;
}

html body.mobile-page[data-page="products"] :is(.result-product-grid, #catalog-groups) .product-actions :is(.ui-button--primary, .primary-btn) {
  background: var(--brand-primary, #00aceb) !important;
  border: 1px solid var(--brand-primary, #00aceb) !important;
  color: #002E3D !important;
  -webkit-text-fill-color: #002E3D !important;
}

html body.mobile-page[data-page="products"] :is(.result-product-grid, #catalog-groups) .product-actions :is(.ui-button--secondary, .compare-inline-btn) {
  background: #fff !important;
  border: 1px solid #dce9f0 !important;
  color: #2a5f7a !important;
}

html body.mobile-page[data-page="products"] :is(.result-product-grid, #catalog-groups) .product-actions .ui-button[data-action="favorite"] {
  background: transparent !important;
  border-color: transparent !important;
  color: #4F6579 !important;
}
/* VA-504 补充：PC 产品卡三级按钮（收藏）与手机一致做静音处理，形成主/次/三级三档。 */
html body[data-page="products"]:not(.mobile-page) .result-product-grid .product-card .product-actions .ui-button[data-action="favorite"] {
  background: transparent !important;
  border-color: transparent !important;
  color: #4F6579 !important;
}

/* =====================================================================
   VA-510（第七批，P1-5 裁决 C）：chip 按角色分两档。
   · 可点 chip = 40 / 999（与产品库、知识库、论坛、工具的既成家族一致），
     把手机首页热门搜索词（原 27）与产品库品牌快速搜索（原 28）拉到 40；
   · 不可点标签 = 24 / 999（与 Admin badge 24 档呼应）：
     首页产品推荐标签（20）、合作标签（28）、本期推荐徽标（25）、页面说明标签（28）；
     知识库标准代号标签保留方形语义，只统一到 24 高。
   移动端筛选 chip（44 高，圆角 20）属筛选控件/分段页签，触控已达标，不并入 chip 档。 */
html body[data-page] :is(#home-hot-search, #product-featured-brands) .ui-chip {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

html body[data-page] :is(.hm-product-tag, .hm-coop__tag, .hm-product-hero__badge, .site-context-notice__label) {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* 标准代号标签（GB …）保留方形语义，只统一高度。 */
html body[data-page] .kb-std-chip {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center !important;
  height: 24px !important;
  min-height: 24px !important;
  border-radius: 6px !important;
}