/* ============================================================
   m12 · 新中式·锦绣 — Modern Chinese Brocade
   朱漆红 + 鎏金 + 墨黑 + 宣纸米
   Restrained ceremonial elegance for premium B2B
   ============================================================ */

:root {
    --m12-bg: #faf6ed;
    --m12-bg-2: #f3ecdc;
    --m12-card: #ffffff;
    --m12-ink: #1a1612;
    --m12-ink-2: #4a3f36;
    --m12-ink-3: #7a6f63;
    --m12-ink-4: #aaa297;
    --m12-line: rgba(184, 146, 74, 0.32);
    --m12-line-2: rgba(26, 22, 18, 0.10);
    --m12-line-strong: rgba(184, 146, 74, 0.55);
    --m12-vermilion: #a02c2c;
    --m12-vermilion-h: #7d1e1e;
    --m12-gold: #b8924a;
    --m12-gold-h: #8e6f33;
    --m12-jade: #4a7060;
    --m12-success: #4a7060;

    --m12-font-display: "ZCOOL XiaoWei", "STSong", "SimSun", serif;
    --m12-font-body: "Noto Sans SC", -apple-system, sans-serif;
    --m12-font-brush: "Ma Shan Zheng", "STKaiti", serif;
    --m12-font-latin: "Cinzel", "Times New Roman", serif;
}

/* ─────── reset ─────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--m12-font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.85;
    color: var(--m12-ink);
    background: var(--m12-bg);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color .25s ease, opacity .25s ease; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.3; }
hr { border: 0; }

/* SEO h1 visually hidden */
.seo-h1 {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─────── shell ─────── */
.m12-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

.m12-main { background: var(--m12-bg); }

/* ─────── reusable: 印章 seal ─────── */
.m12-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 4px 8px;
    background: var(--m12-vermilion);
    color: #fff;
    font-family: var(--m12-font-brush);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    transform: rotate(-1.5deg);
    letter-spacing: 0.05em;
    border-radius: 2px;
    flex-shrink: 0;
}
.m12-seal-sm { min-width: 22px; height: 22px; font-size: 13px; padding: 3px 5px; }
.m12-seal-lg { min-width: 38px; height: 38px; font-size: 22px; padding: 5px 10px; }
.m12-seal-gold { background: var(--m12-gold); }
.m12-seal-jade { background: var(--m12-jade); }

/* ─────── reusable: 鎏金线 hairline rules ─────── */
.m12-rule {
    height: 1px;
    background: var(--m12-line);
    border: 0;
    margin: 16px 0;
    width: 100%;
}
.m12-rule-short {
    width: 64px;
    height: 1px;
    background: var(--m12-gold);
    margin: 18px auto;
    opacity: 0.85;
}
.m12-rule-section {
    margin: 80px auto;
    max-width: 200px;
    background: var(--m12-line);
}
.m12-rule-footer {
    margin: 56px 0 24px;
    background: rgba(184, 146, 74, 0.22);
}

/* ─────── reusable: 回纹装饰带 fret pattern ─────── */
.m12-fret {
    height: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'><g fill='none' stroke='%23b8924a' stroke-width='1' opacity='0.45'><path d='M0 21 L0 4 L8 4 L8 14 L14 14 L14 8 L20 8 L20 18 L4 18'/><path d='M22 21 L22 4 L30 4 L30 14 L36 14 L36 8 L42 8 L42 18 L26 18'/></g></svg>");
    background-repeat: repeat-x;
    background-size: auto 22px;
    width: 100%;
    opacity: 0.7;
}
.m12-fret-divider {
    padding: 56px 0;
}
.m12-fret-top {
    border-bottom: 1px solid rgba(184, 146, 74, 0.18);
}

/* ─────── reusable: 金箔角标 corner brackets ─────── */
.m12-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
}
.m12-corner-tl { top: -1px; left: -1px; border-top: 1px solid var(--m12-gold); border-left: 1px solid var(--m12-gold); }
.m12-corner-tr { top: -1px; right: -1px; border-top: 1px solid var(--m12-gold); border-right: 1px solid var(--m12-gold); }
.m12-corner-bl { bottom: -1px; left: -1px; border-bottom: 1px solid var(--m12-gold); border-left: 1px solid var(--m12-gold); }
.m12-corner-br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--m12-gold); border-right: 1px solid var(--m12-gold); }

