/* Brayer Sound — store & account pages (loaded after style.css) */

.store-hero { padding: 7.5rem 0 1rem; text-align: center; }
.store-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; margin: 0.4rem 0 0.6rem; }
.store-hero .hero-sub { max-width: 560px; margin: 0 auto; }

.store-grid {
  display: grid; gap: 1.4rem; margin: 2.5rem auto 4rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 380px));
  justify-content: center;
}
.product-card {
  background: rgba(20, 24, 50, 0.55); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px; padding: 1.8rem 1.6rem; backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 0.7rem; text-align: start;
}
.product-card h3 { margin: 0; font-size: 1.15rem; letter-spacing: 0.04em; }
.product-card .product-desc { color: var(--dim, #9198b6); font-size: 0.9rem; margin: 0; min-height: 2.4em; }
.product-price { font-size: 2rem; font-weight: 900;
  background: linear-gradient(90deg,#4e7cff,#b06bff);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.product-price .one-time { font-size: 0.72rem; font-weight: 600; color: #9198b6;
  -webkit-text-fill-color: #9198b6; margin-inline-start: 0.5rem; letter-spacing: 0.06em; }
.product-card .btn { justify-content: center; }

.store-note { text-align: center; color: #9198b6; font-size: 0.85rem; margin: -2rem auto 4rem; max-width: 620px; }

/* auth + account forms reuse .register-card/.register-form from style.css */
.auth-wrap { max-width: 460px; margin: 7.5rem auto 4rem; padding: 0 1rem; }
.auth-wrap .register-card { padding: 2rem 1.8rem; }
.auth-wrap h1 { font-size: 1.5rem; margin: 0 0 0.4rem; }
.auth-sub { color: #9198b6; font-size: 0.9rem; margin: 0 0 1.4rem; }
.auth-alt { text-align: center; font-size: 0.85rem; color: #9198b6; margin-top: 1.2rem; }
.auth-alt a { color: #7ea2ff; text-decoration: none; }
.form-error { color: #ff5a6e; font-size: 0.85rem; min-height: 1.2em; margin: 0.6rem 0 0; }
.form-success { color: #35e08a; font-size: 0.9rem; margin: 0.6rem 0 0; }

/* account page */
.account-wrap { max-width: 860px; margin: 7.5rem auto 4rem; padding: 0 1rem; }
.account-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.6rem; }
.account-head h1 { margin: 0; font-size: 1.6rem; }
.account-head .who { color: #9198b6; font-size: 0.9rem; }
.license-card {
  background: rgba(20, 24, 50, 0.55); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px; padding: 1.3rem 1.4rem; margin-bottom: 1rem;
}
.license-card .lic-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.license-card h3 { margin: 0; font-size: 1.02rem; }
.lic-status { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.65rem; border-radius: 999px; }
.lic-status.unactivated { background: rgba(78,124,255,0.15); color: #7ea2ff; }
.lic-status.activated { background: rgba(53,224,138,0.14); color: #35e08a; }
.lic-status.revoked { background: rgba(255,90,110,0.14); color: #ff5a6e; }
.key-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(4,5,11,0.6); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 0.7rem 0.9rem; margin-top: 0.7rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  font-size: 0.95rem; letter-spacing: 0.06em; overflow-x: auto; direction: ltr;
}
.key-box .copy-btn {
  background: rgba(124,92,255,0.15); border: 1px solid rgba(176,107,255,0.35);
  color: #e7e9f3; border-radius: 8px; padding: 0.35rem 0.7rem; font-size: 0.75rem; cursor: pointer;
  white-space: nowrap;
}
.lic-meta { color: #9198b6; font-size: 0.78rem; margin-top: 0.55rem; }
.empty-state { text-align: center; color: #9198b6; padding: 2.5rem 1rem; }

/* thanks page */
.thanks-wrap { max-width: 620px; margin: 7.5rem auto 4rem; padding: 0 1rem; text-align: center; }
.thanks-card { background: rgba(20,24,50,0.55); border: 1px solid rgba(53,224,138,0.25);
  border-radius: 18px; padding: 2.4rem 1.8rem; }
.thanks-card.error { border-color: rgba(255,90,110,0.3); }
.thanks-icon { font-size: 2.6rem; }
.big-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1rem, 3.4vw, 1.45rem); font-weight: 700; letter-spacing: 0.08em;
  background: rgba(4,5,11,0.6); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px; padding: 1rem 1.2rem; margin: 1.2rem 0; direction: ltr; overflow-x: auto;
}
.thanks-steps { text-align: start; color: #c9cede; font-size: 0.92rem; line-height: 1.65; margin: 1.2rem auto 0; max-width: 440px; }
.nav .icon-btn.logged-in svg { stroke: #35e08a; }

/* in-page buy panel on product pages (sf2-builder etc.) */
.buy-panel {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 0.9rem; background: rgba(4,5,11,0.45); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 2rem 1.8rem;
}
.buy-panel .buy-product { font-weight: 800; letter-spacing: 0.14em; font-size: 0.78rem; color: #9198b6; }
.buy-panel .btn { width: 100%; justify-content: center; text-align: center; }
.buy-panel .btn:disabled { opacity: 0.55; cursor: default; }
.buy-note { color: #9198b6; font-size: 0.8rem; margin: 0; }