输出（可点击跳转），需中和链接默认样式 */
.iiac-industry {
display: block;
color: inherit;
text-decoration: none;
}
.iiac-industry:focus {
border-color: var(--iiac-primary);
}
/* --- F6. 响应式（断点与模块 7 / 附录 A–E 保持一致） ---------------------- */
/* 1200px 及以下：分类卡片保持三列，仅收紧间距 */
@media (max-width: 1200px) {
.iiac-cat-grid {
gap: 20px;
}
}
/* 992px 及以下：分类卡片三列降两列 */
@media (max-width: 992px) {
.iiac-cat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* 768px 及以下：卡片内边距收紧，胶囊换行间距减小 */
@media (max-width: 768px) {
.iiac-cat-card__body {
padding: 16px 18px 18px;
}
.iiac-cat-chips {
gap: 8px;
margin-bottom: 18px;
}
.iiac-cat-chip {
padding: 5px 12px;
font-size: 0.8125rem;
}
.iiac-subnav {
gap: 4px 12px;
margin-bottom: 18px;
padding: 8px 12px;
}
}
/* 480px 及以下：分类卡片转单列 */
@media (max-width: 480px) {
.iiac-cat-grid {
grid-template-columns: minmax(0, 1fr);
}
.iiac-inquiry-notice {
padding: 10px 14px;
font-size: 0.875rem;
}
}
/* ==========================================================================
* 附录 G · Astra 容器全宽修正（v1.4.0 新增）
* --------------------------------------------------------------------------
* 背景：站点启用 Astra 的「盒装版式 / 分离容器」或内容宽度较窄的设置时，
* 子主题模板的输出会被框在一个居中窄卡片内，视觉上「页面变窄」。
*
* 作用域：仅命中 body.iiac-fullwidth（functions.php 按上下文自动添加：
* 五个页面模板 / 产品详情 / 产品归档 / 产品与行业分类法页），
* 不影响博客文章等其他页面使用站长自行配置的版式。
* ========================================================================== */
/* --- G1. 容器与主内容区拉通 ---------------------------------------------- */
body.iiac-fullwidth .site-content .ast-container {
max-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}
body.iiac-fullwidth #primary,
body.iiac-fullwidth .site-main {
max-width: 100%;
width: 100%;
margin-left: 0;
margin-right: 0;
}
/* --- G2. 盒装版式：去掉外围白卡片与边距 ---------------------------------- */
body.iiac-fullwidth.ast-boxed-layout .site-content .ast-container {
max-width: 100%;
width: 100%;
}
/* --- G3. 分离容器版式：去掉卡片的背景 / 圆角 / 内边距 -------------------- */
body.iiac-fullwidth.ast-separate-container .site-content {
background: #fff;
}
body.iiac-fullwidth.ast-separate-container .ast-container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
body.iiac-fullwidth.ast-separate-container #primary {
margin: 0;
padding: 0;
background: transparent;
border-bottom: none;
}
body.iiac-fullwidth.ast-separate-container .site-main {
margin: 0;
padding: 0;
background: transparent;
}
body.iiac-fullwidth.ast-separate-container .ast-article-single,
body.iiac-fullwidth.ast-separate-container .ast-no-thumb .ast-article-single {
padding: 0;
margin: 0;
background: transparent;
border-bottom: none;
}
/* --- G4. 页面构建器模板：消除残留内边距 ---------------------------------- */
body.iiac-fullwidth.ast-page-builder-template .site-content .ast-container {
padding-left: 0;
padding-right: 0;
}
/* --- G5. 页头 / 页脚与正文对齐（v1.4.1 新增，v1.4.2 改为对齐 1200px 中线） --
* Astra 头部构建器与页脚构建器的行容器独立于 .site-content。
*
* v1.4.1 曾把它拉成 max-width:100%（页头文字贴屏幕左右边缘）。v1.4.2 起正文
* 恢复为「区块背景通栏 + 内容 1200px 居中」，若页头仍是贴边的，LOGO 与正文
* 左边缘就会错开 300 多像素。因此这里改为与正文同一个容器中线：
* 页头/页脚的底色仍然通栏，只有里面的内容列与正文对齐。
*
* 如果你更想要「LOGO 贴屏幕最左、按钮贴屏幕最右」的通栏页头，
* 把下面两组 max-width 改回 100% 即可。 */
body.iiac-fullwidth #masthead .ast-container,
body.iiac-fullwidth .ast-header-breadcrumb .ast-container {
max-width: var(--iiac-container);
margin-left: auto;
margin-right: auto;
}
body.iiac-fullwidth .site-footer .ast-container,
body.iiac-fullwidth .ast-builder-grid-row-container-inner {
max-width: var(--iiac-container);
margin-left: auto;
margin-right: auto;
}
/* --- G6. 后台产品字段面板：媒体上传辅助（admin 侧样式随面板内联输出） ---- */
/* 前台参数富文本容器：继承站点排版节奏 */
.iiac-params-editor {
margin-bottom: 24px;
}
.iiac-params-editor > *:first-child {
margin-top: 0;
}
.iiac-params-editor > *:last-child {
margin-bottom: 0;
}
.iiac-params-editor img {
max-width: 100%;
height: auto;
}
/* --- G7. 内容根节点在 Astra flex 容器内被压到左侧（v1.4.2 新增） ----------
* 现象：页面「变窄」「整块贴在左边、右侧一大片留白」，即使已经命中
* body.iiac-fullwidth、父主题容器 max-width 也是 100% 依然无效。
*
* 根因：Astra 在 ≥922px 给 .site-content .ast-container 加了
* display:flex; flex-direction:row（见 Astra 动态样式里的
* 「.site-content .ast-container{display:flex;}」）。
* 子主题的页面模板（page-templates/tpl-*.php、single-product.php 等）
* 是整页替换父主题的 page.php 输出，容器里没有 Astra 的 #primary
* 包裹层，我们的根节点（.iiac-home / .iiac-shop / .iiac-detail …）
* 就直接成了 flex item：
* · 宽度被收缩成 max-content —— 也就是内部 .iiac-container 的
* 1200px（父主题没有任何规则给它 width:100%）；
* · 默认 justify-content:flex-start，整块从行首开始排；
* 两者叠加就是「1200px 的内容贴在左边」，与窗口多宽无关。
*
* 修法：在全宽上下文里把该容器改回块级（此处无侧栏，flex 本就没有用途），
* 并强制根节点撑满一行。块级布局下 .iiac-container 的 margin:auto
* 会把内容重新压回 1200px 中线，区块背景（首屏蓝底、灰底区块）
* 则自动通栏。 */
body.iiac-fullwidth .site-content .ast-container {
display: block;
}
body.iiac-fullwidth .site-content .ast-container > * {
width: 100%;
max-width: 100%;
min-width: 0;
flex: 0 0 auto;
}
/* 兜底：万一日后某个页面没拿到 iiac-fullwidth 类（比如模板被改名），
* 子主题自己的五个页面根节点也撑满父容器，不会再出现「挤在左边」。 */
.iiac-home,
.iiac-shop,
.iiac-detail,
.iiac-about-page,
.iiac-contact-page {
width: 100%;
max-width: 100%;
min-width: 0;
flex: 0 0 auto;
}
/* ==========================================================================
* 附录 H · 后台可换图片的显示样式（v1.5.0 新增）
* --------------------------------------------------------------------------
* 首屏大图、公司厂房图、合作客户 LOGO 改由后台媒体库选择后，
* 需要与原占位块保持同样的栅格与比例，避免换图后版式跳动。
* 图片未设置时模板输出 ，沿用附录 A 的占位样式。
* ========================================================================== */
/* --- H1. 首屏大图 / 简介图：等比缩放，撑满所在列 ---------------------------- */
.iiac-hero__media img,
.iiac-about__media img {
display: block;
width: 100%;
height: auto;
border-radius: var(--iiac-radius-card);
}
/* --- H2. 合作客户 LOGO：等比内缩居中，不拉伸变形 --------------------------- */
.iiac-client-logo img {
display: block;
max-width: 100%;
max-height: 56px;
width: auto;
height: auto;
object-fit: contain;
}
/* --- H3. 窄屏：客户 LOGO 缩小一档，与栅格列宽协调 -------------------------- */
@media (max-width: 921px) {
.iiac-client-logo img {
max-height: 44px;
}
}
/* ==========================================================================
* 附录 I · Elementor 模块的版式兜底（v1.6.0 新增 / v1.7.0 扩展）
* --------------------------------------------------------------------------
* v1.6.0 把首页 8 个区块做成了 Elementor 小部件（inc/iiac-elementor-widgets.php），
* v1.7.0 把其余四个页面模板的区块也做成了小部件（inc/iiac-elementor-widgets-pages.php），
* 合计 18 个模块。小部件输出的 HTML 结构与类名与内置版式完全一致，样式仍来自本文件
* 上方各章节，这里只补「在 Elementor 环境下才会遇到」的三点差异。
* ========================================================================== */
/* --- I1. 小部件外壳撑满容器宽度 ------------------------------------------
* Elementor 会给每个小部件套 .elementor-widget / .elementor-widget-container
* 两层外壳。放在 flex 容器（.e-con）里时它们是 flex item，一旦容器宽度收紧
* 或站长改用行方向排列，外壳就可能被压成收缩宽度，导致区块底色不再通栏。 */
.elementor-widget-iiac-topbar,
.elementor-widget-iiac-hero,
.elementor-widget-iiac-features,
.elementor-widget-iiac-products,
.elementor-widget-iiac-industries,
.elementor-widget-iiac-about,
.elementor-widget-iiac-news,
.elementor-widget-iiac-clients,
.elementor-widget-iiac-page-hero,
.elementor-widget-iiac-shop-list,
.elementor-widget-iiac-term-cards,
.elementor-widget-iiac-about-profile,
.elementor-widget-iiac-timeline,
.elementor-widget-iiac-certs,
.elementor-widget-iiac-values,
.elementor-widget-iiac-team,
.elementor-widget-iiac-contact-main,
.elementor-widget-iiac-branches {
width: 100%;
max-width: 100%;
min-width: 0;
}
/* --- I2. 区块底色通栏 ----------------------------------------------------
* 首屏蓝底、灰底区块的整幅背景由 .iiac-section / .iiac-hero 自己画，
* 必须占满整行；否则会退化成「一块有底色的卡片」，与内置版式不一致。 */
.elementor-widget-iiac-topbar .iiac-topbar,
.elementor-widget-iiac-hero .iiac-hero,
.elementor-widget-iiac-features .iiac-section,
.elementor-widget-iiac-products .iiac-section,
.elementor-widget-iiac-industries .iiac-section,
.elementor-widget-iiac-about .iiac-section,
.elementor-widget-iiac-news .iiac-section,
.elementor-widget-iiac-clients .iiac-section {
width: 100%;
max-width: 100%;
}
/* v1.7.0：其余四个页面的小部件。注意这些小部件自带页面级作用域容器
* （.iiac-about-page / .iiac-contact-page / .iiac-shop），其中的 CSS 变量
* 也是各自模块需要的，所以这里让作用域容器本身撑满即可。 */
.elementor-widget-iiac-page-hero .iiac-page-hero,
.elementor-widget-iiac-shop-list .iiac-shop,
.elementor-widget-iiac-term-cards .iiac-cat-overview,
.elementor-widget-iiac-about-profile .iiac-about-page,
.elementor-widget-iiac-timeline .iiac-about-page,
.elementor-widget-iiac-certs .iiac-about-page,
.elementor-widget-iiac-values .iiac-about-page,
.elementor-widget-iiac-team .iiac-about-page,
.elementor-widget-iiac-contact-main .iiac-contact-page,
.elementor-widget-iiac-branches .iiac-contact-page {
width: 100%;
max-width: 100%;
}
/* --- I3. 可选开关：给容器加一个 CSS 类 iiac-el-tight，模块之间零缝隙 -----
* 一键生成的版式里容器已经是零间距；但站长自己从左侧面板往普通容器里拖模块时，
* Elementor 容器默认 gap 为 var(--widgets-spacing, 20px)，模块之间会露出缝隙。
* 在「编辑容器 → 高级 → CSS 类」里填 iiac-el-tight 即可归零。 */
.e-con.iiac-el-tight {
gap: 0;
--gap: 0px;
--row-gap: 0px;
--column-gap: 0px;
}
/* ==========================================================================
* 附录 J · 页头搜索框（v1.7.0 新增）
* --------------------------------------------------------------------------
* 位置：由 inc/iiac-search.php 通过 Astra 页头构建器的组件机制插入，
* 落在「主导航」之后、「在线咨询」按钮之前，与其它组件是同级的兄弟节点，
* DOM 结构为 .ast-builder-layout-element.iiac-header-search > form.iiac-header-search__form。
*
* 与 Astra 的对齐要点：
* 1. 组件外层由 Astra 自己给了 ast-flex，这里不再重复声明 flex；
* 2. 高度与 Astra 的「在线咨询」按钮（size-sm ≈ 36px）对齐，保证视觉一条线；
* 3. 窄屏（≤921px，即 Astra 的移动端断点 ast-header-break-point）直接隐藏，
* 移动端导航交给 Astra 的汉堡菜单，避免把页头挤成两行。
* ========================================================================== */
/* --- J1. 组件外壳：与左右两侧拉开间距 ------------------------------------ */
.iiac-header-search {
margin-left: 16px;
margin-right: 12px;
}
/* --- J2. 输入框 + 按钮拼成一个整体 ---------------------------------------- */
.iiac-header-search__form {
display: flex;
align-items: center; /* 两个子元素都定高 36px，居中对齐避免按钮比输入框矮 */
margin: 0;
}
.iiac-header-search__input {
width: 150px;
height: 36px;
padding: 0 10px;
border: 1px solid var(--iiac-border);
border-right: 0;
border-radius: var(--iiac-radius-btn) 0 0 var(--iiac-radius-btn);
background-color: var(--iiac-surface);
color: var(--iiac-text);
font-size: 14px;
line-height: 1;
transition: width var(--iiac-transition), border-color var(--iiac-transition);
}
/* 去掉 Chrome / Safari 原生 search 输入框的自带清除按钮，避免样式错乱 */
.iiac-header-search__input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.iiac-header-search__input::placeholder {
color: var(--iiac-text-muted);
}
.iiac-header-search__input:focus {
outline: none;
border-color: var(--iiac-primary);
width: 180px;
}
.iiac-header-search__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 36px;
padding: 0 10px;
border: 1px solid var(--iiac-primary);
border-radius: 0 var(--iiac-radius-btn) var(--iiac-radius-btn) 0;
background-color: var(--iiac-primary);
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
transition: background-color var(--iiac-transition);
}
.iiac-header-search__submit:hover,
.iiac-header-search__submit:focus {
background-color: var(--iiac-primary-hover);
border-color: var(--iiac-primary-hover);
outline: none;
}
.iiac-header-search__submit .iiac-icon {
width: 16px;
height: 16px;
}
/* --- J3. 断点：中等宽度收窄，移动端隐藏 ------------------------------------ */
@media (max-width: 1200px) {
.iiac-header-search__input {
width: 120px;
}
.iiac-header-search__input:focus {
width: 150px;
}
}
@media (max-width: 921px) {
/* Astra 在这个断点切换到移动端页头（ast-header-break-point），
* 此时搜索框会让一行动线与汉堡菜单互相挤压，直接隐藏。 */
.ast-header-break-point .iiac-header-search,
.iiac-header-search {
display: none;
}
}
/*
* ==========================================================================
* 附录 K · 页头按钮收窄 + 首页轮播（v1.8.0 新增）
* ==========================================================================
* K1~K2 应对的实际问题：页头一行里「导航 + 搜索框 + 在线咨询」三件套占宽过大，
* 后期往主导航里加菜单项会不够用。对策：
* 1. 搜索输入框 180→150px、搜索按钮 padding 14→10px（见附录 J 同步修改）；
* 2. 「在线咨询」按钮（Astra button-1，size-sm）padding 收到 8px 14px、字号 14px，宽度约省 30px。
* 全部只作用于桌面页头（#ast-desktop-header），移动端不受影响。
* --------------------------------------------------------------------------
*/
/* --- K1. 在线咨询按钮（Astra 页头按钮组件 button-1）收窄 ------------------ */
#ast-desktop-header .ast-header-button-1 .ast-custom-button {
padding: 8px 14px;
font-size: 14px;
line-height: 1.5;
}
#ast-desktop-header .ast-header-button-1 .ast-custom-button-link {
line-height: 1;
}
/* --- K2. 轮播结构：多张幻灯叠放同一格子，高度永远等于最高一张 ------------ */
.iiac-hero--slider {
position: relative;
}
.iiac-hero--slider .iiac-hero__slides {
display: grid;
}
.iiac-hero--slider .iiac-hero__slide {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.iiac-hero--slider .iiac-hero__slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.iiac-hero--slider .iiac-hero__img {
width: 100%;
height: auto;
display: block;
border-radius: var(--iiac-radius-card);
}
/* --- K3. 圆点指示器 -------------------------------------------------------- */
.iiac-hero__dots {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10px;
z-index: 3;
}
.iiac-hero__dot {
width: 11px;
height: 11px;
padding: 0;
margin: 0;
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 50%;
background-color: transparent;
cursor: pointer;
transition: background-color 0.25s ease, transform 0.25s ease;
}
.iiac-hero__dot:hover {
transform: scale(1.15);
}
.iiac-hero__dot.is-active {
background-color: #FFFFFF;
}
/* --- K4. 左右箭头 ----------------------------------------------------------- */
.iiac-hero__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.12);
color: #FFFFFF;
cursor: pointer;
z-index: 3;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.iiac-hero__arrow:hover,
.iiac-hero__arrow:focus {
background-color: rgba(255, 255, 255, 0.28);
border-color: rgba(255, 255, 255, 0.9);
outline: none;
}
.iiac-hero__arrow .iiac-icon {
width: 20px;
height: 20px;
}
.iiac-hero__arrow--prev {
left: 18px;
}
.iiac-hero__arrow--next {
right: 18px;
}
/* --- K5. 窄屏适配：箭头内收、圆点上移，避免压住文案 ------------------------ */
@media (max-width: 768px) {
.iiac-hero__arrow {
width: 34px;
height: 34px;
}
.iiac-hero__arrow--prev {
left: 10px;
}
.iiac-hero__arrow--next {
right: 10px;
}
.iiac-hero__dots {
bottom: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.iiac-hero--slider .iiac-hero__slide {
transition: none;
}
}
/*
* ==========================================================================
* 附录 L · 折叠式搜索框 + 页头多语言（v1.9.0；v2.0.0 改图标触发式）
* ==========================================================================
* L1~L3 搜索框（v2.0.0 改图标触发式）：页头常态只有「一个放大镜图标按钮」，
* 点击后才在下方浮出面板（输入框 + 范围提示 + 搜索按钮）。比 v1.9.0 的
* 常驻输入框又省约 110px，也彻底消除「提示文字与放大镜图标重叠」的问题。
* L4~L6 多语言下拉：最右侧 components，原生 ，无 JS 也能开合。
*
* 两条通用注意点：
* 1. 浮层必须盖住页面内容，z-index 给 99（Astra 页头自身是 1~4 级）；
* 2. 若外面套了 overflow:hidden 的祖先，浮层会被裁掉 —— 本站 Astra 页头
* 没套，真遇到再加 `overflow: visible` 兜底。
* -------------------------------------------------------------------------- */
/* --- L1. 常态：只有一个放大镜图标按钮 ------------------------------------- */
.iiac-header-search {
position: relative; /* 面板以它为基准做绝对定位 */
}
.iiac-header-search__form {
position: relative;
}
.iiac-header-search__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--iiac-border);
border-radius: 50%;
background-color: var(--iiac-surface);
color: var(--iiac-text);
cursor: pointer;
transition: border-color var(--iiac-transition), color var(--iiac-transition), background-color var(--iiac-transition);
}
.iiac-header-search__toggle:hover,
.iiac-header-search__toggle:focus {
border-color: var(--iiac-primary);
color: var(--iiac-primary);
outline: none;
}
.iiac-header-search__toggle .iiac-icon {
width: 17px;
height: 17px;
}
/* --- L2. 点图标后浮出的面板：默认收起 ------------------------------------- */
.iiac-header-search__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 99;
display: flex;
flex-direction: column;
gap: 8px;
width: 240px;
padding: 12px;
border: 1px solid var(--iiac-border);
border-radius: 8px;
background-color: var(--iiac-surface);
box-shadow: 0 10px 24px rgba(23, 42, 74, 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity var(--iiac-transition), transform var(--iiac-transition), visibility var(--iiac-transition);
}
.iiac-header-search.is-open .iiac-header-search__panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* 面板里的输入框：放大镜压在框内左侧，宽度占满面板（不再做宽度动画） */
.iiac-header-search__field {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.iiac-header-search__icon {
position: absolute;
left: 10px;
display: inline-flex;
align-items: center;
color: var(--iiac-text-muted);
pointer-events: none; /* 点到图标也落在输入框上 */
}
.iiac-header-search__icon .iiac-icon {
width: 16px;
height: 16px;
}
.iiac-header-search__input {
width: 100%;
height: 36px;
padding: 0 12px 0 32px;
border: 1px solid var(--iiac-border);
border-radius: var(--iiac-radius-btn);
background-color: var(--iiac-surface);
color: var(--iiac-text);
font-size: 14px;
line-height: 1;
transition: border-color var(--iiac-transition);
}
.iiac-header-search__input:focus {
outline: none;
border-color: var(--iiac-primary);
}
.iiac-header-search__scope {
font-size: 12px;
color: var(--iiac-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 面板里的整行提交按钮 */
.iiac-header-search__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 36px;
padding: 0 14px;
border: 1px solid var(--iiac-primary);
border-radius: var(--iiac-radius-btn);
background-color: var(--iiac-primary);
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
transition: background-color var(--iiac-transition);
}
.iiac-header-search__submit:hover,
.iiac-header-search__submit:focus {
background-color: var(--iiac-primary-hover);
border-color: var(--iiac-primary-hover);
outline: none;
}
.iiac-header-search__submit .iiac-icon {
width: 16px;
height: 16px;
}
/* --- L4. 多语言：外壳与开关按钮 ------------------------------------------- */
.iiac-lang {
position: relative;
margin-left: 12px;
}
.iiac-lang__box {
position: relative;
}
.iiac-lang__toggle {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 12px;
border: 1px solid var(--iiac-border);
border-radius: var(--iiac-radius-btn);
background-color: var(--iiac-surface);
color: var(--iiac-text);
font-size: 14px;
line-height: 1;
cursor: pointer;
list-style: none;
user-select: none;
transition: border-color var(--iiac-transition), color var(--iiac-transition);
}
/* 去掉 Chrome / Safari 自带的 details 三角 */
.iiac-lang__toggle::-webkit-details-marker {
display: none;
}
.iiac-lang__toggle:hover,
.iiac-lang__toggle:focus {
border-color: var(--iiac-primary);
color: var(--iiac-primary);
outline: none;
}
.iiac-lang__toggle .iiac-icon {
width: 16px;
height: 16px;
}
.iiac-lang__caret {
transition: transform var(--iiac-transition);
}
.iiac-lang__box[open] .iiac-lang__caret {
transform: rotate(180deg);
}
/* --- L5. 下拉菜单 --------------------------------------------------------- */
.iiac-lang__menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 99;
min-width: 148px;
padding: 6px;
border: 1px solid var(--iiac-border);
border-radius: 8px;
background-color: var(--iiac-surface);
box-shadow: 0 10px 24px rgba(23, 42, 74, 0.12);
}
.iiac-lang__list {
list-style: none;
margin: 0;
padding: 0;
}
.iiac-lang__list li + li {
margin-top: 2px;
}
.iiac-lang__item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 6px;
color: var(--iiac-text);
font-size: 14px;
text-decoration: none;
transition: background-color var(--iiac-transition), color var(--iiac-transition);
}
.iiac-lang__item:hover,
.iiac-lang__item:focus {
background-color: var(--iiac-bg-soft);
color: var(--iiac-primary);
outline: none;
}
.iiac-lang__item.is-current {
color: var(--iiac-primary);
font-weight: 600;
}
.iiac-lang__code {
display: inline-block;
min-width: 26px;
padding: 1px 5px;
border-radius: 4px;
background-color: var(--iiac-bg-soft);
color: var(--iiac-text-muted);
font-size: 11px;
line-height: 1.5;
text-align: center;
}
.iiac-lang__item.is-current .iiac-lang__code {
background-color: var(--iiac-primary);
color: #FFFFFF;
}
/* --- L6. 移动端隐藏（与搜索框同一断点） ----------------------------------- */
@media (max-width: 921px) {
.ast-header-break-point .iiac-lang,
.iiac-lang {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.iiac-header-search__panel,
.iiac-lang__caret {
transition: none;
}
}
/* ==========================================================================
* 附录 M · 下载中心 / 知识应用 / 公众号小程序 / 精华页（v2.0.0）
* ==========================================================================
* M1 区块底部「查看全部」按钮（.iiac-section__more）
* M2 下载卡片（.iiac-dl-card）与文件信息条（.iiac-dl-file）
* M3 知识卡片（.iiac-kn-card）与分类卡（.iiac-kn-cat）
* M4 详情页布局（.iiac-single / .iiac-article / 窄容器）
* M5 公众号 / 小程序二维码条带（.iiac-wechat）
* M6 手机精华页（.iiac-digest）
* -------------------------------------------------------------------------- */
/* --- M1. 区块底部「查看全部」 ---------------------------------------------- */
.iiac-section__more {
margin-top: 28px;
text-align: center;
}
.iiac-section__more .iiac-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 22px;
}
/* --- M2. 下载卡片 ----------------------------------------------------------- */
.iiac-dl__grid {
margin-top: 8px;
}
.iiac-dl-card,
.iiac-kn-card {
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--iiac-surface);
border: 1px solid var(--iiac-border);
border-radius: var(--iiac-radius-card, 12px);
transition: box-shadow var(--iiac-transition), transform var(--iiac-transition), border-color var(--iiac-transition);
}
.iiac-dl-card:hover,
.iiac-kn-card:hover {
border-color: var(--iiac-primary);
box-shadow: 0 10px 24px rgba(23, 42, 74, 0.10);
transform: translateY(-2px);
}
.iiac-dl-card__media,
.iiac-kn-card__media {
display: block;
height: 180px;
overflow: hidden;
background-color: var(--iiac-surface-alt, #f4f6f9);
}
.iiac-dl-card__media img,
.iiac-kn-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.iiac-dl-card__media .iiac-placeholder,
.iiac-kn-card__media .iiac-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 28px;
font-weight: 700;
letter-spacing: 1px;
color: var(--iiac-text-muted);
}
.iiac-dl-card__body,
.iiac-kn-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 8px;
padding: 18px;
}
.iiac-dl-card__cat,
.iiac-kn-card__cat {
align-self: flex-start;
padding: 2px 10px;
font-size: 12px;
line-height: 1.6;
color: var(--iiac-primary);
background-color: rgba(22, 93, 255, 0.08);
border-radius: 999px;
}
.iiac-dl-card__title,
.iiac-kn-card__title {
margin: 0;
font-size: 17px;
line-height: 1.4;
}
.iiac-dl-card__title a,
.iiac-kn-card__title a {
color: var(--iiac-text);
text-decoration: none;
}
.iiac-dl-card__title a:hover,
.iiac-kn-card__title a:hover {
color: var(--iiac-primary);
}
.iiac-dl-card__excerpt,
.iiac-kn-card__excerpt {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--iiac-text-muted);
}
.iiac-dl-card__meta {
margin-top: auto;
}
.iiac-dl-card__file {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.4px;
color: var(--iiac-text-muted);
}
.iiac-dl-card__actions {
display: flex;
gap: 8px;
margin-top: 4px;
}
.iiac-dl-card__actions .iiac-btn-outline,
.iiac-dl-card__actions .ast-button {
flex: 1;
padding: 8px 10px;
font-size: 13px;
text-align: center;
justify-content: center;
}
.iiac-dl__search-note {
margin: 0 0 16px;
font-size: 14px;
color: var(--iiac-text-muted);
}
.iiac-dl__search-note a {
margin-left: 8px;
color: var(--iiac-primary);
}
/* 详情页的文件信息条 */
.iiac-dl-file {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 22px;
padding: 18px 20px;
background-color: var(--iiac-surface-alt, #f4f6f9);
border: 1px solid var(--iiac-border);
border-radius: 12px;
}
.iiac-dl-file__info {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.iiac-dl-file__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 48px;
padding: 0 8px;
font-size: 13px;
font-weight: 700;
color: #fff;
background-color: var(--iiac-primary);
border-radius: 8px;
}
.iiac-dl-file__name {
display: block;
font-size: 15px;
word-break: break-all;
}
.iiac-dl-file__size {
display: block;
font-size: 13px;
color: var(--iiac-text-muted);
}
.iiac-dl-file__btn {
white-space: nowrap;
}
.iiac-dl-file--empty {
padding: 14px 18px;
font-size: 14px;
color: var(--iiac-text-muted);
background-color: var(--iiac-surface-alt, #f4f6f9);
border-radius: 8px;
}
/* --- M3. 知识卡片与分类卡 --------------------------------------------------- */
.iiac-kn-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.iiac-kn-card__date {
font-size: 12px;
color: var(--iiac-text-muted);
}
.iiac-kn-card__more {
margin-top: auto;
font-size: 14px;
font-weight: 600;
color: var(--iiac-primary);
text-decoration: none;
}
.iiac-kn-card__more:hover {
text-decoration: underline;
}
.iiac-kn__cats {
grid-template-columns: repeat(4, 1fr);
}
.iiac-kn-cat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 22px;
background-color: var(--iiac-surface);
border: 1px solid var(--iiac-border);
border-radius: 12px;
text-decoration: none;
transition: border-color var(--iiac-transition), box-shadow var(--iiac-transition);
}
.iiac-kn-cat:hover {
border-color: var(--iiac-primary);
box-shadow: 0 8px 20px rgba(23, 42, 74, 0.08);
}
.iiac-kn-cat__icon {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
color: var(--iiac-primary);
background-color: rgba(22, 93, 255, 0.08);
border-radius: 10px;
}
.iiac-kn-cat__icon .iiac-icon {
width: 22px;
height: 22px;
}
.iiac-kn-cat__name {
font-size: 16px;
font-weight: 600;
color: var(--iiac-text);
}
.iiac-kn-cat__desc {
font-size: 13px;
line-height: 1.6;
color: var(--iiac-text-muted);
}
.iiac-kn-cat__count {
font-size: 12px;
color: var(--iiac-text-muted);
}
/* --- M4. 详情页 ------------------------------------------------------------- */
.iiac-container--narrow {
max-width: 860px;
}
.iiac-single__layout {
display: grid;
grid-template-columns: 420px 1fr;
gap: 40px;
align-items: start;
}
.iiac-single__media img,
.iiac-single__media .iiac-placeholder {
width: 100%;
height: auto;
border-radius: 12px;
border: 1px solid var(--iiac-border);
display: block;
}
.iiac-single__media .iiac-placeholder--tall {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
font-size: 40px;
font-weight: 700;
color: var(--iiac-text-muted);
background-color: var(--iiac-surface-alt, #f4f6f9);
}
.iiac-single__cat {
display: inline-block;
margin-bottom: 14px;
padding: 3px 12px;
font-size: 13px;
color: var(--iiac-primary);
background-color: rgba(22, 93, 255, 0.08);
border-radius: 999px;
text-decoration: none;
}
.iiac-single__content {
font-size: 16px;
line-height: 1.8;
color: var(--iiac-text);
}
.iiac-single__back {
margin-top: 28px;
}
.iiac-single__back a {
color: var(--iiac-primary);
text-decoration: none;
}
.iiac-single__back a:hover {
text-decoration: underline;
}
.iiac-article__cover {
margin-bottom: 28px;
}
.iiac-article__cover img {
width: 100%;
height: auto;
border-radius: 12px;
display: block;
}
.iiac-article__content {
font-size: 16px;
line-height: 1.9;
color: var(--iiac-text);
}
.iiac-article__content h2,
.iiac-article__content h3 {
margin-top: 1.4em;
}
.iiac-article__content img {
max-width: 100%;
height: auto;
}
/* --- M5. 公众号 / 小程序二维码条带 ------------------------------------------ */
.iiac-wechat {
padding: 40px 0;
background-color: var(--iiac-surface-alt, #f4f6f9);
border-top: 1px solid var(--iiac-border);
}
.iiac-wechat--digest {
padding: 0;
background: none;
border: none;
margin-top: 32px;
}
.iiac-wechat__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
}
.iiac-wechat__item {
display: flex;
align-items: center;
gap: 16px;
}
.iiac-wechat__qr img {
display: block;
width: 120px;
height: 120px;
object-fit: cover;
border: 1px solid var(--iiac-border);
border-radius: 10px;
background: #fff;
padding: 6px;
}
.iiac-wechat__text {
display: flex;
flex-direction: column;
gap: 6px;
max-width: 220px;
}
.iiac-wechat__name {
font-size: 16px;
color: var(--iiac-text);
}
.iiac-wechat__desc {
font-size: 13px;
line-height: 1.6;
color: var(--iiac-text-muted);
}
/* 联系我们页里的那块（在 section 里，去掉外层底色与内边距） */
.iiac-wechat--contact {
padding: 0;
background: none;
border: none;
}
.iiac-wechat--contact .iiac-container {
padding: 0;
}
/* --- M6. 手机精华页 ---------------------------------------------------------- */
.iiac-digest__head {
padding: 48px 0 28px;
text-align: center;
background: linear-gradient(135deg, var(--iiac-primary) 0%, var(--iiac-primary-hover, #0e46c2) 100%);
color: #fff;
}
.iiac-digest__title {
margin: 0;
font-size: 26px;
color: #fff;
}
.iiac-digest__subtitle {
margin: 8px 0 0;
font-size: 14px;
opacity: 0.85;
}
.iiac-digest__body {
padding-top: 8px;
padding-bottom: 40px;
max-width: 720px;
}
.iiac-digest__group {
margin-top: 28px;
}
.iiac-digest__group-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 18px;
}
.iiac-digest__group-icon {
font-size: 20px;
}
.iiac-digest__list {
margin: 0;
padding: 0;
list-style: none;
background-color: var(--iiac-surface);
border: 1px solid var(--iiac-border);
border-radius: 12px;
overflow: hidden;
}
.iiac-digest__item + .iiac-digest__item {
border-top: 1px solid var(--iiac-border);
}
.iiac-digest__link {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
text-decoration: none;
}
.iiac-digest__link:active {
background-color: var(--iiac-surface-alt, #f4f6f9);
}
.iiac-digest__thumb {
flex: none;
width: 52px;
height: 52px;
border-radius: 8px;
overflow: hidden;
}
.iiac-digest__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.iiac-digest__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.iiac-digest__item-title {
font-size: 15px;
font-weight: 600;
color: var(--iiac-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.iiac-digest__item-excerpt {
font-size: 12px;
color: var(--iiac-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.iiac-digest__date {
flex: none;
font-size: 12px;
color: var(--iiac-text-muted);
}
/* --- 响应式 ------------------------------------------------------------------ */
@media (max-width: 992px) {
.iiac-single__layout {
grid-template-columns: 1fr;
}
.iiac-kn__cats {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.iiac-dl-card__actions {
flex-direction: column;
}
.iiac-kn__cats {
grid-template-columns: 1fr;
}
.iiac-wechat__item {
flex-direction: column;
text-align: center;
}
.iiac-wechat__text {
max-width: none;
align-items: center;
}
.iiac-dl-file {
flex-direction: column;
align-items: stretch;
}
}
/* ==========================================================================
* 附录 N · 行业详情页 / 面包屑 / 产品品牌（v2.6.0 新增）
* --------------------------------------------------------------------------
* 本附录服务三件事：
* 1. 面包屑组件 template-parts/breadcrumb.php（样式主体沿用附录 C1，
* 这里只补「列表页用」的间距修正）；
* 2. 行业页 / 品牌页上部的介绍区 .iiac-term-intro（配图 + 富文本）；
* 3. 产品详情页「品牌」一行的品牌标志 .iiac-brand-list。
*
* 复用说明：
* 图片占位 → .iiac-placeholder（附录 A3）
* 产品卡片 → .iiac-product-card（附录 B）
* 面包屑 → .iiac-breadcrumb（附录 C1）
* ========================================================================== */
/* --- N1. 列表页面包屑的间距 ---------------------------------------------- */
/*
* 详情页的面包屑紧贴 Astra 页头，列表页则是「面包屑 → page-hero 标题条」，
* 两条带背景的横条挨在一起会显得厚重，这里把列表页面包屑的下边框去掉，
* 由 page-hero 自己的边框收口。
*/
/*
* 选择器说明：面包屑在列表页是「独立组件」，不在 .iiac-shop / .iiac-term-page
* 容器里面（它在容器之前输出），所以这里靠组件自己的修饰类来区分，
* 不用后代选择器——那样永远匹配不到。
*/
.iiac-breadcrumb--page {
border-bottom: 0;
padding-bottom: 0;
}
/* --- N2. 行业页 / 品牌页上部介绍 ----------------------------------------- */
.iiac-term-intro {
padding: 40px 0 36px;
background-color: var(--iiac-surface);
border-bottom: 1px solid var(--iiac-border);
}
.iiac-term-intro__layout {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: center;
gap: 40px;
}
.iiac-term-intro__media {
border-radius: 10px;
overflow: hidden;
background-color: #FFFFFF;
border: 1px solid var(--iiac-border);
}
/* 行业页：大图统一成 16:10 的画布，源图长宽比不一致也不会把版面撑歪。 */
.iiac-term-intro--media .iiac-term-intro__media {
aspect-ratio: 16 / 10;
display: flex;
align-items: center;
justify-content: center;
}
.iiac-term-intro--media .iiac-term-intro__img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.iiac-term-intro--media .iiac-placeholder {
width: 100%;
height: 100%;
min-height: 200px;
}
/* 品牌页：标志是小图，不做大画布，居中留白即可。 */
.iiac-term-intro--logo .iiac-term-intro__layout {
grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
align-items: start;
}
.iiac-term-intro--logo .iiac-term-intro__media {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
}
.iiac-term-intro--logo .iiac-term-intro__img {
max-width: 100%;
max-height: 96px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.iiac-term-intro__title {
margin: 0 0 12px;
font-size: 1.75rem;
line-height: 1.3;
color: var(--iiac-heading);
}
.iiac-term-intro__text {
font-size: 0.9375rem;
line-height: 1.8;
color: var(--iiac-text);
}
.iiac-term-intro__text p {
margin: 0 0 12px;
}
.iiac-term-intro__text p:last-child {
margin-bottom: 0;
}
.iiac-term-intro__text img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
.iiac-term-intro__empty {
margin: 0;
font-size: 0.875rem;
color: var(--iiac-text-muted);
}
/* --- N3. 「本类目产品」区块头 -------------------------------------------- */
.iiac-term-products__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.iiac-term-products__title {
margin: 0;
font-size: 1.25rem;
color: var(--iiac-heading);
}
.iiac-term-products__count {
margin: 0;
font-size: 0.875rem;
color: var(--iiac-text-muted);
}
.iiac-term-products__more {
margin: 28px 0 0;
text-align: center;
}
/* --- N4. 产品详情页「品牌」一行 ------------------------------------------ */
.iiac-product-info__meta-item--brands {
/* 品牌可能是 logo 图片，行高比普通键值行高，单独放宽一点。 */
align-items: center;
}
.iiac-brand-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin: 0;
padding: 0;
list-style: none;
}
.iiac-brand-list__item {
margin: 0;
}
.iiac-brand {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 4px 10px;
background-color: #FFFFFF;
border: 1px solid var(--iiac-border);
border-radius: 6px;
text-decoration: none;
transition: border-color var(--iiac-transition), box-shadow var(--iiac-transition);
}
.iiac-brand:hover,
.iiac-brand:focus {
border-color: var(--iiac-primary);
box-shadow: 0 2px 8px rgba(22, 93, 255, 0.12);
}
/* 品牌标志：统一高度，宽度自适应，避免不同 logo 高矮不齐。 */
.iiac-brand__logo {
max-height: 28px;
max-width: 120px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.iiac-brand__name {
font-size: 0.9375rem;
font-weight: 600;
color: var(--iiac-heading);
white-space: nowrap;
}
/* --- N5. 响应式 ---------------------------------------------------------- */
@media (max-width: 921px) {
.iiac-term-intro__layout,
.iiac-term-intro--logo .iiac-term-intro__layout {
grid-template-columns: 1fr;
gap: 24px;
}
.iiac-term-intro__title {
font-size: 1.5rem;
}
}
@media (max-width: 600px) {
.iiac-term-products__head {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
}
/* ==========================================================================
* 附录 H2 · 品牌列表页 / 行业列表页（v2.7.0 新增）
* --------------------------------------------------------------------------
* tpl-brands.php → .iiac-brand-overview 一组（品牌卡片网格）。
* tpl-industries.php → .iiac-industry-overview 一组（每行业一块：配图 + 介绍 + 产品）。
* 复用 .iiac-cat-card / .iiac-section / .iiac-shop__grid 的既有设计语言。
* ========================================================================== */
/* ---------- 品牌列表页 ---------- */
.iiac-brand-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.iiac-brand-card {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--iiac-surface);
border: 1px solid var(--iiac-border);
border-radius: var(--iiac-radius-card);
overflow: hidden;
transition: border-color var(--iiac-transition), box-shadow var(--iiac-transition), transform var(--iiac-transition);
}
.iiac-brand-card:hover,
.iiac-brand-card:focus-within {
border-color: var(--iiac-primary);
box-shadow: var(--iiac-shadow-card-hover);
transform: translateY(-3px);
}
/* 品牌标志居中在白色画布里，contain 不裁切，不同 logo 高矮不齐也能对齐。 */
.iiac-brand-card__media {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 10;
padding: 18px;
background: #FFFFFF;
border-bottom: 1px solid var(--iiac-border);
overflow: hidden;
}
.iiac-brand-card__img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.iiac-brand-card__body {
display: flex;
flex-direction: column;
min-width: 0;
padding: 18px 20px 20px;
}
.iiac-brand-card__name {
margin: 0;
font-size: 1.0625rem;
line-height: 1.5;
color: var(--iiac-heading);
}
.iiac-brand-card__name a {
color: inherit;
text-decoration: none;
transition: color var(--iiac-transition);
}
.iiac-brand-card__name a:hover,
.iiac-brand-card__name a:focus {
color: var(--iiac-primary);
}
.iiac-brand-card__desc {
margin: 10px 0 0;
font-size: 0.875rem;
line-height: 1.7;
color: var(--iiac-text-muted);
}
.iiac-brand-card__link {
margin-top: 14px;
font-size: 0.875rem;
font-weight: 600;
color: var(--iiac-primary);
text-decoration: none;
}
.iiac-brand-card__link:hover,
.iiac-brand-card__link:focus {
color: var(--iiac-primary-hover);
text-decoration: underline;
}
/* ---------- 行业列表页 ---------- */
.iiac-industry-block {
padding-top: 48px;
padding-bottom: 48px;
border-bottom: 1px solid var(--iiac-border);
}
.iiac-industry-block:last-child {
border-bottom: 0;
}
.iiac-industry-block__head {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: center;
gap: 40px;
margin-bottom: 32px;
}
.iiac-industry-block__media {
border-radius: 10px;
overflow: hidden;
background-color: #FFFFFF;
border: 1px solid var(--iiac-border);
aspect-ratio: 16 / 10;
display: flex;
align-items: center;
justify-content: center;
}
.iiac-industry-block__media img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.iiac-industry-block__media .iiac-placeholder {
width: 100%;
height: 100%;
min-height: 200px;
}
.iiac-industry-block__title {
margin: 0;
font-size: 1.5rem;
line-height: 1.4;
color: var(--iiac-heading);
}
.iiac-industry-block__title a {
color: inherit;
text-decoration: none;
transition: color var(--iiac-transition);
}
.iiac-industry-block__title a:hover,
.iiac-industry-block__title a:focus {
color: var(--iiac-primary);
}
.iiac-industry-block__desc {
margin: 12px 0 0;
font-size: 0.9375rem;
line-height: 1.7;
color: var(--iiac-text-muted);
}
.iiac-industry-block__text {
margin: 14px 0 0;
font-size: 0.9375rem;
line-height: 1.8;
color: var(--iiac-text);
}
.iiac-industry-block__text :first-child {
margin-top: 0;
}
.iiac-industry-block__text :last-child {
margin-bottom: 0;
}
.iiac-industry-block__enter {
display: inline-block;
margin-top: 16px;
font-size: 0.875rem;
font-weight: 600;
color: var(--iiac-primary);
text-decoration: none;
}
.iiac-industry-block__enter:hover,
.iiac-industry-block__enter:focus {
color: var(--iiac-primary-hover);
text-decoration: underline;
}
.iiac-industry-block__products {
margin-top: 8px;
}
.iiac-industry-block__more {
margin-top: 22px;
text-align: center;
}
/* 行业列表页里的产品网格沿用 .iiac-shop__grid 的既有列数规则。 */
/* --- H2. 响应式 ---------------------------------------------------------- */
@media (max-width: 921px) {
.iiac-brand-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.iiac-industry-block__head {
grid-template-columns: 1fr;
gap: 24px;
}
}
@media (max-width: 600px) {
.iiac-brand-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.iiac-industry-block__title {
font-size: 1.3125rem;
}
}
/* ==========================================================================
* 附录 H3 · 询价区（左文案 + 右表单）与询价表单模块（v2.7.1 新增）
* --------------------------------------------------------------------------
* 三个使用方共用这一节样式：
* 1. single-product.php 底部的 .iiac-inquiry-cta —— 左文案 + 右紧凑表单；
* 2. Elementor 模块「⑩ 询价表单」（.iiac-inquiry-widget）—— 可放任意位置；
* 3. tpl-contact.php / 模块「⑧ 在线留言 + 联系方式」里的 .iiac-form
* —— 完整表单，沿用附录 C 的既有样式，本节只给紧凑模式补差异。
*
* 命名约定：
* .iiac-inquiry-cta__* 询价区外层（产品详情页专用）
* .iiac-inquiry-widget__* Elementor 模块外壳
* .iiac-form--compact 紧凑表单（三项字段）
* .iiac-field__static 只读的「咨询产品」行
* ========================================================================== */
/* ---------- H3.1 询价区：从「两个按钮」升级为「左文案 + 右表单」 ---------- */
/*
* v2.7.0 及以前这里是 flex 居中 + 右侧两个按钮；v2.7.1 右侧换成表单，
* 需要更宽的空间，所以改成两栏网格（文案 1fr / 表单 1.1fr），
* 表单那栏稍宽一点，因为三个输入框并排时更需要宽度。
*/
.iiac-inquiry-cta__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
align-items: start;
gap: 32px;
}
/* 旧版 .iiac-inquiry-cta__actions（两个按钮）保留样式，
以防有人在子主题外的自定义模板里还在用这个类名。 */
.iiac-inquiry-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* 左侧文案块里的「电话 / 邮件」两行联系方式（原来是两个大按钮）。 */
.iiac-inquiry-cta__quick {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.iiac-inquiry-cta__quick li {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.iiac-inquiry-cta__quick-label {
font-size: 0.75rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--iiac-text-muted);
}
.iiac-inquiry-cta__quick-value {
font-size: 1.0625rem;
font-weight: 600;
color: var(--iiac-primary);
text-decoration: none;
word-break: break-all;
}
.iiac-inquiry-cta__quick-value:hover,
.iiac-inquiry-cta__quick-value:focus {
color: var(--iiac-primary-hover);
text-decoration: underline;
}
/* 右侧表单栏：内部表单自带底色，不需要再叠卡片阴影。 */
.iiac-inquiry-cta__form {
min-width: 0;
}
.iiac-inquiry-cta__form .iiac-form {
margin: 0;
}
/* ---------- H3.2 Elementor「⑩ 询价表单」模块外壳 ---------- */
.iiac-inquiry-widget {
min-width: 0;
}
.iiac-inquiry-widget--boxed .iiac-inquiry-widget__body {
padding: 28px 30px;
background-color: var(--iiac-surface);
border: 1px solid var(--iiac-border);
border-radius: var(--iiac-radius-card);
box-shadow: var(--iiac-shadow-card);
}
.iiac-inquiry-widget__head {
margin-bottom: 20px;
}
.iiac-inquiry-widget__title {
margin: 0 0 6px;
font-size: 1.25rem;
line-height: 1.4;
color: var(--iiac-heading);
}
.iiac-inquiry-widget__desc {
margin: 0;
color: var(--iiac-text-muted);
line-height: 1.8;
}
.iiac-inquiry-widget__missing {
margin: 0;
padding: 12px 16px;
background-color: #FEF3C7;
border-left: 4px solid #D97706;
color: #92400E;
border-radius: 4px;
}
/* ---------- H3.3 紧凑表单（产品详情页询价区用） ---------- */
/*
* 完整表单是「两列网格」（姓名 / 公司 / 电话 / 邮箱 各占一列），
* 紧凑表单只有三个字段，放两列会显得空，所以改成单列竖排，
* 输入框略矮、圆角略小，视觉上更「轻」，不会把询价区撑得很高。
*/
.iiac-form--compact .iiac-form__grid {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
.iiac-form--compact .iiac-input,
.iiac-form--compact .iiac-select,
.iiac-form--compact .iiac-textarea {
padding: 10px 12px;
font-size: 0.9375rem;
}
.iiac-form--compact .iiac-textarea {
min-height: 76px;
resize: vertical;
}
.iiac-form--compact .iiac-form__footer {
margin-top: 16px;
}
.iiac-form--compact .iiac-form__submit {
width: 100%;
justify-content: center;
}
/*
* 只读的「咨询产品」行：产品页上表单不许用户改产品，但必须让他看见
* 「我在咨询的是哪台设备」。做成一个浅底块而不是 disabled 输入框 ——
* disabled 输入框在不同浏览器里对比度差异很大，浅底块更稳。
*/
.iiac-field__static {
margin: 0;
padding: 10px 12px;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.5;
color: var(--iiac-heading);
background-color: var(--iiac-bg-soft);
border: 1px solid var(--iiac-border);
border-radius: 4px;
word-break: break-word;
}
/* 紧凑表单里的字段错误提示默认占位会多出一行空白，收紧一点。 */
.iiac-form--compact .iiac-field__error {
margin-top: 4px;
}
/* ---------- H3.4 响应式 ---------- */
/* 992px 及以下：询价区两栏改上下，表单整宽。 */
@media (max-width: 992px) {
.iiac-inquiry-cta__inner {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
}
}
/* 600px 及以下：留白与字号进一步收敛；联系方式两行改上下排。 */
@media (max-width: 600px) {
.iiac-inquiry-cta__quick {
flex-direction: column;
gap: 10px;
}
.iiac-inquiry-cta__quick-value {
font-size: 1rem;
}
.iiac-inquiry-widget--boxed .iiac-inquiry-widget__body {
padding: 20px 18px;
}
}