/* 基础变量与重置 */
:root { --bg-color: #F7F6F2; --text-primary: #1A1A1A; --text-secondary: #7A7A7A; --accent: #B5A898; --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 浅黑色 SVG 箭头光标 */
body { 
    background-color: var(--bg-color); 
    color: var(--text-primary); 
    font-family: 'Inter', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    overflow-x: hidden; 
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M4 2L18 12.5L11 14L15 20.5L12.5 22L8.5 15.5L3 20V2Z' fill='%23333333' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"), auto;
}

/* 交互手型 */
a, button, input, textarea, .hover-target, .filter-btn { cursor: pointer; }

h1, h2, h3, .logo, .brand { font-family: 'Noto Serif SC', serif; font-weight: 400; }
a { text-decoration: none; color: inherit; }

/* 导航与动画 */
nav { position: fixed; top: 0; width: 100%; padding: 30px 5vw; display: flex; justify-content: space-between; align-items: center; z-index: 1000; transition: var(--transition); mix-blend-mode: difference; color: white; }
nav.scrolled, body.inner-page nav { padding: 20px 5vw; background: rgba(247, 246, 242, 0.95); backdrop-filter: blur(10px); mix-blend-mode: normal; color: var(--text-primary); }
.logo { font-size: 24px; letter-spacing: 4px; }
.nav-links { display: flex; gap: 40px; list-style: none; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; }
.nav-links a:hover { color: var(--accent); }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s ease-out, transform 1s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay { opacity: 0; transition: opacity 1.5s ease-in 0.3s; }
.reveal-delay.active { opacity: 1; }

/* 首页引导块 & 系列页通用头部 */
#hero { height: 100vh; display: flex; align-items: center; padding: 0 5vw; position: relative; }
.hero-content { flex: 1; z-index: 2; }
.hero-content h1 { font-size: 5rem; line-height: 1.1; margin-bottom: 30px; }
.hero-content p { font-size: 1.1rem; max-width: 300px; color: var(--text-secondary); line-height: 1.8; }
.hero-image-wrapper { position: absolute; right: 0; top: 0; width: 60vw; height: 100vh; overflow: hidden; }
.hero-image { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); animation: zoomOut 2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.scroll-indicator { position: absolute; bottom: 40px; left: 5vw; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; animation: bounce 2s infinite; }
#collections-teaser { padding: 150px 5vw; text-align: center; }
.teaser-content h2 { font-size: 3rem; margin-bottom: 20px; }
.teaser-content p { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 40px; }
.teaser-btn { display: inline-block; padding: 15px 40px; border: 1px solid var(--text-primary); text-transform: uppercase; letter-spacing: 2px; transition: var(--transition); }
.teaser-btn:hover { background: var(--text-primary); color: var(--bg-color); }
.page-header { padding: 200px 5vw 100px; text-align: center; }
.page-header h1 { font-size: 4rem; margin-bottom: 20px; }
.page-header p { font-size: 1.2rem; color: var(--text-secondary); letter-spacing: 2px; text-transform: uppercase; }

/* 系列页产品网格 */
#collections-page { padding: 0 5vw 150px; }
.section-header { display: flex; justify-content: center; margin-bottom: 60px; }
.filters { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
.filter-btn { background: none; border: none; font-family: inherit; font-size: 15px; color: var(--text-secondary); letter-spacing: 1px; position: relative; padding-bottom: 5px; transition: var(--transition); text-transform: uppercase; }
.filter-btn.active, .filter-btn:hover { color: var(--text-primary); }
.filter-btn::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: var(--text-primary); transition: var(--transition); }
.filter-btn.active::after, .filter-btn:hover::after { width: 100%; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 60px 40px; }
.product-card { opacity: 0; transform: translateY(30px); transition: var(--transition); }
.product-card.show { opacity: 1; transform: translateY(0); }
.img-container { width: 100%; height: 450px; overflow: hidden; margin-bottom: 20px; }
.img-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); background: #eee; }
.product-card:hover img { transform: scale(1.05); }
.product-info h3 { font-size: 1.2rem; margin-bottom: 5px; color: var(--text-primary); }
.product-info p { font-size: 0.9rem; color: var(--text-secondary); }

/* =======================================
   详情页样式 (含 3D 展区)
======================================= */
#product-detail-container { padding: 150px 5vw; max-width: 1600px; margin: 0 auto; }
.product-detail-layout { display: flex; gap: 80px; align-items: flex-start; position: relative; margin-bottom: 80px; }

/* 相册容器 */
.product-gallery { 
    flex: 1.2; position: sticky; top: 120px; height: 650px; 
    background: #EFECE6; border-radius: 4px;
    display: flex; justify-content: center; align-items: center; 
    cursor: crosshair; 
}
.product-gallery img { max-width: 100%; max-height: 100%; object-fit: contain; }

.img-zoom-lens {
    position: absolute; border: 1px solid rgba(0,0,0,0.15);
    width: 150px; height: 150px; background-color: rgba(255, 255, 255, 0.3);
    display: none; pointer-events: none; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.img-zoom-result {
    position: absolute; width: calc(100% / 1.2); height: 100%; top: 0;
    left: calc(100% + 80px); background-color: #fff;
    display: none; z-index: 100; pointer-events: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1); border-radius: 4px;
    background-repeat: no-repeat;
}