/* ─────── reusable: eyebrow ─────── */
.m12-eyebrow {
    display: inline-block;
    font-family: var(--m12-font-latin);
    font-size: 12px;
    font-weight: 500;
    color: var(--m12-gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 6px;
}

/* ─────── reusable: section heading ─────── */
.m12-section-h {
    text-align: center;
    margin-bottom: 64px;
}
.m12-section-h-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
    gap: 32px;
}
.m12-section-h-row .m12-rule-short { margin-left: 0; }
.m12-section-title {
    font-family: var(--m12-font-display);
    font-size: 40px;
    font-weight: 400;
    color: var(--m12-ink);
    letter-spacing: 0.05em;
    margin: 4px 0 0;
}
.m12-section-sub {
    font-family: var(--m12-font-latin);
    font-size: 13px;
    color: var(--m12-ink-3);
    letter-spacing: 0.12em;
    margin: 8px 0 0;
    font-style: italic;
}
.m12-more-link {
    font-family: var(--m12-font-latin);
    font-size: 13px;
    color: var(--m12-gold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    align-self: flex-end;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--m12-line);
}
.m12-more-link:hover { color: var(--m12-gold-h); border-bottom-color: var(--m12-gold-h); }

/* ─────── section ─────── */
.m12-section { padding: 112px 0; }
.m12-section-featured { background: var(--m12-bg); }
.m12-section-about { background: var(--m12-bg-2); }
.m12-section-detail { padding-top: 80px; padding-bottom: 80px; }
.m12-section-recommend { padding-top: 80px; }

/* ─────── reusable: buttons ─────── */
.m12-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-family: var(--m12-font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    border-radius: 3px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .3s ease;
    white-space: nowrap;
}
.m12-btn-primary {
    background: var(--m12-vermilion);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.m12-btn-primary:hover {
    background: var(--m12-vermilion-h);
    transform: rotate(-0.5deg) translateY(-1px);
}
.m12-btn-outline {
    background: transparent;
    color: var(--m12-gold-h);
    border-color: var(--m12-gold);
}
.m12-btn-outline:hover {
    background: var(--m12-gold);
    color: #fff;
}
.m12-btn-light {
    background: #fff;
    color: var(--m12-vermilion);
    border-color: #fff;
}
.m12-btn-light:hover {
    background: var(--m12-bg);
}
.m12-btn-block { width: 100%; }

/* ─────── reusable: links ─────── */
.m12-link-gold {
    color: var(--m12-gold);
    font-family: var(--m12-font-latin);
    font-size: 13px;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--m12-line);
    padding-bottom: 2px;
}
.m12-link-gold:hover { color: var(--m12-gold-h); border-bottom-color: var(--m12-gold-h); }
.m12-link-vermilion { color: var(--m12-vermilion); font-weight: 500; }
.m12-link-vermilion:hover { color: var(--m12-vermilion-h); }

/* ─────── HEADER ─────── */
.m12-mast {
    background: var(--m12-bg);
    border-bottom: 1px solid var(--m12-line);
}

