/*
Theme Name: WiFi Pro
Theme URI: https://github.com/pptt121212/wifi-pro-theme
Author: Content Auto Manager Assistant
Author URI: https://github.com/pptt121212
Description: 专为随身WIFI推广设计的专业WordPress主题，深度适配 Content Auto Manager 插件生成的结构化内容。特点：高转化、极速、SEO优化。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wifi-pro
Tags: technology, products, e-commerce, seo-friendly

This theme is designed for Promoting Portable WiFi devices.
*/

:root {
    /* 核心配色方案 */
    --color-primary: #0066CC;
    /* 科技蓝 - 品牌主色 */
    --color-primary-dark: #004C99;
    /* 深蓝 - 悬停状态 */
    --color-secondary: #2C3E50;
    /* 深灰蓝 - 标题/导航 */
    --color-accent: #FF6600;
    /* 活力橙 - 转化按钮/CTA */
    --color-success: #28a745;
    /* 绿色 - 状态指示 */

    /* 背景色 */
    --bg-body: #F5F7FA;
    /* 浅灰背景，减少视觉疲劳 */
    --bg-white: #FFFFFF;
    /* 卡片背景 */
    --bg-light: #E1E8ED;
    /* 分割线等 */

    /* 文本色 */
    --text-main: #333333;
    /* 正文 */
    --text-light: #666666;
    /* 辅助文本 */
    --text-white: #FFFFFF;

    /* 间距系统 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* 阴影 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* 基础重置与排版 */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: 0.2s;
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 容器 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* 基础 Header (占位) */
.site-header {
    background: var(--bg-white);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-md) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-branding {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
}

/* 基础 Grid Update: Added grid-cols-4 and specific home grid */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.product-grid-home {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* PC Default: 4 cols */
    gap: 20px;
}

/* 针对插件内容的优化 */
.entry-content {
    background: var(--bg-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* 随身WIFI 专属 CTA 按钮 */
.btn-cta {
    display: inline-block;
    background: var(--color-accent);
    color: white;
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);
}

.btn-cta:hover {
    background: #e65c00;
    color: white;
    transform: translateY(-2px);
}

/* =========================================
   Typography Content System (正文排版优化)
   ========================================= */

/* 章节标题 */
.typography-content h2 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 4px solid var(--color-primary);
    line-height: 1.3;
}

.typography-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--color-secondary);
}

.typography-content p {
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 1.8;
}

/* 列表样式 */
.typography-content ul,
.typography-content ol {
    margin-bottom: 25px;
    padding-left: 20px;
}

.typography-content ul li,
.typography-content ol li {
    margin-bottom: 10px;
    position: relative;
}

/* 链接样式 */
.typography-content a {
    color: var(--color-primary);
    border-bottom: 1px solid rgba(0, 102, 204, 0.3);
}

.typography-content a:hover {
    border-bottom-color: var(--color-primary);
}

/* 表格优化 (针对参数对比) */
.typography-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
    /* 保持圆角 */
}

