/* Product baselines are tied to the photographed rock surfaces, not a centered box. */
.keykraft-theme :is(.collection-showcase,.shop-showcase,.stack-showcase){--rock-center:69%;--rock-side:72%;--rock-spacing:32vw;background-size:100% 100%!important}
.keykraft-theme :is(.showcase-stage,.shop-stage,.stack-stage){inset:0;container-type:size;z-index:2}
.keykraft-theme :is(.collection-showcase,.shop-showcase,.stack-showcase)::after{height:23%;z-index:3}
.rock-contacts{position:absolute;inset:0;z-index:1;pointer-events:none}
.rock-contact{position:absolute;top:var(--rock-side);left:18%;width:21%;height:5%;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#080b03c9 0%,#0c1007a6 34%,#c6f24922 56%,transparent 72%);filter:blur(5px)}
.rock-contact:nth-child(2){left:50%;top:var(--rock-center);width:27%;height:6%;background:radial-gradient(ellipse,#060900d9 0%,#080b03a6 37%,#ccf34f38 57%,transparent 72%)}
.rock-contact:nth-child(3){left:82%}
.keykraft-theme :is(.showcase-card,.shop-key){inset:auto auto calc(100% - var(--rock-side)) 50%;margin:0;width:min(42vw,82cqh,760px);height:auto;aspect-ratio:543/377;max-width:none;background:none;transform-origin:50% 100%;transform:translateX(calc(-50% + var(--offset) * var(--rock-spacing))) scale(.69);transition:transform .65s cubic-bezier(.2,.7,.2,1),bottom .65s cubic-bezier(.2,.7,.2,1),opacity .4s,visibility .4s;filter:none}
.keykraft-theme :is(.showcase-card.is-neighbor,.shop-key.is-neighbor){opacity:.97;transform:translateX(calc(-50% + var(--offset) * var(--rock-spacing))) scale(.69)}
.keykraft-theme :is(.showcase-card.is-active,.shop-key.is-active){bottom:calc(100% - var(--rock-center));transform:translateX(-50%) rotate(-6deg);z-index:2}
.keykraft-theme :is(.showcase-art,.shop-key-art){display:block;width:100%;height:100%;background-image:url('/images/keykraft-keycaps-cutout.png');background-position:var(--art-position) 47.55%;background-size:400% auto;background-repeat:no-repeat;filter:drop-shadow(0 3px 2px #ccf34f28) drop-shadow(0 12px 9px #0007);animation:rock-hover 5.5s ease-in-out infinite}
.keykraft-theme :is(.showcase-card.is-neighbor .showcase-art,.shop-key.is-neighbor .shop-key-art){animation-delay:-2s}
.keykraft-theme .showcase-card:has(.showcase-stackling),.keykraft-theme .stack-slide{inset:auto auto calc(100% - var(--rock-side)) 50%;height:58cqh;width:min(28vw,44cqh);max-width:none;aspect-ratio:auto;margin:0;display:block;transform-origin:50% 100%;transform:translateX(calc(-50% + var(--offset) * var(--rock-spacing))) scale(.76);transition:transform .65s cubic-bezier(.2,.7,.2,1),bottom .65s cubic-bezier(.2,.7,.2,1),opacity .4s;filter:none;opacity:.98}
.keykraft-theme .showcase-card.is-active:has(.showcase-stackling),.keykraft-theme .stack-slide.is-active{bottom:calc(100% - var(--rock-center));transform:translateX(-50%);opacity:1;z-index:2}
.keykraft-theme .showcase-stackling,.keykraft-theme .stack-slide img{position:absolute;inset:auto 0 0;margin:0 auto;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 2px 2px #ccf34f30) drop-shadow(0 7px 7px #0007);animation:rock-rest 6s ease-in-out infinite;transform:none}
.keykraft-theme .stack-slide[data-stack-slide="2"]{overflow:hidden}
.keykraft-theme .stack-slide[data-stack-slide="2"] img{left:-7.1%;right:auto;width:114.2%;max-width:none;height:114.2%;max-height:none;bottom:-8.68%}
.keykraft-theme .stack-slide.bag-slide{height:59cqh;width:min(27vw,39cqh)}
.keykraft-theme .stack-slide.bag-slide img{height:100%;width:100%;max-width:100%;box-shadow:none;border-radius:5px;transform:rotate(-2deg);filter:drop-shadow(2px 3px 2px #ccf34f24) drop-shadow(4px 7px 7px #0009);animation:none}
.keykraft-theme .evo-card .evo-card-photo{inset:auto 0 0;height:70%;transform:none}
.keykraft-theme :is(.showcase-title,.shop-caption,.stack-caption){left:50%;bottom:9%;width:70%;transform:translateX(-50%);text-align:center;z-index:4;text-shadow:0 2px 14px #000}
.keykraft-theme :is(.showcase-title p,.shop-caption p,.stack-caption p){color:#e0e4d8;font-size:10px;margin-bottom:7px}
.keykraft-theme :is(.showcase-title h2,.shop-caption h2,.stack-caption h2){font-size:clamp(22px,2.2vw,32px);font-weight:650}
.keykraft-theme :is(.showcase-dots,.shop-dots,.stack-dots){left:50%;right:auto;bottom:2.5%;transform:translateX(-50%);z-index:4}
.keykraft-theme :is(.slide-count,.shop-count){bottom:9%;z-index:4}
.keykraft-theme :is(.showcase-controls,.shop-carousel-controls){z-index:4;align-items:center;padding-top:0;}
.keykraft-theme .hero-word,.keykraft-theme .shop-word,.keykraft-theme .stack-word{z-index:0;top:10%}
@keyframes rock-hover{0%,100%{transform:translateY(-4px)}50%{transform:translateY(-11px)}}
@keyframes rock-rest{0%,100%{transform:translateY(-1px)}50%{transform:translateY(-3px)}}
@media(max-width:700px){
 .keykraft-theme :is(.collection-showcase,.shop-showcase,.stack-showcase){--rock-center:70%;--rock-side:72%;--rock-spacing:63vw;background-size:auto 100%!important}
 .keykraft-theme :is(.showcase-card,.shop-key){width:min(100vw,78cqh);aspect-ratio:543/377}
 .keykraft-theme :is(.showcase-card.is-neighbor,.shop-key.is-neighbor){opacity:.65;transform:translateX(calc(-50% + var(--offset) * var(--rock-spacing))) scale(.64)}
 .keykraft-theme .showcase-card:has(.showcase-stackling),.keykraft-theme .stack-slide{width:64vw;height:48cqh;transform:translateX(calc(-50% + var(--offset) * var(--rock-spacing))) scale(.72)}
 .keykraft-theme .showcase-card.is-active:has(.showcase-stackling),.keykraft-theme .stack-slide.is-active{transform:translateX(-50%)}
.keykraft-theme .stack-slide.bag-slide{height:49cqh;width:55vw}
 .rock-contact{left:-13%;width:42%}.rock-contact:nth-child(2){left:50%;width:65%}.rock-contact:nth-child(3){left:113%}
 .keykraft-theme :is(.showcase-title,.shop-caption,.stack-caption){width:76%;bottom:11%;left:50%;text-align:center}
 .keykraft-theme :is(.showcase-title p,.shop-caption p,.stack-caption p){font-size:7px;max-width:none}
 .keykraft-theme :is(.showcase-title h2,.shop-caption h2,.stack-caption h2){font-size:22px}
 .keykraft-theme :is(.slide-count,.shop-count){bottom:4%;font-size:8px}
 .keykraft-theme :is(.showcase-dots,.shop-dots,.stack-dots){bottom:2%}

 .keykraft-theme .hero-word,.keykraft-theme .shop-word,.keykraft-theme .stack-word{top:17%}
}
@media(prefers-reduced-motion:reduce){.keykraft-theme :is(.showcase-card,.shop-key,.stack-slide){transition:none}.keykraft-theme :is(.showcase-art,.shop-key-art,.showcase-stackling,.stack-slide img){animation:none}}

@media(min-width:701px) and (min-height:851px){.keykraft-theme .shop-word{font-size:clamp(72px,11.4vw,230px)}}