:root {
  --bg: #081018; --surface: #ffffff; --line: rgba(9, 22, 34, 0.08); --line-strong: rgba(9, 22, 34, 0.14);
  --text: #0f1822; --text-soft: #596878; --text-invert: #d8e4ef; --gold: #d5b16b; --gold-deep: #a78547;
  --shadow: 0 28px 90px -52px rgba(5, 15, 24, 0.55); --metal: linear-gradient(180deg, #fefefe 0%, #eff3f6 46%, #d6dde4 100%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--text); background: radial-gradient(1200px 600px at 85% -10%, rgba(213,177,107,0.08), transparent 55%), radial-gradient(900px 420px at 0% 25%, rgba(16,36,52,0.05), transparent 52%), linear-gradient(180deg, #fcfdff 0%, #f4f7fa 54%, #eff3f6 100%); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(1240px, calc(100vw - 40px)); margin: 0 auto; }
header { position: sticky; top: 0; z-index: 40; background: linear-gradient(180deg, rgba(6,14,21,0.96), rgba(9,18,27,0.9)); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 24px 48px -36px rgba(0,0,0,.78); backdrop-filter: blur(14px); }
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--text-invert); }
.brand img { width: 186px; height: auto; }
.brand-name { font-family: "Noto Serif SC", serif; font-size: 21px; letter-spacing: 1px; text-shadow: 0 4px 18px rgba(0,0,0,.32); }
.brand-subtitle { color: rgba(216,228,239,0.72); font-size: 13px; margin-top: 4px; }
.nav-links { display: flex; align-items: center; gap: 22px; color: rgba(216,228,239,0.88); font-size: 14px; letter-spacing: .02em; }
.nav-links a { position: relative; padding-bottom: 4px; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); transform: scaleX(0); transform-origin: left; transition: transform .24s ease; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.mobile-menu { display: none; position: relative; flex: 0 0 auto; }
.mobile-menu summary { list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu-button { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.mobile-menu-button span { width: 20px; height: 2px; border-radius: 999px; background: rgba(238,244,250,.92); }
.mobile-menu-panel { position: absolute; top: calc(100% + 12px); left: 0; z-index: 60; width: min(300px, calc(100vw - 26px)); padding: 12px; border-radius: 22px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(10,18,27,.98), rgba(15,26,36,.98)); box-shadow: 0 32px 72px -34px rgba(0,0,0,.76); display: grid; gap: 6px; }
.mobile-menu-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 14px; color: rgba(238,244,250,.9); font-size: 14px; background: rgba(255,255,255,.03); }
.mobile-menu-panel .mobile-menu-primary { color: #111820; font-weight: 700; background: linear-gradient(120deg, #f4ddb1 0%, var(--gold) 52%, #b68b43 100%); }
.home-photo-hero { position: relative; min-height: clamp(420px, 52vw, 720px); overflow: hidden; background: #08111a; }
.home-photo-hero .home-photo-slider { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-photo-hero .product-hero-slider::after { background: linear-gradient(180deg, rgba(6,16,24,.08), rgba(6,16,24,.16)); }
.home-photo-hero .product-hero-next { right: 28px; }
.home-category-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.home-category-grid .product-card > img { width: 100%; height: 280px; object-fit: contain; background: #fff; }

.service-pill { padding: 11px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); color: rgba(216,228,239,0.88); font-size: 13px; background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.contact-popover { position: relative; }
.contact-trigger { cursor: pointer; }
.contact-panel { position: absolute; top: calc(100% + 12px); right: 0; width: 244px; padding: 16px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.14); background: linear-gradient(180deg, rgba(10,18,27,.98), rgba(15,26,36,.96)); box-shadow: 0 32px 72px -32px rgba(0,0,0,.72); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease, visibility .22s ease; z-index: 30; }
.contact-popover:hover .contact-panel, .contact-popover:focus-within .contact-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.contact-panel::before { content: ""; position: absolute; top: -8px; right: 26px; width: 14px; height: 14px; background: rgba(10,18,27,.98); border-left: 1px solid rgba(255,255,255,0.12); border-top: 1px solid rgba(255,255,255,0.12); transform: rotate(45deg); }
.contact-panel-title { margin-bottom: 8px; color: #f4ddb1; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.contact-panel-phone { margin-bottom: 8px; color: #f4f7fb; font-size: 16px; font-weight: 700; }
.contact-panel-email { margin-bottom: 14px; color: rgba(216,228,239,0.84); font-size: 12px; line-height: 1.5; word-break: break-all; }
.contact-panel-qr { display: flex; justify-content: center; padding: 8px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.contact-panel-qr img { width: 148px; height: 148px; object-fit: contain; background: #fff; border-radius: 12px; }
.contact-panel-note { margin-top: 10px; color: rgba(216,228,239,0.72); font-size: 12px; line-height: 1.6; text-align: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: .02em; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: linear-gradient(120deg, #f4ddb1 0%, var(--gold) 44%, #b68b43 100%); color: #13171b; box-shadow: 0 22px 42px -24px rgba(213,177,107,0.62), inset 0 1px 0 rgba(255,255,255,.34); }
.btn-outline { border: 1px solid rgba(255,255,255,0.24); color: #f4f7fb; background: rgba(255,255,255,0.03); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.section { padding: 84px 0; }
.section-dark { background: radial-gradient(900px 460px at 90% 10%, rgba(213,177,107,0.11), transparent 60%), linear-gradient(180deg, #0a121b 0%, #0f1b26 100%); color: var(--text-invert); }
.page-hero { position: relative; overflow: hidden; padding: 116px 0 88px; color: var(--text-invert); background: radial-gradient(1000px 560px at 82% 2%, rgba(213,177,107,0.16), transparent 60%), linear-gradient(180deg, #061018 0%, #0b1721 50%, #0e1a25 100%); }
.page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.04), transparent 58%), repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 18px), linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 28%, transparent 72%, rgba(255,255,255,.02) 100%); opacity: .4; }
.hero-grid, .split-grid, .contact-grid, .product-detail, .case-feature { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.page-hero h1, .hero-copy h1 { margin: 18px 0 16px; font-family: "Noto Serif SC", serif; font-size: clamp(36px, 4.5vw, 62px); line-height: 1.06; }
.page-hero p, .hero-copy p { margin: 0 0 28px; color: rgba(216,228,239,0.84); font-size: 17px; line-height: 1.86; }
.hero-actions, .service-tags, .variant-chips, .detail-meta, .anchor-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-visual, .image-panel { position: relative; border-radius: 30px; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 46px 100px -56px rgba(0,0,0,.82); }
.hero-visual img, .hero-visual video, .image-panel img, .image-panel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-badge { position: absolute; top: 18px; left: 18px; z-index: 1; padding: 9px 12px; border-radius: 12px; font-size: 12px; color: #fff; background: rgba(0,0,0,0.46); border: 1px solid rgba(255,255,255,0.18); }
.product-center-hero { min-height: 520px; }
.product-center-hero .hero-grid { z-index: 5; grid-template-columns: minmax(0,.86fr) minmax(380px,.9fr); pointer-events: none; }
.product-center-hero .hero-copy { position: relative; z-index: 6; pointer-events: auto; }
.product-hero-spacer { min-height: 340px; pointer-events: none; }
.product-hero-slider { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 64vw; min-height: auto; isolation: isolate; border-radius: 0; border: 0; box-shadow: none; background: #08111a; overflow: hidden; }
.product-hero-slider::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(6,16,24,.86) 0%, rgba(6,16,24,.42) 36%, rgba(6,16,24,.12) 100%), linear-gradient(180deg, rgba(6,16,24,.2), rgba(6,16,24,.38)); pointer-events: none; }
.product-hero-track { position: absolute; inset: 0; z-index: 1; }
.product-hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateX(24px) scale(1.02); transition: opacity .7s ease, transform .7s ease; }
.product-hero-slide.is-active { opacity: 1; transform: translateX(0) scale(1); z-index: 1; }
.product-hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.product-hero-slide::after { display: none; content: none; }
.product-hero-slide figcaption { display: none; }
.product-hero-next { position: absolute; right: 24px; top: 50%; z-index: 4; width: 58px; height: 58px; margin-top: -29px; border-radius: 50%; border: 1px solid rgba(255,255,255,.38); background: rgba(8,16,24,.62); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(10px); transition: transform .22s ease, background .22s ease, border-color .22s ease; }
.product-hero-next:hover { transform: scale(1.08); background: rgba(213,177,107,.92); border-color: rgba(244,222,177,.92); color: #101820; }
.product-hero-next svg { width: 26px; height: 26px; }
.product-hero-dots { position: absolute; right: 28px; bottom: 28px; z-index: 4; display: flex; gap: 8px; }
.product-hero-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.56); background: rgba(255,255,255,.22); }
.product-hero-dot.is-active { background: var(--gold); border-color: var(--gold); }
@media (max-width: 1080px) { .product-center-hero .hero-grid { grid-template-columns: 1fr; } .product-hero-slider { width: 100%; opacity: .48; } .product-hero-spacer { display: none; } }
.right-media-hero { min-height: 520px; }
.right-media-hero .hero-grid { z-index: 5; grid-template-columns: minmax(0,.86fr) minmax(380px,.9fr); pointer-events: none; }
.right-media-hero .hero-copy { position: relative; z-index: 6; pointer-events: auto; }
.right-media-spacer { min-height: 340px; pointer-events: none; }
.right-media-layer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 64vw; overflow: hidden; background: #08111a; }
.right-media-layer::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(6,16,24,.86) 0%, rgba(6,16,24,.42) 36%, rgba(6,16,24,.12) 100%), linear-gradient(180deg, rgba(6,16,24,.18), rgba(6,16,24,.36)); pointer-events: none; }
.right-media-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.right-media-label { position: absolute; top: 18px; left: 18px; z-index: 4; padding: 9px 12px; border-radius: 12px; font-size: 12px; color: #fff; background: rgba(0,0,0,0.46); border: 1px solid rgba(255,255,255,0.18); }
@media (max-width: 1080px) { .right-media-hero .hero-grid { grid-template-columns: 1fr; } .right-media-layer { width: 100%; opacity: .48; } .right-media-spacer { display: none; } }
.video-poster-shell { min-height: auto; aspect-ratio: 16 / 9; background: radial-gradient(110% 130% at 50% 0%, rgba(33,46,58,.88), rgba(10,17,24,.98) 72%); }
.video-poster-shell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,10,16,.04) 0%, rgba(4,10,16,.12) 100%); pointer-events: none; }
.hero-case-video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #000; }
.case-video-hero { min-height: 520px; }
.case-video-hero .case-feature { z-index: 5; grid-template-columns: minmax(0,.86fr) minmax(380px,.9fr); pointer-events: none; }
.case-video-hero .case-copy { position: relative; z-index: 6; pointer-events: auto; }
.case-video-spacer { min-height: 340px; pointer-events: none; }
.case-video-hero .video-poster-shell { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 64vw; min-height: auto; aspect-ratio: auto; border-radius: 0; border: 0; box-shadow: none; background: #08111a; overflow: hidden; }
.case-video-hero .video-poster-shell::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(6,16,24,.86) 0%, rgba(6,16,24,.42) 36%, rgba(6,16,24,.12) 100%), linear-gradient(180deg, rgba(6,16,24,.18), rgba(6,16,24,.36)); pointer-events: none; }
.case-video-hero .hero-case-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.case-video-hero .hero-badge { z-index: 4; }
@media (max-width: 1080px) { .case-video-hero .case-feature { grid-template-columns: 1fr; } .case-video-hero .video-poster-shell { width: 100%; opacity: .48; } .case-video-spacer { display: none; } }
.showcase-breakout { position: relative; width: 100vw; left: 50%; margin: 0 0 36px; transform: translateX(-50%); }
.showcase-slider { position: relative; overflow: hidden; min-height: 720px; background: linear-gradient(180deg, #101922, #152230); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 56px 130px -76px rgba(6,18,29,.78); }
.showcase-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; transition: transform .65s ease; }
.showcase-slide { position: relative; min-height: 720px; }
.showcase-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,12,20,.88) 0%, rgba(5,12,20,.46) 36%, rgba(5,12,20,.14) 66%, rgba(5,12,20,.22) 100%); }
.showcase-slide img { width: 100%; height: 100%; object-fit: cover; }
.showcase-copy { position: absolute; left: max(40px, calc((100vw - min(1240px, calc(100vw - 40px))) / 2)); bottom: 74px; z-index: 2; width: min(560px, calc(100% - 120px)); color: #eef4fa; }
.showcase-copy .card-kicker { color: #f1d6a0; }
.showcase-copy h3 { margin: 0 0 16px; font-size: clamp(38px, 4vw, 68px); font-family: "Noto Serif SC", serif; line-height: 1.02; text-shadow: 0 12px 28px rgba(0,0,0,.28); }
.showcase-copy p { margin: 0 0 24px; max-width: 48ch; color: rgba(238,244,250,.84); line-height: 1.9; font-size: clamp(15px, 1.2vw, 18px); }
.showcase-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.showcase-actions .btn { min-width: 180px; justify-content: center; }
.showcase-arrows { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.showcase-arrow { position: absolute; top: 50%; width: 84px; height: 84px; margin-top: -42px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: linear-gradient(180deg, rgba(10,21,32,.82), rgba(7,16,24,.58)); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 24px 54px -28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(10px); transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; pointer-events: auto; }
.showcase-arrow:hover { transform: scale(1.08); background: linear-gradient(180deg, rgba(247,226,183,.96), rgba(213,177,107,.92)); border-color: rgba(246,223,176,.96); box-shadow: 0 26px 56px -24px rgba(213,177,107,.42); color: #0d1822; }
.showcase-arrow.prev { left: max(20px, calc((100vw - min(1240px, calc(100vw - 40px))) / 2 - 104px)); }
.showcase-arrow.next { right: max(20px, calc((100vw - min(1240px, calc(100vw - 40px))) / 2 - 104px)); }
.showcase-arrow svg { width: 34px; height: 34px; }
.showcase-dots { position: absolute; right: max(28px, calc((100vw - min(1240px, calc(100vw - 40px))) / 2)); bottom: 34px; z-index: 3; display: flex; gap: 10px; }
.showcase-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,.44); background: rgba(255,255,255,.18); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.showcase-dot.is-active { background: var(--gold); border-color: var(--gold); transform: scale(1.18); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.section-head h2 { margin: 0; font-family: "Noto Serif SC", serif; font-size: clamp(26px, 3vw, 40px); line-height: 1.12; }
.section-head p, .body-copy p, .case-copy p { color: var(--text-soft); line-height: 1.85; margin: 0; }
.stats-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.stat-card, .glass-card, .soft-card, .case-card, .info-card, .product-card, .process-card, .spec-card { border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.stat-card, .soft-card, .glass-card, .process-card, .info-card, .spec-card { padding: 24px; }
.stat-value { font-family: "Noto Serif SC", serif; font-size: 32px; color: var(--gold-deep); }
.stat-label, .case-card p, .product-card p, .process-card p, .soft-card p, .glass-card p, .info-card p, .spec-card p { margin: 0; color: var(--text-soft); line-height: 1.76; }
.tag, .variant-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, #fff, #f6f8fb); color: #22303d; font-size: 14px; }
.grid-3, .case-grid, .product-grid, .contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.grid-2, .spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.card-kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; }
.soft-card h3, .glass-card h3, .case-card h3, .product-card h3, .process-card h3, .spec-card h3 { margin: 0 0 10px; font-size: 22px; }
.case-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #edf2f7; }
.case-card .card-body, .product-card .card-body { padding: 18px 18px 20px; }
.product-card { overflow: hidden; position: relative; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 38px 90px -56px rgba(11,22,33,.38); border-color: rgba(213,177,107,.24); }
.product-card:hover .product-card-media img { transform: none; }
.product-card-media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 304px; padding: 0; background: transparent; border-bottom: 0; overflow: hidden; }
.product-card-media::before, .product-card-media::after { display: none; content: none; }
.product-card img { position: relative; z-index: 1; width: 100%; height: 304px; object-fit: contain; object-position: center; transition: none; transform: none; filter: none; background: transparent; }
.product-card[data-category="白钢产品"] .product-card-media { min-height: 312px; padding: 0; background: transparent; }
.product-card[data-category="白钢产品"] .product-card-media::before, .product-card[data-category="白钢产品"] .product-card-media::after { display: none; content: none; }
.product-card[data-category="白钢产品"] img { height: 312px; transform: none; object-position: center; }
.product-card[data-category="电磁灶具"] .product-card-media { min-height: 312px; padding: 0; background: transparent; }
.product-card[data-category="电磁灶具"] .product-card-media::before, .product-card[data-category="电磁灶具"] .product-card-media::after { display: none; content: none; }
.product-card[data-category="电磁灶具"] img { width: 100%; height: 312px; transform: none; }
.product-card .meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 12px; color: var(--text-soft); }
.product-card .spec-count { color: var(--gold-deep); font-weight: 700; }
.product-card .series-line { margin: 0 0 8px; color: #314252; font-size: 13px; font-weight: 600; }
.product-card .model-line { margin: 10px 0 0; font-size: 13px; color: var(--gold-deep); letter-spacing: .02em; }
.catalog-shell { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 24px; align-items: start; }
.catalog-sidebar { position: sticky; top: 108px; display: grid; gap: 16px; }
.catalog-sidebar .soft-card { background: linear-gradient(180deg, #ffffff, #f4f7fa); }
.catalog-meta-list { display: grid; gap: 14px; }
.catalog-meta-list .row { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(9,22,34,.06); }
.catalog-meta-list .row:last-child { padding-bottom: 0; border-bottom: 0; }
.catalog-meta-list strong { font-family: "Noto Serif SC", serif; font-size: 24px; color: #203241; }
.catalog-filter-panel { display: grid; gap: 16px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; }
.filter-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(9,22,34,.08); background: linear-gradient(180deg, #fff, #f6f8fb); color: #22303d; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.filter-chip:hover { transform: translateY(-1px); border-color: rgba(213,177,107,.32); }
.filter-chip.is-active { background: linear-gradient(120deg, #f4ddb1 0%, var(--gold) 44%, #b68b43 100%); border-color: rgba(213,177,107,.6); color: #13171b; box-shadow: 0 18px 40px -28px rgba(213,177,107,.62); }
.anchor-row a { padding: 11px 16px; border-radius: 999px; background: #f1f4f8; border: 1px solid #e2e8ee; color: #23313d; }
.catalog-section + .catalog-section { margin-top: 46px; }
.catalog-section h3 { margin: 0 0 18px; font-size: 28px; }
.catalog-section .catalog-meta { margin-bottom: 18px; color: var(--text-soft); }
.catalog-main { display: grid; gap: 22px; }
.catalog-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.catalog-head h3 { margin: 0; font-size: 32px; }
.catalog-head .count { color: var(--gold-deep); font-weight: 700; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.catalog-section.is-hidden { display: none; }
.catalog-card-tag { position: absolute; top: 16px; left: 16px; z-index: 8; padding: 8px 12px; border-radius: 999px; font-size: 12px; color: #fff; background: rgba(8,16,24,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.16); pointer-events: none; }
.catalog-empty { display: none; padding: 24px 26px; border-radius: 24px; border: 1px dashed rgba(9,22,34,.14); background: linear-gradient(180deg, #fff, #f8fafc); color: var(--text-soft); }
.catalog-empty.is-visible { display: block; }
.case-stage { display: grid; gap: 22px; }
.scene-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.scene-pilot { display: grid; grid-template-columns: 1.08fr .92fr; gap: 24px; align-items: stretch; }
.scene-pilot .case-card { height: 100%; }
.scene-stack { display: grid; gap: 20px; }
.scene-section { padding: 28px; border-radius: 28px; border: 1px solid rgba(9,22,34,.08); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,247,250,.98)); box-shadow: var(--shadow); }
.scene-section h3 { margin: 0 0 10px; font-size: 32px; font-family: "Noto Serif SC", serif; }
.scene-section p { margin: 0; color: var(--text-soft); line-height: 1.85; }
.scene-section .meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 20px; }
.scene-section .meta .tag { min-height: 38px; font-size: 13px; }
.scene-sales-copy { margin: 0 0 22px; padding: 18px 20px; border-left: 3px solid var(--gold); background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(246,248,251,.84)); }
.scene-sales-copy p { color: #334554; line-height: 1.9; }
.scene-site-block { margin: 4px 0 22px; }
.scene-site-row { display: flex; flex-wrap: wrap; gap: 14px; }
.scene-site-card { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 20px; border: 1px solid rgba(9,22,34,.08); background: linear-gradient(180deg, #fff, #f7f9fc); box-shadow: 0 18px 48px -36px rgba(10,20,30,.16); }
.scene-site-icon { width: 52px; height: 52px; object-fit: contain; display: block; border-radius: 14px; background: #fff; }
.scene-site-label { font-size: 15px; font-weight: 700; color: #22303d; letter-spacing: .02em; }
.scene-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 20px; }
.case-action-panel { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.case-step { padding: 22px; border-radius: 24px; background: linear-gradient(180deg, #0d1822, #152330); color: #eaf1f7; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 28px 80px -56px rgba(5,15,24,.82); }
.case-step .step { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(213,177,107,.16); color: var(--gold); font-weight: 700; margin-bottom: 14px; }
.case-step h4 { margin: 0 0 10px; font-size: 20px; }
.case-step p { margin: 0; color: rgba(228,237,244,.76); line-height: 1.75; }
.scene-cta { padding: 30px; border-radius: 28px; background: radial-gradient(880px 260px at 88% 8%, rgba(213,177,107,.18), transparent 64%), linear-gradient(180deg, #0d1822 0%, #162432 100%); color: #e4edf4; box-shadow: 0 34px 90px -52px rgba(7,18,29,.76); }
.scene-cta p { color: rgba(228,237,244,0.78); margin-bottom: 22px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-soft); font-size: 14px; margin-bottom: 20px; }
.breadcrumb span::after { content: "/"; margin-left: 8px; color: #a0aab5; }
.breadcrumb span:last-child::after { display: none; }
.product-detail { align-items: start; grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr); gap: 40px; }
.detail-copy h1 { margin: 10px 0 12px; font-family: "Noto Serif SC", serif; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.06; letter-spacing: -.02em; }
.detail-meta .tag { background: linear-gradient(180deg, #fffaf1, #fdf4e0); border-color: rgba(213,177,107,0.28); }
.detail-summary { margin: 0 0 24px; color: var(--text-soft); line-height: 1.9; font-size: 16px; }
.detail-aside { display: grid; gap: 22px; }
.detail-showcase-shell { position: relative; padding: 0; border-radius: 34px; background: transparent; border: 0; box-shadow: none; overflow: hidden; }
.detail-showcase-shell::before, .detail-showcase-shell::after { display: none; content: none; }
.product-figure { position: relative; margin: 0; border-radius: 30px; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.product-stage { position: relative; z-index: 1; min-height: 520px; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; overflow: hidden; }
.product-stage img { width: 100%; height: 520px; max-width: none; max-height: none; object-fit: contain; object-position: center; filter: none; background: transparent; }
.product-figure figcaption { position: relative; z-index: 1; margin-top: 8px; padding: 0 4px; color: #647381; font-size: 13px; line-height: 1.75; border-top: 0; background: transparent; }
.zoomable-image { position: relative; cursor: zoom-in; }
.zoomable-image::after { display: none; content: none; }
.detail-highlight-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 26px; }
.detail-highlight { padding: 22px; border-radius: 24px; border: 1px solid rgba(9,22,34,.08); background: linear-gradient(180deg, #fff, #f7f9fc); box-shadow: var(--shadow); }
.detail-highlight .label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.detail-highlight strong { display: block; font-family: "Noto Serif SC", serif; font-size: 26px; color: #1c2a35; margin-bottom: 8px; }
.detail-highlight p { margin: 0; color: var(--text-soft); line-height: 1.7; }
.detail-gallery { display: grid; gap: 18px; }
.detail-gallery-secondary { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 18px; align-items: start; }
.threeview-card { border-radius: 30px; overflow: hidden; border: 1px solid rgba(18,30,42,.08); background: linear-gradient(180deg, #ffffff, #f6f8fb); box-shadow: 0 34px 90px -52px rgba(17,29,40,.18); }
.threeview-card img { display: block; width: 100%; height: auto; }
.threeview-card .caption { padding: 16px 20px 18px; color: var(--text-soft); font-size: 13px; line-height: 1.75; border-top: 1px solid var(--line); }
.detail-aside .spec-card { padding: 24px; border-radius: 26px; background: linear-gradient(180deg, #fff, #f7f9fc); border: 1px solid rgba(18,30,42,.08); box-shadow: var(--shadow); }
.detail-aside .spec-card h3 { font-size: 24px; }
.related-section { margin-top: 26px; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.detail-cta { padding: 30px; border-radius: 28px; background: radial-gradient(780px 240px at 90% 8%, rgba(213,177,107,.18), transparent 64%), linear-gradient(180deg, #0d1822 0%, #162432 100%); color: #e4edf4; box-shadow: 0 34px 90px -52px rgba(7,18,29,.76); }
.detail-cta p { color: rgba(228,237,244,0.78); margin-bottom: 22px; }
.lightbox { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 28px; background: rgba(7,14,22,.82); backdrop-filter: blur(10px); }
.lightbox.is-open { display: flex; }
.lightbox-dialog { position: relative; width: min(92vw, 1320px); max-height: 92vh; padding: 18px; border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,247,250,.98)); box-shadow: 0 40px 120px -60px rgba(0,0,0,.72); }
.lightbox-dialog img { width: 100%; max-height: calc(92vh - 80px); object-fit: contain; border-radius: 18px; background: #fff; }
.lightbox-close { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(8,16,24,.82); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.lightbox-note { margin-top: 12px; color: var(--text-soft); font-size: 13px; text-align: center; }
.table-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: #fff; }
.product-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.product-table th, .product-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #edf1f5; vertical-align: top; font-size: 14px; }
.product-table th { background: #f7f9fc; color: #344455; font-weight: 700; }
.note-line { margin-top: 16px; color: var(--text-soft); font-size: 14px; }
.process-line { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.process-card .step { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(213,177,107,0.16); color: var(--gold-deep); font-weight: 700; margin-bottom: 16px; }
.quote-panel { padding: 30px; border-radius: 28px; background: radial-gradient(800px 260px at 92% 4%, rgba(213,177,107,.18), transparent 64%), linear-gradient(180deg, #0d1822 0%, #162432 100%); color: #e4edf4; box-shadow: 0 34px 90px -52px rgba(7,18,29,.76); }
.quote-panel p { color: rgba(228,237,244,0.78); }
.qr-panel { padding: 22px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.qr-panel img { width: 100%; max-width: 320px; margin: 0 auto; border-radius: 24px; }
.site-footer { padding: 34px 0 46px; color: rgba(226,235,244,0.86); background: linear-gradient(180deg, #0a1119 0%, #0d1620 100%); }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.footer-title { margin-bottom: 12px; font-size: 18px; font-family: "Noto Serif SC", serif; }
.site-footer p { margin: 0 0 8px; color: rgba(226,235,244,0.74); line-height: 1.8; }
.footer-legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: rgba(226,235,244,0.68); font-size: 13px; }
.footer-legal span { white-space: nowrap; }
@media (max-width: 720px) { .footer-legal { align-items: flex-start; flex-direction: column; gap: 6px; } .footer-legal span { white-space: normal; } }
@media (max-width: 1080px) { .nav-shell, .hero-grid, .split-grid, .contact-grid, .product-detail, .case-feature, .process-line, .stats-strip, .case-grid, .product-grid, .grid-3, .grid-2, .spec-grid, .contact-cards, .footer-grid, .catalog-shell, .scene-pilot, .scene-grid, .case-action-panel, .catalog-grid, .detail-highlight-grid, .detail-gallery-secondary, .related-grid { grid-template-columns: 1fr; } .nav-shell { padding: 18px 0; align-items: flex-start; } .nav-links { display: none; } .nav-cta { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .catalog-sidebar { position: static; } }
@media (max-width: 720px) { .container { width: min(100vw - 28px, 1240px); } .section { padding: 64px 0; } .page-hero { padding: 96px 0 68px; } .page-hero h1, .hero-copy h1, .detail-copy h1 { font-size: 34px; } .product-table { min-width: 560px; } .showcase-breakout { margin-bottom: 24px; } .showcase-slider, .showcase-slide { min-height: 460px; } .showcase-copy { left: 22px; right: 22px; bottom: 34px; width: auto; } .showcase-copy h3 { font-size: 32px; } .showcase-copy p { margin-bottom: 18px; line-height: 1.75; } .showcase-actions .btn { min-width: 0; width: auto; } .showcase-arrow { width: 50px; height: 50px; margin-top: -25px; } .showcase-arrow.prev { left: 12px; } .showcase-arrow.next { right: 12px; } .showcase-dots { right: 22px; bottom: 18px; } .catalog-head { align-items: start; flex-direction: column; } .scene-section { padding: 22px; } .detail-showcase-shell { padding: 0; } .product-stage { min-height: 300px; padding: 0; } .product-stage img { height: 300px; max-height: none; } }
/* Mobile refinement layer */
@media (max-width: 900px) { header { position: relative; } .nav-shell { min-height: auto; padding: 16px 0; } .brand img { width: 138px; } .brand-name { font-size: 18px; } .brand-subtitle { font-size: 12px; line-height: 1.45; } .nav-cta .btn { min-height: 42px; padding: 0 16px; } }
@media (max-width: 720px) { body { overflow-x: hidden; } .container { width: min(100vw - 26px, 1240px); } .nav-shell { gap: 12px; } .brand { width: 100%; align-items: center; gap: 10px; } .brand img { width: 112px; flex: 0 0 auto; } .brand-name { font-size: 16px; line-height: 1.2; } .brand-subtitle { max-width: 220px; font-size: 11px; } .nav-cta { gap: 8px; } .nav-cta .btn, .language-link, .contact-hover { min-height: 38px; padding: 0 13px; font-size: 12px; } .page-hero { overflow: hidden; } .right-media-hero, .product-center-hero, .case-video-hero { min-height: auto; padding: 82px 0 62px; } .right-media-layer, .product-hero-slider, .case-video-hero .video-poster-shell { width: 100%; opacity: .42; } .right-media-layer::after, .product-hero-slider::after, .case-video-hero .video-poster-shell::after { background: linear-gradient(90deg, rgba(6,16,24,.92), rgba(6,16,24,.72)), linear-gradient(180deg, rgba(6,16,24,.35), rgba(6,16,24,.76)); } .hero-copy, .case-copy, .detail-copy { max-width: 100%; } .hero-actions { width: 100%; } .hero-actions .btn { flex: 1 1 100%; } .showcase-slider, .showcase-slide { min-height: 540px; } .showcase-copy { left: 18px; right: 18px; bottom: 30px; width: auto; } .showcase-copy h3 { font-size: clamp(30px, 10vw, 42px); } .showcase-copy p { font-size: 14px; } .showcase-arrow { width: 46px; height: 46px; margin-top: -23px; } .showcase-arrow svg { width: 24px; height: 24px; } .catalog-grid, .product-grid, .case-grid, .grid-3, .grid-2, .contact-cards, .stats-strip { grid-template-columns: 1fr; gap: 16px; } .product-card-media, .product-card[data-category="白钢产品"] .product-card-media, .product-card[data-category="电磁灶具"] .product-card-media { min-height: 250px; } .product-card img { height: 250px; } .catalog-card-tag { top: 12px; left: 12px; } .case-card img { aspect-ratio: 16 / 10; } .scene-stack { padding-top: 6px; } .product-stage { min-height: 280px; } .product-stage img { height: 280px; } .detail-highlight-grid, .detail-gallery-secondary, .related-grid { grid-template-columns: 1fr; } .product-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .product-table { min-width: 620px; } .footer-grid { gap: 18px; } }
@media (max-width: 480px) { .page-hero h1, .hero-copy h1, .detail-copy h1 { font-size: 30px; } .page-hero p, .hero-copy p { font-size: 14px; line-height: 1.75; } .section-head h2 { font-size: 28px; } .brand img { width: 96px; } .brand-name { font-size: 15px; } .brand-subtitle { display: none; } .btn { min-height: 44px; padding: 0 16px; } .showcase-slider, .showcase-slide { min-height: 500px; } .product-card-media, .product-card[data-category="白钢产品"] .product-card-media, .product-card[data-category="电磁灶具"] .product-card-media { min-height: 220px; } .product-card img { height: 220px; } .right-media-label, .hero-badge { top: 12px; left: 12px; } }

@media (max-width: 900px) {
  header { position: relative; }
  .nav-shell { min-height: 78px; padding: 10px 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: nowrap; }
  .mobile-menu { display: block; }
  .nav-links, .nav-cta { display: none; }
  .brand { flex: 1 1 auto; min-width: 0; width: auto; gap: 10px; }
  .brand img { width: 72px; flex: 0 0 auto; }
  .brand-name { font-size: 15px; line-height: 1.25; letter-spacing: .02em; white-space: normal; }
  .brand-subtitle { display: none; }
}
@media (max-width: 720px) {
  .home-photo-hero { min-height: 360px; }
  .home-photo-hero .home-photo-slider { opacity: 1 !important; }
  .home-photo-hero .product-hero-next { width: 46px; height: 46px; right: 14px; }
  .home-photo-hero .product-hero-dots { right: 18px; bottom: 18px; }
  .home-page .stats-strip { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .home-page .stat-card { padding: 18px 14px; border-radius: 20px; }
  .home-page .stat-value { font-size: 30px; }
  .home-page .stat-label { font-size: 13px; line-height: 1.55; }
  .home-category-grid { grid-template-columns: 1fr; gap: 18px; }
  .home-category-grid .product-card > img { height: 260px; }
  .home-page .section { padding: 58px 0; }
}
@media (max-width: 480px) {
  .nav-shell { min-height: 72px; }
  .mobile-menu-button { width: 40px; height: 40px; }
  .brand img { width: 62px; }
  .brand-name { font-size: 14px; }
  .home-photo-hero { min-height: 320px; }
  .home-photo-hero .home-photo-slider { opacity: 1 !important; }
}/* final mobile homepage override */

@media (max-width: 900px) {
  header { position: relative; }
  .nav-shell { min-height: 78px; padding: 10px 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: nowrap; }
  .mobile-menu { display: block; }
  .nav-links, .nav-cta { display: none !important; }
  .brand { flex: 1 1 auto; min-width: 0; width: auto; gap: 10px; }
  .brand img { width: 72px; flex: 0 0 auto; }
  .brand-name { font-size: 15px; line-height: 1.25; letter-spacing: .02em; white-space: normal; }
  .brand-subtitle { display: none; }
}
@media (max-width: 720px) {
  .home-photo-hero { min-height: 360px; }
  .home-photo-hero .home-photo-slider { opacity: 1 !important; }
  .home-photo-hero .product-hero-next { width: 46px; height: 46px; right: 14px; }
  .home-photo-hero .product-hero-dots { right: 18px; bottom: 18px; }
  .home-page .stats-strip { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .home-page .stat-card { padding: 18px 14px; border-radius: 20px; }
  .home-page .stat-value { font-size: 30px; }
  .home-page .stat-label { font-size: 13px; line-height: 1.55; }
  .home-category-grid { grid-template-columns: 1fr; gap: 18px; }
  .home-category-grid .product-card > img { height: 260px; }
  .home-page .section { padding: 58px 0; }
}
@media (max-width: 480px) {
  .nav-shell { min-height: 72px; }
  .mobile-menu-button { width: 40px; height: 40px; }
  .brand img { width: 62px !important; }
  .brand-name { font-size: 14px; }
  .home-photo-hero { min-height: 320px; }
  .home-photo-hero .home-photo-slider { opacity: 1 !important; }
}