/*
 * SessionHouse BeatStore - storefront.
 *
 * Every measurement below is transcribed from the prototype source
 * (Beatstore/BKK-Beatstore-standalone.html), which is the authority. Where the prose
 * handoff and the prototype disagree - two filter rows vs one, a licence popover on the
 * player vs a price pill, tags-in-a-chips-row vs none - the PROTOTYPE wins.
 *
 * Reads only from tokens.css: no hex, no rgb(), no font family below this line.
 *
 * Every rule is scoped under .shbs: a single class is (0,1,0) and a host theme scoping
 * headings as .bkk-v6 h1 is (0,1,1), which silently outranked the display type once already.
 *
 * Anything using `all: unset` re-declares box-sizing AND flex-shrink: all:unset resets every
 * property, including ones a utility class set earlier in the cascade.
 */

div.shbs {
  background: var(--shbs-bg);
  color: var(--shbs-ink);
  font-family: var(--shbs-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px;   /* clearance for the sticky player, per the prototype root */

  /*
   * Break out of the host theme's content container. This is a 1440px canvas; wrapped at
   * 600px the table collapses. overflow-x: clip, not hidden - hidden creates a scroll
   * container and silently kills the sticky header. --shbs-half-vw comes from JS because
   * 50vw counts the scrollbar and clientWidth does not.
   */
  margin-left: calc(50% - var(--shbs-half-vw, 50vw));
  margin-right: calc(50% - var(--shbs-half-vw, 50vw));
  overflow-x: clip;
}
div.shbs *, div.shbs *::before, div.shbs *::after { box-sizing: border-box; }
div.shbs img { max-width: 100%; display: block; }
div.shbs .shbs-in { max-width: var(--shbs-max); margin: 0 auto; padding: 0 var(--shbs-pad-x); }

/* --- type primitives ------------------------------------------------------ */

div.shbs .shbs-display {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch);
  font-stretch: 125%; font-weight: 900;
  text-transform: uppercase; line-height: .9; letter-spacing: -.015em; margin: 0;
}
div.shbs .shbs-eyebrow {
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--shbs-red);
}
div.shbs .shbs-label {
  font-family: var(--shbs-mono); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs .shbs-meta {
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-mut);
}

/* --- header (74px) -------------------------------------------------------- */

div.shbs .shbs-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--shbs-header-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--shbs-line);
}
div.shbs .shbs-header__in {
  height: var(--shbs-h-header); max-width: var(--shbs-max); margin: 0 auto;
  padding: 0 var(--shbs-pad-x);
  display: flex; align-items: center; gap: clamp(14px, 2vw, 32px);
}
div.shbs .shbs-wordmark { display: flex; align-items: baseline; gap: 9px; flex-shrink: 0; color: var(--shbs-ink); }
div.shbs .shbs-wordmark__name {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 900;
  font-size: 20px; text-transform: uppercase; letter-spacing: -.01em; line-height: 1;
}
div.shbs .shbs-wordmark__sub {
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--shbs-red);
}

div.shbs .shbs-tabs { display: flex; align-items: center; gap: 2px; margin-left: auto; }
div.shbs .shbs-tab {
  all: unset; box-sizing: border-box; flex-shrink: 0;
  padding: 9px 15px; border-radius: var(--shbs-r-pill); cursor: pointer;
  font-family: var(--shbs-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--shbs-mut); white-space: nowrap;
}
div.shbs .shbs-tab:hover { color: var(--shbs-ink); }
div.shbs .shbs-tab[aria-current='page'] { background: var(--shbs-ink); color: var(--shbs-bg); }
div.shbs .shbs-tab:focus-visible { outline: 2px solid var(--shbs-red); outline-offset: 2px; }

div.shbs .shbs-cart-btn {
  all: unset; box-sizing: border-box; flex-shrink: 0;
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-pill);
  padding: 9px 15px; cursor: pointer;
  font-family: var(--shbs-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--shbs-ink); white-space: nowrap;
}
div.shbs .shbs-cart-btn:hover { border-color: var(--shbs-red); color: var(--shbs-red); }
div.shbs .shbs-cart-btn__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--shbs-r-pill);
  background: var(--shbs-red); color: var(--shbs-bg);
  font-weight: 700; font-size: 10px; letter-spacing: 0;
}
div.shbs .shbs-signin {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  font-family: var(--shbs-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--shbs-bg); background: var(--shbs-ink);
  border-radius: var(--shbs-r-pill); padding: 10px 17px; white-space: nowrap;
}
div.shbs .shbs-signin:hover { background: var(--shbs-red); color: var(--shbs-bg); }

/* --- launch hero: a collapsed bar that expands ---------------------------- */

