/*
Theme Name: YUJI gp-child
Theme URI: https://dmsoglobal.com
Description: 子主题 for GeneratePress. 木火配色：深松绿 + 赭石朱砂 + 宣纸米白.
Author: YUJI
Template: generatepress
Version: 1.0.0
*/

/* ============ CSS 变量（五行木火配色） ============ */
:root {
    --yuji-pine: #2C5F48;        /* 主色 深松墨绿（木） */
    --yuji-pine-dark: #1E4232;   /* 深主色 Hero/CTA */
    --yuji-pine-light: #3A7A5E;  /* 浅松绿 */
    --yuji-ochre: #C4573A;       /* 强调色 赭石朱砂（火） */
    --yuji-ochre-dark: #A84429;  /* 深赭石 */
    --yuji-paper: #F7F3EB;       /* 底色 宣纸米白 */
    --yuji-paper-deep: #EFE9DC;  /* 稍深米白（间隔区块） */
    --yuji-gold: #C9A063;        /* 暖金点缀 */
    --yuji-ink: #2A2520;         /* 正文暖灰黑 */
    --yuji-muted: #6B6560;       /* 次要文字 */
    --yuji-white: #FFFFFF;
    --yuji-border: #E5DFD3;
    --yuji-radius: 16px;
    --yuji-radius-sm: 8px;
    --yuji-shadow: 0 2px 12px rgba(44, 95, 72, 0.08);
    --yuji-shadow-hover: 0 8px 28px rgba(44, 95, 72, 0.14);
}

/* ============ 基础 ============ */
body {
    background-color: var(--yuji-paper);
    color: var(--yuji-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.7;
}

h1, h2, h3, h4 {
    color: var(--yuji-pine);
    font-weight: 700;
    line-height: 1.25;
}

a {
    color: var(--yuji-ochre);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: var(--yuji-ochre-dark);
}

/* ============ 顶部导航 ============ */
.main-navigation {
    background-color: var(--yuji-white);
    border-bottom: 1px solid var(--yuji-border);
}
.main-navigation .main-nav ul li a {
    color: var(--yuji-ink);
    font-weight: 500;
}
.main-navigation .main-nav ul li a:hover {
    color: var(--yuji-pine);
}
.main-navigation .main-nav ul li a[href*="contact"] {
    background-color: var(--yuji-ochre);
    color: var(--yuji-white);
    border-radius: var(--yuji-radius-sm);
    padding: 8px 20px;
    margin-left: 12px;
}
.main-navigation .main-nav ul li a[href*="contact"]:hover {
    background-color: var(--yuji-ochre-dark);
    color: var(--yuji-white);
}
.main-title {
    color: var(--yuji-pine) !important;
    font-weight: 800;
}

/* ============ Hero ============ */
.yuji-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--yuji-pine-dark) 0%, var(--yuji-pine) 60%, rgba(44,95,72,0.85) 100%);
    background-size: cover;
    background-position: center;
    color: var(--yuji-white);
    padding: 80px 0;
}
.yuji-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(30,66,50,0.92) 0%, rgba(30,66,50,0.5) 60%, rgba(30,66,50,0.2) 100%);
}
.yuji-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}
.yuji-hero__eyebrow {
    color: var(--yuji-gold);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.yuji-hero h1 {
    color: var(--yuji-white);
    font-size: 48px;
    font-weight: 800;
    max-width: 700px;
    margin-bottom: 20px;
}
.yuji-hero__sub {
    color: rgba(255,255,255,0.85);
    font-size: 18px;
    max-width: 560px;
    margin-bottom: 32px;
}

/* ============ 按钮 ============ */
.yuji-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: var(--yuji-radius-sm);
    font-weight: 600;
    font-size: 16px;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}
.yuji-btn--outline {
    background: transparent;
    color: var(--yuji-white);
    border: 2px solid rgba(255,255,255,0.7);
}
.yuji-btn--outline:hover {
    background: rgba(255,255,255,0.1);
    color: var(--yuji-white);
}
.yuji-btn--primary {
    background: var(--yuji-pine);
    color: var(--yuji-white);
}
.yuji-btn--primary:hover {
    background: var(--yuji-pine-dark);
    color: var(--yuji-white);
}
.yuji-btn--accent {
    background: var(--yuji-ochre);
    color: var(--yuji-white);
}
.yuji-btn--accent:hover {
    background: var(--yuji-ochre-dark);
    color: var(--yuji-white);
}

/* ============ 通用区块 ============ */
.yuji-section {
    padding: 80px 0;
}
.yuji-section--paper {
    background: var(--yuji-paper);
}
.yuji-section--paper-deep {
    background: var(--yuji-paper-deep);
}
.yuji-section--white {
    background: var(--yuji-white);
}
.yuji-eyebrow {
    color: var(--yuji-ochre);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 12px;
}
.yuji-section-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 48px;
}

/* ============ Grade Selection 卡片 ============ */
.yuji-grade-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.yuji-grade-card {
    background: var(--yuji-white);
    border-radius: var(--yuji-radius);
    padding: 32px 28px;
    box-shadow: var(--yuji-shadow);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}
