::selection{background:#e4b85c;color:#000}
html{scrollbar-color:#3a3a3a #000;scrollbar-width:thin}

#fxBg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#fxBg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:translate}
#fxBg .o1{width:46vmax;height:46vmax;left:-14vmax;top:-12vmax;background:radial-gradient(circle,rgba(228,184,92,.30),transparent 68%);animation:fxDrift1 26s ease-in-out infinite alternate}
#fxBg .o2{width:40vmax;height:40vmax;right:-12vmax;top:34vh;background:radial-gradient(circle,rgba(120,150,255,.20),transparent 68%);animation:fxDrift2 32s ease-in-out infinite alternate}
#fxBg .o3{width:36vmax;height:36vmax;left:22vw;bottom:-16vmax;background:radial-gradient(circle,rgba(255,110,90,.16),transparent 68%);animation:fxDrift1 38s ease-in-out infinite alternate-reverse}
#fxBg .grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:34px 34px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%)}
@keyframes fxDrift1{to{transform:translate(8vmax,6vmax) scale(1.15)}}
@keyframes fxDrift2{to{transform:translate(-9vmax,-5vmax) scale(1.2)}}

#fxProgress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--fx-p,0));background:linear-gradient(90deg,#e4b85c,#fff);z-index:100002;pointer-events:none}
#fxCursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;pointer-events:none;z-index:100003;will-change:translate,scale;transition:scale .25s,background .25s,opacity .3s;opacity:0}
#fxCursor.on{opacity:1}
#fxCursor.hot{scale:1.7;background:rgba(255,255,255,.16);border-width:2px}
#fxCursor.down{scale:.7}

html.fx .fx-r{opacity:0;translate:0 34px;transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--fx-d,0ms)}
html.fx .fx-r.in{opacity:1;translate:0 0}
@keyframes fxInL{from{opacity:0;translate:-46px 0}to{opacity:1;translate:0 0}}
@keyframes fxInR{from{opacity:0;translate:46px 0}to{opacity:1;translate:0 0}}
@keyframes fxInU{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
html.fx body .product-image-wrap.product-carousel{animation:fxInL 1s .5s cubic-bezier(.2,.7,.2,1) both}
html.fx body .product-info{animation:fxInR 1s .65s cubic-bezier(.2,.7,.2,1) both}
html.fx body #productMediaPicker,html.fx body #productGalleryItems{animation:fxInU .9s .85s cubic-bezier(.2,.7,.2,1) both}
html.fx body header.brand{animation:fxInU .8s .35s cubic-bezier(.2,.7,.2,1) both}

html.fx .product-image-wrap.product-carousel::before{content:"";position:absolute;inset:6% -4%;background:radial-gradient(60% 55% at 50% 52%,rgba(228,184,92,.18),transparent 70%);filter:blur(26px);z-index:0;pointer-events:none}
html.fx #productCarousel .product-slide-frame .product-slide{transform:perspective(1100px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) translateZ(0);transition:transform .22s ease-out}
html.fx #productCarousel .product-slide-frame{box-shadow:0 24px 60px -18px rgba(0,0,0,.9)}

html.fx .shop-add{position:relative;overflow:hidden;transition:transform .2s,box-shadow .25s,background .2s}
@media(hover:hover) and (pointer:fine){html.fx .shop-add:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(228,184,92,.55)}}
html.fx .shop-add:active:not(:disabled){transform:translateY(0) scale(.98)}
html.fx .shop-add::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(228,184,92,.55),transparent);transform:skewX(-20deg);pointer-events:none}
@media(hover:hover) and (pointer:fine){html.fx .shop-add:hover:not(:disabled)::after{animation:fxShimmer .9s}}
@keyframes fxShimmer{to{left:130%}}
html.fx .product-media-option,html.fx .product-gallery-item,html.fx .gallery-item{transition:transform .2s,box-shadow .25s,border-color .2s}
@media(hover:hover) and (pointer:fine){html.fx .product-media-option:hover,html.fx .gallery-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px -10px rgba(228,184,92,.5)}}
html.fx .shop-extra{transition:background .2s}
@media(hover:hover) and (pointer:fine){html.fx .shop-extra:hover{background:rgba(255,255,255,.045);padding-left:6px}}
.shop-extra input,.shop-radio input{accent-color:#e4b85c}
html.fx .try-button:not(:disabled){animation:fxPulse 2.6s ease-in-out infinite}
@keyframes fxPulse{0%,100%{box-shadow:0 0 0 0 rgba(228,184,92,0)}50%{box-shadow:0 0 34px 2px rgba(228,184,92,.35)}}
@media(hover:hover) and (pointer:fine){html.fx .try-button:hover:not(:disabled){box-shadow:0 0 44px 4px rgba(228,184,92,.5)}}
#shopCartBubble,#chatBubble{transition:box-shadow .25s,scale .2s}
@media(hover:hover) and (pointer:fine){#shopCartBubble:hover,#chatBubble:hover{box-shadow:0 10px 36px -4px rgba(228,184,92,.55);scale:1.07}}
#shopCartBubble.fx-bump{animation:fxBump .35s ease-out}
@keyframes fxBump{0%{scale:1}40%{scale:1.1}100%{scale:1}}
#shopCartBubble .shop-badge{transition:scale .3s cubic-bezier(.3,1.6,.5,1)}
#shopCartBubble.fx-bump .shop-badge{scale:1.15}

.info-section{border-top:0!important;position:relative}
.info-section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(228,184,92,.55),transparent)}
.info-joke{position:relative;background:linear-gradient(135deg,rgba(228,184,92,.10),rgba(255,255,255,.03))!important;border:1px solid rgba(228,184,92,.25);border-left-width:3px;box-shadow:0 20px 50px -24px rgba(228,184,92,.35)}
.about-contact a{display:inline-block;padding:6px 14px;margin-left:4px;border:1px solid rgba(228,184,92,.5);border-radius:999px;text-decoration:none;transition:background .2s,color .2s}
@media(hover:hover) and (pointer:fine){.about-contact a:hover{background:#e4b85c;color:#000}}
#gripThanksFooter{border-top:1px solid rgba(255,255,255,.08);opacity:1!important;translate:none!important;animation:none!important;transition:none!important}

.fx-marquee{position:relative;overflow:hidden;padding:clamp(14px,3vh,26px) 0;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.fx-marquee-track{display:flex;width:max-content;will-change:translate;gap:0}
.fx-marquee-track span{flex:0 0 auto;font:700 clamp(1.1rem,2.6vw,2rem)/1.2 Inter,Arial,sans-serif;letter-spacing:.02em;padding-right:1.4em;color:rgba(255,255,255,.62);white-space:nowrap}
.fx-marquee-track span.dot{color:rgba(255,255,255,.35);font-size:.6em;align-self:center;padding-right:1.4em}

#status strong[data-result-key="loser"]{display:inline-block;animation:fxLose 1.1s cubic-bezier(.3,1.3,.5,1) both}
.result.loser.show{animation:fxLoseFlash .9s ease-out}
@keyframes fxLose{
  0%{opacity:0;translate:0 -34px;scale:1.5;rotate:-6deg;color:#ff5a4f}
  30%{opacity:1;translate:0 8px;scale:.92;rotate:4deg}
  48%{translate:-7px 0;rotate:-3deg}
  62%{translate:6px 0;rotate:2deg}
  76%{translate:-3px 0;rotate:-1deg}
  100%{opacity:1;translate:0 0;scale:1;rotate:0deg}
}
@keyframes fxLoseFlash{0%{filter:drop-shadow(0 0 22px rgba(255,90,79,.7))}100%{filter:drop-shadow(0 0 0 rgba(255,90,79,0))}}

@media(prefers-reduced-motion:reduce){#fxBg i,#fxCursor,.fx-marquee,#status strong,.result.loser.show{animation:none!important}}
@media(pointer:coarse){#fxCursor{display:none}}

html.fx{background:#000}
html.fx body{background:transparent!important}
