/* The store, the live review stream and the beats: their own parts, in the
   site's frame (aria.css). Prefix sh_. One accent (the site's red) for what
   can be pressed; gold for money; green for what is already yours; the
   toolkit's four group colours only where they name a group of tools. */

.sh_wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px 110px; }
@media (max-width: 560px) { .sh_wrap { padding: 0 18px 90px; } }

.sh_hero { padding: 64px 0 10px; max-width: 820px; }
.sh_hero h1 { font-size: clamp(2.2rem, 5.8vw, 3.7rem); line-height: 1.03; letter-spacing: -.025em; margin: 0 0 18px; color: #fff; text-wrap: balance; }
.sh_lede { font-size: 1.1rem; line-height: 1.7; color: rgba(255,255,255,.82); margin: 0; max-width: 62ch; }
.sh_cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 26px; }
.sh_say { color: rgba(255,255,255,.74); font-size: .95rem; line-height: 1.6; }
.sh_fine { margin: 16px 0 0; font-size: .86rem; color: rgba(255,255,255,.55); line-height: 1.6; max-width: 72ch; }
.sh_fine b { color: rgba(255,255,255,.85); font-weight: 600; }

.sh_sec { margin-top: 64px; }
.sh_sec > h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 8px; color: #fff; letter-spacing: -.015em; }
.sh_sub { margin: 0 0 22px; color: rgba(255,255,255,.66); line-height: 1.65; max-width: 64ch; }

/* ARIA Pro, at the top of the store once it is on sale. */
.sh_feature { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center;
  margin-top: 34px; padding: 30px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,43,74,.16), rgba(255,255,255,.03) 60%); border: 1px solid rgba(255,43,74,.38); }
@media (max-width: 820px) { .sh_feature { grid-template-columns: 1fr; padding: 24px 20px; } }
.sh_feature h2 { margin: 6px 0 8px; color: #fff; font-size: 1.6rem; letter-spacing: -.015em; }
.sh_feature p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.65; }
.sh_tag { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--x-pink); }
.sh_prices { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; margin: 14px 0 0; color: rgba(255,255,255,.7); }
.sh_prices b { color: #fff; font-size: 1.9rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sh_pips { display: inline-flex; gap: 4px; vertical-align: middle; margin-right: 8px; }
.sh_pips span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.sh_pips span.on { background: var(--green); }

/* The tools, by group. The group's colour runs along the top of each card. */
.sh_group { margin: 30px 0 12px; display: flex; align-items: center; gap: 10px; font-size: .76rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.8); }
.sh_group i { width: 9px; height: 9px; border-radius: 3px; background: var(--gc); }
.sh_tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.sh_tool { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 18px; border-radius: 18px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); overflow: hidden; scroll-margin-top: 110px;
  transition: border-color .25s var(--x-ease), box-shadow .25s var(--x-ease); }
