<div class="product-detail-container"> <style>:root { /* Color System */ --primary: #F9A826; /* Industrial Yellow */ --primary-hover: #E0961B; --text-main: #1A1A1A; --text-sub: #4A4A4A; --bg-body: #FFFFFF; --bg-card: #F4F5F7; --bg-accent: #111111; /* Shape & Border */ --radius-md: 8px; --radius-lg: 12px; --border-color: #E2E8F0; /* Shadow System */ --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } /* Reset & Base System */ .product-detail-container { max-width: 1200px; margin: 0 auto; padding: 0 5%; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text-main); background: var(--bg-body); line-height: 1.7; overflow-wrap: break-word; word-break: break-word; } .product-detail-container *, .product-detail-container *::before, .product-detail-container *::after { box-sizing: inherit; } /* Typography System - Large Type */ .product-detail-container h1 { font-size: clamp(32px, 5vw, 44px); line-height: 1.2; font-weight: 800; margin-top: 0; margin-bottom: 1rem; letter-spacing: -0.02em; } .product-detail-container h2 { font-size: clamp(24px, 4vw, 32px); line-height: 1.3; font-weight: 700; margin-top: 0; margin-bottom: 1rem; } .product-detail-container h3 { font-size: clamp(20px, 3vw, 24px); line-height: 1.4; font-weight: 700; margin-top: 0; margin-bottom: 0.75rem; } .product-detail-container p { font-size: clamp(18px, 2vw, 20px); color: var(--text-sub); margin-top: 0; margin-bottom: 1.5rem; } /* Image Protocol - Anti-Distortion */ .pd-img-fluid { width: 100%; height: auto; display: block; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .img-placeholder { width: 100%; aspect-ratio: 4/3; background-color: var(--bg-card); border: 2px dashed var(--border-color); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-sub); font-size: 18px; font-weight: 600; } /* Badges (Non-clickable) */ .badge-group { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; } .pd-badge { display: inline-block; padding: 0.4rem 1rem; background: var(--bg-accent); color: #fff; font-size: 16px; font-weight: 600; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.05em; } .pd-badge-primary { background: var(--primary); color: var(--text-main); } /* Layout Sections */ .hero-section { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 5vw, 4rem); } .hero-copy { max-width: 800px; margin: 0 auto clamp(2rem, 4vw, 3rem); } .social-proof { font-size: 18px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; } /* Z-Pattern Features - Mobile Lock strictly applied */ .feature-list { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 5rem); margin-bottom: clamp(4rem, 8vw, 6rem); } .feature-item { display: flex; flex-direction: column; /* Mobile forced single column */ gap: clamp(1.5rem, 4vw, 3rem); } .feature-media { width: 100%; } .feature-copy { width: 100%; display: flex; flex-direction: column; justify-cont