/*
Theme Name: GSTAR Commerce
Theme URI: https://gstartec.com
Author: GSTAR Technology
Description: Light business e-commerce theme for Gstar Technology (Shenzhen) Co., Ltd. WooCommerce-ready.
Version: 1.0.11
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: gstartec
License: GPL-2.0-or-later
*/
/* ============================================================
Self-hosted display font (Manrope variable, weights 500–800).
Files: assets/fonts/manrope/*.woff2 — no external Google Fonts request.
============================================================ */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url("assets/fonts/manrope/manrope-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url("assets/fonts/manrope/manrope-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ============================================================
Design tokens — light business, single orange accent
============================================================ */
:root {
--font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--bg: #ffffff;
--bg-soft: #f6f7f9;
--bg-tint: #EFF4FC;
--ink: #16181d;
--ink-2: #3d4350;
--ink-3: #6b7280;
--line: #e7e9ee;
--line-strong: #d8dbe2;
--brand: #005CE6;
--brand-strong: #0046B4;
--brand-soft: #E7EDF7;
--on-brand: #ffffff;
--ok: #15803d;
--warn: #b45309;
--radius: 10px;
--radius-sm: 7px;
--shadow-sm: 0 1px 2px rgba(22, 24, 29, 0.05);
--shadow-md: 0 10px 30px rgba(22, 24, 29, 0.08);
--container: 1500px;
--header-h: 72px;
}
/* ============================================================
Reset & base
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--ink-2);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-strong); text-decoration: none; }
a:hover { color: var(--brand); }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--ink);
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 0.6em;
}
h1 { font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25rem; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
/* ============================================================
Buttons
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
padding: 12px 22px; border-radius: var(--radius); border: 1px solid transparent;
cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-strong); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand); color: var(--on-brand); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--brand-strong); color: var(--brand-strong); }
.btn-secondary { background: var(--bg-soft, #f1f3f5); color: var(--ink); border-color: var(--line, #e5e7eb); }
.btn-secondary:hover { border-color: var(--brand-strong); color: var(--brand-strong); }
.btn-secondary[disabled] { opacity: .6; cursor: wait; }
.gstar-pd-actions .gstar-pdf-btn { grid-column: 1 / -1; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #f2f3f6; color: var(--ink); }
.btn-lg { padding: 15px 28px; font-size: 1rem; }
/* ============================================================
Header
============================================================ */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--ink); letter-spacing: -0.02em; }
.brand .brand-logo { display: block; height: 36px; width: auto; }
.brand .brand-mark { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--brand), #f08c3a); color: #fff; display: grid; place-items: center; font-size: 1rem; font-weight: 800; }
.brand small { display: block; font-size: 0.66rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; margin-top: -2px; }
.main-nav { display: flex; gap: 2px; margin-left: auto; }
.main-nav a { padding: 9px 14px; border-radius: 8px; color: var(--ink-2); font-weight: 600; font-size: 0.95rem; }
.main-nav a:hover { color: var(--brand-strong); background: var(--brand-soft); }
.main-nav a.is-current { color: var(--brand-strong); }
/* 多级下拉导航 */
.main-nav > li { position: relative; }
.main-nav .sub-menu {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
min-width: 218px; margin: 0; padding: 8px; list-style: none;
background: #fff; border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 12px 32px rgba(22, 24, 29, 0.12);
display: flex; flex-direction: column; gap: 2px;
opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.main-nav > li:hover > .sub-menu,
.main-nav > li:focus-within > .sub-menu {
opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.main-nav .sub-menu li { position: relative; margin: 0; }
.main-nav .sub-menu a { display: block; padding: 9px 12px; white-space: nowrap; font-size: 0.9rem; font-weight: 600; border-radius: 6px; }
.main-nav .sub-menu .sub-menu { top: -8px; left: calc(100% + 6px); }
.main-nav .sub-menu .menu-item-has-children > a::after { content: '›'; float: right; margin-left: 16px; color: var(--ink-3); }
.main-nav > li.menu-item-has-children > a::after { content: ' ▾'; font-size: 0.7rem; color: var(--ink-3); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.cart-link { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); }
.cart-link:hover { border-color: var(--brand-strong); color: var(--brand-strong); }
.cart-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; width: 42px; height: 42px; cursor: pointer; }
/* ============================================================
Hero
============================================================ */
.hero { background: linear-gradient(180deg, #fbfcfd 0%, #f6f7f9 100%); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: 18px; }
.hero-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--brand); }
.hero h1 { margin-bottom: 18px; }
.hero h1 .accent { color: var(--brand); }
.hero p.lead { font-size: 1.1rem; color: var(--ink-2); max-width: 54ch; margin-bottom: 26px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-visual { position: relative; }
.hero-visual .hero-img { border-radius: var(--radius); box-shadow: var(--shadow-md); aspect-ratio: 5/4; object-fit: cover; width: 100%; }
.hero-chip { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px; }
.hero-chip .chip-num { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--brand-strong); }
.hero-chip .chip-label { font-size: 0.78rem; color: var(--ink-3); line-height: 1.2; }
/* ============================================================
Stats strip
============================================================ */
.stats { background: var(--ink); color: #fff; }
.stats .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 34px; padding-bottom: 34px; }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: #fff; }
.stat .num i { font-style: normal; color: var(--brand); }
.stat .label { font-size: 0.82rem; color: #b9bec9; margin-top: 2px; }
/* ============================================================
Sections
============================================================ */
.section { padding: 72px 0; }
.section.soft { background: var(--bg-soft); }
.section-head { max-width: 640px; margin-bottom: 36px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .kicker { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: 10px; }
.section-head p { color: var(--ink-3); margin: 0; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.section-head-row h2 { margin-bottom: 8px; }
.section-head-row p { margin: 0; color: var(--ink-3); }
/* ============================================================
Category grid
============================================================ */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.cat-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cat-card .cat-icon { width: 42px; height: 42px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-strong); display: grid; place-items: center; margin-bottom: 14px; }
.cat-card h3 { font-size: 1rem; margin-bottom: 4px; }
.cat-card .cat-desc { font-size: 0.86rem; color: var(--ink-3); margin: 0; }
/* ============================================================
WooCommerce products
============================================================ */
/* 只作用于 ul.products：`section.related.products` / `.upsells.products` 也带 products 类，
若一并设成 4 列网格，会把 h2 挤到第 1 列、内部 ul.products 压进第 2 列（曾缩到 291px、
每列 56px）。收窄选择器后区块回到 block，内部 ul 才是真正的 4 列网格。 */
.woocommerce ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 22px; }
/* WooCommerce 给 ul.products 加了 ::before/::after 的 display:table 清浮动伪元素，
在 Grid 布局下会被当作一个空网格单元，把首行商品整体挤到第二列；必须显式移除。 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { display: none; content: none; }
/* WooCommerce 传统布局样式（float + 22.05%/48% 宽度 + 底边距）会覆盖网格列宽，
导致卡片被压成窄条、行列间距失控；此处统一交还给 CSS Grid。 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product { width: auto; float: none; clear: none; margin: 0; padding: 0; }
.product-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; display: flex; flex-direction: column; }
.product-card:hover { border-color: var(--line-strong); box-shadow: 0 14px 40px rgba(22, 24, 29, 0.10); transform: translateY(-4px); }
.product-card .product-thumb { position: relative; aspect-ratio: 1/1; background: #fff; padding: 8px; overflow: hidden; }
.product-card .product-thumb-link { display: block; width: 100%; height: 100%; }
/* 高于 WooCommerce 的 `.woocommerce ul.products li.product a img{height:auto}`，
否则图片高度被还原为自动值、溢出方框后被 overflow 裁切。 */
.woocommerce ul.products li.product .product-thumb img,
.product-card .product-thumb img { width: 100%; height: 100%; margin: 0; object-fit: contain; object-position: center; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.product-card:hover .product-thumb img { transform: scale(1.06); }
.product-card .onsale { position: absolute; top: 12px; left: 12px; background: var(--brand); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.product-card .badge-moq { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--brand-strong); font-size: 0.72rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.product-card .onsale + .badge-moq { top: 44px; }
.product-card .product-info { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.product-card .product-cat { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card .woocommerce-loop-product__title { font-size: 0.98rem; margin: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.product-card .woocommerce-loop-product__title a { color: var(--ink); font-weight: 600; }
.product-card .woocommerce-loop-product__title a:hover { color: var(--brand-strong); }
.product-card .color-row { display: flex; align-items: center; gap: 5px; min-height: 18px; }
.product-card .swatch { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.product-card .swatch-more { font-size: 0.72rem; color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.product-card .price-row { display: flex; align-items: baseline; gap: 6px; margin-top: 1px; }
.product-card .price { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.12rem; letter-spacing: -0.01em; }
.product-card .price del { color: var(--ink-3); font-weight: 500; margin-right: 5px; font-size: 0.9rem; }
.product-card .price ins { text-decoration: none; color: var(--brand-strong); }
.product-card .price-row .unit { font-size: 0.78rem; color: var(--ink-3); }
.product-card .add-to-cart-wrap { margin-top: auto; padding-top: 6px; }
.product-card .button.add_to_cart_button,
.product-card .ajax_add_to_cart,
.product-card .inquiry-cta { width: 100%; text-align: center; background: var(--ink); color: #fff; border: none; padding: 11px 14px; border-radius: 9px; font-weight: 700; font-size: 0.88rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .15s ease, transform .08s ease; }
.product-card .button.add_to_cart_button::before,
.product-card .ajax_add_to_cart::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; }
.product-card .button.add_to_cart_button:hover,
.product-card .ajax_add_to_cart:hover,
.product-card .inquiry-cta:hover { background: var(--brand-strong); color: #fff; }
.product-card .button.add_to_cart_button:active,
.product-card .ajax_add_to_cart:active { transform: translateY(1px); }
.product-card .button.add_to_cart_button.added::before,
.product-card .ajax_add_to_cart.added::before { background: #fff; -webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; }
.product-card .added_to_cart { display: block; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--brand-strong); padding-top: 7px; }
/* shop header */
.woocommerce-products-header { margin-bottom: 28px; }
.woocommerce-result-count { color: var(--ink-3); font-size: 0.9rem; }
.woocommerce-ordering select { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px; font-family: inherit; background: #fff; }
/* single product */
/* 轨道必须 minmax(0,1fr)：画廊 JS 会把幻灯片按图片固有宽度设定，普通 1fr 轨道无法收缩，
会把第一列撑到 1117px、把摘要列压成 131px。 */
.single-product .product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
/* WC 默认给 images/summary 设了 float + 48% 宽（选择器为 .woocommerce div.product div.images，
元素计数比主题高一级），这里补上 div 以免被压回 48%；宽度交还给 Grid 轨道。 */
.single-product div.product div.images,
.single-product div.product div.summary { width: 100%; float: none; margin: 0; min-width: 0; }
.single-product div.product div.images img { max-width: 100%; height: auto; }
/* tabs / related / upsells 都是 div.product 的子元素，必须横跨整行，否则会被塞进第二列。 */
.single-product .woocommerce-tabs,
.single-product .related,
.single-product .upsells { grid-column: 1 / -1; }
.single-product .woocommerce-product-gallery img { border-radius: var(--radius); border: 1px solid var(--line); }
.single-product .product_title { font-size: 2rem; }
.single-product .price { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--brand-strong); }
.single-product .woocommerce-product-details__short-description { color: var(--ink-2); }
/* 商品文案里含 1688 源链接等超长不可断词串，窄屏会把整页撑到 1100px+ 并触发浏览器缩放；
这里允许在任意位置换行。 */
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-product-details__short-description small { overflow-wrap: anywhere; word-break: break-word; }
.single-product form.cart { display: flex; gap: 12px; align-items: center; margin: 22px 0; }
.single-product form.cart .quantity input { width: 70px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 1rem; }
.single-product form.cart .single_add_to_cart_button { background: var(--brand-strong); color: #fff; border: none; padding: 13px 26px; border-radius: var(--radius); font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.single-product form.cart .single_add_to_cart_button:hover { background: var(--brand); }
.woocommerce-tabs ul.tabs { list-style: none; padding: 0; display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 40px 0 0; }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a { display: block; padding: 12px 18px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; }
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-color: var(--brand); }
.woocommerce-tabs .panel { padding: 24px 0; }
.related.products { margin-top: 48px; }
/* 落地页（原站分类页复原）区块：Why Choose Us / Certification / 分类列表 */
.gstar-lp-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin: 8px 0 40px; }
.gstar-lp-why-item figure { margin: 0; }
.gstar-lp-why-item img { width: 100%; height: auto; border-radius: 12px; display: block; }
.gstar-lp-why-item h3 { margin: 14px 0 6px; font-size: 1.05rem; }
.gstar-lp-certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; }
.gstar-lp-certs figure { margin: 0; }
.gstar-lp-certs img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; display: block; }
.gstar-lp-cats { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; padding: 0; margin: 0 0 36px; }
/* 页面正文内的商品网格（落地页/产品总览复原）：3 列 + 标题两行截断 */
.entry-content p, .entry-content li, .entry-content td { overflow-wrap: break-word; }
.entry-content ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; margin: 0 0 36px; padding: 0; list-style: none; }
.entry-content ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; clear: none !important; }
.entry-content ul.products li.product .product-card .product-info .woocommerce-loop-product__title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; height: 2.7em !important; min-height: 2.7em; max-height: 2.7em; line-height: 1.35; }
@media (max-width: 768px) { .entry-content ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
/* 产品详情页（原站复原）区块 */
.gstar-pd-brief { margin-bottom: 28px; }
.gstar-pd-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 32px; }
.gstar-pd-gallery figure, .gstar-pd-desc figure, .gstar-pd-workshop-item figure { margin: 0; }
.gstar-pd-gallery img { width: 100%; height: auto; border-radius: 12px; display: block; }
.gstar-pd-desc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 36px; }
.gstar-pd-desc img { width: 100%; height: auto; border-radius: 8px; display: block; }
.gstar-pd-workshop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 36px; }
.gstar-pd-workshop img { width: 100%; height: auto; border-radius: 8px; display: block; }
.gstar-pd-workshop-item h3 { margin: 10px 0 0; font-size: 0.95rem; }
.gstar-pd-specs { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.gstar-pd-specs th, .gstar-pd-specs td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; font-weight: normal; }
.gstar-pd-specs th { background: #f7f7f7; width: 32%; font-weight: 600; }
.gstar-pd-tags { font-size: 0.9rem; color: #555; margin-bottom: 32px; }
.gstar-pd-links { border-top: 1px solid var(--line); padding-top: 20px; }
/* 列表页（新闻/案例/行业知识） */
.gstar-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 40px; }
.gstar-list-item { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.gstar-list-media { margin: 0; }
.gstar-list-media img { width: 100%; height: 220px; object-fit: cover; display: block; }
.gstar-list-body { padding: 18px 20px 22px; }
.gstar-list-cat { display: inline-block; font-size: 0.8rem; color: var(--brand); margin-bottom: 8px; }
.gstar-list-title { font-size: 1.05rem; margin: 0 0 8px; }
.gstar-list-title a { color: inherit; text-decoration: none; }
.gstar-list-body p { font-size: 0.92rem; color: #555; margin: 0; }
@media (max-width: 768px) { .gstar-list { grid-template-columns: 1fr; } .gstar-list-media img { height: 190px; } }
@media (max-width: 768px) {
.gstar-pd-gallery, .gstar-pd-desc { grid-template-columns: 1fr; }
.gstar-pd-workshop { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
Feature / value props
============================================================ */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.feature .f-icon { width: 46px; height: 46px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-strong); display: grid; place-items: center; margin-bottom: 16px; }
.feature h3 { font-size: 1.05rem; }
.feature p { font-size: 0.92rem; color: var(--ink-3); margin: 0; }
/* ============================================================
Blog
============================================================ */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease; }
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.post-card .post-thumb { aspect-ratio: 16/10; background: var(--bg-soft); }
.post-card .post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .post-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card .post-date { font-size: 0.8rem; color: var(--ink-3); }
.post-card h3 { font-size: 1.05rem; line-height: 1.35; margin: 0; }
.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--brand-strong); }
.post-card .post-excerpt { font-size: 0.9rem; color: var(--ink-3); margin: 0; }
/* ============================================================
* 宽度体系（三类列宽，语义必须对应，禁止混用）
* .container 站点外框 1500px —— header / footer / 各 section
* .page-article 页面正文列 1280px 居中 —— page.php 普通页面
* .single-article 文章阅读列 1280px 居中 —— single.php 长文阅读
* 规则：模板只能使用与自身语义匹配的类。页面不得复用 .single-article，
* 否则正文被压到 780px 且靠左溢出，与 1280px 站点框架产生宽度错位。
* ============================================================ */
.page-article { max-width: 1280px; margin: 0 auto; min-width: 0; }
.page-article > h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.25; margin-bottom: 24px; }
/* 正文排版沿用文章页口径，保证页面与文章观感一致（宽度不同，字号与间距相同） */
.page-article .entry-content { font-size: 1.05rem; line-height: 1.85; color: var(--ink-2); }
.page-article .entry-content > p { margin-bottom: 1.3em; }
.page-article .entry-content h2 { font-size: 1.55rem; margin: 2.2em 0 0.8em; padding-top: 0.4em; border-top: 1px solid var(--line); }
.page-article .entry-content h2:first-child { border-top: none; padding-top: 0; margin-top: 1.6em; }
.page-article .entry-content h3 { font-size: 1.22rem; margin: 1.9em 0 0.7em; }
.page-article .entry-content h4 { font-size: 1.05rem; margin: 1.6em 0 0.6em; }
.page-article .entry-content h2, .page-article .entry-content h3, .page-article .entry-content h4 { scroll-margin-top: calc(var(--header-h) + 20px); }
.page-article .entry-content ul, .page-article .entry-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.page-article .entry-content li { margin-bottom: 0.45em; }
.page-article .entry-content figure { margin: 1.6em 0; }
.page-article .entry-content img { border-radius: var(--radius); margin: 1.4em auto; }
.page-article .entry-content > p:first-child { font-size: 1.1rem; line-height: 1.8; color: var(--ink); margin-bottom: 1.5em; }
.page-article .entry-content a { text-decoration: underline; text-underline-offset: 2px; }
/* single article */
.article-section { padding-top: 36px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
.article-layout.has-toc { grid-template-columns: minmax(0, 1fr) 250px; }
.single-article { max-width: 1280px; }
.article-layout:not(.has-toc) .single-article { margin: 0 auto; }
.crumb-current { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; display: inline-block; vertical-align: bottom; }
.breadcrumb .sep { margin: 0 8px; color: var(--line-strong); }
.single-article .article-meta { color: var(--ink-3); font-size: 0.9rem; margin-bottom: 20px; display: flex; gap: 16px; flex-wrap: wrap; }
.single-article .article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.single-article .article-meta a { color: var(--ink-3); }
.single-article .article-meta a:hover { color: var(--brand-strong); }
.single-article > h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.25; margin-bottom: 24px; }
.single-article .article-thumb { border-radius: var(--radius); overflow: hidden; margin-bottom: 32px; }
.single-article .entry-content { font-size: 1.05rem; line-height: 1.85; color: var(--ink-2); }
.single-article .entry-content > p { margin-bottom: 1.3em; }
.single-article .entry-content h2 { font-size: 1.55rem; margin: 2.2em 0 0.8em; padding-top: 0.4em; border-top: 1px solid var(--line); }
.single-article .entry-content h2:first-child { border-top: none; padding-top: 0; margin-top: 1.6em; }
.single-article .entry-content h3 { font-size: 1.22rem; margin: 1.9em 0 0.7em; }
.single-article .entry-content h4 { font-size: 1.05rem; margin: 1.6em 0 0.6em; }
.single-article .entry-content h2, .single-article .entry-content h3, .single-article .entry-content h4 { scroll-margin-top: calc(var(--header-h) + 20px); }
.single-article .entry-content ul, .single-article .entry-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.single-article .entry-content li { margin-bottom: 0.45em; }
.single-article .entry-content blockquote { margin: 1.6em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--brand); color: var(--ink-3); font-style: italic; }
.single-article .entry-content hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }
.single-article .entry-content figure { margin: 1.6em 0; }
.single-article .entry-content img { border-radius: var(--radius); margin: 1.4em auto; }
.single-article .entry-content figure.article-figure { margin: 2.2em auto; max-width: 620px; }
.single-article .entry-content figure.article-figure img { display: block; width: 100%; height: auto; margin: 0; border: 1px solid var(--line); background: var(--bg-soft); }
.single-article .entry-content ul.article-list { margin: 0 0 1.5em; padding-left: 1.15em; }
.single-article .entry-content ul.article-list li { margin-bottom: 0.55em; }
.single-article .entry-content > p:first-child { font-size: 1.1rem; line-height: 1.8; color: var(--ink); margin-bottom: 1.5em; }
.single-article .entry-content a { text-decoration: underline; text-underline-offset: 2px; }
.gstar-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.5em; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.gstar-table-wrap table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.95rem; }
.gstar-table-wrap th, .gstar-table-wrap td { border-bottom: 1px solid var(--line); padding: 10px 14px; text-align: left; white-space: nowrap; }
.gstar-table-wrap td { white-space: normal; }
.gstar-table-wrap th { background: var(--bg-soft); color: var(--ink); font-weight: 700; }
.gstar-table-wrap tr:last-child td { border-bottom: none; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.article-tags a { display: inline-block; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.82rem; color: var(--ink-2); }
.article-tags a:hover { border-color: var(--brand-strong); color: var(--brand-strong); }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.article-nav-item { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; color: var(--ink); transition: border-color .15s ease; }
.article-nav-item:hover { border-color: var(--brand-strong); }
.article-nav-item small { color: var(--ink-3); font-size: 0.78rem; }
.article-nav-item span { font-weight: 600; font-size: 0.95rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-nav-item.next { text-align: right; }
.related-articles { margin-top: 56px; }
.related-articles > h2 { font-size: 1.5rem; margin-bottom: 24px; }
/* article TOC */
.article-toc .toc-card { position: sticky; top: calc(var(--header-h) + 24px); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; }
.article-toc h4 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.article-toc ul { list-style: none; padding: 0; margin: 0; }
.article-toc li { margin-bottom: 2px; }
.article-toc li.toc-l3 { padding-left: 14px; }
.article-toc a { display: block; padding: 6px 10px; border-left: 2px solid var(--line); font-size: 0.86rem; line-height: 1.4; color: var(--ink-2); }
.article-toc li.toc-l3 a { font-size: 0.82rem; }
.article-toc a:hover { color: var(--brand-strong); }
.article-toc a.toc-active { border-left-color: var(--brand); color: var(--brand-strong); font-weight: 600; }
.toc-mobile { display: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 28px; }
.toc-mobile summary { font-weight: 700; font-size: 0.95rem; color: var(--ink); cursor: pointer; }
.toc-mobile ul { list-style: none; padding: 0; margin: 12px 0 0; }
.toc-mobile li { margin-bottom: 6px; }
.toc-mobile li.toc-l3 { padding-left: 14px; }
.toc-mobile a { color: var(--ink-2); font-size: 0.9rem; }
.toc-mobile a:hover { color: var(--brand-strong); }
/* ============================================================
CTA band
============================================================ */
.cta-band { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 52px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: #b9bec9; margin: 0; }
.cta-band .btn-primary { background: var(--brand); }
.cta-band .btn-primary:hover { background: #f0701f; }
/* ============================================================
Footer
============================================================ */
.site-footer { background: #12151a; color: #aeb4c0; margin-top: 72px; }
.site-footer a { color: #d6dae1; }
.site-footer a:hover { color: var(--brand); }
.footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr 1.15fr; gap: 28px; padding: 56px 0 40px; }
.footer-brand .brand { color: #fff; }
.footer-brand .brand-logo { height: 32px; filter: brightness(0) invert(1); opacity: 0.92; }
.footer-brand p { font-size: 0.92rem; margin-top: 14px; }
.site-footer h4 { color: #fff; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 9px; font-size: 0.92rem; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-bottom { border-top: 1px solid #232831; padding: 20px 0; font-size: 0.85rem; color: #7d8492; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* ============================================================
WooCommerce notices / cart / checkout
============================================================ */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--radius); border: 1px solid var(--line); background: #fff; padding: 14px 18px; margin: 0 0 20px; list-style: none; }
.woocommerce-message { border-left: 4px solid var(--ok); }
.woocommerce-info { border-left: 4px solid var(--brand); }
.woocommerce-error { border-left: 4px solid #dc2626; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--ink); color: #fff; border: none; border-radius: var(--radius-sm); padding: 11px 20px; font-weight: 600; cursor: pointer; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--brand-strong); color: #fff; }
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; width: 100%; overflow: hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.woocommerce table.shop_table th { background: var(--bg-soft); color: var(--ink); font-weight: 700; }
.woocommerce table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce-cart .cart-collaterals .cart_totals { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.woocommerce-checkout .woocommerce-billing-fields input,
.woocommerce-checkout .woocommerce-billing-fields select,
.woocommerce-checkout .woocommerce-billing-fields textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; font-family: inherit; width: 100%; }
.woocommerce form .form-row label { font-weight: 600; color: var(--ink); }
.woocommerce #payment { background: var(--bg-soft); border-radius: var(--radius); }
/* ============================================================
Pagination & misc
============================================================ */
.pagination { display: flex; gap: 8px; justify-content: center; margin: 44px 0 0; }
.pagination .page-numbers { min-width: 40px; height: 40px; padding: 0 8px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 600; }
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.entry-content h2, .entry-content h3 { margin-top: 1.8em; }
.entry-content ul, .entry-content ol { margin-bottom: 1.2em; }
.breadcrumb { font-size: 0.86rem; color: var(--ink-3); padding: 16px 0; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--brand-strong); }
/* ============================================================
Responsive
============================================================ */
@media (max-width: 1024px) {
.cat-grid, .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
.features { grid-template-columns: repeat(2, 1fr); }
.footer-top { grid-template-columns: 1fr 1fr; }
.hero .container { gap: 32px; }
}
@media (max-width: 768px) {
.main-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; background: #fff; border-bottom: 1px solid var(--line); padding: 12px; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.main-nav.open { display: flex; }
.main-nav > li { position: static; }
.main-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; box-shadow: none; border: none; border-radius: 0; padding: 0 0 6px 16px; min-width: 0; }
.main-nav .sub-menu .sub-menu { position: static; }
.main-nav > li.menu-item-has-children > a::after,
.main-nav .sub-menu .menu-item-has-children > a::after { content: ''; }
.nav-toggle { display: grid; place-items: center; }
.hero .container { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; }
.hero-visual { order: -1; }
.cat-grid, .woocommerce ul.products, .post-grid { grid-template-columns: repeat(2, 1fr); }
.stats .container { grid-template-columns: repeat(2, 1fr); }
.cta-band { flex-direction: column; align-items: flex-start; padding: 34px; }
.single-product .product { grid-template-columns: minmax(0, 1fr); }
.footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.cat-grid, .woocommerce ul.products, .post-grid, .features { grid-template-columns: 1fr; }
/* 窄屏头部空间不足：品牌副标题会把 LOGO 撑成三行、CTA 折成两行，
这里隐藏副标题、锁定品牌不收缩，并让 CTA 单行，使整行在 72px 内排完。 */
.site-header .container { gap: 10px; }
.brand { flex: 0 0 auto; font-size: 1.1rem; }
.brand small { display: none; }
.brand .brand-mark { width: 30px; height: 30px; font-size: 0.9rem; }
.brand .brand-logo { height: 28px; }
.header-actions { gap: 8px; }
.header-actions .btn-primary { white-space: nowrap; padding: 10px 14px; font-size: 0.82rem; }
}
/* ============================================================
Unified CTA box (article / page)
============================================================ */
.gstar-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 44px; padding: 28px 32px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.gstar-cta-box .gstar-cta-text strong { font-family: var(--font-display); font-size: 1.2rem; color: #fff; display: block; margin-bottom: 6px; }
.gstar-cta-box .gstar-cta-text p { margin: 0; color: #b9bec9; font-size: 0.92rem; max-width: 52ch; }
.gstar-cta-box .btn { flex: 0 0 auto; }
/* ============================================================
Inquiry modal
============================================================ */
.gstar-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.gstar-modal[hidden] { display: none; }
.gstar-modal-mask { position: absolute; inset: 0; background: rgba(18, 21, 26, 0.55); backdrop-filter: blur(2px); }
.gstar-modal-card { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 60px); overflow: auto; background: #fff; border-radius: 14px; padding: 30px 32px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22); }
.gstar-modal-card h3 { font-size: 1.35rem; margin-bottom: 18px; }
.gstar-modal-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: none; background: none; font-size: 1.5rem; line-height: 1; color: var(--ink-3); cursor: pointer; }
.gstar-modal-close:hover { color: var(--ink); }
.gstar-modal-card .wpcf7-form p { margin-bottom: 12px; }
.gstar-modal-card .wpcf7-form label { display: block; font-weight: 600; color: var(--ink); font-size: 0.9rem; margin-bottom: 4px; }
.gstar-modal-card .wpcf7-form input[type="text"], .gstar-modal-card .wpcf7-form input[type="email"], .gstar-modal-card .wpcf7-form input[type="tel"], .gstar-modal-card .wpcf7-form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; font-family: inherit; font-size: 0.95rem; }
.gstar-modal-card .wpcf7-form input:focus, .gstar-modal-card .wpcf7-form textarea:focus { outline: none; border-color: var(--brand); }
.gstar-modal-card .wpcf7-submit { width: 100%; background: var(--brand-strong); color: #fff; border: none; border-radius: var(--radius-sm); padding: 13px; font-weight: 700; font-size: 1rem; cursor: pointer; }
.gstar-modal-card .wpcf7-submit:hover { background: var(--brand); }
.gstar-modal-card .wpcf7-response-output { margin: 12px 0 0; font-size: 0.88rem; }
body.modal-open { overflow: hidden; }
/* ============================================================
Floating widgets: WhatsApp / Book appointment / Back to top
============================================================ */
.gstar-float-widgets { position: fixed; right: 18px; z-index: 150; }
.gstar-float-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; border: none; cursor: pointer; box-shadow: var(--shadow-md); transition: transform .15s ease, box-shadow .15s ease; }
.gstar-float-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(22, 24, 29, 0.16); }
.gstar-float-wa { position: fixed; right: 18px; bottom: 120px; width: 48px; height: 48px; background: #25d366; color: #fff; }
.gstar-float-book { background: var(--ink); color: #fff; padding: 12px 18px; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; }
.gstar-float-book:hover { background: var(--brand-strong); color: #fff; }
.gstar-float-top { position: fixed; right: 18px; bottom: 24px; width: 42px; height: 42px; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.gstar-float-top:hover { color: var(--brand-strong); border-color: var(--brand-strong); }
@media (max-width: 1024px) {
.article-layout.has-toc { grid-template-columns: minmax(0, 1fr); }
.article-layout.has-toc .article-toc { display: none; }
.article-layout.has-toc .toc-mobile { display: block; }
.article-layout.has-toc .single-article { margin: 0 auto; }
}
@media (max-width: 768px) {
.article-nav { grid-template-columns: 1fr; }
.gstar-cta-box { flex-direction: column; align-items: flex-start; padding: 24px; }
.gstar-float-book span { display: none; }
.gstar-float-book { width: 48px; height: 48px; padding: 0; }
.article-section { padding-top: 24px; }
.crumb-current { max-width: 24ch; }
}
/* ============================================================
Front page (static home, content from mirror)
============================================================ */
.front-page { display: block; }
.hp-sec { padding: 56px 0; }
.hp-sec:nth-of-type(even) { background: var(--bg-soft); }
.hp-sec h2 { font-family: var(--font-display); font-size: 1.7rem; margin: 0 0 18px; color: var(--ink); }
.hp-sec h3 { font-size: 1.15rem; margin: 22px 0 10px; color: var(--ink-2); }
.hp-sec p { color: var(--ink-2); line-height: 1.75; margin: 0 0 12px; }
.hp-sec ul { margin: 0 0 14px; padding-left: 20px; }
.hp-sec li { line-height: 1.7; color: var(--ink-2); margin-bottom: 6px; }
/* 能力模块（OEM/ODM 集群） */
.hp-cap h2 { border-left: 4px solid var(--brand); padding-left: 14px; }
.hp-faq, .hp-spec { list-style: none; padding-left: 0; display: grid; gap: 10px; }
.hp-faq li, .hp-spec li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0; }
.hp-sec:nth-of-type(even) .hp-faq li, .hp-sec:nth-of-type(even) .hp-spec li { background: var(--bg); }
.hp-faq li strong, .hp-spec li strong { color: var(--ink); }
@media (min-width: 900px) { .hp-spec { grid-template-columns: 1fr 1fr; } }
/* Hero */
.hp-hero { padding: 64px 0 48px; background: linear-gradient(135deg, var(--bg-tint), #fff 60%); }
.hp-hero h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.25; margin: 0 0 14px; max-width: 22ch; }
.hp-hero h3 { font-size: 1.15rem; color: var(--ink-2); font-weight: 600; margin: 4px 0; }
.hp-hero .hp-hero-img { margin: 18px 0; }
.hp-hero .hp-hero-img img { width: 100%; max-width: 860px; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.hp-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 26px; }
.hp-stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 12px; text-align: center; box-shadow: var(--shadow-sm); }
.hp-stat b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--brand-strong); }
.hp-stat span { font-size: .8rem; color: var(--ink-3); line-height: 1.35; display: block; margin-top: 4px; }
/* Product Center */
.hp-cats { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.hp-cats li { margin: 0; }
.hp-cats a, .hp-cats li { display: inline-block; }
.hp-cats a { padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .85rem; color: var(--ink-2); background: #fff; }
.hp-cats a:hover { border-color: var(--brand); color: var(--brand-strong); }
.hp-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hp-prod { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.hp-prod-img { display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-soft); margin-bottom: 10px; }
.hp-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.hp-prod-name { color: var(--ink); text-decoration: none; font-size: .92rem; line-height: 1.4; }
a.hp-prod-name:hover { color: var(--brand-strong); }
.hp-prod-feats { margin: 8px 0 0; padding-left: 16px; font-size: .78rem; color: var(--ink-3); }
.hp-prod-feats li { margin-bottom: 3px; line-height: 1.5; }
/* 案例 / Why / 工厂 / 认证 卡片区 */
.hp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hp-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); }
.hp-card-img { margin: 0 0 10px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); }
.hp-card-img img { width: 100%; height: auto; display: block; }
.hp-card-title { font-size: 1rem; margin: 0 0 8px; color: var(--ink); }
.hp-cert .hp-cards { grid-template-columns: repeat(4, 1fr); }
.hp-cert .hp-card { padding: 10px; }
.hp-factory .hp-cards { grid-template-columns: repeat(4, 1fr); }
/* Why Choose Us 为 4 张卡：改 2 列呈 2+2 填满，
避免默认 3 列造成 3+1 第二行右侧空两格的突兀布局（卡片数量若变更需同步调整）。
Industry Solutions 已按原站合并为 3 卡，使用默认 3 列；工厂 8 卡 4 列 = 4+4 填满 */
.hp-why .hp-cards { grid-template-columns: repeat(2, 1fr); }
/* 合作伙伴 logo 墙：原站为独立通栏图，非工厂卡片 */
.hp-partners-banner { margin: 24px 0 0; text-align: center; }
.hp-partners-banner img { max-width: 100%; height: auto; display: inline-block; }
/* News */
.hp-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hp-news-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.hp-news-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.hp-news-meta { list-style: none; padding: 12px 16px 0; margin: 0; font-size: .78rem; color: var(--ink-3); }
.hp-news-title { font-size: 1rem; line-height: 1.45; margin: 6px 16px 8px; }
.hp-news-title a { color: var(--ink); text-decoration: none; }
.hp-news-title a:hover { color: var(--brand-strong); }
.hp-news-ex { font-size: .85rem; color: var(--ink-3); margin: 0 16px 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Request a Quote */
.hp-quote .gstar-cta-box { margin-bottom: 22px; }
.hp-contact p { margin: 0 0 6px; }
.hp-contact a { color: var(--brand-strong); }
@media (max-width: 1024px) {
.hp-stats { grid-template-columns: repeat(3, 1fr); }
.hp-prod-grid { grid-template-columns: repeat(3, 1fr); }
.hp-cards, .hp-news-grid { grid-template-columns: repeat(2, 1fr); }
.hp-cert .hp-cards, .hp-factory .hp-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.hp-sec { padding: 38px 0; }
.hp-stats { grid-template-columns: repeat(2, 1fr); }
.hp-prod-grid { grid-template-columns: repeat(2, 1fr); }
.hp-cards, .hp-news-grid, .hp-cert .hp-cards, .hp-factory .hp-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.hp-cards, .hp-news-grid, .hp-cert .hp-cards, .hp-factory .hp-cards, .hp-why .hp-cards { grid-template-columns: 1fr; }
}
/* ===== FAQ 页：分类区块 + 子问答 ===== */
.gstar-faq-cat { background: var(--bg-soft, #f7f8fa); border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius-sm, 8px); padding: 18px 22px; margin-bottom: 34px; }
.gstar-faq-cat h2 { margin: 0 0 10px; font-size: 1.15rem; }
.gstar-faq-cat ul { list-style: none; margin: 0; padding: 0; }
.gstar-faq-cat li { margin: 0; padding: 6px 0; }
.gstar-faq-cat li a { font-weight: 600; }
.gstar-faq-sub { margin: 0.6em 0 1.2em; padding-left: 18px; border-left: 3px solid var(--line, #e5e7eb); }
.gstar-faq-sub h4 { font-size: 1.05rem; margin: 1.4em 0 0.4em; }
.gstar-faq-sub p { margin: 0 0 0.6em; }
/* ===== 首页 OEM/ODM 集群模块版式 ===== */
/* 模块 h3 统一加品牌色标 */
.hp-dev h3, .hp-custom h3, .hp-material h3, .hp-color h3,
.hp-surface h3, .hp-logo h3, .hp-pack h3 {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-display); font-weight: 700;
}
.hp-dev h3::before, .hp-custom h3::before, .hp-material h3::before,
.hp-color h3::before, .hp-surface h3::before, .hp-logo h3::before, .hp-pack h3::before {
content: ''; flex: 0 0 auto;
width: 5px; height: 16px; background: var(--brand); border-radius: 3px;
}
/* 7 阶段开发流程：编号时间轴 */
.hp-dev .hp-spec { grid-template-columns: 1fr; counter-reset: hpstep; gap: 12px; }
.hp-dev .hp-spec li {
counter-increment: hpstep;
position: relative; padding: 14px 18px 14px 62px;
border-left: 2px solid var(--line);
}
.hp-dev .hp-spec li::before {
content: counter(hpstep);
position: absolute; left: 14px; top: 13px;
width: 28px; height: 28px; border-radius: 50%;
background: var(--brand); color: #fff;
font-family: var(--font-display); font-weight: 700; font-size: .85rem;
display: grid; place-items: center;
}
/* 规格类清单：两列卡片网格 */
.hp-custom .hp-spec, .hp-material .hp-spec, .hp-color .hp-spec,
.hp-surface .hp-spec, .hp-logo .hp-spec, .hp-pack .hp-spec {
grid-template-columns: repeat(2, 1fr);
}
/* 材料对照表 */
.hp-material-table { min-width: 560px; }
.hp-material-table td:first-child { font-weight: 700; color: var(--ink); }
.hp-material-table tbody tr:nth-child(even) { background: var(--bg-soft); }
/* Why / Cases 卡片 */
.hp-why .hp-card, .hp-cases .hp-card { height: 100%; }
.hp-why .hp-card-title, .hp-cases .hp-card-title {
font-family: var(--font-display); font-size: 1.02rem; line-height: 1.4;
border-left: 3px solid var(--brand); padding-left: 10px; margin-bottom: 10px;
}
/* Products / News 模块间距 */
.hp-products .hp-cats { margin-top: 4px; }
.hp-news .hp-news-grid { margin-top: 4px; }
/* 产品卡只展示前 2 条卖点（完整内容保留在 HTML 中） */
.hp-prod-feats li:nth-child(n+3) { display: none; }
/* View All Products */
.hp-prod-more { text-align: center; margin-top: 34px; }
/* OEM/ODM 模块 FAQ 折叠 */
.hp-fold {
margin: 20px 0 0;
border: 1px solid var(--line, #e5e7eb);
border-radius: var(--radius-sm, 8px);
background: var(--bg-soft, #f7f8fa);
overflow: hidden;
}
.hp-fold > summary {
cursor: pointer; padding: 15px 20px;
font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
list-style: none; position: relative;
}
.hp-fold > summary::-webkit-details-marker { display: none; }
.hp-fold > summary::after {
content: '+'; position: absolute; right: 20px; top: 50%;
transform: translateY(-50%); color: var(--brand); font-size: 1.25rem; font-weight: 700;
}
.hp-fold[open] > summary::after { content: '−'; }
.hp-fold .hp-faq {
margin: 0; border: none; background: #fff;
border-top: 1px solid var(--line, #e5e7eb); border-radius: 0;
}
@media (max-width: 900px) {
.hp-custom .hp-spec, .hp-material .hp-spec, .hp-color .hp-spec,
.hp-surface .hp-spec, .hp-logo .hp-spec, .hp-pack .hp-spec { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.hp-dev .hp-spec li { padding-left: 54px; }
}
/* 单商品页：面包屑 / 询盘 CTA / 相关商品 */
.gstar-breadcrumb {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
font-size: 13px; color: #6b7280; margin: 0 0 18px;
}
.gstar-breadcrumb a { color: #0f5bd7; text-decoration: none; }
.gstar-breadcrumb a:hover { text-decoration: underline; }
.gstar-breadcrumb-cur { color: #111827; }
.gstar-pd-cta {
margin: 34px 0; padding: 26px 28px; border-radius: 12px;
background: #f6f8fb; border: 1px solid #e5e7eb;
display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.gstar-pd-cta p { margin: 0; color: #374151; max-width: 620px; }
.gstar-rel-title { margin: 34px 0 18px; font-size: 20px; }
/* ===== Tab groups（制造中心 / 关于我们） ===== */
.mf-head { max-width: 900px; margin: 0 auto 10px; text-align: center; }
.mf-head h2 { font-size: clamp(1.65rem, 3vw, 2.15rem); margin: 0 0 6px; letter-spacing: -0.01em; }
.mf-head p { margin: 0; color: var(--ink-3, #6b7280); font-size: 0.95rem; }
.gs-tabs-nav {
display: flex; gap: 8px; flex-wrap: wrap;
margin: 22px 0 30px; padding: 0 0 14px;
border-bottom: 1px solid var(--line);
}
.mf-nav-wrap .gs-tabs-nav { justify-content: center; margin-top: 4px; }
.gs-tab {
flex: 0 0 auto; appearance: none; cursor: pointer;
font: inherit; font-size: 0.9rem; line-height: 1;
padding: 11px 17px; border-radius: 999px;
border: 1px solid var(--line); background: #fff; color: var(--ink-2);
white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gs-tab:hover { border-color: var(--brand); color: var(--brand-strong); }
.gs-tab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.gs-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 仅当脚本就绪后隐藏非激活面板，保证无脚本时内容全部可见 */
html.gs-tabs-ready .gs-tabpanel:not(.gs-active) { display: none; }
/* 移除了原 section 上下大间距，避免 tab 内首屏出现空洞 */
html.gs-tabs-ready .gs-tabpanel.hp-sec { padding-top: 0; margin-top: 0; }
html.gs-tabs-ready .gs-tabpanel.hp-sec > .container > h2:first-child { margin-top: 0; }
/* about 页按节点分组（只在非激活节点上隐藏，激活态恢复元素自身 display） */
html.gs-tabs-ready [data-gs-tabs] [data-gs-grp]:not(.gs-active) { display: none; }
html.gs-tabs-ready [data-gs-tabs] .gs-panel-head { margin-top: 0; }
/* OEM/ODM 页 hero 数据卡（样式统一放主题，不写入正文内容） */
.gs-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 26px 0 8px; }
.gs-stat { text-align: center; }
.gs-stat-imgs { position: relative; display: inline-block; line-height: 0; }
.gs-stat-main { width: 64px; height: 64px; object-fit: contain; }
.gs-stat-badge { position: absolute; right: -10px; bottom: -10px; width: 28px; height: 28px; }
.gs-stat-name { margin-top: 12px; font-size: 15px; font-weight: 600; line-height: 1.4; }
@media (max-width: 768px) { .gs-hero-stats { grid-template-columns: repeat(2, 1fr); } }
/* OEM/ODM 页 hero 横幅主图与 Quote 区品牌图 */
.gs-hero-banner { margin: 0 0 22px; }
.gs-hero-banner img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.gs-quote-brand { margin: 0 0 14px; }
.gs-quote-brand img { width: 180px; height: auto; display: block; }
/* 关于我们：认证列表 / 证书图 / 合作品牌 */
.entry-content ul.gs-cert-list {
display: flex; flex-wrap: wrap; gap: 10px;
list-style: none; padding: 0; margin: 0 0 24px;
}
.entry-content ul.gs-cert-list li {
display: block; width: auto; margin: 0;
border: 1px solid var(--line); background: #fff; border-radius: 8px;
padding: 9px 14px; font-size: 0.85rem; font-weight: 600; color: var(--ink-2);
letter-spacing: 0.02em;
}
.gs-cert-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 22px; }
.gs-cert-gallery figure {
margin: 0; border: 1px solid var(--line); border-radius: 10px;
overflow: hidden; background: #fff;
}
.gs-cert-gallery img {
display: block; width: 100%; height: 210px;
object-fit: contain; margin: 0; border-radius: 0; background: #fff;
}
.gs-brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 22px; }
.gs-brand-grid figure {
margin: 0; height: 96px; padding: 14px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.gs-brand-grid img { width: auto; max-width: 100%; max-height: 100%; margin: 0; border-radius: 0; }
@media (max-width: 640px) {
.gs-cert-gallery, .gs-brand-grid { grid-template-columns: repeat(2, 1fr); }
.gs-cert-gallery img { height: 150px; }
}
/* ============================================================
文章页：作者栏 + 关联商品
============================================================ */
.article-author {
display: flex; gap: 16px; align-items: flex-start;
margin: 34px 0 0; padding: 20px;
border: 1px solid var(--line); border-radius: 12px; background: #fbfbfc;
}
.article-author .author-avatar {
flex: 0 0 64px; width: 64px; height: 64px;
border-radius: 50%; overflow: hidden;
border: 1px solid var(--line); background: #fff;
}
.article-author .author-avatar img {
display: block; width: 100%; height: 100%;
margin: 0; padding: 9px; border-radius: 0; object-fit: contain;
}
.article-author .author-body { min-width: 0; }
.article-author .author-eyebrow {
display: block; font-size: 0.72rem; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ink-3, #6b7280);
}
.article-author .author-name { margin: 3px 0 6px; font-size: 1.02rem; font-weight: 700; }
.article-author .author-bio { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.65; color: var(--ink-2); }
.article-author .author-link { font-size: 0.86rem; font-weight: 600; color: var(--brand-strong); text-decoration: none; }
.article-author .author-link:hover { color: var(--brand); text-decoration: underline; }
.article-products { margin: 48px 0 0; }
.article-products > h2 { font-size: 1.35rem; margin: 0 0 18px; }
.article-products ul.gs-article-products {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px; list-style: none; margin: 0; padding: 0;
}
/* 文章页不在 .woocommerce 容器内，但 WooCommerce 的基础 li 样式可能漏进来，统一收口 */
.article-products ul.gs-article-products > li {
width: auto !important; float: none !important; clear: none !important;
margin: 0 !important; padding: 0; list-style: none;
}
.article-products ul.gs-article-products::before,
.article-products ul.gs-article-products::after { display: none; content: none; }
@media (max-width: 980px) {
.article-products ul.gs-article-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.article-products ul.gs-article-products { grid-template-columns: 1fr; }
.article-author { flex-direction: column; gap: 12px; }
}
/* ============================================================
首页 hero：导语段 + 标语（替代被拆碎的多行 h3）
============================================================ */
.hp-hero .hp-lead {
max-width: 880px; margin: 6px 0 0;
font-size: 1.02rem; line-height: 1.8; color: var(--ink-2);
}
.hp-hero .hp-kicker {
margin: 16px 0 4px; font-size: 0.8rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-strong);
}
.hp-hero h2 {
font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem);
margin: 28px 0 10px;
}
/* 页面导语段（如隐私政策页首行标题） */
.entry-content .gs-lead { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0 0 18px; }
/* ============================================================
Shared page blocks (About / Contact / Catalog)
============================================================ */
.gs-eyebrow {
display: flex; align-items: center; gap: 10px;
margin: 0 0 14px;
font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-strong);
}
.gs-eyebrow::before { content: ""; flex: 0 0 auto; width: 26px; height: 2px; background: var(--brand); }
.gs-accent { color: var(--brand); }
.gs-hero-lead { margin: 0 0 26px; font-size: 1.05rem; line-height: 1.75; color: var(--ink-2); max-width: 58ch; }
.gs-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.gs-sec { padding: 72px 0; }
.gs-sec.soft { background: var(--bg-soft); }
.gs-sec-head { max-width: 760px; margin-bottom: 36px; }
.gs-sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.gs-sec-head.center .gs-eyebrow { justify-content: center; }
.gs-sec-head h2 { margin-bottom: 12px; }
.gs-sec-head p:not(.gs-eyebrow) { margin: 0; color: var(--ink-3); }
.breadcrumb .sep { color: var(--line-strong); margin: 0 6px; }
/* ============================================================
About page
============================================================ */
.gs-about-hero {
padding: 6px 0 46px;
background: linear-gradient(135deg, var(--brand-soft), #fff 58%);
border-bottom: 1px solid var(--line);
}
.gs-about-hero .breadcrumb { padding: 14px 0 0; }
.gs-about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; padding-top: 22px; }
.gs-about-hero h1 { margin-bottom: 18px; }
.gs-about-hero-media { margin: 0; }
.gs-about-hero-media img { width: 100%; height: 400px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow-md); }
.gs-statbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 38px; }
.gs-about-stat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; box-shadow: var(--shadow-sm); }
.gs-about-stat .num { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--brand-strong); }
.gs-about-stat .lbl { display: block; margin-top: 4px; font-size: 0.8rem; line-height: 1.4; color: var(--ink-3); }
.gs-story-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: 56px; align-items: start; }
.gs-story-body > h2 { margin-bottom: 18px; }
.gs-story-body > p { color: var(--ink-2); }
.gs-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.gs-fact { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; background: #fff; padding: 14px 16px; }
.gs-fact-k { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-strong); }
.gs-fact p { margin: 4px 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-2); }
.gs-timeline-wrap h2 { margin-bottom: 22px; }
.gs-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--line); }
.gs-timeline li { position: relative; padding: 0 0 22px; }
.gs-timeline li:last-child { padding-bottom: 0; }
.gs-timeline li::before { content: ""; position: absolute; left: -30px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px #fff; }
.gs-year { font-family: var(--font-display); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; color: var(--brand-strong); }
.gs-tl-title { display: block; margin-top: 2px; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.gs-timeline p { margin: 4px 0 0; font-size: 0.88rem; line-height: 1.6; color: var(--ink-3); }
.gs-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gs-why-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.gs-why-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gs-why-num { font-family: var(--font-display); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; color: var(--brand); }
.gs-why-card h3 { margin: 8px 0 6px; font-size: 1.05rem; }
.gs-why-card p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-3); }
.gs-tour-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gs-tour-card { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--ink); }
.gs-tour-card img { display: block; width: 100%; height: 260px; object-fit: cover; transition: transform .5s ease; }
.gs-tour-card:hover img { transform: scale(1.04); }
.gs-tour-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 46px 20px 16px; background: linear-gradient(transparent, rgba(10, 10, 12, 0.82)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.gs-tour-card figcaption span { border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 4px; padding: 2px 6px; font-size: 0.64rem; letter-spacing: 0.14em; color: #ffd9c2; }
.gs-cap-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.gs-cap-media { margin: 0; }
.gs-cap-media img { width: 100%; height: 440px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow-md); }
.gs-check-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.gs-check-list li { position: relative; padding-left: 26px; font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); }
.gs-check-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-soft); border: 1px solid var(--brand); }
.gs-cap-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gs-cap-stats .num { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--brand-strong); }
.gs-cap-stats .lbl { display: block; margin-top: 2px; font-size: 0.78rem; line-height: 1.45; color: var(--ink-3); }
.gs-rd-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.gs-rd-items { display: grid; gap: 14px; margin: 22px 0; }
.gs-rd-item { border-left: 3px solid var(--line); padding-left: 14px; }
.gs-rd-item h3 { margin: 0 0 3px; font-size: 0.98rem; }
.gs-rd-item p { margin: 0; font-size: 0.88rem; color: var(--ink-3); }
.gs-rd-stat .num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--brand-strong); }
.gs-rd-stat .lbl { margin-left: 8px; font-size: 0.82rem; color: var(--ink-3); }
.gs-rd-media { margin: 0; }
.gs-rd-media img { width: 100%; height: 440px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow-md); }
.gs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gs-step { position: relative; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 22px 22px 20px; }
.gs-step-no { display: inline-block; margin-bottom: 10px; font-family: var(--font-display); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; color: #fff; background: var(--brand); border-radius: 999px; padding: 3px 10px; }
.gs-step h3 { margin: 0 0 6px; font-size: 1.02rem; }
.gs-step p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--ink-3); }
.gs-quality-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.gs-gates { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gs-gates li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.gs-gates li span { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); font-family: var(--font-display); font-size: 0.75rem; font-weight: 800; }
.gs-quality-media { margin: 0; }
.gs-quality-media img { width: 100%; height: 420px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow-md); }
.gs-cert-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.gs-cert-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.gs-cert-chips span { border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); }
.gs-note { font-size: 0.9rem; color: var(--ink-3); }
.gs-cert-media { margin: 0; }
.gs-cert-media img { width: 100%; max-height: 360px; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px; }
.gs-sustain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gs-sustain-card { border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 12px; background: #fff; padding: 24px; }
.gs-sustain-card h3 { margin: 0 0 6px; font-size: 1.02rem; }
.gs-sustain-card p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-3); }
.gs-brand-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.gs-brand-chips span { padding: 7px 14px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-2); }
.gs-logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gs-logo-grid figure { margin: 0; height: 96px; padding: 16px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.gs-logo-grid img { width: auto; max-width: 100%; max-height: 100%; }
.gs-doc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gs-doc { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.gs-doc h3 { margin: 0; font-size: 0.98rem; line-height: 1.4; }
.gs-doc-meta { font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0.04em; }
.gs-doc-btn { margin-top: auto; width: 100%; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); border-radius: 8px; padding: 10px 12px; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.gs-doc-btn:hover { border-color: var(--brand-strong); color: var(--brand-strong); }
.gs-faq { display: grid; gap: 10px; }
.gs-faq-item { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.gs-faq-item summary { position: relative; cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.gs-faq-item summary::-webkit-details-marker { display: none; }
.gs-faq-item summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--brand); font-size: 1.2rem; font-weight: 700; }
.gs-faq-item[open] summary::after { content: '−'; }
.gs-faq-body { padding: 0 20px 18px; border-top: 1px solid var(--line); }
.gs-faq-body p { margin: 14px 0 0; font-size: 0.9rem; line-height: 1.7; color: var(--ink-2); }
/* ============================================================
Contact page
============================================================ */
.gs-contact-hero { padding: 6px 0 50px; background: linear-gradient(135deg, var(--brand-soft), #fff 58%); border-bottom: 1px solid var(--line); }
.gs-contact-hero .breadcrumb { padding: 14px 0 0; }
.gs-contact-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px; align-items: center; padding-top: 22px; }
.gs-contact-hero h1 { margin-bottom: 16px; }
.gs-contact-quick { display: flex; flex-wrap: wrap; gap: 12px; }
.gs-quick-pill { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); }
.gs-quick-k { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.gs-quick-v { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.gs-contact-hero-note { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; background: #fff; padding: 24px 26px; box-shadow: var(--shadow-sm); }
.gs-hero-badge { display: inline-block; margin-bottom: 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; }
.gs-contact-hero-note p { margin: 0; font-size: 0.92rem; line-height: 1.7; color: var(--ink-2); }
.gs-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; }
.gs-form-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 32px; box-shadow: var(--shadow-sm); }
.gs-form-card h2 { margin-bottom: 8px; font-size: 1.5rem; }
.gs-form-sub { margin: 0 0 4px; font-size: 0.92rem; color: var(--ink-3); }
.gs-form-card .wpcf7-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin-top: 22px; }
.gs-form-card .wpcf7-form p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink-3); }
.gs-form-card .wpcf7-form p > br { display: none; }
.gs-form-card .wpcf7-form input[type="text"],
.gs-form-card .wpcf7-form input[type="email"],
.gs-form-card .wpcf7-form input[type="tel"],
.gs-form-card .wpcf7-form input[type="file"],
.gs-form-card .wpcf7-form select,
.gs-form-card .wpcf7-form textarea { width: 100%; margin-top: 6px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 11px 13px; background: #fff; font-family: inherit; font-size: 0.95rem; color: var(--ink); }
.gs-form-card .wpcf7-form textarea { min-height: 128px; resize: vertical; }
.gs-form-card .wpcf7-form input:focus,
.gs-form-card .wpcf7-form select:focus,
.gs-form-card .wpcf7-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.12); }
.gs-form-card .wpcf7-form p:has(textarea),
.gs-form-card .wpcf7-form p:has(input[type="file"]),
.gs-form-card .wpcf7-form p:has(input[type="checkbox"]),
.gs-form-card .wpcf7-form p:has(a[target="_blank"]),
.gs-form-card .wpcf7-form p:last-of-type { grid-column: 1 / -1; }
.gs-form-card .wpcf7-form select option { color: var(--ink); }
.gs-form-card .wpcf7-submit { width: 100%; border: none; border-radius: 9px; background: var(--brand-strong); color: #fff; padding: 14px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; cursor: pointer; transition: background-color .15s ease; }
.gs-form-card .wpcf7-submit:hover { background: var(--brand); }
.gs-form-card .wpcf7-not-valid-tip { display: block; margin-top: 4px; font-size: 0.78rem; color: #dc2626; }
.gs-form-card .wpcf7-response-output { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: 8px; font-size: 0.88rem; }
.gs-form-card .wpcf7-form .wpcf7-list-item { margin-left: 0; }
.gs-contact-side { display: grid; gap: 18px; }
.gs-contact-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 26px 24px; box-shadow: var(--shadow-sm); }
.gs-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.gs-contact-item { display: flex; gap: 14px; align-items: flex-start; }
.gs-ci-icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: var(--brand-soft); border: 1px solid rgba(232, 89, 12, 0.25); color: var(--brand-strong); }
.gs-ci-icon svg { width: 19px; height: 19px; }
.gs-ci-k { display: block; margin-bottom: 2px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.gs-contact-item a, .gs-ci-v { font-size: 0.92rem; line-height: 1.55; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.gs-contact-item a:hover { color: var(--brand-strong); }
.gs-map-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 168px; padding: 24px; border: 1px solid var(--line-strong); border-radius: 14px; background:
linear-gradient(rgba(232, 89, 12, 0.06), rgba(232, 89, 12, 0.06)),
repeating-linear-gradient(0deg, #fff, #fff 27px, var(--line) 27px, var(--line) 28px),
repeating-linear-gradient(90deg, #fff, #fff 27px, var(--line) 27px, var(--line) 28px);
background-blend-mode: normal, multiply, multiply; }
.gs-map-card:hover { border-color: var(--brand); }
.gs-map-pin svg { width: 28px; height: 28px; color: var(--brand); }
.gs-map-k { margin-top: auto; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink); }
.gs-map-v { margin-top: 2px; font-size: 0.82rem; font-weight: 600; color: var(--brand-strong); }
.gs-team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.gs-team-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 24px; text-align: center; }
.gs-team-photo { margin: 0 auto 14px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 3px solid var(--brand-soft); background: var(--bg-soft); }
.gs-team-photo img { width: 100%; height: 100%; object-fit: cover; }
.gs-team-card h3 { margin: 0 0 2px; font-size: 1.05rem; }
.gs-team-role { display: inline-block; margin-bottom: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-strong); }
.gs-team-card p { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--ink-3); }
/* ============================================================
Product catalog (Alibaba-style marketplace)
============================================================ */
.gs-shop-hero { padding: 6px 0 42px; background: linear-gradient(135deg, var(--bg-soft), #fff 62%); border-bottom: 1px solid var(--line); }
.gs-shop-hero .breadcrumb { padding: 14px 0 0; }
.gs-shop-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 40px; align-items: center; padding-top: 22px; }
.gs-shop-hero h1 { margin-bottom: 14px; }
.gs-shop-hero-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 24px 26px; box-shadow: var(--shadow-sm); }
.gs-shop-hero-card ul { list-style: none; margin: 0; padding: 0; }
.gs-shop-hero-card li { padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 0.88rem; color: var(--ink-2); }
.gs-shop-hero-card li:last-child { border-bottom: none; padding-bottom: 0; }
.gs-shop-hero-card strong { font-family: var(--font-display); font-weight: 800; color: var(--brand-strong); margin-right: 4px; }
.gs-shop-section { padding: 40px 0 72px; }
.gs-shop-layout { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 32px; align-items: start; }
.gs-side-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 20px 18px; margin-bottom: 18px; }
.gs-side-card h3 { margin: 0 0 12px; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.gs-cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gs-cat-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 0.88rem; color: var(--ink-2); }
.gs-cat-list a:hover { background: var(--brand-soft); color: var(--brand-strong); }
.gs-cat-list a.is-active { background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; }
.gs-cat-n { flex: 0 0 auto; font-size: 0.76rem; color: var(--ink-3); }
.gs-cat-list a.is-active .gs-cat-n { color: var(--brand-strong); }
.gs-side-cta { background: var(--ink); border-color: var(--ink); }
.gs-side-cta h3 { color: #fff; }
.gs-side-cta p { margin: 0 0 16px; font-size: 0.86rem; line-height: 1.6; color: #b9bec9; }
.gs-side-cta .btn { width: 100%; }
.gs-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.gs-chip { padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.gs-chip:hover { border-color: var(--brand); color: var(--brand-strong); }
.gs-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.gs-shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.gs-shop-count { margin: 0; font-size: 0.86rem; color: var(--ink-3); }
.gs-shop-count strong { color: var(--ink); }
.gs-shop-sort { display: flex; align-items: center; gap: 8px; }
.gs-shop-sort label { font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.gs-shop-sort select { border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; background: #fff; font-family: inherit; font-size: 0.86rem; color: var(--ink); }
.gs-shop-sort .gs-sort-btn { padding: 8px 14px; font-size: 0.84rem; }
.gs-shop-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gs-filter-key input { width: 210px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; background: #fff; font-family: inherit; font-size: 0.86rem; color: var(--ink); }
.gs-filter-key input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.12); }
.gs-filter-sort { display: flex; align-items: center; gap: 8px; }
.gs-filter-sort label { font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.gs-filter-sort select { border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; background: #fff; font-family: inherit; font-size: 0.86rem; color: var(--ink); }
.gs-shop-filters .gs-sort-btn { padding: 8px 14px; font-size: 0.84rem; }
.gs-filter-reset { font-size: 0.82rem; font-weight: 600; color: var(--ink-3); text-decoration: underline; }
.gs-filter-reset:hover { color: var(--brand-strong); }
.gs-shop-main .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gs-shop-empty { padding: 40px 0; color: var(--ink-3); text-align: center; }
.gs-shop-pager, .woocommerce-pagination { margin-top: 40px; }
.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; border: none; }
.woocommerce-pagination ul.page-numbers li { margin: 0; border: none; }
.woocommerce-pagination .page-numbers { min-width: 40px; height: 40px; padding: 0 8px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 600; }
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
/* ============================================================
Responsive — About / Contact / Catalog
============================================================ */
@media (max-width: 1200px) {
.gs-shop-layout { grid-template-columns: 230px minmax(0, 1fr); }
.gs-shop-main .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
.gs-sec { padding: 56px 0; }
.gs-about-hero-grid, .gs-shop-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.gs-about-hero-media img { height: 320px; }
.gs-story-grid, .gs-cap-grid, .gs-rd-grid, .gs-quality-grid, .gs-cert-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.gs-cap-media img, .gs-rd-media img, .gs-quality-media img { height: 340px; }
.gs-why-grid, .gs-steps, .gs-sustain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-doc-grid, .gs-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-contact-grid { grid-template-columns: minmax(0, 1fr); }
.gs-contact-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.gs-shop-side { display: none; }
.gs-shop-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
.gs-sec { padding: 42px 0; }
.gs-statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gs-about-hero-media img { height: 250px; }
.gs-tour-grid, .gs-fact-grid { grid-template-columns: minmax(0, 1fr); }
.gs-cap-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gs-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-form-card { padding: 22px; }
.gs-form-card .wpcf7-form { grid-template-columns: minmax(0, 1fr); }
.gs-form-card .wpcf7-form p { grid-column: 1 / -1; }
.gs-shop-toolbar { align-items: flex-start; }
.gs-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.gs-why-grid, .gs-steps, .gs-sustain-grid, .gs-doc-grid, .gs-team-grid, .gs-shop-main .woocommerce ul.products { grid-template-columns: minmax(0, 1fr); }
.gs-hero-cta .btn { width: 100%; }
.gs-shop-sort { width: 100%; }
.gs-shop-sort select { flex: 1; }
.gs-shop-filters { width: 100%; }
.gs-filter-key { width: 100%; }
.gs-filter-key input { width: 100%; }
.gs-filter-sort { width: 100%; }
.gs-filter-sort select { flex: 1; }
}
/* ============================================================
Single product page (B2B inquiry layout)
============================================================ */
/* Top: gallery left + info card right */
.gstar-pd-top {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 40px;
align-items: start;
margin-top: 28px;
}
/* Gallery */
.gstar-pd-gallery-box {
position: sticky;
top: calc(var(--header-h) + 20px);
}
.gstar-gal-main {
width: 100%;
aspect-ratio: 1 / 1;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
display: grid;
place-items: center;
margin-bottom: 14px;
}
.gstar-gal-main img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
cursor: zoom-in;
}
.gstar-gal-main.gstar-gal-placeholder img {
width: 80%;
height: auto;
opacity: 0.9;
}
.gstar-gal-thumbs {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.gstar-gal-thumb {
padding: 0;
border: 2px solid var(--line);
border-radius: 8px;
background: #fff;
cursor: pointer;
overflow: hidden;
aspect-ratio: 1 / 1;
transition: border-color 0.15s;
}
.gstar-gal-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gstar-gal-thumb:hover {
border-color: var(--brand);
}
.gstar-gal-thumb.is-active {
border-color: var(--brand-strong);
box-shadow: 0 0 0 2px rgba(232, 89, 12, 0.18);
}
/* Info card */
.gstar-pd-info-card {
position: sticky;
top: calc(var(--header-h) + 20px);
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
padding: 26px 28px;
box-shadow: var(--shadow-sm);
}
.gstar-pd-title {
font-size: clamp(1.4rem, 2.6vw, 1.85rem);
line-height: 1.3;
margin: 0 0 14px;
color: var(--ink);
}
.gstar-pd-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
font-size: 0.9rem;
color: var(--ink-2);
}
.gstar-pd-meta-item strong {
color: var(--ink-3);
font-weight: 600;
margin-right: 4px;
}
.gstar-pd-bullets {
list-style: none;
margin: 0 0 20px;
padding: 0;
display: grid;
gap: 10px;
}
.gstar-pd-bullets li {
display: flex;
gap: 12px;
align-items: baseline;
font-size: 0.94rem;
line-height: 1.5;
}
.gstar-pd-bullet-k {
flex: 0 0 88px;
font-weight: 700;
color: var(--ink-3);
font-size: 0.82rem;
letter-spacing: 0.03em;
}
.gstar-pd-bullet-v {
color: var(--ink);
}
.gstar-pd-price-hint {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 18px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, rgba(232, 89, 12, 0.06), rgba(232, 89, 12, 0.02));
border: 1px solid rgba(232, 89, 12, 0.18);
margin-bottom: 20px;
}
.gstar-pd-price-label {
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-strong);
}
.gstar-pd-price-val {
font-size: 1.15rem;
font-weight: 800;
color: var(--ink);
}
.gstar-pd-price-hint small {
font-size: 0.78rem;
color: var(--ink-3);
}
.gstar-pd-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 16px;
}
.gstar-pd-actions .btn {
justify-content: center;
}
.gstar-pd-trust-mini {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
font-size: 0.82rem;
font-weight: 600;
color: var(--ink-2);
}
/* Tabs */
.gstar-pd-tabs {
margin-top: 48px;
}
.gstar-pd-tab-nav {
display: flex;
flex-wrap: wrap;
gap: 4px;
border-bottom: 2px solid var(--line);
margin-bottom: 28px;
}
.gstar-pd-tab {
padding: 12px 22px;
border: none;
background: none;
font-size: 0.96rem;
font-weight: 600;
color: var(--ink-3);
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: color 0.15s, border-color 0.15s;
}
.gstar-pd-tab:hover {
color: var(--brand-strong);
}
.gstar-pd-tab.is-active {
color: var(--brand-strong);
border-bottom-color: var(--brand-strong);
}
.gstar-pd-panel {
display: none;
}
.gstar-pd-panel.is-active {
display: block;
animation: gstar-fade-in 0.2s ease;
}
@keyframes gstar-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Trust bar */
.gstar-pd-trust-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 48px 0;
}
.gstar-trust-item {
text-align: center;
padding: 22px 16px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
}
.gstar-trust-item strong {
display: block;
font-size: 1.3rem;
font-weight: 800;
color: var(--brand-strong);
margin-bottom: 4px;
}
.gstar-trust-item span {
font-size: 0.82rem;
color: var(--ink-3);
}
/* Packaging & shipping */
.gstar-pd-shipping {
margin: 36px 0;
}
.gstar-pd-shipping h3 {
font-size: 1.35rem;
margin-bottom: 20px;
}
.gstar-pd-shipping-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.gstar-ship-item {
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-soft);
}
.gstar-ship-item h4 {
margin: 0 0 8px;
font-size: 1rem;
color: var(--brand-strong);
}
.gstar-ship-item p {
margin: 0;
font-size: 0.88rem;
line-height: 1.6;
color: var(--ink-2);
}
/* Override existing gstar-pd-* content styles to fit tab panels */
.gstar-pd-panel .gstar-pd-brief { margin-bottom: 24px; }
.gstar-pd-panel .gstar-pd-desc { margin-bottom: 0; }
.gstar-pd-panel .gstar-pd-workshop { margin-bottom: 0; }
.gstar-pd-panel .gstar-pd-specs { margin-bottom: 0; }
.gstar-pd-panel .gstar-pd-faq { margin-bottom: 0; }
.gstar-pd-panel h2 { font-size: 1.4rem; margin: 0 0 16px; padding-top: 0; border-top: none; }
.gstar-pd-panel h3 { font-size: 1.1rem; margin: 1.6em 0 0.6em; }
.gstar-pd-panel p { margin-bottom: 1.1em; }
/* CTA */
.gstar-pd-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 40px;
padding: 24px 28px;
border-radius: var(--radius);
background: var(--ink);
color: #fff;
}
.gstar-pd-cta p {
margin: 0;
color: #d1d5db;
max-width: 620px;
font-size: 0.96rem;
}
.gstar-pd-cta .btn {
flex: 0 0 auto;
background: var(--brand);
color: #fff;
border-color: var(--brand);
}
.gstar-pd-cta .btn:hover {
background: var(--brand-strong);
}
/* Responsive — single product */
@media (max-width: 1024px) {
.gstar-pd-top {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.gstar-pd-gallery-box,
.gstar-pd-info-card {
position: static;
}
.gstar-pd-trust-bar,
.gstar-pd-shipping-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.gstar-gal-thumbs {
grid-template-columns: repeat(4, 1fr);
}
.gstar-pd-info-card {
padding: 20px;
}
.gstar-pd-bullet-k {
flex-basis: 76px;
}
.gstar-pd-actions {
grid-template-columns: 1fr;
}
.gstar-pd-cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
}
.gstar-pd-cta .btn {
width: 100%;
}
.gstar-pd-tab {
padding: 10px 14px;
font-size: 0.86rem;
}
}
@media (max-width: 480px) {
.gstar-pd-trust-bar,
.gstar-pd-shipping-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ============================================================
Search results & 404
============================================================ */
.gstar-search-form {
display: flex;
gap: 10px;
max-width: 560px;
margin-top: 18px;
}
.gstar-search-input {
flex: 1;
min-width: 0;
padding: 12px 16px;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
font: inherit;
font-size: 0.95rem;
color: var(--ink);
background: #fff;
}
.gstar-search-input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.12);
}
.gstar-search-count {
color: var(--ink-3);
font-size: 0.9rem;
margin: 10px 0 0;
}
.gstar-search-head-row {
margin-top: 44px;
}
.gstar-search-head-row h2 {
margin: 0;
font-size: 1.5rem;
}
.gstar-search-more {
font-size: 0.9rem;
font-weight: 600;
}
.gstar-search-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin-top: 20px;
}
.gstar-sr-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: border-color 0.15s, transform 0.15s;
}
.gstar-sr-card:hover {
border-color: var(--brand);
transform: translateY(-2px);
}
.gstar-sr-thumb {
display: block;
aspect-ratio: 1 / 1;
background: var(--bg-soft);
}
.gstar-sr-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.gstar-sr-body {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px 16px;
}
.gstar-sr-title {
font-family: var(--font-display);
font-size: 0.98rem;
font-weight: 700;
line-height: 1.35;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gstar-sr-meta {
font-size: 0.8rem;
color: var(--ink-3);
}
.gstar-sr-cta {
margin-top: 6px;
font-size: 0.82rem;
font-weight: 700;
color: var(--brand-strong);
}
.gstar-search-empty {
max-width: 640px;
margin: 48px auto;
padding: 48px 24px;
text-align: center;
background: var(--bg-soft);
border: 1px dashed var(--line-strong);
border-radius: var(--radius);
}
.gstar-search-empty h2 {
margin: 0 0 8px;
font-size: 1.4rem;
}
.gstar-search-empty p {
margin: 0 0 20px;
color: var(--ink-3);
}
.gstar-search-cats {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin: 20px 0;
}
.gstar-cat-pill {
padding: 8px 16px;
background: #fff;
border: 1px solid var(--line-strong);
border-radius: 999px;
font-size: 0.86rem;
font-weight: 600;
color: var(--ink-2);
}
.gstar-cat-pill:hover {
border-color: var(--brand);
color: var(--brand-strong);
}
.gstar-search-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 8px;
}
/* 404 */
.gstar-404-hero {
max-width: 720px;
margin: 0 auto;
padding: 48px 0 8px;
text-align: center;
}
.gstar-404-code {
display: block;
font-family: var(--font-display);
font-size: clamp(4rem, 12vw, 8rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: var(--brand);
}
.gstar-404-hero h1 {
margin: 8px 0 10px;
font-size: 1.8rem;
color: var(--ink);
}
.gstar-404-lead {
max-width: 520px;
margin: 0 auto;
color: var(--ink-3);
}
.gstar-404-hero .gstar-search-form {
margin: 24px auto 20px;
}
.gstar-404-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.gstar-404-cats {
margin-top: 32px;
}
.gstar-404-path {
margin: 12px auto 0;
font-size: 0.92rem;
color: var(--ink-3);
word-break: break-all;
}
.gstar-404-path code {
padding: 2px 6px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 4px;
font-size: 0.92em;
color: var(--ink-2);
}
.gstar-404-hint {
max-width: 560px;
margin: 18px auto 0;
padding: 12px 18px;
background: var(--bg-soft);
border: 1px solid var(--brand);
border-radius: var(--radius);
font-size: 0.95rem;
color: var(--ink-2);
}
.gstar-404-hint a {
font-weight: 700;
color: var(--brand-strong);
}
.gstar-404-hint a:hover {
text-decoration: underline;
}
@media (max-width: 1024px) {
.gstar-search-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
.gstar-search-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.gstar-search-form {
flex-direction: column;
}
.gstar-search-form .btn {
width: 100%;
}
.gstar-search-grid {
grid-template-columns: minmax(0, 1fr);
}
.gstar-404-hero {
padding-top: 24px;
}
.gstar-404-actions .btn {
width: 100%;
}
}
/* ============================================================
Landing page shell (page.php)
============================================================ */
.page-landing > .gstar-breadcrumb {
margin-bottom: 16px;
}
/* ============================================================
Product certifications & reviews
============================================================ */
.gstar-pd-certs {
margin: 36px 0;
padding: 28px 30px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-soft);
}
.gstar-pd-certs-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 10px 24px;
margin-bottom: 20px;
}
.gstar-pd-certs-head h3 {
margin: 0;
font-size: 1.35rem;
}
.gstar-pd-certs-head p {
margin: 0;
max-width: 56ch;
font-size: 0.9rem;
line-height: 1.6;
color: var(--ink-2);
}
.gstar-cert-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 22px;
padding: 0;
list-style: none;
}
.gstar-cert-badges li {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: #fff;
font-size: 0.86rem;
font-weight: 700;
color: var(--ink);
}
.gstar-cert-check {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--ok, #15803d);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
}
.gstar-qc-gates {
padding-top: 18px;
border-top: 1px dashed var(--line-strong);
}
.gstar-qc-gates h4 {
margin: 0 0 10px;
font-size: 0.98rem;
color: var(--ink);
}
.gstar-qc-gates ol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px 20px;
margin: 0;
padding-left: 20px;
font-size: 0.88rem;
line-height: 1.6;
color: var(--ink-2);
}
.gstar-qc-gates strong {
color: var(--brand-strong);
}
.gstar-pd-reviews {
margin: 36px 0;
}
.gstar-pd-reviews h3 {
font-size: 1.35rem;
margin-bottom: 16px;
}
.gstar-review-count {
font-size: 0.9rem;
font-weight: 600;
color: var(--ink-3);
}
.gstar-review-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 14px;
}
.gstar-review-item {
padding: 18px 20px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
}
.gstar-review-meta {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
font-size: 0.86rem;
color: var(--ink-3);
}
.gstar-review-item p {
margin: 0;
font-size: 0.94rem;
line-height: 1.65;
color: var(--ink-2);
}
@media (max-width: 1024px) {
.gstar-qc-gates ol {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.gstar-pd-certs {
padding: 22px 20px;
}
.gstar-qc-gates ol {
grid-template-columns: minmax(0, 1fr);
}
}
/* =====================================================
首页 HERO（[gstar_hero]）— 深色面板 + 双 CTA + 浮动芯片 + stat band
===================================================== */
.gh-hero {
position: relative;
overflow: hidden;
color: #fff;
background: linear-gradient(135deg, #101218 0%, #16181d 55%, #1c2029 100%);
}
.gh-hero-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(ellipse at 72% 18%, #000 25%, transparent 72%);
mask-image: radial-gradient(ellipse at 72% 18%, #000 25%, transparent 72%);
pointer-events: none;
}
.gh-hero-bg::after {
content: "";
position: absolute;
right: -140px;
top: -140px;
width: 560px;
height: 560px;
background: radial-gradient(circle, rgba(232, 89, 12, 0.30), transparent 65%);
}
.gh-hero-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 48px;
align-items: center;
padding-top: 72px;
padding-bottom: 72px;
}
.gh-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 1px solid rgba(232, 89, 12, 0.55);
border-radius: 999px;
background: rgba(232, 89, 12, 0.12);
color: #ffb27e;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
}
.gh-badge svg { flex: 0 0 auto; }
.gh-hero-h1 {
margin: 20px 0 14px;
font-family: var(--font-display);
font-size: clamp(1.9rem, 4.2vw, 3.3rem);
line-height: 1.12;
font-weight: 800;
letter-spacing: -0.02em;
color: #fff;
}
.gh-hero-lead {
margin: 0 0 18px;
max-width: 560px;
color: #b9bfca;
font-size: clamp(0.98rem, 1.4vw, 1.08rem);
line-height: 1.65;
}
.gh-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 26px;
}
.gh-tags span {
padding: 5px 12px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
color: #d6dae2;
font-size: 12.5px;
font-weight: 500;
}
.gh-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.gh-btn-lg {
padding: 13px 26px;
font-size: 15px;
}
.gh-btn-ghost {
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.35);
background: transparent;
color: #fff;
text-decoration: none;
border-radius: var(--radius);
font-weight: 600;
transition: background 0.15s ease;
}
.gh-btn-ghost:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.gh-meta {
margin: 0;
color: #8b919d;
font-size: 12.5px;
}
.gh-hero-visual { position: relative; }
.gh-hero-shot {
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(232, 89, 12, 0.18);
transform: rotate(0.5deg);
}
.gh-hero-shot img { display: block; width: 100%; height: auto; }
.gh-hero-shot-fallback {
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, #232733 0%, #16181d 60%, #2a2018 100%);
}
/* --- Canvas visual (ShieldField: live Faraday field) --- */
.gh-canvas-wrap {
position: relative;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 14px;
overflow: hidden;
background: rgba(22, 24, 29, 0.7);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(232, 89, 12, 0.18);
transform: rotate(0.5deg);
aspect-ratio: 5 / 4;
min-height: 300px;
}
.gh-hero-canvas {
display: block;
width: 100%;
height: 100%;
}
.gh-canvas-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
padding: 14px 16px;
}
.gh-canvas-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.mono-label {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: #8b9199;
}
.num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.gh-statband {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.25);
}
.gh-statband-inner {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
padding-top: 22px;
padding-bottom: 22px;
}
.gh-statband-inner > div { text-align: center; }
.gh-statband-inner strong {
display: block;
color: #ff8a3d;
font-family: var(--font-display);
font-size: clamp(1.15rem, 2vw, 1.5rem);
font-weight: 800;
line-height: 1.2;
}
.gh-statband-inner span {
color: #9aa0ac;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
@media (max-width: 960px) {
.gh-hero-inner {
grid-template-columns: 1fr;
gap: 44px;
padding-top: 48px;
padding-bottom: 56px;
}
.gh-canvas-wrap { aspect-ratio: 16 / 10; }
.gh-statband-inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 8px;
}
.gh-statband-inner > div:last-child { grid-column: 1 / -1; }
}
/* =====================================================
OEM/ODM 报价估算器（[gstar_odm_quote]）
===================================================== */
.gh-quote {
background: var(--bg-soft);
padding: 72px 0 80px;
border-bottom: 1px solid var(--line);
}
.gh-quote-head {
text-align: center;
max-width: 640px;
margin: 0 auto 34px;
}
.gh-quote-kicker {
display: inline-block;
padding: 5px 12px;
border-radius: 999px;
background: var(--brand-soft);
color: var(--brand-strong);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.gh-quote-head h2 {
margin: 14px 0 10px;
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.3rem);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ink);
}
.gh-quote-head p {
margin: 0;
color: var(--ink-3);
line-height: 1.6;
}
.gq-tabs {
display: inline-flex;
gap: 6px;
padding: 5px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
box-shadow: var(--shadow-sm);
margin-bottom: 28px;
}
.gh-quote-head + .gq-tabs { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
.gq-tab {
border: 0;
background: transparent;
padding: 9px 20px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
color: var(--ink-3);
cursor: pointer;
transition: all 0.15s ease;
}
.gq-tab.active {
background: var(--ink);
color: #fff;
}
.gq-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) 400px;
gap: 24px;
align-items: start;
}
.gq-config {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: start;
}
.gq-opt {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 16px 16px 14px;
box-shadow: var(--shadow-sm);
}
.gq-opt-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.gq-opt-label > span:first-child {
font-weight: 700;
font-size: 13.5px;
color: var(--ink);
}
.gq-note {
color: var(--ink-3);
font-size: 11.5px;
text-align: right;
}
.gq-chips {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.gq-sub {
flex-basis: 100%;
margin-top: 4px;
color: var(--ink-3);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.gq-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: #fff;
color: var(--ink-2);
font-size: 12.5px;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
transition: all 0.12s ease;
}
.gq-chip:hover {
border-color: var(--brand);
color: var(--brand-strong);
}
.gq-chip.on {
border-color: var(--brand);
background: var(--brand);
color: var(--on-brand);
font-weight: 600;
}
.gq-chip.dim {
opacity: 0.38;
cursor: not-allowed;
}
.gq-delta {
font-size: 11px;
font-weight: 700;
color: var(--warn);
white-space: nowrap;
}
.gq-chip.on .gq-delta { color: rgba(255, 255, 255, 0.9); }
.gq-qty-row {
display: grid;
grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
}
.gq-input {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
font-size: 13.5px;
color: var(--ink);
background: #fff;
}
.gq-input:focus {
outline: 2px solid rgba(232, 89, 12, 0.35);
border-color: var(--brand);
}
.gq-moq {
margin: 10px 0 0;
color: var(--ink-3);
font-size: 12px;
}
.gq-result {
position: sticky;
top: 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow-md);
}
.gq-result-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.gq-result-title {
font-family: var(--font-display);
font-weight: 800;
font-size: 15px;
color: var(--ink);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.gq-cur {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
}
.gq-cur button {
border: 0;
background: transparent;
padding: 5px 12px;
font-size: 12px;
font-weight: 700;
color: var(--ink-3);
cursor: pointer;
}
.gq-cur button.on {
background: var(--brand);
color: var(--on-brand);
}
.gq-row {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 7px 0;
border-bottom: 1px dashed var(--line);
font-size: 13.5px;
}
.gq-row .gq-k {
color: var(--ink-3);
flex: 0 0 auto;
}
.gq-row .gq-v {
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--ink);
font-weight: 600;
}
.gq-hint {
display: block;
max-width: 220px;
color: var(--ink-3);
font-size: 11px;
font-weight: 400;
text-align: right;
}
.gq-row.strong .gq-v { color: var(--brand-strong); font-weight: 800; }
.gq-row.total {
border-bottom: 0;
margin-top: 4px;
padding: 12px 0 4px;
border-top: 2px solid var(--ink);
}
.gq-row.total .gq-k { color: var(--ink); font-weight: 700; }
.gq-row.total .gq-v {
color: var(--brand);
font-size: 22px;
font-weight: 800;
}
.gq-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
margin-top: 14px;
}
.gq-copy {
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: #fff;
padding: 11px 16px;
font-size: 13.5px;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
}
.gq-copy:hover {
border-color: var(--brand);
color: var(--brand-strong);
}
.gq-estimate-note {
margin: 10px 0 0;
color: var(--ink-3);
font-size: 12px;
text-align: center;
}
.gq-quote-text {
display: none;
}
.gq-terms {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 30px;
}
.gq-terms > div {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 13px 16px;
}
.gq-terms strong {
display: block;
color: var(--brand-strong);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 3px;
}
.gq-terms span {
color: var(--ink-2);
font-size: 12.5px;
}
@media (max-width: 1100px) {
.gq-wrap { grid-template-columns: 1fr; }
.gq-result { position: static; }
}
@media (max-width: 760px) {
.gq-config { grid-template-columns: 1fr; }
.gq-qty-row { grid-template-columns: 1fr 1fr; }
.gq-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gq-hint { max-width: 150px; }
}
/* Language switcher (Polylang) */
.gstar-lang {
position: relative;
}
.gstar-lang > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border: 1px solid #dfe3e2;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: inherit;
user-select: none;
}
.gstar-lang > summary::-webkit-details-marker {
display: none;
}
.gstar-lang[open] > summary {
border-color: #1f2937;
}
.gstar-lang-caret {
opacity: 0.55;
transition: transform 0.15s ease;
}
.gstar-lang[open] .gstar-lang-caret {
transform: rotate(180deg);
}
.gstar-lang-menu {
position: absolute;
right: 0;
top: calc(100% + 8px);
z-index: 60;
min-width: 132px;
margin: 0;
padding: 6px;
list-style: none;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.gstar-lang-menu li a {
display: block;
padding: 7px 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #1f2937;
text-decoration: none;
white-space: nowrap;
}
.gstar-lang-menu li a:hover {
background: #f3f4f6;
}
.gstar-lang-menu li.is-current a {
background: #111827;
color: #fff;
}
@media (max-width: 760px) {
.gstar-lang-menu {
position: fixed;
left: 12px;
right: 12px;
top: 64px;
min-width: 0;
}
}
/* ============================================================
OEM / ODM service page (.gs-od-*)
独立命名空间，不复用 hp-* / gs-* 组件，避免与首页串味。
============================================================ */
.gs-od-sec {
padding: 46px 0;
border-top: 1px solid var(--line);
}
.gs-od-sec:first-of-type { border-top: 0; padding-top: 8px; }
.gs-od-sec--soft { background: var(--bg-soft); border-radius: 18px; padding: 46px 40px; margin: 34px 0; border-top: 0; }
.gs-od-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display); font-size: .74rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--brand-strong);
margin: 0 0 12px;
}
.gs-od-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--brand); }
.gs-od-h2 { margin: 0 0 12px; }
.gs-od-lead { max-width: 70ch; color: var(--ink-2); margin: 0 0 26px; }
/* Hero --------------------------------------------------- */
.gs-od-hero { display: grid; grid-template-columns: 1.04fr .96fr; gap: 46px; align-items: center; padding: 4px 0 22px; }
.gs-od-hero-copy { min-width: 0; }
.gs-od-hero-media { position: relative; }
.gs-od-hero-media img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
border-radius: 16px; box-shadow: var(--shadow-md);
}
.gs-od-hero-tag {
position: absolute; left: 16px; bottom: 16px;
display: flex; align-items: center; gap: 10px;
padding: 9px 14px; border-radius: 10px;
background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
font-size: .78rem; font-weight: 700; color: var(--ink); line-height: 1.2;
box-shadow: var(--shadow-sm);
}
.gs-od-hero-tag span {
width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: 0 0 auto;
}
.gs-od-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
/* Stat strip --------------------------------------------- */
.gs-od-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
margin: 8px 0 0; border: 1px solid var(--line); border-radius: 14px;
overflow: hidden; background: #fff;
}
.gs-od-stat { padding: 20px 22px; }
.gs-od-stat + .gs-od-stat { border-left: 1px solid var(--line); }
.gs-od-stat .n {
font-family: var(--font-display); font-size: 1.55rem; font-weight: 800;
color: var(--ink); letter-spacing: -.02em; line-height: 1.1;
}
.gs-od-stat .n em { font-style: normal; color: var(--brand); }
.gs-od-stat .l { margin-top: 3px; font-size: .8rem; color: var(--ink-3); }
/* Route cards -------------------------------------------- */
.gs-od-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gs-od-path {
display: flex; flex-direction: column; height: 100%;
padding: 26px 24px 22px; background: #fff;
border: 1px solid var(--line); border-radius: 14px;
}
.gs-od-path.is-primary { border-color: var(--brand); box-shadow: 0 14px 30px rgba(232,89,12,.13); }
.gs-od-path-kicker {
font-family: var(--font-display); font-size: .7rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: 8px;
}
.gs-od-path h3 { margin: 0 0 8px; font-size: 1.16rem; }
.gs-od-path > p { margin: 0; font-size: .9rem; color: var(--ink-2); }
.gs-od-path-metas { margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--line-strong); display: grid; gap: 7px; }
.gs-od-meta-row { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; }
.gs-od-meta-row span:first-child { color: var(--ink-3); }
.gs-od-meta-row span:last-child { font-weight: 700; color: var(--ink); text-align: right; }
/* Card grid ---------------------------------------------- */
.gs-od-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.gs-od-card { padding: 24px; background: var(--bg-soft); border-radius: 12px; }
.gs-od-card .ico {
width: 34px; height: 34px; margin-bottom: 12px; border-radius: 9px;
background: #fff; border: 1px solid var(--line);
display: grid; place-items: center;
font-family: var(--font-display); font-weight: 800; font-size: .86rem; color: var(--brand-strong);
}
.gs-od-card h3 { margin: 0 0 6px; font-size: 1rem; }
.gs-od-card p { margin: 0; font-size: .9rem; color: var(--ink-2); }
/* Benchmark logo wall ------------------------------------ */
.gs-od-bench { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.gs-od-bench-item {
height: 68px; display: grid; place-items: center; overflow: hidden;
background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.gs-od-bench-item img {
width: 100%; height: 68px; object-fit: cover;
filter: grayscale(1); opacity: .68; transition: filter .2s ease, opacity .2s ease;
}
.gs-od-bench-item:hover img { filter: none; opacity: 1; }
.gs-od-note { margin: 14px 0 0; font-size: .8rem; color: var(--ink-3); }
/* Factory gallery ---------------------------------------- */
.gs-od-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gs-od-shot { position: relative; margin: 0; border-radius: 12px; overflow: hidden; }
.gs-od-shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.gs-od-shot figcaption {
position: absolute; inset: auto 0 0 0; padding: 26px 12px 9px;
font-size: .76rem; font-weight: 600; color: #fff; line-height: 1.25;
background: linear-gradient(to top, rgba(15,23,42,.86), rgba(15,23,42,0));
}
/* Timeline ----------------------------------------------- */
.gs-od-tl { position: relative; margin: 0; padding-left: 40px; }
.gs-od-tl::before {
content: ""; position: absolute; left: 14px; top: 10px; bottom: 14px;
width: 2px; background: var(--line-strong);
}
.gs-od-step { position: relative; padding: 0 0 26px; }
.gs-od-step:last-child { padding-bottom: 0; }
.gs-od-step::before {
content: attr(data-n);
position: absolute; left: -40px; top: -3px;
width: 30px; height: 30px; border-radius: 50%;
background: #fff; border: 2px solid var(--brand);
color: var(--brand-strong);
font-family: var(--font-display); font-weight: 800; font-size: .78rem;
display: grid; place-items: center; box-sizing: border-box;
}
.gs-od-step h3 { margin: 0 0 4px; font-size: 1.02rem; }
.gs-od-step p { margin: 0; font-size: .91rem; color: var(--ink-2); max-width: 76ch; }
.gs-od-when {
display: inline-block; margin-top: 8px;
padding: 3px 10px; border-radius: 999px;
font-size: .73rem; font-weight: 700; color: var(--brand-strong); background: var(--brand-soft);
}
/* Chips -------------------------------------------------- */
.gs-od-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-od-chip {
padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px;
font-size: .83rem; color: var(--ink-2); background: #fff;
}
/* Spec rows ---------------------------------------------- */
.gs-od-spec { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gs-od-spec-row {
display: grid; grid-template-columns: 190px 1fr; gap: 18px;
padding: 13px 18px; margin: 0; font-size: .89rem;
}
.gs-od-spec-row:nth-child(odd) { background: var(--bg-soft); }
.gs-od-spec-row dt { margin: 0; font-weight: 700; color: var(--ink); }
.gs-od-spec-row dd { margin: 0; color: var(--ink-2); }
/* Process matrix ----------------------------------------- */
.gs-od-matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.gs-od-op {
display: flex; align-items: center; gap: 10px;
padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px;
background: #fff; font-size: .85rem; color: var(--ink-2);
}
.gs-od-op .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.gs-od-op.is-out .dot { background: var(--warn); }
.gs-od-op .tag { margin-left: auto; font-size: .7rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
/* FAQ ---------------------------------------------------- */
.gs-od-faq { margin: 0; }
.gs-od-faq details { border-bottom: 1px solid var(--line); padding: 15px 0; }
.gs-od-faq details:first-child { border-top: 1px solid var(--line); }
.gs-od-faq summary {
display: flex; align-items: flex-start; gap: 10px;
cursor: pointer; list-style: none;
font-family: var(--font-display); font-size: .96rem; font-weight: 700; color: var(--ink);
}
.gs-od-faq summary::-webkit-details-marker { display: none; }
.gs-od-faq summary::after { content: "+"; margin-left: auto; color: var(--brand); font-weight: 800; font-size: 1.1rem; line-height: 1; }
.gs-od-faq details[open] summary::after { content: "\2212"; }
.gs-od-faq p { margin: 10px 0 0; font-size: .91rem; color: var(--ink-2); max-width: 78ch; }
/* Quote block -------------------------------------------- */
.gs-od-quote { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: start; }
.gs-od-steps3 { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gs-od-steps3 li {
display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start;
padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 11px;
}
.gs-od-steps3 .q-n {
width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong);
font-family: var(--font-display); font-weight: 800; font-size: .82rem; display: grid; place-items: center;
}
.gs-od-steps3 b { display: block; font-family: var(--font-display); color: var(--ink); font-size: .95rem; margin-bottom: 2px; }
.gs-od-steps3 span { font-size: .88rem; color: var(--ink-2); }
/* 覆盖主题正文通用排版（.page-article .entry-content 的 h2 顶边框、图片 margin、
figure margin、链接下划线、ol 缩进），否则会与本页组件产生双线/错位。 */
.page-article .entry-content .gs-od-sec > h2 {
margin: 0 0 12px; padding-top: 0; border-top: 0;
}
.page-article .entry-content .gs-od-sec h3 { margin: 0 0 6px; }
.page-article .entry-content .gs-od-hero h2 { margin: 0 0 12px; padding-top: 0; border-top: 0; }
.page-article .entry-content .gs-od-sec img { margin: 0; }
.page-article .entry-content .gs-od-sec figure { margin: 0; }
.page-article .entry-content .gs-od-sec a.btn { text-decoration: none; }
.page-article .entry-content .gs-od-sec ol.gs-od-steps3 { margin: 0; padding: 0; }
.page-article .entry-content .gs-od-sec dl.gs-od-spec { margin: 0; }
/* Responsive --------------------------------------------- */
@media (max-width: 1024px) {
.gs-od-hero { grid-template-columns: 1fr; gap: 28px; }
.gs-od-paths { grid-template-columns: 1fr; }
.gs-od-gallery { grid-template-columns: repeat(2, 1fr); }
.gs-od-quote { grid-template-columns: 1fr; gap: 24px; }
.gs-od-bench { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
.gs-od-sec { padding: 34px 0; }
.gs-od-sec--soft { padding: 30px 22px; margin: 26px 0; }
.gs-od-stats { grid-template-columns: repeat(2, 1fr); }
.gs-od-stat:nth-child(3) { border-left: 0; }
.gs-od-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.gs-od-grid2, .gs-od-matrix { grid-template-columns: 1fr; }
.gs-od-spec-row { grid-template-columns: 1fr; gap: 2px; }
.gs-od-bench { grid-template-columns: repeat(2, 1fr); }
.gs-od-bench-item { height: 54px; }
.gs-od-bench-item img { height: 54px; }
}
/* ============================================================
对比表 / 规格表（Phase 2 表格化）
============================================================ */
.gs-table-wrap { overflow-x: auto; margin: 22px 0 30px; -webkit-overflow-scrolling: touch; }
.gs-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.gs-table caption { caption-side: top; text-align: left; font-size: 0.85rem; color: #6b7280; padding: 0 0 10px; }
.gs-table th, .gs-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.gs-table thead th { background: #f6f7f9; font-weight: 600; font-size: 0.86rem; }
.gs-table tbody tr:last-child th, .gs-table tbody tr:last-child td { border-bottom: none; }
.gs-table tbody th { font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
.gs-table { font-size: 0.88rem; }
.gs-table th, .gs-table td { padding: 9px 10px; }
}
/* ============================================================
/* ============================================================
/* ============================================================
* 迁移遗留产品区块：紧凑产品卡片
* 对应 functions.php 的 gstar_legacy_product_blocks()
* 原站把它渲染成 4 列产品位，迁移后变成正文整幅大图；
* 这里把它降级为紧凑内链卡片，不让产品图占据页面主体视觉。
* ========================================================== */
.page-article .entry-content .gs-hotsell-grid,
.single-article .entry-content .gs-hotsell-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin: 0 0 1.2em;
padding: 0;
list-style: none;
}
.gs-hs-item {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 12px;
display: flex;
flex-direction: column;
}
.gs-hs-img { display: block; margin-bottom: 10px; }
.gs-hs-img img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--radius-sm);
margin: 0 !important;
background: var(--bg-soft);
}
.gs-hs-name {
font-weight: 600;
font-size: 0.9rem;
line-height: 1.4;
color: var(--ink);
text-decoration: none;
margin-bottom: 6px;
}
.gs-hs-name:hover { color: var(--brand-strong); }
.gs-hs-desc {
font-size: 0.78rem;
line-height: 1.55;
color: var(--ink-3);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.page-article .entry-content .gs-hs-more,
.single-article .entry-content .gs-hs-more {
margin: 0 0 2.2em;
font-size: 0.92rem;
font-weight: 600;
}
@media (max-width: 900px) {
.page-article .entry-content .gs-hotsell-grid,
.single-article .entry-content .gs-hotsell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 产品缩略图列表（迁移后失去原站的 4 列产品位） */
.page-article .entry-content ul.gs-plist,
.single-article .entry-content ul.gs-plist {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin: 0 0 2em;
padding: 0;
list-style: none;
}
.page-article .entry-content ul.gs-plist > li,
.single-article .entry-content ul.gs-plist > li {
margin: 0;
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
font-size: 0.86rem;
line-height: 1.4;
display: flex;
flex-direction: column;
gap: 6px;
}
.page-article .entry-content ul.gs-plist > li a,
.single-article .entry-content ul.gs-plist > li a { text-decoration: none; }
.page-article .entry-content ul.gs-plist > li img,
.single-article .entry-content ul.gs-plist > li img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
margin: 0;
border-radius: var(--radius-sm);
}
@media (max-width: 900px) {
.page-article .entry-content ul.gs-plist,
.single-article .entry-content ul.gs-plist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 正文连续配图：两列并排（Why Choose Us 等） */
.page-article .entry-content .gs-img-row,
.single-article .entry-content .gs-img-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 1.2em 0;
width: 100%;
}
.page-article .entry-content .gs-img-row img,
.single-article .entry-content .gs-img-row img {
width: 100%;
height: auto;
margin: 0;
border-radius: var(--radius);
}
@media (max-width: 640px) {
.page-article .entry-content .gs-img-row,
.single-article .entry-content .gs-img-row { grid-template-columns: 1fr; }
}
/* ============================================================
* Footer on the warm light surface (matches the page background)
* Replaces the legacy near-black #12151a footer.
* ============================================================ */
.site-footer {
background: #F7F4EE;
color: rgba(19, 26, 36, 0.66);
border-top: 1px solid #E3DDD2;
}
.site-footer a { color: rgba(19, 26, 36, 0.86); }
.site-footer a:hover { color: var(--brand); }
.footer-brand .brand { color: var(--ink); }
.footer-brand .brand-logo { filter: none; opacity: 1; }
.site-footer h4 { color: var(--ink); }
.footer-bottom { border-top: 1px solid #E3DDD2; color: rgba(19, 26, 36, 0.5); }
/* ============================================================
* OEM/ODM 服务页（页面 ID 2108）：正文列与外框统一为 1500px
* 仅作用于该页，普通页面仍沿用 .page-article 1280px 阅读口径
* ============================================================ */
.page-id-2108 .page-article { max-width: none; }
.page-id-2108 .page-article .gs-od-note { max-width: 78ch; }
/* ============================================================
* 文章右侧目录卡：修复 sticky 失效
* 原因：.article-layout 的 align-items:start 让 .article-toc 高度等于卡片高度，
* 父级没有可滚动行程，position:sticky 的 top 偏移不生效，卡片随页面上滚。
* 处理：让目录栏撑满整行高度，仅影响目录列，不改动正文。
* ============================================================ */
.article-toc { align-self: stretch; }