hb-usp-story{display:block;color-scheme:light;--olive:#777e42;--ink:rgb(var(--color-foreground,29,29,29));--muted:rgba(var(--color-foreground,29,29,29),.88);--line:rgba(var(--color-foreground,29,29,29),.14);font-family:var(--font-body-family,Jost,sans-serif);font-style:var(--font-body-style,normal);font-weight:var(--font-body-weight,300);color:var(--ink);background:transparent;font-synthesis:none;margin:0;-webkit-font-smoothing:antialiased}hb-usp-story *{box-sizing:border-box}hb-usp-story [hidden]{display:none!important}hb-usp-story button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-transform:none;box-shadow:none;letter-spacing:normal}hb-usp-story button:before,hb-usp-story button:after{box-shadow:none}hb-usp-story button:disabled{cursor:progress}hb-usp-story button:focus-visible{outline:2px solid var(--olive);outline-offset:4px}hb-usp-story .usp{width:min(100%,470px);padding:var(--usp-top-mobile,0px) 20px var(--usp-bottom-mobile,16px);margin:0 auto;display:grid;grid-template-areas:"headline" "switch" "visual" "story";grid-template-columns:minmax(0,1fr)}hb-usp-story .headline{grid-area:headline;text-align:center}hb-usp-story .hb-main-heading{margin:0 auto;color:var(--ink);max-width:330px;text-wrap:balance}hb-usp-story .product-control{grid-area:switch;position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;width:180px;height:44px;align-items:center;margin:8px auto 4px;padding:0 3px;border:0;border-radius:24px;background:none}hb-usp-story .product-control:before{content:"";position:absolute;top:3px;right:0;bottom:3px;left:0;border:1px solid rgba(119,126,66,.16);border-radius:24px;background:#777e420e;pointer-events:none;z-index:-2}hb-usp-story .product-control:after{content:"";position:absolute;left:3px;top:6px;width:calc(50% - 3px);height:32px;border-radius:20px;background:rgb(var(--color-background,255,255,255));box-shadow:0 1px 4px #1d1d1d1a;transition:transform .32s cubic-bezier(.22,.8,.25,1);pointer-events:none;z-index:-1}hb-usp-story .product-control:has(button[data-product=coffee][aria-pressed=true]):after{transform:translate(100%)}hb-usp-story .product-control button{display:flex;align-items:center;justify-content:center;gap:7px;position:relative;border:0;border-radius:24px;min-height:44px;min-width:0;padding:0 10px;background:transparent;font-size:13px;font-weight:400;line-height:1.3;color:var(--muted);transition:color .2s}hb-usp-story .product-control button:before{content:"";width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--olive);opacity:.55;transition:opacity .2s,transform .2s}hb-usp-story .product-control button[data-product=coffee]:before{background:#79563e}hb-usp-story .product-control button[aria-pressed=true]{color:var(--ink);font-weight:500}hb-usp-story .product-control button[aria-pressed=true]:before{opacity:1;transform:scale(1.15)}hb-usp-story .product-control button:after{content:none}hb-usp-story .product-control button:disabled{cursor:progress}hb-usp-story .visual{grid-area:visual;margin:0;min-width:0;display:flex;flex-direction:column;padding-bottom:9px}hb-usp-story .visual figcaption{text-align:center;font-size:12px;font-weight:400;line-height:1.4;letter-spacing:.2px;color:rgba(var(--color-foreground,29,29,29),.68);margin:14px 0 4px}hb-usp-story .hint-hover{display:none}hb-usp-story .stage{--art-height:clamp(360px,49svh,420px);--crop-top:0px;--crop-bottom:8px;position:relative;width:100%;height:calc(var(--art-height) - var(--crop-top) - var(--crop-bottom));isolation:isolate;perspective:900px}hb-usp-story .composition{position:absolute;left:calc(50% + var(--art-height) * .002071824);top:calc(0px - var(--crop-top));width:calc(var(--art-height) * .75);height:var(--art-height);margin-left:calc(var(--art-height) * -.375);transform-origin:50% 94%;pointer-events:none}hb-usp-story .piece{position:absolute;padding:0;border:0;background:none;overflow:visible;pointer-events:none;transform-origin:50% 60%;will-change:auto}hb-usp-story .piece-art{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mix-blend-mode:multiply;transition:opacity .22s,transform .22s;filter:brightness(1.055) contrast(1.025)}hb-usp-story .piece-art img{position:absolute;max-width:none;max-height:none;border:0;border-radius:0;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent)}hb-usp-story .piece:not(.cup) .piece-art{pointer-events:auto;cursor:pointer}hb-usp-story .piece.cup{z-index:0}hb-usp-story .piece.cup .piece-art{-webkit-mask-image:url(hb-usp-cup-mask.svg);mask-image:url(hb-usp-cup-mask.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}hb-usp-story .ingredient-hit{pointer-events:auto;position:absolute;left:calc(50% + var(--side) * 76px);top:50%;width:100px;height:44px;min-height:44px;transform:translate(-50%,-50%);padding:0;border:0;background:none;border-radius:3px;z-index:1;font-size:12px;font-weight:400;line-height:1.25;color:var(--muted);text-decoration:underline;text-decoration-color:rgba(var(--color-foreground,29,29,29),.25);text-underline-offset:4px}hb-usp-story .ingredient-hit[aria-expanded=true]{color:var(--ink);text-decoration-color:var(--olive)}hb-usp-story .ingredient-hit-group{white-space:normal;text-wrap:balance;overflow-wrap:normal}hb-usp-story .ingredient-hit.ingredient-hit-image{top:0;right:0;bottom:0;left:0;width:100%;height:100%;min-width:0;min-height:0;margin:0;transform:none;z-index:2;text-decoration:none}hb-usp-story .piece.is-explored .piece-art{transform:translateY(-3px)}hb-usp-story .ingredient-detail{position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0;border:0;border-radius:0;box-shadow:none;background:none;isolation:isolate;color:#fffef8;pointer-events:none;text-shadow:0 1px 3px #26301980}hb-usp-story .cup-veil{position:absolute;z-index:-1;left:-3%;right:-3%;top:-9px;bottom:-10px;background:radial-gradient(ellipse at center,rgba(45,59,26,.9) 0%,rgba(45,59,26,.72) 43%,rgba(45,59,26,.2) 72%,transparent 95%);filter:blur(3px);border-radius:46%;pointer-events:none}hb-usp-story .usp[data-product=coffee] .cup-veil{background:radial-gradient(ellipse at center,rgba(30,19,12,.9),rgba(30,19,12,.65) 48%,transparent 95%)}hb-usp-story .ingredient-detail h3{font:400 13px/1.15 var(--font-heading-family,Jost,sans-serif);color:inherit;letter-spacing:-.01em;margin:0;text-wrap:balance}hb-usp-story .ingredient-description{font:400 10.5px/1.3 var(--font-body-family,Jost,sans-serif);margin:5px 0 0;color:inherit;text-wrap:balance}hb-usp-story .ingredient-description:empty{display:none}hb-usp-story .ingredient-metrics{display:grid;gap:7px;margin:6px 0 0;width:100%}hb-usp-story .ingredient-metrics div{display:flex;flex-direction:column-reverse;align-items:center;gap:2px}hb-usp-story .ingredient-metrics dt{font:400 9px/1.2 var(--font-body-family,Jost,sans-serif);color:inherit;opacity:.9;letter-spacing:0}hb-usp-story .ingredient-metrics dd{font:400 16px/1.1 var(--font-body-family,Jost,sans-serif);margin:0;color:inherit;letter-spacing:-.025em;text-wrap:balance}hb-usp-story .ingredient-note{font:400 9px/1.2 var(--font-body-family,Jost,sans-serif);color:inherit;opacity:.88;margin:5px 0 0}hb-usp-story .ingredient-note:empty,hb-usp-story .ingredient-metrics:empty{display:none}hb-usp-story .ingredient-detail.is-pairing h3,hb-usp-story .ingredient-detail.is-pairing .ingredient-description{display:none}hb-usp-story .is-pairing .ingredient-metrics{margin:0;gap:12px}hb-usp-story .is-pairing .ingredient-metrics dd{font-size:13px;letter-spacing:-.02em}hb-usp-story .is-pairing .ingredient-metrics dt{font-size:10px}hb-usp-story .story{grid-area:story;min-width:0}hb-usp-story .pillars{display:grid;gap:0}hb-usp-story .pillar{width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;padding:12px 0 11px;position:relative}hb-usp-story .pillar-title{font:400 20px/1.3 var(--font-heading-family,Jost,sans-serif);letter-spacing:inherit;margin:0;color:var(--ink)}hb-usp-story .pillar-summary{font-size:14px;font-weight:400;line-height:1.45;letter-spacing:.2px;margin:5px 0 0;color:var(--muted)}hb-usp-story .pillar-proof{font-size:12px;line-height:1.55;color:var(--ink);margin:7px 0 0;letter-spacing:.005em;font-weight:500}hb-usp-story .lower-shadow{position:absolute;left:50%;top:calc(var(--art-height) * .958 - var(--crop-top));width:20%;max-width:88px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at center,#4143312b 0%,#41433113 38%,transparent 72%);filter:blur(2px);pointer-events:none;z-index:-1}hb-usp-story .stage:not(.ready) .lower-shadow{visibility:hidden}hb-usp-story .stage:not(.ready) .composition{opacity:0}hb-usp-story .load-status{position:absolute;left:0;right:0;top:45%;text-align:center;font-size:12px;color:var(--muted)}hb-usp-story .retry{position:absolute;left:50%;top:56%;transform:translate(-50%);border:1px solid var(--line);background:#fff;padding:10px 18px;border-radius:5px}hb-usp-story .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}hb-usp-story .noscript{padding:24px;text-align:center}hb-usp-story .cup-switch-hit,hb-usp-story .cup-switch-label{display:none}@media(max-width:849px){hb-usp-story .usp{grid-template-areas:"headline" "visual" "story"}hb-usp-story .product-control{display:none}hb-usp-story .stage{--art-height:clamp(410px,56svh,480px)}hb-usp-story .cup-switch-hit,hb-usp-story .cup-switch-label{position:absolute;margin:0;padding:0;border:0;border-radius:0;background:transparent;background-image:none;box-shadow:none;appearance:none;-webkit-appearance:none;pointer-events:auto;text-transform:none}hb-usp-story .cup-switch-hit:before,hb-usp-story .cup-switch-hit:after,hb-usp-story .cup-switch-label:before,hb-usp-story .cup-switch-label:after{content:none;display:none;background:none;border:0;box-shadow:none}hb-usp-story .cup-switch-hit{display:block;top:0;right:0;bottom:0;left:0;width:100%;height:100%;min-width:0;min-height:0;z-index:2;transform:none}hb-usp-story .cup-switch-label{display:flex;align-items:center;justify-content:center;gap:6px;width:78px;height:44px;min-width:78px;min-height:44px;z-index:7;isolation:isolate;transform:translate(-50%,-50%);font-size:12px;font-weight:400;line-height:1.3;color:var(--ink);white-space:nowrap;text-decoration:none}hb-usp-story .cup-switch-label:before{content:"";display:block;width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:#79563e;pointer-events:none}hb-usp-story .usp[data-product=coffee] .cup-switch-label:before{background:var(--olive)}hb-usp-story .cup-switch-label:after{content:"";display:block;position:absolute;top:6px;right:0;bottom:6px;left:0;border:1px solid var(--line);border-radius:18px;background:rgba(var(--color-background,255,255,255),.85);z-index:-1;pointer-events:none;transition:background .2s,border-color .2s}hb-usp-story .cup-switch-label:hover:after,hb-usp-story .cup-switch-label:focus-visible:after{background:#777e4214;border-color:#777e4259}}@media(min-width:850px){hb-usp-story .usp{width:min(100%,1180px);padding:var(--usp-top-desktop,0px) 55px var(--usp-bottom-desktop,0px);grid-template-areas:"headline headline" "visual story" "switch story" "hint story";grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);grid-template-rows:auto auto 44px auto;column-gap:clamp(55px,7vw,100px)}hb-usp-story .headline{text-align:center;padding-bottom:6px}hb-usp-story .hb-main-heading{max-width:none;white-space:normal}hb-usp-story .product-control{align-self:center;justify-self:center;margin:0;min-height:44px}hb-usp-story .product-control button{font-size:13px}hb-usp-story .stage{grid-area:visual;--art-height:550px;--crop-bottom:16px}hb-usp-story .visual{display:contents}hb-usp-story .visual figcaption{grid-area:hint;align-self:start;justify-self:center;margin:12px 0 0;font-size:12px;line-height:1.4}hb-usp-story .story{padding:45px 0 0;align-self:start}hb-usp-story .pillar{padding:22px 0}hb-usp-story .pillar-title{font-size:24px}hb-usp-story .pillar-summary{font-size:16px;margin-top:9px;line-height:1.5;max-width:31em}hb-usp-story .pillar-proof{font-size:14px;margin-top:9px;line-height:1.6}hb-usp-story .ingredient-hit{left:calc(50% + var(--side) * 86px);font-size:13px}hb-usp-story .ingredient-detail h3{font-size:16px}hb-usp-story .ingredient-description{font-size:12px}hb-usp-story .ingredient-metrics dd{font-size:20px}hb-usp-story .ingredient-metrics dt{font-size:10px}hb-usp-story .ingredient-note{font-size:10px}hb-usp-story .is-pairing .ingredient-metrics dd{font-size:16px}hb-usp-story .is-pairing .ingredient-metrics dt{font-size:11px}hb-usp-story .lower-shadow{height:16px;filter:blur(2.5px)}}@media(min-width:850px)and (max-height:780px){hb-usp-story .headline{padding-bottom:9px}hb-usp-story .stage{--art-height:480px}hb-usp-story .pillar{padding-top:17px;padding-bottom:17px}hb-usp-story .pillar-title{font-size:24px}}@media(max-width:360px){hb-usp-story .usp{padding-inline:16px}hb-usp-story .stage{--art-height:387px}hb-usp-story .pillar-title{font-size:20px}hb-usp-story .pillar-summary{font-size:13px}hb-usp-story .pillar{padding-block:10px}hb-usp-story .pillar-proof{font-size:11.5px}hb-usp-story .ingredient-detail h3{font-size:12px}hb-usp-story .ingredient-description{font-size:10px}hb-usp-story .ingredient-metrics dd{font-size:14px}hb-usp-story .is-pairing .ingredient-metrics dd{font-size:12px}}@media(min-width:850px)and (hover:hover)and (pointer:fine){hb-usp-story .hint-touch{display:none}hb-usp-story .hint-hover{display:inline}}@media(hover:hover)and (pointer:fine){hb-usp-story .ingredient-hit:hover{color:var(--ink);text-decoration-color:var(--olive)}hb-usp-story .product-control button:hover{color:var(--ink)}hb-usp-story .piece:not(.cup):has(.ingredient-hit:hover) .piece-art,hb-usp-story .piece:not(.cup) .piece-art:hover{transform:translateY(-2px)}}@media(prefers-reduced-motion:reduce){hb-usp-story *,hb-usp-story *:before,hb-usp-story *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}hb-usp-story .cup-veil{left:4%;right:4%;top:-6px;bottom:-6px;filter:blur(1px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}hb-usp-story .ingredient-metrics dd,hb-usp-story .ingredient-metrics dt{max-width:100%;white-space:normal}@media(max-width:360px){hb-usp-story .is-pairing .ingredient-metrics{gap:8px}hb-usp-story .is-pairing .ingredient-metrics dd{font-size:11px}hb-usp-story .is-pairing .ingredient-metrics dt{font-size:9px}}hb-usp-story .piece-art .cup-liquid-surface{display:block}hb-usp-story .cup-liquid-surface{position:absolute;left:29%;top:22%;width:43%;height:33%;pointer-events:none;opacity:0;background:linear-gradient(90deg,#758135,#606b26 28%,#566122 55%,#5a6625 78%,#606c2b);-webkit-mask-image:radial-gradient(ellipse at center,#000 0%,#000 62%,transparent 95%);mask-image:radial-gradient(ellipse at center,#000 0%,#000 62%,transparent 95%);transition:opacity .24s ease-in-out}hb-usp-story .composition[data-scene=coffee] .cup-liquid-surface{background:linear-gradient(90deg,#25140c,#140802 25%,#0d0300 55%,#130702 80%,#20120b)}hb-usp-story .visual.has-detail .cup-liquid-surface{opacity:1}hb-usp-story .cup-veil{background:none!important;filter:none;-webkit-mask-image:none;mask-image:none}hb-usp-story .ingredient-detail{overflow:hidden}hb-usp-story .cup-copy{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto;width:100%;max-width:100%;letter-spacing:normal;transform:scale(var(--reader-scale,1));transform-origin:center;overflow-wrap:anywhere}hb-usp-story .cup-copy>*{max-width:100%}hb-usp-story .ingredient-detail[data-ingredient=maitake] h3{font-size:11px;line-height:1.15}hb-usp-story .cup-editor-note{position:absolute;z-index:8;bottom:0;left:0;right:0;font:12px/1.4 var(--font-body-family,Jost,sans-serif);color:#8a352d;background:#fff;padding:8px;text-align:center}@media(min-width:850px){hb-usp-story .ingredient-detail[data-ingredient=maitake] h3{font-size:13px}}hb-usp-story .cup-name-line{display:block;white-space:nowrap}hb-usp-story .is-pairing .ingredient-metrics{gap:8px}hb-usp-story .is-pairing .ingredient-metrics dt{font-size:9.5px;line-height:1.15;overflow-wrap:normal;word-break:normal}hb-usp-story .is-pairing .ingredient-metrics dd{white-space:nowrap}@media(min-width:850px){hb-usp-story .is-pairing .ingredient-metrics dt{font-size:11px}}@media(max-width:360px){hb-usp-story .is-pairing .ingredient-metrics dt{font-size:9px}}@media(max-width:360px){hb-usp-story .ingredient-detail[data-ingredient=maitake] h3{font-size:9.5px}}hb-usp-story .ingredient-detail[data-product=coffee][data-ingredient=coffee] .ingredient-metrics{margin-top:6px}hb-usp-story .ingredient-detail[data-product=coffee][data-ingredient=coffee] h3{white-space:pre-line}hb-usp-story .ingredient-description{white-space:pre-line}hb-usp-story .usp.no-heading{grid-template-areas:"visual" "story"}hb-usp-story .no-heading .visual figcaption{margin-top:0}@media(min-width:850px){hb-usp-story .usp.no-heading{grid-template-areas:"visual story" "switch story" "hint story";grid-template-rows:auto 44px auto}hb-usp-story .no-heading .visual figcaption{margin-top:12px}}hb-usp-story .piece-art.has-alpha{mix-blend-mode:normal;filter:none;mask-image:none;-webkit-mask-image:none}hb-usp-story .ingredient-canvas{display:block;width:100%;height:100%;pointer-events:none}hb-usp-story .piece.cup .piece-art.has-alpha{-webkit-mask-image:url(hb-usp-cup-mask.svg);mask-image:url(hb-usp-cup-mask.svg);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
/*# sourceMappingURL=/cdn/shop/t/28/assets/hb-usp-story.css.map */