.typography-content table thead {
    background-color: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.typography-content table th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
    color: var(--color-secondary);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.typography-content table td {
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
    color: var(--text-main);
}

.typography-content table tr:last-child td {
    border-bottom: none;
}

.typography-content table tr:hover td {
    background-color: #f8fbff;
    /* 悬停微高亮 */
}

/* 引用块 (适合展示注意事项) */
.typography-content blockquote {
    background: #f8f9fa;
    border-left: 4px solid var(--color-accent);
    margin: 30px 0;
    padding: 20px 25px;
    font-style: italic;
    color: #555;
    border-radius: 0 4px 4px 0;
}

/* 代码块 (适合展示配置命令) */
.typography-content pre {
    background: #2d3436;
    color: #dfe6e9;
    padding: 20px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: 'Fira Code', monospace;
    font-size: 14px;
}

/* 图片优化 */
.typography-content img {
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 30px 0;
}

/* 面包屑导航样式 */
.breadcrumb a:hover {
    text-decoration: underline;
}

/* Pagination */
.pagination .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    text-decoration: none;
    transition: 0.2s;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.pagination .prev,
.pagination .next {
    font-weight: 600;
}


/* =========================================
   Visual Upgrade V2.0 (视觉增强包)
   ========================================= */

/* 1. 广告容器 */
.wifi-pro-ad-box {
    margin: 30px 0;
    text-align: center;
    background: #fdfdfd;
    border: 1px dashed #e0e0e0;
    padding: 10px;
    position: relative;
    border-radius: 4px;
}

.wifi-pro-ad-box::before {
    content: "ADVERTISEMENT";
    display: block;
    font-size: 10px;
    color: #ccc;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

/* 2. 评测优缺点框 (Pros & Cons) */
.review-box {
    padding: 20px 25px;
    border-radius: 8px;
    margin: 30px 0;
    position: relative;
}

.review-box h4 {
    margin-top: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.review-box ul {
    margin-bottom: 0;
    padding-left: 20px;
}

/* 优点框 (Green) */
.review-box-pro {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.review-box-pro h4 {
    color: #16a34a;
}

.review-box-pro h4::before {
    content: "✅";
    margin-right: 10px;
}

/* 缺点框 (Red) */
.review-box-con {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.review-box-con h4 {
    color: #dc2626;
}

.review-box-con h4::before {
    content: "❌";
    margin-right: 10px;
}

/* 3. 首页品牌墙 (Brand Wall) */
.brand-wall {
    padding: 40px 0;
    background: white;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.brand-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    opacity: 0.6;
}

.brand-item {
    font-size: 20px;
    font-weight: 800;
    color: #999;
    cursor: default;
    transition: 0.3s;
}

.brand-item:hover {
    color: var(--color-primary);
    opacity: 1;
    transform: scale(1.05);
}

/* 4. 智能吸附侧边栏 (Sticky) */
@media (min-width: 768px) {
    .make-sticky {
        position: sticky;
        top: 100px;
        /* 距离顶部导航栏的高度 */
    }
}

/* =========================================
   V3.1 Hero 修复补丁 (Fix Broken Layout)
   ========================================= */

/* 1. 强制 Grid 高度适配 */
.hero-grid {
    height: 420px !important;
    /* 给足一点高度 */
}

/* 2. 统一遮罩样式 (更深，保证可读性) */
.hero-overlay {
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.9) 100%) !important;
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* 3. 左侧大图样式优化 */
.hero-main h2 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin-top: 10px !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    /* 限制最多显示 2 行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 4. 右侧小图样式修复 (关键) */
.hero-sub-item h3 {
    font-size: 15px !important;
    /* 字体改小 */
    line-height: 1.4 !important;
    /* 增加行间距 */
    font-weight: 600 !important;
    margin: 0 !important;
    /* 限制最多显示 3 行 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* 右侧 Feature 标签隐藏或缩小 (太挤了) */
.hero-sub-item .featured-tag {
    display: none;
}

/* 5. 修复可能的顶部黑条问题 */
.site-width-ad,
.header-cta {
    background-color: #f8f9fa !important;
    /* 强制改为浅灰，防止纯黑 */
    border-bottom: 1px solid #eee;
}

/* =========================================
   V3.2 Icon Style Upgrade (大气图标补丁)
   ========================================= */

/* 图标容器美化 */
.feature-card .icon {
    width: 80px;
    height: 80px;
    background: #f0f9ff;
    /* 淡蓝色背景 */
    border-radius: 50%;
    margin: 0 auto 25px;
    /* 居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

/* SVG 图标着色 */
.feature-card .icon svg {
    width: 40px;
    height: 40px;
    fill: var(--color-primary);
    /* 使用主题色 */
}

/* 悬停效果 */
.feature-card:hover .icon {
    background: var(--color-primary);
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 102, 204, 0.2);
}

.feature-card:hover .icon svg {
    fill: white;
    /* 悬停变白 */
}

/* =========================================
   V3.5 Hotfix: 消除神秘黑条 (Anti-Dark Bars)
   ========================================= */

/* 强制所有主要容器背景为白色或浅灰，防止透明漏出底色 */
body {
    background-color: #f1f5f9;
    /* 浅灰底色 */
}

.site-header {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* 增加阴影，更立体 */
}

.site-width-ad {
    background-color: #f8fafc !important;
    /* 强制浅灰 */
    border-bottom: 1px solid #e2e8f0;
    min-height: 0;
    /* 防止空内容撑开 */
}

/* 修复空 Feature 列表可能导致的黑线 */
.features-section,
.hero-section {
    background-color: #ffffff;
}

/* 修复菜单样式，防止无样式列表产生的黑点 */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation ul li a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
}

/* =========================================
   V3.6 Emergency Fix (样式急救包)
   ========================================= */

/* 1. 修复顶部菜单垂直堆叠问题 */
.main-navigation ul,
.course-features ul {
    display: flex !important;
    gap: 30px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
}

.main-navigation li {
    margin-bottom: 0 !important;
}

/* 2. 消除 Hero 下方的密集黑线 (空列表) */
.hero-sub-links {
    display: none !important;
    /* 暂时隐藏这个区域，目前看起来没数据 */
    border: none !important;
}

.hero-sub-links li {
    border-bottom: none !important;
}

/* 3. 消除广告位黑条 */
.site-width-ad {
    background: transparent !important;
    /* 去掉背景色 */
    border: none !important;
    min-height: 0 !important;
    /* 高度清零 */
    padding: 0 !important;
}

.site-width-ad:empty {
    display: none !important;
}

/* 4. 优化 Hero 标题样式 (去掉突兀橙条) */
.hero-main .badge,
.hero-sub-item .badge {
    background: var(--color-primary) !important;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    margin-bottom: 8px;
    display: inline-block;
}

/* =========================================
   V4.1 Rankings Page Styles (红黑榜专用)
   ========================================= */

.rankings-header-hero {
    background: #2d3436;
    color: white;
    padding: 80px 0;
    text-align: center;
}

.rankings-header-hero h1 {
    font-size: 48px;
    margin: 20px 0;
}

.rankings-header-hero p {
    font-size: 20px;
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto;
}

.edition-badge {
    background: #e74c3c;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    display: inline-block;
}

.ranking-container {
    margin-top: -50px;
    position: relative;
    z-index: 10;
    margin-bottom: 80px;
}

.rank-section {
    padding: 40px;
    margin-bottom: 50px;
    border-radius: 12px;
}

.zone-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 32px;
}

/* Red Zone */
.red-zone {
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.red-card {
    border: 1px solid #ffe4e6;
    border-radius: 8px;
    padding: 25px;
    background: #fff1f2;
    position: relative;
    overflow: visible;
    /* badge needs to overflow */
    margin-top: 10px;
    /* space for badge */
}

.red-card .badge {
    position: absolute;
    top: -15px;
    right: -10px;
    width: 60px;
    height: 60px;
    background: #e11d48;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(225, 29, 72, 0.4);
    z-index: 2;
}

.red-card h3 {
    margin-top: 10px;
    font-size: 20px;
    color: #be123c;
}

.red-card .score {
    margin: 10px 0;
    color: #f59e0b;
    font-weight: bold;
}

.btn-check {
    display: inline-block;
    background: #e11d48;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
}

.btn-check:hover {
    background: #9f1239;
    color: white;
}

/* Black Zone */
.black-zone {
    background: #2d3436;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    color: white;
}

.black-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.black-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-left: 4px solid #71717a;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.black-item .icon {
    font-size: 24px;
}

.black-item h3 {
    margin: 0 0 5px 0;
    color: #e4e4e7;
    font-size: 18px;
}

.black-item p {
    margin: 0;
    color: #a1a1aa;
    font-size: 14px;
}

/* =========================================
   V4.2 Selector Page Styles (选机中心)
   ========================================= */

.selector-header-hero {
    background: white;
    padding: 40px 0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.filter-box {
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #eee;
}

.filter-row {
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #e2e8f0;
    padding: 10px 0;
}

.filter-row:last-child {
    border-bottom: none;
}

.f-label {
    width: 100px;
    font-weight: bold;
    color: #475569;
    font-size: 14px;
    flex-shrink: 0;
}

.f-opts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

.f-opts a {
    padding: 4px 12px;
    border-radius: 4px;
    color: #64748b;
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s;
}

.f-opts a:hover {
    background: #e2e8f0;
    color: #334155;
}

.f-opts a.active {
    background: var(--color-primary);
    color: white;
    font-weight: bold;
}

/* Carrier Colors */
.f-opts a.c-mob.active {
    background: #0085d0;
}

.f-opts a.c-uni.active {
    background: #e60027;
}

.f-opts a.c-tel.active {
    background: #f39800;
}

/* =========================================
   V4.3 Front Page Styles (首页专用)
   ========================================= */

/* Main Layout: Left Content + Right Sidebar */
.main-layout-container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 40px;
}

/* Product Section */
.product-grid-home {
    /* Using grid-cols-4 utility by default, but let's reinforce */
    display: grid;
    gap: 20px;
}

/* Article List (Row Layout) */
.article-card-row {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 30px;
}

.article-thumb-link {
    width: 220px;
    height: 140px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.article-excerpt {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-meta {
    font-size: 12px;
    color: #94a3b8;
    margin-top: auto;
}

/* =========================================
   V4.4 Single Post Styles (文章详情)
   ========================================= */

/* Layout */
.single-container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 40px;
    margin-top: 40px;
    margin-bottom: 60px;
}

/* Header & Meta */
.entry-header {
    margin-bottom: 30px;
}

.entry-title {
    font-size: 32px;
    color: #1e293b;
    margin-bottom: 15px;
}

.entry-meta {
    color: #64748b;
    font-size: 14px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.meta-sep {
    margin: 0 10px;
}

/* Product Spec Card */
.product-spec-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 40px;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    /* Allows wrapping on mobile */
}

.spec-thumb {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

.spec-info {
    flex: 1;
}

.spec-title {
    margin-top: 0;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.net-badge {
    font-size: 12px;
    font-weight: normal;
    background: var(--color-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
}

.spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.spec-row {
    font-size: 15px;
}

.spec-label {
    color: #64748b;
    margin-right: 5px;
}

.price-hl {
    color: #e11d48;
    font-size: 18px;
}

.spec-note {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #cbd5e1;
    font-size: 13px;
    color: #94a3b8;
}

/* Ads */
.article-ad-top {
    margin-bottom: 30px;
    text-align: center;
}

.article-ad-bottom {
    margin-top: 30px;
    text-align: center;
}

/* =========================================
   V4.5 Image Aspect Ratio Fix (图片比例修复)
   ========================================= */

/* 1. Global Image Reset */
img {
    height: auto;
    /* Default auto height */
    max-width: 100%;
}

/* 2. Product Card Images (首页 & 选机中心) */
.prod-card a>div {
    /* Fixed container height from original design */
    height: 160px;
    overflow: hidden;
    /* Crop tall images */
    display: block;
    /* Remove flex centering to allow top-align */
    background: #f8fafc;
    position: relative;
}

.prod-card img {
    width: 100%;
    /* Force width to fill container */
    height: auto;
    /* Allow height to adjust naturally */
    min-height: 100%;
    /* Ensure it covers height if image is square/tall */
    object-fit: cover;
    /* Use cover to ensure no gaps for tall/square images */
    object-position: top center;
    /* Focus on top part (usually product headers) */
    padding: 0;
    /* Remove padding */
}

/* 3. Article Thumbnails (文章列表) */
.article-thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Articles use COVER for rich visuals */
}

/* 4. Single Page Spec Image (详情页) */
.spec-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Device specs use CONTAIN to show full device */
    border-radius: 8px;
    background: #fff;
    padding: 10px;
}

/* =========================================
   V4.0 Mobile & Performance Optimization (移动端深度适配)
   ========================================= */

/* 1. 全局移动端重置 */
@media (max-width: 768px) {

    /* 容器边距调整 */
    .container {
        padding: 0 15px;
        /* 稍微减小边距 */
    }

    /* 字体大小适配 */
    body {
        font-size: 15px;
        /* 移动端稍小更精致 */
    }

    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    /* 强制所有 Grid 单栏显示 */
    .grid,
    .grid-cols-3,
    .guide-layout {
        display: block !important;
        /* 降级为块级 */
    }

    /* Rankings Page Mobile Overrides */
    .rankings-header-hero {
        padding: 40px 0 80px;
    }

    .rankings-header-hero h1 {
        font-size: 28px;
    }

    .rank-section {
        padding: 20px;
        margin-bottom: 30px;
    }

    .red-card .badge {
        width: 40px;
        height: 40px;
        font-size: 16px;
        top: -10px;
        right: -5px;
    }

    /* End Rankings Overrides */

    /* Selector Page Mobile Overrides */
    .filter-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .f-label {
        width: 100%;
        margin-bottom: 5px;
    }

    .f-opts {
        width: 100%;
        gap: 8px;
    }

    .f-opts a {
        font-size: 13px;
        padding: 4px 10px;
        background: #fff;
        border: 1px solid #e2e8f0;
    }

    .f-opts a.active {
        border-color: transparent;
    }

    /* End Selector Overrides */

    /* Front Page Mobile Overrides */
    .main-layout-container {
        display: block;
        /* Stack sidebar below content */
    }

    .main-content {
        margin-bottom: 40px;
    }

    .product-grid-home {
        grid-template-columns: repeat(2, 1fr) !important;
        /* Force 2 cols */
        gap: 10px;
    }

    .prod-card h3 {
        font-size: 13px !important;
        height: 36px !important;
    }

    .prod-info {
        padding: 8px !important;
    }

    .article-card-row {
        flex-direction: column;
        gap: 15px;
    }

    .article-thumb-link {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }

    .article-excerpt {
        display: none;
        /* Hide excerpt on mobile for cleaner look */
    }

    /* End Front Page Overrides */

    /* Single Post Overrides */
    .single-container {
        display: block;
        /* Stack Sidebar */
    }

    .site-main {
        margin-bottom: 40px;
    }

    .entry-title {
        font-size: 24px;
    }

    /* Spec Card Mobile */
    .product-spec-card {
        flex-direction: column;
        /* Stack vertically */
        padding: 15px;
    }

    .spec-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        /* Keep square */
        margin: 0 auto;
    }

    .spec-info {
        width: 100%;
    }

    .spec-grid {
        grid-template-columns: 1fr;
        /* Single column specs */
        gap: 10px;
    }

    /* End Single Post Overrides */

    /* 侧边栏处理 */
    .guide-sidebar,
    .sidebar {
        margin-top: 40px;
        border-top: 5px solid #f1f5f9;
        /* 视觉分隔 */
        padding-top: 30px;
    }

    /* Hero Section Mobile */
    .hero-grid {
        height: auto !important;
        /* 高度自适应 */
        display: flex !important;
        flex-direction: column;
    }

    .hero-main {
        height: auto !important;
        min-height: 250px;
    }

    .hero-sub {
        display: none !important;
        /* 移动端隐藏右侧小图，聚焦核心内容，提升首屏速度 */
    }

    /* 工具栏/导航修正 */
    .site-header .container {
        flex-wrap: wrap;
        /* 允许换行 */
        gap: 15px;
    }

    .header-cta {
        display: none;
        /* 移动端头部隐藏CTA，节省空间，依赖底部浮动或Hero */
    }

    /* 移动端菜单 (简单的横向滚动，符合 AMP 极速理念) */
    .main-navigation {
        width: 100%;
        order: 3;
        /* 放到 Logo 下方 */
        overflow-x: auto;
        /* 允许横向滚动 */
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid #eee;
        padding-top: 10px;
        margin-top: 5px;
        padding-bottom: 5px;
    }

    .main-navigation ul {
        display: flex !important;
        gap: 20px !important;
        padding-bottom: 5px !important;
    }

    .main-navigation a {
        padding: 5px 10px;
        background: #f8fafc;
        border-radius: 20px;
        font-size: 14px;
        border: 1px solid #e2e8f0;
    }

    .main-navigation a:hover {
        background: var(--color-primary);
        color: white !important;
    }

    /* Mobile Image Tweaks */
    .prod-card a>div {
        height: 140px;
        /* Slightly smaller on mobile */
    }
}

/* 2. 谷歌 AMP/PageSpeed 性能优化辅助 */

/* 优化点击区域 (Touch Targets) */
a,
button,
input[type="submit"] {
    touch-action: manipulation;
    /* 优化点击延迟 */
}

/* 减少布局偏移 (CLS) */
img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 隐藏不重要的装饰元素 */
@media (max-width: 480px) {

    .breadcrumb,
    .meta-date {
        display: none;
        /* 极简模式 */
    }

    /* 极致优化 Guide 列表 */
    .guide-item h3 {
        font-size: 16px !important;
    }

    .guide-item p {
        font-size: 13px !important;
        color: #666;
    }
}

/* 表格移动端适配 (横向滚动) */
.typography-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}