.yuji-grade-card:hover {
    box-shadow: var(--yuji-shadow-hover);
    transform: translateY(-4px);
}
.yuji-grade-card__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--yuji-pine);
    margin-bottom: 20px;
}
.yuji-grade-card__rows {
    flex: 1;
    margin-bottom: 24px;
}
.yuji-grade-row {
    background: var(--yuji-paper);
    border-radius: var(--yuji-radius-sm);
    padding: 12px 16px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--yuji-ink);
    transition: all 0.2s;
    cursor: default;
}
.yuji-grade-row:hover {
    background: var(--yuji-paper-deep);
    padding-left: 20px;
}
.yuji-grade-card__link {
    color: var(--yuji-ochre);
    font-weight: 600;
    font-size: 14px;
}

/* ============ How We Work ============ */
.yuji-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}
.yuji-step {
    text-align: center;
    flex: 1;
    position: relative;
}
.yuji-step__circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--yuji-pine) 0%, var(--yuji-gold) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--yuji-white);
    font-size: 28px;
    font-weight: 800;
    box-shadow: var(--yuji-shadow);
}
.yuji-step__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--yuji-pine);
    margin-bottom: 8px;
}
.yuji-step__desc {
    font-size: 14px;
    color: var(--yuji-muted);
    max-width: 200px;
    margin: 0 auto;
}
.yuji-step::after {
    content: "";
    position: absolute;
    top: 60px;
    right: -50%;
    width: 100%;
    border-top: 2px dashed var(--yuji-ochre);
    z-index: -1;
}
.yuji-step:last-child::after {
    display: none;
}

/* ============ AppHub 文章卡片 ============ */
.yuji-articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.yuji-article-card {
    background: var(--yuji-white);
    border: 1px solid var(--yuji-border);
    border-radius: var(--yuji-radius);
    overflow: hidden;
    transition: all 0.3s;
}
.yuji-article-card:hover {
    box-shadow: var(--yuji-shadow-hover);
    transform: translateY(-4px);
}
.yuji-article-card__thumb {
    height: 160px;
    background: var(--yuji-paper-deep);
}
.yuji-article-card__body {
    padding: 20px;
}
.yuji-article-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--yuji-pine);
    margin-bottom: 8px;
}
.yuji-article-card__excerpt {
    font-size: 14px;
    color: var(--yuji-muted);
    margin-bottom: 12px;
}
.yuji-article-card__tag {
    font-size: 12px;
    color: var(--yuji-ochre);
    font-weight: 600;
}
.yuji-view-all {
    text-align: right;
    max-width: 1200px;
    margin: 0 auto 24px;
    padding: 0 24px;
}

/* ============ CTA 卡片 ============ */
.yuji-cta {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--yuji-pine-dark) 0%, var(--yuji-pine) 100%);
    border-radius: var(--yuji-radius);
    padding: 60px 40px;
    text-align: center;
    color: var(--yuji-white);
}
.yuji-cta h2 {
    color: var(--yuji-white);
    font-size: 32px;
    margin-bottom: 16px;
}
.yuji-cta p {
    color: rgba(255,255,255,0.8);
    max-width: 600px;
    margin: 0 auto 28px;
}

/* ============ 页脚 ============ */
.yuji-footer {
    background: var(--yuji-pine-dark);
    color: rgba(255,255,255,0.8);
    padding: 60px 0 24px;
}
.yuji-footer a {
    color: rgba(255,255,255,0.8);
}
.yuji-footer a:hover {
    color: var(--yuji-gold);
}
.yuji-footer h4 {
    color: var(--yuji-white);
    font-size: 16px;
    margin-bottom: 16px;
}
.yuji-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 40px;
    padding-top: 20px;
    font-size: 13px;
    text-align: center;
}

/* ============ WhatsApp 浮窗 ============ */
.yuji-wa-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--yuji-ochre);
    color: var(--yuji-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 16px rgba(196,87,58,0.4);
    z-index: 999;
}
.yuji-wa-float:hover {
    background: var(--yuji-ochre-dark);
    color: var(--yuji-white);
}

/* ============ 规格表 ============ */
.yuji-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
}
.yuji-spec-table th, .yuji-spec-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--yuji-border);
}
.yuji-spec-table th {
    background: var(--yuji-pine);
    color: var(--yuji-white);
    font-weight: 600;
}
.yuji-spec-table tr:nth-child(even) td {
    background: var(--yuji-paper);
}

/* ============ 医药级免责框 ============ */
.yuji-disclaimer {
    background: #FDF2F0;
    border-left: 4px solid var(--yuji-ochre);
    padding: 16px 20px;
    border-radius: 0 var(--yuji-radius-sm) var(--yuji-radius-sm) 0;
    margin: 24px 0;
    font-size: 14px;
    color: #8B3A2A;
}

