/* 基础重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", SimSun, sans-serif; background-color: #f5f5f5; color: #333; line-height: 1.5; }
a { text-decoration: none; color: #666; transition: color 0.3s; }
a:hover { color: #c81623; }
ul, li { list-style: none; }
.container { width: 1200px; margin: 0 auto; }

/* 颜色变量与通用特效 */
:root {
    --gold: #d4af37;
    --gold-light: #f3e5ab;
    --silver: #c0c0c0;
    --red: #c81623;
}
.text-gold { color: var(--gold); }
.text-red { color: var(--red); }
.bg-gold { background-color: var(--gold); color: #fff; }
.bg-red { background-color: var(--red); color: #fff; }

/* 动效 */
.hover-up { transition: all 0.3s ease; }
.hover-up:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-color: var(--gold); }
@keyframes shine {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}
.btn-gold {
    display: inline-block; padding: 10px 25px; background: linear-gradient(90deg, #d4af37 0%, #ffd700 50%, #d4af37 100%);
    background-size: 200% 100%; color: #fff; font-weight: bold; border-radius: 2px; border: none; cursor: pointer;
    transition: all 0.3s;
}
.btn-gold:hover { animation: shine 1.5s infinite; color: #fff; }

/* 顶部栏 2016风格 */
.topbar { background-color: #e3e4e5; height: 30px; line-height: 30px; font-size: 12px; }
.topbar .right { float: right; }
.topbar .right a { margin-left: 15px; }

/* 头部 (Logo与搜索) */
.header { padding: 30px 0; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 2px solid var(--gold); }
.logo { font-size: 32px; font-weight: bold; color: var(--gold); display: flex; align-items: center; }
.logo span { font-size: 14px; color: #999; margin-left: 10px; font-weight: normal; border-left: 1px solid #ccc; padding-left: 10px; }
.search-box { display: flex; border: 2px solid var(--gold); width: 500px; }
.search-box input { flex: 1; padding: 10px; border: none; outline: none; }
.search-box button { width: 100px; background-color: var(--gold); border: none; color: #fff; font-size: 16px; cursor: pointer; }

/* 导航栏 */
.navbar { background-color: #fff; border-bottom: 1px solid #ddd; }
.nav-list { display: flex; }
.nav-list li a { display: block; padding: 15px 30px; font-size: 16px; font-weight: bold; color: #333; }
.nav-list li a:hover, .nav-list li.active a { color: var(--gold); border-bottom: 2px solid var(--gold); }

/* 首页 Banner */
.banner { height: 400px; background: linear-gradient(135deg, #2a2a2a, #4a4a4a); position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.banner h1 { color: var(--gold); font-size: 48px; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); z-index: 1; }
.banner::after { content: ''; position: absolute; top:0; left:-100%; width:50%; height:100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 3s infinite; }

/* 首页 模块标题 */
.section-title { font-size: 24px; border-bottom: 2px solid #333; padding-bottom: 10px; margin: 40px 0 20px; display: flex; justify-content: space-between; align-items: flex-end; }
.section-title span { font-size: 14px; color: #999; font-weight: normal; }

/* 商品展示网格 */
.goods-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.goods-item { width: 285px; background: #fff; border: 1px solid #eee; padding: 20px; text-align: center; }
.goods-item img { width: 200px; height: 200px; object-fit: contain; margin-bottom: 15px; transition: transform 0.5s; }
.goods-item:hover img { transform: scale(1.05); }
.goods-item h3 { font-size: 14px; color: #333; height: 40px; overflow: hidden; margin-bottom: 10px; font-weight: normal; }
.goods-item .price { color: var(--red); font-size: 20px; font-weight: bold; }
.goods-item .sales { font-size: 12px; color: #999; margin-top: 5px; }

/* 排行榜特有 */
.rank-list { display: flex; gap: 20px; }
.rank-col { flex: 1; background: #fff; padding: 20px; border: 1px solid #eee; }
.rank-col h3 { text-align: center; color: var(--gold); border-bottom: 1px dashed #ccc; padding-bottom: 10px; margin-bottom: 15px; }
.rank-item { display: flex; align-items: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f5f5f5; }
.rank-num { width: 24px; height: 24px; background: #ccc; color: #fff; text-align: center; line-height: 24px; font-weight: bold; margin-right: 15px; border-radius: 50%; }
.rank-item:nth-child(2) .rank-num { background: #c81623; }
.rank-item:nth-child(3) .rank-num { background: #d4af37; }
.rank-item:nth-child(4) .rank-num { background: #c0c0c0; }
.rank-item img { width: 60px; height: 60px; border: 1px solid #eee; margin-right: 10px; }
.rank-item p { font-size: 12px; height: 36px; overflow: hidden; }
.rank-item .price { color: var(--red); font-weight: bold; }

/* 商品详情页 */
.detail-box { background: #fff; padding: 20px; display: flex; margin-top: 20px; }
.detail-img { width: 400px; height: 400px; border: 1px solid #eee; margin-right: 40px; text-align: center; }
.detail-img img { width: 100%; height: 100%; object-fit: contain; }
.detail-info { flex: 1; }
.detail-info h1 { font-size: 24px; margin-bottom: 15px; }
.detail-info .price-panel { background: #f9f9f9; padding: 20px; margin-bottom: 20px; border-top: 2px solid var(--gold); }
.detail-info .price-panel .price { font-size: 30px; color: var(--red); font-weight: bold; }
.detail-info .meta { font-size: 14px; color: #666; margin-bottom: 20px; }
.detail-info .action { margin-top: 40px; }

/* 店铺列表 & 详情 */
.shop-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.shop-item { width: 386px; background: #fff; padding: 30px; text-align: center; border: 1px solid #eee; }
.shop-item:hover { border-color: var(--gold); }
.shop-logo { width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--gold-light); margin: 0 auto 15px; overflow: hidden; }
.shop-banner { background: url('https://via.placeholder.com/1200x200/d4af37/fff?text=Shop+Banner') center center; height: 200px; margin-top: 20px; position: relative; }
.shop-banner .shop-title { position: absolute; bottom: 20px; left: 50px; color: #fff; font-size: 32px; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }

/* 表单 (登录/注册) */
.form-container { width: 400px; margin: 50px auto; background: #fff; padding: 40px; border-top: 3px solid var(--gold); box-shadow: 0 0 10px rgba(0,0,0,0.05); }
.form-title { font-size: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 25px; text-align: center; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; color: #666; }
.form-group input { width: 100%; padding: 10px; border: 1px solid #ccc; transition: border 0.3s; }
.form-group input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 5px rgba(212, 175, 55, 0.3); }

/* 底部 */
.footer { background: #333; color: #ccc; padding: 40px 0; margin-top: 50px; text-align: center; }
.footer p { margin-bottom: 10px; }