:root {
    --smzdm-red: #E1251B;
    --boss-green: #00BEBD;
    --bg-gray: #F5F7F8;
    --text-dark: #222222;
    --text-gray: #777777;
    --max-width: 1184px; /* 严格符合 1184px 黄金布局宽度 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-gray); color: var(--text-dark); line-height: 1.6; }
a { text-decoration: none; color: inherit; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }

/* ================= 顶部导航栏 ================= */
header { background: #ffffff; border-bottom: 1px solid #EAEAEA; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.header-box { display: flex; align-items: center; height: 64px; justify-content: space-between; }
.logo-area { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo { font-size: 22px; font-weight: bold; color: var(--text-dark); }
.logo span { color: var(--boss-green); }
.logo-tagline { font-size: 12px; color: var(--text-gray); border-left: 1px solid #DDD; padding-left: 10px; }

.nav-menu { display: flex; list-style: none; gap: 28px; font-size: 15px; font-weight: 500; }
.nav-item a { padding: 8px 0; transition: color 0.2s; position: relative; }
.nav-item a:hover { color: var(--boss-green); }
/* 导航右侧菜单区（电脑端平铺） */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 28px;
    font-size: 15px;
    font-weight: 500;
}
.nav-item a {
    padding: 8px 0;
    transition: color 0.2s;
    position: relative;
}
.nav-item a:hover, .nav-item.active a {
    color: var(--boss-green);
}
/* 鼠标悬浮小下划线效果 */
.nav-item.active a::after, .nav-item a:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--boss-green);
}
/* 面包屑 */
.breadcrumb { margin-top: 16px; font-size: 13px; color: var(--text-gray); display: flex; gap: 6px; align-items: center; }

/* ================= 底部双栏布局 ================= */
.main-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin-top: 16px; margin-bottom: 40px; }

/* 左侧：文章主体区 */
.article-wrapper { background: #ffffff; border-radius: 8px; padding: 32px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.article-title { font-size: 26px; font-weight: bold; color: #111; line-height: 1.4; margin-bottom: 16px; }

/* 文章元数据（无薪资，提炼为发布时间与浏览量，更符合当前SEO与用户习惯） */
.article-meta { display: flex; gap: 20px; font-size: 13px; color: var(--text-gray); border-bottom: 1px solid #EAEAEA; padding-bottom: 16px; margin-bottom: 24px; }
.meta-item { display: flex; align-items: center; gap: 4px; }

/* 后台富文本正文样式 */
.article-content { font-size: 16px; color: #333333; line-height: 1.8; word-wrap: break-word; }
.article-content p { margin-bottom: 18px; text-align: justify; }
.article-content h2 { font-size: 20px; font-weight: bold; color: #111; border-left: 4px solid var(--boss-green); padding-left: 10px; margin: 28px 0 16px 0; }
.article-content h3 { font-size: 17px; font-weight: bold; color: #222; margin: 20px 0 12px 0; }
.article-content a {color:#576b95; text-decoration: underline;}
/* 正文图片缩放防溢出 */
.article-content img { max-width: 100% !important; height: auto !important; display: block; margin: 20px auto; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

/* 正文有序/无序列表样式增强 */
.article-content ul, .article-content ol { padding-left: 20px; margin-bottom: 18px; color: #444; }
.article-content li { margin-bottom: 8px; }

/* 免责声明提示框 */
.disclaimer-box { background: #FAFBFB; border: 1px solid #EAEAEA; border-left: 4px solid var(--text-gray); border-radius: 4px; padding: 14px 16px; font-size: 13px; color: var(--text-gray); margin-top: 40px; }

/* ================= 右侧侧边栏：精准平替商品导购（带货核心） ================= */
.sidebar-right { display: flex; flex-direction: column; gap: 20px; }
.sidebar-widget { background: #ffffff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.widget-title { font-size: 15px; font-weight: bold; border-left: 4px solid var(--boss-green); padding-left: 8px; margin-bottom: 16px; color: #111; }

/* 侧边栏专属：紧凑型商品卡片 */
.goods-mini-list { display: flex; flex-direction: column; gap: 14px; list-style: none; }
.goods-mini-item { display: flex; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #F0F0F0; position: relative; }
.goods-mini-item:last-child { border-bottom: none; padding-bottom: 0; }

.goods-mini-thumb { width: 80px; height: 80px; background: #FAFAFA; border: 1px solid #EEE; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.goods-mini-thumb img { max-width: 90%; max-height: 90%; object-fit: contain; }

.goods-mini-info { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; }
.goods-mini-title { font-size: 13px; font-weight: 500; color: #222; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.goods-mini-title:hover { color: var(--boss-green); }

.goods-mini-pricebox { display: flex; align-items: baseline; justify-content: space-between; }
.mini-price-pingti { color: var(--smzdm-red); font-size: 15px; font-weight: bold; }
.mini-price-original { color: var(--text-gray); font-size: 11px; text-decoration: line-through; margin-left: 4px; }
.btn-mini-buy { background: #FFF0F0; color: var(--smzdm-red); font-size: 12px; font-weight: bold; padding: 2px 8px; border-radius: 4px; border: 1px solid #FFE0E0; }
.btn-mini-buy:hover { background: var(--smzdm-red); color: #FFF; }

/* 强力吸顶，保证用户往下滚动看文章时，广告卡片一直挂在右侧 */
.sticky-box { position: sticky; top: 88px; }

/* Footer */
footer { background: #ffffff; border-top: 1px solid #EAEAEA; padding: 24px 0; margin-top: 40px; text-align: center; font-size: 13px; color: var(--text-gray); line-height: 1.8; }

/* ================= 📱 移动端响应式布局 ================= */
@media (max-width: 992px) {
    .main-layout { grid-template-columns: 1fr; gap: 16px; }
    .sidebar-right { order: 2; }
    .sticky-box { position: static; }
}

@media (max-width: 768px) {
    .article-wrapper { padding: 20px 16px; border-radius: 0; }
    .article-title { font-size: 20px; }
    
    .header-box { height: auto; flex-direction: column; align-items: flex-start; padding: 12px 16px 6px 16px; gap: 10px; }
    .logo-tagline, .breadcrumb { display: none; }
    .nav-menu { width: 100%; overflow-x: auto; white-space: nowrap; gap: 20px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
    .nav-menu::-webkit-scrollbar { display: none; }
    .nav-item { display: inline-block; font-size: 14px; }
}