div.shbs .shbs-hero {
  border-bottom: 1px solid var(--shbs-line);
  background: linear-gradient(180deg, var(--shbs-bg2), var(--shbs-bg));
  overflow: hidden;
}
div.shbs .shbs-hero__bar {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 15px 0;
}
div.shbs .shbs-hero__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
div.shbs .shbs-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--shbs-red); box-shadow: 0 0 10px var(--shbs-red);
  animation: shbsPulse 2s infinite;
}
div.shbs .shbs-hero__credits {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 900;
  text-transform: uppercase; font-size: 15px; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
div.shbs .shbs-hero__right { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
div.shbs .shbs-caret-circle {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--shbs-icon-idle-fill); color: var(--shbs-mut);
  border: 1px solid var(--shbs-line-12);
}
div.shbs [aria-expanded='true'] > * > .shbs-caret-circle,
div.shbs [aria-expanded='true'] .shbs-caret-circle {
  background: var(--shbs-red); color: var(--shbs-bg); border-color: var(--shbs-red);
}

div.shbs .shbs-hero__panel {
  border-top: 1px solid var(--shbs-line2);
  animation: shbsRise .26s ease both;
}
div.shbs .shbs-hero__panel[hidden] { display: none; }
div.shbs .shbs-hero__grid {
  max-width: var(--shbs-max); margin: 0 auto;
  padding: clamp(12px, 2vw, 28px) var(--shbs-pad-x) clamp(34px, 5vw, 60px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
@media (max-width: 860px) { .shbs .shbs-hero__grid { grid-template-columns: minmax(0, 1fr); } }

div.shbs .shbs-hero__h1 {
  font-size: clamp(30px, 4.6vw, 76px); line-height: .86; letter-spacing: -.02em;
  text-wrap: nowrap;   /* keeps the credit stack to exactly three lines */
}
div.shbs .shbs-hero__h1 .x { color: var(--shbs-faint); }
div.shbs .shbs-hero__h1 .last { color: var(--shbs-red); }
div.shbs .shbs-hero__copy {
  margin: 20px 0 0; max-width: 46ch;
  font-size: clamp(14px, 1.15vw, 17px); line-height: 1.6;
  color: var(--shbs-mut); text-wrap: pretty;
}
div.shbs .shbs-hero__ctas { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
div.shbs .shbs-hero__foot {
  display: flex; flex-wrap: wrap; gap: 0 26px;
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--shbs-line);
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs .shbs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
div.shbs .shbs-tile {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer; display: block;
  position: relative; aspect-ratio: 1; border-radius: var(--shbs-r-card);
  overflow: hidden; border: 1px solid var(--shbs-line);
}
div.shbs .shbs-tile:hover { border-color: var(--shbs-red); }
div.shbs .shbs-tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
div.shbs .shbs-tile__cap {
  position: absolute; inset: auto 0 0 0; padding: 22px 12px 10px; display: block; text-align: left;
  background: linear-gradient(180deg, transparent, var(--shbs-tile-scrim));
  font-family: var(--shbs-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-ink);
}

/* --- pill buttons (hero CTAs, beat page CTAs) ------------------------------ */

div.shbs .shbs-cta {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  font-family: var(--shbs-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 14px 22px; border-radius: var(--shbs-r-pill); white-space: nowrap;
}
div.shbs .shbs-cta--red { background: var(--shbs-red); color: var(--shbs-bg); }
div.shbs .shbs-cta--red:hover { background: var(--shbs-red2); }
div.shbs .shbs-cta--line { border: 1px solid var(--shbs-line); color: var(--shbs-ink); }
div.shbs .shbs-cta--line:hover { border-color: var(--shbs-red); color: var(--shbs-red); }
div.shbs .shbs-cta:focus-visible { outline: 2px solid var(--shbs-red); outline-offset: 2px; }

/* --- filter bar: TWO declared rows, exactly as the rendered design ---------- */

/*
 * Row one is the wide search plus Sort; row two is five equal facets. Six facets plus sort
 * cannot fit one row at ~860px, and a wrapping row also makes panel alignment
 * non-deterministic: which trigger is rightmost depends on the wrap point.
 */
div.shbs .shbs-filters {
  display: flex; flex-direction: column; gap: 9px;
  padding-bottom: 16px; border-bottom: 1px solid var(--shbs-line);
}
div.shbs .shbs-filters__row { display: flex; align-items: center; gap: 9px; }
div.shbs .shbs-filters__row--facets > * { flex: 1; min-width: 0; }
div.shbs .shbs-filters__row--facets .shbs-facet__trigger { width: 100%; }
div.shbs .shbs-searchwrap {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
  border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-pill);
  padding: 0 16px; height: var(--shbs-h-control); background: var(--shbs-panel);
}
div.shbs .shbs-searchwrap__icon { color: var(--shbs-faint); font-size: 14px; line-height: 1; flex-shrink: 0; }
div.shbs .shbs-search {
  all: unset; box-sizing: border-box; flex: 1; min-width: 0;
  font-family: var(--shbs-mono); font-size: 12px;
  color: var(--shbs-ink); letter-spacing: 0.04em; height: var(--shbs-h-control);
}
div.shbs .shbs-search::placeholder { color: var(--shbs-faint); }

/* display:flex collapses the whitespace text nodes around the trigger, which were
   adding 3px of phantom line box under it. */
div.shbs .shbs-facet { position: relative; flex-shrink: 0; display: flex; }
div.shbs .shbs-filters__row > .shbs-facet--right:last-child { flex: 0 0 auto; min-width: 150px; }
div.shbs .shbs-facet__trigger {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  height: var(--shbs-h-control); justify-content: center; padding: 0 14px;
  border-radius: var(--shbs-r-card);
  border: 1px solid var(--shbs-line); background: var(--shbs-panel);
  color: var(--shbs-ink); min-width: 104px;
}
div.shbs .shbs-facet__trigger[data-set='1'] { border-color: var(--shbs-red); color: var(--shbs-red); }
div.shbs .shbs-facet__trigger[aria-expanded='true'] {
  border-color: var(--shbs-red); background: var(--shbs-red-08);
}
div.shbs .shbs-facet__trigger:focus-visible { outline: 2px solid var(--shbs-red); outline-offset: 2px; }
div.shbs .shbs-facet__label {
  font-family: var(--shbs-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs .shbs-facet__value {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--shbs-mono); font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
div.shbs .shbs-facet__value .shbs-caret {
  border-left-width: 4px; border-right-width: 4px; border-top-width: 5px;
  transition: transform .18s;
}

div.shbs .shbs-facet__panel {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 30;
  min-width: 210px; max-height: 290px;
  overflow-y: auto; overflow-x: hidden;
  padding: 7px; border-radius: var(--shbs-r-card);
  border: 1px solid var(--shbs-line); background: var(--shbs-panel2);
  box-shadow: var(--shbs-shadow-panel);
  display: flex; flex-direction: column; gap: 1px;
}
div.shbs .shbs-facet__panel[hidden] { display: none; }
/* The last two facets (Producer, Sort) right-align or their panels leave the viewport. */
div.shbs .shbs-facet--right .shbs-facet__panel { right: 0; left: auto; }

div.shbs .shbs-opt {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: var(--shbs-r-thumb);
  font-family: var(--shbs-mono); font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--shbs-mut);
}
div.shbs .shbs-opt:hover { color: var(--shbs-ink); }
div.shbs .shbs-opt[aria-selected='true'] { color: var(--shbs-red); background: var(--shbs-sel-tint); }
div.shbs .shbs-opt span:first-child { white-space: nowrap; }
/* visibility, not display: a tick that removes itself reflows the row it sits in. */
div.shbs .shbs-opt__tick { font-size: 10px; color: var(--shbs-red); visibility: hidden; flex-shrink: 0; }
div.shbs .shbs-opt[aria-selected='true'] .shbs-opt__tick { visibility: visible; }

/* Active filter chips, hidden entirely when nothing is set. */
div.shbs .shbs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-top: 14px; }
div.shbs .shbs-chip {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--shbs-r-pill);
  border: 1px solid var(--shbs-red-40); background: var(--shbs-red-08);
  font-family: var(--shbs-mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--shbs-red); white-space: nowrap;
}
div.shbs .shbs-chip:hover { background: var(--shbs-sel-tint-strong); }
/* Without nowrap + no-shrink this wraps to two lines with the underline stranded between. */
div.shbs .shbs-clearall {
  all: unset; box-sizing: border-box; cursor: pointer;
  font-family: var(--shbs-mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-faint);
  border-bottom: 1px solid var(--shbs-line);
  white-space: nowrap; flex-shrink: 0;
}
div.shbs .shbs-clearall:hover { color: var(--shbs-ink); }

/* Full-viewport transparent scrim that closes any open facet panel. */
div.shbs .shbs-facet-scrim { position: fixed; inset: 0; z-index: 20; }
div.shbs .shbs-facet-scrim[hidden] { display: none; }

/* --- result meta ----------------------------------------------------------- */

div.shbs .shbs-resultmeta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0 10px;
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs .shbs-resultmeta > span { white-space: nowrap; }
@media (max-width: 720px) { .shbs .shbs-resultmeta__note { display: none; } }

/* --- beat table ------------------------------------------------------------ */

/* 44px 1fr 124px 106px 84px: play · title · "BPM · Key" · price · actions. Tags have no
   column; they ride the title sub-line as text. */
div.shbs .shbs-thead {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 124px 106px 84px;
  gap: 14px; padding: 0 16px 10px;
  font-family: var(--shbs-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--shbs-faint);
  border-bottom: 1px solid var(--shbs-line2);
}
div.shbs .shbs-rows { display: flex; flex-direction: column; }

/* The wrap carries the OPEN state; the inner row carries the PLAYING state. */
div.shbs .shbs-row {
  border-radius: var(--shbs-r-card); overflow: hidden;
  border: 1px solid transparent;
}
div.shbs .shbs-row[data-open='1'] {
  margin-bottom: 8px; border-color: var(--shbs-red-35); background: var(--shbs-red-03);
}
div.shbs .shbs-row__main {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 124px 106px 84px;
  gap: 14px; align-items: center; padding: 11px 16px;
  border-bottom: 1px solid var(--shbs-line2);
  border-radius: var(--shbs-r-row);
}
div.shbs .shbs-row[data-playing='1'] .shbs-row__main {
  border-bottom-color: var(--shbs-red-28); background: var(--shbs-red-05);
}

div.shbs .shbs-play {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  /* The prototype declares 36px but its all:unset resets box-sizing to content-box, so it
     RENDERS at 38px outer with the 1px border. 38px border-box is the same visual. */
  width: 38px; height: 38px; border-radius: 50%; font-size: 11px;
  background: var(--shbs-icon-idle-fill); color: var(--shbs-ink);
  border: 1px solid var(--shbs-line);
}
div.shbs .shbs-play[aria-pressed='true'] {
  background: var(--shbs-red); border-color: var(--shbs-red); color: var(--shbs-bg);
}
div.shbs .shbs-play:focus-visible { outline: 2px solid var(--shbs-red); outline-offset: 2px; }

div.shbs .shbs-titleblock {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left;
}
div.shbs .shbs-titleblock__cover {
  width: 42px; height: 42px; border-radius: 7px; object-fit: cover;
  flex-shrink: 0; border: 1px solid var(--shbs-line); background: var(--shbs-bg2);
}
/* flex:1; min-width:0 or the column shrink-wraps to the title and clips the sub-line. */
div.shbs .shbs-titleblock__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
div.shbs .shbs-titleblock__title {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 800;
  text-transform: uppercase; font-size: 13px; letter-spacing: 0.005em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
div.shbs .shbs-titleblock__sub {
  font-family: var(--shbs-mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--shbs-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

div.shbs .shbs-cell-mono {
  font-family: var(--shbs-mono); font-size: 11px; color: var(--shbs-mut);
  align-self: center; white-space: nowrap;
}
div.shbs .shbs-pricecell { display: flex; flex-direction: column; gap: 3px; align-self: center; }
div.shbs .shbs-pricecell__from {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 800; font-size: 15px;
  white-space: nowrap;
}
div.shbs .shbs-pricecell__student {
  font-family: var(--shbs-mono); font-size: var(--shbs-fs-floor);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--shbs-red); white-space: nowrap;
}

div.shbs .shbs-row__actions {
  display: flex; align-items: center; gap: 7px; align-self: center; justify-content: flex-end;
}
div.shbs .shbs-expand {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; font-size: 9px;
  background: var(--shbs-ink); color: var(--shbs-bg);
}
div.shbs .shbs-expand[aria-expanded='true'] { background: var(--shbs-red); color: var(--shbs-bg); }
div.shbs .shbs-expand .shbs-caret { border-top-color: var(--shbs-bg); }
div.shbs .shbs-expand:focus-visible { outline: 2px solid var(--shbs-red); outline-offset: 2px; }

/* --- row drawer ------------------------------------------------------------ */

div.shbs .shbs-rowdrawer {
  border-top: 1px solid var(--shbs-drawer-rule);
  animation: shbsRise .22s ease both;
}
div.shbs .shbs-rowdrawer[hidden] { display: none; }
div.shbs .shbs-rowdrawer__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px; padding: 20px 18px 22px; align-items: start;
}
@media (max-width: 860px) { .shbs .shbs-rowdrawer__grid { grid-template-columns: minmax(0, 1fr); } }

div.shbs .shbs-rule { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
div.shbs .shbs-rule::after { content: ''; flex: 1; height: 1px; background: var(--shbs-line2); }

/* 182px floor: at 148px this produced three columns and clipped the longer tier names. */
div.shbs .shbs-licenses {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(182px, 1fr)); gap: 8px;
}
div.shbs .shbs-lic {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer; display: block;
  padding: 12px 13px; border-radius: var(--shbs-r-row);
  border: 1px solid var(--shbs-line); background: var(--shbs-panel);
}
div.shbs .shbs-lic[aria-pressed='true'] { border-color: var(--shbs-red); background: var(--shbs-sel-tint); }
div.shbs .shbs-lic__name {
  display: block; font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 800;
  text-transform: uppercase; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
div.shbs .shbs-lic__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px;
}
div.shbs .shbs-lic__price {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 900; font-size: 16px;
}
div.shbs .shbs-lic__cap {
  font-family: var(--shbs-mono); font-size: 8px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--shbs-faint); white-space: nowrap;
}

div.shbs .shbs-rowdrawer__links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
div.shbs .shbs-minor-pill {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-pill);
  padding: 10px 16px; color: var(--shbs-mut); white-space: nowrap;
}
div.shbs .shbs-minor-pill:hover { border-color: var(--shbs-red); color: var(--shbs-red); }
div.shbs .shbs-minor-pill[aria-pressed='true'] { border-color: var(--shbs-red); color: var(--shbs-red); }

div.shbs .shbs-rowdrawer__side { border-left: 1px solid var(--shbs-line2); padding-left: 22px; }
@media (max-width: 860px) { .shbs .shbs-rowdrawer__side { border-left: 0; padding-left: 0; } }
div.shbs .shbs-rowdrawer__wave { height: 44px; display: flex; align-items: center; }
div.shbs .shbs-specrow {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--shbs-line2);
  font-family: var(--shbs-mono); font-size: 10.5px;
}
div.shbs .shbs-specrow__k {
  color: var(--shbs-faint); text-transform: uppercase; font-size: 9px; letter-spacing: 0.14em;
  white-space: nowrap; flex-shrink: 0;
}
div.shbs .shbs-specrow__v { color: var(--shbs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- load more -------------------------------------------------------------- */

div.shbs .shbs-loadmore { display: flex; justify-content: center; padding: 34px 0 60px; }
div.shbs .shbs-loadmore__b {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  font-family: var(--shbs-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-pill);
  padding: 13px 30px; color: var(--shbs-mut); white-space: nowrap;
}
div.shbs .shbs-loadmore__b:hover { border-color: var(--shbs-red); color: var(--shbs-red); }

/* --- waveform ---------------------------------------------------------------- */

div.shbs .shbs-wave { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
div.shbs .shbs-wave__bar {
  flex: 1 1 0; min-width: 1px; border-radius: 1px;
  background: var(--shbs-wave-idle); transform-origin: center;
}
div.shbs .shbs-wave__bar--played { background: var(--shbs-red); }
div.shbs [data-eq='1'] .shbs-wave__bar--played { animation: shbsEq .8s ease-in-out infinite; }

/* --- sticky player ------------------------------------------------------------ */

div.shbs .shbs-player {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--shbs-player-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--shbs-line);
  transform: translateY(100%); 
}
div.shbs .shbs-player[data-open='1'] { transform: none; }
div.shbs .shbs-progress { height: 2px; background: var(--shbs-icon-idle-fill); }
div.shbs .shbs-progress__fill { height: 100%; width: 0; background: var(--shbs-red); }
div.shbs .shbs-player__in {
  max-width: var(--shbs-max); margin: 0 auto;
  padding: 7px var(--shbs-pad-x);
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 20px);
}
div.shbs .shbs-player__play {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--shbs-red); color: var(--shbs-bg); font-size: 11px;
}
div.shbs .shbs-player__cover {
  width: 34px; height: 34px; border-radius: var(--shbs-r-chip); object-fit: cover;
  flex-shrink: 0; border: 1px solid var(--shbs-line);
}
div.shbs .shbs-player__id { min-width: 0; width: clamp(120px, 15vw, 200px); }
div.shbs .shbs-player__title { display: block;
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 800;
  text-transform: uppercase; font-size: 12px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
div.shbs .shbs-player__sub { display: block;
  font-family: var(--shbs-mono); font-size: var(--shbs-fs-floor);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--shbs-faint);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
div.shbs .shbs-player__mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
div.shbs .shbs-player__t {
  font-family: var(--shbs-mono); font-size: 9.5px; color: var(--shbs-faint); flex-shrink: 0;
}
/*
 * The right pill is a LICENCE SWITCHER. Reading "from $100" idle; once the beat is in the
 * cart it turns red and reads the current tier, so switching is one click. Its popover
 * opens upward; the dismissal scrim is a root-level sibling at z-45 (see the template).
 */
div.shbs .shbs-player__licwrap { position: relative; margin-left: 0; flex-shrink: 0; }
div.shbs .shbs-licpill {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  background: var(--shbs-ink); color: var(--shbs-bg);
  padding: 9px 15px; border-radius: var(--shbs-r-pill); white-space: nowrap;
}
div.shbs .shbs-licpill[data-incart='1'] { background: var(--shbs-sel-tint-strong); color: var(--shbs-red); border: 1px solid var(--shbs-red); }
div.shbs .shbs-popover {
  position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 55;
  min-width: 270px; padding: 7px; border-radius: var(--shbs-r-card);
  background: var(--shbs-panel2); border: 1px solid var(--shbs-line);
  box-shadow: var(--shbs-shadow-up);
}
div.shbs .shbs-popover[hidden] { display: none; }
div.shbs .shbs-popscrim { position: fixed; inset: 0; z-index: 45; }
div.shbs .shbs-popscrim[hidden] { display: none; }
@media (max-width: 860px) { .shbs .shbs-player__mid { display: none; } }

/* --- cart: right-side sheet ----------------------------------------------------- */

div.shbs .shbs-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: var(--shbs-scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
div.shbs .shbs-scrim[data-open='1'] { opacity: 1; pointer-events: auto; }

div.shbs .shbs-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: min(480px, 100%);
  display: flex; flex-direction: column;
  background: var(--shbs-bg2); border-left: 1px solid var(--shbs-line);
  box-shadow: var(--shbs-shadow-drawer);
  transform: translateX(100%); 
  visibility: hidden;   /* removes the closed drawer from the tab order too */
}
div.shbs .shbs-drawer[data-open='1'] { transform: none; visibility: visible; }
div.shbs .shbs-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  height: var(--shbs-h-cart-head); padding: 0 20px;
  border-bottom: 1px solid var(--shbs-line); flex-shrink: 0;
}
div.shbs .shbs-drawer__title {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 900;
  text-transform: uppercase; font-size: 16px; line-height: 1; white-space: nowrap;
}
div.shbs .shbs-drawer__n {
  font-family: var(--shbs-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-faint); white-space: nowrap;
}
div.shbs .shbs-close {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--shbs-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--shbs-mut); font-size: 14px;
}
div.shbs .shbs-close:hover { border-color: var(--shbs-red); color: var(--shbs-red); }

