/* PeeApp Neon Cyber — local preview, artwork and shopping flow preserved. */
:root{--cyber-pink:#ff3e71;--cyber-violet:#9470f2;--cyber-rule:#ff52794d}
body{background-color:#080b11}
body::before,body::after{width:clamp(30px,10vw,180px);background-image:url('assets/cyber-edge.svg'),radial-gradient(ellipse at 0 38%,#ff24581c,transparent 72%),linear-gradient(#b17aff09 1px,transparent 1px),linear-gradient(90deg,#b17aff09 1px,transparent 1px);background-size:180px 780px,100% 100%,32px 32px,32px 32px;background-repeat:repeat-y,no-repeat,repeat,repeat;mask-image:linear-gradient(90deg,#000, #000b 55%,transparent);opacity:.8;z-index:2}
body::after{filter:hue-rotate(305deg);opacity:.65}
.store-header{background:#090b13ed;border-bottom-color:#f451804d}
.store-header nav a{position:relative;transition:color .2s,text-shadow .2s}
.store-header nav a::after{content:'';position:absolute;bottom:-12px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyber-pink),#aa7eff);transform:scaleX(0);transform-origin:left;transition:transform .25s;box-shadow:0 0 9px #ff386c66}
.store-header nav a:hover::after,.store-header nav a:focus-visible::after{transform:scaleX(1)}
.store-header nav a:hover{color:#fff;text-shadow:0 0 12px #ff618870}
.ps-hero{border-bottom:1px solid #ff3e7138}
.ps-hero .ps-hero-cta,.primary{border-radius:8px 18px 8px 18px;border-color:#ff789c8c;background:linear-gradient(115deg,#ff1d57,#c5094b);box-shadow:0 0 20px #ff245822,inset 0 1px 0 #ffffff30}
.secondary{border-radius:8px 14px 8px 14px;border-color:#ad85ff38;background:#11121d88}
.secondary:hover{border-color:#ba9aff88;box-shadow:0 0 15px #9270ff19}
.ps-marquee{background:linear-gradient(90deg,#160e1b66,#0c0d16,#160e1b66);border-top-color:#ff5e8455;border-bottom-color:#a781ff40}
.eyebrow{letter-spacing:.18em;color:#ff6187}
.shelf-heading{border-top-color:#ff52792b;padding-top:28px}
.shelf-heading::before{background:linear-gradient(90deg,#ff759a,#ff386c70 36%,#9370f240 78%,transparent);box-shadow:0 0 7px #ff386c28}
.shelf-heading::after{content:'';position:absolute;left:0;top:-2px;width:38px;height:3px;background:#ff6c96;box-shadow:0 0 10px #ff386c66}
.shelf-heading button{border:1px solid #aa80ed30;border-radius:6px;padding:6px 11px;color:#e0cce9;transition:border-color .2s,box-shadow .2s}
.shelf-heading button:hover{border-color:#ff64898c;box-shadow:0 0 12px #ff386c1c;color:#fff}
.product-grid .product-card.poster-card,.product-grid .game-neon-card{border-radius:10px 18px 10px 18px;border-color:#e66b9252}
.game-neon-kind{border-radius:4px;border-color:#e5c5ff35}
.card-copy h3,.game-neon-copy h3{color:#fbfaff}
.plan-card,.info-card,.purchase-panel,.order-card,.delivery-card{border-color:#a47ee32e;background-color:#10131b;border-radius:12px 22px 12px 22px;box-shadow:inset 0 1px 0 #ff528b12}
.store-footer{background:linear-gradient(180deg,#100d192d,transparent);border-top-color:#a47ee349}
@media(max-width:760px){body::before,body::after{width:28px;background-size:90px 390px,100% 100%,24px 24px,24px 24px;opacity:.35}.shelf-heading button{font-size:11px;padding:5px 8px}.shelf-heading{gap:8px}.store-header nav a::after{bottom:-4px}}
@media(prefers-reduced-motion:reduce){.store-header nav a::after{transition:none}}
.reduce-motion .store-header nav a::after{transition:none}
/* The supplied Alight icon has a dark baked-in tile; blend only its luminous mark. */
.product-grid .poster-card .card-art.premium-s8 img{filter:contrast(1.8);mix-blend-mode:screen}

/* Restore the original single turn on hover. Border motion stays independent. */
@keyframes peeapp-logo-single-turn{from{transform:perspective(650px) rotateY(0deg)}to{transform:perspective(650px) rotateY(360deg)}}
@media(hover:hover) and (pointer:fine){
.product-grid .poster-card:hover .card-art.premium-brand-art img,.discord-poster-v3:hover .discord-poster-art img{animation:peeapp-logo-single-turn 1.15s cubic-bezier(.22,.65,.3,1) 1}
}
@media(prefers-reduced-motion:reduce){.product-grid .poster-card:hover .card-art.premium-brand-art img,.discord-poster-v3:hover .discord-poster-art img{animation:none!important}}
.reduce-motion .product-grid .poster-card:hover .card-art.premium-brand-art img,.reduce-motion .discord-poster-v3:hover .discord-poster-art img{animation:none!important}

/* Compensate for the transparent-looking inset in the original Alight icon. */
.product-grid .poster-card .card-art.premium-s8 img{width:90%;height:58%;left:5%;top:3%}

/* Official CapCut wordmark: show its original symbol in the card art window. */
.product-grid .poster-card .card-art.premium-s4 img{width:60%;height:36%;left:20%;top:14%;object-fit:cover;object-position:left center;filter:invert(1)}
.service-art img[src*="capcut-official"],.detail-banner img[src*="capcut-official"]{filter:invert(1)}

/* Audited brand assets and optical sizing, 2026-10-18. */
.product-grid .poster-card .card-art.premium-s3 img{width:49%;height:auto;aspect-ratio:1;left:25.5%;top:14%;border-radius:50%;object-fit:contain}
.product-grid .poster-card .card-art.premium-s10 img{width:49%;height:auto;aspect-ratio:1;left:25.5%;top:14%;border-radius:20%;object-fit:contain;filter:none!important}
.product-grid .poster-card .card-art.premium-s7 img{width:68%;height:46%;left:16%;top:9%;filter:brightness(0) invert(1)}
.product-grid .poster-card .card-art.premium-s6 img{width:57%;height:39%;left:21.5%;top:12%}
.product-grid .poster-card .card-art.premium-s1 img{width:58%;height:38%;left:21%;top:13%}
.product-grid .poster-card .card-art.premium-s11 img{width:52%;height:36%;left:24%;top:14%}
.ps-brandmark img[src*="capcut-official"]{width:33px;height:26px;object-fit:cover;object-position:left;filter:invert(1)}
.ps-brandmark img[src*="disney-official"]{width:38px;height:32px;filter:brightness(0) invert(1)}
.ps-brandmark img[src*="canva-official"]{border-radius:50%}
.service-art img[src*="disney-official"],.detail-banner img[src*="disney-official"]{filter:brightness(0) invert(1)}

/* Align product titles directly above the footer rule, including multiline names. */
.product-grid .poster-card .card-copy h3,.product-grid .game-neon-copy h3,.discord-poster-v3 .game-neon-copy h3{min-height:0;margin-bottom:10px}
.product-grid .game-neon-copy h3{margin-top:6px}
.discord-poster-v3 .game-neon-copy h3{margin-top:0}

/* Mobile readability: retain two columns with room for long names. */
@media(max-width:760px){
.product-grid .poster-card,.product-grid .game-neon-card{min-height:218px}
.game-neon-kind{font-size:10px;line-height:1.5;padding:3px 6px}
.game-neon-footer{font-size:11px;color:#c6c5d0}
.game-neon-platform{font-size:10px;letter-spacing:.04em;color:#d2d0dc}
.product-grid .poster-card .card-copy>div>span:first-child{font-size:11px}
.product-grid .poster-card .card-copy h3,.product-grid .game-neon-copy h3{line-height:1.35}
.shelf-heading button{min-height:40px}
}
@media(max-width:360px){
.product-grid.compact-grid{gap:10px}
.product-grid .poster-card .card-copy,.game-neon-copy{padding:0;left:10px;right:10px;bottom:12px}
.product-grid .poster-card .card-copy h3,.product-grid .game-neon-copy h3{font-size:15px}
.shelf-heading h2{font-size:20px}.shelf-heading h2 small{display:block;margin:3px 0 0;font-size:11px}
.game-neon-kind{top:8px;left:8px}
.product-grid .poster-card .card-art.premium-s3 img,.product-grid .poster-card .card-art.premium-s10 img{top:16%}
}

@media(max-width:360px){.nav-wrap{gap:8px;padding:0 14px}.store-logo{gap:6px}.store-logo img{width:40px;height:40px}.store-logo span{font-size:22px}.store-logo small{font-size:7px;letter-spacing:3px}.nav-actions{gap:12px}.ps-hero h1{font-size:34px!important;line-height:1.25!important;white-space:normal}.ps-hero-red{font-size:38px!important;line-height:1.3!important}.ps-hero-description{font-size:12px!important}}

@media(max-width:760px){.product-grid .product-card.poster-card,.product-grid .product-card.game-neon-card{min-height:218px}.section-top{flex-wrap:wrap}.section-top>div{min-width:0}.section-top>a{flex-shrink:0}}

@media(max-width:760px){.product-grid .product-card.poster-card,.product-grid .product-card.game-neon-card{width:100%;min-width:0;aspect-ratio:auto;height:clamp(218px,58vw,290px)}}

@media(max-width:760px){.product-grid .poster-card .card-art.premium-s4 img{height:auto;aspect-ratio:66/53;top:16%}.discord-poster-art img{top:20%;height:32%}}