.olive-home{--olive:#46563b;--olive-dark:#2e402e;--cream:#f1edde;--ink:#2d3d2c;--muted:#67705c;background:var(--cream);color:var(--ink)}
.olive-home .header{height:88px;background:var(--olive);color:var(--cream);position:relative;z-index:5;border-bottom:1px solid #f1edde24;padding:0 4vw}.olive-home .brand{gap:10px}.olive-home .brand strong{font-size:25px;letter-spacing:1px}.olive-home .brand small{color:var(--cream);opacity:.65;font-size:7px;letter-spacing:1px}.olive-home .crown{height:38px;width:38px}.olive-home .header nav{gap:22px}.olive-home .header nav a,.olive-home .header nav button{font-size:13px}.olive-home .cart-count{background:var(--cream);color:var(--olive)}.olive-home .menu-button span{background:var(--cream)}
.collection-showcase{position:relative;isolation:isolate;height:clamp(540px,calc(100svh - 280px),760px);overflow:hidden;background:linear-gradient(to bottom,var(--olive) 0%,var(--olive) 66%,var(--cream) 66%,var(--cream) 100%)}.showcase-topline{position:absolute;top:26px;left:4vw;right:4vw;display:flex;justify-content:space-between;font-size:10px;font-weight:600;letter-spacing:2.2px;color:var(--cream);opacity:.7;z-index:2}.hero-word{position:absolute;top:56px;left:0;width:100%;margin:0;text-align:center;color:var(--cream);font-size:clamp(100px,15.4vw,280px);font-weight:600;line-height:.9;letter-spacing:-.065em;pointer-events:none}.showcase-stage{position:absolute;inset:105px 0 40px;touch-action:pan-y;outline-offset:-5px;z-index:1}.showcase-card{position:absolute;inset:0;margin:auto;width:clamp(320px,38vw,630px);height:100%;display:grid;place-items:center;background:none;border:0;padding:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(calc(var(--offset) * 70px)) rotate(-6deg) scale(.86);transition:opacity .4s,transform .6s,visibility .4s}.showcase-card.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0) rotate(-6deg) scale(1);z-index:2}.showcase-card:has(.showcase-stackling){transform:translateX(calc(var(--offset) * 70px)) scale(.88)}.showcase-card.is-active:has(.showcase-stackling){transform:translateX(0) scale(1)}.showcase-stackling{display:block;max-width:95%;height:100%;max-height:520px;object-fit:contain;filter:drop-shadow(18px 24px 18px #15201235)}.showcase-art{display:block;width:100%;height:100%;background:url('/images/keykraft-keycaps-cutout.png') var(--art-position) center / 400% auto no-repeat;filter:drop-shadow(18px 24px 18px #15201235)}.card-caption{display:none}.product-shadow{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);width:clamp(250px,25vw,450px);height:30px;background:#26342224;filter:blur(24px);border-radius:50%;z-index:-1}
.showcase-controls{position:absolute;inset:0;pointer-events:none;display:flex;justify-content:space-between;align-items:center;padding:0 4vw;z-index:3}.carousel-control{pointer-events:auto;width:52px;height:52px;border-radius:50%;border:1px solid #f1edde66;background:#ffffff08;color:var(--cream);display:grid;place-items:center;transition:background .2s}.carousel-control:hover{background:#ffffff20}.carousel-control svg{width:20px;height:20px}.showcase-title{position:absolute;left:4vw;bottom:48px;color:var(--ink)}.showcase-title p{font-size:9px;letter-spacing:1.5px;margin:0 0 10px}.showcase-title h2{font-size:32px;font-weight:500;letter-spacing:-1px;margin:0}.showcase-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:2px;z-index:4}.showcase-dots button{border:0;background:transparent;padding:0;width:30px;height:30px;display:grid;place-items:center}.showcase-dots button:after{content:'';display:block;width:5px;height:5px;border-radius:6px;background:#46563b50}.showcase-dots button.is-active:after{width:22px;background:var(--olive)}.slide-count{position:absolute;bottom:58px;right:4vw;font-size:12px;letter-spacing:3px}
.home-actions{max-width:1900px;margin:auto;display:grid;grid-template-columns:1.15fr .6fr 1.15fr;align-items:center;gap:30px;padding:24px 4vw 27px;border-top:1px solid #46563b25}.buy-title{font-size:21px;font-weight:600;letter-spacing:-.4px;margin:0 0 10px}#buy-details{font-size:12px;line-height:1.65;color:var(--muted);margin:0}.purchase-price{text-align:center}.purchase-price span{display:block;font-size:9px;letter-spacing:1.5px;margin-bottom:12px}.purchase-price strong{font-size:28px;letter-spacing:-.8px;font-weight:500}.home-buttons{display:flex;gap:9px}.olive-home .home-buttons .button{border-radius:8px;border:1px solid var(--olive);font-size:13px;min-height:54px;padding:14px 20px;flex:1;white-space:nowrap}.olive-home .home-buttons .primary{background:var(--olive-dark);color:var(--cream)}.olive-home .home-buttons .primary:hover{background:var(--olive)}.olive-home .home-buttons .secondary{background:transparent;color:var(--olive)}.home-price-note{font-size:10px;line-height:1.5;color:var(--muted);text-align:center;margin:10px 0 0}.home-footer{background:var(--cream);border-top:1px solid #46563b25;color:var(--muted);padding:20px 4vw;gap:22px}.home-footer>a{color:var(--olive);font-size:16px;letter-spacing:1px}.home-footer a{color:inherit;letter-spacing:0}.home-footer div{margin-left:auto;display:flex;gap:22px}.home-footer button{padding:0;border:0;background:none;font-size:12px}.home-footer span:last-child{margin-left:0;font-size:10px}.olive-home :focus-visible{outline:2px solid #afbd80;outline-offset:5px}
@media(max-width:1350px){.olive-home .header nav{background:var(--olive-dark);top:100%;border-bottom:1px solid #f1edde30}.home-actions{grid-template-columns:1fr auto}.purchase-price{grid-column:2;grid-row:1;text-align:right}.purchase-actions{grid-column:1/-1;display:flex;align-items:center;gap:25px}.home-buttons{min-width:440px}.home-price-note{margin:0}.collection-showcase{height:clamp(540px,calc(100svh - 335px),760px)}}
@media(max-width:700px){.olive-home .header{height:76px;padding:0 22px}.olive-home .brand strong{font-size:21px}.olive-home .brand small{font-size:6px}.olive-home .crown{width:31px}.olive-home .header-actions .icon-button:first-child{display:none}.olive-home .header-actions{gap:8px}.collection-showcase{height:520px;background:linear-gradient(to bottom,var(--olive) 0%,var(--olive) 67%,var(--cream) 67%,var(--cream) 100%)}.showcase-topline{top:24px;left:22px;right:22px;font-size:7px;letter-spacing:1.1px}.hero-word{top:73px;font-size:15.8vw;letter-spacing:-.065em}.showcase-stage{inset:120px 0 65px}.showcase-card{width:310px}.showcase-stackling{max-height:335px}.showcase-controls{padding:0 15px}.carousel-control{height:36px;width:36px}.carousel-control svg{width:16px}.showcase-title{left:22px;bottom:30px}.showcase-title h2{font-size:24px}.showcase-title p{font-size:7px;letter-spacing:.9px;margin-bottom:7px;max-width:200px}.showcase-dots{left:auto;right:15px;transform:none;bottom:23px;gap:0}.showcase-dots button{width:23px}.slide-count{right:22px;bottom:61px;font-size:10px}.home-actions{padding:24px 22px;gap:20px}.buy-title{font-size:17px}#buy-details{font-size:11px;max-width:240px}.purchase-price span{font-size:7px;letter-spacing:.7px;margin-bottom:8px}.purchase-price strong{font-size:20px;white-space:nowrap}.purchase-actions{display:block}.home-buttons{min-width:0}.olive-home .home-buttons .button{font-size:12px;padding:12px 14px;min-height:50px}.home-price-note{font-size:9px;margin-top:12px}.home-footer{padding:22px;flex-wrap:wrap;gap:18px}.home-footer div{order:3;flex-basis:100%;gap:18px}.home-footer span:last-child{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.showcase-card{transition:none}}
/* Let the product stage absorb spare screen height instead of ending at 760px. */
.olive-home{min-height:100svh;display:flex;flex-direction:column}
.olive-home>.header,.olive-home>.home-footer{flex-shrink:0}
.olive-home>main{flex:1}
@media(min-width:701px){
  .olive-home>main{display:flex;flex-direction:column}
  .collection-showcase{flex:1;height:auto;min-height:540px}
  .home-actions{flex-shrink:0;width:100%;max-width:none;margin:0}
  .showcase-stage{container-type:size}
  .showcase-card{width:min(40vw,100cqh,900px)}
  .showcase-stackling{max-height:90%;max-width:85%}
}
@media(min-width:1800px){
  .olive-home .header{height:104px}
  .olive-home .brand strong{font-size:30px}
  .olive-home .brand small{font-size:9px}
  .olive-home .header nav{gap:clamp(24px,1.5vw,40px)}
  .olive-home .header nav a,.olive-home .header nav button{font-size:16px}
  .showcase-topline{font-size:12px}
  .showcase-title p{font-size:11px}
  .showcase-title h2{font-size:40px}
  .home-actions{padding-top:28px;padding-bottom:28px;gap:4vw}
  .buy-title{font-size:clamp(24px,1.2vw,30px)}
  #buy-details{font-size:clamp(14px,.75vw,18px)}
  .purchase-price span{font-size:12px}
  .purchase-price strong{font-size:36px}
  .olive-home .home-buttons .button{font-size:clamp(15px,.85vw,20px);min-height:64px}
  .home-price-note{font-size:12px}
  .home-footer,.home-footer button{font-size:14px}
  .home-footer span:last-child{font-size:12px}
}