.shopify-section .collagen-helix-section,.collagen-helix-section{display:block;width:100%}.collagen-helix-section .wrapper{width:100%}.collagen-helix-section .wrapper--grid{max-width:1400px;margin:0 auto;padding-left:35px;padding-right:35px}.collagen-helix-section .stage{position:relative;width:100%;container-type:size;aspect-ratio:16 / 7;max-height:65vh;overflow:hidden;background:var(--helix-bg, #0c3d39);touch-action:pan-y}.collagen-helix-section canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.collagen-helix-section canvas[id*=cvs-bg]{z-index:1}.collagen-helix-section canvas[id*=cvs-helix]{z-index:2}.collagen-helix-section canvas[id*=cvs-mask]{z-index:3}.collagen-helix-section canvas[id*=cvs-peptide]{z-index:4}.collagen-helix-section canvas[id*=cvs-burn]{z-index:5}.collagen-helix-section .stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.85  0 0 0 0 0.85  0 0 0 0.25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.25;mix-blend-mode:overlay}.collagen-helix-section .handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(43px,7.2cqmin,67px);height:clamp(43px,7.2cqmin,67px);border-radius:50%;border:1.5px solid rgba(245,240,232,.75);background:#ffffffeb;color:#1a3a32;display:flex;align-items:center;justify-content:center;z-index:11;cursor:grab;-webkit-user-select:none;user-select:none;box-shadow:0 2px 12px #0000002e;transition:border-color .2s,box-shadow .2s}.collagen-helix-section .handle:active{cursor:grabbing}.collagen-helix-section .handle svg{width:clamp(12px,3cqh,26px);height:clamp(12px,3cqh,26px);pointer-events:none}.collagen-helix-section .handle__arrows{display:flex;align-items:center;justify-content:center;opacity:1}.collagen-helix-section .handle--sphere .handle__arrows{gap:6px}.collagen-helix-section .handle--sphere .handle__arrows svg{width:20px;height:20px}.collagen-helix-section .handle__sphere-label{display:none}.collagen-helix-section .handle--sphere{width:88px;height:88px;left:calc(100% - 50px);cursor:grab}.collagen-helix-section .hint{position:absolute;left:50%;transform:translate(-50%);z-index:12;display:flex;flex-direction:column;align-items:center;font-family:Montserrat,Georgia,sans-serif;font-size:clamp(9px,.75vw,12px);font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:#d7f0eb8c;white-space:nowrap;pointer-events:none;transition:opacity .4s;will-change:transform;backface-visibility:hidden;-webkit-font-smoothing:antialiased}.collagen-helix-section .hint__sub{margin-top:5px;max-width:92vw;font-family:Montserrat,Georgia,sans-serif;font-size:clamp(9px,.75vw,12px);font-weight:300;letter-spacing:.08em;text-transform:none;color:#d7f0eb73;line-height:1;white-space:nowrap;text-align:center;pointer-events:none}.collagen-helix-section .conversion-text{position:absolute;left:50%;transform:translate(-50%);z-index:12;font-family:Montserrat,Georgia,sans-serif;font-size:clamp(9px,.75vw,12px);font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:#d7f0eb8c;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .4s;will-change:transform;backface-visibility:hidden;-webkit-font-smoothing:antialiased}.collagen-helix-section .hint--right{opacity:0}@keyframes collagen-icon-signal{0%{opacity:0;transform:translate(-50%,-50%) scale(.85)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.collagen-helix-section .handle.signal-anim{animation:collagen-icon-signal .6s ease-out forwards}@media(max-width:480px){.collagen-helix-section .hide-mobile{display:none}}.collagen-helix-section .lbl{display:none}.collagen-helix-section .ruler-row{position:relative;width:100%;height:2em;flex-shrink:0}.collagen-helix-section .ruler-spacer,.collagen-helix-section .ruler-gap,.collagen-helix-section .desc-bar--left,.collagen-helix-section .desc-bar--right{display:none}.collagen-helix-section .ruler-line--left{position:absolute;top:50%;left:20%;right:66%;height:1px;background:linear-gradient(to right,#d7f0eb00,#d7f0eb4d 25%,#d7f0eb8c 55% 75%,#d7f0eb00)}.collagen-helix-section .ruler-line--right{position:absolute;top:50%;left:66%;right:20%;height:1px;background:linear-gradient(to right,#d7f0eb00,#d7f0eb8c 25% 45%,#d7f0eb4d 75%,#d7f0eb00)}.collagen-helix-section .ruler-line--centre{position:absolute;top:50%;height:1px;background:linear-gradient(to right,#d7f0eb00,#d7f0eb4d 30%,#d7f0eb8c,#d7f0eb4d 70%,#d7f0eb00)}.collagen-helix-section .ruler-label{position:absolute;top:50%;transform:translateY(-.6em);display:flex;flex-direction:column;gap:.3em}.collagen-helix-section .ruler-label--left{right:53.7%;align-items:flex-start;text-align:left}.collagen-helix-section .ruler-label--right{left:53%;align-items:flex-start;text-align:left}.collagen-helix-section .ruler-label .lbl-title{font-family:Montserrat,Georgia,sans-serif;font-size:clamp(13px,1.05vw,17px);font-weight:500;letter-spacing:.04em;color:#f5f0e8eb;line-height:1;white-space:nowrap;margin:0}.collagen-helix-section .ruler-label .lbl-subtitle{font-family:Montserrat,Georgia,sans-serif;font-size:clamp(9px,.75vw,12px);font-weight:300;letter-spacing:.08em;color:#d7f0eb73;line-height:1;white-space:nowrap;margin:0}.collagen-helix-section .desc-zone{position:absolute;left:0;right:0;bottom:0;height:calc(clamp(8px,5.2%,21px) + clamp(63px,12.375cqh,99px) + clamp(8px,5.2%,21px));z-index:12;pointer-events:none;overflow:visible}.collagen-helix-section .desc-bar{height:1px}.collagen-helix-section .desc-text{position:absolute;left:53%;top:2em;bottom:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:clamp(16px,3vw,48px);z-index:13}.collagen-helix-section .peptide-pair{display:flex;flex-direction:column;align-items:flex-start;gap:2px;opacity:0;transition:opacity .25s ease-in-out}.collagen-helix-section .peptide-slot{position:relative}.collagen-helix-section .peptide-pair--3{position:absolute;top:0;left:0}.collagen-helix-section .peptide-dot{display:block;width:.72em;height:.72em;border-radius:50%;flex-shrink:0;opacity:.85}.collagen-helix-section .peptide-name{font-family:Montserrat,Georgia,sans-serif;font-size:clamp(9px,.85vw,13px);font-weight:500;letter-spacing:.04em;color:#d7f0ebe6;white-space:nowrap;line-height:1.2;display:inline-flex;align-items:center;gap:.55em}.collagen-helix-section .peptide-desc{font-family:Montserrat,Georgia,sans-serif;font-size:clamp(8px,.75vw,11px);font-weight:300;letter-spacing:.04em;color:#d7f0eb8c;white-space:nowrap;line-height:1.2;padding-left:1.27em}@media(max-width:480px){.collagen-helix-section .peptide-name,.collagen-helix-section .peptide-desc{white-space:normal}}.collagen-helix-section .state-label{display:none;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:13}.collagen-helix-section .state-label__panel{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.35em;transition:opacity .4s ease;padding:0 20px;box-sizing:border-box}.collagen-helix-section .state-label__panel--collagen{opacity:1}.collagen-helix-section .state-label__panel--peptides{opacity:0;gap:.4em}.collagen-helix-section .state-label__title{font-family:Montserrat,Georgia,sans-serif;font-size:clamp(13px,1.05vw,17px);font-weight:500;letter-spacing:.04em;color:#f5f0e8eb;line-height:1}.collagen-helix-section .state-label__sub{font-family:Montserrat,Georgia,sans-serif;font-size:clamp(9px,.75vw,12px);font-weight:300;letter-spacing:.08em;color:#d7f0eb73;line-height:1}.collagen-helix-section .state-label__entries{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:clamp(16px,5vw,40px);margin-top:.35em}.collagen-helix-section .state-label__entry{display:flex;flex-direction:column;align-items:flex-start;gap:2px;opacity:0;transition:opacity .25s ease-in-out}.collagen-helix-section .state-label__dot{display:block;width:.6em;height:.6em;border-radius:50%;flex-shrink:0;opacity:.85}.collagen-helix-section .state-label__ename{font-family:Montserrat,Georgia,sans-serif;font-size:clamp(9px,.85vw,13px);font-weight:500;letter-spacing:.04em;color:#d7f0ebe6;line-height:1.2;display:inline-flex;align-items:center;gap:.5em}.collagen-helix-section .state-label__edesc{font-family:Montserrat,Georgia,sans-serif;font-size:clamp(8px,.7vw,11px);font-weight:300;letter-spacing:.04em;color:#d7f0eb80;line-height:1.2;padding-left:1.1em}@media(max-width:767px){.collagen-helix-section .stage{aspect-ratio:3 / 4;max-height:none}.collagen-helix-section .ruler-row,.collagen-helix-section .desc-text{display:none}.collagen-helix-section .desc-zone{height:30%}.collagen-helix-section .state-label{display:block}.collagen-helix-section .hint,.collagen-helix-section .conversion-text{white-space:normal;width:88%;text-align:center;line-height:1.5;font-size:13px;color:#f5f0e8eb}.collagen-helix-section .hint__sub{width:100%;white-space:normal;margin-top:-2px;font-size:11px;line-height:1.4}.collagen-helix-section .state-label__title{font-size:16px}.collagen-helix-section .state-label__sub{font-size:11px}.collagen-helix-section .state-label__panel{gap:.2em;padding:0}.collagen-helix-section .state-label__entries{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;width:100%;gap:0;margin-top:.5em}.collagen-helix-section .state-label__entry--warm{grid-column:1;grid-row:1;align-items:center;justify-self:center}.collagen-helix-section .state-label__entry--cool,.collagen-helix-section .state-label__entry--violet{grid-column:2;grid-row:1;align-items:center;justify-self:center}.collagen-helix-section .state-label__ename{font-size:13px;white-space:nowrap}.collagen-helix-section .state-label__edesc{font-size:11px;white-space:nowrap;padding-left:0;text-align:center}}
/*# sourceMappingURL=/cdn/shop/t/40/assets/collagen-helix.css.map */