/* ============================================
   main.css - 完整样式表
   ============================================ */

/* ===== 全局重置 & 工业灰调 ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background:#f5f5f5; color:#222; line-height:1.5; }
a { color:#004080; text-decoration:none; }
a:hover { color:#cc6600; }
.container { max-width:1400px; margin:0 auto; padding:0 20px; }

/* ===== Header ===== */
.header { background:#00264d; padding:12px 0; border-bottom:3px solid #cc6600; }
.header .container { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.logo { color:#fff; font-size:24px; font-weight:700; white-space:nowrap; }
.logo span { color:#cc6600; }
.logo small { font-size:11px; font-weight:400; color:#88b0d0; display:block; text-transform:uppercase; letter-spacing:0.5px; }

/* ===== 搜索框 ===== */
.search-wrapper { flex:1; min-width:280px; position:relative; }
.search-wrapper input { width:100%; padding:10px 16px; border:none; border-radius:4px; font-size:16px; outline:2px solid transparent; background:#fff; }
.search-wrapper input:focus { outline:2px solid #cc6600; }
.search-wrapper button { position:absolute; right:4px; top:4px; bottom:4px; background:#cc6600; color:#fff; border:none; border-radius:3px; padding:0 28px; font-weight:600; cursor:pointer; font-size:15px; }
.search-wrapper button:hover { background:#b35900; }
.search-hint { color:#88b0d0; font-size:12px; margin-top:4px; }
.search-hint kbd { background:#003366; padding:1px 8px; border-radius:3px; color:#ddd; font-size:11px; }

/* ===== 导航链接 ===== */
.nav-links { display:flex; gap:20px; font-size:14px; color:#c0d8e8; flex-wrap:wrap; }
.nav-links a { color:#c0d8e8; font-weight:500; }
.nav-links a:hover { color:#fff; }
.nav-links .cart { color:#cc6600; font-weight:700; }

/* ===== 分类导航 ===== */
.cat-nav { background:#e8e8e8; border-bottom:1px solid #ccc; padding:0 20px; display:flex; gap:4px; flex-wrap:wrap; }
.cat-nav a { padding:10px 18px; font-size:13px; font-weight:500; color:#333; border-radius:3px 3px 0 0; }
.cat-nav a:hover { background:#d0d0d0; color:#000; }
.cat-nav a.active { background:#fff; color:#00264d; border-bottom:3px solid #cc6600; }

/* ===== 面包屑 ===== */
.breadcrumb { font-size:13px; color:#666; padding:12px 20px; background:#fff; margin-bottom:16px; border-bottom:1px solid #eee; }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:4px; }
.breadcrumb li { display:inline; }
.breadcrumb li:not(:last-child):after { content:" › "; color:#999; }
.breadcrumb a { color:#004080; }
.breadcrumb a:hover { color:#cc6600; }

/* ===== 产品网格 ===== */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(185px, 1fr)); gap:12px; }
.product-card { background:#fff; border:1px solid #e0e0e0; border-radius:4px; padding:12px; transition:box-shadow 0.15s, border-color 0.15s; }
.product-card:hover { box-shadow:0 2px 10px rgba(0,0,0,0.07); border-color:#b0b0b0; }
.product-card .img-wrap { background:#f5f5f5; border-radius:3px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:8px; }
.product-card .img-wrap img { width:100%; height:100%; object-fit:contain; }
.product-card .sku { font-size:11px; color:#999; font-family:'Courier New',monospace; }
.product-card .name { font-size:13px; font-weight:500; color:#004080; margin:4px 0; line-height:1.3; }
.product-card .name:hover { color:#cc6600; }
.product-card .price { font-size:16px; font-weight:700; color:#1a1a2e; }

/* ===== 首页 ===== */
.hero { text-align:center; padding:40px 0 20px; }
.hero h1 { font-size:36px; color:#00264d; }
.hero .subtitle { font-size:18px; color:#555; margin-top:8px; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin:30px 0 16px; }
.section-header h2 { font-size:20px; color:#00264d; }
.section-header .view-all { color:#cc6600; font-weight:500; }
.section-header .view-all:hover { color:#b35900; }
.seo-content { background:#fff; padding:24px 30px; border-radius:8px; border:1px solid #e0e0e0; margin:30px 0; }
.seo-content h2 { font-size:18px; color:#00264d; margin-bottom:12px; }
.seo-content p { color:#444; line-height:1.8; margin-bottom:8px; }

/* ===== 产品详情页 ===== */
.product-page .container { max-width:1200px; margin:0 auto; padding:0 20px; }
.product-layout { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin:24px 0; }
.product-gallery .main-image { width:100%; max-width:500px; border:1px solid #eee; border-radius:4px; }
.product-info h1 { font-size:24px; color:#00264d; margin-bottom:8px; }
.product-meta { display:flex; gap:16px; flex-wrap:wrap; font-size:14px; color:#666; margin:12px 0; }
.price-stock { display:flex; gap:24px; align-items:center; font-size:18px; margin:12px 0; }
.price-stock .price { font-weight:700; color:#00264d; }
.price-stock .stock { color:#2e7d32; }
.btn-add { background:#cc6600; color:#fff; border:none; padding:12px 40px; border-radius:4px; font-size:16px; font-weight:600; cursor:pointer; }
.btn-add:hover { background:#b35900; }
.product-description, .product-specs { margin:32px 0; }
.product-specs table { width:100%; border-collapse:collapse; background:#fff; }
.product-specs th, .product-specs td { padding:8px 16px; border:1px solid #ddd; text-align:left; }
.product-specs th { background:#f5f5f5; width:30%; }

/* ===== 分类页 ===== */
.category-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.category-header h1 { font-size:22px; color:#00264d; }
.category-header .count { font-size:14px; color:#666; }
.category-layout { display:flex; gap:24px; }
.sidebar { width:220px; flex-shrink:0; }
.sidebar .filter-group { background:#fff; border-radius:4px; padding:12px 16px; margin-bottom:12px; border:1px solid #ddd; }
.sidebar .filter-group h4 { font-size:12px; color:#555; text-transform:uppercase; border-bottom:1px solid #eee; padding-bottom:6px; margin-bottom:8px; }

/* ===== 页脚 ===== */
.footer { background:#1a1a2e; color:#aaa; padding:30px 20px; margin-top:30px; border-top:3px solid #cc6600; text-align:center; }
.footer a { color:#88b0d0; }
.footer a:hover { color:#fff; }

/* ===== 搜索下拉 ===== */
.search-wrapper { position:relative; }
.search-dropdown { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #ddd; border-radius:4px; max-height:300px; overflow-y:auto; z-index:1000; box-shadow:0 4px 12px rgba(0,0,0,0.1); display:none; }
.search-dropdown .item { display:block; padding:10px 16px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.search-dropdown .item:hover { background:#f5f5f5; }
.search-dropdown .item .sku { font-size:11px; color:#999; font-family:monospace; }
.search-dropdown .item .name { font-size:14px; color:#004080; }
.search-dropdown .item .price { font-size:13px; font-weight:600; color:#1a1a2e; float:right; }
.search-dropdown .no-results { padding:16px; color:#999; text-align:center; }

/* ===== 响应式 ===== */
@media (max-width: 900px) {
    .sidebar { display:none; }
    .header .container { flex-direction:column; align-items:stretch; gap:12px; }
    .nav-links { justify-content:center; }
    .product-grid { grid-template-columns:repeat(auto-fill, minmax(155px, 1fr)); }
    .product-layout { grid-template-columns:1fr; }
    .category-layout { flex-direction:column; }
}
@media (max-width: 500px) {
    .product-grid { grid-template-columns:repeat(2, 1fr); }
    .search-wrapper button { padding:0 12px; font-size:13px; }
    .hero h1 { font-size:24px; }
}