/* Pack nudge: outside the scroll region so it stays put while the list scrolls. */
div.shbs .shbs-packbanner {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 20px; height: var(--shbs-h-pack-banner);
  background: var(--shbs-red-10); border-bottom: 1px solid var(--shbs-red-30);
}
div.shbs .shbs-packbanner[hidden] { display: none; }
div.shbs .shbs-packbanner__copy {
  font-family: var(--shbs-mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--shbs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
div.shbs .shbs-packbanner__go {
  font-family: var(--shbs-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  color: var(--shbs-red); flex-shrink: 0; white-space: nowrap;
}

div.shbs .shbs-drawer__items {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 14px 20px; display: flex; flex-direction: column; gap: 10px;
}
div.shbs .shbs-cart-empty {
  border: 1px dashed var(--shbs-line); border-radius: var(--shbs-r-card);
  padding: 44px 20px; text-align: center;
  font-family: var(--shbs-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs .shbs-cartcard {
  border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-card);
  padding: 13px; background: var(--shbs-panel);
}
div.shbs .shbs-cartcard__top {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 13px; align-items: center;
}
div.shbs .shbs-cartcard__cover { width: 52px; height: 52px; border-radius: var(--shbs-r-thumb); object-fit: cover; }
div.shbs .shbs-cartcard__t {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 800;
  text-transform: uppercase; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
div.shbs .shbs-cartcard__p {
  font-family: var(--shbs-mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--shbs-faint);
  margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
div.shbs .shbs-cartcard__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
div.shbs .shbs-cartcard__price {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 900; font-size: 15px;
}
div.shbs .shbs-remove {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--shbs-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--shbs-faint); font-size: 12px;
}
div.shbs .shbs-remove:hover { border-color: var(--shbs-red); color: var(--shbs-red); }

/* Per-item tier switcher: how a licence is changed without leaving the page. */
div.shbs .shbs-tiersw { display: flex; gap: 5px; margin-top: 12px; }
div.shbs .shbs-tiersw__b {
  all: unset; box-sizing: border-box; cursor: pointer;
  flex: 1; min-width: 0; text-align: center;
  padding: 8px 4px; border-radius: 7px;
  font-family: var(--shbs-mono); font-size: var(--shbs-fs-floor);
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--shbs-line); color: var(--shbs-faint); white-space: nowrap;
}
div.shbs .shbs-tiersw__b[aria-pressed='true'] {
  border-color: var(--shbs-red); background: var(--shbs-red-12); color: var(--shbs-red);
}

div.shbs .shbs-drawer__foot {
  flex-shrink: 0; border-top: 1px solid var(--shbs-line);
  padding: 12px 20px 14px; background: var(--shbs-panel);
}
div.shbs .shbs-sumrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 0 0 6px;
  font-family: var(--shbs-mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs .shbs-sumrow__v { font-family: var(--shbs-mono); font-size: 11px; color: var(--shbs-mut); }
div.shbs .shbs-sumrow--discount .shbs-sumrow__v { color: var(--shbs-red); }
div.shbs .shbs-sumrow--total {
  border-top: 1px solid var(--shbs-line); padding: 8px 0 0;
  font-size: 10px; color: var(--shbs-ink);
}
div.shbs .shbs-sumrow--total .shbs-sumrow__v {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 900; font-size: 17px;
  color: var(--shbs-ink);
}
div.shbs .shbs-checkout {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: block; width: 100%; margin-top: 11px; text-align: center;
  font-family: var(--shbs-mono); font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  background: var(--shbs-red); color: var(--shbs-bg);
  padding: 12px; border-radius: var(--shbs-r-pill); white-space: nowrap;
}
div.shbs .shbs-checkout[hidden] { display: none; }
div.shbs .shbs-payrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px;
}
div.shbs .shbs-payrow[hidden] { display: none; }
div.shbs .shbs-payrow__note {
  font-family: var(--shbs-mono); font-size: var(--shbs-fs-floor);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--shbs-faint);
  white-space: nowrap; flex-shrink: 0;   /* exact fit at natural width; ellipsizes without */
}
div.shbs .shbs-payrow__link {
  all: unset; box-sizing: border-box; cursor: pointer; flex-shrink: 0;
  font-family: var(--shbs-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-red);
  border-bottom: 1px solid var(--shbs-red-40); white-space: nowrap;
}

/* --- beat detail page ------------------------------------------------------------ */

div.shbs .shbs-back {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-block;
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--shbs-faint);
  margin-bottom: 24px;
}
div.shbs .shbs-back:hover { color: var(--shbs-red); }

div.shbs .shbs-beat__grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 54px); align-items: start;
}
@media (max-width: 860px) { .shbs .shbs-beat__grid { grid-template-columns: minmax(0, 1fr); } }

