.cc-diy{--cc-diy-navy: #214057;--cc-diy-sky: #cce5ff;--cc-diy-mist: #f5faff;--cc-diy-orange: #e8ab61;--cc-diy-border: rgba(33, 64, 87, .14);--cc-diy-muted: rgba(33, 64, 87, .7);color:var(--cc-diy-navy);background:#fff}.cc-diy__tools{display:flex;width:fit-content;gap:.5rem;margin:0 0 1.2rem;border:1px solid var(--cc-diy-border);border-radius:1.2rem;background:var(--cc-diy-mist);padding:.4rem}.cc-diy__tools a{display:inline-flex;min-height:3.8rem;align-items:center;justify-content:center;border-radius:.8rem;padding:.7rem 1.4rem;color:var(--cc-diy-navy);font-size:1.15rem;font-weight:600;line-height:1.1;text-decoration:none}.cc-diy__tools a[aria-current=page]{background:var(--cc-diy-navy);color:#fff;box-shadow:0 .5rem 1.4rem #21405721}@media(hover:hover)and (pointer:fine){.cc-diy__tools a:not([aria-current=page]):hover{color:var(--cc-diy-orange)}}.cc-diy__hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 19rem;align-items:center;gap:2rem;min-height:14.5rem;padding:clamp(1.7rem,2.1vw,2.2rem) clamp(2rem,3vw,3rem);border-radius:1.8rem;background:radial-gradient(circle at 75% 0,rgba(255,255,255,.62),transparent 28%),linear-gradient(135deg,#cce5ff,#b8dbff)}.cc-diy__hero:after{content:"";position:absolute;right:-4rem;bottom:-13rem;width:26rem;height:26rem;border:3.2rem solid rgba(255,255,255,.25);border-radius:50%}.cc-diy__eyebrow{margin:0 0 .45rem;color:var(--cc-diy-navy);font-size:1.2rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.cc-diy__hero h1{max-width:none;margin:0;color:var(--cc-diy-navy);color:#fff;font-family:CC Bangers,Arial Black,sans-serif;font-size:clamp(3.2rem,3.35vw,4.4rem);font-weight:400;line-height:.95;letter-spacing:.015em;-webkit-text-stroke:1.2px var(--cc-diy-navy);paint-order:stroke fill;text-shadow:2px 3px 0 var(--cc-diy-navy);white-space:nowrap}.cc-diy__intro{max-width:68rem;margin:.7rem 0 0;color:var(--cc-diy-muted);font-size:clamp(1.2rem,1.2vw,1.4rem);line-height:1.4}.cc-diy__hero-mark{position:relative;z-index:1;width:18.5rem;justify-self:end}.cc-diy__hero-mark img{display:block;width:100%;height:auto}.cc-diy__layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(36rem,.82fr);gap:clamp(1.6rem,3vw,3rem);align-items:start;margin-top:2.4rem}.cc-diy__form,.cc-diy__result{border:1px solid var(--cc-diy-border);border-radius:2.4rem;background:#fff;box-shadow:0 1.6rem 4rem #21405712}.cc-diy__form{overflow:hidden}.cc-diy__step{padding:clamp(2rem,3vw,3rem);border-bottom:1px solid var(--cc-diy-border)}.cc-diy__step-heading{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;align-items:start}.cc-diy__step-visual{position:relative;display:grid;width:5rem;height:5rem;place-items:center;border:1px solid rgba(33,64,87,.13);border-radius:50%;background:#fff;box-shadow:0 .7rem 1.8rem #21405714}.cc-diy__step-visual svg{width:3.7rem;height:3.7rem;fill:none;stroke:var(--cc-diy-navy);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.cc-diy__step-visual .cc-diy__step-accent{fill:var(--cc-diy-orange);stroke:var(--cc-diy-orange);opacity:.9}.cc-diy__step-visual small{position:absolute;top:-.45rem;right:-.45rem;display:grid;width:2.2rem;height:2.2rem;place-items:center;border:.2rem solid #fff;border-radius:50%;background:var(--cc-diy-navy);color:#fff;font-size:1rem;font-weight:600}.cc-diy__step h2{margin:0;color:var(--cc-diy-navy);font-family:CC Bangers,Arial Black,sans-serif;font-size:clamp(2.6rem,2.4vw,3.2rem);font-weight:400;line-height:1;letter-spacing:.015em}.cc-diy__step-heading p{margin:.25rem 0 0;color:var(--cc-diy-muted);font-size:1.25rem;line-height:1.4}.cc-diy__presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-top:1.6rem}.cc-diy__presets[data-cc-presets=nicotine]{grid-template-columns:repeat(6,minmax(0,1fr))}.cc-diy__presets button{min-height:4.6rem;border:1px solid var(--cc-diy-border);border-radius:1.2rem;background:#fff;color:var(--cc-diy-navy);font:inherit;font-weight:500;cursor:pointer;transition:.16s ease}.cc-diy__presets button:hover{border-color:var(--cc-diy-navy);background:var(--cc-diy-mist)}.cc-diy__presets button.is-selected{border-color:var(--cc-diy-navy);background:var(--cc-diy-navy);color:#fff;box-shadow:0 .7rem 1.8rem #21405726}.cc-diy__field{display:grid;grid-template-columns:minmax(0,1fr) minmax(13rem,17rem);gap:1rem;align-items:center;margin-top:1.4rem;color:var(--cc-diy-muted);font-size:1.2rem;font-weight:500}.cc-diy__input-unit{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:4.6rem;border:1px solid var(--cc-diy-border);border-radius:1.2rem;background:#fff}.cc-diy__input-unit:focus-within{border-color:var(--cc-diy-navy);box-shadow:0 0 0 .3rem #cce5ffcc}.cc-diy__input-unit input{width:100%;min-width:0;border:0;outline:0;background:transparent;padding:1rem 1.2rem;color:var(--cc-diy-navy);font:inherit;font-size:1.5rem;font-weight:600}.cc-diy__input-unit b{padding-right:1.2rem;color:var(--cc-diy-muted);font-size:1.1rem;font-weight:500;white-space:nowrap}.cc-diy__input-unit.is-compact{min-width:12rem}.cc-diy__range-row{display:grid;grid-template-columns:minmax(0,1fr) 12rem;gap:1.4rem;align-items:center;margin-top:1.8rem}.cc-diy__range-row>input[type=range]{width:100%;accent-color:var(--cc-diy-orange)}.cc-diy__range-scale{display:flex;justify-content:space-between;gap:1rem;margin-top:.6rem;color:var(--cc-diy-muted);font-size:1rem}.cc-diy__advanced{padding:1.7rem clamp(2rem,3vw,3rem);background:var(--cc-diy-mist)}.cc-diy__advanced summary{color:var(--cc-diy-navy);font-weight:600;cursor:pointer}.cc-diy__advanced p{margin:.8rem 0 0;color:var(--cc-diy-muted);font-size:1.1rem;line-height:1.45}.cc-diy__result{position:sticky;top:2rem;overflow:hidden;padding:clamp(2.2rem,3vw,3.2rem)}.cc-diy__result-top{text-align:center}.cc-diy__result-top h2{margin:0;color:var(--cc-diy-navy);font-family:CC Bangers,Arial Black,sans-serif;font-size:clamp(3rem,3.2vw,4rem);font-weight:400;line-height:1;letter-spacing:.015em}.cc-diy__result-dosage{margin:.8rem 0 0;color:var(--cc-diy-navy);font-size:1.35rem;line-height:1.3}.cc-diy__result-dosage strong{font-weight:700}.cc-diy__result-top>p:last-child{margin:.35rem auto 0;color:var(--cc-diy-muted);font-size:1.2rem;line-height:1.45}.cc-diy__bottle{--cc-diy-aroma-share: 15%;--cc-diy-booster-share: 0%;--cc-diy-base-share: 85%;--cc-diy-aroma-offset: 0%;--cc-diy-booster-offset: 15%;--cc-diy-base-offset: 15%;position:relative;width:min(14.5rem,52%);margin:1.4rem auto 1.8rem;filter:drop-shadow(0 1.3rem 1.5rem rgba(33,64,87,.13))}.cc-diy__bottle img{position:relative;z-index:2;display:block;width:100%;height:auto}.cc-diy__bottle-liquid{position:absolute;z-index:3;left:14.6%;right:13.8%;top:34.7%;bottom:5.4%;overflow:hidden;border-radius:15% 15% 11% 11%/4% 4% 3% 3%;opacity:.54;mix-blend-mode:multiply;pointer-events:none}.cc-diy__bottle-layer{position:absolute;right:0;left:0;display:block;transition:bottom .24s ease,height .24s ease}.cc-diy__bottle-layer.is-base{bottom:var(--cc-diy-base-offset);height:var(--cc-diy-base-share);background:var(--cc-diy-sky)}.cc-diy__bottle-layer.is-booster{bottom:var(--cc-diy-booster-offset);height:var(--cc-diy-booster-share);background:var(--cc-diy-navy)}.cc-diy__bottle-layer.is-aroma{bottom:var(--cc-diy-aroma-offset);height:var(--cc-diy-aroma-share);background:var(--cc-diy-orange)}.cc-diy__bottle-volume{position:absolute;z-index:4;left:50%;bottom:17%;display:flex;align-items:baseline;gap:.25rem;margin:0;color:#fff;line-height:1;text-shadow:0 1px 3px rgba(33,64,87,.75);transform:translate(-50%);white-space:nowrap}.cc-diy__bottle-volume strong{font-size:clamp(2rem,3.2vw,2.8rem);font-weight:800}.cc-diy__bottle-volume span{font-size:1.05rem;font-weight:700;text-transform:lowercase}.cc-diy__recipe{display:grid;gap:.8rem}.cc-diy__recipe>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:center;padding:1.2rem 1.3rem;border:1px solid var(--cc-diy-border);border-radius:1.3rem;background:var(--cc-diy-mist)}.cc-diy__dot{width:1.2rem;height:1.2rem;border-radius:50%}.cc-diy__dot.is-aroma{background:var(--cc-diy-orange)}.cc-diy__dot.is-booster{background:var(--cc-diy-navy)}.cc-diy__dot.is-base{background:var(--cc-diy-sky);border:1px solid rgba(33,64,87,.12)}.cc-diy__recipe p{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;align-items:baseline;margin:0}.cc-diy__recipe small{color:var(--cc-diy-muted);font-size:1.05rem}.cc-diy__recipe strong{color:var(--cc-diy-navy);font-size:1.5rem;font-weight:600}.cc-diy__recipe em{grid-column:1/-1;color:var(--cc-diy-muted);font-size:.95rem;font-style:normal}.cc-diy__error{margin:1rem 0 0;border:1px solid rgba(150,35,25,.2);border-radius:1.2rem;background:#fff3f1;padding:1.2rem;color:#8d2118;font-size:1.1rem;line-height:1.45}.cc-diy.has-error .cc-diy__bottle{opacity:.45}.cc-diy__actions{display:grid;gap:.8rem;margin-top:1.4rem}.cc-diy__actions a,.cc-diy__actions button{display:flex;min-height:4.8rem;align-items:center;justify-content:center;border-radius:1.2rem;padding:1rem 1.4rem;font:inherit;font-weight:600;text-align:center;text-decoration:none;cursor:pointer}.cc-diy .cc-diy__actions>.cc-diy__primary,.cc-diy .cc-diy__actions>.cc-diy__primary:link,.cc-diy .cc-diy__actions>.cc-diy__primary:visited{border:1px solid var(--cc-diy-navy)!important;background:var(--cc-diy-navy)!important;background-color:var(--cc-diy-navy)!important;background-image:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 .8rem 2rem #21405724!important;transition:color .18s ease,box-shadow .18s ease,transform .18s ease!important}.cc-diy .cc-diy__actions>.cc-diy__primary:before,.cc-diy .cc-diy__actions>.cc-diy__primary:after{content:none!important;display:none!important}@media(hover:hover)and (pointer:fine){.cc-diy .cc-diy__actions>.cc-diy__primary:hover{border-color:var(--cc-diy-navy)!important;background:var(--cc-diy-navy)!important;background-color:var(--cc-diy-navy)!important;background-image:none!important;color:var(--cc-diy-orange)!important;-webkit-text-fill-color:var(--cc-diy-orange)!important;box-shadow:0 1rem 2.4rem #2140572e!important;transform:translateY(-1px)}}.cc-diy .cc-diy__actions>.cc-diy__primary:focus-visible{border-color:var(--cc-diy-navy)!important;background:var(--cc-diy-navy)!important;background-color:var(--cc-diy-navy)!important;background-image:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important}.cc-diy .cc-diy__actions>.cc-diy__primary:active{border-color:var(--cc-diy-navy)!important;background:var(--cc-diy-navy)!important;background-color:var(--cc-diy-navy)!important;color:var(--cc-diy-orange)!important;-webkit-text-fill-color:var(--cc-diy-orange)!important}.cc-diy__secondary{border:1px solid var(--cc-diy-navy);background:#fff;color:var(--cc-diy-navy)}.cc-diy__secondary:hover{background:var(--cc-diy-navy);color:#fff}.cc-diy__actions button{min-height:auto;border:0;background:transparent;color:var(--cc-diy-muted);font-size:1.05rem;text-decoration:underline}.cc-diy__notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;margin-top:1.8rem;border-left:.4rem solid var(--cc-diy-orange);border-radius:0 1.4rem 1.4rem 0;background:var(--cc-diy-mist);padding:1.4rem 1.6rem}.cc-diy__notice strong{color:var(--cc-diy-navy)}.cc-diy__notice p{margin:0;color:var(--cc-diy-muted);font-size:1.1rem;line-height:1.5}.cc-diy button:focus-visible,.cc-diy a:focus-visible,.cc-diy summary:focus-visible{outline:.3rem solid var(--cc-diy-sky);outline-offset:.3rem}@media screen and (max-width:989px){.cc-diy__layout{grid-template-columns:1fr}.cc-diy__result{position:static}.cc-diy__hero{grid-template-columns:minmax(0,1fr) 17rem}.cc-diy__hero h1{white-space:normal}}@media screen and (max-width:749px){.cc-diy__tools{width:100%}.cc-diy__tools a{flex:1 1 50%;padding-inline:.8rem}.cc-diy__hero{min-height:0;padding:2rem 1.8rem;border-radius:1.6rem}.cc-diy__hero h1{font-size:clamp(3.2rem,10vw,4.2rem)}.cc-diy__hero-mark{display:none}.cc-diy__form,.cc-diy__result{border-radius:2rem}.cc-diy__presets,.cc-diy__presets[data-cc-presets=nicotine]{grid-template-columns:repeat(3,minmax(0,1fr))}.cc-diy__field{grid-template-columns:1fr}.cc-diy__range-row{grid-template-columns:minmax(0,1fr) 10rem}.cc-diy__range-scale span:nth-child(2){display:none}.cc-diy__notice{grid-template-columns:1fr}}@media screen and (max-width:390px){.cc-diy__presets,.cc-diy__presets[data-cc-presets=nicotine]{grid-template-columns:repeat(2,minmax(0,1fr))}}
/*# sourceMappingURL=/cdn/shop/t/224/assets/section-diy-calculator.css.map */