/* Vybe Stream Store(TM) - storefront layer on top of site.css. (c) 2026 Spark Fire Technologies. */
body.store { padding-bottom: 0; }
.st-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 20px; padding: 12px 22px; background: linear-gradient(180deg, #120405, #080203); border-bottom: 1px solid var(--line); }
.st-brand { display: flex; align-items: center; gap: 12px; color: var(--cream); text-decoration: none; flex: none; }
.st-brand img { filter: drop-shadow(0 0 10px rgba(227, 20, 31, .45)); }
.st-brand .wm1 { font-size: 1.7rem; }
.st-brand .wm2 { font-size: .7rem; letter-spacing: .35em; }
.st-search { flex: 1; max-width: 520px; }
.st-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.st-live { color: var(--cream); text-decoration: none; font: 500 .9rem Oswald, sans-serif; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.st-account { color: #2a1800; background: var(--gold); padding: 8px 16px; border-radius: 8px; text-decoration: none; font: 600 .9rem Inter, sans-serif; }
.st-nav { display: flex; gap: 4px; padding: 8px 22px; background: #0c0304; border-bottom: 1px solid #1f0a0c; overflow-x: auto; }
.st-nav a { color: var(--cream); text-decoration: none; padding: 8px 14px; border-radius: 8px; font: 500 .95rem Inter, sans-serif; white-space: nowrap; }
.st-nav a:hover { background: #1a0a0c; }
.st-nav a.on { background: linear-gradient(180deg, var(--red), var(--red2)); color: #fff; }
.st-main { max-width: 1240px; margin: 0 auto; padding: 18px 22px 30px; display: grid; gap: 16px; }
.st-hero { border-radius: var(--radius); padding: clamp(24px, 5vw, 56px); background: linear-gradient(90deg, rgba(8,2,3,.97) 0%, rgba(8,2,3,.9) 55%, rgba(8,2,3,.45) 80%, rgba(8,2,3,.25) 100%), url('/assets/hero.jpg') right center/cover; border: 1px solid var(--line2); min-height: 240px; display: flex; align-items: center; }
.st-hero h1 { margin: 0 0 10px; }
.st-hero p { max-width: 560px; color: #eadcdc; font-size: 1.05rem; margin: 0 0 18px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.st-card { display: flex; flex-direction: column; gap: 2px; color: var(--cream); text-decoration: none; min-width: 0; }
.st-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 6px; background: #150709; transition: transform .15s, border-color .15s; }
.st-card:hover img { transform: translateY(-2px); border-color: var(--gold); }
.st-card b, .st-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-card span { color: var(--muted); font-size: .88rem; }
.st-card em { color: var(--gold); font-style: normal; font-size: .75rem; letter-spacing: .06em; }
.verified { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #2f7cf6; color: #fff; font-size: .7rem; vertical-align: middle; }
.az { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 14px; }
.az a, .az span { min-width: 34px; text-align: center; padding: 6px 8px; border-radius: 6px; font: 500 .95rem Oswald, sans-serif; text-decoration: none; }
.az a { background: #1a0a0c; color: var(--cream); border: 1px solid var(--line); }
.az a:hover { border-color: var(--gold); }
.az a.on { background: var(--gold); color: #2a1800; border-color: var(--gold); }
.az span.off { color: #4a3638; }
.recall-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin: 8px 0 14px; }
.recall-form label { display: grid; gap: 4px; font-size: .85rem; font-weight: 500; }
.heard { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.heard li { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #22100f; }
.heard time { color: var(--gold); font-size: .85rem; }
.heard span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heard b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recall { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.recall li { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #130607; border: 1px solid var(--line); }
.recall li.closest { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(240,191,42,.3); }
.recall time { font: 500 1rem Oswald, sans-serif; color: var(--gold); }
.recall span { display: flex; flex-direction: column; min-width: 0; }
.recall small { color: var(--muted); }
.recall .acts { flex-direction: row; gap: 6px; }
.st-artist { display: grid; gap: 12px; }
.st-banner { width: 100%; max-height: 280px; object-fit: cover; border-radius: var(--radius); }
.st-artist-head { display: flex; gap: 20px; align-items: center; }
.st-avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid var(--line2); flex: none; background: #150709; }
.st-artist-head h1 { margin: 0 0 4px; }
.st-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.st-release { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.st-cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line2); box-shadow: var(--glow); background: #150709; }
.tracklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.tracklist li { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 260px) 70px auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #22100f; }
.tracklist .n { color: var(--muted); text-align: right; }
.tracklist .t { display: flex; flex-direction: column; min-width: 0; }
.tracklist small { color: var(--muted); }
.tracklist audio { width: 100%; height: 34px; }
.tracklist .p { color: var(--gold); text-align: right; font-weight: 600; }
.ex { display: inline-block; font-size: .62rem; background: #4a3638; color: #fff; padding: 0 4px; border-radius: 3px; vertical-align: middle; }
.st-foot { border-top: 1px solid var(--line); padding: 20px 22px; color: var(--muted); font-size: .85rem; max-width: 1240px; margin: 0 auto; }
.st-foot p { display: flex; gap: 10px; align-items: flex-start; }
.st-foot a { color: var(--cream); }
.st-cs-brand { font: 300 clamp(1.4rem, 4vw, 2.2rem) Oswald, sans-serif; letter-spacing: .18em; margin: 22px 0 0; color: var(--cream); }
.st-cs-brand em { color: var(--red); font-style: normal; }
.st-cs-brand sup { font-size: .45em; letter-spacing: 0; }
@media (max-width: 900px) {
  .st-top { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .st-search { order: 3; max-width: none; flex-basis: 100%; }
  .st-live { display: none; }
  .st-brand .wm1 { font-size: 1.15rem; } .st-brand .wm2 { font-size: .55rem; }
  .st-main { padding: 12px; }
  .st-release { grid-template-columns: minmax(0, 1fr); }
  .st-cover { max-width: 320px; }
  .recall-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tracklist li { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .tracklist audio { grid-column: 2 / -1; }
  .tracklist .p { display: none; }
  .heard li { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .heard li span { display: none; }
  .st-artist-head { flex-direction: column; text-align: center; }
  .st-cta { justify-content: center; }
}