div.shbs .shbs-beat__coverwrap {
  position: relative; border-radius: var(--shbs-r-media); overflow: hidden;
  border: 1px solid var(--shbs-line);
}
div.shbs .shbs-beat__coverwrap img { width: 100%; aspect-ratio: 1; object-fit: cover; }
div.shbs .shbs-beat__playover {
  all: unset; box-sizing: border-box; cursor: pointer;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--shbs-play-scrim);
}
div.shbs .shbs-beat__playover:hover { background: var(--shbs-play-scrim-h); }
div.shbs .shbs-beat__playbtn {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--shbs-red); color: var(--shbs-bg); font-size: 22px;
  box-shadow: 0 0 50px var(--shbs-play-glow);
}
div.shbs .shbs-beat__detail {
  margin-top: 16px; padding: 16px;
  border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-card);
  background: var(--shbs-panel);
}
div.shbs .shbs-beat__eyebrow {
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--shbs-red); margin-bottom: 12px;
}
div.shbs .shbs-beat__h1 {
  font-size: clamp(30px, 4vw, 58px); line-height: .88; letter-spacing: -.015em;
}
div.shbs .shbs-tagchip {
  font-family: var(--shbs-mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--shbs-mut);
  border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-pill); padding: 5px 12px;
}
div.shbs .shbs-beat__wavepanel {
  margin-top: 22px; padding: 18px;
  border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-card); background: var(--shbs-bg2);
  height: 94px; display: flex; align-items: center;
}
div.shbs .shbs-beat__lichead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 32px 0 14px;
}
div.shbs .shbs-compare {
  all: unset; box-sizing: border-box; cursor: pointer;
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-red); white-space: nowrap;
}
div.shbs .shbs-compare:hover { color: var(--shbs-red2); }