.product-meta { flex: 1; padding: 20px 0; }
.back-link { display: inline-block; font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 30px; border-bottom: 1px solid transparent; transition: var(--transition); }
.back-link:hover { color: var(--text-primary); border-bottom: 1px solid var(--text-primary); }
.product-title { font-size: 3.5rem; line-height: 1.1; margin-bottom: 10px; }
.product-subtitle { font-size: 1.2rem; color: var(--accent); margin-bottom: 40px; font-family: 'Noto Serif SC', serif; }
.product-desc { font-size: 1.1rem; line-height: 1.8; color: var(--text-secondary); margin-bottom: 60px; }
.product-specs h3 { font-size: 1.5rem; margin-bottom: 20px; }
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 60px; }
.spec-table tr { border-bottom: 1px solid rgba(0,0,0,0.08); }
.spec-table td { padding: 18px 0; font-size: 1rem; color: var(--text-primary); }
.spec-table td.spec-label { color: var(--text-secondary); width: 120px; vertical-align: top; }
.action-btn { background: var(--text-primary); color: #fff; border: none; padding: 20px; width: 100%; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px; transition: var(--transition); }
.action-btn:hover { background: var(--accent); }

/* V7 专属：3D 交互区样式 */
.product-3d-section {
    width: 100%;
    margin-top: 100px;
    padding-top: 100px;
    border-top: 1px solid rgba(0,0,0,0.05);
    text-align: center;
}
.product-3d-section h2 { font-size: 2.5rem; margin-bottom: 15px; }
.product-3d-section p { color: var(--text-secondary); margin-bottom: 40px; font-size: 1rem; }
.model-container {
    width: 100%;
    height: 700px; /* 3D视窗的高度 */
    background: #EFECE6; /* 与主图背景一致的暖灰色 */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.03);
    cursor: grab;
}
.model-container:active { cursor: grabbing; }

/* Web Component 核心样式设定 */
model-viewer {
    width: 100%;
    height: 100%;
    --poster-color: transparent;
    outline: none;
}

/* 工艺手风琴及其他 */
#craft { padding: 100px 5vw 150px; background-color: #EFECE6; }
.craft-container { display: flex; gap: 100px; align-items: center; }
.craft-text, .craft-visual { flex: 1; }
.craft-visual { height: 600px; overflow: hidden; }
.craft-visual img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease; }
.craft-text h2 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 50px; }
.feature-item { padding: 25px 0; border-bottom: 1px solid rgba(0,0,0,0.1); }
.feature-title { font-size: 1.5rem; font-family: 'Noto Serif SC', serif; color: var(--text-secondary); transition: var(--transition); display: flex; justify-content: space-between; }
.feature-desc { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; font-size: 1rem; line-height: 1.6; color: var(--text-secondary); margin-top: 0; }
.feature-item.active .feature-title { color: var(--text-primary); }
.feature-item.active .feature-desc { max-height: 150px; margin-top: 20px; }

/* 故事与联系 */
.story-content, .contact-section { padding: 0 5vw 100px; }
.story-block { display: flex; align-items: center; gap: 80px; margin-bottom: 100px; }
.story-text { flex: 1; }
.story-text h2 { font-size: 2.5rem; margin-bottom: 30px; }
.story-text p { font-size: 1.1rem; line-height: 1.8; color: var(--text-secondary); margin-bottom: 20px; }
.story-img { flex: 1; height: 500px; overflow: hidden; }
.story-img img { width: 100%; height: 100%; object-fit: cover; }
.contact-container { display: flex; gap: 100px; max-width: 1200px; margin: 0 auto; }
.contact-info, .contact-form-wrapper { flex: 1; }
.contact-info h2 { font-size: 2.5rem; margin-bottom: 20px; }
.info-item { margin-bottom: 30px; }
.form-group input, .form-group textarea { width: 100%; padding: 15px 0; border: none; border-bottom: 1px solid #ddd; background: transparent; font-family: inherit; font-size: 1rem; color: var(--text-primary); outline: none; margin-bottom: 30px;}
.submit-btn { background: var(--text-primary); color: #fff; border: none; padding: 15px 40px; font-size: 1rem; text-transform: uppercase; }

footer { padding: 80px 5vw; text-align: center; border-top: 1px solid rgba(0,0,0,0.05); }
.footer-content .brand { font-size: 2rem; margin-bottom: 20px; }
.footer-content p { font-size: 0.9rem; color: var(--text-secondary); }

@keyframes zoomOut { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }

@media (max-width: 900px) {
    .product-detail-layout { flex-direction: column; }
    .product-gallery { position: relative; top: 0; height: 400px; width: 100%; }
    .img-zoom-result { left: 0; top: 100%; z-index: 999; }
    .product-title { font-size: 2.5rem; }
    .model-container { height: 400px; }
}
@media (max-width: 768px) {
    .craft-container, #hero, .story-block, .contact-container { flex-direction: column; gap: 40px; }
    .hero-image-wrapper { position: relative; width: 100vw; height: 60vh; }
    .hero-content h1 { font-size: 3rem; margin-top: 50px;}
    .craft-visual, .story-img { height: 400px; width: 100%; }
    .page-header { padding-top: 150px; }
    .nav-links { display: none; }
}