<div class="product-set-container"> <style>/* Design System (CSS Variables) - Kitchen & Fresh Apple Theme */ .product-set-container { --primary: #2E7D32; /* Fresh Apple Green */ --primary-hover: #1B5E20; --accent: #E53935; /* Crisp Apple Red */ --accent-light: #FFCDD2; /* Soft Red/Pink */ --text-main: #37474F; /* Dark Slate Gray */ --text-sub: #607D8B; /* Medium Slate Gray */ --bg-body: #F1F8E9; /* Very Light Green/Off-white */ --bg-card: #FFFFFF; --border-color: #C8E6C9; /* Light Green Border */ --radius-md: 16px; --radius-lg: 24px; --shadow-sm: 0 8px 16px -4px rgba(46, 125, 50, 0.08), 0 4px 8px -4px rgba(46, 125, 50, 0.04); --shadow-lg: 0 20px 40px -8px rgba(46, 125, 50, 0.12), 0 10px 20px -8px rgba(46, 125, 50, 0.06); /* Typography & Spacing System */ --spacing-section: clamp(3rem, 6vw, 5rem); --spacing-module: clamp(2rem, 5vw, 4rem); font-family: 'Nunito', 'Inter', -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-set-container *, .product-set-container *::before, .product-set-container *::after { box-sizing: inherit; } /* Typography Scale */ .product-set-container h1, .product-set-container h2, .product-set-container h3 { font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--primary); margin: 0 0 1rem 0; font-weight: 800; letter-spacing: -0.01em; } .product-set-container h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.25; } .product-set-container .subtitle { font-size: clamp(14px, 2vw, 16px); color: var(--accent); font-weight: 800; margin: 0 0 1rem 0; text-transform: uppercase; letter-spacing: 0.15em; } .product-set-container h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.3; margin: 0 0 1.5rem 0; position: relative; padding-bottom: 0.75rem; } .product-set-container h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 5px; background-color: var(--accent); border-radius: 10px; } .product-set-container h3 { font-size: clamp(20px, 2.5vw, 24px); line-height: 1.4; margin: 0 0 1rem 0; display: flex; align-items: center; gap: 10px; } .product-set-container p { font-size: clamp(16px, 2vw, 18px); color: var(--text-sub); margin: 0 0 1.5rem 0; } /* Badges */ .detail-badge-group { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 2rem; } .detail-badge { display: inline-flex; align-items: center; padding: 10px 20px; background: var(--bg-card); border: 2px solid var(--border-color); border-radius: 20px; font-size: 15px; font-weight: 700; color: var(--primary); box-shadow: var(--shadow-sm); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .detail-badge:hover { transform: translateY(-4px) scale(1.02); border-color: var(--primary); } .detail-badge.accent { background: var(--accent); color: #FFF; border-color: var(--accent); } /* 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-bot