div.shbs .shbs-licrows { display: flex; flex-direction: column; gap: 9px; }
div.shbs .shbs-licrow {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 18px; border-radius: var(--shbs-r-card);
  border: 1px solid var(--shbs-line); background: var(--shbs-panel);
}
div.shbs .shbs-licrow[aria-checked='true'] { border-color: var(--shbs-red); background: var(--shbs-red-07); }
div.shbs .shbs-licrow__id { display: flex; flex-direction: column; gap: 5px; text-align: left; min-width: 0; }
div.shbs .shbs-licrow__name {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 800;
  text-transform: uppercase; font-size: 14px;
}
div.shbs .shbs-licrow__badge {
  font-family: var(--shbs-mono); font-size: 8px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-red);
  border: 1px solid var(--shbs-red-45); border-radius: var(--shbs-r-pill);
  padding: 3px 8px; font-weight: 400; white-space: nowrap;
}
div.shbs .shbs-licrow__files {
  font-family: var(--shbs-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--shbs-faint);
}
div.shbs .shbs-licrow__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
div.shbs .shbs-licrow__price {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 900; font-size: 19px;
}
div.shbs .shbs-licrow__cap {
  font-family: var(--shbs-mono); font-size: var(--shbs-fs-floor);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs .shbs-beat__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
div.shbs .shbs-beat__addcta { flex: 1; min-width: 200px; text-align: center; padding: 16px 24px; }
div.shbs .shbs-fineprint {
  margin-top: 14px;
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--shbs-faint); line-height: 1.7;
}

