* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; font-size:14px; color:#111; background:#f5f5f5; }
.container { max-width:1200px; margin:0 auto; padding:0 16px; }
a { color:#0066c0; text-decoration:none; }
a:hover { text-decoration:underline; color:#c45500; }

.navbar { background:#232f3e; color:#fff; padding:12px 0; position:sticky; top:0; z-index:100; }
.navbar .container { display:flex; align-items:center; gap:20px; }
.logo { font-size:18px; font-weight:700; color:#fff !important; text-decoration:none !important; }
.search-form { display:flex; flex:1; max-width:500px; }
.search-input { flex:1; padding:8px 12px; border:none; border-radius:4px 0 0 4px; font-size:14px; }
.search-btn { background:#ff9900; color:#232f3e; border:none; padding:8px 16px; border-radius:0 4px 4px 0; font-weight:600; cursor:pointer; }
.search-btn:hover { background:#e88b00; }

.hero { padding:40px 0 20px; text-align:center; }
.hero h1 { font-size:28px; margin-bottom:8px; }
.hero p { color:#555; font-size:16px; }

h2 { font-size:22px; margin:24px 0 12px; }

.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-bottom:24px; }
.cat-btn { display:flex; flex-direction:column; background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:16px; text-decoration:none !important; transition:box-shadow .2s,border-color .2s; }
.cat-btn:hover { box-shadow:0 2px 12px rgba(0,0,0,.1); border-color:#ff9900; }
.cat-btn-name { font-size:15px; font-weight:600; color:#111; margin-bottom:4px; }
.cat-btn-count { font-size:12px; color:#888; }

.cat-section { margin-bottom:32px; }
.cat-section-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.cat-section-header h2 { margin:0; }
.cat-section-header h2 a { color:#111; }
.cat-section-header h2 a:hover { color:#c45500; }
.view-all { font-size:13px; font-weight:600; color:#0066c0 !important; white-space:nowrap; }

.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.product-card { background:#fff; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; transition:box-shadow .2s; }
.product-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.1); }
.product-card img { width:100%; height:200px; object-fit:contain; background:#fff; padding:8px; }
.product-card .info { padding:10px 12px 12px; }
.product-card .title { font-size:13px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:4px; }
.product-card .price { font-size:16px; font-weight:700; color:#b12704; margin-bottom:2px; }
.product-card .rating { font-size:12px; color:#555; }
.product-card .brand { font-size:11px; color:#888; margin-bottom:4px; }

.breadcrumb { font-size:12px; color:#888; padding:12px 0; }
.breadcrumb a { color:#888; }
.breadcrumb a:hover { color:#c45500; }
.breadcrumb span { color:#111; }

.product-detail { display:flex; gap:32px; padding:24px 0; }
.product-detail img { width:400px; max-width:100%; height:auto; object-fit:contain; }
.product-detail .detail-info { flex:1; }
.product-detail .detail-title { font-size:22px; font-weight:700; margin-bottom:8px; }
.product-detail .detail-price { font-size:28px; font-weight:700; color:#b12704; margin-bottom:8px; }
.product-detail .detail-rating { font-size:14px; color:#555; margin-bottom:4px; }
.product-detail .detail-brand { font-size:13px; color:#888; margin-bottom:8px; }
.product-detail .detail-features { margin:12px 0; padding-left:20px; font-size:13px; color:#333; }
.product-detail .detail-features li { margin-bottom:4px; }
.product-detail .buy-btn { display:inline-block; background:#ff9900; color:#232f3e; padding:12px 32px; border-radius:6px; font-size:16px; font-weight:700; text-decoration:none !important; margin-top:16px; }
.product-detail .buy-btn:hover { background:#e88b00; }
.product-detail .detail-desc { margin:12px 0; font-size:13px; color:#333; line-height:1.5; }
.product-detail .detail-avail { font-size:14px; color:#007600; margin-bottom:4px; }
.product-detail .detail-meta { font-size:12px; color:#888; margin-top:16px; }

.pagination { display:flex; justify-content:center; gap:8px; padding:24px 0; }
.pagination a, .pagination span { padding:6px 14px; border:1px solid #ddd; border-radius:4px; font-size:13px; background:#fff; }
.pagination a:hover { background:#f0f0f0; border-color:#aaa; }
.pagination .current { background:#232f3e; color:#fff; border-color:#232f3e; }
.pagination .disabled { color:#ccc; cursor:default; }

.footer { background:#232f3e; color:#ccc; padding:20px 0; margin-top:40px; text-align:center; font-size:12px; }
.footer a { color:#999; text-decoration:none; }
.footer a:hover { color:#fff; text-decoration:underline; }

.legal-page { max-width:800px; margin:0 auto; padding:32px 16px; }
.legal-page h1 { font-size:26px; margin-bottom:4px; }
.legal-page .legal-date { color:#888; font-size:13px; margin-bottom:24px; }
.legal-page h2 { font-size:18px; margin:24px 0 8px; }
.legal-page p { font-size:14px; color:#333; line-height:1.7; margin-bottom:12px; }
.legal-page ul { margin:8px 0 16px 24px; }
.legal-page li { font-size:14px; color:#333; line-height:1.7; margin-bottom:4px; }

.loading-text { color:#888; padding:20px 0; }
.empty-text { color:#888; padding:40px 0; text-align:center; }

.sidebar { display:flex; gap:24px; padding:16px 0; }
.sidebar aside { width:240px; flex-shrink:0; }
.sidebar .content { flex:1; }
.subcat-list { list-style:none; }
.subcat-list li { margin-bottom:6px; }
.subcat-list a { font-size:13px; }
.subcat-list .count { color:#888; font-size:11px; }

.hero-sub { max-width:800px; margin:12px auto 0; font-size:15px; line-height:1.6; color:#555; }

.section-sub { color:#888; font-size:14px; margin-bottom:16px; }

.blog-section { margin-bottom:40px; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.blog-card { background:#fff; border:1px solid #e8e8e8; border-radius:8px; padding:20px; }
.blog-card h3 { font-size:15px; color:#111; margin-bottom:8px; }
.blog-card p { font-size:13px; color:#555; line-height:1.6; }
.blog-card a { color:#0066c0; }

.faq-section { background:#fff; border:1px solid #e8e8e8; border-radius:8px; padding:24px; margin-bottom:40px; }
.faq-section h2 { margin-top:0; }
.faq-list { }
.faq-item { border-bottom:1px solid #f0f0f0; padding:16px 0; }
.faq-item:last-child { border-bottom:none; }
.faq-item h3 { font-size:14px; color:#111; margin-bottom:6px; cursor:pointer; }
.faq-item h3:hover { color:#c45500; }
.faq-item p { font-size:13px; color:#555; line-height:1.5; margin-top:4px; }
.faq-item a { color:#0066c0; }

.tips-section { margin-bottom:40px; }
.tips-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.tip-item { display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid #e8e8e8; border-radius:8px; padding:20px; }
.tip-num { display:flex; align-items:center; justify-content:center; width:36px; height:36px; background:#232f3e; color:#fff; border-radius:50%; font-size:16px; font-weight:700; flex-shrink:0; }
.tip-item h3 { font-size:14px; margin-bottom:4px; }
.tip-item p { font-size:13px; color:#555; line-height:1.5; }

.detail-original-desc, .detail-gen-desc { margin:12px 0; }
.detail-original-desc h3, .detail-gen-desc h3 { font-size:14px; margin-bottom:6px; color:#111; }
.detail-original-desc p, .detail-gen-desc p { font-size:13px; color:#333; line-height:1.6; }

@media (max-width:768px) {
  .product-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .product-detail { flex-direction:column; }
  .product-detail img { width:100%; max-width:300px; margin:0 auto; }
  .sidebar { flex-direction:column; }
  .sidebar aside { width:100%; }
}