/**
 * Drops storefront - only what a drop adds to the beatstore shell. Values transcribed from
 * the rendered Drops prototype (computed styles, not prose). No raw colours or fonts:
 * every value is a token, so the skin is tokens.css and nothing else.
 *
 * Scoped under div.shbs--drops so nothing here can leak into the classic store.
 */

/* ---------------------------------------------------------------- header */
/* The Drops header is the same 75px bar, with tighter tab pills and gap (measured). */
div.shbs--drops .shbs-header__in { gap: 22px; padding: 0 var(--shbs-drops-gutter); }
div.shbs--drops .shbs-in { padding-left: var(--shbs-drops-gutter); padding-right: var(--shbs-drops-gutter); }
div.shbs--drops { --shbs-drops-gutter: clamp(16px, 3vw, 40px); }
div.shbs--drops .shbs-tab { padding: 9px 11px; }

/* ------------------------------------------------------------------ hero */
div.shbs--drops .shbs-drops-hero {
  overflow: hidden;
  border-bottom: 1px solid var(--shbs-line);
  background: linear-gradient(180deg, var(--shbs-bg2), var(--shbs-bg));
}
div.shbs--drops .shbs-drops-hero__grid {
  display: grid; grid-template-columns: 3fr 2fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(26px, 4vw, 48px) var(--shbs-drops-gutter);
  border-top: 1px solid var(--shbs-line2);
  animation: shbsRise .26s ease both;
}
div.shbs--drops .shbs-drops-hero__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
div.shbs--drops .shbs-drops-eyebrow {
  font-family: var(--shbs-mono); font-size: 10px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--shbs-red);
}
div.shbs--drops .shbs-drops-state {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: var(--shbs-r-pill);
  font-family: var(--shbs-mono); font-size: 8.5px; letter-spacing: 1.02px; text-transform: uppercase;
  color: var(--shbs-ok); background: var(--shbs-ok-08); border: 1px solid var(--shbs-ok-35);
}
div.shbs--drops .shbs-drops-state .shbs-dot { background: currentColor; }
div.shbs--drops .shbs-drops-state--scheduled,
div.shbs--drops .shbs-drops-state--draft { color: var(--shbs-warn); background: var(--shbs-warn-05); border-color: var(--shbs-warn-35); }
div.shbs--drops .shbs-drops-state--closed,
div.shbs--drops .shbs-drops-state--archived { color: var(--shbs-faint); background: transparent; border-color: var(--shbs-line-14); }