/* ============ 响应式 ============ */
@media (max-width: 900px) {
    .yuji-hero h1 { font-size: 32px; }
    .yuji-grade-grid, .yuji-articles { grid-template-columns: 1fr; }
    .yuji-steps { flex-direction: column; gap: 32px; }
    .yuji-step::after { display: none; }
    .yuji-section-title { font-size: 28px; }
}

/* ============ 修复：强制section垂直堆叠，突破GP容器 ============ */
.yuji-hero,
.yuji-section {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: block !important;
}
.generate-columns,
.entry-content,
.generate-sections-container {
    display: block !important;
    max-width: 100% !important;
}
.yuji-hero {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}
.yuji-section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* ============ 自定义页眉 branding ============ */
.yuji-site-branding {
    display: flex;
    align-items: center;
    gap: 14px;
}
.yuji-logo-img {
    height: 44px;
    width: auto;
    display: block;
}
.yuji-site-tagline {
    font-size: 12px;
    color: var(--yuji-muted);
    line-height: 1.3;
    border-left: 2px solid var(--yuji-gold);
    padding-left: 12px;
}
.site-header {
    background: #fff !important;
    border-bottom: 1px solid var(--yuji-border);
    padding: 12px 0;
}

/* ============ 自定义四列页脚（覆盖旧样式） ============ */
.yuji-footer {
    background: #1E3A2E !important;
    padding: 60px 0 0 !important;
}
.yuji-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.yuji-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 40px;
}
.yuji-footer__brand {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.yuji-footer__about {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.6);
    margin: 0;
}
.yuji-footer__heading {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}
.yuji-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.yuji-footer__links li {
    margin-bottom: 10px;
}
.yuji-footer__links a {
    color: rgba(255,255,255,0.65) !important;
    font-size: 14px;
    transition: color 0.2s;
}
.yuji-footer__links a:hover {
    color: var(--yuji-gold) !important;
}
.yuji-footer__cta-text {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.6);
    margin-bottom: 16px;
}
.yuji-footer__btn {
    display: inline-block;
    background: var(--yuji-ochre);
    color: #fff !important;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
}
.yuji-footer__btn:hover {
    background: var(--yuji-ochre-dark);
    color: #fff !important;
}
.yuji-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.45);
}
.site-info { display: none !important; }

@media (max-width: 900px) {
    .yuji-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .yuji-site-tagline { display: none; }
}

/* ============ 全局居中 ============ */
.grid-container,
.site-header .header-grid,
.site-footer .footer-widgets-container,
.entry-content {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.site-header {
    display: flex;
    align-items: center;
}
.site-header .header-grid {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.yuji-site-branding {
    flex-shrink: 0;
}
.main-navigation {
    margin-left: auto;
}
.entry-content > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.yuji-hero__inner,
.yuji-section .yuji-section-title,
.yuji-section .yuji-eyebrow {
    text-align: center;
}
.yuji-grade-grid,
.yuji-articles,
.yuji-steps {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.yuji-cta {
    margin-left: auto;
    margin-right: auto;
}

/* 页眉导航菜单 */
.header-grid {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.yuji-main-nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 24px;
}
.yuji-main-nav ul li a {
    color: var(--yuji-ink);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.2s;
}
.yuji-main-nav ul li a:hover,
.yuji-main-nav ul li.current-menu-item > a {
    color: var(--yuji-pine);
}
.yuji-main-nav ul li.menu-item-has-children {
    position: relative;
}
.yuji-main-nav ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 8px 0;
    flex-direction: column;
    gap: 0;
    z-index: 999;
}
.yuji-main-nav ul li:hover ul {
    display: flex;
}
.yuji-main-nav ul li ul li a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
}

/* 强制横向导航 */
.header-grid {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.yuji-main-nav ul {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 24px !important;
}
.yuji-main-nav ul li {
    display: inline-block !important;
    position: relative;
}
.yuji-main-nav ul li a {
    color: #222 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
}
.yuji-main-nav ul li a:hover {
    color: #2C5F48 !important;
}
.yuji-main-nav ul li ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #fff !important;
    min-width: 200px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border-radius: 6px !important;
    padding: 8px 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
    z-index: 9999 !important;
}
.yuji-main-nav ul li:hover > ul {
    display: flex !important;
}
.yuji-main-nav ul li ul li {
    display: block !important;
}
.yuji-main-nav ul li ul li a {
    display: block !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
}

/* 放大logo */
.yuji-logo-img {
    height: 64px !important;
    width: auto !important;
}

/* 再放大logo */
.yuji-logo-img {
    height: 80px !important;
    width: auto !important;
}

/* 导航胶囊样式 */
.yuji-main-nav {
    background: #F0EBE0 !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
}
.yuji-main-nav ul li a {
    padding: 8px 16px !important;
    border-radius: 50px !important;
    transition: all 0.25s !important;
}
.yuji-main-nav ul li a:hover,
.yuji-main-nav ul li.current-menu-item > a {
    background: #2C5F48 !important;
    color: #fff !important;
}

/* logo再放大 */
.yuji-logo-img {
    height: 100px !important;
    width: auto !important;
}

/* 导航背景透明，融入header */
.yuji-main-nav {
    background: transparent !important;
    padding: 0 !important;
}
.yuji-main-nav ul li a {
    padding: 8px 16px !important;
    border-radius: 6px !important;
}

/* logo区域背景透明，和header融为一体 */
.yuji-site-branding,
.yuji-logo-link,
.yuji-logo-img {
    background: transparent !important;
    background-color: transparent !important;
}
.site-header,
.header-grid {
    background: #fff !important;
}

/* 修复：header白底占满全屏 */
.site-header {
    background: #fff !important;
    width: 100% !important;
    padding: 10px 0 !important;
}
.header-grid {
    max-width: 1280px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding: 0 30px !important;
}

/* 主内容全宽 */
#page,
.grid-container,
.entry-content,
.site-main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Hero全宽 */
.yuji-hero {
    width: 100% !important;
    padding: 100px 30px !important;
}

/* DMSO下拉菜单左对齐 */
.yuji-main-nav ul li ul {
    text-align: left !important;
    left: 0 !important;
}
.yuji-main-nav ul li ul li {
    text-align: left !important;
}

/* ============ How We Work 流程图片板块 ============ */
.yuji-section--flow-image {
    background: #F5F0E6 !important;
    padding: 0 !important;
    overflow: hidden;
}
.yuji-flow-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ============ From Requirement to Delivery 流程图 ============ */
.yuji-flow-section {
    background: #F7F3EB !important;
    padding: 80px 30px !important;
    text-align: center;
}
.yuji-flow-title {
    font-size: 42px;
    font-weight: 800;
    color: #1E4232;
    margin-bottom: 60px;
}
.yuji-flow-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}
.yuji-flow-step {
    flex: 1;
    max-width: 240px;
    transition: transform 0.3s ease;
}
.yuji-flow-step:hover {
    transform: translateY(-8px);
}
.yuji-flow-circle {
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto 24px !important;
    background: transparent !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s ease !important;
}
.yuji-flow-step:hover .yuji-flow-circle {
    box-shadow: none !important;
    transform: scale(1.06) !important;
}
.yuji-flow-circle::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #2C5F48;
    border-right-color: #C4573A;
    border-bottom-color: #C9A063;
    transition: all 0.4s ease;
}
.yuji-flow-step:hover .yuji-flow-circle::before {
    transform: rotate(90deg);
    border-top-color: #C4573A;
    border-right-color: #2C5F48;
}
.yuji-flow-name {
    font-size: 24px;
    font-weight: 700;
    color: #1E4232;
    margin-bottom: 10px;
}
.yuji-flow-desc {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
}

