.shopCard{--cardRadius:var(--radius-lg);--innerD:52%;--middleD:71%;--outerD:100%;--avatarD:28%;--visualPose:20%;--cardPadding:calc(var(--spacing-lg)/1.75);border-radius:var(--cardRadius);background:var(--container);aspect-ratio:8.5/9;-webkit-user-select:none;user-select:none;cursor:pointer;flex-direction:column;width:100%;transition:border-color .3s,background .3s;display:flex;position:relative;overflow:hidden}@media (max-width:768px){.shopCard{--visualPose:25%;--cardPadding:var(--spacing-md);aspect-ratio:1}}.shopCard:after{content:"";z-index:1;mix-blend-mode:lighten;filter:contrast(1.3);opacity:.2;pointer-events:none;border-radius:inherit;background-image:url(/images/ui/gradient_noise/01.webp);background-repeat:no-repeat;background-size:120% 120%;width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.shopCard:hover{background:var(--surface)}.shopCard:hover:before{opacity:1}.shopCard:hover .glowOrb{opacity:.2}.shopCard:hover .avatar{scale:1.08}.shopCard:hover .innerOrbit{scale:.55!important}.shopCard:hover .middleOrbit{transition-delay:.1s;scale:.8!important}.shopCard:hover .outerOrbit{transition-delay:.15s;scale:.9!important}.shopCard:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.shopCard.flipped{flex-direction:column-reverse}.shopCard.flipped .visual{transform:translate(-50%,calc(var(--visualPose)*-1.55))}.shopCard.flipped .infoRow{padding-top:var(--cardPadding)}.shopCard.flipped .glowOrb{transform:translate(-50%,calc(var(--visualPose)*-2.5));top:0;bottom:auto}.shopCard.loading{pointer-events:none}.shopCard.loading .avatar,.shopCard.loading .infoRow,.shopCard.loading .ratingTag{opacity:.25}.shopCard.loading .satImg{opacity:.12}.shopCard.loading .glowOrb{opacity:.08}.shopCard .glowOrb{transform:translate(-50%,calc(var(--visualPose)*2.5));aspect-ratio:1;background:var(--glow-color);background:linear-gradient(186deg,transparent 30%,var(--glow-color)50%,transparent 70%);filter:blur(8em);opacity:.04;pointer-events:none;z-index:0;width:130%;transition:opacity .5s,transform .5s;position:absolute;top:auto;bottom:0;left:50%}.shopCard .visual{z-index:1;width:120%;transform:translate(-50%,var(--visualPose));flex:1;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:50%}.shopCard .system{aspect-ratio:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.shopCard .orbit{will-change:transform;background:color-mix(in srgb,var(--text)2%,transparent);transition:scale .5s var(--bounceEase);border-radius:50%;position:absolute}.shopCard .orbit.innerOrbit{width:var(--innerD);aspect-ratio:1}.shopCard .orbit.middleOrbit{width:var(--middleD);aspect-ratio:1}.shopCard .orbit.outerOrbit{width:var(--outerD);aspect-ratio:1}.shopCard .orbitRing{pointer-events:none;border-radius:50%;position:absolute;inset:0}.shopCard .orbitRing.solidRing{border:1px solid color-mix(in srgb,var(--text)20%,transparent)}.shopCard .orbitRing.dashedRing{width:100%;height:100%;position:relative}.shopCard .orbitRing.gradientRing:before{content:"";background:linear-gradient(135deg,color-mix(in srgb,var(--text)80%,transparent)0%,color-mix(in srgb,var(--text)5%,transparent)50%,color-mix(in srgb,var(--text)80%,transparent)100%);-webkit-mask-composite:xor;border-radius:50%;padding:2px;position:absolute;inset:-2px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.shopCard .sat{z-index:3;position:absolute;transform:translate(-50%,-50%)}@media (max-width:768px){.shopCard .sat{transform:translate(-50%,-50%)scale(.65)}}.shopCard .satImg{background:color-mix(in srgb,var(--white)100%,transparent);will-change:transform;border-radius:50%;overflow:hidden}.shopCard .satImg img{object-fit:cover;width:100%;height:100%;display:block}.shopCard .avatar{z-index:6;width:var(--avatarD);aspect-ratio:1;background:color-mix(in srgb,var(--background)80%,transparent);transition:scale .3s var(--bounceEase)50ms;border:1px solid #ffffffd9;border-radius:50%;position:absolute;overflow:hidden}.shopCard .avatarFrame{border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.shopCard .avatarFrame img{object-fit:cover;width:110%;height:110%}.shopCard .infoRow{padding:var(--cardPadding);z-index:6;justify-content:space-between;align-items:center;gap:.5em;display:flex}.shopCard .infoLeft{flex-direction:column;flex:1;gap:.08em;min-width:0;display:flex}.shopCard .nameRow{align-items:center;gap:.3em;display:flex}.shopCard .shopName{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:clamp(1.2em,4vw,1.7em);font-weight:300;overflow:hidden}.shopCard .desc{opacity:.4;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:clamp(.7em,2vw,.8em);font-weight:300;overflow:hidden}.shopCard .ratingTag{border-radius:var(--radius-pill);border:1px solid var(--border);color:var(--text);white-space:nowrap;font-size:clamp(1em,3vw,1.3em);font-weight:300;font-family:var(--fontEng);font-variation-settings:"wght" 300,"wdth" 99;flex-shrink:0;align-items:center;gap:.28em;padding:.5em .5em .5em .65em;display:flex}.shopCard .ratingTag .icon{color:var(--text)}