div.shbs--drops .shbs-drops-h1 {
  margin: 0; font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-weight: 900; font-size: clamp(34px, 5vw, 72px); line-height: 0.86;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--shbs-ink); overflow-wrap: anywhere;
}
div.shbs--drops .shbs-drops-lede {
  margin: 18px 0 0; max-width: 533px; font-family: var(--shbs-body); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.6; color: var(--shbs-mut);
}
div.shbs--drops .shbs-drops-lede em, div.shbs--drops .shbs-drops-lede strong { color: var(--shbs-ink); font-style: normal; font-weight: 400; }
div.shbs--drops .shbs-drops-ctas { display: flex; gap: 10px; margin-top: 24px; }
div.shbs--drops .shbs-drops-cta {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--shbs-r-pill);
  font-family: var(--shbs-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
div.shbs--drops .shbs-drops-cta--red { background: var(--shbs-red); color: var(--shbs-bg); }
div.shbs--drops .shbs-drops-cta--line { background: transparent; color: var(--shbs-ink); border: 1px solid var(--shbs-line); }
div.shbs--drops .shbs-drops-cta--red:hover { background: var(--shbs-red2); }
div.shbs--drops .shbs-drops-cta--line:hover { border-color: var(--shbs-red); color: var(--shbs-red); }
/* The vault's two button treatments: cream primary, and a muted ghost. */
div.shbs--drops .shbs-drops-cta--ink { background: var(--shbs-ink); color: var(--shbs-bg); border: 1px solid var(--shbs-ink); }
div.shbs--drops .shbs-drops-cta--ink:hover { background: var(--shbs-red); border-color: var(--shbs-red); color: var(--shbs-bg); }
div.shbs--drops .shbs-drops-cta--ghost { background: transparent; color: var(--shbs-mut); border: 1px solid var(--shbs-line); font-weight: 400; }
div.shbs--drops .shbs-drops-cta--ghost:hover { border-color: var(--shbs-red); color: var(--shbs-red); }
div.shbs--drops .shbs-drops-cta--sm { padding: 10px 16px; font-size: 10px; letter-spacing: 1.2px; }
div.shbs--drops .shbs-drops-cta:disabled { opacity: 0.5; cursor: default; }

/* tape card */
div.shbs--drops .shbs-tapecard {
  background: var(--shbs-panel); border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-card); padding: clamp(20px, 1.5vw, 22px) clamp(20px, 1.5vw, 22px) clamp(22px, 1.6vw, 24px);
  min-width: 0;
}
div.shbs--drops .shbs-drops-hero__copy { min-width: 0; }
div.shbs--drops .shbs-tapecard__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; white-space: nowrap; }
div.shbs--drops .shbs-tapecard__head .shbs-tapecard__k:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
div.shbs--drops .shbs-tapecard__k {
  font-family: var(--shbs-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs--drops .shbs-tapecard__k--closes { font-size: 9.5px; letter-spacing: 0.95px; color: var(--shbs-mut); }
div.shbs--drops .shbs-tapecard__num { display: flex; align-items: baseline; gap: 9px; }
div.shbs--drops .shbs-tapecard__big { font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-weight: 900; font-size: 46px; line-height: 1; color: var(--shbs-ink); }
div.shbs--drops .shbs-tapecard__of { font-family: var(--shbs-mono); font-size: 11px; letter-spacing: 1.32px; text-transform: uppercase; color: var(--shbs-faint); }
div.shbs--drops .shbs-tapecard__track { height: 6px; margin: 16px 0 14px; border-radius: var(--shbs-r-pill); background: var(--shbs-line-07); overflow: hidden; }
div.shbs--drops .shbs-tapecard__fill { height: 100%; border-radius: var(--shbs-r-pill); background: var(--shbs-red); }
div.shbs--drops .shbs-tapecard__fine {
  margin: 0; font-family: var(--shbs-mono); font-size: 8.5px; letter-spacing: 0.9px; line-height: 1.85; text-transform: uppercase; color: var(--shbs-faint);
}

/* ----------------------------------------------------------------- board */
div.shbs--drops .shbs-board { padding-top: clamp(22px, 3vw, 34px); padding-bottom: 60px; }
div.shbs--drops .shbs-board__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
div.shbs--drops .shbs-board__search {
  display: flex; align-items: center; gap: 10px; width: 320px; height: 42px; padding: 0 16px;
  background: var(--shbs-panel); border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-pill);
  color: var(--shbs-faint); font-family: var(--shbs-mono); font-size: 12px;
}
div.shbs--drops .shbs-board__search input {
  all: unset; flex: 1; min-width: 0; height: 100%; font-family: var(--shbs-mono); font-size: 12px; letter-spacing: 0.48px; color: var(--shbs-ink);
}
div.shbs--drops .shbs-board__search input::placeholder { color: var(--shbs-faint); }
div.shbs--drops .shbs-board__note { font-family: var(--shbs-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--shbs-faint); }

div.shbs--drops .shbs-board__head,
div.shbs--drops .shbs-brow {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 124px 128px 92px; gap: 0 14px; align-items: center;
}
div.shbs--drops .shbs-board__head {
  padding: 14px 16px 10px; border-bottom: 1px solid var(--shbs-line);
  font-family: var(--shbs-mono); font-size: 9px; letter-spacing: 1.62px; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs--drops .shbs-board__head > span:nth-child(2) { padding-left: 6px; }
div.shbs--drops .shbs-brow {
  position: relative; padding: 11px 16px; border-radius: var(--shbs-r-row);
  border: 1px solid transparent; border-bottom: 1px solid var(--shbs-line2);
  grid-template-areas: "play title meta status actions";
}
div.shbs--drops .shbs-brow > .shbs-play { grid-area: play; width: 38px; height: 38px; box-sizing: border-box; font-size: 11px; }
div.shbs--drops .shbs-brow__titlebtn { all: unset; box-sizing: border-box; cursor: pointer; }
div.shbs--drops .shbs-brow__title { grid-area: title; display: flex; align-items: center; gap: 12px; min-width: 0; padding-left: 6px; }
div.shbs--drops .shbs-brow__meta { grid-area: meta; }
div.shbs--drops .shbs-brow__status { grid-area: status; }
div.shbs--drops .shbs-brow__actions { grid-area: actions; }
div.shbs--drops .shbs-brow[data-playing="1"] { background: var(--shbs-red-05); border-bottom-color: var(--shbs-red-28); }
div.shbs--drops .shbs-brow[data-playing="1"] > .shbs-play {
  background: var(--shbs-red); border-color: var(--shbs-red); color: var(--shbs-bg);
}
div.shbs--drops .shbs-brow__cover {
  width: 42px; height: 42px; border-radius: calc(var(--shbs-r-thumb) - 1px); border: 1px solid var(--shbs-line); object-fit: cover; flex-shrink: 0;
  background: transparent; display: block;
}
div.shbs--drops span.shbs-brow__cover { background: var(--shbs-panel2); }
div.shbs--drops .shbs-brow__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
div.shbs--drops .shbs-brow__t {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-weight: 800; font-size: 13px; line-height: 1.1; letter-spacing: 0.005em; text-transform: uppercase; color: var(--shbs-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
div.shbs--drops .shbs-brow__s { font-family: var(--shbs-mono); font-size: 9.5px; letter-spacing: 1.14px; text-transform: uppercase; color: var(--shbs-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.shbs--drops .shbs-brow__meta { font-family: var(--shbs-mono); font-size: 11px; color: var(--shbs-mut); }
div.shbs--drops .shbs-drops-pill {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--shbs-r-pill);
  font-family: var(--shbs-mono); font-size: 8.5px; letter-spacing: 1.02px; text-transform: uppercase;
}
div.shbs--drops .shbs-drops-pill--open { color: var(--shbs-ok); background: var(--shbs-ok-08); border: 1px solid var(--shbs-ok-30); }
div.shbs--drops .shbs-drops-pill--placed { color: var(--shbs-faint); background: transparent; border: 1px solid var(--shbs-line-14); }
div.shbs--drops .shbs-brow__actions { display: flex; gap: 7px; justify-content: flex-end; }
div.shbs--drops .shbs-brow__add, div.shbs--drops .shbs-brow__chev {
  all: unset; box-sizing: border-box; cursor: pointer; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--shbs-body); font-size: 13px;
}
div.shbs--drops .shbs-brow__add { color: var(--shbs-mut); border: 1px solid var(--shbs-line-14); }
div.shbs--drops .shbs-brow__add[data-incart="1"] { color: var(--shbs-red); background: var(--shbs-red-12); border-color: var(--shbs-red); }
div.shbs--drops .shbs-brow__add--off { color: var(--shbs-faint); border-color: var(--shbs-line-07); cursor: default; }
div.shbs--drops .shbs-brow__chev { background: var(--shbs-ink); color: var(--shbs-bg); font-size: 16px; }
div.shbs--drops .shbs-brow__chev .shbs-caret { border-top-color: var(--shbs-bg); }
/* placed rows step back */
div.shbs--drops .shbs-brow[data-placed="1"] .shbs-brow__t { color: var(--shbs-faint); }
div.shbs--drops .shbs-brow[data-placed="1"] { opacity: 0.75; }
div.shbs--drops .shbs-brow[data-placed="1"] .shbs-brow__cover { filter: grayscale(0.7) brightness(0.7); }
div.shbs--drops .shbs-brow[data-placed="1"] .shbs-brow__chev { background: var(--shbs-panel2); }
div.shbs--drops .shbs-brow[data-placed="1"] .shbs-brow__chev .shbs-caret { border-top-color: var(--shbs-mut); }
div.shbs--drops .shbs-brow[data-hidden="1"] { display: none; }

/* ------------------------------------------------------------ how / archive / vault */
div.shbs--drops .shbs-how, div.shbs--drops .shbs-archive, div.shbs--drops .shbs-dvault { padding-top: 44px; padding-bottom: 70px; }
div.shbs--drops .shbs-how__h1, div.shbs--drops .shbs-archive__h1, div.shbs--drops .shbs-dvault__h1 { font-size: clamp(30px, 3.9vw, 56px); margin-top: 12px; }
div.shbs--drops .shbs-how__h1 { font-size: clamp(30px, 3.6vw, 52px); line-height: 0.88; max-width: 640px; }
div.shbs--drops .shbs-how__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
div.shbs--drops .shbs-how__step { background: var(--shbs-panel); border: 1px solid var(--shbs-line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
div.shbs--drops .shbs-how__n { font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-weight: 900; font-size: 28px; letter-spacing: normal; color: var(--shbs-red); }
div.shbs--drops .shbs-how__t { font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-weight: 800; font-size: 15px; text-transform: uppercase; color: var(--shbs-ink); }
div.shbs--drops .shbs-how__p { margin: 0; font-family: var(--shbs-mono); font-size: 10px; line-height: 17px; letter-spacing: 0.4px; color: var(--shbs-mut); }
div.shbs--drops .shbs-how__fine {
  margin: 14px 0 0; max-width: 900px; padding: 20px 22px;
  background: var(--shbs-bg2); border: 1px solid var(--shbs-line); border-radius: 14px;
  font-family: var(--shbs-mono); font-size: 10px; line-height: 18px; letter-spacing: 0.5px; color: var(--shbs-faint);
}

div.shbs--drops .shbs-tape { margin-top: 30px; background: var(--shbs-panel); border: 1px solid var(--shbs-line); border-radius: 14px; padding: 0; overflow: hidden; }
div.shbs--drops .shbs-tape__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--shbs-line2); }
div.shbs--drops .shbs-tape__name { margin: 0; font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-weight: 900; font-size: 19px; text-transform: uppercase; color: var(--shbs-ink); }
div.shbs--drops .shbs-tape__meta { display: block; margin-top: 6px; font-family: var(--shbs-mono); font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--shbs-faint); }
div.shbs--drops .shbs-tape__row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 10px 22px; border-bottom: 1px solid var(--shbs-line-04); }
div.shbs--drops .shbs-tape__art { width: 38px; height: 38px; border-radius: 6px; border: 1px solid var(--shbs-line); object-fit: cover; background: var(--shbs-panel2); display: block; }
div.shbs--drops .shbs-tape__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
div.shbs--drops .shbs-tape__rec { font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--shbs-ink); }
div.shbs--drops .shbs-tape__cut { font-family: var(--shbs-mono); font-size: 9.5px; letter-spacing: 1.14px; text-transform: uppercase; color: var(--shbs-faint); }
div.shbs--drops .shbs-tape__on { justify-self: end; font-family: var(--shbs-mono); font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--shbs-ok); }
div.shbs--drops .shbs-tape__foot { padding: 14px 22px; font-family: var(--shbs-mono); font-size: 9px; letter-spacing: 0.9px; text-transform: uppercase; color: var(--shbs-faint); }

