.ch-use--interactive .ug{--ug-ink:#2a2925;--ug-green:#225640;--ug-muted:#655c56;--ug-line:#ded6cd;--ug-stage:#edf2e9;display:block;width:calc(100% - 48px);max-width:1056px;margin-inline:auto;font-family:inherit;color:var(--ug-ink)}.ch-use--interactive[data-ug-family=disc] .ug,.ch-use--interactive[data-ug-family=cup] .ug{--ug-stage:#f0edf4}.ch-use--interactive :is(.ug,.ug *){box-sizing:border-box}.ch-use--interactive .ug [hidden]{display:none!important}.ch-use--interactive .ug__defs{position:absolute;overflow:hidden;pointer-events:none}.ch-use--interactive .ug svg{stroke-linecap:round;stroke-linejoin:round}.ch-use--interactive .ug button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:normal;min-width:0}.ch-use--interactive .ug :is(button,a):focus-visible{outline:2px solid var(--ug-green);outline-offset:4px}.ch-use--interactive .ug ::selection{background:#dce7d9;color:var(--ug-green)}.ch-use--interactive .ug__head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:36px;text-align:left}.ch-use--interactive .ug__head .ch-h2{margin:8px 0 0;font-size:clamp(28px,3.1vw,40px);line-height:1.2;letter-spacing:-.025em;color:var(--ug-ink);text-wrap:balance}.ch-use--interactive .ug__hint{display:none;max-width:29ch;margin:0 0 4px;color:var(--ug-muted);font-size:14px;line-height:1.6}.ch-use--interactive .ug[data-ready] .ug__hint{display:block}.ch-use--interactive .ug__grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:56px;align-items:center}.ch-use--interactive .ug__visual{min-width:0}.ch-use--interactive .ug__scene{position:relative;margin:0;background:var(--ug-stage);aspect-ratio:1.3;overflow:hidden;border-radius:3px;padding-bottom:50px;color:var(--ug-product)}.ch-use--interactive .ug__photo{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}.ch-use--interactive .ug__art{display:block;width:100%;height:100%;color:var(--ug-product)}.ch-use--interactive .ug__scene figcaption{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:50px;padding:12px 20px;background:var(--ug-stage);color:var(--ug-green);font-size:13px;line-height:1.4;border-top:1px solid #cfdacb}.ch-use--interactive .ug__scene figcaption>span:first-child{font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap}.ch-use--interactive .ug__scene figcaption>span:last-child{text-align:right;overflow-wrap:anywhere}.ch-use--interactive .ug__note{font-size:11px;line-height:1.5;margin:10px 0 0;color:var(--ug-muted);text-align:center}.ch-use--interactive .ug__steps{list-style:none;margin:0;padding:0;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--ug-line)}.ch-use--interactive .ug__step{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ug-line);min-width:0}.ch-use--interactive .ug__select{display:flex;align-items:center;gap:18px;width:100%;min-height:68px;padding:20px 0;text-align:left;background:none;border:0;color:var(--ug-muted);font-size:22px;font-weight:700;line-height:1.3;box-shadow:none;border-radius:0}.ch-use--interactive .ug__select>span:nth-child(2){overflow-wrap:anywhere;white-space:normal;min-width:0;max-width:100%}.ch-use--interactive .ug:not([data-ready]) .ug__select{pointer-events:none}.ch-use--interactive .ug__number{font-size:12px;font-weight:400;min-width:22px;letter-spacing:.04em;font-variant-numeric:tabular-nums}.ch-use--interactive .ug__arrow{margin-left:auto;display:flex;flex-shrink:0}.ch-use--interactive :is(.ug__arrow,.ug__next) svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;flex-shrink:0}.ch-use--interactive .ug__arrow svg{transform:rotate(-45deg)}.ch-use--interactive .ug__select:hover,.ch-use--interactive .ug__step.is-active>.ug__select{color:var(--ug-green)}.ch-use--interactive .ug__step.is-active>.ug__select{padding-bottom:10px}.ch-use--interactive .ug__step.is-active .ug__arrow svg{transform:rotate(90deg)}.ch-use--interactive .ug__description{padding:0 12px 22px 40px}.ch-use--interactive .ug__description p{font-size:16px;line-height:1.7;color:var(--ug-muted);max-width:40ch;margin:0;overflow-wrap:anywhere}.ch-use--interactive .ug__next{display:none;align-items:center;gap:12px;min-height:44px;font-size:13px;font-weight:400;line-height:1.5;padding:12px 0 0;color:var(--ug-green);background:none;border:0;box-shadow:none;border-radius:0;text-align:left}.ch-use--interactive .ug[data-ready] .ug__next{display:inline-flex}.ch-use--interactive .ug__next:hover{text-decoration:underline;text-underline-offset:4px}.ch-use--interactive .ug__care{display:grid;grid-template-columns:minmax(140px,180px) minmax(0,1fr);gap:32px;border-top:1px solid var(--ug-line);margin-top:40px;padding-top:26px;text-align:left}.ch-use--interactive .ug__care h3{font-family:inherit;font-size:18px;font-weight:400;line-height:1.5;color:var(--ug-green);margin:0;overflow-wrap:anywhere}.ch-use--interactive .ug__care-content{min-width:0;font-size:14px;line-height:1.7;color:var(--ug-muted)}.ch-use--interactive .ug__care-content>ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:20px 28px}.ch-use--interactive .ug__care-content li{list-style:none;margin:0;padding:0}.ch-use--interactive .ug__care-content li:before{content:none}.ch-use--interactive .ug__care-content strong{color:var(--ug-ink);font-weight:700}.ch-use--interactive .ug__care-content li>strong:first-child{display:block;margin-bottom:4px}.ch-use--interactive .ug__care-content>h3{margin-top:22px;margin-bottom:8px}.ch-use--interactive .ug__care-content>p{margin:0 0 12px}.ch-use--interactive .ug__care-content>p:last-child{margin-bottom:0}.ch-use--interactive .ug__care-content a{color:var(--ug-green);text-decoration:underline;text-underline-offset:3px}.ch-use--interactive .ug__svg-text{font:400 22px Quicksand,sans-serif;fill:var(--ug-green)}.ch-use--interactive .ug__fold{transform:translate(162px) scaleX(.42)}.ch-use--interactive .ug__scene.is-entering .ug__water{stroke-dasharray:12 10;animation:ug-water 1.6s ease-out both}.ch-use--interactive .ug__scene.is-entering .ug__wash{transform-origin:281px 241px;animation:ug-wash 1.4s ease-in-out both}.ch-use--interactive .ug__scene.is-entering .ug__dry{transform-origin:280px 81px;animation:ug-dry 1.6s ease-in-out both}.ch-use--interactive .ug__scene.is-entering :is(.ug__air,.ug__confirm){animation:ug-air 1.4s ease-out both}.ch-use--interactive .ug__scene.is-entering .ug__fold{animation:ug-fold 1.5s ease-in-out both}.ch-use--interactive .ug__scene.is-entering .ug__peel{transform-origin:339px 91px;animation:ug-peel 1.5s ease-out both}.ch-use--interactive .ug__scene.is-entering .ug__place{animation:ug-place 1.5s ease-out both}.ch-use--interactive .ug__scene.is-entering .ug__insert{animation:ug-insert 1.5s ease-out both}.ch-use--interactive .ug__scene.is-entering .ug__dispose{animation:ug-dispose 1.5s ease-out both}@keyframes ug-water{0%{stroke-dashoffset:66;opacity:.3}to{stroke-dashoffset:0;opacity:1}}@keyframes ug-wash{0%{transform:rotate(-12deg)}45%{transform:rotate(18deg)}to{transform:rotate(0)}}@keyframes ug-dry{0%{transform:rotate(-3deg)}40%{transform:rotate(3deg)}75%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes ug-air{0%{opacity:.3}to{opacity:1}}@keyframes ug-fold{0%{transform:translate(0) scaleX(1)}to{transform:translate(162px) scaleX(.42)}}@keyframes ug-peel{0%{transform:rotate(-13deg)}to{transform:rotate(0)}}@keyframes ug-place{0%{transform:translateY(-18px)}to{transform:translateY(0)}}@keyframes ug-insert{0%{transform:translate(8px,16px)}to{transform:translate(0)}}@keyframes ug-dispose{0%{transform:translateY(-10px)}to{transform:translateY(24px)}}@media(max-width:850px){.ch-use--interactive .ug__grid{gap:30px}.ch-use--interactive .ug__head{display:block}.ch-use--interactive .ug__hint{max-width:none;margin:12px 0 0}.ch-use--interactive .ug__select{font-size:20px;gap:14px}.ch-use--interactive .ug__description{padding-left:36px;padding-right:0}.ch-use--interactive .ug__description p{font-size:15px}.ch-use--interactive .ug__care{grid-template-columns:1fr;gap:20px}}@media(max-width:620px){.ch-use--interactive .ug__head{margin-bottom:24px}.ch-use--interactive .ug__head .ch-h2{font-size:30px}.ch-use--interactive .ug__hint{font-size:13px}.ch-use--interactive .ug__grid{grid-template-columns:1fr;gap:20px}.ch-use--interactive .ug[data-ready] .ug__grid{grid-template-columns:repeat(var(--ug-count),minmax(0,1fr));gap:20px 6px;align-items:start}.ch-use--interactive .ug[data-ready] :is(.ug__steps,.ug__step){display:contents}.ch-use--interactive .ug[data-ready] .ug__visual{grid-column:1/-1;grid-row:2}.ch-use--interactive .ug[data-ready] .ug__select{grid-row:1;flex-direction:column;justify-content:center;gap:5px;min-height:78px;height:100%;padding:4px 2px 12px;font-size:12px;line-height:1.35;text-align:center;border-bottom:2px solid var(--ug-line);-webkit-hyphens:auto;hyphens:auto}.ch-use--interactive .ug[data-ready] .ug__step:nth-child(1)>.ug__select{grid-column:1}.ch-use--interactive .ug[data-ready] .ug__step:nth-child(2)>.ug__select{grid-column:2}.ch-use--interactive .ug[data-ready] .ug__step:nth-child(3)>.ug__select{grid-column:3}.ch-use--interactive .ug[data-ready] .ug__step:nth-child(4)>.ug__select{grid-column:4}.ch-use--interactive .ug[data-ready] .ug__step.is-active>.ug__select{border-color:var(--ug-green)}.ch-use--interactive .ug[data-ready] .ug__arrow{display:none}.ch-use--interactive .ug[data-ready] .ug__description{grid-row:3;grid-column:1/-1;padding:0;min-height:120px}.ch-use--interactive .ug__description p{max-width:none;font-size:15px;line-height:1.65}.ch-use--interactive .ug__number{font-size:11px;min-width:0}.ch-use--interactive .ug__scene{aspect-ratio:1.35;padding-bottom:46px;max-height:335px}.ch-use--interactive .ug__scene figcaption{min-height:46px;padding:10px 14px;font-size:12px}.ch-use--interactive .ug__note{font-size:10px;text-wrap:balance}.ch-use--interactive .ug__care{margin-top:28px;padding-top:22px;gap:16px}.ch-use--interactive .ug__care-content>ul{grid-template-columns:1fr;gap:14px}.ch-use--interactive .ug__care-content li>strong:first-child{display:inline;margin-right:4px}.ch-use--interactive:not([data-ug-family=wear]) .ug[data-ready] .ug__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}.ch-use--interactive:not([data-ug-family=wear]) .ug[data-ready] .ug__select{min-height:72px;font-size:13px}.ch-use--interactive:not([data-ug-family=wear]) .ug[data-ready] .ug__step:nth-child(3)>.ug__select{grid-column:1;grid-row:2}.ch-use--interactive:not([data-ug-family=wear]) .ug[data-ready] .ug__step:nth-child(4)>.ug__select{grid-column:2;grid-row:2}.ch-use--interactive:not([data-ug-family=wear]) .ug[data-ready] .ug__visual{grid-row:3}.ch-use--interactive:not([data-ug-family=wear]) .ug[data-ready] .ug__description{grid-row:4}.ch-use--interactive .ug[data-many] .ug__grid{display:flex;flex-direction:column}.ch-use--interactive .ug[data-many] .ug__steps{display:block;width:100%}.ch-use--interactive .ug[data-many] .ug__step{display:block}.ch-use--interactive .ug[data-many] .ug__select{flex-direction:row;justify-content:start;font-size:18px}}@media(prefers-reduced-motion:reduce){.ch-use--interactive .ug__scene *{animation:none!important;transition:none!important}}@media(max-width:360px){.ch-use--interactive .ug{width:calc(100% - 32px)}}@media print{.ch-use--interactive :is(.ug__visual,.ug__next,.ug__hint,.ug__arrow){display:none!important}.ch-use--interactive .ug__grid,.ch-use--interactive .ug__steps,.ch-use--interactive .ug__step,.ch-use--interactive .ug__description[hidden]{display:block!important}.ch-use--interactive .ug__care-content>ul{display:block}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/ch-use-guide.css.map */