* { box-sizing: border-box; margin: 0; padding: 0; }
body { font: 14px/1.5 "Segoe UI", Arial, "Microsoft Yahei", sans-serif; color: #333; background: #f5f5f5; }
a { color: #e4393c; text-decoration: none; }
img { max-width: 100%; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 15px; }

.site-header { background: #fff; border-bottom: 2px solid #e4393c; }
.header-inner { display: flex; align-items: center; gap: 20px; padding: 12px 0; flex-wrap: wrap; }
.logo { font-size: 24px; font-weight: 700; color: #e4393c; }
.logo span { color: #333; }
.nav { display: flex; gap: 16px; flex: 1; }
.nav a { color: #333; }
.header-right { display: flex; gap: 10px; align-items: center; }
.search-form input { padding: 4px 8px; border: 1px solid #ddd; }
.header-right select, .search-form button { padding: 4px 8px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; margin: 20px 0; }
.card { background: #fff; border: 1px solid #eee; border-radius: 4px; overflow: hidden; transition: box-shadow .2s; display: block; }
.card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.card .info { padding: 10px; }
.card .title { font-size: 14px; height: 40px; overflow: hidden; color: #333; margin-bottom: 6px; }
.price { color: #e4393c; font-size: 18px; font-weight: 700; }
.pre_price { color: #999; text-decoration: line-through; font-size: 13px; margin-left: 6px; font-weight: 400; }

h1.page-title, h2.page-title { margin: 20px 0 10px; font-size: 20px; border-left: 4px solid #e4393c; padding-left: 10px; }

.detail { display: flex; gap: 30px; background: #fff; padding: 20px; margin-top: 20px; flex-wrap: wrap; }
.detail .gallery { flex: 0 0 400px; max-width: 100%; }
.detail .gallery img { width: 400px; height: 400px; object-fit: cover; border: 1px solid #eee; }
.detail .thumbs { display: flex; gap: 8px; margin-top: 8px; }
.detail .thumbs img { width: 60px; height: 60px; object-fit: cover; }
.detail .main { flex: 1; min-width: 300px; }
.detail .main h1 { font-size: 20px; margin-bottom: 12px; }
.big-price { background: #fff5f5; padding: 12px; margin: 12px 0; }
.big-price .price { font-size: 26px; }

.btn { display: inline-block; padding: 10px 26px; background: #e4393c; color: #fff; border: 0; border-radius: 3px; font-size: 16px; cursor: pointer; }
.btn:hover { background: #c1272d; }
.btn.gray { background: #888; }

table.cart { width: 100%; background: #fff; border-collapse: collapse; margin: 20px 0; }
table.cart th, table.cart td { border: 1px solid #eee; padding: 10px; text-align: center; }
table.cart th { background: #fafafa; }
table.cart img { width: 70px; height: 70px; object-fit: cover; }
table.cart input[type=number] { width: 60px; padding: 4px; }

.checkout { display: flex; gap: 25px; margin-top: 20px; align-items: flex-start; flex-wrap: wrap; }
.checkout form { flex: 1; min-width: 320px; background: #fff; padding: 20px; }
.checkout .summary { width: 320px; background: #fff; padding: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 4px; color: #666; }
.field label b { color: #e4393c; }
.field input, .field select, .field textarea { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 3px; font-size: 14px; }
.summary .row { display: flex; justify-content: space-between; margin: 8px 0; }
.summary .total { border-top: 1px solid #eee; padding-top: 8px; font-size: 18px; color: #e4393c; font-weight: 700; }

.success-box { background: #fff; text-align: center; padding: 60px 20px; margin: 40px 0; }
.success-box h1 { color: #52c41a; margin-bottom: 15px; }
.success-box .btn { margin-top: 20px; }

.alert { padding: 10px 15px; margin: 15px 0; border-radius: 3px; }
.alert.error { background: #fff2f2; color: #e4393c; border: 1px solid #ffd6d6; }

.site-footer { background: #fff; border-top: 1px solid #eee; margin-top: 40px; padding: 25px 0; text-align: center; color: #999; }
.empty { text-align: center; padding: 60px 0; color: #999; }