/* 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; }
/* Sale: the old price, struck through. Needs a solid fill color — the parent's
   gradient text is transparent, which would hide the line-through stroke. */
.product-price .price-was { font-size: 1.15rem; font-weight: 700; color: #7d84a3;
  -webkit-text-fill-color: #7d84a3; text-decoration: line-through;
  text-decoration-thickness: 2px; margin-inline-end: 0.35rem; }
.product-card .btn { justify-content: center; }

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

/* coupon field on product cards */
.coupon-row { font-size: 0.85rem; min-height: 1.6em; margin-top: -0.2rem; }
.coupon-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #7ea2ff; text-decoration: underline; font: inherit; font-size: 0.85rem;
}
.coupon-form { display: inline-flex; gap: 0.4rem; align-items: center; }
.coupon-input {
  width: 9.5rem; padding: 0.35rem 0.55rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(4,5,11,0.6);
  color: #e7e9f3; font: inherit; font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.05em; direction: ltr;
}
.coupon-apply { padding: 0.32rem 0.75rem; font-size: 0.8rem; }
.coupon-msg { display: block; margin-top: 0.35rem; font-size: 0.82rem; }
.coupon-msg.coupon-ok { color: #35e08a; }
.coupon-msg.coupon-err { color: #ff5a6e; }

/* 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; }

/* ── physical (dropship) product cards ─────────────────────────────────── */
.product-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 1rem;
}
.ship-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 1rem 0 .4rem;
}
/* Supplier is out of stock. The card stays visible — a product that exists but
   cannot ship today reads better than one that vanishes — but the button is
   inert and says so. */
.buy-btn:disabled,
.buy-btn.btn-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.product-card.out-of-stock .product-img { filter: grayscale(1); opacity: .65; }
/* Any class rule with a display value — .ship-form above, .btn in style.css —
   outranks the UA stylesheet's [hidden] { display: none }, so setting
   el.hidden = true in JS silently does nothing. That left both the address
   form and the Buy now button on screen after they were meant to disappear.
   Make the attribute authoritative for everything on the page. */
[hidden] { display: none !important; }
.ship-form h4 { margin: 0 0 .2rem; font-size: .95rem; opacity: .85; }
.ship-form input,
.ship-form select {
  width: 100%;
  padding: .6rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: inherit;
  font: inherit;
}
.ship-msg { font-size: .85rem; opacity: .85; min-height: 1.1em; }