/* utility bar */
.m12-utility {
    background: var(--m12-bg-2);
    border-bottom: 1px solid var(--m12-line);
    font-size: 12px;
    color: var(--m12-ink-2);
}
.m12-utility-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    gap: 24px;
}
.m12-utility-left, .m12-utility-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.m12-utility-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.m12-utility-cap {
    font-family: var(--m12-font-latin);
    font-size: 11px;
    color: var(--m12-gold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.m12-utility-label { color: var(--m12-ink-2); }
.m12-utility-sep { color: var(--m12-line-strong); }
.m12-utility-link { color: var(--m12-ink-2); }
.m12-utility-link:hover { color: var(--m12-vermilion); }
.m12-utility-tel strong {
    font-family: var(--m12-font-body);
    color: var(--m12-vermilion);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}

/* brand row */
.m12-brand-row {
    padding: 40px 0 32px;
    text-align: center;
}
.m12-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    position: relative;
}
.m12-brand-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}
.m12-brand-text {
    text-align: center;
}
.m12-brand-eyebrow {
    display: block;
    font-family: var(--m12-font-latin);
    font-size: 11px;
    color: var(--m12-gold);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.m12-brand-text .m12-rule-short { margin: 6px auto; width: 48px; }
.m12-brand-title {
    font-family: var(--m12-font-display);
    font-size: 32px;
    font-weight: 400;
    color: var(--m12-ink);
    letter-spacing: 0.06em;
    margin: 4px 0 4px;
}
.m12-brand-tagline {
    font-size: 13px;
    color: var(--m12-ink-3);
    margin: 0;
    letter-spacing: 0.04em;
}
.m12-brand .m12-seal-lg {
    align-self: flex-start;
    margin-top: 4px;
}

/* main nav */
.m12-nav {
    border-top: 1px solid var(--m12-line);
}
.m12-nav-inner {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.m12-nav-inner a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px;
    font-size: 14px;
    color: var(--m12-ink-2);
    border-bottom: 2px solid transparent;
    transition: all .25s ease;
    line-height: 1.3;
}
.m12-nav-cn {
    font-family: var(--m12-font-display);
    font-size: 16px;
    letter-spacing: 0.08em;
}
.m12-nav-en {
    font-family: var(--m12-font-latin);
    font-size: 10px;
    color: var(--m12-ink-4);
    letter-spacing: 0.18em;
    margin-top: 2px;
    text-transform: uppercase;
}
.m12-nav-inner a:hover {
    color: var(--m12-vermilion);
}
.m12-nav-inner a:hover .m12-nav-en { color: var(--m12-gold); }
.m12-nav-inner a.is-active {
    color: var(--m12-vermilion);
    border-bottom-color: var(--m12-gold);
}
.m12-nav-inner a.is-active .m12-nav-en { color: var(--m12-gold); }

/* ─────── trust band ─────── */
.m12-trustband {
    background: var(--m12-bg-2);
    border-bottom: 1px solid var(--m12-line);
    padding: 14px 0;
}
.m12-trustband-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--m12-ink-2);
}
.m12-trustband-list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
.m12-trustband-list li:not(:last-child)::after {
    content: '·';
    color: var(--m12-gold);
    margin-left: 24px;
    opacity: 0.6;
}
.m12-trustband-cap {
    font-family: var(--m12-font-latin);
    font-size: 11px;
    color: var(--m12-gold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.m12-trustband-tel a {
    color: var(--m12-vermilion);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}

/* ─────── HERO ─────── */
.m12-hero {
    padding: 96px 0 80px;
    background: var(--m12-bg);
}
.m12-hero-card {
    position: relative;
    background: var(--m12-card);
    border: 1px solid var(--m12-line);
    padding: 96px 80px;
}
.m12-hero-inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.m12-display {
    font-family: var(--m12-font-display);
    font-size: 76px;
    font-weight: 400;
    color: var(--m12-ink);
    letter-spacing: 0.1em;
    line-height: 1.15;
    margin: 12px 0 16px;
}
.m12-hero-subtitle {
    font-family: var(--m12-font-latin);
    font-size: 16px;
    color: var(--m12-gold);
    letter-spacing: 0.18em;
    margin: 0 0 24px;
    font-style: italic;
}
.m12-hero-lead {
    font-size: 15px;
    color: var(--m12-ink-2);
    line-height: 1.95;
    margin: 0 auto 40px;
    max-width: 600px;
    letter-spacing: 0.02em;
}
.m12-hero-cta {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 0 0 56px;
    flex-wrap: wrap;
}
.m12-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 32px 0 0;
    border-top: 1px solid var(--m12-line);
}
.m12-stat {
    flex: 1;
    text-align: center;
    padding: 0 16px;
}
.m12-stat strong {
    display: block;
    font-family: var(--m12-font-display);
    font-size: 32px;
    font-weight: 400;
    color: var(--m12-vermilion);
    letter-spacing: 0.04em;
    margin: 0 0 4px;
    font-variant-numeric: tabular-nums;
}
.m12-stat-cn {
    display: block;
    font-size: 13px;
    color: var(--m12-ink-2);
    letter-spacing: 0.05em;
}
.m12-stat-en {
    display: block;
    font-family: var(--m12-font-latin);
    font-size: 10px;
    color: var(--m12-gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 2px;
}
.m12-stat-divider {
    width: 1px;
    height: 48px;
    background: var(--m12-line);
}

/* ─────── 分类入口 ─────── */
.m12-cates {
    padding: 80px 0;
}
.m12-cates-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.m12-cates-list li a {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    font-size: 14px;
    color: var(--m12-ink-2);
    background: var(--m12-card);
    border: 1px solid var(--m12-line);
    border-radius: 2px;
    letter-spacing: 0.06em;
}
.m12-cates-list li a:hover {
    color: var(--m12-vermilion);
    border-color: var(--m12-vermilion);
    background: #fff;
}

/* ─────── 产品 grid + cards ─────── */
.m12-grid {
    display: grid;
    gap: 24px;
}
.m12-grid-4 { grid-template-columns: repeat(4, 1fr); }
.m12-grid-dense { gap: 20px; }

.m12-lattice {
    position: relative;
    padding: 4px;
}
.m12-lattice::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--m12-line);
    pointer-events: none;
}