div.shbs--drops .shbs-dlic { margin-top: 10px; background: var(--shbs-panel); border: 1px solid var(--shbs-line); border-radius: var(--shbs-r-card); padding: 16px 20px 18px; }
div.shbs--drops .shbs-dlic__top { display: flex; justify-content: space-between; font-family: var(--shbs-mono); font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--shbs-faint); }
div.shbs--drops .shbs-dlic__price { color: var(--shbs-ink); font-size: 12px; letter-spacing: 0; }
div.shbs--drops .shbs-dlic__body { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 12px; }
div.shbs--drops .shbs-dlic__art { width: 52px; height: 52px; border-radius: 7px; object-fit: cover; background: var(--shbs-panel2); display: block; }
div.shbs--drops .shbs-dlic__id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
div.shbs--drops .shbs-dlic__beat { font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-weight: 800; font-size: 14px; text-transform: uppercase; color: var(--shbs-ink); }
div.shbs--drops .shbs-dlic__state { display: flex; flex-direction: row; align-items: center; gap: 8px; }
div.shbs--drops .shbs-dlic__k { font-family: var(--shbs-mono); font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--shbs-faint); }
div.shbs--drops .shbs-dlic__v { font-family: var(--shbs-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--shbs-mut); }
/* Measured: the LABEL is the coloured word (amber = nothing sent yet, green = on the
   tape, muted = submitted) and the value beside it stays faint. It was inverted. */
