:root {
    --primary-color: #3a86ff;
    --primary-dark: #2563eb;
    --text-color: #333;
    --text-light: #666;
    --background-light: #f8f9fa;
    --faq-bg: #e8f2ff;
    --border-color: #e0e0e0;
    --shadow: 0 4px 12px rgba(0,0,0,0.05);
    --transition: all 0.3s ease;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background: var(--background-light);
    color: var(--text-color);
    font-size: 18px;
    line-height: 1.6;
}
.page { display: flex; justify-content: center; padding: 1.5rem 1rem; }
.container {
    max-width: 1100px;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.hero-section { position: relative; overflow: hidden; text-align: center; padding: 2rem; }
.hero-image { width: 100%; max-width: 400px; display: block; margin: 0 auto; transition: var(--transition); border-radius: 8px; box-shadow: var(--shadow); cursor: pointer; }
.hero-title { font-size: 2.5rem; margin: 1.5rem 0; color: var(--primary-dark); font-weight: 700; }

/* 颜色展示 */
.colors-section { padding: 3rem 2rem; background: white; text-align: center; }
.colors-grid { display: flex; justify-content: center; gap: 3rem; margin-top: 2rem; flex-wrap: wrap; }
.color-item { text-align: center; transition: var(--transition); }
.color-swatch { width: 180px; height: 180px; border-radius: 50%; margin: 0 auto 1rem; border: 3px solid white; box-shadow: var(--shadow); transition: var(--transition); cursor: pointer; object-fit: cover; }
.color-swatch:hover { transform: scale(1.05); border-color: var(--primary-color); }
.color-name { font-size: 1.1rem; font-weight: 500; }

/* 尺寸部分 */
.sizes-section { padding: 3rem 2rem; background: var(--background-light); text-align: center; }
.sizes-grid { display: flex; justify-content: center; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; }
.size-item { padding: 2rem; background: white; border-radius: 8px; box-shadow: var(--shadow); transition: var(--transition); display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 250px; }
.size-dimensions { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.5rem; }
.size-description { color: var(--text-light); font-size: 1rem; }

/* 优势部分 */
.advantages-section { padding: 3rem 2rem; background: white; }
.advantages-grid { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; }
.advantage-item { text-align: center; padding: 2rem 1.5rem; background: var(--background-light); border-radius: 8px; box-shadow: var(--shadow); transition: var(--transition); width: 250px; }
.advantage-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.advantage-icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 1rem; }
.advantage-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--primary-dark); }
.advantage-description { color: var(--text-light); font-size: 1rem; }

/* FAQ */
.faq-section { padding: 3rem 2rem; }
.ueeshop-faq-container { width: 100%; max-width: 1450px; margin: 0 auto; background: #fff; padding: 30px; box-sizing: border-box; border-radius: 8px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); }
.faq-item { margin-bottom: 15px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; transition: all 0.3s; background: #fff; }
.faq-item:hover { border-color: #3498db; box-shadow: 0 3px 10px rgba(52, 152, 219, 0.15); }
.faq-question { padding: 18px 50px 18px 25px; background: #f8fafc; cursor: pointer; font-weight: 600; color: #2c3e50; position: relative; font-size: 16px; transition: background 0.3s; }
.faq-question:hover { background: #f0f7fd; }
.faq-question:before { content: attr(data-number); display: inline-block; margin-right: 10px; color: #3498db; font-weight: bold; }
.faq-question:after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #7f8c8d; transition: all 0.3s; }
.faq-item.active .faq-question:after { content: "-"; color: #3498db; }
.faq-answer { padding: 0; background: white; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; line-height: 1.7; }
.faq-item.active .faq-answer { padding: 20px 25px; max-height: 1000px; border-top: 1px solid #e0e0e0; }

/* 响应式 */
@media(max-width:768px){
  .color-swatch { width: 140px; height: 140px; }
  .size-item { min-width: 200px; }
  .advantage-item { width: 200px; }
}