/* NOVACRAFT public theme — warm product-marketing.
Friendly collectibles aesthetic: cream surfaces, orange CTA, Quicksand
rounded display, soft pastel category tints. */
:root {
--brand: #FF6B1A;
--brand-2: #E55A14;
--brand-soft: #FFE6CC;
--ink: #2A1F18;
--ink-2: #4A3B2F;
--muted: #7A6A5A;
--faint: #B5A595;
--line: #EADFCE;
--paper: #FFF8EC;
--paper-2: #FFF1E1;
--surface: #FFFFFF;
--sky: #E5F3FF;
--peach: #FFE6CC;
--sage: #EAF5E5;
--lilac: #F4ECFF;
--rose: #FFEEF0;
--shadow-soft: 0 8px 24px rgba(36, 24, 16, .08);
--shadow-card: 0 14px 38px rgba(36, 24, 16, .10);
--radius: 18px;
--radius-sm: 12px;
--font-display: 'Quicksand', 'Nunito', 'Varela Round', 'Trebuchet MS', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
--font-body: 'Quicksand', 'Nunito', 'Varela Round', 'Trebuchet MS', 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Consolas', 'SFMono-Regular', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
overflow-x: hidden;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-2); }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
color: var(--ink);
line-height: 1.18;
letter-spacing: -.01em;
}
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: 20px; }
p { margin: 0 0 14px; color: var(--ink-2); }
small { color: var(--muted); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
/* screen-reader-only utility (public theme; admin.css has its own copy) */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* =================== top utility strip =================== */
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--line);
font-size: 13px;
color: var(--muted);
}
.topbar .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 22px; padding-top: 8px; padding-bottom: 8px; }
.topbar a { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: var(--brand); }
/* =================== homepage promo / ad bar ("广告栏") =================== */
.promo-bar { width: 100%; font-size: 14px; line-height: 1.4; }
.promo-bar__wrap {
max-width: 1180px; margin: 0 auto; padding: 9px 24px;
display: flex; align-items: center; gap: 14px;
}
.promo-bar__text { margin: 0; flex: 1 1 auto; min-width: 0; color: inherit; font-weight: 600; }
.promo-bar__cta { flex: 0 0 auto; }
.promo-bar__link {
display: inline-flex; align-items: center; gap: 5px;
color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap;
}
.promo-bar__link:hover { opacity: .85; }
.promo-bar__close {
flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 50%;
background: transparent; color: inherit; cursor: pointer; opacity: .8;
display: inline-flex; align-items: center; justify-content: center;
}
.promo-bar__close:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.promo-bar.is-dismissed { display: none; }
@media (max-width: 640px) {
.promo-bar__wrap { padding: 8px 16px; gap: 10px; }
.promo-bar__text { font-size: 13px; }
.promo-bar__link { white-space: normal; }
}
/* ---- language switcher (topbar) ---- */
.langs { position: relative; z-index: 1000; }
.langs summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; padding: 4px 2px; user-select: none; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary .ic { transition: transform .18s ease; }
.langs[open] summary .ic:last-child { transform: rotate(180deg); }
.langs-menu { position: absolute; right: 0; top: calc(100% + 10px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 34px rgba(36,24,16,.14); min-width: 176px; z-index: 1000; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.langs-menu a { padding: 9px 12px; border-radius: 8px; color: var(--ink-2); font-size: 14px; text-decoration: none; font-weight: 500; }
.langs-menu a:hover { background: rgba(255,107,26,.10); color: var(--brand-2); }
.langs-menu a.is-cur { color: var(--brand); font-weight: 700; }
[dir="rtl"] .langs-menu { right: auto; left: 0; }
/* ---- RTL (Arabic) adjustments ---- */
[dir="rtl"] body { direction: rtl; }
[dir="rtl"] .nav-links { margin-left: 0; margin-right: auto; }
[dir="rtl"] .table-scroll, [dir="rtl"] .tbl-wrap { direction: rtl; }
[dir="rtl"] .detail-meta { text-align: right; }
/* =================== header / nav =================== */
.nav {
background: var(--surface);
position: sticky; top: 0; z-index: 50;
box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 72px; height: 72px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; color: #fff; box-shadow: 0 6px 16px rgba(15,53,80,.18); }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .01em; color: var(--ink); }
.brand-name small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-mono); }
.nav-links { display: flex; gap: 26px; align-items: center; margin-left: auto; }
.nav-links a { color: var(--ink-2); font-weight: 600; font-size: 15px; padding: 8px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a.is-active { color: var(--brand); border-color: var(--brand); }
.nav-cta { margin-left: 12px; }
.nav-burger { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; }
/* ---- nav dropdown (Products) ---- */
.nav-item { position: relative; }
.nav-caret { display: inline-flex; margin-left: 4px; vertical-align: -1px; transition: transform .18s ease; }
.has-children:hover .nav-caret, .has-children:focus-within .nav-caret { transform: rotate(180deg); }
.nav-sub {
position: absolute; top: 100%; left: -14px; min-width: 208px; margin: 8px 0 0; padding: 8px;
list-style: none; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: 0 12px 28px rgba(0,0,0,.10);
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60;
}
.has-children:hover .nav-sub, .has-children:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-sub li + li { margin-top: 2px; }
.nav-sub a {
display: block; padding: 9px 12px; border-bottom: 0; border-radius: var(--radius-sm);
color: var(--ink-2); font-weight: 600; font-size: 14px; white-space: nowrap;
}
.nav-sub a:hover, .nav-sub a.is-active { background: var(--paper); color: var(--brand); }
[dir="rtl"] .nav-sub { left: auto; right: -14px; }
/* =================== buttons =================== */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px; border-radius: 999px;
font-family: var(--font-display); font-weight: 700; font-size: 15px;
border: 2px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 22px rgba(255,107,26,.32); }
.btn-primary:hover { background: var(--brand-2); color: #fff; box-shadow: 0 14px 28px rgba(229,90,20,.40); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { color: var(--brand); border-color: var(--brand); }
.btn-link { padding: 0; background: transparent; color: var(--brand); border: 0; font-weight: 700; }
.btn-link:hover { color: var(--brand-2); }
/* =================== hero =================== */
.hero {
position: relative;
background: linear-gradient(180deg, #FFF6E5 0%, #FFE6CC 100%);
overflow: hidden;
}
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.hero-text { position: relative; z-index: 2; }
.eyebrow {
display: inline-block;
background: rgba(255, 107, 26, .12);
color: var(--brand-2);
font-family: var(--font-mono); font-size: 12px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
padding: 6px 14px; border-radius: 999px;
margin: 0 0 18px;
}
.hero h1 { margin: 0 0 18px; }
.hero p { font-size: 17px; max-width: 36em; color: var(--ink-2); margin: 0 0 28px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-img {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow-card);
aspect-ratio: 4 / 3;
}
.hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* =================== certs =================== */
.certs { padding: 70px 0 50px; background: var(--paper); }
.sec-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 12px; }
.sec-title { margin: 0 0 18px; }
.cert-row { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 16px; }
.cert-row li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 18px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); box-shadow: var(--shadow-soft); }
.cert-note { font-size: 13px; color: var(--muted); margin-top: 16px; }
/* =================== section primitives =================== */
.sec { padding: 80px 0; }
/* 显式白底区块（关于我们页的数据卡 / 制造能力 / 认证与验厂）：不透出 body 米色底 */
.sec-white { background: var(--surface); }
.sec-products { background: var(--surface); }
.sec-guide { background: var(--paper-2); }
.sec-inds { background: var(--surface); }
.sec-cases { background: var(--surface); }
/* 首页新闻区（当前由 SHOW_HOME_NEWS 关闭）：紧随白色案例区，35px 间距避免两块白色连成一片 */
.sec-news-home { background: var(--surface); margin-top: 35px; }
.sec-faq { background: var(--paper-2); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
/* =================== grid: products / cards =================== */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* grid tracks must be allowed to shrink below the intrinsic width of images/tables */
.split > *, .detail-grid > *, .detail-body-grid > *, .art-grid > *, .prod-grid > *, .case-grid > * { min-width: 0; }
.prod-card {
display: flex; flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none; color: inherit;
transition: transform .2s, box-shadow .2s;
box-shadow: var(--shadow-soft);
}
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); color: inherit; }
.prod-card-img { aspect-ratio: 4 / 3; background: var(--paper); border-bottom: 1px solid var(--line); }
.prod-card-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.sku { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.prod-card h3 { font-size: 18px; margin: 0 0 8px; }
.prod-card p { font-size: 14px; color: var(--muted); margin: 0 0 16px; flex: 1; }
.prod-card-meta { display: flex; gap: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); padding: 12px 0; border-top: 1px solid var(--line); margin-bottom: 12px; }
.prod-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.prod-card-cta { color: var(--brand); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
/* =================== guide table =================== */
.guide-copy p { color: var(--ink-2); max-width: 52ch; }
.guide-note { font-size: 13px; color: var(--muted); }
.table-scroll { overflow-x: auto; max-width: 100%; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-soft); background: var(--surface); }
.ruled { width: 100%; border-collapse: collapse; background: var(--surface); }
.ruled th, .ruled td { border-bottom: 1px solid var(--line); padding: 14px 16px; text-align: left; font-size: 14px; vertical-align: top; }
.ruled thead th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; background: var(--paper); color: var(--brand); }
.ruled tbody th { font-family: var(--font-display); font-weight: 700; white-space: nowrap; color: var(--ink); }
.ruled td { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ruled tbody tr:nth-child(odd) { background: #FFFCF5; }
.ruled tbody tr:last-child th, .ruled tbody tr:last-child td { border-bottom: 0; }
.tbl-note { font-size: 12px; color: var(--muted); margin-top: 12px; }
/* =================== category tiles =================== */
/* =================== industry / case / step / art =================== */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
/* 去掉白色卡框：图片本身当卡片，标题改用悬浮胶囊（对齐参考版式） */
.case-card { transition: transform .2s; }
.case-card:hover { transform: translateY(-3px); }
.case-media { position: relative; }
.case-media > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
/* 悬浮胶囊：压住图片下沿、水平居中；鼠标悬停该卡时翻成品牌橙 + 白字 + 箭头 */
.case-pill {
position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%);
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
width: max-content; max-width: calc(100% - 28px);
padding: 15px 26px; border-radius: 18px;
background: var(--surface); box-shadow: 0 12px 28px rgba(36, 24, 16, .16);
transition: background .2s, box-shadow .2s, padding .2s;
}
.case-pill h3 { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 1.32; color: var(--ink); text-align: center; transition: color .2s; }
.case-pill-arrow { display: none; color: #fff; flex: 0 0 auto; }
.case-card:hover .case-pill { background: var(--brand); box-shadow: 0 14px 30px rgba(255, 107, 26, .34); padding: 17px 32px; }
.case-card:hover .case-pill h3 { color: #fff; }
.case-card:hover .case-pill-arrow { display: inline-flex; }
.case-body { padding: 46px 4px 0; }
.case-body p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin: 0; }
.case-meta { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.art-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.art-card-img { aspect-ratio: 2 / 1; background: var(--paper); }
.art-card-img img { width: 100%; height: 100%; object-fit: cover; }
.art-card-body { padding: 18px; }
.art-card h3 { font-size: 15px; margin: 0 0 4px; }
.art-card span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
/* =================== FAQ =================== */
.faq-grid { display: grid; grid-template-columns: 4fr 6fr; gap: 56px; align-items: start; }
.faq-intro { color: var(--ink-2); max-width: 38ch; }
.faq-list details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 22px; margin-bottom: 12px; box-shadow: var(--shadow-soft); }
.faq-list summary { cursor: pointer; font-weight: 700; color: var(--ink); font-family: var(--font-display); list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details[open] summary { color: var(--brand); }
.faq-list details[open] summary::after { transform: rotate(180deg); }
.faq-list summary::after { content: '+'; color: var(--brand); font-size: 20px; transition: transform .2s; }
.faq-list details > p { margin: 14px 0 0; color: var(--ink-2); font-size: 14px; }
/* =================== CTA band =================== */
.cta-band { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; padding: 60px 0; }
.cta-band .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin: 0; }
.cta-band p { color: rgba(255,255,255,.85); margin: 6px 0 0; }
.cta-band .btn { background: #fff; color: var(--brand-2); box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.cta-band .btn:hover { background: var(--paper); color: var(--brand-2); }
/* =================== page hero (inner pages) =================== */
.page-hero { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); padding: 56px 0 36px; }
.page-h1 { margin: 0 0 16px; }
.page-lead { color: var(--ink-2); font-size: 18px; max-width: 56ch; margin: 0; }
/* =================== catalogue tools =================== */
.catalog-tools { display: flex; align-items: center; gap: 16px; padding: 28px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); margin: 32px auto; flex-wrap: wrap; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 9px 18px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: 14px; transition: all .15s; }
.chip:hover { color: var(--brand); border-color: var(--brand); }
.chip.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
/* 产品页完整分类条（动态类目）：与导航下拉同源，列出全部类目 */
.cat-strip { margin: 0 0 20px; }
.chip i { font-style: normal; opacity: .75; margin-left: 6px; font-family: var(--font-mono); font-size: 11px; }
.catalog-search { flex: 1; min-width: 220px; position: relative; }
.catalog-search input { width: 100%; padding: 12px 14px 12px 40px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--font-body); font-size: 14px; background: var(--paper); }
.catalog-search input:focus { outline: none; border-color: var(--brand); background: #fff; }
.search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.catalog-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 0; }
.empty-state { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 48px 24px; text-align: center; }
.empty-state h3 { margin: 0 0 8px; }
.empty-state p { color: var(--muted); max-width: 42ch; margin: 0 auto 18px; }
/* =================== product detail =================== */
/* 详情页整页底色改白。产品列表页共用同一个 body 类（.products-page），
故用只有详情页才有的 data-product-slug 精确命中，列表页不受影响。 */
body[data-product-slug] { background: var(--surface); }
.detail-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 48px; align-items: start; padding: 56px 0; }
.gallery-main { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 4 / 3; overflow: hidden; box-shadow: var(--shadow-card); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.thumb { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; transition: border-color .15s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--brand); }
.thumb:hover { border-color: var(--brand); }
.detail-side h1 { margin: 0 0 8px; }
.detail-side .lead { color: var(--ink-2); font-size: 16px; margin: 0 0 22px; }
.detail-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0 24px; }
.detail-meta > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.detail-meta > div small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.detail-meta > div b { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.detail-side .spec-strip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 24px; box-shadow: var(--shadow-soft); }
.detail-side .spec-strip h3 { font-size: 14px; margin: 0 0 12px; color: var(--brand); }
.detail-body-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; padding-bottom: 56px; }
.detail-body-grid h2 { margin: 0 0 14px; }
.spec-side { background: var(--paper); border-radius: var(--radius); padding: 24px; }
.spec-side h3 { font-size: 16px; margin: 0 0 10px; }
.rel-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .2s, box-shadow .2s; text-decoration: none; color: inherit; }
.rel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); color: inherit; }
.rel-card img { aspect-ratio: 4 / 3; object-fit: cover; }
/* =================== product detail: gallery rail + quote box + attribute grid ===================
Layout logic borrowed from mainstream B2B detail pages (vertical strip | stage | buy box, and an
at-a-glance attribute grid) but rendered in this theme's own paper/rounded language. Deliberately
excludes marketplace furniture we do not carry: ratings/reviews, supplier & store scorecards,
trade-assurance and payment panels, sticky right-edge action dock. */
.pd-main-grid { grid-template-columns: 7fr 5fr; }
.pd-gallery { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.pd-gallery.has-rail { grid-template-columns: 84px 1fr; }
.pd-thumb-rail { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.pd-thumb-rail .thumb { flex: none; }
.pd-figure { min-width: 0; }
.pd-stage { position: relative; }
.pd-stage-main { aspect-ratio: 1 / 1; background: var(--surface); }
.pd-stage-main img { object-fit: contain; background: var(--paper-2); }
/* 控制条：照片下方，轻量、无边框幽灵箭头 + 弱化等宽计数（详见 pages-public.js 注释）。 */
.pd-bar { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 10px; }
.pd-nav { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; transition: background .16s, color .16s, transform .16s; }
.pd-nav:hover { background: var(--brand-soft); color: var(--brand-2); }
.pd-nav:active { transform: scale(.94); }
.pd-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft); color: var(--brand-2); }
.pd-nav:disabled { opacity: .3; cursor: default; background: transparent; color: var(--faint); }
/* 键盘可达性：整组（主图 + 控制条）可获得焦点（←/→ 切换），给一个柔和焦点环 */
.pd-figure:focus-visible { outline: none; border-radius: var(--radius); box-shadow: 0 0 0 3px var(--brand-soft); }
.pd-count { display: inline-flex; align-items: baseline; min-width: 46px; justify-content: center; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--faint); }
.pd-count b { font-weight: 700; color: var(--ink-2); }
.pd-count i { font-style: normal; opacity: .55; margin: 0 3px; }
.detail-side.pd-side { position: sticky; top: 96px; }
.pd-title { font-size: 32px; margin: 8px 0 10px; }
.pd-price-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.pd-price { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--brand-2); display: inline-flex; align-items: baseline; gap: 4px; }
.pd-price small { font-size: 15px; font-weight: 600; color: var(--muted); }
.pd-price-ask { font-size: 22px; color: var(--ink-2); }
.pd-moq { font-size: 13px; color: var(--muted); }
.pd-moq b { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-right: 4px; }
.pd-side .pd-cta { width: 100%; justify-content: center; margin-bottom: 10px; }
.pd-side-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.pd-attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 4px 0 18px; }
.pd-attr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; min-width: 0; }
.pd-attr small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.pd-attr b { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: break-word; }
.pd-attrs-all { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.pd-attrs-all .ic { transition: transform .15s; }
.pd-attrs-all:hover .ic { transform: translateX(3px); }
/* RTL：控制条整行自动镜像（prev 落到右侧、next 落到左侧），图标同步翻转才是"指向对的那一边" */
[dir="rtl"] .pd-nav svg { transform: scaleX(-1); }
[dir="rtl"] .pd-attrs-all:hover .ic { transform: translateX(-3px); }
[dir="rtl"] .pd-attrs-all .ic { transform: scaleX(-1); }
.pd-per { font-size: 13px; color: var(--muted); }
.pd-prose { max-width: 860px; }
.pd-prose p { color: var(--ink-2); }
.pd-features { padding-left: 0; list-style: none; margin: 18px 0 0; display: grid; gap: 8px; }
.pd-features li { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-2); }
.pd-features li .ic { flex: none; margin-top: 4px; color: var(--brand); }
.pd-detail-figs { display: grid; gap: 16px; max-width: 900px; }
.pd-detail-fig { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.pd-detail-fig img { width: 100%; height: auto; display: block; }
/* =================== about / split =================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; }
.split .editorial p { color: var(--ink-2); }
.about-fig { margin: 0; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-soft); }
.about-fig figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 12px; text-align: center; }
.capability-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.capability-row > * { min-width: 0; }
.capability { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-soft); }
.capability h3 { font-size: 16px; margin: 0 0 6px; color: var(--brand); overflow-wrap: break-word; }
.capability p { font-size: 13px; color: var(--muted); margin: 0; overflow-wrap: break-word; }
/* =================== contact page =================== */
.contact-page { padding: 64px 0 96px; background: var(--paper); }
.contact-page .container { max-width: 1100px; margin: 0 auto; }
.contact-page-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(30px, 4vw, 46px);
color: var(--ink);
margin: 0 0 28px;
letter-spacing: -0.01em;
}
.contact-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 20px;
box-shadow: var(--shadow-card);
overflow: hidden;
}
.contact-card-grid { display: grid; grid-template-columns: 350px minmax(0, 1fr); }
/* ---- left column: direct channels + what happens next ---- */
.contact-side { background: var(--paper-2); border-right: 1px solid var(--line); padding: 40px 32px; }
.contact-lead { margin: 0 0 28px; color: var(--ink-2); font-size: 14.5px; line-height: 1.75; }
.contact-side-title {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--brand);
margin: 0 0 16px;
}
.contact-channels { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-channels li { display: flex; gap: 12px; align-items: flex-start; }
.contact-ch-icon {
flex: none;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--line);
color: var(--brand);
}
.contact-ch-body { min-width: 0; }
.contact-ch-body b { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.contact-ch-body a,
.contact-ch-body span { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.5; overflow-wrap: break-word; }
.contact-ch-body a:hover { color: var(--brand); }
.contact-maplink {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 16px;
border: 1px solid var(--brand);
border-radius: 10px;
color: var(--brand);
font-size: 13.5px;
font-weight: 600;
transition: background .15s ease, color .15s ease;
}
.contact-maplink:hover { background: var(--brand); color: #fff; }
.contact-next { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact-next-list { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.contact-next-list li { margin-bottom: 7px; }
/* ---- right column: the form ---- */
.contact-right { padding: 40px 38px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.contact-field { display: flex; flex-direction: column; min-width: 0; }
.contact-field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.contact-field label .req { color: var(--brand); margin-left: 3px; }
.contact-field input,
.contact-field textarea {
width: 100%;
border: 1px solid var(--line);
background: var(--surface);
border-radius: 12px;
padding: 13px 15px;
font: inherit;
font-size: 15px;
color: var(--ink);
outline: none;
box-sizing: border-box;
transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: var(--faint); }
.contact-field input:hover,
.contact-field textarea:hover { border-color: var(--faint); }
.contact-field input:focus,
.contact-field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,107,26,.14); }
.contact-field textarea { min-height: 132px; resize: vertical; line-height: 1.65; }
.contact-field.is-invalid input,
.contact-field.is-invalid textarea { border-color: #D6405A; box-shadow: 0 0 0 3px rgba(214,64,90,.12); }
/* 字段级错误文案由 site.js 的 setErr 写入；hidden 时完全收起，不占高度 */
.contact-field-err { margin: 6px 0 0; font-size: 12.5px; color: #C0324A; }
.contact-field-err[hidden] { display: none; }
.contact-consent-note { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.contact-foot { margin: 0; font-size: 13px; color: var(--muted); }
.contact-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
padding: 15px 28px;
border: 0;
border-radius: 12px;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
color: #fff;
font: inherit;
font-size: 15.5px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 20px rgba(255,107,26,.26);
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.contact-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(255,107,26,.32); }
.contact-submit:active { transform: translateY(0); }
.contact-submit:disabled { opacity: .65; cursor: progress; transform: none; box-shadow: none; }
.contact-again {
display: block;
margin-top: 10px;
padding: 0;
background: none;
border: 0;
color: var(--brand-2);
font: inherit;
font-size: 14px;
font-weight: 600;
text-align: left;
cursor: pointer;
}
.contact-again:hover { text-decoration: underline; }
.contact-msg { border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.6; }
.contact-msg-ok { background: var(--sage); color: #2A6B30; }
.contact-msg-err { background: var(--rose); color: #B0243A; }
@media (max-width: 980px) {
.contact-card-grid { grid-template-columns: 1fr; }
.contact-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 32px 24px; }
.contact-right { padding: 32px 24px; }
}
@media (max-width: 620px) {
.contact-page { padding: 44px 0 64px; }
.contact-card { border-radius: 16px; }
.contact-form-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* =================== insights =================== */
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 56px 0; }
.insight-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .2s, box-shadow .2s; text-decoration: none; color: inherit; }
.insight-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); color: inherit; }
.insight-card-img { aspect-ratio: 2 / 1; background: var(--paper); }
.insight-card-img img { width: 100%; height: 100%; object-fit: cover; }
.insight-card-body { padding: 22px; }
.insight-card .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.insight-card h3 { font-size: 17px; margin: 0 0 8px; }
.insight-card p { font-size: 13px; color: var(--muted); margin: 0; }
.article-hero { padding: 56px 0; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.article-hero .meta { font-family: var(--font-mono); font-size: 12px; color: var(--brand); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.article-body { max-width: 760px; margin: 0 auto; padding: 56px 24px; }
.article-body h2 { margin: 36px 0 14px; }
.article-body p { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.article-body ul { padding-left: 22px; color: var(--ink-2); }
.article-body li { margin-bottom: 8px; }
/* =================== footer =================== */
.foot { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 0 24px; margin-top: 60px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
.foot h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 8px; }
.foot a { color: var(--ink-2); font-size: 14px; }
.foot a:hover { color: var(--brand); }
.foot-meta { border-top: 1px solid var(--line); padding-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); }
/* =================== 404 =================== */
.notfound { text-align: center; padding: 100px 24px; background: var(--paper-2); }
.notfound h1 { font-size: clamp(60px, 12vw, 140px); margin: 0; color: var(--brand); line-height: 1; }
.notfound p { color: var(--ink-2); margin: 16px 0 28px; }
/* =================== skip link =================== */
.skip { position: absolute; top: -999px; left: 0; right: 0; width: fit-content; margin: 0 auto; text-align: center; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 99; }
.skip:focus { top: 8px; }
/* article layout: two-column with sticky aside collapses on mobile */
.ar-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.ar-layout > * { min-width: 0; }
.ar-aside { position: sticky; top: 90px; }
@media (max-width: 900px) {
.ar-layout { grid-template-columns: 1fr; gap: 32px; }
.ar-aside { position: static; }
.capability-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.capability-row { grid-template-columns: 1fr; }
}
/* =================== homepage accordion =================== */
/* ---- catalogue: left categories + collapsible product rows ---- */
.catalog-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; padding: 32px 0 80px; }
.catalog-side { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 16px; box-shadow: var(--shadow-soft); }
.catalog-side .sec-eyebrow { margin-bottom: 14px; }
.side-list { display: flex; flex-direction: column; gap: 6px; }
.side-list .chip { display: flex; align-items: center; width: 100%; justify-content: flex-start; white-space: normal; text-align: left; }
/* category tree in sidebar */
.tree-sub { display: block; width: 100%; border-radius: 10px; margin-top: 2px; }
.tree-sub summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 8px 10px; border-radius: 10px; }
.tree-sub summary::-webkit-details-marker { display: none; }
.tree-sub summary:hover { background: rgba(255,107,26,.07); }
.tree-sub summary .chip { flex: 1; min-width: 0; }
.tree-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); flex: none; }
.tree-chev { flex: none; color: var(--brand); display: inline-flex; transition: transform .2s ease; }
.tree-sub[open] > summary .tree-chev { transform: rotate(180deg); }
.tree-leaves { margin: 2px 0 4px 16px; border-left: 1px solid var(--line); padding: 2px 0 2px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tree-leaf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.tree-leaf-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tree-leaf:hover { background: rgba(255,107,26,.08); color: var(--brand-2); }
.tree-leaf small { font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex: none; }
.tree-all { font-weight: 700; }
.catalog-main { min-width: 0; }
.catalog-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.pl-list { display: flex; flex-direction: column; gap: 12px; }
.pl-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; }
.pl-row summary { display: flex; align-items: center; gap: 16px; padding: 14px 18px; cursor: pointer; list-style: none; user-select: none; }
.pl-row summary::-webkit-details-marker { display: none; }
.pl-row summary:hover { background: rgba(255,107,26,.05); }
.pl-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: 10px; flex: none; background: var(--paper); border: 1px solid var(--line); }
.pl-txt { min-width: 0; flex: 1; }
.pl-txt b { display: block; font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.pl-txt small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.pl-facts { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-align: right; line-height: 1.6; }
.pl-row .acc-arrow { flex: none; color: var(--brand); transition: transform .2s ease; }
.pl-row[open] .acc-arrow { transform: rotate(180deg); }
.pl-row[open] summary { border-bottom: 1px solid var(--line); }
.pl-body { display: flex; gap: 26px; align-items: center; padding: 18px; background: var(--paper-2); }
.pl-img { width: 240px; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); flex: none; }
.pl-meta { min-width: 0; }
.pl-meta p { margin: 0 0 10px; color: var(--ink-2); }
.pl-facts-inline { font-family: var(--font-mono); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 16px; }
.pl-meta .btn { margin-top: 6px; }
@media (max-width: 900px) {
.catalog-layout { grid-template-columns: 1fr; gap: 18px; }
.catalog-side { position: static; padding: 14px 16px; }
.side-list { flex-direction: column; gap: 4px; }
}
@media (max-width: 640px) {
.pl-row summary { gap: 12px; padding: 12px 14px; }
.pl-thumb { width: 64px; height: 48px; }
.pl-facts { display: none; }
.pl-body { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px; }
.pl-img { width: 100%; }
}
/* =================== responsive =================== */
@media (max-width: 1080px) {
.hero .wrap { grid-template-columns: 1fr; }
.hero-img { order: -1; }
}
@media (max-width: 900px) {
.nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); flex-direction: column; gap: 0; padding: 16px 24px; border-top: 1px solid var(--line); box-shadow: 0 8px 16px rgba(0,0,0,.06); }
.nav-links.is-open { display: flex; }
.nav-burger { display: inline-flex; }
.nav-cta { display: none; }
.nav-item.has-children { width: 100%; }
.nav-sub {
position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
border: 0; border-left: 2px solid var(--line); border-radius: 0; min-width: 0;
margin: 2px 0 6px 6px; padding: 2px 0 4px 14px;
}
[dir="rtl"] .nav-sub { left: auto; right: auto; border-left: 0; border-right: 2px solid var(--line); margin: 2px 6px 6px 0; }
.grid3, .case-grid, .art-grid, .insight-grid { grid-template-columns: repeat(2, 1fr); }
.detail-grid, .detail-body-grid, .split, .faq-grid { grid-template-columns: 1fr; gap: 32px; }
.foot-grid { grid-template-columns: 1fr 1fr; }
/* 图库：单列后竖排缩略图改成横向条（排在控制条之下），询价盒取消吸顶（避免遮挡） */
.pd-gallery.has-rail { grid-template-columns: 1fr; }
.pd-gallery.has-rail .pd-thumb-rail { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; order: 2; padding-bottom: 4px; }
.pd-gallery.has-rail .pd-thumb-rail .thumb { width: 92px; }
.pd-bar { margin-top: 8px; }
.detail-side.pd-side { position: static; }
.pd-attrs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 640px) {
h1 { font-size: 32px; }
.wrap { padding: 0 18px; }
.grid3, .case-grid, .art-grid, .insight-grid { grid-template-columns: 1fr; }
.sec { padding: 56px 0; }
.form-row { grid-template-columns: 1fr; }
.detail-meta { grid-template-columns: 1fr; }
.hero .wrap { padding-top: 36px; padding-bottom: 36px; }
.hero-cta .btn { width: 100%; justify-content: center; }
.foot-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}
/* ---------------- floating contact dock (right rail) ---------------- */
.fb-dock {
position: fixed;
right: 14px;
top: 50%;
transform: translateY(-50%);
z-index: 60;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
font-family: var(--font-body, system-ui, sans-serif);
}
.fb-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.fb {
display: grid;
place-items: center;
width: 54px;
height: 54px;
color: #fff;
text-decoration: none;
transition: filter .15s ease, opacity .18s ease, transform .18s ease;
}
.fb:hover { filter: brightness(1.12); }
/* Brand colors (matches 016.tongmiu.com palette) */
.fb-x { background: #000000; }
.fb-fb { background: #1877F2; }
.fb-li { background: #0A66C2; }
.fb-pin { background: #E60023; }
.fb-ig { background: linear-gradient(135deg,#FEDA77 0%,#F58529 25%,#DD2A7B 50%,#8134AF 75%,#515BD4 100%); }
.fb-yt { background: #FF0000; }
.fb-wa { background: #25D366; }
.fb-sk { background: #00AFF0; }
.fb-wc { background: #07C160; }
.fb-vb { background: #7360F2; }
.fb-mail { background: #ffffff; color: #2b2118; }
/* 回到顶部：品牌橙；滚动监听控制显隐（.is-off = 已在顶部）。
隐藏用 display:none（不透明度/visibility 过渡在真机 Chrome fixed+合成层下会留残影帧），
无动画、无中间态，合成器无层可残留 */
.fb-top { background: #F77B3E; color: #fff; border: 0; cursor: pointer; font: inherit; padding: 0; transition: background .15s ease; }
.fb-top.is-off { display: none; }
.fb-top:hover { background: #e96a30; }
.fb-top:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55); }
button.fb { appearance: none; }
/* 微信弹层：dock 左侧弹出（微信没有公开网页档案，链接会 404，所以走二维码弹层） */
.fb-wc-pop {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(6px);
width: 240px;
padding: 14px 14px 12px;
border-radius: 12px;
background: #ffffff;
color: #2b2118;
box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
font-family: var(--font-body, system-ui, sans-serif);
}
.fb-wc-pop.is-open { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.fb-wc-pop[hidden] { display: none; }
.fb-wc-pop-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.fb-wc-qr { display: block; margin: 0 auto; border: 1px solid #eee4d8; border-radius: 8px; }
.fb-wc-demo { margin: 7px 0 9px; font-size: 10.5px; line-height: 1.5; color: #8a8175; }
.fb-wc-id { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #eee4d8; border-radius: 8px; background: #faf7f2; }
.fb-wc-id-l { flex: none; font-size: 10.5px; color: #8a8175; }
.fb-wc-id code { flex: 1; min-width: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2b2118; }
.fb-wc-copy { flex: none; border: 0; border-radius: 6px; background: #F77B3E; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 8px; cursor: pointer; transition: background .15s ease; }
.fb-wc-copy:hover { background: #e96a30; }
.fb-wc-copy:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(247, 123, 62, .35); }
/* Stand-alone Quick Inquiry pill (bottom-right corner, like the reference). */
.fb-quick {
position: fixed;
right: 14px;
bottom: 18px;
z-index: 61;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border: 0;
border-radius: 999px;
background: #F77B3E;
color: #fff;
font-weight: 600;
font-size: 13px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(247, 123, 62, .35);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
font-family: var(--font-body, system-ui, sans-serif);
}
.fb-quick:hover { background: #e96a30; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(247, 123, 62, .45); }
/* modal — Quick Inquiry 聊天式小窗：停靠右下（Quick 按钮上方），
打开时从底部缓慢滑入（参考 016.tongmiu.com）。 */
.fb-modal {
position: fixed;
right: 14px; /* 允许覆盖右侧 social 栏（z-index 1200 > dock 60） */
bottom: 84px; /* 悬浮在 .fb-quick 按钮上方 */
z-index: 1200;
width: min(370px, calc(100vw - 24px));
pointer-events: none;
}
.fb-modal[hidden] { display: none; }
.fb-modal-bg { display: none; } /* 窗口样式：无全屏遮罩，不锁背景滚动 */
.fb-modal-card {
position: relative;
width: 100%;
max-height: min(78vh, 620px);
overflow: auto;
background: #fff;
border: 1px solid rgba(30, 20, 10, .08);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(24, 16, 8, .12), 0 32px 70px rgba(24, 16, 8, .22);
font-family: var(--font-body, system-ui, sans-serif);
pointer-events: auto;
transform: translateY(56px);
opacity: 0;
transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}
.fb-modal.is-open .fb-modal-card { transform: translateY(0); opacity: 1; }
/* 品牌橙渐变标题栏 + 气泡图标（纯 CSS，不动 SSR 的 DOM） */
.fb-modal-card h3 {
position: relative;
flex: 0 0 auto;
margin: 0;
padding: 13px 46px 13px 42px;
background: linear-gradient(135deg, #FF8140 0%, #EF5A12 100%);
color: #fff;
font-size: 15px;
font-weight: 700;
letter-spacing: .01em;
border-radius: 15px 15px 0 0;
}
.fb-modal-card h3::before {
content: '';
position: absolute;
left: 15px;
top: 50%;
width: 18px;
height: 18px;
transform: translateY(-50%);
background: no-repeat center / contain url("data:image/svg+xml,");
}
.fb-modal-x {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .20);
font-size: 0; /* × 用伪元素画线，避免字体渲染差异与默认焦点环 */
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.fb-modal-x::before,
.fb-modal-x::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 13px;
height: 2px;
border-radius: 2px;
background: #fff;
}
.fb-modal-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.fb-modal-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.fb-modal-x:hover { background: rgba(255, 255, 255, .34); transform: rotate(90deg); }
.fb-modal-x:focus { outline: none; }
.fb-modal-x:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(242, 86, 13, .55); }
.fb-modal-sub { flex: 0 0 auto; margin: 0; padding: 12px 16px 0; color: var(--muted, #6b6354); font-size: 12.5px; }
/* 弹窗专属表单样式（fb-form 体系）：不与站内 .form-row/.field/.ctl-input 全局样式耦合 */
.fb-form { padding: 12px 16px 16px; }
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fb-field { display: flex; flex-direction: column; min-width: 0; }
.fb-field-full { grid-column: 1 / -1; }
.fb-field label {
font-family: var(--font-body, system-ui, sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--ink-2, #4a3b2f);
margin: 0 0 4px;
}
.fb-field input,
.fb-field textarea {
font-family: var(--font-body, system-ui, sans-serif);
font-size: 14px;
color: var(--ink, #2a1f18);
padding: 9px 11px;
background: #fff;
border: 1px solid #E2D8C8;
border-radius: 8px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
transition: border-color .15s ease, box-shadow .15s ease;
}
.fb-field textarea { min-height: 72px; resize: vertical; }
.fb-field input:focus,
.fb-field textarea:focus {
outline: none;
border-color: #F2560D;
box-shadow: 0 0 0 3px rgba(242, 86, 13, .13);
}
.fb-send {
width: 100%;
margin-top: 12px;
padding: 11px 16px;
border: 0;
border-radius: 9px;
background: linear-gradient(135deg, #FF8140, #EF5A12);
color: #fff;
font-family: var(--font-body, system-ui, sans-serif);
font-size: 14px;
font-weight: 700;
letter-spacing: .01em;
cursor: pointer;
box-shadow: 0 6px 16px rgba(239, 90, 18, .28);
transition: transform .15s ease, box-shadow .15s ease;
}
.fb-send:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(239, 90, 18, .34); }
.fb-send:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(242, 86, 13, .35), 0 6px 16px rgba(239, 90, 18, .28); }
.fb-send[disabled] { opacity: .72; transform: none; }
.fb-status { margin: 10px 0 0; font-size: 12.5px; color: var(--muted, #6b6354); }
.fb-status.is-ok { color: #1f8b6e; }
@media (max-width: 480px) {
.fb-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.fb-modal { right: 12px; bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
.fb-modal-card { transition: none; transform: none; opacity: 1; }
.fb-modal-x:hover, .fb-send:hover { transform: none; }
}
.fb-status.is-err { color: #B0243A; }
.fb-status.is-err { color: #c0392b; }
#fbSubmit.is-loading { opacity: .7; cursor: progress; }
@media (max-width: 720px) {
.fb-dock { right: 10px; }
.fb { width: 46px; height: 46px; }
.fb-quick { right: 10px; bottom: 14px; padding: 8px 14px; font-size: 12px; }
}
@media (max-width: 480px) {
.fb-dock { top: auto; bottom: 70px; transform: none; right: 10px; }
.fb-list { flex-direction: row; gap: 0; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 20px); }
.fb { width: 48px; height: 48px; }
.fb-quick { padding: 10px 14px; bottom: 16px; }
/* 弹层改从底部横排 dock 的上方弹出（绝对定位的 left 基准在窄屏会越界） */
.fb-wc-pop { position: fixed; right: 10px; left: auto; top: auto; bottom: 130px; transform: translateY(6px); }
.fb-wc-pop.is-open { transform: translateY(0); }
}
/* ---------- homepage hero carousel ---------- */
.hero-carousel { padding: 12px 20px 0; }
.hero-carousel .carousel {
position: relative;
width: min(1200px, 100%);
margin: 0 auto;
aspect-ratio: 1600 / 540;
border-radius: var(--radius);
overflow: hidden;
background: var(--paper-2);
box-shadow: var(--shadow-card);
}
.carousel-track { position: absolute; inset: 0; }
.carousel-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transform: scale(1.015);
transition: opacity .7s ease, transform .7s ease;
}
.carousel-slide.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ===== 轮播图上的字幕：已按用户要求停用（2026-09-18 第三轮）=====
用户原话：「不是显示在广告栏，而是显示页面顶部」⇒ 这行文案**不再叠在轮播图上**，
改由「顶部文字条」投放位渲染到页面最顶端：广告 placement 设为 carousel,topbar 后，
promoBars() 会把它插到 最前（view.js#page 的 ${topBanner} 插槽，比 header 还靠上）。
下面保留完整原参数，仅为将来回退方便：删掉末尾那行 .carousel-caption{display:none!important} 即可恢复图上字幕。
⚠️ 4601 的对应规则是 tingoo-site/assets/css/site.css 的 .tg-hero-cap —— 两处必须同步改。 */
.carousel-caption {
position: absolute;
inset-inline-start: 32px;
top: 32px;
max-width: min(560px, 70%);
padding: 12px 18px;
border-radius: var(--radius-sm);
background: rgba(20, 28, 56, .55);
color: #fff;
font-family: var(--font-display);
font-size: clamp(16px, 2vw, 24px);
font-weight: 700;
line-height: 1.35;
backdrop-filter: blur(4px);
}
.carousel-caption { display: none !important; }
.carousel-arrow {
position: absolute;
top: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: 0;
border-radius: 6px;
background: rgba(255, 255, 255, .88);
color: var(--ink);
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
box-shadow: 0 4px 14px rgba(36, 24, 16, .18);
transform: translateY(-50%);
transition: background .18s ease;
}
.carousel-arrow:hover { background: #fff; }
.carousel-arrow.is-prev { inset-inline-start: 18px; }
.carousel-arrow.is-next { inset-inline-end: 18px; }
.carousel-arrow.is-prev .carousel-arrow-ic { display: inline-flex; }
.carousel-arrow.is-prev .carousel-arrow-ic svg { transform: rotate(180deg); }
.carousel-arrow.is-next .carousel-arrow-ic { display: inline-flex; }
.carousel-dots {
position: absolute;
left: 50%;
bottom: 16px;
z-index: 2;
display: flex;
gap: 8px;
transform: translateX(-50%);
}
.carousel-dot {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .65);
cursor: pointer;
box-shadow: 0 1px 4px rgba(36, 24, 16, .25);
transition: width .25s ease, background .25s ease;
}
.carousel-dot.is-active { width: 28px; background: var(--brand); }
@media (max-width: 720px) {
.hero-carousel { padding: 0 14px 6px; }
.carousel-arrow { padding: 7px 12px; font-size: 12px; gap: 6px; }
.carousel-arrow.is-prev { inset-inline-start: 8px; }
.carousel-arrow.is-next { inset-inline-end: 8px; }
.carousel-dots { bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.carousel-slide { transition: none; }
}
/* ---------- homepage: header sits above the carousel (like reference 016.tongmiu.com) ----------
Header stays in normal flow (topbar static + nav sticky) so the full-bleed
carousel starts exactly at the nav's bottom edge — same alignment as subpages. */
.home-page .topbar,
.home-page .nav {
border: 0;
box-shadow: none;
}
.home-page .topbar {
background: #0d2330;
color: #fff;
}
.home-page .topbar a,
.home-page .topbar span { color: #fff; opacity: 0.92; }
/* 语言下拉面板（.langs-menu 位于 topbar 内）：深色 topbar 会用上方的
`a{color:#fff}` 把它刷成白字，白底白字不可见。这里强制恢复白底深字。 */
.home-page .topbar .langs-menu { background: var(--surface); color: var(--ink-2); }
.home-page .topbar .langs-menu a { color: var(--ink-2); }
.home-page .topbar .langs-menu a:hover { background: rgba(255,107,26,.10); color: var(--brand-2); }
.home-page .topbar .langs-menu a.is-cur { color: var(--brand); }
.home-page .nav {
background: #12545b;
color: #fff;
}
.home-page .nav .brand .brand-text,
.home-page .nav .brand .brand-tag { color: #fff; }
.home-page .nav .brand .logo { background: var(--brand); color: #fff; }
.home-page .nav .menu > li > a { color: #fff; }
.home-page .nav .menu > li > a:hover,
.home-page .nav .menu > li.is-active > a { color: var(--brand); }
.home-page .nav .menu .has-menu > a::after { color: #fff; }
.home-page .nav .lang-switcher { color: #fff; }
.home-page .nav .lang-switcher .lang-btn { color: #fff; }
.home-page .nav .lang-menu { background: rgba(20, 28, 56, 0.96); color: #fff; }
.home-page .nav .lang-menu a { color: #fff; }
/* 子页浮 header：lang 面板默认白底白字看不见 → 同样深底 */
.has-subheader .nav .lang-switcher { color: #fff; }
.has-subheader .nav .lang-switcher .lang-btn { color: #fff; }
.has-subheader .nav .lang-menu { background: rgba(20, 28, 56, 0.96); color: #fff; }
.has-subheader .nav .lang-menu a { color: #fff; }
.home-page .nav .nav-cta { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
/* The carousel sits below the header, full-bleed like the reference.
Header is no longer absolute, so it must be near-solid (not transparent)
for white text to stay readable on the page background. */
.home-page .topbar {
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.home-page .topbar a,
.home-page .topbar span { color: #fff; opacity: .92; }
.home-page .nav-links a,
.home-page .brand-name { color: #fff; }
/* Sub-menu must stay dark-on-white — otherwise it disappears when it
drops over the colored hero banner. */
.home-page .nav-sub a { color: var(--ink-2); }
.home-page .nav-sub a:hover { color: var(--brand-2); background: rgba(255, 107, 26, .10); }
.home-page .hero-carousel { padding: 0; }
.home-page .hero-carousel .carousel {
width: 100%;
height: 500px;
border-radius: 0;
box-shadow: none;
}
/* Simple Prev/Next arrow like the reference (small triangle, semi-transparent
circle). The default long-button variant is hidden on the homepage. */
.home-page .hero-carousel .carousel-arrow {
width: 40px;
height: 40px;
padding: 0;
background: rgba(243, 101, 37, .6);
color: #fff;
border-radius: 0;
top: 50%;
bottom: auto;
transform: translateY(-50%);
font-size: 0;
}
.home-page .hero-carousel .carousel-arrow:hover { background: rgb(243, 101, 37); }
.home-page .hero-carousel .carousel-arrow > span:not(.carousel-arrow-ic) { display: none; }
.home-page .hero-carousel .carousel-arrow-ic { width: 18px; height: 18px; }
.home-page .hero-carousel .carousel-arrow svg { color: #fff; }
.home-page .hero-carousel .carousel-arrow.is-prev svg { transform: rotate(180deg); }
/* Push the dot pager slightly above the bottom edge on the homepage. */
.home-page .hero-carousel .carousel-dots { bottom: 14px; }
/* ---------- contact page: subheader banner + negative-margin box (016.tongmiu.com) ---------- */
.sigma_subheader {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 460px;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 0;
text-align: center;
color: var(--ink);
}
.dark-overlay::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 25, 50, 0.08) 0%, rgba(15, 25, 50, 0.22) 100%);
z-index: 0;
}
.sigma_subheader .container,
.sigma_subheader .sigma_subheader-inner { position: relative; z-index: 1; }
.sigma_subheader .breadcrumb {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
list-style: none;
margin: 0;
padding: 12px 26px;
font-size: 14px;
color: #fff;
background: rgba(20, 30, 50, 0.45);
border-radius: 999px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.sigma_subheader .breadcrumb li a { color: #fff; opacity: 1; font-weight: 500; }
.sigma_subheader .breadcrumb li a:hover { color: #ffd9b8; }
.sigma_subheader .breadcrumb .btn-link { color: #fff; font-weight: 500; }
.sigma_subheader .breadcrumb .btn-link:hover { color: #ffd9b8; }
.sigma_subheader .breadcrumb-item + .breadcrumb-item::before {
content: "|";
margin-right: 0;
opacity: 0.7;
color: #fff;
}
.sigma_subheader .entry-title { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.mt-negative { margin-top: -90px; }
.sigma_box {
background: #fff;
border-radius: var(--radius);
box-shadow: 0 14px 38px rgba(36, 24, 16, .10);
padding: 32px;
}
.entry-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(28px, 4vw, 44px);
color: #fff;
margin: 0 0 22px;
}
/* ---------- product listing: orange category bar under subheader (016.tongmiu.com) ---------- */
.subheader-cat-nav { background: var(--brand); }
/* Products page: orange header so the nav band reads as one with the
category bar below. The dark-overlay subheader sits between them. */
/* Header sits ABOVE the hero (Tongmiu style): keep it in normal flow so the
hero background starts exactly at the nav's bottom edge — no overlap, no gap. */
.has-subheader .nav { background: #12545b; box-shadow: none; }
.has-subheader .nav .brand-name { color: #fff; }
.has-subheader .nav-links a { color: #fff; }
.has-subheader .nav-links a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .6); }
.has-subheader .nav-links a.is-active { color: #fff; border-bottom-color: #fff; }
.has-subheader .nav-sub { background: #fff; }
.has-subheader .nav-sub a { color: var(--ink-2); }
/* 子页下拉配色修正：上面的「顶层导航白字」规则（含 :hover / .is-active）会连带命中
下拉里的链接 —— .nav-sub 嵌在 .nav-links 之内，且 a.is-active 的权重更高，
结果当前品类/鼠标悬停项变成白字配米色底（白底白字）⇒ 看上去像"下拉少了一项、
悬停没反应"。这里按下拉自身显式拉回，与首页 .home-page .nav-sub a(:hover) 同一思路。 */
.has-subheader .nav-sub a:hover { color: var(--brand-2); background: rgba(255, 107, 26, .10); }
.has-subheader .nav-sub a.is-active { color: var(--brand); background: var(--paper); }
.has-subheader .topbar { background: #0d2330; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.has-subheader .topbar a,
.has-subheader .topbar span { color: #fff; opacity: .92; }
/* 语言下拉面板（.langs-menu 位于 topbar 内）：深色 topbar 的 `a{color:#fff}`
会把它刷成白字，白底白字不可见。这里强制恢复白底深字。 */
.has-subheader .topbar .langs-menu { background: var(--surface); color: var(--ink-2); }
.has-subheader .topbar .langs-menu a { color: var(--ink-2); }
.has-subheader .topbar .langs-menu a:hover { background: rgba(255,107,26,.10); color: var(--brand-2); }
.has-subheader .topbar .langs-menu a.is-cur { color: var(--brand); }
/* topbar+nav are now in normal flow in subheader mode, so page-hero needs no
hand-computed clearance anymore — its default 56px padding applies. */
/* Product detail hero: full-width product image with dark overlay + centered breadcrumb pill (Tongmiu style). */
.pd-hero { position: relative; min-height: 460px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.pd-hero-inner { width: 100%; text-align: center; padding: 80px 0; }
.pd-crumbs { display: inline-flex; align-items: center; gap: 14px; padding: 14px 28px; background: rgba(255,255,255,.95); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.pd-crumbs a { color: var(--ink-2); text-decoration: none; }
.pd-crumbs a:hover { color: var(--brand); }
.pd-crumbs span[aria-hidden] { color: rgba(0,0,0,.25); }
.pd-crumbs .pd-id { color: var(--brand); font-weight: 700; }
/* pd-title-hero: smaller, sits below the full-bleed product image; padding-top is already cleared by has-subheader rule. */
.pd-title-hero { padding-top: 48px !important; padding-bottom: 16px !important; }
/* Left category sidebar on the products page — match the orange theme. */
.products-page .catalog-side { background: var(--brand-soft); border: 1px solid var(--brand); border-radius: var(--radius); padding: 16px; }
.products-page .catalog-side .chip,
.products-page .catalog-side .tree-row a,
.products-page .catalog-side .tree-leaf { color: var(--ink-2); }
.products-page .catalog-side .chip.is-active,
.products-page .catalog-side .tree-name.is-active { background: var(--brand); color: #fff; }
.products-page .catalog-side .chip.is-active .tree-count,
.products-page .catalog-side .tree-name.is-active .tree-count { color: #fff; opacity: .9; }
.subheader-cat-nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
.subheader-cat-nav li a {
display: block;
padding: 18px 28px;
color: #fff;
font-weight: 600;
font-size: 15px;
text-decoration: none;
border-right: 1px solid rgba(255, 255, 255, .18);
transition: background .15s ease;
}
.subheader-cat-nav li:last-child a { border-right: 0; }
.subheader-cat-nav li a:hover,
.subheader-cat-nav li a.is-active { background: rgba(0, 0, 0, .15); }
/* ---------- pc-band (Product Categories) — like the reference ----------
Left 50% is solid orange (the WHOLE left half, not just two bars).
Right 50% is white. Carousel cards float above the orange/white split (z-index 2).
Title floats above orange (z-index 3). */
.pc-band { position: relative; background: #f06b30; overflow: hidden; }
/* Right-half white panel: covers 50% to 100% of section */
.pc-band::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; background: #fff; z-index: 0; }
.pc-wrap {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
padding: 64px 0 0;
align-items: stretch;
}
.pc-head {
width: 50%;
background: transparent;
color: #fff;
padding: 0 48px 40px;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
z-index: 3; /* above orange left half */
}
.pc-sub {
/* 橙色底上必须显式给白：全局 p{color:var(--ink-2)} 优先于 .pc-head 的继承色 */
color: #fff;
font-size: 14px;
letter-spacing: 0.04em;
margin: 0 0 18px;
font-style: italic;
opacity: 0.95;
}
.pc-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 56px;
line-height: 1.05;
margin: 0;
color: #fff;
}
.pcar-wrap { background: transparent; padding: 0 0 24px; position: relative; z-index: 2; height: auto; display: block; margin-right: calc(-50vw + 50%); }
.pcar-track-wrap { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; position: relative; }
.pcar-track-wrap.is-drag { cursor: grabbing; }
.pcar-track { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; transition: transform .25s ease-out; will-change: transform; }
.pcar-card { flex: 0 0 calc(25% - 18px); min-width: 260px; max-width: 340px; background: #fff; border: 1px solid #d5d1c6; border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 6px 20px rgba(0,0,0,0.08); display: block; }
.pcar-card-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f4f4f4; display: block; }
.pcar-card-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; }
.pcar-card-name { font-weight: 700; font-size: 15px; color: var(--ink); font-family: var(--font-display); }
.pcar-card-arrow { color: var(--brand); display: inline-flex; }
.pcar-dots { display: flex; gap: 10px; padding: 24px 0 0 4px; }
.pcar-dot { width: 36px; height: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); border-radius: 2px; cursor: pointer; transition: background .15s, box-shadow .15s; }
.pcar-dot.is-active { background: var(--brand); box-shadow: 0 0 0 1px rgba(0,0,0,0.3); }
@media (max-width: 980px) {
.pc-head { width: 100%; padding: 0 28px 32px; }
.pc-title { font-size: 38px; }
.pcar-card { flex: 0 0 240px; min-width: 240px; }
}
@media (max-width: 480px) {
.pc-head { padding: 0 20px 24px; }
.pc-title { font-size: 30px; }
}
/* ---------- home: sourcing service band（产品门类带下方）----------
浅色服务承诺带：找不到所需产品 → 明确引导到询价表单。*/
.home-sour { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 20px 0; }
.home-sour-wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 32px 24px; flex-wrap: wrap; }
.home-sour-text { min-width: 0; }
.home-sour-title { margin: 0; font-size: 20px; line-height: 1.4; }
.home-sour-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.home-sour-cta { flex: 0 0 auto; }
@media (max-width: 640px) {
.home-sour-cta { width: 100%; justify-content: center; }
}
/* ---------- home-about: About Us section (under pc-band, like reference 016.tongmiu.com) ----------
Two-column 50/50 split: left image, right text. White background.
i18n keys: ab.eb1 / ab.h1 / ab.lead / ab.cta. */
.home-about { background: #fff; padding: 80px 0; }
.home-about-wrap {
max-width: var(--container, 1200px);
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.home-about-img img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
background: #f4f4f4;
}
.home-about-body { padding: 12px 0; }
.home-about-eb {
color: var(--brand, #f06b30);
font-size: 14px;
font-style: italic;
letter-spacing: 0.04em;
margin: 0 0 18px;
}
.home-about-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 48px;
line-height: 1.1;
margin: 0 0 20px;
color: var(--ink, #1a1a1a);
}
.home-about-lead {
font-size: 15px;
line-height: 1.7;
color: var(--ink-2, #555);
margin: 0 0 28px;
max-width: 480px;
}
.home-about-cta { display: inline-flex; align-items: center; }
@media (max-width: 980px) {
.home-about { padding: 56px 0; }
.home-about-wrap { grid-template-columns: 1fr; gap: 36px; }
.home-about-title { font-size: 36px; }
}
@media (max-width: 480px) {
.home-about { padding: 40px 0; }
.home-about-title { font-size: 28px; }
.home-about-lead { font-size: 14px; }
}
/* ---------- home-stats: 4 big numbers with orange "+" (under hero, like reference 016.tongmiu.com) ----------
i18n keys: stats.0.n/l, stats.1.n/l, stats.2.n/l, stats.3.n/l, stats.aria.
Layout: top thin orange bar → floating white card with 4 columns. */
.home-stats { position: relative; background: var(--paper, #FFF8EC); padding: 0 0 60px; }
.home-stats-bar { height: 36px; background: var(--brand, #f06b30); }
.home-stats-card {
max-width: var(--container, 1200px);
margin: -28px auto 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
padding: 40px 48px;
position: relative;
z-index: 2;
}
.home-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.home-stat { display: flex; flex-direction: column; align-items: flex-start; }
.home-stat b { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 42px; font-weight: 700; color: var(--ink, #1a1a1a); line-height: 1; display: inline-flex; align-items: baseline; }
.home-stat b i { color: var(--brand, #f06b30); font-size: 24px; font-style: normal; margin-left: 2px; font-weight: 700; }
.home-stat b .hs-num { font-variant-numeric: tabular-nums; } /* 跳数时字宽不抖（等宽数字） */
/* 必须用 > ：这条只管标签行。若写成 .home-stat span， 里跳动的 .hs-num 也会被 13px 命中，
数字会缩成小字、而单位（M/h/万）仍是 42px，视觉上就对不齐了。 */
.home-stat > span { font-size: 13px; color: var(--muted, #6b6354); margin-top: 10px; font-weight: 500; }
@media (max-width: 980px) {
.home-stats-card { padding: 32px 28px; margin: -24px 16px 0; }
.home-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.home-stat b { font-size: 36px; }
}
@media (max-width: 480px) {
.home-stats-card { padding: 24px 20px; }
.home-stats-grid { grid-template-columns: 1fr; gap: 20px; }
.home-stat b { font-size: 32px; }
}
/* ---------- News cards (News page) ---------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.news-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .2s, box-shadow .2s; color: var(--ink); text-decoration: none; }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(20,28,56,.1); }
.news-card-img { aspect-ratio: 16/9; background: var(--paper); overflow: hidden; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; }
.news-card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.news-card-tag { font-size: 12px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; }
.news-card h3 { margin: 0; font-size: 18px; line-height: 1.3; font-family: var(--font-display); color: var(--ink); }
.news-card-meta { font-size: 13px; color: var(--ink-2); margin: 0; }
.news-card-excerpt { font-size: 14px; color: var(--ink-2); margin: 0; flex: 1; }
.news-card-more { font-size: 14px; font-weight: 700; color: var(--brand); margin-top: 8px; }
/* news page: left list + right sidebar (Tongmiu-style) */
.news-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; margin-top: 32px; }
.news-main { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.news-item { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-soft); transition: transform .2s, box-shadow .2s; }
.news-item:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(20,28,56,.12); }
.news-item-link { display: block; color: inherit; text-decoration: none; }
.news-item-img { aspect-ratio: 16/9; background: var(--paper); overflow: hidden; }
.news-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.news-item:hover .news-item-img img { transform: scale(1.03); }
.news-item-body { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.news-item-body h3 { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.25; color: var(--ink); }
.news-item-meta { font-size: 13px; color: var(--ink-2); margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.news-item-meta::before { content: '📅'; font-size: 14px; }
.news-item-excerpt { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 0; flex: 1; }
.news-item-more { font-size: 14px; font-weight: 700; color: var(--brand); margin-top: 8px; }
.news-item-more::after { content: ' →'; }
.news-side { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 100px; }
.news-side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-soft); }
.news-side-card h3 { margin: 0 0 18px; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); position: relative; padding-left: 28px; }
.news-side-card h3::before { content: '--'; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 700; letter-spacing: -1px; }
.news-side-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.news-side-list a { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--paper); border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.news-side-list a:hover { background: var(--brand-soft); color: var(--brand); }
.news-side-badge { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.news-side-recent { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.news-side-recent a { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.news-side-recent a:last-child { border-bottom: 0; padding-bottom: 0; }
.news-side-recent small { font-size: 12px; color: var(--ink-2); }
.news-side-recent small::before { content: '📅 '; }
.news-side-recent b { font-size: 14px; font-weight: 600; line-height: 1.4; }
.news-side-recent a:hover b { color: var(--brand); }
@media (max-width: 900px) { .news-layout { grid-template-columns: 1fr; } .news-side { position: static; } }
/* ---------- Download list (Download page) ---------- */
.dl-list { display: flex; flex-direction: column; gap: 12px; }
.dl-row { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.dl-row:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,28,56,.1); }
.dl-icon-txt { flex: 0 0 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 800; font-family: var(--font-display); letter-spacing: .02em; }
.dl-body { flex: 1; min-width: 0; }
.dl-body h3 { margin: 0 0 6px; font-size: 16px; font-family: var(--font-display); color: var(--ink); }
.dl-body p { margin: 0; font-size: 13px; color: var(--ink-2); }
.dl-meta { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.dl-btn { flex: 0 0 auto; padding: 8px 18px; background: var(--brand); color: #fff; border-radius: 999px; font-size: 13px; font-weight: 700; }
/* ---------- Products grid (3-col cards like the reference) ---------- */
.products-section { padding: 40px 0 80px; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: transparent; text-decoration: none; }
.product-card-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; }
/* 编号必须"看得见"：早期用 flex 行内布局，编号(无 flex 声明)会被 flex:1 的超长
产品名挤压到接近零宽 → 明明在 DOM 里却完全看不到。改为纵向排列 + 独立橙色徽标。 */
.product-card-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 55%, transparent 100%); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: #fff; }
.product-card-overlay .sku { flex: 0 0 auto; order: -1; margin: 0; padding: 3px 11px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
.product-card-overlay h3 { margin: 0; font-size: 17px; line-height: 1.35; color: #fff; font-family: var(--font-display); width: 100%; padding-right: 48px; }
.product-card-arrow { position: absolute; right: 20px; bottom: 18px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; transition: background .2s, transform .2s; }
.product-card:hover .product-card-arrow { background: var(--brand); transform: translateX(2px); }
/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.page-btn, .page-num { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.page-btn { font-size: 18px; }
.page-num.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.page-btn:hover, .page-num:hover { border-color: var(--ink); }
.page-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
@media (max-width: 900px) {
.products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 540px) {
.products-grid { grid-template-columns: 1fr; }
}
/* ---------- FAQ page (clean accordion like 图一) ---------- */
.faq-page { padding: 60px 0 40px; max-width: 1100px; margin: 0 auto; }
.faq-page-head { margin-bottom: 28px; }
.faq-h1 { font-family: var(--font-display); font-size: 56px; font-weight: 700; color: var(--ink); margin: 0 0 18px; line-height: 1.1; }
.faq-divider { border: 0; border-top: 1px solid rgba(0,0,0,0.08); margin: 0 0 28px; }
.faq-page-list { display: flex; flex-direction: column; gap: 16px; }
.faq-row { background: transparent; border-radius: 6px; overflow: hidden; transition: background .2s; }
.faq-row > summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); background: #fff; border-radius: 6px; transition: background .2s, color .2s; }
.faq-row > summary::-webkit-details-marker { display: none; }
.faq-row-q { flex: 1; }
.faq-row-toggle { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(0,0,0,0.35); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 400; line-height: 1; color: var(--ink); }
.faq-row-toggle::before { content: '+'; }
.faq-row[open] > summary { background: var(--brand); color: #fff; border-radius: 6px 6px 0 0; }
.faq-row[open] .faq-row-toggle { border-color: #fff; color: #fff; }
.faq-row[open] .faq-row-toggle::before { content: '\2212'; }
.faq-row-a { background: #f5f5f5; padding: 20px 22px; color: var(--ink-2); font-size: 15px; line-height: 1.7; border-radius: 0 0 6px 6px; }
/* ---------- Catch Us Here (FAQ footer CTA) ---------- */
.catch-here { position: relative; overflow: hidden; padding: 80px 0 90px; color: #fff; }
.catch-here-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #163554 0%, #1f4670 50%, #2c5a8a 100%); z-index: 0; }
.catch-here-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(45,90,140,0.4) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(25,55,90,0.5) 0%, transparent 70%); }
.catch-here-inner { position: relative; z-index: 1; }
.catch-here-title { font-family: var(--font-display); font-size: 38px; font-weight: 700; color: #fff; text-align: center; margin: 0 0 48px; letter-spacing: .01em; }
.catch-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.catch-card { background: rgba(20, 28, 56, 0.85); border-radius: 12px; padding: 36px 28px; text-align: center; color: #fff; will-change: transform; transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, opacity .35s ease, background .35s ease; }
/* 聚焦悬停（参考 tongmiu）：鼠标进入卡片区时，非悬停卡略微缩小变暗；悬停卡放大上浮全亮。
选择器顺序不能反——后一条需覆盖前一条对同一张卡的效果。 */
.catch-cards:hover .catch-card { transform: scale(.96); opacity: .75; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.catch-cards .catch-card:hover { transform: translateY(-8px) scale(1.08); opacity: 1; background: rgba(20, 28, 56, 0.97); box-shadow: 0 22px 50px rgba(0, 0, 0, .5); }
.catch-card-icon { width: 56px; height: 56px; margin: 0 auto 18px; background: #fff; color: var(--ink); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.catch-card-icon svg { width: 26px; height: 26px; }
.catch-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.catch-card p { margin: 0; color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.5; }
.catch-card-link { color: var(--brand); font-weight: 700; text-decoration: none; }
.catch-card-link:hover { color: #fff; }
@media (max-width: 768px) {
.catch-cards { grid-template-columns: 1fr; }
.catch-card { will-change: auto; }
.catch-cards:hover .catch-card,
.catch-cards .catch-card:hover { transform: none; opacity: 1; box-shadow: none; background: rgba(20, 28, 56, 0.85); }
.faq-h1 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.catch-card { transition: none; }
.catch-cards:hover .catch-card,
.catch-cards .catch-card:hover { transform: none; opacity: 1; box-shadow: none; background: rgba(20, 28, 56, 0.85); }
}
/* ---------- Footer (4-col deep dark, like reference) ---------- */
.foot { background: linear-gradient(180deg, #1f2533 0%, #161a25 100%); color: rgba(255,255,255,0.85); padding: 60px 0 24px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.9fr; gap: 48px; }
.foot h4 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 18px; }
.foot p { color: rgba(255,255,255,0.7); font-size: 15px; line-height: 1.7; margin: 0 0 10px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot ul li a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 15px; transition: color .15s; }
.foot ul li a:hover { color: var(--brand); }
.foot-qr-link { display: inline-block; }
.foot-qr { display: block; width: 160px; height: 160px; border-radius: 8px; background: #fff; padding: 6px; }
.foot-meta { display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,0.5); font-size: 13px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); }
.foot-meta span { color: rgba(255,255,255,0.5); }
/* ---------- home: section header variants (center / left) ---------- */
.sec-head-center { justify-content: center; text-align: center; }
.sec-head-center > div { width: 100%; }
.sec-head-left { justify-content: flex-start; text-align: left; }
.sec-head .sec-eyebrow { font-style: italic; letter-spacing: .04em; text-transform: none; font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-weight: 400; font-size: 16px; }
/* ---------- home: Client Feedback (3 testimonial cards) ---------- */
.feedback-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feedback-card { position: relative; background: #fff; border: 1px solid var(--line, #ececec); border-radius: var(--radius, 12px); padding: 32px 28px 28px; box-shadow: var(--shadow-soft, 0 4px 16px rgba(0,0,0,.04)); display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.feedback-quote { font-size: 15px; line-height: 1.7; color: var(--ink-2, #555); margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line, #ececec); }
.feedback-meta { display: flex; flex-direction: column; gap: 4px; }
.feedback-meta b { font-size: 18px; font-weight: 700; color: var(--ink, #1a1a1a); font-family: var(--font-display, 'Playfair Display', Georgia, serif); }
.feedback-meta span { font-size: 13px; color: var(--brand, #f06b30); font-weight: 600; letter-spacing: .02em; }
.feedback-mark { position: absolute; right: 14px; bottom: 8px; color: rgba(20,28,56,0.06); pointer-events: none; }
/* ---------- home: News & Articles (3 latest) ---------- */
.news-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-grid-3 .news-card { transition: transform .2s, box-shadow .2s; }
.news-grid-3 .news-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(20,28,56,.1); }
/* ---------- responsive collapse for new home sections ---------- */
@media (max-width: 980px) {
.feedback-grid { grid-template-columns: 1fr; }
.news-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.foot-meta { flex-direction: column; gap: 8px; text-align: center; }
}
@media (max-width: 540px) {
.foot-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* ---------- 报价单（多品项询价篮） ---------- */
.product-cell { position: relative; }
/* 卡片右上角的「加入报价单」：始终可见（hover 才显示的话触屏用户永远点不到） */
.rfq-add { cursor: pointer; font: inherit; }
.rfq-add-icon {
position: absolute; top: 10px; right: 10px; z-index: 2;
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px;
color: var(--ink); background: rgba(255, 255, 255, .94);
box-shadow: 0 6px 18px rgba(36, 24, 16, .18);
transition: background .15s, color .15s, transform .15s;
}
.rfq-add-icon:hover { color: #fff; background: var(--brand); transform: translateY(-1px); }
.rfq-add-icon.is-on { color: #fff; background: var(--brand); }
.rfq-add-icon.is-on svg { transform: rotate(45deg); }
.rfq-add-icon svg { transition: transform .2s; }
.pd-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.pd-hero-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.pd-hero-actions .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .10); }
.pd-hero-actions .btn-ghost:hover { color: var(--ink); background: #fff; }
.rfq-basket {
display: grid; gap: 12px; padding: 16px 18px;
border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); background: var(--paper-2);
}
.rfq-basket-head { display: flex; align-items: center; gap: 10px; }
.rfq-basket-head strong { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.rfq-basket-count { min-width: 22px; padding: 1px 8px; border-radius: 999px; color: #fff; background: var(--brand); font-size: 12px; font-weight: 700; text-align: center; }
.rfq-basket-clear { margin-left: auto; border: 0; padding: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.rfq-basket-clear:hover { color: var(--brand); }
.rfq-basket-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rfq-basket-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.rfq-basket-name { flex: 1; min-width: 0; color: var(--ink); font-size: 13.5px; line-height: 1.45; }
/* 起订量提示（数据来自产品 moq）：紧贴数量框左侧，用弱化小字，不抢品名 */
.rfq-basket-moq { flex: none; color: var(--muted); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rfq-basket-qty { width: 76px; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
.rfq-basket-del { display: inline-flex; padding: 6px; border: 0; border-radius: 6px; color: var(--muted); background: none; cursor: pointer; }
.rfq-basket-del:hover { color: #c0392b; background: rgba(192, 57, 43, .08); }
.rfq-basket-empty { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.rfq-basket-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rfq-basket-cur { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.rfq-basket-cur select { min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; }
.rfq-basket-note { flex: 1 1 220px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 560px) {
/* 窄屏：品名独占一行，起订量提示与数量框换到第二行，避免三个元素挤在一行 */
.rfq-basket-list li { flex-wrap: wrap; }
.rfq-basket-name { flex: 1 1 100%; }
.rfq-basket-moq { margin-right: auto; }
}
/* 加入报价单的轻提示（底部居中，1.5s 后淡出） */
.rfq-toast {
position: fixed; left: 50%; bottom: 26px; z-index: 90;
max-width: min(90vw, 460px); padding: 11px 18px; border-radius: 999px;
opacity: 1; transform: translate(-50%, 0);
color: #fff; background: rgba(24, 20, 16, .93);
font-size: 13.5px; line-height: 1.45; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .5);
transition: opacity .22s, transform .22s;
}
.rfq-toast.is-out { opacity: 0; transform: translate(-50%, 12px); }
/* ---------- 图片格式协商：WebP 优先、原图回落 ----------
写法要点：先写一行普通 url()，再写一行 image-set()。
不认识 image-set 的浏览器会忽略第二行（自动回落原图），现代浏览器用 WebP。 */
.subheader-hero {
background-image: url('/img/contact-hero.jpg');
background-image: image-set(
url('/img/contact-hero.webp') type('image/webp'),
url('/img/contact-hero.jpg') type('image/jpeg')
);
}
.pd-hero-badges {
background-image: linear-gradient(rgba(20, 28, 56, .40), rgba(20, 28, 56, .40)), url('/img/hero-tongmiu-badges.png');
background-image: linear-gradient(rgba(20, 28, 56, .40), rgba(20, 28, 56, .40)), image-set(
url('/img/hero-tongmiu-badges.webp') type('image/webp'),
url('/img/hero-tongmiu-badges.png') type('image/png')
);
}
.foot-qr-link picture { display: block; }
/* ---------- home: shipped programmes (cases) — responsive ---------- */
@media (max-width: 980px) {
.case-grid { grid-template-columns: 1fr; }
}
/* ---------- catalogue: search / sort toolbar + empty state ---------- */
.catalog-tools {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
margin: 0 0 20px; padding: 14px 16px;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
}
.catalog-search { flex: 1 1 260px; min-width: 0; }
.catalog-search input {
width: 100%; min-height: 46px; padding: 0 16px;
border: 1px solid var(--line); border-radius: 999px;
color: var(--ink); background: #fff; font: inherit;
}
.catalog-search input:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.catalog-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.catalog-sort select {
min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
color: var(--ink); background: #fff; font: inherit;
}
.catalog-tools .btn { min-height: 46px; display: inline-flex; align-items: center; gap: 7px; }
.catalog-count { margin: 0 0 18px; color: var(--muted); font-size: 13px; letter-spacing: .02em; }
.catalog-empty {
display: grid; gap: 12px; justify-items: center; text-align: center;
padding: 60px 24px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper);
}
.catalog-empty b { font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.catalog-empty span { max-width: 460px; color: var(--muted); font-size: 14px; line-height: 1.65; }
@media (max-width: 720px) {
.catalog-sort { flex: 1 1 100%; justify-content: space-between; }
.catalog-sort select { flex: 1; }
.catalog-tools .btn { flex: 1 1 auto; justify-content: center; }
}