/* =========================================================
   1. 引入本地 Google 字体 (方案C: 优雅轻奢 Lora + Lato)
   ========================================================= */

/* 引入副字体: Lato (常规体 - 用于正文/菜单/按钮) */
@font-face {
    font-family: 'BodyFont-Lato';
    src: url('../fonts/lato-v25-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 引入主字体: Lora (常规体 400) */
@font-face {
    font-family: 'TitleFont-Lora';
    src: url('../fonts/lora-v37-latin-regular.woff2') format('woff2');
    font-weight: 400; 
    font-style: normal;
    font-display: swap;
}

/* 引入主字体: Lora (中等粗细 500 - 核心精致标题字体) */
@font-face {
    font-family: 'TitleFont-Lora';
    src: url('../fonts/lora-v37-latin-500.woff2') format('woff2');
    font-weight: 500; 
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   2. 精细化排版：颜色、间距、粗细的完美协调
   ========================================================= */

/* A. 全局基础字体 (产品描述、普通文本) */
body, p, span, div, li, td, th {
    font-family: 'BodyFont-Lato', Arial, sans-serif !important;
    color: #555555; /* 放弃纯黑，使用高级的深灰，柔和护眼 */
    line-height: 1.6; /* 增加行高，让文字有呼吸感 */
}

/* B. 导航菜单字体 (要求清晰、干练) */
.mainmenu-nav a, 
.mean-menu a, 
.mobile-menu a,
#mainMenu a {
    font-family: 'BodyFont-Lato', Arial, sans-serif !important;
    font-weight: bold !important; /* 浏览器会自动使用 Lato Regular 模拟粗体，效果干练 */
    color: #222222 !important; /* 菜单稍微深一点 */
    letter-spacing: 0.8px; /* 增加字间距，让菜单看起来更舒展、更贵 */
    text-transform: uppercase; /* 菜单建议用全大写，显得规整 */
}

/* C. 网站各种标题 & 产品名称 (使用 500 粗细的 Lora 衬线体，极具质感) */
h1, h2, h3, h4, h5, h6, 
#productName, 
.productGeneral, 
.itemTitle a, 
#siteMapHeading::before {
    font-family: 'TitleFont-Lora', "Times New Roman", serif !important;
    font-weight: 500 !important; /* 核心：使用 500，精致而不臃肿 */
    color: #2c3e50 !important; /* 采用深蓝灰色（Slate），非常有质感的家居色调 */
    letter-spacing: 0.3px;
    line-height: 1.3;
}

/* D. 产品详情页的大标题单独微调 */
#productName {
    font-size: 26px !important;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee; /* 加一条细细的下划线，提升排版层次 */
    padding-bottom: 15px;
}

/* E. 产品价格 (使用 Lora 500，让价格数字也有高级古典感) */
.productBasePrice, 
.productSpecialPrice, 
.normalprice,
.price {
    font-family: 'TitleFont-Lora', "Times New Roman", serif !important;
    font-weight: 500 !important;
    color: #e74c3c !important; /* 柔和的红色 */
}

/* F. 按钮文字 (保持干练) */
.btn, button, input[type="submit"], .buttonRow a {
    font-family: 'BodyFont-Lato', Arial, sans-serif !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================================================
   3. 移动端专项优化 (彻底解决手机端“乱糟糟”的问题)
   ========================================================= */
@media (max-width: 768px) {
    /* 手机端产品标题缩小，避免挤满屏幕 */
    #productName {
        font-size: 22px !important; 
        line-height: 1.4 !important;
    }
    
    /* 列表页的产品名字再小一点 */
    .itemTitle a {
        font-size: 16px !important;
    }

    /* 手机端描述文字的字号和行距优化 */
    body, p, div#productDescription {
        font-size: 14px !important; 
        line-height: 1.7 !important; /* 手机端需要更大的行间距防误触和视觉疲劳 */
    }
}