<div class="product-detail-container"> <style>/* === 1. Design System & CSS Variables === */ .product-detail-container { --primary: #E65100; /* Industrial Amber/Orange */ --bg-body: #FFFFFF; --bg-card: #F4F5F7; --text-main: #111827; --text-sub: #4B5563; --border-color: #E5E7EB; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 2px 4px rgba(0,0,0,0.05); --shadow-lg: 0 10px 20px -5px rgba(0,0,0,0.1); --space-section: clamp(2.5rem, 6vw, 5rem); max-width: 1200px; margin: 0 auto; padding: 0 5%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text-main); box-sizing: border-box; background-color: var(--bg-body); overflow: hidden; /* Prevent horizontal spill */ } .product-detail-container *, .product-detail-container *::before, .product-detail-container *::after { box-sizing: border-box; overflow-wrap: break-word; word-break: break-word; } /* === 2. Typography System (Large Types) === */ .product-detail-container h1 { font-size: clamp(32px, 5vw, 44px); font-weight: 800; line-height: 1.2; margin: 0 0 1rem 0; color: var(--text-main); letter-spacing: -0.02em; } .product-detail-container h2 { font-size: clamp(24px, 4vw, 32px); font-weight: 700; line-height: 1.3; margin: 0 0 1rem 0; color: var(--text-main); } .product-detail-container h3 { font-size: clamp(20px, 3vw, 24px); font-weight: 600; line-height: 1.4; margin: 0 0 0.75rem 0; color: var(--text-main); } .product-detail-container p { font-size: clamp(18px, 2.5vw, 20px); line-height: 1.7; margin: 0 0 1.5rem 0; color: var(--text-sub); } .product-detail-container .subtitle { font-size: clamp(18px, 2.5vw, 22px); color: var(--text-sub); font-weight: 500; margin-bottom: 2rem; } .product-detail-container .text-highlight { color: var(--primary); font-weight: 700; } /* === 3. Image & Media Protocol === */ /* Fluid Image Style (Option A) */ .product-detail-container .media-fluid { width: 100%; height: auto; display: block; border-radius: var(--radius-md); background: var(--bg-card); /* Placeholder background */ } .product-detail-container .image-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; font-size: 18px; color: var(--text-sub); font-weight: 600; text-align: center; padding: 1rem; } /* === 4. Layout & Mobile Ordering Lock === */ .pd-section { margin-bottom: var(--space-section); padding-top: 1rem; } /* Hero Section */ .hero-section { text-align: center; margin-top: 2rem; } .visual-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 2rem; } .static-badge { background: var(--bg-card); color: var(--text-main); padding: