@property --press{syntax: "<number>"; inherits: true; initial-value: 0;}@property --depth{syntax: "<number>"; inherits: true; initial-value: .3;}firmness-explorer{display:block}.firmness{--h: 84px;transition:--depth .8s cubic-bezier(.3,1,.4,1)}@media(min-width:750px){.firmness{--h: 112px}}.firmness__layout{display:grid;gap:28px;grid-template-areas:"head" "viz" "panel"}@media(min-width:990px){.firmness__layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"viz head" "viz panel";column-gap:clamp(48px,6vw,104px);row-gap:28px;align-items:start}.firmness__viz{align-self:stretch}}.firmness__head{grid-area:head;display:grid;gap:12px}.firmness__eyebrow{color:var(--color-muted);font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.firmness__lede{color:var(--color-muted);max-width:46ch}.firmness__viz{grid-area:viz;margin:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(20px,3vw,36px);border:1px solid #e5e5e5;border-radius:20px;background:#fff}.firmness__stage{position:relative;padding:76px 4% 0}.firmness__cells{display:flex;align-items:flex-end;gap:2px;height:calc(var(--h) + 6px)}.firmness__cell{--give: calc(var(--press) * var(--depth) * var(--g));flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}.firmness__cell i{height:4px;margin:0 -1px 2px;background:#1d1d1f}.firmness__cell b{height:calc(var(--h) * (1 - var(--give)));background:linear-gradient(to top,#c9cac5 50%,#e6e6e2 50%) 0 100% / 100% calc(7px * (1 - var(--give) * .8)) repeat-y;border-radius:1px 1px 0 0}.firmness__desk{display:block;height:1px;background:rgb(var(--color-text-rgb) / .35)}.firmness__mouse{position:absolute;z-index:1;left:50%;bottom:calc(var(--h) + 7px);width:clamp(64px,18%,120px);aspect-ratio:2.4;border-radius:50% 50% 8px 8px/85% 85% 8px 8px;background:#1d1d1f;translate:-50% calc(var(--h) * var(--press) * var(--depth))}.firmness__mouse:after{content:"";position:absolute;left:50%;top:22%;width:1px;height:30%;background:#ffffff59}.firmness__stage{animation:firmness-press 2.8s cubic-bezier(.45,0,.3,1) infinite paused}.firmness.is-live .firmness__stage{animation-play-state:running}@keyframes firmness-press{0%,12%{--press: 0}42%,60%{--press: 1}90%,to{--press: 0}}.firmness__caption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;color:var(--color-muted);font-size:.75rem}.firmness__caption span{display:inline-flex;align-items:center;gap:8px}.firmness__key{display:inline-block;width:14px;height:8px;border-radius:1px}.firmness__key--fabric{height:3px;background:#1d1d1f}.firmness__key--foam{background:linear-gradient(to top,#c9cac5 50%,#e6e6e2 50%) 0 0 / 100% 4px}.firmness__note{flex-basis:100%}@media(min-width:750px){.firmness__note{flex-basis:auto;margin-left:auto}}.firmness__panel{grid-area:panel;display:grid;gap:22px}.firmness__picker{border:0;padding:0;margin:0;min-width:0}.firmness__detail{display:grid;gap:20px}.firmness__text{max-width:46ch;font-size:1.0625rem;line-height:1.5}.firmness__meters{display:grid;gap:12px;margin:0}.firmness__meter{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:16px}.firmness__meter dt{color:var(--color-muted);font-size:.875rem}.firmness__meter dd{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0}.firmness__meter dd i{display:block;height:6px;border-radius:2px;background:rgb(var(--color-text-rgb) / .1)}.firmness__meter dd i.is-on{background:#1d1d1f;transform-origin:0 50%;animation:firmness-fill .52s cubic-bezier(.3,1,.4,1) both;animation-delay:calc(var(--s) * 55ms)}@keyframes firmness-fill{0%{transform:scaleX(0)}}.firmness__choose{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 26px;border:1px solid #1d1d1f;border-radius:999px;font-weight:600;transition:background-color .18s,color .18s,border-color .18s}.firmness__choose span{display:inline-flex;align-items:center;gap:8px}.firmness__choose span[hidden]{display:none}@media(hover:hover){.firmness__choose:hover:not(:disabled){background:#1d1d1f;color:#fff}}.firmness__choose:disabled{border-color:var(--color-border);color:var(--color-muted);cursor:default}@media(prefers-reduced-motion:reduce){.firmness{transition:none}.firmness__stage{animation:none;--press: .85}.firmness__meter dd i.is-on{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/product-firmness.css.map */