/* --- licenses page ---------------------------------------------------------------- */

div.shbs .shbs-lics__intro { max-width: 62ch; }
div.shbs .shbs-lics__h1 { margin: 12px 0 0; font-size: clamp(28px, 3.6vw, 52px); line-height: .88; }
div.shbs .shbs-lics__p { margin: 14px 0 0; color: var(--shbs-mut); font-size: 15px; line-height: 1.6; }

div.shbs .shbs-lictable {
  margin-top: 34px; overflow-x: auto;
  border: 1px solid var(--shbs-line); border-radius: 14px;
}
div.shbs .shbs-lictable__in { min-width: 900px; }
div.shbs .shbs-lictable__head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(5, minmax(0, 1fr));
  gap: 16px; padding: 20px 22px;
  border-bottom: 1px solid var(--shbs-line); background: var(--shbs-bg2); align-items: end;
}
div.shbs .shbs-lictable__tier { display: flex; flex-direction: column; gap: 6px; }
div.shbs .shbs-lictable__tiername {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 900;
  text-transform: uppercase; font-size: 14px;
}
div.shbs .shbs-lictable__tiername--exclusive { color: var(--shbs-red); }
div.shbs .shbs-lictable__tierprice { font-family: var(--shbs-mono); font-size: 15px; color: var(--shbs-ink); }
div.shbs .shbs-lictable__row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(5, minmax(0, 1fr));
  gap: 16px; padding: 15px 22px; align-items: center;
  border-bottom: 1px solid var(--shbs-line2);
}
div.shbs .shbs-lictable__row:nth-child(odd) { background: var(--shbs-row-alt); }
div.shbs .shbs-lictable__k {
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs .shbs-lictable__c { font-family: var(--shbs-mono); font-size: 11.5px; color: var(--shbs-mut); letter-spacing: 0.03em; }
div.shbs .shbs-lictable__c--none { color: var(--shbs-faint); }
div.shbs .shbs-lictable__c--exclusive { color: var(--shbs-red2); }

div.shbs .shbs-liccards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-top: 22px;
}
div.shbs .shbs-liccard {
  border: 1px solid var(--shbs-line); border-radius: 14px; padding: 22px; background: var(--shbs-panel);
}
div.shbs .shbs-liccard--exclusive {
  border-color: var(--shbs-red);
  background: linear-gradient(135deg, var(--shbs-red-08), transparent 65%);
}
div.shbs .shbs-liccard__name {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 900;
  text-transform: uppercase; font-size: 20px;
}
div.shbs .shbs-liccard__copy {
  font-family: var(--shbs-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--shbs-mut); margin-top: 10px; line-height: 1.7;
}
div.shbs .shbs-liccard__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
div.shbs .shbs-liccard__price {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 900; font-size: 28px;
}
div.shbs .shbs-smallcta {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  font-family: var(--shbs-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 18px; border-radius: var(--shbs-r-pill); white-space: nowrap;
}
div.shbs .shbs-smallcta--red { background: var(--shbs-red); color: var(--shbs-bg); font-weight: 700; }
div.shbs .shbs-smallcta--red:hover { background: var(--shbs-red2); }
div.shbs .shbs-smallcta--line { border: 1px solid var(--shbs-line); color: var(--shbs-ink); }
div.shbs .shbs-smallcta--line:hover { border-color: var(--shbs-red); color: var(--shbs-red); }

/* --- vault ------------------------------------------------------------------------- */

div.shbs .shbs-vault__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px;
}
div.shbs .shbs-vault__h1 { margin: 12px 0 0; font-size: clamp(28px, 3.6vw, 52px); line-height: .9; }
div.shbs .shbs-vault__stats { display: flex; gap: 10px; flex-wrap: wrap; }
div.shbs .shbs-vaultstat {
  border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-card);
  padding: 14px 18px; background: var(--shbs-panel); min-width: 118px;
}
div.shbs .shbs-vaultstat__v {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 900; font-size: 24px;
}
div.shbs .shbs-vaultstat__k {
  font-family: var(--shbs-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-faint); margin-top: 5px;
}
div.shbs .shbs-orders { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
div.shbs .shbs-order {
  border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-card);
  background: var(--shbs-panel); overflow: hidden;
}
div.shbs .shbs-order__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--shbs-line2);
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs .shbs-order__meta .total { color: var(--shbs-ink); }
div.shbs .shbs-order__body {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 150px auto auto;
  gap: 14px; align-items: center; padding: 16px 18px;
}
div.shbs .shbs-order__cover { width: 52px; height: 52px; border-radius: 7px; object-fit: cover; }
div.shbs .shbs-order__title {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-stretch: 125%; font-weight: 800;
  text-transform: uppercase; font-size: 14px;
}
div.shbs .shbs-order__producer {
  font-family: var(--shbs-mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--shbs-faint); margin-top: 5px;
}
div.shbs .shbs-order__lic {
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--shbs-red);
  border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-pill);
  padding: 5px 11px; justify-self: start; white-space: nowrap;
}
div.shbs .shbs-order__dl {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  background: var(--shbs-ink); color: var(--shbs-bg);
  padding: 10px 16px; border-radius: var(--shbs-r-pill); white-space: nowrap;
}
div.shbs .shbs-order__dl:hover { background: var(--shbs-red); }
div.shbs .shbs-order__pdf {
  all: unset; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  font-family: var(--shbs-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--shbs-line); color: var(--shbs-mut);
  padding: 10px 16px; border-radius: var(--shbs-r-pill); white-space: nowrap;
}
div.shbs .shbs-order__pdf:hover { border-color: var(--shbs-red); color: var(--shbs-red); }