/* 流程图图片样式（图片本身就是圆形卡片） */
.yuji-flow-circle {
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto 24px !important;
    background: transparent !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s ease !important;
}
.yuji-flow-circle::before {
    display: none !important;
}
.yuji-flow-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.yuji-flow-step:hover .yuji-flow-img {
    transform: scale(1.08);
}

/* ============ 导航居中 ============ */
.header-grid {
    justify-content: center !important;
    position: relative !important;
    display: flex !important;
}
.yuji-site-branding {
    position: absolute !important;
    left: 30px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.yuji-main-nav {
    margin: 0 auto !important;
    width: auto !important;
    margin-left: 180px !important;
}

/* ============ 平板适配 (≤1024px) ============ */
@media (max-width: 1024px) {
    .header-grid {
        padding: 0 20px !important;
    }
    .yuji-logo-img {
        height: 70px !important;
    }
    .yuji-main-nav ul {
        gap: 16px !important;
    }
    .yuji-main-nav ul li a {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }
    .yuji-hero {
        padding: 80px 20px !important;
        min-height: 400px !important;
    }
    .yuji-hero h1 {
        font-size: 36px !important;
    }
    .yuji-grade-grid {
        gap: 20px !important;
        padding: 0 20px !important;
    }
    .yuji-flow-steps {
        gap: 20px !important;
        padding: 0 20px !important;
    }
    .yuji-flow-title {
        font-size: 32px !important;
    }
}

/* ============ 手机适配 (≤768px) ============ */
@media (max-width: 768px) {
    .header-grid {
        flex-direction: column !important;
        padding: 15px 20px !important;
        gap: 15px !important;
    }
    .yuji-site-branding {
        position: static !important;
        transform: none !important;
        left: auto !important;
    }
    .yuji-logo-img {
        height: 60px !important;
    }
    .yuji-main-nav ul {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .yuji-main-nav ul li a {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }
    .yuji-main-nav ul li ul {
        position: static !important;
        box-shadow: none !important;
        display: none !important;
        margin-top: 5px !important;
    }
    .yuji-hero {
        padding: 60px 20px !important;
        min-height: 320px !important;
    }
    .yuji-hero h1 {
        font-size: 28px !important;
    }
    .yuji-hero__sub {
        font-size: 16px !important;
    }
    .yuji-grade-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .yuji-flow-steps {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
    }
    .yuji-flow-step {
        max-width: 100% !important;
    }
    .yuji-flow-title {
        font-size: 26px !important;
        margin-bottom: 30px !important;
    }
    .yuji-articles {
        grid-template-columns: 1fr !important;
    }
    .yuji-footer__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
        padding: 0 20px !important;
    }
}

/* ============ 小手机适配 (≤480px) ============ */
@media (max-width: 480px) {
    .yuji-logo-img {
        height: 50px !important;
    }
    .yuji-main-nav ul {
        gap: 6px !important;
    }
    .yuji-main-nav ul li a {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
    .yuji-hero h1 {
        font-size: 22px !important;
    }
    .yuji-section {
        padding: 50px 20px !important;
    }
    .yuji-section-title {
        font-size: 26px !important;
    }
    .yuji-footer__grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============ 流程图圆形卡片样式 ============ */
.yuji-flow-section {
    background: #F7F3EB !important;
    padding: 80px 30px !important;
}
.yuji-flow-title {
    font-size: 40px !important;
    font-weight: 800 !important;
    color: #1E4232 !important;
    text-align: center !important;
    margin-bottom: 60px !important;
}
.yuji-flow-steps {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}
.yuji-flow-step {
    flex: 1 !important;
    max-width: 220px !important;
    text-align: center !important;
    transition: transform 0.35s ease !important;
}
.yuji-flow-step:hover {
    transform: translateY(-10px) !important;
}
.yuji-flow-circle {
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto 24px !important;
    background: transparent !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s ease !important;
}
.yuji-flow-step:hover .yuji-flow-circle {
    box-shadow: none !important;
    transform: scale(1.06) !important;
}
.yuji-flow-circle::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    border-top-color: #2C5F48 !important;
    border-right-color: #C4573A !important;
    opacity: 0 !important;
    transition: all 0.4s ease !important;
}
.yuji-flow-step:hover .yuji-flow-circle::before {
    opacity: 1 !important;
    transform: rotate(180deg) !important;
}
.yuji-flow-img {
    width: 75% !important;
    height: 75% !important;
    object-fit: contain !important;
    transition: transform 0.35s ease !important;
}
.yuji-flow-step:hover .yuji-flow-img {
    transform: scale(1.1) rotate(-3deg) !important;
}
.yuji-flow-name {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1E4232 !important;
    margin-bottom: 8px !important;
}
.yuji-flow-desc {
    font-size: 14px !important;
    color: #6B6560 !important;
    line-height: 1.6 !important;
}
@media (max-width: 1024px) {
    .yuji-flow-circle {
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto 24px !important;
    background: transparent !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s ease !important;
}
    .yuji-flow-title { font-size: 32px !important; }
}
@media (max-width: 768px) {
    .yuji-flow-steps { flex-direction: column !important; align-items: center !important; gap: 40px !important; }
    .yuji-flow-step { max-width: 280px !important; }
    .yuji-flow-title { font-size: 26px !important; margin-bottom: 40px !important; }
}

/* YUJI warm alternating surfaces and refined tables — 2026-10-12 */
html body.yuji-business{--yuji-paper-deep:#f7f3eb;--yuji-border:#e5dfd3}
html body.yuji-business #page #content .yuji-section:not(:has(>.yuji-cta)):nth-child(odd of .yuji-section:not(:has(>.yuji-cta))){background:#f7f3eb!important}
html body.yuji-business #page #content .yuji-section:not(:has(>.yuji-cta)):nth-child(even of .yuji-section:not(:has(>.yuji-cta))){background:#fff!important}
html body.yuji-business #page #content .yuji-business-hero,html body.yuji-business #page #content .yuji-contact-information,html body.yuji-business .yuji-business-related{background:#f7f3eb!important}
html body.yuji-business .yuji-grade-row:nth-child(odd){background:#f7f3eb!important}
html body.yuji-business .yuji-grade-row:nth-child(even){background:#fff!important}
html body.yuji-business #page table{border-collapse:separate!important;border-spacing:0!important;border:1px solid #ded8cb!important;border-radius:10px;overflow:hidden;background:#fff;记box-shadow:0 6px 20px rgba(42,37,32,.05);font-variant-numeric:tabular-nums;line-height:1.55}
html body.yuji-business #page table th,html body.yuji-business #page table td{padding:15px 18px!important;border:0!important;border-bottom:1px solid #e5dfd3!important;text-align:left;vertical-align:top}
html body.yuji-business #page table th{background:#edf3ef!important;color:#173e30!important;font-weight:650}
html body.yuji-business #page table th+th,html body.yuji-business #page table td+td{border-left:1px solid #e9e4da!important}
html body.yuji-business #page table tbody tr:nth-child(odd) td{background:#fff!important}
html body.yuji-business #page table tbody tr:nth-child(even) td{background:#f7f3eb!important}
html body.yuji-business #page table tbody td:first-child{font-weight:600;color:#31483c}
html body.yuji-business #page table tbody tr:hover td{background:#f0ede4!important}
html body.yuji-business #page table tbody tr:last-child td{border-bottom:0!important}
html body.yuji-business #page table tfoot td{background:#edf3ef!important;border-top:1px solid #ded8cb!important;border-bottom:0!important}
html body.yuji-business .yuji-table-scroll{scrollbar-color:#a69a83 #f7f3eb}
@media(max-width:800px){html body.yuji-business #page table th,html body.yuji-business #page table td{padding:12px 14px!important;font-size:14px}}

/* Contact page: unified default white surface — 2026-10-13 */
html body.yuji-business.page-id-23 #page #content .yuji-contact-business-grid,
html body.yuji-business.page-id-23 #page #content .yuji-contact-business-grid > .yuji-section{background:#fff!important}

html body.yuji-business.page-id-23 #page #content .yuji-contact-business-grid > #request-a-quote.yuji-section,
html body.yuji-business.page-id-23 #page #content .yuji-contact-business-grid > .yuji-contact-information.yuji-section:nth-child(n){background:#fff!important}

/* Shared grade cards: homepage, products and grade detail pages. */
/* Homepage grade selection: plain application lists, 2026-10-14. */
html body.yuji-business #page #content .yuji-grade-grid{gap:24px!important;max-width:1200px!important}
html body.yuji-business #page #content .yuji-grade-card{padding:26px 28px!important;min-width:0;border-radius:8px!important;display:flex;flex-direction:column;box-shadow:none!important}
html body.yuji-business #page #content .yuji-grade-card__title{font-size:22px!important;line-height:1.35!important;font-weight:600;margin:0 0 18px!important;min-height:0!important}
html body.yuji-business #page #content .yuji-grade-card__rows{margin:0 0 20px!important;padding:0!important;flex:1;min-height:0!important}
html body.yuji-business #page #content .yuji-grade-card .yuji-grade-row{position:relative;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important;padding:6px 0 6px 14px!important;font-size:15px!important;line-height:1.6!important;color:#46574f!important;cursor:default;transform:none!important;transition:none!important}
html body.yuji-business #page #content .yuji-grade-row:before{content:'';position:absolute;left:0;top:16px;width:4px;height:4px;border-radius:50%;background:#6d8976}
html body.yuji-business #page #content .yuji-grade-card__link{align-self:flex-start;margin-top:auto!important;font-size:14px!important;min-height:44px!important;padding:10px 14px!important;box-sizing:border-box}
html body.yuji-business #page #content .yuji-section:has(>.yuji-grade-grid)>.yuji-section-title{margin-bottom:28px!important}
@media(max-width:800px){html body.yuji-business #page #content .yuji-grade-card{padding:24px!important}html body.yuji-business #page #content .yuji-grade-grid{gap:16px!important}html body.yuji-business #page #content .yuji-grade-card__title{margin-bottom:12px!important}html body.yuji-business #page #content .yuji-grade-card__rows{flex:0 0 auto;margin-bottom:18px!important}}

/* Application imagery for the three homepage grade entry points. */
html body.yuji-business #page #content .yuji-grade-card.yuji-grade-card--visual{padding:0!important;overflow:hidden;border-radius:8px!important;display:flex;flex-direction:column}
html body.yuji-business #page #content .yuji-grade-card--visual .yuji-grade-visual{height:200px;flex:0 0 200px;overflow:hidden;position:relative;background:#edf3ef}
html body.yuji-business #page #content .yuji-grade-visual img{display:block;width:100%!important;height:100%!important;object-fit:cover;filter:saturate(.95) contrast(.98);transform:scale(1);transition:transform .45s cubic-bezier(.16,1,.3,1)}
html body.yuji-business #page #content .yuji-grade-card--visual:hover .yuji-grade-visual img,html body.yuji-business #page #content .yuji-grade-card--visual:focus-within .yuji-grade-visual img{transform:scale(1.035)}
html body.yuji-business #page #content .yuji-grade-card--visual .yuji-grade-card__body{padding:24px;display:flex;flex:1;flex-direction:column;min-width:0}
html body.yuji-business #page #content .yuji-grade-card--visual .yuji-grade-card__title{font-size:24px!important;line-height:1.3!important;letter-spacing:-.015em;margin:0 0 16px!important}
html body.yuji-business #page #content .yuji-grade-card--visual .yuji-grade-card__rows{flex:1;margin-bottom:20px!important}
html body.yuji-business #page #content .yuji-grade-card--visual .yuji-grade-row{font-size:14px!important;padding-top:5px!important;padding-bottom:5px!important;line-height:1.55!important}
html body.yuji-business #page #content .yuji-grade-card--visual .yuji-grade-row:before{top:14px}
html body.yuji-business #page #content .yuji-grade-card--visual .yuji-grade-card__link{color:#285c46!important;border-color:#285c46!important;background:transparent!important;transition:color .15s,background-color .15s,border-color .15s}
html body.yuji-business #page #content .yuji-grade-card--visual .yuji-grade-card__link:hover,html body.yuji-business #page #content .yuji-grade-card--visual .yuji-grade-card__link:focus-visible{color:#173e30!important;border-color:#173e30!important;background:#edf3ef!important}
html body.yuji-business #page #content .yuji-application-note{max-width:1152px;margin:16px auto 0;padding:0 24px;font-size:13px!important;line-height:1.6;color:#53645d;text-align:left}
@media(max-width:800px){html body.yuji-business #page #content .yuji-grade-card--visual .yuji-grade-visual{height:auto;flex-basis:auto;aspect-ratio:16/9}html body.yuji-business #page #content .yuji-grade-card--visual .yuji-grade-card__body{padding:24px}html body.yuji-business #page #content .yuji-grade-card--visual .yuji-grade-card__rows{flex:0 0 auto}}
@media(prefers-reduced-motion:reduce){html body.yuji-business #page #content .yuji-grade-visual img{transition:none;transform:none!important}}

/* Shared homepage/About delivery workflow — maintain this component once. */
html body.yuji-business #page #content #yuji-workflow{box-sizing:border-box;width:100%;max-width:none!important;padding:56px 24px!important;margin:0!important;background:#fff!important;color:#193f32}
html body.yuji-business #page #content #yuji-workflow .yuji-flow-title{max-width:1136px!important;margin:0 auto 60px!important;padding:0!important;font-size:30px!important;line-height:1.3!important;font-weight:600!important;text-align:center!important;color:#193f32!important}
html body.yuji-business #page #content #yuji-workflow .yuji-flow-steps{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px!important;position:relative;width:100%!important;max-width:1136px!important;padding:0!important;margin:0 auto!important}
html body.yuji-business #page #content #yuji-workflow .yuji-flow-steps:before{content:"";position:absolute;top:70px;left:12%;right:12%;height:1px;background:#b7c7bb;display:block}
html body.yuji-business #page #content #yuji-workflow .yuji-flow-step{display:block;min-width:0;max-width:none!important;margin:0!important;padding:0!important;text-align:center!important;position:relative;transform:none!important}
html body.yuji-business #page #content #yuji-workflow .yuji-flow-circle{display:flex;align-items:center;justify-content:center;width:140px!important;height:140px!important;margin:0 auto 22px!important;padding:0!important;position:relative;background:#fff!important;border-radius:50%;transform:none!important;box-shadow:none!important}
html body.yuji-business #page #content #yuji-workflow .yuji-flow-circle:before{display:none!important}
html body.yuji-business #page #content #yuji-workflow .yuji-flow-img{display:block;width:90%!important;height:90%!important;margin:0!important;object-fit:contain;transform:none!important}
html body.yuji-business #page #content #yuji-workflow .yuji-flow-name{font-size:21px!important;line-height:1.65!important;font-weight:700!important;color:#193f32!important;margin:0 0 8px!important}
html body.yuji-business #page #content #yuji-workflow .yuji-flow-desc{font-size:15px!important;line-height:1.6!important;font-weight:400!important;color:#53645d!important;max-width:220px!important;margin:0 auto!important}
@media(max-width:800px){html body.yuji-business #page #content #yuji-workflow .yuji-flow-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px!important}html body.yuji-business #page #content #yuji-workflow .yuji-flow-steps:before{display:none}}
@media(max-width:440px){html body.yuji-business #page #content #yuji-workflow{padding:40px 24px!important}html body.yuji-business #page #content #yuji-workflow .yuji-flow-title{font-size:26px!important;margin-bottom:32px!important}html body.yuji-business #page #content #yuji-workflow .yuji-flow-steps{grid-template-columns:1fr}html body.yuji-business #page #content #yuji-workflow .yuji-flow-step{display:grid;grid-template-columns:84px 1fr;gap:4px 18px;text-align:left!important;align-items:center}html body.yuji-business #page #content #yuji-workflow .yuji-flow-circle{grid-row:1/3;width:84px!important;height:84px!important;margin:0!important}html body.yuji-business #page #content #yuji-workflow .yuji-flow-name{align-self:end;margin:0!important}html body.yuji-business #page #content #yuji-workflow .yuji-flow-desc{text-align:left!important;align-self:start;margin:0!important;max-width:none!important}}

/* Shared button system — 2026-10-15. All public actions use these tokens. */
body.yuji-business{--yuji-action:#a63e2b;--yuji-action-hover:#813020;--yuji-control-green:#285c46;--yuji-control-hover:#edf3ef;--yuji-control-radius:5px}
html body.yuji-business :is(#page #content,.yuji-footer) .yuji-control.yuji-control.yuji-control{box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;min-height:48px!important;height:auto!important;max-width:100%!important;padding:12px 22px!important;border:1px solid var(--yuji-control-green)!important;border-radius:var(--yuji-control-radius)!important;font-family:inherit!important;font-size:15px!important;font-weight:600!important;line-height:22px!important;letter-spacing:normal!important;text-align:center!important;text-decoration:none!important;background:transparent!important;color:var(--yuji-control-green)!important;box-shadow:none!important;transform:none!important;cursor:pointer;transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease!important}
html body.yuji-business :is(#page #content,.yuji-footer) .yuji-control.yuji-control.yuji-control.yuji-action-primary{background:var(--yuji-action)!important;border-color:var(--yuji-action)!important;color:#fff!important}
html body.yuji-business :is(#page #content,.yuji-footer) .yuji-control.yuji-control.yuji-control.yuji-action-primary:hover{background:var(--yuji-action-hover)!important;border-color:var(--yuji-action-hover)!important;color:#fff!important}
html body.yuji-business :is(#page #content,.yuji-footer) .yuji-control.yuji-control.yuji-control.yuji-action-secondary:hover{background:var(--yuji-control-hover)!important;border-color:#193f32!important;color:#193f32!important}
html body.yuji-business :is(#page #content,.yuji-footer) .yuji-control.yuji-control.yuji-control.yuji-control--inverse{color:#fff!important;border-color:#bdd0c6!important;background:transparent!important}
html body.yuji-business :is(#page #content,.yuji-footer) .yuji-control.yuji-control.yuji-control.yuji-control--inverse:hover{color:#fff!important;border-color:#fff!important;background:#285c46!important}
html body.yuji-business :is(#page #content,.yuji-footer) .yuji-control.yuji-control.yuji-control.yuji-control--document{min-height:44px!important;padding:6px 0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--yuji-control-green)!important;font-size:14px!important;justify-content:flex-start!important;white-space:normal}
html body.yuji-business :is(#page #content,.yuji-footer) .yuji-control.yuji-control.yuji-control.yuji-control--document:hover{color:#193f32!important;text-decoration:underline!important;text-underline-offset:4px}
.yuji-control-icon{width:18px!important;height:18px!important;flex:0 0 18px;display:block;pointer-events:none}
html body.yuji-business :is(#page #content,.yuji-footer) .yuji-control:focus-visible,html body.yuji-business :is(.yuji-grade-focus button,.yuji-faq__question,summary,.yuji-menu-button,.yuji-submenu-toggle,.yuji-wa-float):focus-visible{outline:3px solid #285c46!important;outline-offset:4px!important}
html body.yuji-business :is(.yuji-purchase-hero,.yuji-cta,.yuji-footer) .yuji-control:focus-visible{outline-color:#f7f3eb!important}
html body.yuji-business :is(#page #content,.yuji-footer) .yuji-control.yuji-control.yuji-control:is(:disabled,[aria-disabled="true"],[aria-busy="true"]){opacity:.6!important;cursor:wait!important;pointer-events:none}
html body.yuji-business :is(#page #content,.yuji-footer) .yuji-control.yuji-control.yuji-control:is(:disabled,[aria-disabled="true"]){cursor:not-allowed!important}
html body.yuji-business #page #content table .yuji-control.yuji-control.yuji-control{min-height:44px!important;padding:10px 12px!important;font-size:14px!important;line-height:22px!important}
html body.yuji-business #page #content table .yuji-control--document.yuji-control.yuji-control{padding:6px 0!important}
html body.yuji-business #page #content .yuji-grade-focus button{min-height:44px!important;border-radius:5px!important;font-size:14px!important;font-weight:600!important;padding:9px 14px!important;line-height:24px!important;background:#fff!important;border:1px solid #9eafa3!important;color:#285c46!important;transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease!important}
html body.yuji-business #page #content .yuji-grade-focus button:hover{background:#edf3ef!important;border-color:#285c46!important}
html body.yuji-business #page #content .yuji-grade-focus button[aria-pressed="true"]{background:#285c46!important;border-color:#285c46!important;color:#fff!important}
html body.yuji-business #page #content :is(.yuji-business-actions,.yuji-product-actions,.yuji-purchase-actions){display:flex;gap:12px!important;flex-wrap:wrap;align-items:stretch}
html body.yuji-business .yuji-menu-button{background:#285c46;color:#fff;border:1px solid #285c46;border-radius:5px;min-height:44px;font-size:15px;font-weight:600}
@media(max-width:600px){html body.yuji-business #page #content :is(.yuji-business-actions,.yuji-product-actions,.yuji-purchase-actions){flex-direction:column;align-items:stretch}html body.yuji-business #page #content :is(.yuji-business-actions,.yuji-product-actions,.yuji-purchase-actions) .yuji-control{width:100%!important}html body.yuji-business #page #content .yuji-control{overflow-wrap:anywhere}html body.yuji-business #page #content .wpcf7 .yuji-control{width:100%!important}}
@media(prefers-reduced-motion:reduce){html body.yuji-business :is(#page #content,.yuji-footer) .yuji-control.yuji-control.yuji-control,html body.yuji-business #page #content .yuji-grade-focus button{transition:none!important}}

/* Keep the three comparison actions aligned when grade names wrap. */
html body.yuji-business #page #content table tfoot .yuji-control.yuji-control.yuji-control.yuji-action-secondary{width:100%!important;min-height:66px!important;white-space:normal!important}
@media(max-width:700px){html body.yuji-business #page #content table tfoot .yuji-control.yuji-control.yuji-control.yuji-action-secondary{min-height:88px!important}}