/* /store (the grid) and /store/<id> (the detail page). Reuses
   .plan-card/.plan-features/.plan-fineprint etc from site.css for the
   purchase panel on the detail page - this file is only the parts unique
   to the catalogue grid and the product page's own layout. */

.store-loading { display: flex; justify-content: center; }

.store-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1100px) { .store-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) { .store-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .store-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .store-grid { grid-template-columns: 1fr; } }

.store-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
  animation: storeCardIn 0.3s var(--ease-out) backwards;
}
@keyframes storeCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.store-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -22px rgba(139, 92, 246, 0.55);
}

/* Same banner-then-body shape as the Partners cards (.pt-banner/.pt-body in
   site.css), so a product reads as something you'd find in the same store
   as a partner server. There's no uploaded artwork for these yet, so the
   banner is painted entirely in CSS: a base gradient, two soft blurred
   colour blobs for depth (::before/::after), a faint starfield, and the
   icon sitting in its own glow - the same layered-aura look as the
   reference art, built with no images to fetch. */
.store-card-banner {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.55) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,0.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,0.45) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 88% 60%, rgba(255,255,255,0.35) 50%, transparent 52%),
    radial-gradient(1px 1px at 12% 80%, rgba(255,255,255,0.4) 50%, transparent 52%),
    linear-gradient(150deg, #2d2060, #120c28);
  border-bottom: 1px solid var(--border);
}
.store-card.is-supporter .store-card-banner {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.08), transparent 55%),
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.55) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,0.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,0.45) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 88% 60%, rgba(255,255,255,0.35) 50%, transparent 52%),
    radial-gradient(1px 1px at 12% 80%, rgba(255,255,255,0.4) 50%, transparent 52%),
    linear-gradient(150deg, #41309c, #150f30);
}
.store-card.is-donate .store-card-banner {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.08), transparent 55%),
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.5) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,0.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,0.4) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 88% 60%, rgba(255,255,255,0.3) 50%, transparent 52%),
    radial-gradient(1px 1px at 12% 80%, rgba(255,255,255,0.35) 50%, transparent 52%),
    linear-gradient(150deg, #8a2a56, #2a0f1f);
}
.store-card-banner::before,
.store-card-banner::after {
  content: "";
  position: absolute;
  width: 65%;
  height: 65%;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.65;
  transition: transform 0.5s var(--ease-out);
}
.store-card-banner::before { top: -22%; left: -14%; background: radial-gradient(circle, #a78bfa, transparent 70%); }
.store-card-banner::after { bottom: -26%; right: -16%; background: radial-gradient(circle, #60a5fa, transparent 70%); }
.store-card.is-donate .store-card-banner::before { background: radial-gradient(circle, #fb7185, transparent 70%); }
.store-card.is-donate .store-card-banner::after { background: radial-gradient(circle, #fbbf24, transparent 70%); }
.store-card:hover .store-card-banner::before { transform: translate(4%, 4%) scale(1.1); }
.store-card:hover .store-card-banner::after { transform: translate(-4%, -4%) scale(1.1); }
.store-card-banner-glow {
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 72%);
  transition: transform 0.4s var(--ease-out);
}
.store-card:hover .store-card-banner-glow { transform: scale(1.2); }
.store-card-icon {
  position: relative;
  width: 40px;
  height: 40px;
  color: #fff;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
  transition: transform 0.25s var(--ease-out);
}
.store-card:hover .store-card-icon { transform: scale(1.1) rotate(-4deg); }
@media (prefers-reduced-motion: reduce) {
  .store-card-banner::before, .store-card-banner::after, .store-card-banner-glow, .store-card-icon { transition: none; }
}

.store-card-body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5); flex: 1; }
.store-card-name { margin: 0; font-size: var(--text-md); }
.store-card-tagline { margin: 0; color: var(--text-muted); font-size: var(--text-sm); flex: 1; }
.store-card-price { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm); margin-top: 4px; }
.store-card-cta {
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--text-dim);
  transition: color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.store-card:hover .store-card-cta { color: var(--accent); transform: translateX(3px); }

/* ---- Product detail page ---- */

.store-product-banner-full {
  position: relative;
  margin: var(--space-6) 0 0;
  aspect-ratio: 21 / 6;
  max-height: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 24% 25%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,0.5) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,0.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 65% 20%, rgba(255,255,255,0.45) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,0.35) 50%, transparent 52%),
    radial-gradient(1px 1px at 92% 25%, rgba(255,255,255,0.4) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 55% 85%, rgba(255,255,255,0.3) 50%, transparent 52%),
    linear-gradient(150deg, #41309c, #150f30);
  border: 1px solid var(--border);
  animation: storeBannerIn 0.4s var(--ease-out);
}
.store-product-banner-full.is-donate {
  background:
    radial-gradient(circle at 24% 25%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,0.5) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,0.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 65% 20%, rgba(255,255,255,0.4) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,0.3) 50%, transparent 52%),
    radial-gradient(1px 1px at 92% 25%, rgba(255,255,255,0.35) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 55% 85%, rgba(255,255,255,0.3) 50%, transparent 52%),
    linear-gradient(150deg, #8a2a56, #2a0f1f);
}
.store-product-banner-full::before,
.store-product-banner-full::after {
  content: "";
  position: absolute;
  width: 46%;
  height: 90%;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.6;
}
.store-product-banner-full::before { top: -30%; left: -8%; background: radial-gradient(circle, #a78bfa, transparent 70%); }
.store-product-banner-full::after { bottom: -35%; right: -8%; background: radial-gradient(circle, #60a5fa, transparent 70%); }
.store-product-banner-full.is-donate::before { background: radial-gradient(circle, #fb7185, transparent 70%); }
.store-product-banner-full.is-donate::after { background: radial-gradient(circle, #fbbf24, transparent 70%); }
@keyframes storeBannerIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}
.store-product-banner-icon-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 72%);
}
.store-product-banner-full svg { position: relative; width: 44px; height: 44px; color: #fff; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4)); }

.store-product-head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) 0 var(--space-5);
  flex-wrap: wrap;
}
.store-product-head h1 { margin: 0 0 4px; }
.store-product-tagline { margin: 0; color: var(--text-muted); }

.store-product-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 860px) { .store-product-layout { grid-template-columns: 1fr; } }

.store-product-desc p { color: var(--text-muted); margin: 0 0 var(--space-4); }
.store-product-wiki { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }

.store-panel {
  position: sticky;
  top: calc(var(--space-7) + 60px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-6);
  animation: storeCardIn 0.35s var(--ease-out) 0.1s backwards;
}
@media (max-width: 860px) { .store-panel { position: static; } }

.store-donate-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.store-donate-amount-btn {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hi);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.store-donate-amount-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.store-donate-amount-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--primary-contrast, #0b0b0e); }
.store-donate-custom { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.store-donate-custom span { color: var(--text-dim); font-family: var(--font-mono); }
.store-donate-custom input.is-invalid {
  border-color: var(--danger, #e5484d);
  color: var(--danger, #e5484d);
  animation: storeInvalidShake 0.3s;
}
@keyframes storeInvalidShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.store-donate-error { color: var(--danger, #e5484d); font-size: var(--text-xs); margin: -4px 0 10px; }
.store-donate-field { margin: 14px 0; }
.store-donate-field label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: 6px; }
.store-donate-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0; }

.store-wall { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-4); }
.store-wall-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  animation: storeCardIn 0.25s var(--ease-out) backwards;
}
.store-wall-row:last-child { border-bottom: none; }
.store-wall-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.store-wall-main { flex: 1; min-width: 0; }
.store-wall-name { font-weight: 600; font-size: var(--text-sm); }
.store-wall-message { color: var(--text-muted); font-size: var(--text-xs); margin: 2px 0 0; }
.store-wall-amount { font-family: var(--font-mono); font-weight: 600; color: #7dd3a0; flex-shrink: 0; }