.mattress-picker{--mp-fabric:#fdfdfd;--mp-fabric-shade:#eceef0;--mp-seam:rgba(120, 130, 140, 0.16);--mp-edge:#dcdfe3;--mp-box:#b9bfc6;--mp-box-hover:#8d959e;--mp-accent:#d23c2e;--mp-accent-soft:rgba(210, 60, 46, 0.12);--mp-focus:#2f6fed;--mp-radius:14px;--mp-gap:clamp(10px, 2.2vw, 20px);--mp-box-size:clamp(22px, 3.4vw, 34px);--mp-quilt:radial-gradient(ellipse 22px 30px at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(0, 0, 0, 0.035) 78%, transparent 100%),
            repeating-linear-gradient(48deg, transparent 0 27px, var(--mp-seam) 27px 28.5px),
            repeating-linear-gradient(-48deg, transparent 0 27px, var(--mp-seam) 27px 28.5px);box-sizing:border-box;width:100%;color:#3c4249;font:400 15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}.mattress-picker *,.mattress-picker ::after,.mattress-picker ::before{box-sizing:inherit}.mp__grid{display:grid;grid-template-columns:clamp(38px,11%,78px) minmax(0,1fr) clamp(38px,11%,78px);grid-template-rows:clamp(46px,9vw,82px) auto clamp(46px,9vw,82px);grid-template-areas:".    head  .    ""left top   right"".    foot  .    ";gap:var(--mp-gap);max-width:620px;margin-inline:auto}.mp__panel--head{grid-area:head}.mp__panel--foot{grid-area:foot}.mp__panel--left{grid-area:left}.mp__panel--right{grid-area:right}.mp__panel--top{grid-area:top;aspect-ratio:5/8}.mp__panel{position:relative;display:grid;place-items:center;min-width:0;min-height:0;margin:0;padding:clamp(6px,1.4vw,14px);border:1px solid var(--mp-edge);border-radius:var(--mp-radius);background-color:var(--mp-fabric);background-image:var(--mp-quilt);background-size:44px 60px,auto,auto;box-shadow:inset 0 0 0 6px rgba(255,255,255,.55),inset 0 1px 2px rgba(255,255,255,.9),0 1px 3px rgba(30,40,50,.08)}.mp__panel::after{content:"";position:absolute;inset:5px;border:1px dashed rgba(120,130,140,.28);border-radius:calc(var(--mp-radius) - 5px);pointer-events:none}.mp__panel--top{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}.mp__panel--foot,.mp__panel--head{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.mp__panel--left,.mp__panel--right{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}.mp__legend,.mp__srt{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.mp__spot{display:grid;place-items:center;width:100%;height:100%;cursor:pointer}.mattress-picker .mp__box{appearance:none;-webkit-appearance:none;width:var(--mp-box-size);height:var(--mp-box-size);padding:0;margin:0;border:3px solid var(--mp-box);border-radius:3px;background:0 0;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,transform .12s ease}.mattress-picker .mp__spot:hover .mp__box{border-color:var(--mp-box-hover);background-color:rgba(255,255,255,.7)}.mattress-picker .mp__box:checked{border-color:var(--mp-accent);background-color:var(--mp-accent-soft);background-image:linear-gradient(45deg,transparent 44%,var(--mp-accent) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--mp-accent) 44% 56%,transparent 56%);transform:scale(1.05)}.mattress-picker{--mp-tag-w:clamp(12px, 1.4vw, 14px);--mp-tag-h:clamp(15px, 1.1vw, 11px);--mp-tag-bottom:7%;--mp-tag-side:7%}.mp__tag{position:absolute;width:var(--mp-tag-w);height:var(--mp-tag-h);background:var(--mp-accent);border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.85);pointer-events:none}.mp__tag::after{content:"";position:absolute;inset:0 0 0 62%;background:rgba(255,255,255,.75);border-radius:0 1px 1px 0}.mp__panel--top .mp__tag{right:calc(var(--mp-tag-w)/-3);bottom:var(--mp-tag-bottom)}.mp__panel--right .mp__tag{left:50%;bottom:var(--mp-tag-side);transform:translateX(-50%)}.mattress-picker .mp__box:disabled{cursor:default}.mattress-picker .mp__box:disabled:not(:checked){border-color:#d7dbdf;box-shadow:inset 0 0 0 3px #d7dbdf;opacity:.55}.mattress-picker .mp__box:disabled:checked{opacity:1}.mattress-picker--locked .mp__spot{cursor:default}.mattress-picker--locked .mp__spot:hover .mp__box:disabled:not(:checked){border-color:#d7dbdf;background-color:transparent}.mattress-picker .mp__box:focus-visible{outline:3px solid var(--mp-focus);outline-offset:3px}@media (max-width:640px){.mp__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"top""head""foot""left""right";max-width:420px}.mp__panel--top{aspect-ratio:5/7}.mp__panel--foot,.mp__panel--head,.mp__panel--left,.mp__panel--right{height:clamp(64px,18vw,96px);grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;padding-top:26px}.mp__panel--left,.mp__panel--right{grid-template-columns:repeat(4,1fr)}.mp__legend{position:static;width:auto;height:auto;overflow:visible;clip-path:none;padding:0 4px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6d757e}.mp__panel>.mp__legend{position:absolute;top:8px;left:12px}.mp__panel--top{padding-top:30px}.mp__panel--right .mp__tag{left:50%;bottom:calc(var(--mp-tag-h)/-3);transform:translateX(-50%)}.mp__panel--right .mp__tag::after{inset:62%0 0 0;border-radius:0 0 1px 1px}}@media (prefers-reduced-motion:reduce){.mattress-picker .mp__box{transition:none}.mattress-picker .mp__box:checked{transform:none}}