<div class="product-detail-container"> <style>/* Design System (CSS Variables) - Fresh Kitchen Theme */ .product-detail-container { --primary: #EA580C; /* Orange 600 - Appetizing & Tropical */ --primary-hover: #C2410C; --text-main: #334155; /* Slate 700 */ --text-sub: #64748B; /* Slate 500 */ --bg-body: #FFFFFF; --bg-card: #FFF7ED; /* Orange 50 */ --border-color: #FFEDD5; /* Orange 100 */ --radius-md: 12px; --radius-lg: 20px; --shadow-sm: 0 4px 12px rgba(234, 88, 12, 0.06); --shadow-lg: 0 12px 32px rgba(234, 88, 12, 0.1); /* Typography & Spacing System */ --spacing-section: clamp(2.5rem, 6vw, 5rem); --spacing-module: clamp(2rem, 5vw, 4rem); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text-main); background-color: var(--bg-body); max-width: 1200px; margin: 0 auto; padding: 0 5%; box-sizing: border-box; overflow-wrap: break-word; word-break: break-word; line-height: 1.7; } .product-detail-container *, .product-detail-container *::before, .product-detail-container *::after { box-sizing: inherit; } /* Typography Scale */ .product-detail-container h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.2; color: var(--primary); margin: 0 0 1rem 0; font-weight: 800; letter-spacing: -0.02em; } .product-detail-container h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.3; color: var(--primary); margin: 0 0 1.5rem 0; font-weight: 700; } .product-detail-container h3 { font-size: clamp(20px, 2.5vw, 24px); line-height: 1.4; color: var(--primary); margin: 0 0 1rem 0; font-weight: 600; } .product-detail-container p { font-size: clamp(16px, 2vw, 18px); color: var(--text-sub); margin: 0 0 1.5rem 0; } /* Badges (Non-interactive) */ .detail-badge-group { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 2rem; } .detail-badge { display: inline-flex; align-items: center; padding: 8px 18px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 30px; font-size: 15px; font-weight: 600; color: var(--primary); box-shadow: var(--shadow-sm); } /* Image Protocol & Placeholders */ .img-placeholder { width: 100%; background-color: var(--bg-card); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; } .img-placeholder img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); transition: transform 0.4s ease; } .img-placeholder:hover img { transform: scale(1.03); } .standalone-img { max-width: 800px; margin: 0 auto var(--spacing-section) auto; } /* Modules */ .hero-section { text-align: center; margin-top: 3rem; margin-bottom: var(--spacing-section); } .hero-section .detail-badge-group { justify-content: center; } /* Z-Pattern Features */ .feature-list { display: flex; flex-direction: column; gap: var(--spacing-section); margin-bottom: var(--spacing-section); } .feature-item { display: flex; flex-direction: column; gap: 2rem; align-items: center; } .feature-media, .feature-copy { width: 100%; } /* Specs Table */ .specs-section { margin-bottom: var(--spacing-section); } .specs-table-wrapper { background: var(--bg-card); border-radius: var(--radius-lg); padding: clamp(1.5rem