<div class="product-detail-container"> <style>/* Design System Variables */ .product-detail-container { --primary: #32B85F; /* Fresh Apple Green */ --text-main: #1F2937; --text-sub: #4B5563; --bg-body: #FFFFFF; --bg-card: #F9FAFB; --border-color: #E5E7EB; --radius-md: 12px; --radius-lg: 20px; --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Base Container Settings */ max-width: 1200px; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) 5%; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text-main); background-color: var(--bg-body); /* Prevent Text Clipping */ overflow-wrap: break-word; word-break: break-word; } .product-detail-container * { box-sizing: border-box; margin: 0; padding: 0; } /* Typography System */ .product-detail-container h1 { font-size: clamp(34px, 4vw, 44px); line-height: 1.2; font-weight: 800; color: var(--text-main); margin-bottom: 1rem; } .product-detail-container h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.3; font-weight: 700; margin-bottom: 1rem; } .product-detail-container h3 { font-size: clamp(20px, 2.5vw, 24px); line-height: 1.4; font-weight: 600; margin-bottom: 0.75rem; } .product-detail-container p { font-size: clamp(18px, 2vw, 20px); line-height: 1.7; color: var(--text-sub); margin-bottom: 1rem; } .product-detail-container .subtitle { font-size: clamp(20px, 2.5vw, 24px); color: var(--text-sub); font-weight: 400; margin-bottom: 1.5rem; } /* Image Protocol */ .product-detail-container .img-fluid { width: 100%; height: auto; display: block; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .product-detail-container .img-placeholder { width: 100%; aspect-ratio: 1 / 1; background-color: #f3f4f6; border: 2px dashed #9ca3af; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; font-weight: 600; color: #6b7280; padding: 1rem; } /* Non-clickable Badges */ .product-detail-container .badge-wrapper { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; } .product-detail-container .badge { display: inline-flex; align-items: center; background-color: rgba(50, 184, 95, 0.1); color: var(--primary); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } /* Layout Spacing */ .product-detail-container .section-gap { margin-top: clamp(3rem, 8vw, 6rem); } /* Mobile Ordering Lock (Z-Pattern) */ .product-detail-container .feature-item { display: flex; flex-direction: column; /* Mobile First: strictly column */ gap: 2rem; margin-bottom: clamp(3rem, 8vw, 6rem); } .product-detail-container .feature-media { order: 1; /* Force Image Top on Mobile */ width: 100%; } .product-detail-container .feature-copy { order: 2; /* Force Text Bottom on Mobile */ width: 100%; display: flex; flex-direction: column; justify-content: center; } /* Specifications Table */ .product-detail-container .specs-container { background-color: var(--bg-card); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 3rem); } .product-detail-container table { width: 100%; border-collapse: collapse; te