@layer ploy-product.bindings{#MainContent #product-science.cream-microbead-diagram{background:radial-gradient(ellipse at 100% 40%,oklch(.43 .07 216 / .5),transparent 40%),radial-gradient(ellipse at 73% 32%,oklch(.58 .012 265 / .45),transparent 51%),radial-gradient(ellipse at 77% 85%,oklch(.3 .052 259 / .45),transparent 42%),linear-gradient(110deg,#070b14 15%,#0f1624 58%,#15232f)!important;color:#f5f7fb!important}#MainContent #product-science.cream-microbead-diagram .product-molecule__mobile{display:none!important}#MainContent #product-science.cream-microbead-diagram>.koppa-section{display:block!important}#MainContent #product-science.cream-microbead-diagram .product-molecule__inner{align-items:center!important;gap:32px!important}#MainContent #product-science.cream-microbead-diagram .product-molecule__inner>article{background:transparent!important;border-radius:0!important;color:#f5f7fb!important;min-height:0!important;padding:0!important}#MainContent #product-science.cream-microbead-diagram .product-molecule__inner>article:last-child{display:flex!important;min-width:0!important}#MainContent #product-science.cream-microbead-diagram .product-molecule__inner>article:first-child .text-ploy-text-secondary{color:#b7c3d2!important}#MainContent #product-science.cream-microbead-diagram .product-molecule__inner>article:first-child [class*=border-ploy-border-primary]{border-color:#ffffff26!important}#MainContent #product-science.cream-microbead-diagram .product-molecule__inner figure{background:transparent!important;overflow:visible!important;margin:24px 0 0!important;flex:none!important;border-radius:0!important}#MainContent #product-science.cream-microbead-diagram .product-molecule__inner figure img{position:static!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:3 / 2!important;object-fit:contain!important;background:transparent!important}@media(min-width:1100px){#MainContent #product-science.cream-microbead-diagram .product-molecule__inner{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important}}@media(max-width:1099px){#MainContent #product-science.cream-microbead-diagram .product-molecule__inner{grid-template-columns:1fr!important}#MainContent #product-science.cream-microbead-diagram .product-molecule__inner>article:last-child{grid-row:1!important}}}@layer ploy-product.bindings{#MainContent #product-science.cream-microbead-diagram figure{position:relative!important;container-type:inline-size!important}#MainContent .cream-diagram-labels{position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;pointer-events:none!important}#MainContent .cream-diagram-label{position:absolute!important;left:6.25%!important;width:38%!important;display:flex!important;align-items:center!important;gap:10px!important;color:#bac6d0!important;font-size:clamp(9px,1.65cqw,13px)!important;line-height:1.3!important;font-weight:400!important;letter-spacing:0!important;text-shadow:none!important;filter:none!important}#MainContent .cream-diagram-label:after{content:""!important;flex:1!important;border-top:1px solid #bac6d060!important}#MainContent .cream-diagram-label--skin{top:22%!important;width:47%!important}#MainContent .cream-diagram-label--water{top:42%!important}#MainContent .cream-diagram-label--collagen{top:64%!important}#MainContent .cream-diagram-labels small{position:absolute!important;left:4%!important;bottom:5%!important;color:#aebac7!important;font-size:clamp(8px,1.2cqw,9px)!important;font-weight:400!important;text-shadow:none!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] img{border-radius:16px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] :is(.product-gallery__thumbs,.product-delivery__media,.product-comparison__mobile-product) img,#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] .rounded-button>img{border-radius:4px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] figure.rounded-card{border-radius:16px!important;overflow:hidden!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] .product-delivery__media{border-radius:4px!important}}@layer ploy-product.bindings{@media(min-width:768px){#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-formula{padding-block:clamp(60px,7vh,76px)!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-formula .koppa-section-heading>.grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:center!important;gap:28px!important;padding-top:20px!important;padding-bottom:32px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-formula .koppa-section-heading h2{max-width:24ch!important;margin:0!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-formula .koppa-section-heading>.grid>div{width:100%!important;max-width:none!important;justify-self:stretch!important;align-items:flex-start!important;gap:16px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-formula .koppa-section-heading a[href="#full-ingredient-list"]{margin-top:12px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-formula img[data-koppa-native-image=moisturizer-photo_10]{object-position:50% 66%!important}}@media(min-width:1200px){#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-formula .koppa-section-heading>.grid>div{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:24px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-formula .koppa-section-heading>.grid>div>div{max-width:32ch!important}}@media(min-width:768px)and (max-width:1023px){#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-formula .koppa-section-heading>.grid{grid-template-columns:1fr!important;gap:20px!important}}}@layer ploy-product.bindings{@media(min-width:768px)and (max-width:1199px){#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-formula img[data-koppa-native-image=moisturizer-photo_10]{object-fit:contain!important;object-position:center!important}}}@layer ploy-product.bindings{#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram>.koppa-section{padding-block:clamp(60px,7vh,76px)!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;grid-template-areas:"meta visual-meta" "heading visual" "intro visual" "benefits visual" "formula visual" "actions visual"!important;column-gap:48px!important;row-gap:0!important;align-items:start!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner>article,#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner>article:first-child>.my-auto{display:contents!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner>article:first-child>div:first-child{grid-area:meta!important;margin-bottom:32px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner>article:last-child>div:first-child{grid-area:visual-meta!important;margin-bottom:32px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner h2{grid-area:heading!important;max-width:none!important;margin:0!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner .my-auto>p{grid-area:intro!important;max-width:65ch!important;margin:16px 0 32px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner .my-auto>div{grid-area:benefits!important;margin:0!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner .my-auto>div>div{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr)!important;gap:20px!important;padding-top:18px!important;padding-bottom:18px!important;align-items:baseline!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner .my-auto>div>div>:is(h3,p){margin:0!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner>article:first-child>div:nth-child(3){grid-area:formula!important;margin-top:24px!important;padding-top:0!important;border-top:0!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner>article:first-child>div:last-child{grid-area:actions!important;margin-top:28px!important;column-gap:20px!important;row-gap:16px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner figure{grid-area:visual!important;align-self:center!important;width:100%!important;margin:0!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .cream-diagram-label,#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .cream-diagram-labels small{left:2%!important}@media(max-width:1099px){#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"meta" "heading" "intro" "visual-meta" "visual" "benefits" "formula" "actions"!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner>article:last-child>div:first-child{margin:0 0 16px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner figure{max-width:760px!important;justify-self:center!important;margin-bottom:28px!important}}@media(max-width:767px){#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram>.koppa-section{padding-block:64px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner>article:first-child>div:first-child{margin-bottom:24px!important;font-size:10px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner h2{max-width:22ch!important;font-size:24px!important;line-height:1.12!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner .my-auto>p{margin-bottom:24px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner>article:last-child>div:first-child{font-size:10px!important;gap:12px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner .my-auto>div>div{grid-template-columns:1fr!important;gap:8px!important;padding-top:16px!important;padding-bottom:16px!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner>article:first-child>div:last-child{align-items:flex-start!important;flex-direction:column!important}}}@layer ploy-product.bindings{#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .product-molecule__inner figure img{transform:translate(-25%)!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .cream-diagram-label{left:72%!important;width:28%!important;flex-direction:row!important;gap:8px!important;font-size:clamp(9px,1.65cqw,12px)!important;text-align:left!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .cream-diagram-label:after{display:none!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .cream-diagram-label:before{content:""!important;flex:0 0 clamp(10px,2.5cqw,20px)!important;border-top:1px solid #bac6d060!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] #product-science.cream-microbead-diagram .cream-diagram-labels small{left:16%!important}}@layer ploy-product.bindings{@media(min-width:768px){#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] .product-reviews [aria-label="Choose a customer review"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] .product-benefits article:has(>span:empty)>h3{grid-column:1 / -1!important;max-width:48ch!important}#MainContent [data-ploy-product-handle=ghk-cu-moisturizer] .product-benefits article:has(>span:empty)>span{display:none!important}}}
/*# sourceMappingURL=/cdn/shop/t/12/assets/cream-microbead-diagram.css.map */