/* --- shared page shell + empty state ---------------------------------------------- */

div.shbs .shbs-page { max-width: var(--shbs-max); margin: 0 auto; padding: var(--shbs-pad-y) var(--shbs-pad-x) 70px; }
div.shbs .shbs-empty {
  border: 1px dashed var(--shbs-line); border-radius: var(--shbs-r-card);
  padding: 44px 20px; text-align: center; margin-top: 16px;
  font-family: var(--shbs-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shbs-faint);
}

@media (max-width: 900px) {
  div.shbs .shbs-thead { display: none; }
  div.shbs .shbs-row__main { grid-template-columns: 44px minmax(0, 1fr) auto; }
  div.shbs .shbs-row__bpmkey, div.shbs .shbs-row__price { display: none; }
  div.shbs .shbs-order__body { grid-template-columns: 52px minmax(0, 1fr); }
  div.shbs .shbs-order__lic, div.shbs .shbs-order__dl, div.shbs .shbs-order__pdf { justify-self: start; }
}

/* audience code row in the cart sheet */
div.shbs .shbs-coderow { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }
div.shbs .shbs-coderow__in {
  all: unset; box-sizing: border-box; flex: 1; min-width: 0; height: 36px; padding: 0 12px;
  background: var(--shbs-panel); border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-pill);
  font-family: var(--shbs-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--shbs-ink);
}
div.shbs .shbs-coderow__in::placeholder { color: var(--shbs-faint); text-transform: none; letter-spacing: 0; }
div.shbs .shbs-coderow__btn {
  all: unset; box-sizing: border-box; cursor: pointer; height: 36px; padding: 0 14px; border-radius: var(--shbs-r-pill);
  border: 1px solid var(--shbs-line); font-family: var(--shbs-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--shbs-ink);
}
div.shbs .shbs-coderow__on { font-family: var(--shbs-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--shbs-ok); white-space: nowrap; }
div.shbs .shbs-pricecell__partner { color: var(--shbs-ok); }

/* Header hover states, measured from the prototype. */
div.shbs .shbs-cart-btn:hover { color: var(--shbs-red); border-color: var(--shbs-red); }
div.shbs .shbs-signin:hover { background: var(--shbs-red); }

/* An element the markup marks hidden must stay hidden: our own display rules
   (flex/grid) otherwise outrank the user-agent's [hidden] { display: none }. */
div.shbs [hidden] { display: none !important; }

/* A placed beat cannot be bought: the player's pill says so and stops reacting. */
div.shbs .shbs-licpill[data-off='1'] { color: var(--shbs-faint); border-color: var(--shbs-line); background: transparent; cursor: default; }
div.shbs .shbs-licpill:not([data-incart='1']):not([data-off='1']):hover { background: var(--shbs-red2); }

/* Measured against the prototype: the transport hides below 860px rather than collapsing. */
@media (max-width: 860px) {
  div.shbs .shbs-player__mid { display: none; }
  div.shbs .shbs-player__id { flex-shrink: 0; }
}

/* Only "Add more" acts; the banner copy is inert, as the prototype has it. */
div.shbs .shbs-packbanner__go { all: unset; box-sizing: border-box; cursor: pointer; }

div.shbs .shbs-licpill { display: inline-flex; align-items: center; }