.store{background:#050805}
.shero{position:relative;height:170px;display:flex;align-items:center;justify-content:center;padding-top:env(safe-area-inset-top,0px)}
.shero .slogo img{width:110px;height:110px;object-fit:contain;display:block}
.back{position:absolute;left:16px;top:calc(16px + env(safe-area-inset-top,0px));background:#1a1a1a;color:#ccc;padding:10px 16px;border-radius:4px;font-size:14px;font-weight:500}
.back:hover{color:#fff}
.swrap{max-width:900px;margin:0 auto;padding:0 16px}
.cats{background:var(--card);margin-bottom:12px;border-radius:4px;overflow:hidden}
.cats a{display:block;padding:16px 20px;font-size:17px;font-weight:500;color:#9a9a9a;border-left:4px solid transparent}
.cats a:hover{color:#fff}.cats a.on{color:var(--red);background:#1d1d1d;border-left-color:var(--red)}
.spanel{background:var(--card);padding:24px 20px 30px;border-radius:4px;margin-bottom:12px}
.sh{margin:0 0 18px;font-size:18px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#d8d8d8}
.sh2{margin-top:40px;text-align:center;letter-spacing:.5px;text-transform:none;font-size:24px;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.prod{background:#111;border:1px solid #232323;border-radius:4px;padding:18px;display:flex;flex-direction:column;gap:8px}
.prod h3{margin:0;color:#fff;font-size:18px;font-weight:600;line-height:1.3}
.prod .price{color:#ffc83d;font-size:20px;font-weight:600}
.prod p{margin:0;font-size:15px;color:#bdbdbd;flex:1;white-space:pre-wrap;word-wrap:break-word}
.prod .btn{justify-content:center;padding:13px 20px;font-size:15px;margin-top:6px;text-align:center}
.info h3{color:#fff;font-size:16px;font-weight:600;margin:22px 0 6px}.info p{margin:0 0 10px;font-size:15px;line-height:1.7}
.info a{color:var(--red);text-decoration:underline}
.grid .empty,.spanel .empty{grid-column:1/-1;padding:30px 16px;font-size:16px;background:#111}
.sfoot{max-width:900px;margin:0 auto;padding:30px 16px 60px;border-top:4px solid #111;text-align:left}
.sfoot b{font-size:16px;font-weight:600;display:block}.sfoot small{display:block;font-size:14px;opacity:.6;margin-top:6px}
.sfoot a:hover{color:#fff}

.badges{display:flex;gap:6px}.badge{background:#2a2a2a;color:#ffc83d;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:4px 8px;border-radius:3px}
.badge.sale{background:var(--red);color:#06200a}
.prod .price .old{color:#777;text-decoration:line-through;font-size:15px;font-weight:400;margin-right:10px}
.spanel .sh+.grid{margin-bottom:30px}.spanel .grid:last-child{margin-bottom:0}

.shero{overflow:hidden}.shero .slogo{position:relative;z-index:1}
.shero .slogo::before{content:"";position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;background:radial-gradient(circle,rgba(80,220,50,.35) 0,rgba(60,200,40,.12) 45%,transparent 70%);z-index:-1;animation:spulse 4s ease-in-out infinite}
@keyframes spulse{0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.1);opacity:1}}
@media(prefers-reduced-motion:reduce){.shero .slogo::before{animation:none}}
.back{z-index:2}
.notice{background:#111;border-left:4px solid var(--red);padding:14px 16px;font-size:14px;line-height:1.6;margin-bottom:22px;color:#cfcfcf}
.notice b{color:#fff}.notice a{color:var(--red);text-decoration:underline}
.btn.alt{background:#262626;color:#ddd;box-shadow:none}
.prod .btn{border:0;font-family:inherit;cursor:pointer}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow:auto}
.mbox{position:relative;background:#0e150e;border:1px solid #2a2a2a;border-radius:6px;width:100%;max-width:480px;padding:24px 22px 26px;margin:auto}
.mbox h2{margin:0 40px 14px 0;font-size:22px;font-weight:600;color:#fff}
.mx{position:absolute;right:14px;top:14px;background:#262626;color:#ddd;border:0;border-radius:4px;padding:8px 12px;font:500 13px Montserrat,sans-serif;cursor:pointer}
.msum{display:flex;justify-content:space-between;gap:12px;background:#0a100a;padding:12px 14px;border-radius:4px;margin-bottom:10px;color:#fff}.msum span{color:#ffc83d;font-weight:600}
.mnote{font-size:13px;color:#999;margin:8px 0}
.mbox label{display:block;font-size:14px;color:#aaa;margin:14px 0 6px}
.mbox input,.mbox textarea{width:100%;padding:13px;background:#222;border:1px solid #333;color:#eee;font:inherit;font-size:16px;border-radius:4px}
.mbox textarea{min-height:90px;resize:vertical}
.mbox form .btn{width:100%;margin-top:18px;justify-content:center;padding:15px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.merr{color:#ff8a8a;font-size:14px;margin-top:12px;min-height:4px}
.ocode{font-size:36px;font-weight:700;letter-spacing:4px;color:#ffc83d;text-align:center;background:#0a100a;padding:16px;border-radius:4px;margin:8px 0}
.itbl{margin:14px 0}.irow{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid #2a2a2a;font-size:14px}
.irow span{color:#999;flex:none}.irow b{color:#fff;font-weight:500;text-align:right;word-break:break-word}
.steps{font-size:14px;line-height:1.7;background:#0a100a;padding:12px 16px;border-radius:4px;margin:14px 0}.steps ol{margin:6px 0 0;padding-left:20px}
.mbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.mbtns .btn{flex:1;justify-content:center;text-align:center;padding:14px 16px;font-size:14px}
@media print{body>*:not(.modal){display:none!important}.modal{position:static;background:#fff;padding:0;display:block}.mbox{background:#fff;color:#000;border:0;max-width:none}.mbox *{color:#000!important;background:transparent!important}.mx,.mbtns{display:none!important}}

/* ===== store effects ===== */
.grid .prod{animation:rise .55s cubic-bezier(.2,.8,.2,1) backwards}
.grid .prod:nth-child(1){animation-delay:.05s}.grid .prod:nth-child(2){animation-delay:.12s}.grid .prod:nth-child(3){animation-delay:.19s}.grid .prod:nth-child(4){animation-delay:.26s}.grid .prod:nth-child(5){animation-delay:.33s}.grid .prod:nth-child(6){animation-delay:.4s}.grid .prod:nth-child(n+7){animation-delay:.45s}
.prod{transition:transform .25s,border-color .25s,box-shadow .25s}
.prod:hover{transform:translateY(-5px);border-color:var(--red);box-shadow:0 12px 30px rgba(91,216,63,.18)}
.badge.sale{background:linear-gradient(90deg,var(--red),#c6ff6a,var(--red));background-size:200% 100%;animation:shim 3s linear infinite}
.cats a{transition:padding-left .2s,color .2s,background .2s}.cats a:hover{padding-left:28px;background:#121a12}
.modal{animation:fadein .2s ease}.mbox{animation:pop .3s cubic-bezier(.2,.9,.3,1.15)}
.ocode{animation:pop .5s .15s cubic-bezier(.2,.9,.3,1.15) backwards}

@media(max-width:600px){.back{padding:8px 12px;font-size:13px}.shero .slogo img{width:118px;height:118px}}