body { font-family: 'Segoe UI', Arial, sans-serif; background: #f6f8fa; margin: 0; }
header { background: #24292f; color: #fff; padding: 20px 0; text-align: center; }
header nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
header nav a { color: #fff; margin: 0 15px; text-decoration: none; font-weight: bold; padding: 8px 18px; border-radius: 5px; transition: background .2s; font-size: 1.1em; }
header nav a:hover { text-decoration: underline; background: #444; }
main { max-width: 900px; margin: 30px auto; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px #ddd; padding: 30px; }
h1, h2 { color: #24292f; }
.card-list { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; padding: 0; }
.card-list li { background: #f0f4f8; border-radius: 8px; padding: 18px 24px; min-width: 120px; text-align: center; box-shadow: 0 1px 3px #eee; transition: box-shadow .2s; font-size: 1.1em; }
.card-list li:hover { box-shadow: 0 4px 12px #bbb; background: #e6f7ff; }
footer { text-align: center; color: #888; padding: 18px 0; font-size: 14px; }
img { max-width: 350px; border-radius: 8px; box-shadow: 0 2px 8px #eee; }
.article-content { background: #f9f9f9; padding: 18px; border-radius: 8px; }

/* Accordion styles */
.accordion-list { margin: 0; padding: 0; }
.accordion-item { margin-bottom: 10px; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px #eee; }
.accordion-btn { width: 100%; text-align: left; background: #f0f4f8; color: #24292f; border: none; outline: none; padding: 16px 20px; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: background 0.2s; border-bottom: 1px solid #e0e0e0; }
.accordion-btn:hover, .accordion-btn.active { background: #e6f7ff; }
.accordion-panel { display: none; background: #fff; padding: 16px 20px; border-top: none; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 移动端适配 */
@media (max-width: 600px) {
  html { font-size: 16px; }
  main { padding: 10px; max-width: 100vw; }
  .card-list { flex-direction: column; gap: 10px; }
  header { padding: 12px 0; font-size: 18px; }
  header nav { flex-direction: column; gap: 0; }
  header nav a { display: block; margin: 6px 0; font-size: 1.2em; padding: 12px 0; }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.1em; }
  img { max-width: 100%; }
  button, .btn { font-size: 1.1em; padding: 12px 0; min-width: 90px; }
  .accordion-btn { font-size: 1.1em; padding: 14px 10px; }
  .accordion-panel { padding: 12px 10px; }
}

.product-card { display: flex; flex-direction: column; align-items: center; background: #f0f4f8; border-radius: 8px; padding: 16px 10px; min-width: 140px; box-shadow: 0 1px 3px #eee; transition: box-shadow .2s; }
.product-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; }
.product-thumb { width: 110px; height: 110px; object-fit: cover; border-radius: 6px; margin-bottom: 10px; box-shadow: 0 1px 4px #ddd; background: #fff; }
.product-title { font-weight: bold; font-size: 1.08em; margin-bottom: 6px; text-align: center; }
.product-price { color: #e67e22; font-size: 1.1em; font-weight: bold; margin-bottom: 2px; }

@media (max-width: 600px) {
  .product-card { min-width: 0; padding: 10px 2px; }
  .product-thumb { width: 80px; height: 80px; }
  .product-title { font-size: 1em; }
  .product-price { font-size: 1em; }
}

.product-gallery { display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.gallery-arrow { background: #f0f4f8; border: none; font-size: 2em; padding: 0 16px; cursor: pointer; color: #888; border-radius: 6px; transition: background .2s; }
.gallery-arrow:hover { background: #e6f7ff; color: #24292f; }
.gallery-images { display: flex; align-items: center; justify-content: center; min-width: 120px; min-height: 120px; }
.gallery-img { max-width: 320px; max-height: 320px; border-radius: 8px; box-shadow: 0 2px 8px #eee; background: #fff; margin: 0 8px; display: none; }

@media (max-width: 600px) {
  .gallery-img { max-width: 90vw; max-height: 40vw; }
  .gallery-arrow { font-size: 1.5em; padding: 0 8px; }
}

.sku-table { border-collapse: collapse; width: 100%; margin: 18px 0; background: #fff; }
.sku-table th, .sku-table td { border: 1px solid #e0e0e0; padding: 8px 6px; text-align: center; font-size: 1em; }
.sku-table th { background: #f0f4f8; font-weight: bold; }
.sku-table img { border-radius: 4px; box-shadow: 0 1px 3px #eee; }
@media (max-width: 600px) {
  .sku-table th, .sku-table td { font-size: 0.95em; padding: 4px 2px; }
  .sku-table img { max-width: 40px; max-height: 40px; }
}

.sku-attrs { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0; }
.sku-attr-block { background: #f9f9f9; border-radius: 8px; padding: 12px 18px; min-width: 120px; box-shadow: 0 1px 3px #eee; }
.sku-attr-title { font-weight: bold; color: #333; margin-bottom: 8px; }
.sku-attr-values { display: flex; flex-wrap: wrap; gap: 8px; }
.sku-attr-value { background: #e0f2f1; border-radius: 5px; padding: 4px 10px; font-size: 1em; display: flex; align-items: center; gap: 4px; }
.sku-attr-value img { margin-right: 3px; border-radius: 3px; box-shadow: 0 1px 2px #eee; }
@media (max-width: 600px) {
  .sku-attrs { gap: 8px; }
  .sku-attr-block { min-width: 0; padding: 8px 4px; }
  .sku-attr-title { font-size: 1em; }
  .sku-attr-value { font-size: 0.95em; padding: 3px 6px; }
  .sku-attr-value img { max-width: 20px; max-height: 20px; }
} 

.product-detail-flex { display: flex; gap: 32px; align-items: flex-start; }
.product-img-col { flex: 1.1; min-width: 260px; }
.product-sku-col { flex: 1.2; min-width: 220px; }
.product-main-img-wrap { text-align: center; margin-bottom: 12px; position: relative; }
.product-main-img { max-width: 340px; max-height: 340px; border-radius: 10px; box-shadow: 0 2px 8px #eee; background: #fff; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: #fff; border: none; font-size: 2em; color: #888; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; box-shadow: 0 1px 4px #eee; transition: background .2s; z-index: 2; }
.gallery-arrow.left { left: 0; }
.gallery-arrow.right { right: 0; }
.gallery-arrow:hover { background: #e6f7ff; color: #2193b0; }
.product-thumb-row { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.product-thumb-mini { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; box-shadow: 0 1px 3px #eee; cursor: pointer; border: 2px solid #fff; transition: border .2s; }
.product-thumb-mini:hover { border: 2px solid #2193b0; }
.product-brand { color: #888; font-size: 0.95em; letter-spacing: 1px; margin-bottom: 6px; }
.product-price-main { color: #e67e22; font-size: 1.5em; font-weight: bold; margin-bottom: 12px; }
.color-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.color-btn { background: #fff; border: 2px solid #eee; border-radius: 8px; padding: 4px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 54px; transition: border .2s, box-shadow .2s; }
.color-btn.active, .color-btn:hover { border: 2px solid #2193b0; box-shadow: 0 2px 8px #b3e0f7; }
.color-btn-img { width: 38px; height: 38px; object-fit: cover; border-radius: 5px; margin-bottom: 2px; }
.color-btn-label { font-size: 0.95em; color: #333; }
.size-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.size-btn { background: #fff; border: 2px solid #eee; border-radius: 8px; padding: 8px 18px; font-size: 1em; cursor: pointer; transition: border .2s, box-shadow .2s; }
.size-btn.active, .size-btn:hover { border: 2px solid #2193b0; box-shadow: 0 2px 8px #b3e0f7; color: #2193b0; }
.buy-link-btn { display: inline-block; background: #111; color: #fff; font-weight: bold; border-radius: 8px; padding: 12px 32px; margin: 18px 0 12px 0; text-decoration: none; font-size: 1.1em; transition: background .2s; }
.buy-link-btn:hover { background: #2193b0; color: #fff; }
.service-info { color: #666; font-size: 1em; margin-top: 18px; }
.service-icon { margin-right: 6px; }
@media (max-width: 900px) {
  .product-detail-flex { flex-direction: column; gap: 18px; }
  .product-img-col, .product-sku-col { min-width: 0; }
  .product-main-img { max-width: 90vw; max-height: 40vw; }
  .product-thumb-mini { width: 40px; height: 40px; }
  .color-btn-img { width: 28px; height: 28px; }
  .color-btn, .size-btn { min-width: 38px; font-size: 0.95em; padding: 6px 8px; }
  .buy-link-btn { padding: 10px 18px; font-size: 1em; }
} 

.product-thumb-row.scroll-x { overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }
.product-thumb-row.scroll-x .product-thumb-mini { display: inline-block; margin-right: 6px; }
.arrow-icon { font-size: 1.2em; display: inline-block; vertical-align: middle; }
.gallery-arrow { width: 28px; height: 28px; font-size: 1.2em; }
@media (max-width: 900px) {
  .gallery-arrow { width: 22px; height: 22px; font-size: 1em; }
}