.m12-card {
    display: flex;
    flex-direction: column;
    background: var(--m12-card);
    border: 1px solid var(--m12-line);
    border-radius: 2px;
    overflow: hidden;
    transition: all .3s ease;
    position: relative;
}
.m12-card:hover {
    border-color: var(--m12-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(184, 146, 74, 0.10);
}
.m12-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--m12-bg-2);
}
.m12-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.m12-card:hover .m12-card-img img { transform: scale(1.04); }
.m12-card-seal {
    position: absolute;
    top: 12px;
    right: 12px;
}
.m12-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.m12-card-title {
    font-family: var(--m12-font-display);
    font-size: 16px;
    font-weight: 400;
    color: var(--m12-ink);
    line-height: 1.45;
    letter-spacing: 0.03em;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}
.m12-card-meta {
    font-size: 12px;
    color: var(--m12-ink-3);
    margin: 0 0 12px;
    letter-spacing: 0.04em;
}
.m12-card-foot {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}
.m12-card-price {
    font-family: var(--m12-font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--m12-vermilion);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.m12-card-unit {
    font-size: 12px;
    color: var(--m12-ink-3);
}
.m12-card-moq {
    margin-left: auto;
    font-family: var(--m12-font-latin);
    font-size: 11px;
    color: var(--m12-gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.m12-card-cta {
    display: inline-block;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--m12-line);
    font-family: var(--m12-font-latin);
    font-size: 12px;
    color: var(--m12-vermilion);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.m12-card-featured .m12-card-title { font-size: 17px; }

/* ─────── prose ─────── */
.m12-prose {
    font-size: 15px;
    line-height: 1.95;
    color: var(--m12-ink-2);
    max-width: 880px;
    margin: 0 auto;
}
.m12-prose-narrow { max-width: 720px; }
.m12-prose-center { text-align: center; }
.m12-prose p { margin: 0 0 1.4em; }
.m12-prose img { margin: 24px auto; max-width: 100%; }
.m12-prose h2, .m12-prose h3 {
    font-family: var(--m12-font-display);
    color: var(--m12-ink);
    font-weight: 400;
    margin: 36px 0 16px;
    letter-spacing: 0.04em;
}
.m12-prose h2 { font-size: 28px; }
.m12-prose h3 { font-size: 20px; }
.m12-prose strong { font-weight: 700; color: var(--m12-ink); }
.m12-prose a { color: var(--m12-vermilion); border-bottom: 1px solid var(--m12-line); }
.m12-prose a:hover { color: var(--m12-vermilion-h); border-bottom-color: var(--m12-vermilion); }
.m12-prose-stamp {
    text-align: center;
    margin: 40px 0 20px;
}
.m12-prose-more {
    text-align: center;
    margin-top: 32px;
}
.m12-prose-empty {
    color: var(--m12-ink-3);
    text-align: center;
    padding: 48px 0;
}

/* ─────── CTA strip ─────── */
.m12-cta-strip {
    background: var(--m12-vermilion);
    padding: 56px 0;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.m12-cta-strip-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.m12-cta-strip-text {
    font-family: var(--m12-font-display);
    font-size: 28px;
    color: #fff;
    letter-spacing: 0.12em;
    margin: 0;
}
.m12-cta-strip-tel {
    margin: 0;
    padding: 0;
}
.m12-cta-strip-tel a {
    font-family: var(--m12-font-display);
    font-size: 36px;
    color: #f5d68f;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid rgba(245, 214, 143, 0.4);
    padding-bottom: 4px;
}
.m12-cta-strip-tel a:hover { color: #fff; border-bottom-color: #fff; }

/* ─────── breadcrumb ─────── */
.m12-crumb {
    background: var(--m12-bg-2);
    border-bottom: 1px solid var(--m12-line);
    padding: 14px 0;
}
.m12-crumb-list {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--m12-font-latin);
    font-size: 12px;
    color: var(--m12-ink-3);
    letter-spacing: 0.12em;
    flex-wrap: wrap;
}
.m12-crumb-list a { color: var(--m12-ink-2); }
.m12-crumb-list a:hover { color: var(--m12-vermilion); }
.m12-crumb-sep { color: var(--m12-gold); }
.m12-crumb-current { color: var(--m12-vermilion); }

/* ─────── product detail ─────── */
.m12-prod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}
.m12-prod-gallery { position: sticky; top: 24px; }
.m12-prod-img-main {
    position: relative;
    background: var(--m12-card);
    border: 1px solid var(--m12-line);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 16px;
}
.m12-prod-img-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 32px;
}
.m12-prod-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.m12-prod-thumb {
    background: var(--m12-card);
    border: 1px solid var(--m12-line);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .25s ease;
}
.m12-prod-thumb:hover { border-color: var(--m12-vermilion); }
.m12-prod-thumb img { width: 100%; height: 100%; object-fit: cover; }

.m12-prod-info { padding: 8px 0; }
.m12-prod-seals {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.m12-prod-title {
    font-family: var(--m12-font-display);
    font-size: 30px;
    font-weight: 400;
    color: var(--m12-ink);
    letter-spacing: 0.04em;
    line-height: 1.4;
    margin: 0 0 24px;
}
.m12-prod-price-box {
    background: var(--m12-bg-2);
    border: 1px solid var(--m12-line);
    padding: 24px 28px;
    margin-bottom: 32px;
    border-left: 3px solid var(--m12-vermilion);
}
.m12-prod-price-cap {
    display: block;
    font-family: var(--m12-font-latin);
    font-size: 11px;
    color: var(--m12-gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.m12-prod-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.m12-prod-price-cur {
    font-family: var(--m12-font-display);
    font-size: 24px;
    color: var(--m12-vermilion);
}
.m12-prod-price-num {
    font-family: var(--m12-font-display);
    font-size: 40px;
    color: var(--m12-vermilion);
    font-weight: 400;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.m12-prod-price-unit {
    font-size: 13px;
    color: var(--m12-ink-3);
    margin-left: 6px;
}
.m12-prod-attrs {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0;
    margin: 0 0 32px;
    border-top: 1px solid var(--m12-line);
}
.m12-prod-attrs dt,
.m12-prod-attrs dd {
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--m12-line);
    font-size: 14px;
}
.m12-prod-attrs dt {
    color: var(--m12-ink-3);
    font-family: var(--m12-font-display);
    letter-spacing: 0.05em;
}
.m12-prod-attrs dd { color: var(--m12-ink); }

.m12-prod-cta { margin-bottom: 32px; }
.m12-prod-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.m12-supplier-card {
    position: relative;
    padding: 24px 28px;
    background: var(--m12-bg-2);
    border: 1px solid var(--m12-line);
    text-align: center;
}
.m12-supplier-eyebrow {
    display: block;
    font-family: var(--m12-font-latin);
    font-size: 11px;
    color: var(--m12-gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.m12-supplier-name {
    font-family: var(--m12-font-display);
    font-size: 18px;
    color: var(--m12-ink);
    margin: 0 0 6px;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.m12-supplier-meta {
    font-size: 13px;
    color: var(--m12-ink-3);
    margin: 0 0 14px;
}

/* tab nav */
.m12-tabnav {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid var(--m12-line);
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.m12-tab {
    padding: 14px 0;
    font-family: var(--m12-font-display);
    font-size: 16px;
    color: var(--m12-ink-3);
    letter-spacing: 0.06em;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.m12-tab.is-active {
    color: var(--m12-vermilion);
    border-bottom-color: var(--m12-gold);
}

/* ─────── supply ─────── */
.m12-supply-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
}
.m12-supply-side {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.m12-side-card {
    position: relative;
    padding: 24px 24px;
    background: var(--m12-card);
    border: 1px solid var(--m12-line);
}
.m12-side-eyebrow {
    display: block;
    font-family: var(--m12-font-latin);
    font-size: 11px;
    color: var(--m12-gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.m12-side-h {
    font-family: var(--m12-font-display);
    font-size: 18px;
    font-weight: 400;
    color: var(--m12-ink);
    letter-spacing: 0.04em;
    margin: 0 0 4px;
}
.m12-side-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}
.m12-side-list li a {
    display: block;
    padding: 10px 12px;
    color: var(--m12-ink-2);
    border-left: 2px solid transparent;
    letter-spacing: 0.04em;
    transition: all .2s ease;
}
.m12-side-list li a:hover {
    color: var(--m12-vermilion);
    background: var(--m12-bg-2);
    border-left-color: var(--m12-gold);
}
.m12-side-list li a.is-active {
    color: var(--m12-vermilion);
    background: var(--m12-bg-2);
    border-left-color: var(--m12-vermilion);
    font-weight: 500;
}
.m12-side-tel {
    font-family: var(--m12-font-display);
    font-size: 22px;
    color: var(--m12-vermilion);
    margin: 12px 0 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
.m12-side-tel a { color: inherit; }
.m12-side-tel a:hover { color: var(--m12-vermilion-h); }
.m12-side-text {
    font-size: 12px;
    color: var(--m12-ink-3);
    margin: 0 0 14px;
}

.m12-supply-main { min-width: 0; }
.m12-sortbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: var(--m12-card);
    border: 1px solid var(--m12-line);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.m12-sortbar-cap {
    font-family: var(--m12-font-latin);
    font-size: 11px;
    color: var(--m12-gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.m12-sortbar-link {
    font-size: 13px;
    color: var(--m12-ink-2);
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    letter-spacing: 0.05em;
}
.m12-sortbar-link:hover, .m12-sortbar-link.is-active {
    color: var(--m12-vermilion);
    border-bottom-color: var(--m12-vermilion);
}
.m12-sortbar-total {
    margin-left: auto;
    font-size: 12px;
    color: var(--m12-ink-3);
    font-family: var(--m12-font-latin);
    letter-spacing: 0.08em;
}

.m12-pager {
    margin-top: 56px;
    text-align: center;
}
.m12-pager a, .m12-pager span {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 2px;
    border: 1px solid var(--m12-line);
    color: var(--m12-ink-2);
    background: var(--m12-card);
    font-size: 13px;
    text-decoration: none;
    transition: all .2s ease;
}
.m12-pager a:hover { color: var(--m12-vermilion); border-color: var(--m12-vermilion); }
.m12-pager .current, .m12-pager .active {
    background: var(--m12-vermilion);
    border-color: var(--m12-vermilion);
    color: #fff;
}

.m12-empty {
    padding: 96px 0;
    text-align: center;
}
.m12-empty-text {
    font-family: var(--m12-font-display);
    font-size: 20px;
    color: var(--m12-ink-3);
    margin-bottom: 16px;
}

/* ─────── information page ─────── */
.m12-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 56px;
}
.m12-info-card {
    position: relative;
    padding: 28px 20px;
    background: var(--m12-card);
    border: 1px solid var(--m12-line);
    text-align: center;
}
.m12-info-eyebrow {
    display: block;
    font-family: var(--m12-font-latin);
    font-size: 10px;
    color: var(--m12-gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.m12-info-strong {
    font-family: var(--m12-font-display);
    font-size: 38px;
    color: var(--m12-vermilion);
    margin: 0 0 6px;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
.m12-info-strong-cn { font-size: 22px; }
.m12-info-text {
    font-size: 12px;
    color: var(--m12-ink-3);
    margin: 0;
    letter-spacing: 0.04em;
}
.m12-info-cta {
    text-align: center;
    padding: 24px 0;
}
.m12-info-cta p {
    font-family: var(--m12-font-display);
    font-size: 22px;
    color: var(--m12-ink);
    margin-bottom: 24px;
    letter-spacing: 0.06em;
}
.m12-info-cta .m12-btn { margin: 0 6px 8px; }

/* ─────── contact ─────── */
.m12-contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: start;
}
.m12-contact-info, .m12-contact-qr {
    position: relative;
    padding: 32px 36px;
    background: var(--m12-card);
    border: 1px solid var(--m12-line);
}
.m12-contact-dl {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0;
    margin: 16px 0 0;
}
.m12-contact-dl dt, .m12-contact-dl dd {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--m12-line);
    font-size: 14px;
}
.m12-contact-dl dt {
    color: var(--m12-ink-3);
    font-family: var(--m12-font-display);
    letter-spacing: 0.06em;
}
.m12-contact-dl dd { color: var(--m12-ink); }
.m12-contact-cta {
    margin-top: 32px;
}
.m12-contact-qr { text-align: center; }
.m12-contact-qr-img {
    margin: 16px auto 16px;
    aspect-ratio: 1 / 1;
    max-width: 240px;
    border: 1px solid var(--m12-line);
    background: var(--m12-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.m12-contact-qr-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.m12-contact-qr-empty {
    color: var(--m12-ink-3);
    font-size: 13px;
}
.m12-contact-qr-note {
    font-size: 12px;
    color: var(--m12-ink-3);
    margin: 16px 0 0;
    letter-spacing: 0.05em;
}

/* ─────── news list ─────── */
.m12-news-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.m12-news-item {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 32px;
    padding: 32px 24px;
    border-bottom: 1px solid var(--m12-line);
    border-left: 3px solid var(--m12-gold);
    background: var(--m12-card);
    margin-bottom: 16px;
    transition: all .25s ease;
}
.m12-news-item:hover {
    border-left-color: var(--m12-vermilion);
    transform: translateX(2px);
}
.m12-news-date {
    text-align: center;
    border-right: 1px solid var(--m12-line);
    padding-right: 24px;
}
.m12-news-date-en {
    display: block;
    font-family: var(--m12-font-latin);
    font-size: 11px;
    color: var(--m12-gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.m12-news-date-day {
    display: block;
    font-family: var(--m12-font-display);
    font-size: 38px;
    color: var(--m12-vermilion);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    margin: 4px 0;
}
.m12-news-date-cn {
    display: block;
    font-size: 12px;
    color: var(--m12-ink-3);
}
.m12-news-title {
    display: block;
    font-family: var(--m12-font-display);
    font-size: 22px;
    color: var(--m12-ink);
    letter-spacing: 0.04em;
    margin: 0 0 10px;
    transition: color .2s ease;
}
.m12-news-title:hover { color: var(--m12-vermilion); }
.m12-news-summary {
    font-size: 14px;
    color: var(--m12-ink-2);
    margin: 0 0 12px;
    line-height: 1.85;
}
.m12-news-more {
    font-family: var(--m12-font-latin);
    font-size: 12px;
    color: var(--m12-gold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* news detail */
.m12-news-detail-h {
    text-align: center;
    margin-bottom: 56px;
}
.m12-news-detail-title {
    font-family: var(--m12-font-display);
    font-size: 36px;
    font-weight: 400;
    color: var(--m12-ink);
    letter-spacing: 0.04em;
    line-height: 1.4;
    margin: 12px 0 16px;
}
.m12-news-detail-meta {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    color: var(--m12-ink-3);
    flex-wrap: wrap;
}
.m12-meta-cap {
    font-family: var(--m12-font-latin);
    font-size: 10px;
    color: var(--m12-gold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-right: 4px;
}
.m12-meta-sep { color: var(--m12-gold); }
.m12-news-detail-back {
    text-align: center;
    margin-top: 48px;
}

/* ─────── sitemap ─────── */
.m12-sitemap-card {
    position: relative;
    padding: 32px 36px;
    background: var(--m12-card);
    border: 1px solid var(--m12-line);
    margin-bottom: 32px;
}
.m12-sitemap-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 14px;
    margin-top: 12px;
}
.m12-sitemap-list li {
    border-bottom: 1px dotted var(--m12-line);
}
.m12-sitemap-list li a {
    display: block;
    padding: 10px 0;
    color: var(--m12-ink-2);
    letter-spacing: 0.04em;
    transition: all .2s ease;
}
.m12-sitemap-list li a:hover {
    color: var(--m12-vermilion);
    padding-left: 8px;
}
.m12-sitemap-list-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 24px;
}

/* ─────── FOOTER ─────── */
.m12-footer {
    background: var(--m12-ink);
    color: rgba(250, 246, 237, 0.78);
    margin-top: 64px;
    position: relative;
}
.m12-fret-top {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'><g fill='none' stroke='%23b8924a' stroke-width='1' opacity='0.5'><path d='M0 21 L0 4 L8 4 L8 14 L14 14 L14 8 L20 8 L20 18 L4 18'/><path d='M22 21 L22 4 L30 4 L30 14 L36 14 L36 8 L42 8 L42 18 L26 18'/></g></svg>");
    background-color: #2a2218;
    border-bottom: 1px solid rgba(184, 146, 74, 0.25);
}
.m12-footer .m12-shell { padding-top: 64px; padding-bottom: 32px; }
.m12-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 48px;
    margin-bottom: 16px;
}
.m12-footer-col-brand { padding-right: 16px; }
.m12-footer-eyebrow {
    display: block;
    font-family: var(--m12-font-latin);
    font-size: 11px;
    color: var(--m12-gold);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.m12-footer-title {
    font-family: var(--m12-font-display);
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
}
.m12-footer-text {
    font-size: 13px;
    line-height: 1.85;
    color: rgba(250, 246, 237, 0.65);
    margin: 0 0 16px;
}
.m12-footer-verified {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(250, 246, 237, 0.78);
    margin: 0;
}
.m12-footer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}
.m12-footer-list li a {
    color: rgba(250, 246, 237, 0.7);
    letter-spacing: 0.04em;
}
.m12-footer-list li a:hover { color: var(--m12-gold); }
.m12-footer-list-info li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}
.m12-footer-cap {
    font-family: var(--m12-font-latin);
    font-size: 10px;
    color: var(--m12-gold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.m12-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(250, 246, 237, 0.5);
    flex-wrap: wrap;
    gap: 12px;
}
.m12-footer-bottom p { margin: 0; }
.m12-footer-poweredby {
    font-family: var(--m12-font-latin);
    letter-spacing: 0.12em;
}

/* ─────── responsive ─────── */
@media (max-width: 1024px) {
    .m12-shell { padding: 0 24px; }
    .m12-display { font-size: 56px; }
    .m12-section { padding: 80px 0; }
    .m12-section-title { font-size: 32px; }
    .m12-hero-card { padding: 64px 40px; }
    .m12-grid-4 { grid-template-columns: repeat(3, 1fr); }
    .m12-prod-grid { grid-template-columns: 1fr; gap: 32px; }
    .m12-prod-gallery { position: static; }
    .m12-supply-layout { grid-template-columns: 1fr; gap: 32px; }
    .m12-supply-side { position: static; flex-direction: row; }
    .m12-supply-side .m12-side-card { flex: 1; }
    .m12-info-grid { grid-template-columns: repeat(2, 1fr); }
    .m12-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .m12-contact-grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 768px) {
    .m12-shell { padding: 0 16px; }
    .m12-display { font-size: 40px; }
    .m12-section { padding: 56px 0; }
    .m12-section-title { font-size: 26px; }
    .m12-hero { padding: 48px 0; }
    .m12-hero-card { padding: 40px 20px; }
    .m12-hero-cta { gap: 10px; }
    .m12-btn { padding: 12px 20px; font-size: 13px; }
    .m12-utility-row {
        flex-direction: column;
        height: auto;
        padding: 8px 0;
        gap: 6px;
        font-size: 11px;
    }
    .m12-utility-left, .m12-utility-right { gap: 8px; }
    .m12-brand-row { padding: 24px 0 20px; }
    .m12-brand { flex-direction: column; gap: 12px; }
    .m12-brand-title { font-size: 24px; }
    .m12-nav-inner {
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }
    .m12-nav-inner::-webkit-scrollbar { display: none; }
    .m12-nav-inner a { padding: 12px 14px; flex-shrink: 0; }
    .m12-nav-cn { font-size: 14px; }
    .m12-trustband-list { gap: 12px; font-size: 11px; }
    .m12-trustband-list li:not(:last-child)::after { margin-left: 12px; }
    .m12-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .m12-section-h-row { flex-direction: column; align-items: flex-start; gap: 16px; }
    .m12-hero-stats { flex-wrap: wrap; gap: 16px; }
    .m12-stat-divider { display: none; }
    .m12-stat strong { font-size: 24px; }
    .m12-prod-title { font-size: 22px; }
    .m12-prod-price-num { font-size: 32px; }
    .m12-prod-cta-row { grid-template-columns: 1fr; }
    .m12-supply-side { flex-direction: column; }
    .m12-info-grid { grid-template-columns: 1fr; }
    .m12-footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .m12-footer-bottom { flex-direction: column; align-items: flex-start; }
    .m12-news-item { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
    .m12-news-date {
        display: flex;
        align-items: baseline;
        gap: 12px;
        text-align: left;
        border-right: 0;
        border-bottom: 1px solid var(--m12-line);
        padding: 0 0 12px;
    }
    .m12-news-date-day { font-size: 28px; }
    .m12-news-title { font-size: 18px; }
    .m12-cta-strip-text { font-size: 22px; }
    .m12-cta-strip-tel a { font-size: 26px; }
    .m12-sitemap-list-2col { grid-template-columns: 1fr; }
    .m12-contact-dl { grid-template-columns: 80px 1fr; }
    .m12-prod-attrs { grid-template-columns: 70px 1fr; }
    .m12-tabnav { gap: 16px; }
    .m12-tab { font-size: 14px; }
}