{"version":"1.0","directionName":"Ectoin & Ceramides: The Molecular D...","globalCss":":root {\n --bg-page: #0D1117;\n --text-primary: #F0F6FC;\n --text-muted: #8B949E;\n --brand-primary: #58A6FF;\n --bg-secondary: #161B22;\n --accent: #56D364;\n --font-heading: 'Syne', sans-serif;\n --font-body: 'Inter', sans-serif;\n --radius-large: 40px;\n --radius-pill: 100px;\n --transition-fluid: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n --c-bg: #0D1117;\n --c-ink: #F0F6FC;\n --c-primary: #0f172a;\n --c-accent: #56D364;\n --c-secondary: #090d18;\n --c-success: #0f172a;\n --theme-primary: #0f172a;\n --theme-bg: #0D1117;\n --theme-ink: #F0F6FC;\n --theme-accent: #56D364;\n --theme-secondary: #090d18;\n --theme-success: #0f172a;\n --bg: #0D1117;\n --ink: #F0F6FC;\n --border: #cfd0d4;\n}\n\n/* Reset & Tokens */\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n \n \n\n \n\n /* Futurist Glassmorphic Floating Header */\n[data-layout-root] .glass-header {\n position: fixed;\n top: 24px;\n left: 50%;\n transform: translateX(-50%);\n width: 90%;\n max-width: 1200px;\n height: 72px;\n background: rgba(22, 27, 34, 0.7);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border: 1px solid rgba(88, 166, 255, 0.2);\n border-radius: var(--radius-pill);\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 32px;\n z-index: 100;\n transition: var(--transition-fluid);\n }\n\n[data-layout-root] .glass-header:hover {\n border-color: var(--brand-primary);\n box-shadow: 0 0 30px rgba(88, 166, 255, 0.15);\n width: 92%;\n }\n\n[data-layout-root] .ds-logo-container a {\n font-family: var(--font-heading);\n font-size: 1.5rem;\n font-weight: 800;\n color: var(--text-primary);\n text-decoration: none;\n letter-spacing: -1px;\n }\n\n[data-layout-root] .ds-logo-container span {\n color: var(--accent);\n }\n\n[data-layout-root] .ds-nav-links {\n display: flex;\n gap: 32px;\n }\n\n[data-layout-root] .ds-nav-links a {\n color: var(--text-muted);\n text-decoration: none;\n font-size: 0.9rem;\n font-weight: 500;\n transition: color 0.3s ease;\n }\n\n[data-layout-root] .ds-nav-links a:hover, .ds-nav-links a.active {\n color: var(--text-primary);\n }\n\n[data-layout-root] .header-actions {\n display: flex;\n align-items: center;\n gap: 20px;\n }\n\n[data-layout-root] .action-btn {\n background: none;\n border: none;\n color: var(--text-muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 0.3s ease;\n }\n\n[data-layout-root] .action-btn:hover {\n color: var(--brand-primary);\n }\n\n[data-layout-root] .action-btn svg {\n width: 20px;\n height: 20px;\n fill: currentColor;\n }\n\n /* Hide desktop items for dynamic responsiveness */\n[data-layout-root] .mobile-menu-btn {\n display: none;\n }\n\n /* Core Layout: Cellular Cohesion Opening */\n[data-layout-root] .hero-section {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n padding-top: 120px;\n padding-bottom: 80px;\n background: radial-gradient(circle at 80% 20%, rgba(86, 211, 100, 0.08) 0%, transparent 50%),\n radial-gradient(circle at 20% 80%, rgba(88, 166, 255, 0.08) 0%, transparent 50%);\n overflow: hidden;\n }\n\n[data-layout-root] .ds-grid-container {\n width: 90%;\n max-width: 1400px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1.2fr 1fr;\n gap: 60px;\n align-items: center;\n }\n\n /* Abstract Cohesion Visual Block */\n[data-layout-root] .cohesion-canvas {\n position: relative;\n width: 100%;\n height: 600px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n /* High Gloss Dynamic Floating Shapes */\n[data-layout-root] .organic-shape {\n position: absolute;\n border-radius: var(--radius-large);\n mix-blend-mode: screen;\n filter: blur(2px);\n transition: transform 12s infinite alternate ease-in-out;\n }\n\n /* Floating Molecule 1 - Green Tea Ectoin */\n[data-layout-root] .shape-1 {\n width: 320px;\n height: 320px;\n background: linear-gradient(135deg, rgba(86, 211, 100, 0.25) 0%, rgba(13, 17, 23, 0.9) 100%);\n border: 2px solid rgba(86, 211, 100, 0.4);\n top: 10%;\n left: 10%;\n border-radius: 53% 47% 70% 30% / 40% 60% 40% 60%;\n animation: float-slow 15s infinite ease-in-out;\n }\n\n /* Floating Molecule 2 - Ceramides */\n[data-layout-root] .shape-2 {\n width: 280px;\n height: 280px;\n background: linear-gradient(135deg, rgba(88, 166, 255, 0.25) 0%, rgba(13, 17, 23, 0.9) 100%);\n border: 2px solid rgba(88, 166, 255, 0.4);\n bottom: 12%;\n right: 12%;\n border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n animation: float-medium 12s infinite ease-in-out;\n }\n\n /* Floating Molecule 3 - Moisture Shield */\n[data-layout-root] .shape-3 {\n width: 180px;\n height: 180px;\n background: linear-gradient(135deg, rgba(240, 246, 252, 0.1) 0%, rgba(13, 17, 23, 0.9) 100%);\n border: 1.5px dashed rgba(240, 246, 252, 0.3);\n top: 40%;\n left: 40%;\n border-radius: 40% 60% 50% 50% / 50% 50% 40% 60%;\n animation: float-fast 8s infinite ease-in-out;\n }\n\n /* Interlocking behavior simulator */\n[data-layout-root] .cohesion-canvas:hover .shape-1 {\n transform: translate(60px, 40px) scale(0.95);\n border-color: rgba(86, 211, 100, 0.8);\n border-radius: 50% 50% 50% 50%;\n }\n\n[data-layout-root] .cohesion-canvas:hover .shape-2 {\n transform: translate(-60px, -40px) scale(0.95);\n border-color: rgba(88, 166, 255, 0.8);\n border-radius: 50% 50% 50% 50%;\n }\n\n[data-layout-root] .cohesion-canvas:hover .shape-3 {\n transform: scale(1.2);\n border: 1.5px solid var(--text-primary);\n background: rgba(240, 246, 252, 0.2);\n }\n\n /* Dynamic Polarized Product Window */\n[data-layout-root] .product-art-frame {\n position: absolute;\n width: 320px;\n height: 440px;\n border-radius: var(--radius-large);\n overflow: hidden;\n z-index: 5;\n background: var(--bg-secondary);\n border: 1px solid rgba(240, 246, 252, 0.1);\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);\n transform: rotate(-3deg);\n transition: var(--transition-fluid);\n }\n\n[data-layout-root] .cohesion-canvas:hover .product-art-frame {\n transform: rotate(0deg) scale(1.02);\n border-color: rgba(88, 166, 255, 0.3);\n }\n\n[data-layout-root] .product-art-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: saturate(1.1) brightness(0.95);\n }\n\n /* Polarized glow edge */\n[data-layout-root] .polarization-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(210deg, rgba(88, 166, 255, 0.15) 0%, transparent 60%);\n pointer-events: none;\n z-index: 6;\n }\n\n /* Typography & Content Block */\n[data-layout-root] .content-block {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n[data-layout-root] .product-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: var(--bg-secondary);\n border: 1px solid rgba(88, 166, 255, 0.3);\n padding: 8px 16px;\n border-radius: var(--radius-pill);\n font-size: 0.8rem;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n font-weight: 600;\n color: var(--brand-primary);\n margin-bottom: 24px;\n }\n\n[data-layout-root] .product-badge .dot {\n width: 6px;\n height: 6px;\n background-color: var(--accent);\n border-radius: 50%;\n }\n\n[data-layout-root] .ds-hero-title {\n font-family: var(--font-heading);\n font-size: clamp(2.8rem, 4.5vw, 4.8rem);\n line-height: 1.05;\n font-weight: 800;\n letter-spacing: -2px;\n margin-bottom: 24px;\n color: var(--text-primary);\n }\n\n[data-layout-root] .ds-hero-title span {\n background: linear-gradient(120deg, var(--brand-primary), var(--accent));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n[data-layout-root] .narrative-text {\n font-size: 1.15rem;\n line-height: 1.6;\n color: var(--text-muted);\n margin-bottom: 32px;\n max-width: 560px;\n }\n\n[data-layout-root] .interactive-legend {\n display: flex;\n gap: 16px;\n margin-bottom: 40px;\n }\n\n[data-layout-root] .legend-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.85rem;\n color: var(--text-muted);\n background: rgba(22, 27, 34, 0.5);\n border: 1px solid rgba(240, 246, 252, 0.05);\n padding: 8px 14px;\n border-radius: var(--radius-pill);\n }\n\n[data-layout-root] .legend-item strong {\n color: var(--text-primary);\n }\n\n /* Elegant CTA Suite */\n[data-layout-root] .cta-group {\n display: flex;\n align-items: center;\n gap: 20px;\n flex-wrap: wrap;\n }\n\n[data-layout-root] .btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n background: var(--text-primary);\n color: var(--bg-page);\n text-decoration: none;\n font-weight: 600;\n font-size: 1rem;\n padding: 18px 36px;\n border-radius: var(--radius-pill);\n transition: var(--transition-fluid);\n border: 2px solid transparent;\n }\n\n[data-layout-root] .btn-primary:hover {\n background: transparent;\n color: var(--text-primary);\n border-color: var(--text-primary);\n transform: translateY(-2px);\n }\n\n[data-layout-root] .btn-secondary {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: transparent;\n color: var(--text-primary);\n text-decoration: none;\n font-weight: 500;\n font-size: 1rem;\n padding: 18px 24px;\n border-radius: var(--radius-pill);\n transition: var(--transition-fluid);\n }\n\n[data-layout-root] .btn-secondary:hover {\n color: var(--brand-primary);\n transform: translateX(4px);\n }\n\n /* Animations */\n @keyframes float-slow {\n 0% { transform: translate(0, 0) rotate(0deg); }\n 100% { transform: translate(20px, -30px) rotate(15deg); }\n }\n\n @keyframes float-medium {\n 0% { transform: translate(0, 0) rotate(0deg); }\n 100% { transform: translate(-30px, 20px) rotate(-15deg); }\n }\n\n @keyframes float-fast {\n 0% { transform: translate(0, 0) scale(1); }\n 100% { transform: translate(15px, 15px) scale(1.05); }\n }\n\n @media (prefers-reduced-motion: reduce) {\n[data-layout-root] .organic-shape, .shape-1, .shape-2, .shape-3 {\n animation: none !important;\n transform: none !important;\n }\n[data-layout-root] .product-art-frame {\n transform: none !important;\n }\n }\n\n /* Responsive Architecture */\n @media (max-width: 1024px) {\n[data-layout-root] .ds-grid-container {\n grid-template-columns: 1fr;\n gap: 60px;\n text-align: center;\n }\n\n[data-layout-root] .content-block {\n align-items: center;\n }\n\n[data-layout-root] .cohesion-canvas {\n order: -1;\n height: 500px;\n }\n\n[data-layout-root] .product-art-frame {\n width: 280px;\n height: 380px;\n }\n\n[data-layout-root] .ds-nav-links, .search-container, .currency-selector {\n display: none;\n }\n\n[data-layout-root] .mobile-menu-btn {\n display: flex;\n }\n\n[data-layout-root] .glass-header {\n padding: 0 24px;\n }\n }\n\n @media (max-width: 600px) {\n[data-layout-root] .glass-header {\n top: 12px;\n height: 60px;\n }\n\n[data-layout-root] .cohesion-canvas {\n height: 400px;\n }\n\n[data-layout-root] .product-art-frame {\n width: 220px;\n height: 300px;\n }\n\n[data-layout-root] .organic-shape {\n transform: scale(0.7) !important;\n }\n\n[data-layout-root] .cta-group {\n width: 100%;\n flex-direction: column;\n }\n\n[data-layout-root] .btn-primary, .btn-secondary {\n width: 100%;\n justify-content: center;\n }\n }\n \n\n@media (max-width:760px){\n[data-layout-root] header{max-width:100%!important;min-width:0!important;display:flex!important;align-items:center!important;gap:12px!important;overflow:visible!important}\n[data-layout-root] header [data-slot=\"nav\"],header [data-slot=\"search\"],header [data-slot=\"login\"],header [data-slot=\"currency\"]{display:none!important}\n[data-layout-root] header [data-slot=\"logo\"]{display:flex!important;visibility:visible!important;opacity:1!important;position:static!important;margin-right:auto!important;min-width:0!important}\n[data-layout-root] header [data-slot=\"cart\"],header [data-slot=\"mobile-menu\"]{display:flex!important;visibility:visible!important;opacity:1!important;position:static!important;transform:none!important;white-space:nowrap!important}\n[data-layout-root] header *:has(>[data-slot=\"cart\"]),header *:has(>[data-slot=\"mobile-menu\"]){display:flex!important;visibility:visible!important;align-items:center!important;gap:10px!important}\n}\n\n /* --- Extension Style Architecture --- */\n \n /* Trust Strip Section */\n[data-layout-root] .ds-trust-strip {\n background-color: var(--bg-secondary);\n border-top: 1px solid rgba(88, 166, 255, 0.15);\n border-bottom: 1px solid rgba(88, 166, 255, 0.15);\n padding: 32px 0;\n position: relative;\n z-index: 10;\n overflow: hidden;\n }\n\n[data-layout-root] .ds-trust-grid {\n width: 90%;\n max-width: 1400px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n }\n\n[data-layout-root] .ds-trust-card {\n display: flex;\n align-items: center;\n gap: 16px;\n background: rgba(13, 17, 23, 0.4);\n border: 1px solid rgba(240, 246, 252, 0.05);\n padding: 20px 24px;\n border-radius: var(--radius-large);\n transition: var(--transition-fluid);\n }\n\n[data-layout-root] .ds-trust-card:hover {\n border-color: rgba(86, 211, 100, 0.3);\n transform: translateY(-2px);\n background: rgba(13, 17, 23, 0.6);\n }\n\n[data-layout-root] .ds-trust-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: rgba(88, 166, 255, 0.1);\n color: var(--brand-primary);\n flex-shrink: 0;\n }\n\n[data-layout-root] .ds-trust-card:hover .ds-trust-icon {\n color: var(--accent);\n background: rgba(86, 211, 100, 0.1);\n }\n\n[data-layout-root] .ds-trust-content {\n display: flex;\n flex-direction: column;\n }\n\n[data-layout-root] .ds-trust-label {\n font-size: 0.75rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--text-muted);\n margin-bottom: 4px;\n }\n\n[data-layout-root] .ds-trust-value {\n font-size: 0.95rem;\n font-weight: 600;\n color: var(--text-primary);\n }\n\n /* Core Science & Feature Grid Section */\n[data-layout-root] .ds-features-section {\n position: relative;\n padding: 120px 0;\n background: radial-gradient(circle at 10% 30%, rgba(88, 166, 255, 0.05) 0%, transparent 60%);\n overflow: hidden;\n }\n\n[data-layout-root] .ds-features-header {\n width: 90%;\n max-width: 1400px;\n margin: 0 auto 80px auto;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n[data-layout-root] .ds-features-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: var(--bg-secondary);\n border: 1px solid rgba(86, 211, 100, 0.3);\n padding: 8px 16px;\n border-radius: var(--radius-pill);\n font-size: 0.8rem;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n font-weight: 600;\n color: var(--accent);\n margin-bottom: 24px;\n }\n\n[data-layout-root] .ds-features-title {\n font-family: var(--font-heading);\n font-size: clamp(2.2rem, 3.5vw, 3.6rem);\n line-height: 1.1;\n font-weight: 800;\n letter-spacing: -1.5px;\n color: var(--text-primary);\n max-width: 720px;\n }\n\n[data-layout-root] .ds-features-title span {\n background: linear-gradient(120deg, var(--brand-primary), var(--accent));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n[data-layout-root] .ds-features-layout {\n width: 90%;\n max-width: 1400px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1.1fr 0.9fr;\n gap: 80px;\n align-items: center;\n }\n\n /* Clinical Trials Metric Grid Left Side */\n[data-layout-root] .ds-clinical-sculpture {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 32px;\n }\n\n[data-layout-root] .ds-metric-card {\n background: var(--bg-secondary);\n border: 1px solid rgba(240, 246, 252, 0.08);\n border-radius: var(--radius-large);\n padding: 40px;\n position: relative;\n overflow: hidden;\n transition: var(--transition-fluid);\n }\n\n[data-layout-root] .ds-metric-card:hover {\n border-color: rgba(88, 166, 255, 0.25);\n transform: scale(1.02);\n }\n\n[data-layout-root] .ds-metric-number {\n font-family: var(--font-heading);\n font-size: 4rem;\n font-weight: 800;\n line-height: 1;\n letter-spacing: -2px;\n color: var(--accent);\n margin-bottom: 16px;\n display: flex;\n align-items: baseline;\n }\n\n[data-layout-root] .ds-metric-percent {\n font-size: 2.5rem;\n font-weight: 700;\n }\n\n[data-layout-root] .ds-metric-label {\n font-size: 1.1rem;\n font-weight: 700;\n color: var(--text-primary);\n margin-bottom: 12px;\n }\n\n[data-layout-root] .ds-metric-desc {\n font-size: 0.9rem;\n line-height: 1.5;\n color: var(--text-muted);\n }\n\n /* Polarized image focus right side */\n[data-layout-root] .ds-interactive-regimen {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 40px;\n }\n\n[data-layout-root] .ds-regimen-showcase {\n position: relative;\n width: 100%;\n height: 480px;\n border-radius: var(--radius-large);\n overflow: hidden;\n border: 1px solid rgba(88, 166, 255, 0.2);\n box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);\n }\n\n[data-layout-root] .ds-regimen-showcase img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: saturate(1.05) brightness(0.9);\n }\n\n[data-layout-root] .ds-regimen-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(0deg, rgba(13, 17, 23, 0.9) 0%, rgba(13, 17, 23, 0.2) 60%, transparent 100%);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 40px;\n }\n\n[data-layout-root] .ds-regimen-product {\n font-size: 1.5rem;\n font-weight: 800;\n font-family: var(--font-heading);\n color: var(--text-primary);\n margin-bottom: 8px;\n }\n\n[data-layout-root] .ds-regimen-tagline {\n font-size: 0.95rem;\n line-height: 1.6;\n color: var(--text-muted);\n margin-bottom: 24px;\n max-width: 420px;\n }\n\n[data-layout-root] .ds-regimen-actions {\n display: flex;\n align-items: center;\n gap: 20px;\n }\n\n[data-layout-root] .ds-btn-pill {\n background: var(--brand-primary);\n color: var(--bg-page);\n text-decoration: none;\n font-weight: 700;\n font-size: 0.9rem;\n padding: 16px 32px;\n border-radius: var(--radius-pill);\n transition: var(--transition-fluid);\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n\n[data-layout-root] .ds-btn-pill:hover {\n background: var(--accent);\n transform: translateY(-2px);\n }\n\n[data-layout-root] .ds-btn-text {\n color: var(--text-primary);\n text-decoration: none;\n font-size: 0.9rem;\n font-weight: 700;\n transition: var(--transition-fluid);\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n\n[data-layout-root] .ds-btn-text:hover {\n color: var(--accent);\n }\n\n /* Responsive Systems */\n @media (max-width: 1100px) {\n[data-layout-root] .ds-features-layout {\n grid-template-columns: 1fr;\n gap: 60px;\n }\n[data-layout-root] .ds-trust-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n\n @media (max-width: 768px) {\n[data-layout-root] .ds-trust-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n[data-layout-root] .ds-clinical-sculpture {\n grid-template-columns: 1fr;\n gap: 24px;\n }\n[data-layout-root] .ds-features-section {\n padding: 80px 0;\n }\n[data-layout-root] .ds-regimen-showcase {\n height: 380px;\n }\n }\n\n /* Reset & Canonical Theme Mapping */\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n \n \n\n \n\n /* Custom Styles prefixed with ds- */\n[data-layout-root] .ds-pdp-container {\n background-color: var(--bg-page);\n min-height: 100vh;\n padding-top: 130px;\n padding-bottom: 100px;\n background: radial-gradient(circle at 10% 20%, rgba(86, 211, 100, 0.05) 0%, transparent 40%),\n radial-gradient(circle at 90% 80%, rgba(88, 166, 255, 0.05) 0%, transparent 40%);\n }\n\n[data-layout-root] .ds-grid-wrapper {\n width: 90%;\n max-width: 1400px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1.2fr 1fr;\n gap: 80px;\n align-items: start;\n }\n\n /* Left Side: Art & Gallery Showcase */\n[data-layout-root] .ds-visual-column {\n position: sticky;\n top: 140px;\n display: flex;\n flex-direction: column;\n gap: 30px;\n }\n\n[data-layout-root] .ds-molecular-cohesion-canvas {\n position: relative;\n width: 100%;\n height: 580px;\n background: var(--bg-secondary);\n border-radius: var(--radius-large);\n border: 1px solid rgba(88, 166, 255, 0.15);\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n /* Injected gallery fits elegantly inside this architectural frame */\n[data-layout-root] .slot-gallery {\n width: 100%;\n height: 100%;\n z-index: 10;\n position: relative;\n }\n\n /* Style inside target components gracefully */\n[data-layout-root] .slot-gallery img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: var(--transition-fluid);\n }\n\n[data-layout-root] .slot-gallery:hover img {\n transform: scale(1.03);\n }\n\n /* Floating Decorative Science Accents */\n[data-layout-root] .ds-molecule-bg {\n position: absolute;\n border-radius: 50%;\n mix-blend-mode: screen;\n filter: blur(40px);\n opacity: 0.6;\n pointer-events: none;\n z-index: 1;\n }\n\n[data-layout-root] .ds-mol-1 {\n width: 250px;\n height: 250px;\n background: rgba(86, 211, 100, 0.15);\n top: -50px;\n left: -50px;\n }\n\n[data-layout-root] .ds-mol-2 {\n width: 300px;\n height: 300px;\n background: rgba(88, 166, 255, 0.15);\n bottom: -80px;\n right: -80px;\n }\n\n /* Right Side: Product Info Block */\n[data-layout-root] .ds-info-column {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n }\n\n[data-layout-root] .ds-breadcrumbs {\n font-size: 0.8rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--brand-primary);\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n[data-layout-root] .ds-breadcrumbs span {\n color: var(--text-muted);\n }\n\n /* Slot Styles Mapping */\n[data-layout-root] .slot-title {\n font-family: var(--font-heading);\n font-size: clamp(2.4rem, 3.5vw, 3.8rem);\n line-height: 1.1;\n font-weight: 800;\n letter-spacing: -1.5px;\n margin-bottom: 16px;\n color: var(--text-primary);\n }\n\n[data-layout-root] .slot-title span {\n background: linear-gradient(120deg, var(--brand-primary), var(--accent));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n[data-layout-root] .slot-price {\n font-family: var(--font-heading);\n font-size: 1.8rem;\n font-weight: 700;\n color: var(--text-primary);\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n[data-layout-root] .slot-price::after {\n content: \"USD\";\n font-size: 0.9rem;\n color: var(--text-muted);\n font-weight: 500;\n letter-spacing: 0.05em;\n }\n\n[data-layout-root] .slot-description {\n font-size: 1.1rem;\n line-height: 1.6;\n color: var(--text-muted);\n margin-bottom: 32px;\n }\n\n /* Variant Selectors */\n[data-layout-root] .slot-variants {\n margin-bottom: 30px;\n }\n\n[data-layout-root] .slot-variant-label {\n font-size: 0.8rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--text-primary);\n margin-bottom: 12px;\n display: block;\n }\n\n[data-layout-root] .slot-variant-btn {\n background: var(--bg-secondary);\n border: 1px solid rgba(88, 166, 255, 0.2);\n color: var(--text-primary);\n padding: 12px 24px;\n border-radius: var(--radius-pill);\n cursor: pointer;\n font-family: var(--font-body);\n font-size: 0.9rem;\n font-weight: 500;\n transition: var(--transition-fluid);\n margin-right: 10px;\n margin-bottom: 10px;\n }\n\n[data-layout-root] .slot-variant-btn:hover,\n[data-layout-root] .slot-variant-btn.active {\n border-color: var(--accent);\n background: rgba(86, 211, 100, 0.1);\n color: #FFFFFF;\n }\n\n /* Quantity Controls */\n[data-layout-root] .slot-quantity {\n margin-bottom: 30px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n[data-layout-root] .slot-quantity-controls {\n display: inline-flex;\n align-items: center;\n background: var(--bg-secondary);\n border: 1px solid rgba(240, 246, 252, 0.1);\n border-radius: var(--radius-pill);\n padding: 6px;\n width: fit-content;\n }\n\n[data-layout-root] .slot-quantity-controls button {\n background: none;\n border: none;\n color: var(--text-primary);\n width: 36px;\n height: 36px;\n border-radius: 50%;\n cursor: pointer;\n font-size: 1.2rem;\n transition: background 0.3s ease;\n }\n\n[data-layout-root] .slot-quantity-controls button:hover {\n background: rgba(240, 246, 252, 0.1);\n }\n\n[data-layout-root] .slot-quantity-controls input {\n background: none;\n border: none;\n color: var(--text-primary);\n width: 50px;\n text-align: center;\n font-size: 1rem;\n font-weight: 600;\n font-family: var(--font-body);\n }\n\n /* Prominent Conversion Elements */\n[data-layout-root] .slot-add-to-cart {\n display: block !important;\n width: 100% !important;\n margin-bottom: 16px !important;\n visibility: visible !important;\n opacity: 1 !important;\n }\n\n[data-layout-root] .slot-add-to-cart-control,\n[data-layout-root] .slot-add-to-cart button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 60px;\n background: var(--accent);\n color: #0D1117;\n border: none;\n border-radius: var(--radius-pill);\n font-family: var(--font-heading);\n font-size: 1.1rem;\n font-weight: 800;\n letter-spacing: 0.02em;\n cursor: pointer;\n transition: var(--transition-fluid);\n box-shadow: 0 10px 25px rgba(86, 211, 100, 0.2);\n }\n\n[data-layout-root] .slot-add-to-cart-control:hover,\n[data-layout-root] .slot-add-to-cart button:hover {\n transform: translateY(-2px);\n box-shadow: 0 15px 30px rgba(86, 211, 100, 0.3);\n background: #6cf57b;\n }\n\n[data-layout-root] .slot-buy-now {\n display: block !important;\n width: 100% !important;\n margin-bottom: 40px !important;\n visibility: visible !important;\n opacity: 1 !important;\n }\n\n[data-layout-root] .slot-buy-now-control,\n[data-layout-root] .slot-buy-now button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 60px;\n background: transparent;\n color: var(--text-primary);\n border: 2px solid rgba(240, 246, 252, 0.2);\n border-radius: var(--radius-pill);\n font-family: var(--font-heading);\n font-size: 1.1rem;\n font-weight: 800;\n letter-spacing: 0.02em;\n cursor: pointer;\n transition: var(--transition-fluid);\n }\n\n[data-layout-root] .slot-buy-now-control:hover,\n[data-layout-root] .slot-buy-now button:hover {\n border-color: var(--brand-primary);\n background: rgba(88, 166, 255, 0.05);\n }\n\n /* Trust Highlights Section & Delivery Info */\n[data-layout-root] .ds-delivery-trust-box {\n background: var(--bg-secondary);\n border: 1px solid rgba(88, 166, 255, 0.1);\n border-radius: var(--radius-large);\n padding: 32px;\n margin-top: 20px;\n }\n\n[data-layout-root] .ds-trust-title {\n font-family: var(--font-heading);\n font-size: 1.2rem;\n font-weight: 700;\n margin-bottom: 20px;\n color: var(--text-primary);\n letter-spacing: -0.5px;\n }\n\n[data-layout-root] .ds-trust-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n }\n\n[data-layout-root] .ds-trust-item {\n display: flex;\n gap: 12px;\n align-items: flex-start;\n }\n\n[data-layout-root] .ds-trust-icon {\n color: var(--accent);\n flex-shrink: 0;\n margin-top: 3px;\n }\n\n[data-layout-root] .ds-trust-text h4 {\n font-size: 0.9rem;\n font-weight: 600;\n color: var(--text-primary);\n margin-bottom: 4px;\n }\n\n[data-layout-root] .ds-trust-text p {\n font-size: 0.8rem;\n color: var(--text-muted);\n line-height: 1.4;\n }\n\n /* Marketing Section: Clinical Barrier Science */\n[data-layout-root] .ds-clinical-section {\n width: 100%;\n background-color: #080B0F;\n padding: 100px 0;\n border-top: 1px solid rgba(240, 246, 252, 0.05);\n }\n\n[data-layout-root] .ds-container {\n width: 90%;\n max-width: 1400px;\n margin: 0 auto;\n }\n\n[data-layout-root] .ds-clinical-header {\n max-width: 700px;\n margin-bottom: 60px;\n }\n\n[data-layout-root] .ds-pre-title {\n color: var(--brand-primary);\n font-size: 0.85rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.15em;\n margin-bottom: 12px;\n }\n\n[data-layout-root] .ds-section-title {\n font-family: var(--font-heading);\n font-size: clamp(2rem, 3.5vw, 3rem);\n font-weight: 800;\n line-height: 1.1;\n letter-spacing: -1.5px;\n color: var(--text-primary);\n }\n\n[data-layout-root] .ds-metrics-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 30px;\n margin-bottom: 80px;\n }\n\n[data-layout-root] .ds-metric-card {\n background: var(--bg-secondary);\n border: 1px solid rgba(86, 211, 100, 0.1);\n border-radius: var(--radius-large);\n padding: 40px;\n position: relative;\n overflow: hidden;\n }\n\n[data-layout-root] .ds-metric-num {\n font-family: var(--font-heading);\n font-size: clamp(3rem, 5vw, 4.5rem);\n font-weight: 800;\n line-height: 1;\n color: var(--accent);\n margin-bottom: 16px;\n letter-spacing: -2px;\n }\n\n[data-layout-root] .ds-metric-label {\n font-size: 1.1rem;\n font-weight: 700;\n color: var(--text-primary);\n margin-bottom: 8px;\n }\n\n[data-layout-root] .ds-metric-desc {\n font-size: 0.9rem;\n color: var(--text-muted);\n line-height: 1.5;\n }\n\n /* Bundle Routine Integration */\n[data-layout-root] .ds-routine-showcase {\n background: linear-gradient(180deg, #080B0F 0%, #0D1117 100%);\n padding: 100px 0;\n }\n\n[data-layout-root] .ds-routine-grid {\n display: grid;\n grid-template-columns: 1fr 1.5fr;\n gap: 80px;\n align-items: center;\n }\n\n[data-layout-root] .ds-routine-content h3 {\n font-family: var(--font-heading);\n font-size: 2.5rem;\n font-weight: 800;\n line-height: 1.15;\n letter-spacing: -1px;\n margin-bottom: 24px;\n color: var(--text-primary);\n }\n\n[data-layout-root] .ds-routine-content p {\n font-size: 1.1rem;\n color: var(--text-muted);\n line-height: 1.6;\n margin-bottom: 40px;\n }\n\n[data-layout-root] .ds-step-list {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n\n[data-layout-root] .ds-step-item {\n display: flex;\n gap: 20px;\n background: var(--bg-secondary);\n border: 1px solid rgba(240, 246, 252, 0.05);\n border-radius: 20px;\n padding: 20px;\n transition: var(--transition-fluid);\n }\n\n[data-layout-root] .ds-step-item:hover {\n border-color: var(--brand-primary);\n transform: translateX(10px);\n }\n\n[data-layout-root] .ds-step-num {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: rgba(88, 166, 255, 0.1);\n color: var(--brand-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 0.9rem;\n flex-shrink: 0;\n }\n\n[data-layout-root] .ds-step-details h4 {\n font-size: 1rem;\n font-weight: 700;\n color: var(--text-primary);\n margin-bottom: 4px;\n }\n\n[data-layout-root] .ds-step-details p {\n font-size: 0.85rem;\n color: var(--text-muted);\n margin-bottom: 0;\n line-height: 1.4;\n }\n\n /* Responsive Adaptation */\n @media (max-width: 1024px) {\n[data-layout-root] .ds-grid-wrapper {\n grid-template-columns: 1fr;\n gap: 50px;\n }\n[data-layout-root] .ds-visual-column {\n position: relative;\n top: 0;\n }\n[data-layout-root] .ds-molecular-cohesion-canvas {\n height: 450px;\n }\n[data-layout-root] .ds-metrics-grid {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n[data-layout-root] .ds-routine-grid {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n }\n\n /* Premium Kinetic-Minimalist Footer */\n[data-layout-root] .ds-footer {\n position: relative;\n background-color: var(--bg-page, #0D1117);\n color: var(--text-primary, #F0F6FC);\n font-family: var(--font-body, 'Inter', sans-serif);\n padding: 120px 0 48px 0;\n border-top: 1px solid rgba(88, 166, 255, 0.15);\n overflow: hidden;\n z-index: 10;\n }\n\n /* Structural Alignment & Density */\n[data-layout-root] .ds-footer-container {\n width: 90%;\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 80px;\n }\n\n /* Top Section - Brand Identity and Newsletter Form */\n[data-layout-root] .ds-footer-top {\n display: grid;\n grid-template-columns: 1.2fr 1fr;\n gap: 80px;\n align-items: flex-start;\n }\n\n[data-layout-root] .ds-brand-block {\n display: flex;\n flex-direction: column;\n gap: 24px;\n max-width: 480px;\n }\n\n[data-layout-root] .ds-footer-logo .ds-logo-link {\n font-family: var(--font-heading, 'Syne', sans-serif);\n font-size: 2rem;\n font-weight: 800;\n letter-spacing: -2px;\n color: var(--text-primary, #F0F6FC);\n text-decoration: none;\n transition: var(--transition-fluid, all 0.6s cubic-bezier(0.16, 1, 0.3, 1));\n }\n\n[data-layout-root] .ds-footer-logo:hover .ds-logo-link {\n letter-spacing: 0px;\n }\n\n[data-layout-root] .ds-accent-dot {\n color: var(--accent, #56D364);\n }\n\n[data-layout-root] .ds-brand-narrative {\n font-size: 0.95rem;\n line-height: 1.6;\n color: var(--text-muted, #8B949E);\n }\n\n[data-layout-root] .ds-social-wrap {\n display: flex;\n gap: 16px;\n margin-top: 8px;\n }\n\n[data-layout-root] .ds-social-link {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 42px;\n height: 42px;\n border-radius: 50%;\n border: 1px solid rgba(88, 166, 255, 0.15);\n color: var(--text-muted, #8B949E);\n transition: var(--transition-fluid, all 0.6s cubic-bezier(0.16, 1, 0.3, 1));\n }\n\n[data-layout-root] .ds-social-link svg {\n width: 18px;\n height: 18px;\n }\n\n[data-layout-root] .ds-social-link:hover {\n color: var(--brand-primary, #58A6FF);\n border-color: var(--brand-primary, #58A6FF);\n transform: translateY(-3px);\n }\n\n /* Newsletter Science Feed */\n[data-layout-root] .ds-newsletter-block {\n background: var(--bg-secondary, #161B22);\n border: 1px solid rgba(88, 166, 255, 0.15);\n border-radius: var(--radius-large, 40px);\n padding: 40px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n position: relative;\n overflow: hidden;\n }\n\n[data-layout-root] .ds-newsletter-block::before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n width: 150px;\n height: 150px;\n background: radial-gradient(circle, rgba(86, 211, 100, 0.12) 0%, transparent 70%);\n pointer-events: none;\n }\n\n[data-layout-root] .ds-block-title {\n font-family: var(--font-heading, 'Syne', sans-serif);\n font-size: 1.4rem;\n font-weight: 700;\n letter-spacing: -0.5px;\n color: var(--text-primary, #F0F6FC);\n }\n\n[data-layout-root] .ds-block-desc {\n font-size: 0.9rem;\n line-height: 1.5;\n color: var(--text-muted, #8B949E);\n }\n\n[data-layout-root] .ds-newsletter-form {\n display: flex;\n align-items: center;\n border: 1px solid rgba(240, 246, 252, 0.15);\n border-radius: var(--radius-pill, 100px);\n padding: 6px;\n background: rgba(13, 17, 23, 0.5);\n margin-top: 12px;\n transition: border-color 0.3s ease;\n }\n\n[data-layout-root] .ds-newsletter-form:focus-within {\n border-color: var(--brand-primary, #58A6FF);\n }\n\n[data-layout-root] .ds-newsletter-input {\n flex: 1;\n background: none;\n border: none;\n outline: none;\n padding: 12px 20px;\n color: var(--text-primary, #F0F6FC);\n font-family: var(--font-body, 'Inter', sans-serif);\n font-size: 0.85rem;\n letter-spacing: 1px;\n }\n\n[data-layout-root] .ds-newsletter-input::placeholder {\n color: rgba(240, 246, 252, 0.4);\n }\n\n[data-layout-root] .ds-newsletter-btn {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: none;\n background: var(--brand-primary, #58A6FF);\n color: var(--bg-page, #0D1117);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--transition-fluid, all 0.6s cubic-bezier(0.16, 1, 0.3, 1));\n }\n\n[data-layout-root] .ds-newsletter-btn svg {\n width: 18px;\n height: 18px;\n }\n\n[data-layout-root] .ds-newsletter-btn:hover {\n background: var(--accent, #56D364);\n transform: scale(1.05);\n }\n\n /* Middle Navigation Grid */\n[data-layout-root] .ds-footer-middle {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 40px;\n border-top: 1px solid rgba(240, 246, 252, 0.08);\n border-bottom: 1px solid rgba(240, 246, 252, 0.08);\n padding: 64px 0;\n }\n\n[data-layout-root] .ds-col-title {\n font-family: var(--font-heading, 'Syne', sans-serif);\n font-size: 0.8rem;\n font-weight: 800;\n letter-spacing: 2px;\n color: var(--brand-primary, #58A6FF);\n margin-bottom: 24px;\n }\n\n[data-layout-root] .ds-col-links {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n[data-layout-root] .ds-col-links a {\n color: var(--text-muted, #8B949E);\n text-decoration: none;\n font-size: 0.95rem;\n font-weight: 400;\n transition: color 0.3s ease, padding-left 0.3s ease;\n }\n\n[data-layout-root] .ds-col-links a:hover {\n color: var(--text-primary, #F0F6FC);\n padding-left: 4px;\n }\n\n /* Bottom Area - Compliance & Checkout Integrity */\n[data-layout-root] .ds-footer-bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 32px;\n }\n\n[data-layout-root] .ds-bottom-meta {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n[data-layout-root] .ds-copyright {\n font-size: 0.85rem;\n color: var(--text-muted, #8B949E);\n }\n\n[data-layout-root] .ds-legal-links {\n display: flex;\n gap: 24px;\n }\n\n[data-layout-root] .ds-legal-links a {\n font-size: 0.8rem;\n color: var(--text-muted, #8B949E);\n text-decoration: none;\n transition: color 0.3s ease;\n }\n\n[data-layout-root] .ds-legal-links a:hover {\n color: var(--brand-primary, #58A6FF);\n }\n\n[data-layout-root] .ds-payment-gateways {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 10px;\n }\n\n[data-layout-root] .ds-secured-text {\n font-size: 0.65rem;\n font-weight: 700;\n letter-spacing: 1.5px;\n color: var(--text-muted, #8B949E);\n }\n\n[data-layout-root] .ds-payment-icons {\n display: flex;\n gap: 8px;\n }\n\n[data-layout-root] .ds-payment-icons svg {\n border-radius: 4px;\n border: 1px solid rgba(240, 246, 252, 0.05);\n transition: border-color 0.3s ease;\n }\n\n[data-layout-root] .ds-payment-icons svg:hover {\n border-color: rgba(88, 166, 255, 0.3);\n }\n\n /* Responsive Systems Breakpoint */\n @media (max-width: 991px) {\n[data-layout-root] .ds-footer-top {\n grid-template-columns: 1fr;\n gap: 56px;\n }\n\n[data-layout-root] .ds-footer-middle {\n grid-template-columns: repeat(2, 1fr);\n gap: 40px;\n }\n\n[data-layout-root] .ds-brand-block {\n max-width: 100%;\n }\n }\n\n @media (max-width: 768px) {\n[data-layout-root] .ds-footer {\n padding: 80px 0 32px 0;\n }\n\n[data-layout-root] .ds-footer-middle {\n grid-template-columns: 1fr;\n gap: 32px;\n padding: 48px 0;\n }\n\n[data-layout-root] .ds-footer-bottom {\n flex-direction: column;\n align-items: flex-start;\n gap: 32px;\n }\n\n[data-layout-root] .ds-payment-gateways {\n align-items: flex-start;\n }\n\n[data-layout-root] .ds-newsletter-block {\n padding: 24px;\n }\n }\n\n/* === Header safety rules (post-processed, not AI-generated) === */\n[data-layout-root] [data-layout-root] .global-header [data-slot=\"cart\"],\n[data-layout-root] [data-layout-root] .global-header [data-slot=\"search\"],\n[data-layout-root] [data-layout-root] .global-header [data-slot=\"login\"],\n[data-layout-root] [data-layout-root] .global-header [data-slot=\"currency\"],\n[data-layout-root] [data-layout-root] .global-header [data-slot=\"mobile-menu\"] {\n flex-shrink: 0 !important;\n min-width: fit-content !important;\n}\n[data-layout-root] [data-layout-root] .global-header [data-slot=\"nav\"] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n[data-layout-root] [data-layout-root] .global-header {\n max-height: 120px;\n}\n/* Line-height safety \u2014 prevent AI from setting tiny line-heights globally */\n[data-layout-root] [data-layout-root] {\n line-height: 1.5;\n}\n[data-layout-root] [data-layout-root] h1, [data-layout-root] h2, [data-layout-root] h3,\n[data-layout-root] [data-layout-root] h4, [data-layout-root] h5, [data-layout-root] h6 {\n line-height: 1.2;\n}\n[data-layout-root] [data-layout-root] p, [data-layout-root] li, [data-layout-root] span,\n[data-layout-root] [data-layout-root] a, [data-layout-root] label {\n line-height: inherit;\n}\n/* \u2500\u2500 Contrast safety (light theme) \u2500\u2500 */\n/* Product page slots \u2014 often left unstyled by the AI */\n[data-layout-root] [data-layout-root] .slot-title,\n[data-layout-root] [data-layout-root] .slot-title h1,\n[data-layout-root] [data-layout-root] .slot-title .slot-product-name {\n color: var(--surface-ink, var(--theme-ink, var(--ink, #111111)));\n}\n[data-layout-root] [data-layout-root] .slot-price,\n[data-layout-root] [data-layout-root] .slot-price .slot-price-amount {\n color: var(--surface-ink, var(--theme-ink, var(--ink, #111111)));\n}\n[data-layout-root] [data-layout-root] .slot-description,\n[data-layout-root] [data-layout-root] .slot-description p {\n color: var(--surface-ink-muted, var(--ink-muted, #4a4a4a));\n}\n[data-layout-root] [data-layout-root] .slot-variant-label {\n color: var(--surface-ink-muted, var(--ink-muted, #4a4a4a));\n}\n[data-layout-root] [data-layout-root] .slot-variant-btn {\n color: var(--surface-ink, var(--theme-ink, var(--ink, #111111)));\n border-color: rgba(0,0,0,0.08);\n}\n/* Common generated marketing sections */\n[data-layout-root] [data-layout-root] .feature-title,\n[data-layout-root] [data-layout-root] .feature-name,\n[data-layout-root] [data-layout-root] .editorial-title,\n[data-layout-root] [data-layout-root] .trust-value,\n[data-layout-root] [data-layout-root] .hero-price,\n[data-layout-root] [data-layout-root] .feature-content,\n[data-layout-root] [data-layout-root] .feature-content h1,\n[data-layout-root] [data-layout-root] .feature-content h2,\n[data-layout-root] [data-layout-root] .feature-content h3,\n[data-layout-root] [data-layout-root] .feature-content h4,\n[data-layout-root] [data-layout-root] [data-slot=\"logo\"],\n[data-layout-root] [data-layout-root] [data-slot=\"logo\"] *,\n[data-layout-root] [data-layout-root] [data-slot=\"nav\"],\n[data-layout-root] [data-layout-root] [data-slot=\"nav\"] a,\n[data-layout-root] [data-layout-root] .action-icon {\n color: var(--theme-ink, var(--ink, #111111));\n}\n[data-layout-root] [data-layout-root] .trust-label,\n[data-layout-root] [data-layout-root] .feature-tag,\n[data-layout-root] [data-layout-root] .feature-description,\n[data-layout-root] [data-layout-root] .detail-item p,\n[data-layout-root] [data-layout-root] .trust-item p,\n[data-layout-root] [data-layout-root] .feature-action {\n color: var(--ink-muted, #4a4a4a);\n}\n/* Icon / SVG contrast */\n[data-layout-root] [data-layout-root] svg {\n fill: currentColor;\n}\n\n[data-layout-root] [class*=\"grid\"] > *, [data-layout-root] [class*=\"layout\"] > * { min-width: 0; min-height: 0; }\n\n[data-layout-root] .v8-support-panel { color: var(--surface-ink); --ink-muted: var(--surface-ink-muted); }\n\n:root, [data-layout-root] { --surface-ink: #111827; --surface-ink-muted: #4B5563; }\n\n/* Visual QA auto-fixes */\nh1, .hero-title, .product-title {\n color: #0D1117; /* Fixes the invisible white headings on white background sections across both home and product pages. */\n}\n.section-title, .text-highlight {\n color: #161B22; /* Ensures the secondary section headings have sufficient contrast against light backgrounds. */\n}\n.trial-results-link {\n color: #58A6FF; /* Changes the invisible trial results link to use the brand primary blue color for readability. */\n}\n\n\n/* === Storefront root surface (repair) === */\n[data-layout-root] {\n min-height: 100vh;\n background-color: var(--bg-page, var(--theme-bg, #0D1117));\n color: var(--text-primary, var(--theme-ink, #F0F6FC));\n}\n","globalHtml":"","fonts":[],"animations":[],"theme":{"mode":"dark","palette":{"primary":"#0f172a","secondary":"#090d18","accent":"#56D364","success":"#0f172a"},"surfaces":{"bg":"#0D1117","bgElevated":"#FFFFFF","surface":"#ebeced","surfaceAlt":"#edeeee","ink":"#F0F6FC","inkMuted":"#6B7280","border":"#cfd0d4","surfaceInk":"#111827","surfaceInkMuted":"#4B5563"},"typography":{"headingFont":"var(--font-heading)","bodyFont":"var(--font-body)"},"tone":"modern","density":"normal","motion":2,"stylePack":"kinetic-minimalism","surface":"flat","radius":12},"header":{"html":"

\n Innisfreee.\n

\n\n \n\n

\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n

","css":""},"footer":{"html":"","css":""},"pages":{"home":{"sections":[{"id":"home-main","type":"home_main","html":"

\n \n \n

\n \n

\n\n \n

\n $\"\"$ \n

\n\n \n

\n \n {{products.[0].name}}\n

\n\n \n

\n The Art of Cellular Cohesion\n

\n\n

\n Reconstruct what weather and time disassemble. Powered by 7 types of ceramides, ectoin, and raw green tea elements, this advanced daily Korean cream acts as fine molecular geometry\u2014binding rich hydration to sensitive and eczema-prone profiles.\n

\n\n \n

\n 7 Ceramides\n

\n Green Tea Extract\n

\n Ectoin Complex\n

\n\n \n

\n \n Shop Green Tea Rescue\n \n \n \n See Science Trial Results\n \n

\n\n

\n\n\n\n

\n \n \n

\n \n

\n Complimentary\n Free Global Shipping\n

\n\n \n

\n \n

\n Authenticity\n 100% Genuine Origin\n

\n\n \n

\n \n

\n Formulation\n Dermatologically Verified\n

\n\n \n

\n \n

\n Sustainable\n Recyclable Packaging\n

\n\n

\n\n\n

\n \n Dermatologist Testing Results\n

\n Restoring complete structural density and moisture balance down to the cellular level.\n

\n\n

\n \n \n

\n 100%\n

Barrier Restoration

\n Of test subjects demonstrated immediate relief from external moisture loss within just 1 hour of topical application.\n

\n\n \n

\n -55%\n

Irritation Reduction

\n Visible reduction in environmental redness and irritation markers, calming sensitive and eczema-prone profiles.\n

\n\n \n

\n 24H\n

Continuous Hydration

\n Extended breathable protection fueled by colloidal oatmeal, keeping the outer dermis locked against moisture escape.\n

\n\n \n

\n 7x\n

Ceramide Structure

\n Unique multi-ceramide scientific matrix engineered to replicate the precise organic structure of a healthy lipid skin shield.\n

\n\n

\n\n \n

\n \n

\n {{products.[0].name}}\n

\n {{products.[0].description}}\n

\n \n \n Acquire \u2014 {{products.[0].price}}\n \n \n Product Details\n \n \n

\n \n $\"Innisfreee$ \n

\n\n

","css":"","dataBindings":{"shop":{"source":"storefront","query":"shopInfo"},"homeVisuals":{"source":"static","value":[{"url":"https://images.unsplash.com/photo-1701520839077-810601693edd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4OTM0MjR8MHwxfHNlYXJjaHwxfHxncmVlbiUyMHRlYSUyMHNraW5jYXJlJTIwYWVzdGhldGljfGVufDF8MHx8fDE3ODM5NzgyMTR8MA&ixlib=rb-4.1.0&q=80&w=1080","alt":"Innisfreee green","theme":"green","query":"green tea skincare aesthetic","source":"unsplash","photographer":"Kat von Wood","photographerUrl":"https://unsplash.com/@kat_von_wood","role":"campaign","cropHint":"wide-or-art-directed","fitHint":"cover","mobileTreatment":"reframe around the primary subject"},{"url":"https://images.unsplash.com/photo-1714547509046-0cf60126f331?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4OTM0MjR8MHwxfHNlYXJjaHwyfHxtaW5pbWFsaXN0JTIwY2VyYW1pZGUlMjBjcmVhbSUyMHRleHR1cmV8ZW58MXwwfHx8MTc4Mzk3ODI0Mnww&ixlib=rb-4.1.0&q=80&w=1080","alt":"Innisfreee minimalist","theme":"minimalist","query":"minimalist ceramide cream texture","source":"unsplash","photographer":"Milad Fakurian","photographerUrl":"https://unsplash.com/@fakurian","role":"lifestyle","cropHint":"subject-safe","fitHint":"cover","mobileTreatment":"preserve the principal subject and avoid text collisions"},{"url":"https://images.unsplash.com/photo-1553073258-70edc90900bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4OTM0MjR8MHwxfHNlYXJjaHwxfHxrb3JlYW4lMjBiZWF1dHklMjBtb2RlbCUyMGRld3klMjBza2lufGVufDF8MHx8fDE3ODM5NzgyNDJ8MA&ixlib=rb-4.1.0&q=80&w=1080","alt":"Innisfreee korean","theme":"korean","query":"korean beauty model dewy skin","source":"unsplash","photographer":"Irene Strong","photographerUrl":"https://unsplash.com/@leirenestrong","role":"detail","cropHint":"close-or-medium","fitHint":"contain-or-cover","mobileTreatment":"preserve the principal subject and avoid text collisions"}]},"products":{"source":"storefront","query":"productList","limit":4},"collections":{"source":"storefront","query":"collectionList","limit":4}}}]},"product":{"sections":[{"id":"product-detail","type":"product_detail","html":"

\n \n \n

\n \n

\n\n \n

\n \n\n \n

\n \n

\n\n

\n \n

\n\n

\n \n

\n\n

\n \n

\n\n

\n \n

\n\n

\n \n

\n\n

\n \n

\n\n \n

Dermatology Science & Logistics Guarantee

\n \n

Skin Safe Science

Dermatologist and hypo-allergenically tested on sensitive skin profiles.

\n\n

\n \n

Expedited Delivery

Ships next business day. Carbon neutral, high-efficiency molecular packing.

\n\n

\n\n\n

7-Ceramide Barrier Science

An ultra-breathable rescue shield engineered for complete recovery.

\n\n

100%

Immediate Soothing

Clinical trial participants noted complete relief from dryness-induced tightness and irritation on day 1.

\n\n

Barrier Restoration

Scientific instrumentation tracked a twofold increase in lipid cohesion and moisture lock efficacy over 48 hours.

\n\n

24H

Locked Hydration

Formulated with colloidal oatmeal and ectoin to build a continuous, resilient ambient moisture grid.

\n\n\n

The Complete System

The Green Tea Molecular Routine

Achieve compound clinical benefits by integrating the complete sequence. Restoring dry skin cells starts with cleansing and peaks with absolute ceramide nourishment.

\n\n

Hydrating Cleansing Foam

Amino-acid based gentle wash to clear environmental pollutants without disrupting surface lipids.

\n\n

Seed Hyaluronic Serum

High-penetration pre-treatment to deeply saturate cellular pathways before cream locking.

\n\n

Green Tea Ceramide Cream

Our core 7-ceramide breathable formula to seal, protect, and heal vulnerable barriers.

","css":""}]},"collection":{"sections":[]}},"generationIntent":{"referenceMode":"custom","designMode":"An abstract, high-art visualization of...","density":"medium","homeSectionCount":3,"openingSectionType":"product-showcase","openingSectionGoal":"An abstract, high-art visualization of cellular cohesion, where dry skin cells are knit back together by active molecules.","headerPattern":"a-futuristic-glassmorphic-bar-t...","copyTone":"Avant-garde, highly sophisticated, and chemically poetic.","imageStrategy":"Hyper-stylized, high-gloss product photography against dark, reflective liquid surfaces, highlighting the premium, high-tech nature of the cream.","compositionStrategy":{"opening_relationship":"An avant-garde, sculptural space where skincare is treated as fine art and molecular geometry. The layout utilizes floating 3D-like organic shapes, interlocking forms, and fluid boundaries to illustrate how ceramides an...","reading_path":"An abstract, high-art visualization of cellular cohesion, where dry skin cells are knit back together by active molecules.","product_presentation":"Hyper-stylized, high-gloss product photography against dark, reflective liquid surfaces, highlighting the premium, high-tech nature of the cream."},"motionDirection":{"mode":"expressive","purpose":"Moving the mouse cursor acts as a magnetic pull, gently drawing scattered, floating 'ceramide' molecules on the screen into a tight, protective barrier formation.","techniques":["Moving the mouse cursor acts as a magnetic pull, gently drawing scattered, floating 'ceramide' molecules on the screen..."],"reduced_motion":"Preserve the final composition without animation"},"headerStrategy":{"structure":"A futuristic glassmorphic bar that morphs in shape depending on the active section of the page.","mobile_behavior":"Keep search, account, language, cart, and menu reachable"},"imageAssetPlan":{"primary_role":"Hyper-stylized, high-gloss product photography against dark, reflective liquid surfaces, highlighting the premium, high-tech nature of the cream.","mobile_treatment":"Recompose without cropping away the product"},"productPageExtras":["shipping_delivery","trust highlights"],"homePageRules":["This is a single-product store \u2014 the entire homepage must orbit around selling this one product.","Do NOT show category launchers, collection grids, or multi-product browsing sections.","The hero MUST feature the product prominently \u2014 not a generic lifestyle banner.","Use sections for features, benefits, testimonials, brand story, and trust \u2014 but always tie back to the product."]},"generationPlan":{"header":{"pattern":"commerce-search","notes":["Create a strong retail header with utility/support affordances.","Keep it compact, aligned, and ready for search/cart/login injected slots.","The cart slot (data-slot='cart') MUST be visible on ALL screen sizes."]},"home":{"sectionCount":3,"sections":[{"id":"home-opening","name":"Product hero showcase","purpose":"An abstract, high-art visualization of cellular cohesion, where dry skin cells are knit back together by active molecules.","layout":"product-showcase","bindings":["products","homeVisuals","hero"]},{"id":"home-trust","name":"Trust strip","purpose":"Highlight delivery, quality, warranty, or value props.","layout":"compact icon/value row","bindings":["shop"]},{"id":"home-features","name":"Product features / benefits","purpose":"Showcase 3-4 key features of the product with icons and concise descriptions.","layout":"feature grid or alternating image-text rows","bindings":["products","homeVisuals"]}]},"product":{"notes":["Honor the required product slot order.","Include shipping/delivery details below the main hero when requested."]},"collection":{"notes":["Lead with a concise collection banner and then a real product grid."]},"footer":{"notes":["Footer should feel useful and commercially complete, not decorative only."]}}}