/* =========================================
   1. 全局基础设置
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f5f5f5; color: #333; line-height: 1.6; }
a { text-decoration: none; color: inherit; }

/* =========================================
   2. 顶部导航栏 (所有页面通用)
   ========================================= */
.navbar {
    background-color: #131921;
    color: white;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky; /* 让导航栏吸顶 */
    top: 0;
    z-index: 1000;
}
.navbar .logo { font-size: 20px; font-weight: bold; }
.navbar .nav-links { display: flex; align-items: center; }
.navbar .nav-links a { margin-left: 20px; color: #ccc; font-size: 14px; transition: 0.3s; white-space: nowrap; }
.navbar .nav-links a:hover, .navbar .nav-links a.active { color: #fff; font-weight: bold; }

/* 语言切换器样式 */
.lang-switch { margin-left: 20px; color: #ccc; font-size: 13px; border-left: 1px solid #555; padding-left: 15px; display: flex; align-items: center; }
.lang-switch span { cursor: pointer; padding: 2px 5px; margin: 0 2px; white-space: nowrap; }
.lang-switch span:hover { color: #fff; }
.active-lang { color: #febd69 !important; font-weight: bold; border-bottom: 2px solid #febd69; }

/* =========================================
   3. 首页 (Home) 专属样式
   ========================================= */
/* 大横幅 Hero Section */
.hero-section {
    /* 这里的图片链接可以换成你自己的 */
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://source.unsplash.com/1600x900/?business,store'); 
    background-size: cover;
    background-position: center;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}
.hero-content h1 { font-size: 2.5rem; margin-bottom: 15px; padding: 0 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.hero-content p { font-size: 1.2rem; margin-bottom: 20px; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.cta-button {
    display: inline-block;
    background-color: #febd69;
    color: #111;
    padding: 12px 35px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 10px;
    transition: 0.2s;
}
.cta-button:hover { background-color: #f3a847; transform: scale(1.05); }

/* 关于我们 Section */
.about-section { max-width: 1000px; margin: 40px auto; padding: 0 20px; text-align: center; }
.about-section h2 { margin-bottom: 30px; color: #232f3e; }
.about-grid { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.about-box { 
    background: white; 
    padding: 30px; 
    border-radius: 8px; 
    flex: 1; 
    min-width: 250px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    transition: transform 0.2s;
}
.about-box:hover { transform: translateY(-5px); }
.about-box h3 { color: #c7511f; margin-bottom: 10px; }

/* 页脚 */
footer { background: #232f3e; color: #999; text-align: center; padding: 30px 20px; margin-top: 40px; font-size: 12px; }

/* =========================================
   4. 商城 (Shop) 页面专属样式
   ========================================= */
/* Shop 头部搜索栏 */
.shop-header { 
    background: #232f3e; 
    padding: 15px 20px; 
    display: flex; 
    align-items: center; 
    border-top: 1px solid #3a4553; 
}
.search-wrapper { display: flex; flex: 1; max-width: 800px; margin: 0 auto; }
.search-wrapper input { 
    width: 100%; 
    padding: 10px; 
    border: none; 
    outline: none; 
    border-radius: 4px 0 0 4px; 
    font-size: 14px;
}
/* 搜索按钮样式 (修复：宽度 + 不换行) */
.search-wrapper button { 
    background-color: #febd69; 
    border: none; 
    padding: 8px 30px;      
    cursor: pointer; 
    border-radius: 0 4px 4px 0; 
    font-weight: bold;
    white-space: nowrap;    
    flex-shrink: 0;         
}
.search-wrapper button:hover { background-color: #f3a847; }
.contact-btn { 
    color: white; 
    border: 1px solid white; 
    padding: 8px 15px; 
    border-radius: 4px; 
    font-size: 13px; 
    cursor: pointer; 
    white-space: nowrap; 
    margin-left: 15px; 
}
.contact-btn:hover { background-color: rgba(255,255,255,0.1); }

/* 商城布局容器 */
.container { display: flex; max-width: 1400px; margin: 20px auto; padding: 0 20px; gap: 20px; align-items: flex-start; }

/* 左侧分类侧边栏 */
aside { width: 220px; background: white; padding: 15px; height: fit-content; flex-shrink: 0; border-radius: 4px; border: 1px solid #ddd; }
aside h3 { margin-bottom: 10px; font-size: 16px; font-weight: bold; border-bottom: 1px solid #eee; padding-bottom: 8px; }
aside ul { padding: 0; }
aside li { padding: 8px 10px; cursor: pointer; color: #007185; list-style: none; border-radius: 2px; font-size: 14px; }
aside li:hover { color: #c7511f; background-color: #f2f2f2; }
aside li.active { color: #000; font-weight: bold; background: #e6f7ff; border-left: 3px solid #c7511f; }

/* 手机端分类按钮 (默认隐藏) */
.mobile-filter-btn { 
    display: none; 
    background: white; 
    padding: 12px; 
    text-align: center; 
    border-bottom: 1px solid #ddd; 
    cursor: pointer; 
    font-weight: bold; 
    color: #007185;
}

/* 右侧产品主区域 */
main { flex-grow: 1; width: 100%; }
.product-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 20px; 
}

/* 产品卡片 */
.card { 
    background: white; 
    padding: 15px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    display: flex; 
    flex-direction: column; 
    transition: box-shadow 0.2s;
}
.card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #bbb; }
.card img { 
    width: 100%; 
    height: 200px; 
    object-fit: contain; 
    margin-bottom: 10px; 
    background-color: #fff;
}
.card .category-tag { font-size: 11px; background: #f0f2f2; padding: 2px 6px; border-radius: 3px; width: fit-content; margin-bottom: 5px; color: #565959; }
.card h4 { 
    font-size: 16px; 
    margin-bottom: 5px; 
    color: #007185; 
    line-height: 1.3; 
}
.card .price { font-size: 20px; color: #B12704; font-weight: bold; margin-bottom: 8px; }

/* 产品描述 (修复：自动高度，不隐藏文字) */
.card .desc { 
    font-size: 13px; 
    color: #565959; 
    margin-bottom: 15px; 
    height: auto; 
    min-height: 30px; 
    line-height: 1.5;
}

/* 购买按钮 */
.card button { 
    margin-top: auto; 
    background-color: #ffd814; 
    border: 1px solid #fcd200; 
    padding: 8px; 
    border-radius: 20px; 
    cursor: pointer; 
    width: 100%; 
    font-size: 13px;
    font-weight: 500;
}
.card button:hover { background-color: #f7ca00; }

/* =========================================
   5. 手机端适配 (Responsive) - 彻底修复版
   ========================================= */
@media (max-width: 768px) {
    /* --- 1. 导航栏修复：改为两行，防止挤压 --- */
    .navbar {
        flex-direction: column; /* 上下排列 */
        height: auto;
        padding: 15px 0;
    }
    
    .navbar .logo {
        margin-bottom: 10px; /* Logo 占据第一行 */
    }

    .navbar .nav-links {
        width: 100%;
        justify-content: center; /* 菜单居中显示 */
        flex-wrap: wrap; 
    }

    .navbar .nav-links a {
        margin: 0 10px;      /* 增加间距 */
        margin-left: 0;
        font-size: 15px;
        white-space: nowrap; /* 强制不换行 */
    }

    .lang-switch {
        margin-left: 10px;
        padding-left: 10px;
    }

    /* --- 2. 首页大字修复 --- */
    .hero-content h1 {
        font-size: 1.6rem;
        line-height: 1.3;
        padding: 0 15px;
    }
    
    .hero-content p {
        font-size: 1rem;
        padding: 0 20px;
    }

    /* --- 3. 商城布局调整 --- */
    .container {
        flex-direction: column;
        padding: 10px;
    }
    
    /* 侧边栏和按钮 */
    aside { display: none; width: 100%; margin-bottom: 15px; }
    aside.show { display: block; }
    .mobile-filter-btn { display: block; } 
    .contact-btn { display: none; } 
    
    /* 搜索栏垂直排列 */
    .shop-header { padding: 10px; flex-direction: column; gap: 10px; }
    .search-wrapper { width: 100%; margin: 0; }
    
    /* 产品网格 */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .card { padding: 10px; }
    .card img { height: 140px; }
    .card h4 { font-size: 14px; }
    .card .price { font-size: 16px; }
    .card .desc { font-size: 12px; }
}