.sh_tool::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gc); opacity: .9; }
.sh_tool.is-target { border-color: rgba(255,255,255,.4); box-shadow: 0 0 0 3px rgba(255,43,74,.25); }
.sh_tool.is-picked { border-color: rgba(255,43,74,.6); background: rgba(255,43,74,.07); }
.sh_tool h3 { margin: 0; color: #fff; font-size: 1.08rem; }
.sh_tool p { margin: 0; color: rgba(255,255,255,.7); line-height: 1.55; font-size: .92rem; flex: 1; }
.sh_tool .sh_buy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sh_tool .button { padding: 9px 14px; font-size: .88rem; }
.sh_pick { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: rgba(255,255,255,.85); cursor: pointer; }
.sh_pick input { width: 18px; height: 18px; accent-color: var(--x-red); }
.g-make { --gc: #b49cff; } .g-release { --gc: #3fd9cf; } .g-paid { --gc: #f4c95d; } .g-grow { --gc: #6cb6ff; }

.sh_chip { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); white-space: nowrap; width: fit-content; }
.sh_chip.own { background: rgba(74,222,128,.13); color: var(--green); }
.sh_chip.month { background: rgba(244,201,93,.12); color: var(--gold); }
.sh_chip.pro { background: rgba(255,43,74,.14); color: #ff8fa3; }

/* Two bundles, side by side. */
.sh_bundles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .sh_bundles { grid-template-columns: 1fr; } }
.sh_bundle { padding: 26px 24px; border-radius: 20px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); }
.sh_bundle.all { background: linear-gradient(180deg, rgba(108,182,255,.07), rgba(255,255,255,.03)); }
.sh_bundle h3 { margin: 4px 0 8px; color: #fff; font-size: 1.25rem; }
.sh_bundle p { margin: 0 0 16px; color: rgba(255,255,255,.74); line-height: 1.6; }
.sh_bundle .sh_amount { font-size: 2.4rem; color: #fff; letter-spacing: -.03em; line-height: 1; margin: 6px 0 14px; font-weight: 700; }
.sh_bundle .sh_amount small { font-size: .95rem; color: rgba(255,255,255,.6); font-weight: 400; letter-spacing: 0; }

/* The bar that follows a five-pick down the page. */
.sh_bar { position: sticky; bottom: 84px; z-index: 5; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; padding: 14px 18px; border-radius: 16px; background: rgba(14,14,18,.96);
  border: 1px solid rgba(255,43,74,.45); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
@media (min-width: 1100px) { .sh_bar { bottom: 18px; } }
.sh_bar b { color: #fff; }

.sh_cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.sh_card { padding: 24px 22px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.sh_card h3 { margin: 6px 0 8px; color: #fff; font-size: 1.12rem; }
.sh_card p { margin: 0 0 14px; color: rgba(255,255,255,.72); line-height: 1.6; }

/* Panels, forms and messages. */
.sh_panel { padding: 24px 26px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); }
@media (max-width: 560px) { .sh_panel { padding: 20px 18px; } }
.sh_panel h3 { margin: 0 0 6px; color: #fff; font-size: 1.15rem; }
.sh_panel p { margin: 0 0 14px; color: rgba(255,255,255,.74); line-height: 1.65; }
.sh_panel p a { color: #fff; }
.sh_signin { width: 100%; margin-top: 14px; }
.sh_field { margin-bottom: 14px; }
.sh_field label { display: block; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 7px; }
.sh_field input, .sh_field textarea, .sh_field select { width: 100%; padding: 12px 14px; border-radius: 11px; font: inherit; color: #fff;
  background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.16); }
.sh_field textarea { resize: vertical; min-height: 80px; line-height: 1.55; }
.sh_field input:focus, .sh_field textarea:focus, .sh_field select:focus { outline: none; border-color: var(--x-red); }
.sh_row { display: flex; gap: 14px; flex-wrap: wrap; }
.sh_row .sh_field { flex: 1; min-width: 200px; }
.sh_actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sh_link { background: none; border: 0; padding: 0; color: rgba(255,255,255,.72); font: inherit; font-size: .9rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sh_link:hover { color: #fff; }
.sh_msg { min-height: 1.2em; margin-top: 10px; font-size: .92rem; color: #ff8fa3; }
.sh_msg.ok { color: var(--green); }
.sh_banner { margin-top: 22px; padding: 14px 18px; border-radius: 14px; line-height: 1.6; }
.sh_banner.ok { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.35); color: #c8f7d8; }
.sh_banner.info { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.82); }
.sh_banner.bad { background: rgba(255,43,74,.08); border: 1px solid rgba(255,43,74,.4); color: #ffc0ca; }
.sh_banner a { color: #fff; }

/* What somebody bought. */
.sh_rows { display: grid; gap: 8px; }
.sh_r { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; padding: 12px 16px;
  border-radius: 12px; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.08); }
.sh_r b { color: #fff; font-weight: 600; }
.sh_r span { color: rgba(255,255,255,.64); font-size: .9rem; }

/* The live line. The song on now leads it; each badge says how it got where
   it is, so a skip is never mistaken for a queue jump that was not paid for. */
.sh_now { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: #fff; padding: 6px 12px; border-radius: 99px; background: rgba(255,43,74,.2); border: 1px solid rgba(255,43,74,.6); }
.sh_now i { width: 8px; height: 8px; border-radius: 50%; background: var(--x-red); animation: sh_pulse 1.6s ease-in-out infinite; }
@keyframes sh_pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .sh_now i { animation: none; } }
.sh_line { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sh_line li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px;
  border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.sh_line li.on { background: rgba(255,43,74,.12); border-color: rgba(255,43,74,.5); }
.sh_line li.mine { border-color: rgba(74,222,128,.55); box-shadow: inset 3px 0 0 var(--green); }
.sh_pos { font-family: var(--x-mono); font-size: 1.05rem; color: rgba(255,255,255,.6); text-align: center; font-variant-numeric: tabular-nums; }
.sh_line li.on .sh_pos { color: #fff; }
.sh_who { min-width: 0; }
.sh_who b { display: block; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh_who span { display: block; color: rgba(255,255,255,.62); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh_badge { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; white-space: nowrap;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.7); }
.sh_badge.super { background: rgba(244,201,93,.16); color: var(--gold); }
.sh_badge.skip { background: rgba(255,107,130,.14); color: var(--x-pink); }
.sh_badge.on { background: var(--x-red); color: #fff; }
.sh_watch { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sh_faq { display: grid; gap: 2px; }
.sh_faq details { border-radius: 12px; background: rgba(255,255,255,.035); }
.sh_faq summary { cursor: pointer; list-style: none; padding: 16px 18px; color: #fff; font-weight: 600;
  display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.sh_faq summary::-webkit-details-marker { display: none; }
.sh_faq summary::after { content: '+'; color: var(--x-red); font-size: 1.3rem; line-height: 1; }
.sh_faq details[open] summary::after { content: '\2212'; }
.sh_faq details p { margin: 0; padding: 0 18px 18px; color: rgba(255,255,255,.74); line-height: 1.7; max-width: 72ch; }
.sh_two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .sh_two { grid-template-columns: 1fr; } }
/* Beats. A sold exclusive stays listed, greyed and marked, so the catalogue
   shows what the collective's beats go for. A top beat wears gold: money,
   and the collective's best. */
.bx_beat { --gc: var(--x-red); }
.bx_beat.is-top { --gc: var(--gold); border-color: rgba(244,201,93,.4); }
.bx_beat.is-top .sh_tag { color: var(--gold); }
.bx_beat.is-sold { opacity: .55; filter: grayscale(.85); }
.bx_beat.is-sold:hover { opacity: .8; }
.bx_dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 26px 26px 22px;
  border-radius: 20px; border: 1px solid rgba(255,255,255,.16); background: #121216; color: #fff; }
.bx_dlg::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
@media (max-width: 560px) { .bx_dlg { padding: 22px 18px 18px; } }
/* /learn: the answers to tick, marked after checking. Green is what pays and
   was ticked; gold what pays and was missed; red what was ticked and does not. */
.ln_opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-bottom: 16px; }
.ln_opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.88); }
.ln_opt input { width: 18px; height: 18px; accent-color: var(--x-red); flex: none; }
.ln_opt.good { border-color: rgba(74,222,128,.6); background: rgba(74,222,128,.08); }
.ln_opt.missed { border-color: rgba(244,201,93,.6); background: rgba(244,201,93,.07); }
.ln_opt.wrong { border-color: rgba(255,43,74,.6); background: rgba(255,43,74,.07); }
.ln_clause { margin: 0 0 18px; padding: 18px 20px; border-left: 3px solid var(--x-pink); border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,.04); color: #fff; font-size: 1.05rem; line-height: 1.65; font-style: italic; }
.button.ln_wrong { border-color: rgba(255,43,74,.6); color: #ffc0ca; }
[hidden] { display: none !important; }