.cc-home-diy{--cc-home-diy-ink: #214057;--cc-home-diy-sky: #b9dcff;--cc-home-diy-mist: #eef7ff;--cc-home-diy-orange: #efa24a;--cc-home-diy-line: rgba(33, 64, 87, .13);color:var(--cc-home-diy-ink);background:#fff}.cc-home-diy__shell{width:min(100% - 6.4rem,143.6rem);margin-inline:auto}.cc-home-diy__panel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,.92fr) minmax(42rem,1.08fr);gap:clamp(3rem,5vw,7rem);align-items:center;border:1px solid var(--cc-home-diy-line);border-radius:4rem 4rem 8rem/4rem 4rem 6rem;background:radial-gradient(circle at 8% 8%,rgba(255,255,255,.58),transparent 24rem),var(--cc-home-diy-sky);padding:clamp(3.2rem,5vw,6rem)}.cc-home-diy__panel:after{position:absolute;right:-11rem;bottom:-17rem;width:34rem;height:34rem;border:4rem solid rgba(255,255,255,.22);border-radius:50%;content:"";pointer-events:none}.cc-home-diy__copy,.cc-home-diy__preview{position:relative;z-index:1}.cc-home-diy__eyebrow{display:inline-flex;margin:0 0 1.2rem;border-radius:99rem;background:#ffe8cc;padding:.65rem 1.1rem;color:var(--cc-home-diy-ink);font-size:1.05rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.cc-home-diy__copy h2{margin:0;color:#fff;font-family:CC Bangers,Arial Black,sans-serif;font-size:clamp(4.6rem,5vw,7rem);font-weight:400;letter-spacing:.01em;line-height:.94;-webkit-text-stroke:.14rem var(--cc-home-diy-ink);paint-order:stroke fill;text-shadow:.3rem .3rem 0 var(--cc-home-diy-ink)}.cc-home-diy__text{max-width:58rem;margin:1.8rem 0 0;color:#214057c7;font-size:1.45rem;font-weight:500;line-height:1.55}.cc-home-diy__benefits{display:grid;gap:.9rem;margin:2.2rem 0 0;padding:0;list-style:none}.cc-home-diy__benefits li{display:flex;align-items:center;gap:1rem;color:var(--cc-home-diy-ink);font-size:1.2rem;font-weight:650}.cc-home-diy__benefits span{display:grid;width:2.8rem;height:2.8rem;flex:0 0 2.8rem;place-items:center;border-radius:50%;background:#fff;color:var(--cc-home-diy-ink);font-size:.9rem;font-weight:800;box-shadow:0 .5rem 1.3rem #21405714}.cc-home-diy__button{display:inline-flex;width:min(100%,34rem);min-height:5.6rem;align-items:center;justify-content:space-between;gap:1.2rem;margin-top:2.4rem;border:1px solid var(--cc-home-diy-ink);border-radius:1.2rem;background:var(--cc-home-diy-ink);padding:1.2rem 1.7rem;color:#fff;font-size:1.25rem;font-weight:600;letter-spacing:.02em;text-decoration:none;transition:color .16s ease,transform .16s ease}.cc-home-diy__button span:last-child{font-size:1.8rem;line-height:1}.cc-home-diy__button:hover,.cc-home-diy__button:focus-visible{border-color:var(--cc-home-diy-ink);background:var(--cc-home-diy-ink);color:var(--cc-home-diy-orange);transform:translateY(-2px)}.cc-home-diy__preview{overflow:hidden;border:1px solid rgba(33,64,87,.14);border-radius:2.8rem;background:#fffffff0;padding:clamp(2rem,3vw,3rem);box-shadow:0 2rem 5rem #2140571f}.cc-home-diy__preview-head{display:flex;align-items:center;justify-content:space-between;gap:2rem}.cc-home-diy__preview-head>div{display:grid;gap:.35rem}.cc-home-diy__preview-head strong{color:var(--cc-home-diy-ink);font-family:CC Bangers,Arial Black,sans-serif;font-size:clamp(1.5rem,2vw,2rem);font-weight:400;letter-spacing:.02em;line-height:1.2}.cc-home-diy__preview-head>span{display:grid;width:5.2rem;height:5.2rem;flex:0 0 5.2rem;place-items:center;border-radius:1.4rem 1.4rem 2rem;background:var(--cc-home-diy-ink);color:#fff;font-family:CC Bangers,Arial Black,sans-serif;font-size:2rem;letter-spacing:.04em}.cc-home-diy__controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1.8rem}.cc-home-diy__controls>span{display:grid;gap:.3rem;border:1px solid var(--cc-home-diy-line);border-radius:1.2rem;background:var(--cc-home-diy-mist);padding:1rem 1.1rem}.cc-home-diy__controls small,.cc-home-diy__result-list small{color:#2140579e;font-size:.9rem}.cc-home-diy__controls strong{color:var(--cc-home-diy-ink);font-size:1.25rem;font-weight:600}.cc-home-diy__recipe{display:grid;grid-template-columns:minmax(11rem,.7fr) minmax(18rem,1.3fr);gap:1.5rem;align-items:center;margin-top:1.6rem}.cc-home-diy__bottle{position:relative;width:min(100%,9.2rem);margin-inline:auto}.cc-home-diy__bottle img{display:block;width:100%;height:auto;filter:saturate(1.08) drop-shadow(0 1.2rem 1.5rem rgba(33,64,87,.12))}.cc-home-diy__bottle-volume{position:absolute;right:0;bottom:21%;left:0;color:#fff;font-size:1.8rem;font-weight:800;line-height:1;text-align:center;text-shadow:0 .1rem .25rem rgba(33,64,87,.9)}.cc-home-diy__bottle-volume small{font-size:.9rem;font-weight:750}.cc-home-diy__result-list{display:grid;gap:.7rem}.cc-home-diy__result-list>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:center;border:1px solid var(--cc-home-diy-line);border-radius:1.1rem;background:#fff;padding:.9rem 1rem}.cc-home-diy__result-list i{width:1rem;height:1rem;border-radius:50%}.cc-home-diy__result-list i.is-aroma{background:var(--cc-home-diy-orange)}.cc-home-diy__result-list i.is-booster{background:var(--cc-home-diy-ink)}.cc-home-diy__result-list i.is-base{border:1px solid rgba(33,64,87,.15);background:var(--cc-home-diy-sky)}.cc-home-diy__result-list span{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}.cc-home-diy__result-list strong{color:var(--cc-home-diy-ink);font-size:1.2rem;font-weight:600;white-space:nowrap}@media screen and (max-width:989px){.cc-home-diy__panel{grid-template-columns:1fr}.cc-home-diy__copy{text-align:center}.cc-home-diy__text,.cc-home-diy__button{margin-inline:auto}.cc-home-diy__benefits{width:max-content;max-width:100%;margin-inline:auto;text-align:left}}@media screen and (max-width:749px){.cc-home-diy__shell{width:min(100% - 3rem,143.6rem)}.cc-home-diy__panel{border-radius:2.6rem 2.6rem 4.5rem;padding:2.6rem 1.7rem}.cc-home-diy__copy h2{font-size:clamp(4.2rem,14vw,5.8rem)}.cc-home-diy__preview{border-radius:2rem;padding:1.6rem}.cc-home-diy__controls{grid-template-columns:1fr}.cc-home-diy__controls>span{grid-template-columns:1fr auto;align-items:center}}@media screen and (max-width:480px){.cc-home-diy__recipe{grid-template-columns:1fr}.cc-home-diy__bottle{width:7.8rem}.cc-home-diy__preview-head>span{width:4.4rem;height:4.4rem;flex-basis:4.4rem;font-size:1.7rem}}@media(prefers-reduced-motion:reduce){.cc-home-diy__button{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/200/assets/section-home-diy-preview.css.map */