.kmb{--kmb-progress:.5;--kmb-pointer:0px;display:block;overflow:hidden;background:var(--kmb-background,#fff);color:#191918;padding:48px 0 40px;text-align:center}.kmb__header{position:relative;z-index:4;display:grid;justify-items:center;gap:10px;padding:0 20px}.kmb__header h2{margin:0!important;color:#191918!important;font-size:22px!important;line-height:1.1!important;font-weight:700!important;letter-spacing:0!important;text-wrap:balance}.kmb__header p{margin:0!important;color:#454545;font-size:12px;line-height:1.4}.kmb__scene{position:relative;width:min(100%,1000px);height:310px;margin:8px auto 0;isolation:isolate}.kmb__box{position:absolute;top:-30px;width:38%;max-width:380px;aspect-ratio:1;transform-origin:center;pointer-events:none}.kmb__box img{display:block;width:100%;height:100%;object-fit:contain}.kmb__box--1{left:6%;z-index:1;transform:translate(calc(46px - 92px * var(--kmb-progress) - var(--kmb-pointer)),calc(60px - 60px * var(--kmb-progress))) rotate(calc(-3deg - 19deg * var(--kmb-progress)))}.kmb__box--2{left:31%;top:-5px;z-index:3;transform:translate(var(--kmb-pointer),calc(22px - 54px * var(--kmb-progress))) rotate(calc(-4deg + 8deg * var(--kmb-progress))) scale(calc(.94 + .08 * var(--kmb-progress)))}.kmb__box--3{right:6%;z-index:2;transform:translate(calc(-46px + 92px * var(--kmb-progress) - var(--kmb-pointer)),calc(60px - 60px * var(--kmb-progress))) rotate(calc(3deg + 19deg * var(--kmb-progress)))}.kmb__footer{position:relative;z-index:4;display:grid;justify-items:center;gap:12px;padding:0 20px}.kmb__price{margin:0!important;font-size:12px;line-height:1.4;color:#454545}.kmb__cta{display:inline-flex;min-height:36px;align-items:center;justify-content:center;padding:10px 22px;border:0;border-radius:0;background:var(--kmb-accent);color:#fff!important;font-size:12px;font-weight:700;line-height:1.2;letter-spacing:0;text-align:center;text-decoration:none}.kmb__cta:hover{background:#803800}.kmb__cta:focus-visible{outline:2px solid #191918;outline-offset:4px}@media(max-width:749px){.kmb{padding:36px 0 32px}.kmb__header{gap:8px;padding:0 16px}.kmb__header h2{font-size:18px!important}.kmb__header p,.kmb__price{font-size:11px}.kmb__scene{width:min(100%,540px);height:230px;margin-top:6px}.kmb__box{top:-6px;width:60%;max-width:310px}.kmb__box--1{left:-13%}.kmb__box--2{left:20%;top:30px}.kmb__box--3{right:-13%}.kmb__cta{min-height:34px;padding:9px 18px;font-size:11px}}@media(min-width:500px)and (max-width:749px){.kmb__scene{height:290px}}@media(prefers-reduced-motion:reduce){.kmb{--kmb-progress:.5!important;--kmb-pointer:0px!important}}.kmb{--kmb-glow: var(--klaim-collection-accent, #d96808)}.kmb[data-reveal] .kmb__scene{--kmb-open: 1;--kmb-q2: 1;height:560px;width:min(100%,1040px)}.kmb__reveal,.kmb__glow{position:absolute;z-index:3;top:32%;left:50%;width:52%;max-width:480px;aspect-ratio:1;transform:translate(-50%);pointer-events:none}.kmb__base,.kmb__front,.kmb__lid,.kmb__lid img{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;object-fit:contain}.kmb__base{z-index:1;filter:grayscale(1);clip-path:polygon(12.7% 21.2%,87.3% 21.2%,93.2% 58%,91.5% 78.2%,8.5% 78.2%,6.8% 58%)}.kmb__front{z-index:5;clip-path:polygon(6% 58%,94% 58%,94% 80%,6% 80%)}.kmb__lid{z-index:6;clip-path:polygon(12.4% 20.6%,86.6% 20.6%,93% 58.3%,6.3% 58.3%);transform-origin:50% 21%;transform:translate(calc(3% * var(--kmb-open)),calc(-56% * var(--kmb-open))) rotate(calc(-9deg * var(--kmb-open))) scale(calc(1 - .04 * var(--kmb-open)))}.kmb .kmb__glow{display:block;z-index:0}.kmb__questions{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4}.kmb__question,.kmb__glow:before{position:absolute;top:35%;width:28%;height:32%;display:grid;place-items:center;color:var(--kmb-glow);font-family:Arial,Helvetica,sans-serif;font-size:160px;font-weight:800;line-height:1;letter-spacing:0}.kmb__question{text-shadow:-1px -1px rgba(255,255,255,.45),1px 1px var(--kmb-accent)}.kmb__question--2,.kmb__glow:before{left:36%;opacity:var(--kmb-q2);transform:translateY(calc(-90% * var(--kmb-q2))) rotate(calc(5deg * var(--kmb-q2))) scale(calc(.5 + .5 * var(--kmb-q2)))}.kmb__glow:before{content:"?";color:transparent;text-shadow:0 0 26px var(--kmb-glow),0 0 56px color-mix(in srgb,var(--kmb-glow) 90%,transparent),0 0 96px color-mix(in srgb,var(--kmb-glow) 70%,transparent);transform:translateY(calc(-90% * var(--kmb-q2))) rotate(calc(5deg * var(--kmb-q2))) scale(calc(.825 + .825 * var(--kmb-q2)))}.kmb[data-reveal] .kmb__box{top:34%;width:42%;max-width:400px}.kmb[data-reveal] .kmb__box--1{left:-7%;transform:translate(calc(-26px * var(--kmb-progress))) rotate(calc(-10deg - 10deg * var(--kmb-progress)))}.kmb[data-reveal] .kmb__box--3{right:-7%;transform:translate(calc(26px * var(--kmb-progress))) rotate(calc(10deg + 10deg * var(--kmb-progress)))}.kmb[data-in-view] :is(.kmb__lid,.kmb__question,.kmb__box),.kmb[data-in-view] .kmb__glow:before{will-change:transform,opacity}@media(max-width:749px){.kmb[data-reveal] .kmb__scene{height:clamp(350px,104vw,500px)}.kmb__reveal,.kmb__glow{width:78%;top:32%;max-width:430px}.kmb__question,.kmb__glow:before{font-size:112px}.kmb[data-reveal] .kmb__box{top:42%;width:62%}.kmb[data-reveal] .kmb__box--1{left:-33%}.kmb[data-reveal] .kmb__box--3{right:-33%}}@media(max-width:359px){.kmb__question,.kmb__glow:before{font-size:96px}}@media(prefers-reduced-motion:reduce){.kmb .kmb__scene{--kmb-progress: .5 !important;--kmb-open: 1 !important;--kmb-q2: 1 !important}}@media(forced-colors:active){.kmb__glow{display:none}}
/*# sourceMappingURL=/cdn/shop/t/73/assets/klaim-mystery-boxes.css.map */