div.shbs--drops .shbs-dlic[data-state="none"] .shbs-dlic__k { color: var(--shbs-warn); }
div.shbs--drops .shbs-dlic[data-state="submitted"] .shbs-dlic__k { color: var(--shbs-mut); }
div.shbs--drops .shbs-dlic[data-state="placed"] .shbs-dlic__k { color: var(--shbs-ok); }
div.shbs--drops .shbs-dlic[data-state="passed"] .shbs-dlic__k { color: var(--shbs-warn); }
div.shbs--drops .shbs-dlic__v { color: var(--shbs-faint); }
div.shbs--drops .shbs-dlic__ctas { display: flex; gap: 8px; justify-content: flex-end; }
div.shbs--drops .shbs-dvault__fine { margin: 16px 0 0; font-family: var(--shbs-mono); font-size: 9.5px; line-height: 16.15px; letter-spacing: 0.95px; text-transform: uppercase; color: var(--shbs-faint); }

/* cart drawer additions */
div.shbs--drops .shbs-drops-slotnote { margin-top: 12px; font-family: var(--shbs-mono); font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--shbs-faint); text-align: center; }
div.shbs--drops .shbs-checkout [data-shbs-buy-total]::before { content: " · "; }

@media (max-width: 1100px) {
  div.shbs--drops .shbs-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* The nav must never be clipped out of reach: let it scroll instead. */
  div.shbs--drops .shbs-header__in { gap: 12px; }
  div.shbs--drops .shbs-tabs { overflow-x: auto; scrollbar-width: none; min-width: 0; }
  div.shbs--drops .shbs-tabs::-webkit-scrollbar { display: none; }
  div.shbs--drops .shbs-board__head { display: none; }
  div.shbs--drops .shbs-brow { grid-template-columns: 38px minmax(0, 1fr) 78px; grid-template-areas: "play title actions" "meta meta meta" "status status status"; }
  div.shbs--drops .shbs-how__steps { grid-template-columns: minmax(0, 1fr); }
  div.shbs--drops .shbs-dlic__body { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------- the information panel
 * A SIBLING of the row, not a child: the row keeps its 65px and the panel rises
 * underneath it (0.22s, fade + 10px lift), exactly as the prototype does.
 */
div.shbs--drops .shbs-brow[data-shbs-rowtoggle] { cursor: pointer; }
div.shbs--drops .shbs-brow[aria-expanded="true"] { border-bottom-color: transparent; }
div.shbs--drops .shbs-brow[aria-expanded="true"] .shbs-brow__chev { background: var(--shbs-red); }
div.shbs--drops .shbs-brow[aria-expanded="true"] .shbs-brow__chev .shbs-caret { transform: rotate(180deg); }

/* An open row and its panel read as one tinted block, as the prototype does. */
div.shbs--drops .shbs-brow[aria-expanded="true"] {
  background: var(--shbs-red-03);
  border: 1px solid var(--shbs-red-35); border-bottom-color: transparent;
  border-radius: var(--shbs-r-card) var(--shbs-r-card) 0 0;
}
div.shbs--drops .shbs-bdrawer {
  background: var(--shbs-red-03);
  border: 1px solid var(--shbs-red-35); border-top: 0;
  border-radius: 0 0 var(--shbs-r-card) var(--shbs-r-card);
  margin-bottom: 8px; overflow: hidden;
  animation: shbsRise .22s both;
}
div.shbs--drops .shbs-bdrawer__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; padding: 20px 18px 22px;
}
div.shbs--drops .shbs-bdrawer__card {
  border: 1px solid var(--shbs-red-40); border-radius: var(--shbs-r-card); padding: 18px;
}
div.shbs--drops .shbs-bdrawer__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
div.shbs--drops .shbs-bdrawer__lic {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-weight: 900; font-size: 16px;
  text-transform: uppercase; color: var(--shbs-ink);
}
div.shbs--drops .shbs-bdrawer__price {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-weight: 900; font-size: 24px; color: var(--shbs-ink);
}
div.shbs--drops .shbs-bdrawer__lines { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
div.shbs--drops .shbs-bdrawer__line {
  display: flex; gap: 9px; font-family: var(--shbs-mono); font-size: 9.5px; letter-spacing: 0.475px; color: var(--shbs-mut);
}
div.shbs--drops .shbs-bdrawer__arrow { color: var(--shbs-red); flex-shrink: 0; }
div.shbs--drops .shbs-bdrawer__cta {
  all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; margin-top: 16px;
  padding: 12px 13px; border-radius: var(--shbs-r-pill); text-align: center;
  background: var(--shbs-red); color: var(--shbs-bg); border: 1px solid var(--shbs-red);
  font-family: var(--shbs-mono); font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: 1.32px; text-transform: uppercase;
}
div.shbs--drops .shbs-bdrawer__cta[data-incart="1"] { background: var(--shbs-red-10); color: var(--shbs-red); }
div.shbs--drops .shbs-bdrawer__placed { margin-top: 16px; display: flex; flex-direction: column; gap: 5px; }
div.shbs--drops .shbs-bdrawer__placedk {
  font-family: var(--shbs-mono); font-size: 9px; letter-spacing: 1.26px; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs--drops .shbs-bdrawer__placedv {
  font-family: var(--shbs-mono); font-size: 10.5px; text-transform: uppercase; color: var(--shbs-mut);
}
div.shbs--drops .shbs-bdrawer__side { padding-left: 22px; min-width: 0; }
div.shbs--drops .shbs-bdrawer__wave { height: 44px; margin-bottom: 6px; }
div.shbs--drops .shbs-bdrawer__spec {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0;
}
div.shbs--drops .shbs-bdrawer__speck {
  font-family: var(--shbs-mono); font-size: 9px; letter-spacing: 1.26px; text-transform: uppercase; color: var(--shbs-faint); flex-shrink: 0;
}
div.shbs--drops .shbs-bdrawer__specv {
  font-family: var(--shbs-mono); font-size: 10.5px; color: var(--shbs-ink); text-align: right; min-width: 0;
}

}

@media (max-width: 860px) {
  div.shbs--drops .shbs-bdrawer__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  div.shbs--drops .shbs-bdrawer__side { padding-left: 0; }
}
div.shbs--drops .shbs-bdrawer[data-hidden="1"] { display: none; }

/* ------------------------------------------------------ the collapsible hero
 * Open by default (the page at rest is the prototype). Collapsed, the bar alone
 * carries the drop's identity and progress, and the board gets the viewport.
 */
div.shbs--drops .shbs-drops-herobar {
  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--drops .shbs-drops-herobar__l,
div.shbs--drops .shbs-drops-herobar__r { display: flex; align-items: center; min-width: 0; }
div.shbs--drops .shbs-drops-herobar__l { gap: 14px; }
div.shbs--drops .shbs-drops-herobar__r { gap: 13px; }
div.shbs--drops .shbs-drops-herobar .shbs-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--shbs-red);
  box-shadow: 0 0 10px var(--shbs-red); flex-shrink: 0;
}
div.shbs--drops .shbs-drops-herobar__name {
  font-family: var(--shbs-display); font-stretch: var(--shbs-display-stretch); font-weight: 900; font-size: 15px; letter-spacing: -0.005em;
  text-transform: uppercase; color: var(--shbs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
div.shbs--drops .shbs-drops-herobar__meta {
  font-family: var(--shbs-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--shbs-mut); white-space: nowrap;
}
/* The bar carries the drop's identity at all times, as the storefront's own hero does. */
div.shbs--drops .shbs-drops-hero[data-collapsed="1"] .shbs-drops-hero__grid { display: none; }
@media (max-width: 760px) {
  div.shbs--drops .shbs-drops-herobar__meta { display: none; }
}

/* A placed beat is not for sale: its card is a filled grey panel, and where the
   buy pill would be there is a dead outline pill of the same geometry. */
div.shbs--drops .shbs-bdrawer[data-placed="1"] .shbs-bdrawer__card {
  background: var(--shbs-panel); border-color: var(--shbs-line);
}
div.shbs--drops .shbs-bdrawer__cta--off {
  display: block; width: 100%; margin-top: 16px; padding: 12px 13px; box-sizing: border-box;
  border-radius: var(--shbs-r-pill); text-align: center; cursor: default;
  background: transparent; color: var(--shbs-faint); border: 1px solid var(--shbs-line);
  font-family: var(--shbs-mono); font-size: 11px; font-weight: 700; line-height: 16px;
  letter-spacing: 1.32px; text-transform: uppercase;
}
div.shbs--drops .shbs-bdrawer__main { min-width: 0; }
div.shbs--drops .shbs-bdrawer__slotnote {
  margin-top: 12px; padding: 11px 14px; border-radius: 9px;
  background: var(--shbs-line-03); border: 1px solid var(--shbs-line);
  font-family: var(--shbs-mono); font-size: 9px; letter-spacing: 0.08em; line-height: 1.7;
  text-transform: uppercase; color: var(--shbs-mut);
}
/* The specs column is ruled off from the card and its rows are hairlined. */
div.shbs--drops .shbs-bdrawer__side { border-left: 1px solid var(--shbs-line); }
div.shbs--drops .shbs-bdrawer__spec + .shbs-bdrawer__spec { border-top: 1px solid var(--shbs-line-04); }
/* Measured: the panel waveform sits in a 34px box, not 44. */
div.shbs--drops .shbs-bdrawer__wave { height: 34px; }

/* Every control in the board is reachable and visibly focused. */
div.shbs--drops .shbs-brow__add:focus-visible,
div.shbs--drops .shbs-brow__chev:focus-visible,
div.shbs--drops .shbs-bdrawer__cta:focus-visible,
div.shbs--drops .shbs-brow__titlebtn:focus-visible {
  outline: 2px solid var(--shbs-red); outline-offset: 2px;
}

/* The bar is a control, and must read as one: a flipping label beside the caret and
   a hover wash. (The prototype has no label - added because the bare caret was not
   discoverable.) */
div.shbs--drops .shbs-drops-herobar__act { display: flex; align-items: center; gap: 10px; }
div.shbs--drops .shbs-drops-herobar__act > span:first-child {
  font-family: var(--shbs-mono); font-size: 9px; letter-spacing: 1.26px; text-transform: uppercase; color: var(--shbs-faint);
}
div.shbs--drops .shbs-drops-herobar:hover { background: var(--shbs-row-alt); }
div.shbs--drops .shbs-drops-herobar:hover .shbs-drops-herobar__act > span:first-child { color: var(--shbs-ink); }
div.shbs--drops .shbs-drops-herobar:hover .shbs-caret-circle { border-color: var(--shbs-red); }
div.shbs--drops .shbs-drops-herobar:focus-visible { outline: 2px solid var(--shbs-red); outline-offset: -2px; }