/* /products/gamification/store (partials/sp-store.hbs, stp-live.hbs; loaded by stp-assets.hbs): the hero (store cards; a
   jersey is bought, js/store.js plays it), the reason, type, rule and delivery cards, the frames of the
   two Vibe Studio store widgets (they bring their own look) and the FAQ. Dark navy panels as on the Missions page. */
:root {
  --stp-bg: #0c1020;
  --stp-card: #161d38;
  --stp-line: #262f52;
  --stp-text: #cdd3ea;
  --stp-muted: #8a92b2;
  --stp-gold: #f2c45a;
  --stp-gold2: #c8902a;
  --stp-red: #ff5d5d;
  --stp-green: #3ddc84;
  --stp-violet: #b56cff;
  --stp-cyan: #11ced7;
}

/* ------------------------------------------------ hero: three store cards, the jersey is bought */
.stp-hero { position: relative; width: 100%; max-width: 34rem; aspect-ratio: 1 / .9; margin: 0 auto; border-radius: 1.25rem; overflow: hidden; background: radial-gradient(70% 60% at 70% 15%, rgba(242, 196, 90, .22), transparent 70%), radial-gradient(60% 60% at 10% 90%, rgba(181, 108, 255, .25), transparent 70%), var(--stp-bg); box-shadow: 0 2rem 4rem rgba(10, 12, 24, .35); font-family: "Lexend Deca", sans-serif; color: #fff; container-type: inline-size; }
.stp-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 28px 28px; }
.stp-hero_bal { position: absolute; top: 6%; left: 6%; z-index: 4; padding: 1.6cqw 3cqw; border-radius: 999px; background: rgba(242, 196, 90, .12); border: 1px solid rgba(242, 196, 90, .35); font-size: clamp(.65rem, 2.8cqw, .9rem); color: var(--stp-text); }
.stp-hero_bal b { color: var(--stp-gold); font-variant-numeric: tabular-nums; display: inline-block; }
.stp-hero_bal.is-drop b { animation: stpDrop .8s ease; }
@keyframes stpDrop { 30% { transform: scale(1.3); color: #ff9a9a; } }
.stp-hcard { position: absolute; display: flex; flex-direction: column; gap: 1cqw; padding: 2.2cqw; border-radius: 3.6cqw; background: var(--stp-card); border: 1px solid var(--stp-line); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .5); transition: transform .5s cubic-bezier(.2, .9, .3, 1.2), box-shadow .4s, border-color .4s; }
.stp-hcard_img { flex: none; width: 100%; height: auto; aspect-ratio: 1; border-radius: 2.4cqw; object-fit: cover; }
.stp-hcard b { font-size: clamp(.62rem, 2.8cqw, .9rem); line-height: 1.2; }
.stp-hcard em { font-style: normal; font-weight: 800; color: var(--stp-gold); font-size: clamp(.62rem, 2.8cqw, .9rem); }
.stp-hcard em::after { content: " pts"; font-weight: 400; color: var(--stp-muted); font-size: .75em; }
.stp-hcard.is-a { left: 5%; top: 31%; width: 27%; transform: rotate(-7deg); }
.stp-hcard.is-b { left: 34%; top: 20%; width: 34%; z-index: 2; }
.stp-hcard.is-c { right: 5%; top: 33%; width: 27%; transform: rotate(7deg); }
.stp-hcard_rib { position: absolute; top: 3.6cqw; left: 3.6cqw; padding: .5cqw 1.4cqw; border-radius: 1cqw; background: var(--stp-red); font-size: clamp(.5rem, 1.9cqw, .62rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.stp-hcard_rib.is-new { background: var(--stp-violet); }
.stp-hcard_rib.is-vip { background: linear-gradient(180deg, #ffe7a3, var(--stp-gold2)); color: #2b1d00; }
.stp-hcard_left { position: absolute; top: 3.6cqw; right: 3.6cqw; padding: .5cqw 1.4cqw; border-radius: 1cqw; background: rgba(17, 206, 215, .9); color: #062a2c; font-style: normal; font-size: clamp(.5rem, 1.9cqw, .62rem); font-weight: 800; }
.stp-hcard_buy { margin-top: .6cqw; padding: 1.4cqw; border-radius: 1.6cqw; background: linear-gradient(180deg, #ffe7a3, var(--stp-gold) 50%, var(--stp-gold2)); color: #2b1d00; text-align: center; font-weight: 800; font-size: clamp(.6rem, 2.5cqw, .82rem); transition: transform .15s, filter .3s; }
.stp-hero.is-press .stp-hcard.is-b { transform: translateY(-2cqw) scale(1.04); border-color: rgba(242, 196, 90, .7); box-shadow: 0 0 0 .3rem rgba(242, 196, 90, .25), 0 1.5rem 3rem rgba(0, 0, 0, .5); }
.stp-hero.is-press .stp-hcard_buy { transform: scale(.94); filter: brightness(1.15); }
.stp-hero_toast { position: absolute; left: 50%; bottom: 7%; z-index: 5; display: flex; align-items: center; gap: 2.4cqw; width: 62%; margin-left: -31%; padding: 2.4cqw 3cqw; border-radius: 3cqw; background: rgba(11, 14, 28, .96); border: 1px solid rgba(242, 196, 90, .6); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .5); opacity: 0; transform: translateY(1rem); transition: opacity .4s, transform .4s; }
.stp-hero_toast > span { font-size: clamp(1rem, 5cqw, 1.6rem); }
.stp-hero_toast b { display: block; font-size: clamp(.65rem, 2.8cqw, .9rem); }
.stp-hero_toast small { display: block; font-size: clamp(.58rem, 2.4cqw, .78rem); color: var(--stp-muted); }
.stp-hero.is-toast .stp-hero_toast { opacity: 1; transform: none; }

/* ------------------------------------------------ cards on white sections */
.stp-why, .stp-types, .stp-rules, .stp-flow { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.stp-why { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stp-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stp-rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stp-why li, .stp-types li, .stp-rules li, .stp-flow li { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border-radius: .875rem; background: #fff; border: 1px solid var(--sp-line, #e3e6f0); }
.stp-why li b, .stp-types li b, .stp-rules li b, .stp-flow li b { font-weight: 600; }
.stp-why li > span:last-child, .stp-types li > span:not([class]), .stp-rules li > span:not([class]), .stp-flow li > span:last-child { font-size: .9375rem; line-height: 1.5; color: #4a5068; }
.stp-why_ic { font-size: 1.6rem; }
.stp-types_ic { width: 3.75rem; height: 3.75rem; margin-bottom: .25rem; border-radius: .9rem; overflow: hidden; background: var(--stp-bg); display: grid; place-items: center; }
.stp-types_ic.is-emoji { font-size: 1.8rem; background: radial-gradient(circle at 50% 35%, #2a2f6a, var(--stp-bg)); }
.stp-types_img { width: 100%; height: 100%; object-fit: cover; }
.stp-rules li em { margin-top: auto; font-style: normal; font-size: .8rem; color: #8a5a00; }
.stp-rules_art { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; height: 4.5rem; margin-bottom: .25rem; padding: 0 .6rem; border-radius: .7rem; background: var(--stp-bg); color: #fff; font-family: "Lexend Deca", sans-serif; }
.stp-rules_art small { flex-basis: 100%; text-align: center; font-size: .72rem; color: var(--stp-muted); }
.stp-price { color: var(--stp-gold); font-size: 1.15rem; }
.stp-price s { margin-left: .3rem; color: var(--stp-muted); font-weight: 400; font-size: .8rem; }
.stp-off { padding: .2rem .45rem; border-radius: 999px; background: var(--stp-red); color: #fff; font-style: normal; font-size: .72rem; font-weight: 800; transform: rotate(-10deg); }
.stp-rib { padding: .15rem .45rem; border-radius: .3rem; background: var(--stp-red); color: #fff; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stp-rib.is-new { background: var(--stp-violet); }
.stp-rib.is-vip { background: linear-gradient(180deg, #ffe7a3, var(--stp-gold2)); color: #2b1d00; }
.stp-rib.is-sale { background: var(--stp-green); color: #06260f; }
.stp-stock { flex-basis: 75%; height: .45rem; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.stp-stock i { display: block; width: var(--w); height: 100%; background: linear-gradient(90deg, var(--stp-red), #f2a20c); }
.stp-count { font-size: 1.3rem; color: var(--stp-cyan); }
.stp-timer { padding: .3rem .7rem; border-radius: 999px; background: rgba(255, 93, 93, .15); color: #ff9a9a; font-size: .95rem; }
.stp-days { display: flex; gap: .25rem; }
.stp-days i { width: 1.45rem; height: 1.45rem; border-radius: .35rem; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--stp-muted); font-style: normal; font-size: .7rem; font-weight: 700; }
.stp-days i.on { background: rgba(200, 245, 74, .2); color: #c8f54a; }
.stp-lock { padding: .35rem .8rem; border-radius: .5rem; background: rgba(242, 196, 90, .15); color: var(--stp-gold); font-size: .95rem; }
.stp-tag { padding: .2rem .55rem; border-radius: .45rem; background: rgba(255, 255, 255, .08); color: var(--stp-text); font-style: normal; font-size: .75rem; }

/* ------------------------------------------------ #delivery: five steps in a row with arrows */
.stp-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: stp; }
.stp-flow li { counter-increment: stp; }
.stp-flow li::before { content: counter(stp); position: absolute; top: 1rem; right: 1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: rgba(242, 196, 90, .18); color: #8a5a00; font: 700 .75rem/1 "Lexend Deca", sans-serif; }
.stp-flow li + li::after { content: "→"; position: absolute; left: -.85rem; top: 50%; margin-top: -.6rem; width: .7rem; color: #b2b8cc; font-size: 1rem; line-height: 1.2rem; text-align: center; }
.stp-flow_ic { font-size: 1.7rem; }

/* ------------------------------------------------ live sections: the widgets bring their own look */
.stp-sec { position: relative; z-index: 2; color: #fff; overflow: hidden; background: radial-gradient(90% 60% at 50% 0%, #2a2410 0%, #0d0c08 70%); }
.stp-sec::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.stp-sec > * { position: relative; }
.stp-sec.is-fan { background: radial-gradient(80% 60% at 50% 0%, #1d5a42 0%, #07140f 70%); }
.stp-sec_head { max-width: 50rem; margin: 0 auto 2.5rem; text-align: center; display: grid; gap: 1rem; }
.stp-sec_head .section_title { margin: 0; color: #fff; }
.stp-sec_head .title_sub { margin: 0; color: var(--stp-text); opacity: 1; }
.stp-sec_kicker { justify-self: center; padding: .3rem .8rem; border-radius: 999px; background: rgba(242, 196, 90, .15); color: var(--stp-gold); font: 700 .75rem/1.2 "Lexend Deca", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.stp-sec.is-fan .stp-sec_kicker { background: rgba(200, 245, 74, .15); color: #c8f54a; }
.stp-widget { width: 100%; max-width: 72rem; min-height: 32rem; margin: 0 auto; }
.stp-widget.is-fan { min-height: 46rem; }
.stp-widget_err { padding: 3rem 1rem; text-align: center; color: var(--stp-red); }
.stp-try { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 72rem; margin: 1.75rem auto 0; padding: 0; list-style: none; }
.stp-try li { display: flex; gap: .7rem; align-items: flex-start; font-size: .875rem; line-height: 1.5; color: var(--stp-text); }
.stp-try b { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(242, 196, 90, .15); color: var(--stp-gold); font-size: .8rem; }
.stp-sec.is-fan .stp-try b { background: rgba(200, 245, 74, .15); color: #c8f54a; }

/* ------------------------------------------------ FAQ: opened by js/store.js (no Webflow interaction on this page) */
.stp-faq .faq-p-3 { height: 80px; transition: height .35s ease; }
.stp-faq .faq-3 { position: relative; cursor: pointer; }
.stp-faq .faq-icon { inset: 50% 0 auto auto; width: 24px; height: 24px; margin: -12px 0 0; filter: none; }
.stp-faq .faq-icon::before, .stp-faq .faq-icon::after { content: ""; position: absolute; left: 4px; right: 4px; top: 11px; height: 2px; border-radius: 2px; background: #181b2b; transition: transform .3s; }
.stp-faq .faq-icon::after { transform: rotate(90deg); }
.stp-faq .faq-p-3.is-open .faq-icon::after { transform: rotate(0); }

@media (max-width: 991px) {
  .stp-why, .stp-types, .stp-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stp-flow { grid-template-columns: minmax(0, 1fr); }
  .stp-flow li + li::after { content: "↓"; left: 50%; top: -.95rem; margin: 0 0 0 -.35rem; }
  .stp-try { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .stp-why, .stp-types, .stp-rules { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .stp-hero *, .stp-sec * { animation: none !important; transition: none !important; }
}