/* ==========================================================================
   CAME — shared structure for the brass and silver skins (loaded LAST)
   --------------------------------------------------------------------------
   Enabled with  define('BBM_CAME', 'brass');  or  'silver'  in wp-config.php.
   The metal file (came-brass.css / came-silver.css) declares :root tokens and
   nothing else; this file owns every rule and reads those tokens. Splitting
   them this way means choosing a winner is deleting one file, not merging two.

   THE IDEA. The covers are already glass: every one is generated with
   "fading into near-black corners" (inc/ai-tagging/steps/cover.php), across
   ten curated palettes spanning gold, oxblood, umber, steel and lavender.
   What the base theme lacks is the CAME — the metal channel that holds each
   piece of a leaded window. That line already exists on the page as the 1px
   card border; it just isn't doing anything. This skin gives it to the metal,
   tightens the grid until the cards read as one window rather than sixteen
   objects, squares the corners, and takes violet out of the atmosphere.

   WHAT IT DELIBERATELY DOES NOT DO. It does not go light. The covers fade to
   near-black at their edges, so on a pale ground each card stops dissolving
   and becomes a hard-edged dark rectangle. Light mode is a catalog project
   (a full cover regeneration), not a CSS one.

   To turn OFF: delete the define. Supersedes the-room.css if both are on.
   ========================================================================== */

/* --- Ground ---------------------------------------------------------------
   Flat. The Room washes the page in violet radial gradients; if that skin is
   also enabled its body rule would still be in play, so clear it explicitly
   rather than relying on load order. Glass wants an unlit wall behind it.

   The ground is set on <html> as well as <body>. With a colour on <html>,
   <body>'s background stops being lifted onto the browser canvas and is
   painted as an ordinary box instead. Stephen's Chrome and Brave (not
   Safari, and not reproducible here) drew the canvas colour as pure black
   on the homepage and catalog in 2026-09 while still drawing the grain over
   it; with the page colour on <body>'s own box, nothing depends on the
   canvas. <html> keeps the same colour for the overscroll bounce. */
html,
body {
  background-color: var(--bg-primary);
}

body {
  background-image: none;
}

/* --- The grid as a leaded window ------------------------------------------
   The base grid uses --space-lg / --space-xl gaps (24-32px), which reads as
   "cards on a page". Came is a channel a few millimetres wide: pull the gap
   down until the covers read as panels set into one frame. */
.woocommerce ul.products {
  gap: 6px;
}

@media (min-width: 768px) {
  .woocommerce ul.products {
    gap: 8px;
  }
}

/* Square the panels. Scoped to the product grid on purpose — zeroing
   --radius-lg globally would also square modals, licence cards and inputs,
   and the softness is right everywhere except here. 2px, not 0: a hairline
   of relief keeps the corners from looking like a rendering error. */
.woocommerce ul.products li.product {
  border-radius: 2px;
  border-color: var(--border);
}

/* Hover: the metal catches the light. The base theme lifts the card 4px and
   blooms a glow, which at an 8px gap makes neighbours collide and, more to
   the point, is the wrong gesture — leaded panels do not levitate. */
.woocommerce ul.products li.product:hover {
  transform: none;
  border-color: var(--border-accent);
  box-shadow: 0 0 0 1px rgba(var(--came-rgb), 0.22);
}

/* --- Dark ink on the metal ------------------------------------------------
   Neither metal carries white text: brass is 3.1:1 against white (fails) and
   8.5:1 against the ground; pewter is worse at 2.2:1. So every element filled
   with --gradient-accent flips to --accent-ink, the way an engraved plate
   reads. The theme already does this for the gold cart button.

   This list is long because the fill is applied at ~25 sites and CSS cannot
   select an element by its background. If you add a new accent-filled control,
   add it here too. !important mirrors the base rule it is overriding. */
.btn-primary,
.beat-card-play-indicator,
.tag-link:hover,
.license-card.featured::before,
.bbm-welcome-chip:has(input:checked) span,
.bbm-musicmode__btn[aria-pressed="true"],
.bbm-authmode__btn[aria-pressed="true"],
.hiw-step-num,
.bbm-signals-skip,
.bbm-smart-search-submit,
.woocommerce ul.products li.product .button:hover,
.woocommerce-checkout #place_order,
.browse-all-cta .btn-browse-all,
.woocommerce nav.woocommerce-pagination ul li span.current,
.bbm-blog-pagination .page-numbers.current,
.bbm-code-login-primary.button,
.jetpack-contact-form__form button[type="submit"],
.jetpack-contact-form__form input[type="submit"],
.jetpack-contact-form__form .wp-block-jetpack-button button,
.jetpack-contact-form__form .wp-block-button__link {
  color: var(--accent-ink);
}

.srp-make-offer-bt,
.woocommerce-variation-add-to-cart .srp-make-offer-bt,
.woocommerce .single_add_to_cart_button,
.bbm-license-all-btn,
.bbm-license-all-empty-link,
.bbm-fav-signup-btn,
.bbm-favorites-empty-link,
.bbm-bundle-code-copy,
#make-offer-form button[type="submit"],
.srp-popup-form--makeoffer button[type="submit"],
.srp-modal-share #copyButton,
.srp-modal-share .srp_button,
.woocommerce-account button.button,
.woocommerce-account input[type="submit"].button,
.woocommerce form .button[type="submit"],
.woocommerce-form-login .button,
.woocommerce-form-register .button,
form.cev_pin_verification_form button.cev_pin_verify,
.bbm-invite-bar-cta,
/* The cookie banner's styles live in the Complianz record
   (docs/complianz-banner.css) and set Accept to white on the violet, 4.4:1.
   `body` outranks that rule's specificity, so this wins whatever order the
   two stylesheets load in. */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
  color: var(--accent-ink) !important;
}

/* The gold celebration stays white-hot and untouched — #ffd700 with black
   lettering, set in woocommerce.css. Under BRASS the two golds are close
   enough in family to be worth a look before shipping: the celebration only
   means something while it is the only gold on the page. Under silver this
   is a non-issue, and it is the strongest argument for silver. */

/* --- The catalog grid is Sonaar's, not WooCommerce's ----------------------
   Worth knowing before tuning the rules above: /exclusive-beats/ renders the
   catalog through Sonaar's grid player (.srp_list, display:grid), not through
   ul.products — measured live, 4 columns at 10px gap with square items. So the
   main shop page ALREADY reads as a tight leaded grid; the ul.products rules
   above are doing their work on the taxonomy/palette archives and the related
   products rail, which is where WooCommerce's own loop still runs.

   What the grid does need is the hover, which blooms violet at a literal
   rgba() the tokens cannot reach. */
.archive-player .iron-audioplayer.srp_tracklist_grid .sr-playlist-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(var(--came-rgb), 0.35);
}

/* --- Off-token fixes (unreachable from :root alone) -----------------------
   Everything below is a hardcoded violet literal in the base theme — no token,
   no var() fallback — so a :root override cannot reach it. These are the ones
   that show on the surfaces worth judging a skin by: the catalog, the homepage
   and a beat page. Found with:
     grep -n "124, *92, *252\|155, *130, *255\|7c5cfc\|9b82ff" assets/css/*.css
   If a new one appears, it will simply look violet — there is no error. */

/* The collection tiles under "Browse by collection". The single loudest violet
   on the catalog page: a literal gradient plus a radial bloom behind it, in
   four states. This is what still read purple in the first brass render. */
.collection-tile {
  background:
    linear-gradient(135deg, rgba(var(--came-rgb), 0.14), rgba(var(--came-rgb), 0.06)),
    var(--bg-card);
}

.collection-tile::before {
  background: radial-gradient(closest-side, rgba(var(--came-rgb), 0.16), transparent 70%);
}

.collection-tile:hover,
.collection-tile:focus-visible {
  border-color: var(--border-accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(var(--came-rgb), 0.30) inset;
  background:
    linear-gradient(135deg, rgba(var(--came-rgb), 0.24), rgba(var(--came-rgb), 0.12)),
    var(--bg-card);
}

.collection-tile:active {
  background:
    linear-gradient(135deg, rgba(var(--came-rgb), 0.34), rgba(var(--came-rgb), 0.18)),
    var(--bg-card);
  box-shadow: 0 0 0 2px rgba(var(--came-rgb), 0.45) inset;
}

/* Catalog sidebar — the BPM range slider and its tooltip. */
.bbm-filter-tooltip {
  border-color: rgba(var(--came-rgb), 0.4);
}

.catalog-sidebar .noUi-handle {
  box-shadow: 0 0 0 2px rgba(var(--came-rgb), 0.25) !important;
}

/* Favourite (heart) toggle on the cards. */
.bbm-fav-toggle:active {
  background: rgba(var(--came-rgb), 0.12);
}

/* Homepage: the "how it works" step numerals and the value cards. */
.hiw-step-num {
  box-shadow: 0 4px 12px rgba(var(--came-rgb), 0.35);
}

.value-card:hover {
  background: rgba(var(--came-rgb), 0.04);
}

/* The listen-gate card's round icon, and the "Looking for something else?"
   band under a beat page. Both are literal violet washes — found by walking
   the live DOM under the skin rather than by reading the CSS, which is the
   only way to catch a rule whose selector you would not have guessed. */
.bbm-listen-gate-icon {
  background: rgba(var(--came-rgb), 0.12);
}

.browse-all-cta {
  background: linear-gradient(135deg,
    rgba(var(--came-rgb), 0.08) 0%,
    rgba(var(--came-rgb), 0.06) 100%);
}

/* Beat page: the "feels like" pull quote. */
.ts-feels-like-quote {
  border-color: var(--accent-subtle);
  border-left-color: var(--accent);
  background: linear-gradient(135deg,
    rgba(var(--came-rgb), 0.12) 0%,
    rgba(var(--came-rgb), 0.05) 100%);
}

/* The invite bar's CTA and the signals skip link. */
.bbm-invite-bar-cta:hover,
.bbm-invite-bar-cta:focus-visible {
  box-shadow: 0 6px 16px rgba(var(--came-rgb), 0.35);
}

.bbm-signals-skip {
  box-shadow: 0 8px 28px rgba(var(--came-rgb), 0.28);
}

/* Preview pulse on a playing card. A later @keyframes of the same name
   replaces the earlier one outright, so this retints the whole animation. */
@keyframes bbm-previewing-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0  rgba(var(--came-rgb), 0.6); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(var(--came-rgb), 0); }
}


/* Hero atmosphere — literal rgba in the base, one of them coral. A leaded
   window has no bloom behind it; hold these to a trace of the metal. */
.hero-bg::before {
  background: radial-gradient(ellipse, rgba(var(--came-rgb), 0.07) 0%, transparent 70%);
}
.hero-bg::after {
  background: radial-gradient(ellipse, rgba(var(--came-rgb), 0.05) 0%, transparent 70%);
}

/* Highlighted hero words. Flat metal, whichever token the live base clips. */
.gradient-text {
  background: var(--accent-light);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Translucent chrome was pinned to the old blue-black (rgba(8,8,15,…)) and
   would read as a cool cast floating over a warm ground. Re-ground all of it
   on --ground-rgb, keeping each rule's original alpha. */
.site-header {
  background: rgba(var(--ground-rgb), 0.75);
}

@media (min-width: 1024px) {
  .site-header.is-scrolled {
    background: rgba(var(--ground-rgb), 0.92);
  }
}

.bbm-invite-bar {
  background: rgba(var(--ground-rgb), 0.92);
}

.beat-card-hover {
  background: rgba(var(--ground-rgb), 0);
}

.beat-card:hover .beat-card-hover {
  background: rgba(var(--ground-rgb), 0.35);
}

.beat-card-bpm {
  background: rgba(var(--ground-rgb), 0.75);
}

.play-overlay {
  background: rgba(var(--ground-rgb), 0.5);
}

.glass {
  background: rgba(var(--ground-rgb), 0.6);
}

.bbm-popup-overlay,
.sr_popup-backdrop,
.sr_popup-backdrop.sr_show {
  background: rgba(var(--ground-rgb), 0.78) !important;
}

/* The cookie banner's surface lives on the Complianz banner RECORD, not in
   this theme — a plugin DB table mirrored at docs/complianz-banner.css. Its
   background is rgba(8,8,15,0.92) !important, so this matches weight to keep
   the bar on-ground while a skin is being evaluated. If a metal is adopted,
   update the plugin field and mirror it back into that file in the same
   commit; this rule is a preview convenience, not the permanent home. */
.cmplz-cookiebanner {
  background: rgba(var(--ground-rgb), 0.92) !important;
  border-top-color: var(--border) !important;
}

/* ==========================================================================
   OBSIDIAN — smoked glass, black lettering
   --------------------------------------------------------------------------
   Scoped to body.bbm-came-obsidian (functions.php, bbm_body_classes), so
   none of this touches brass, silver or ghost.

   Built around the covers (cover.php, ETCH + GLASS_NEUTRAL): smoked-glass
   tiles with black etched titles. The whole site is the same material and
   one light, so the tiles look like they belong to it:

     PAGE   The darkest surface (--bg-primary), grain and a soft lamp.
     GLASS  Every pane, band, bar and card, a step up (--bg-card); the
            covers a step above that. Lit top edge, black outline, sharp
            corners.
     LIGHT  Violet. Actions, labels and links. Never a surface, never a
            title.

   Every tonal difference sits above the range a phone crushes to black.
   The first obsidian (2026-09-26) went darker than the page for its panes,
   covers and titles — black on black — which read on a desktop monitor and
   as one flat black on a phone (Stephen: "hard to see on mobile"). Black is
   kept where it reads: the covers' etched lettering and the ink on violet.

   TYPE: light for titles, grey for what you read, violet for labels.
   ========================================================================== */

/* --- Material ---------------------------------------------------------------
   Machined, not moulded: tight radii (pills stay pills), a fine grain on the
   page so it reads as stone rather than a flat fill, and a lamp — a soft
   pool of light at the top of the screen falling off to the edges. The
   covers already vary as if each tile sat at a different spot under one
   light; this is that light. Fixed to the viewport, so whatever is on screen
   is what is lit. */
.bbm-came-obsidian {
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
}

/* The grain is a PNG tile (assets/img/grain.png: white, 1-8/255 alpha, 128px),
   not the SVG feTurbulence filter it started as. Chrome and Brave would
   intermittently paint that SVG background as solid BLACK — over the page
   colour, so the ground went black while every pane stayed right. It came
   and went between sessions and machines; Safari never did it (2026-09-27,
   found by switching layers off one at a time: only removing the grain
   brought the charcoal back). A plain bitmap has no filter to fail.

   The same grain goes on <html>, which shows wherever <body> does not reach:
   the 32px WordPress pushes the page down for a logged-in admin (the page's
   first margin collapses through <body>, so <body> starts below it) and the
   overscroll bounce. Flat there, it read as a bar under the header. */
body.bbm-came-obsidian,
html:has(> body.bbm-came-obsidian) {
  background-image: url("../img/grain.png");
}

/* isolation: <body> paints its own background now (see Ground, top of this
   file), and a z-index:-1 child of a body that is not a stacking context
   would be painted UNDER that background. Isolating body keeps the lamp
   above the ground and below everything else. */
body.bbm-came-obsidian {
  isolation: isolate;
}

body.bbm-came-obsidian::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 70%),
    radial-gradient(140% 100% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* WooCommerce pages paint .site-main with a flat --bg-primary
   (woocommerce.css), which buried the grain and the lamp on the catalog,
   every beat page and the account pages — the shop read flatter than the
   rest of the site. The page shows through instead. */
.bbm-came-obsidian.woocommerce-page .site-main {
  background: transparent;
}

/* Glass. Every pane is the same slab: a lit top edge, a faint falloff, a
   black outline, and a shadow that seats it on the page. */
.bbm-came-obsidian .collection-tile,
.bbm-came-obsidian .hiw-step,
.bbm-came-obsidian .sr-playlist-item,
.bbm-came-obsidian .beat-card,
.bbm-came-obsidian .ts-stat,
.bbm-came-obsidian .ts-arrangement,
.bbm-came-obsidian .srp_range_container,
.bbm-came-obsidian .srp_player_boxed,
.bbm-came-obsidian .home-smart-search,
.bbm-came-obsidian .catalog-search,
.bbm-came-obsidian .catalog-sidebar,
.bbm-came-obsidian .bbm-listen-gate,
.bbm-came-obsidian .track-sheet,
.bbm-came-obsidian .cta-block,
.bbm-came-obsidian .browse-all-cta,
.bbm-came-obsidian .bbm-invite-signals,
.bbm-came-obsidian .bbm-about-photo,
.bbm-came-obsidian .about-photo,
.bbm-came-obsidian .hero--photo,
.bbm-came-obsidian .license-card,
.bbm-came-obsidian .bbm-blog-card,
.bbm-came-obsidian .faq-item,
.bbm-came-obsidian .multiselect__tags {
  background-color: var(--bg-card);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 40%);
  border-color: var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 28px -16px rgba(0, 0, 0, 0.9);
}

/* Sonaar sizes the playing track's background to a 10x13px tile
   (.iron-audioplayer .playlist .current, for a pattern of its own). With the
   glass gradient above as that background, the tile repeated it in 13px
   strips — the playing row read as venetian blinds. Drawn once instead. */
.bbm-came-obsidian .iron-audioplayer .playlist .sr-playlist-item.current {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* The bands — the studio invite and "Built for Artists" — are glass too,
   full width. So are the header and footer. */
.bbm-came-obsidian .bbm-studio-invite,
.bbm-came-obsidian .bbm-values,
.bbm-came-obsidian .site-footer {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.bbm-came-obsidian .site-header {
  background: rgba(29, 29, 29, 0.92);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

/* --- The covers -------------------------------------------------------------
   The product, and the lightest surface on the page. What makes it an
   OBJECT rather than a grey square is how its edges take the light. A bright hairline along the top (the
   polished edge of a glass tile catching the lamp), a faint chamfer round
   the rest, and a shadow underneath that seats it. Drawn in a pseudo-
   element over the image, because an inset shadow on an <img> paints under
   the picture — ::after, except on the beat page, where ::after is already
   the beat-synced light sweep (woocommerce.css, .has-sheen) and must stay
   on top.

   Four places show a cover: the catalog grid, the homepage carousel, the
   beat page, and the related-beats cards. */
.bbm-came-obsidian .sr_track_cover,
.bbm-came-obsidian .srp_swiper-album-art,
.bbm-came-obsidian .woocommerce-product-gallery,
.bbm-came-obsidian .beat-card-art {
  position: relative;
}

.bbm-came-obsidian .sr_track_cover::after,
.bbm-came-obsidian .srp_swiper-album-art::after,
.bbm-came-obsidian .woocommerce-product-gallery::before,
.bbm-came-obsidian .beat-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  /* The face takes a little of the lamp too: a faint reflection from the
     top, falling off before it reaches the title. */
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 34%);
}

.bbm-came-obsidian .srp_swiper-album-art,
.bbm-came-obsidian .woocommerce-product-gallery {
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    0 30px 60px -24px rgba(0, 0, 0, 0.95),
    0 6px 14px -6px rgba(0, 0, 0, 0.7);
}

.bbm-came-obsidian .woocommerce-product-gallery img,
.bbm-came-obsidian .srp_swiper-album-art img {
  border-radius: var(--radius-lg);
}

/* The catalog card is one slab with the cover set into its top. Sonaar
   rounds it to 10px — moulded plastic next to everything else. */
.bbm-came-obsidian .archive-player .iron-audioplayer.srp_tracklist_grid .sr-playlist-item,
.bbm-came-obsidian .sr-playlist-item {
  border-radius: var(--radius-lg);
}

.bbm-came-obsidian .sr-playlist-item .sr_track_cover,
.bbm-came-obsidian .sr-playlist-item .sr_track_cover img {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.bbm-came-obsidian .sr-playlist-item .sr_track_cover::after {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.9);
}

/* Play buttons: one family, modelled on the beat page's player (Sonaar's
   boxed .srp-play-circle: a ring with a 6px mid-grey border and a small grey
   triangle) — Stephen, 2026-09-27. On a cover the ring gets a dark centre:
   see-through, it sat on top of the etched title and the two ran together;
   the beat page's ring sits on a plain dark panel, and this makes it read
   the same.

   Triangle colour and size are set on .sricon-play, not `i`: Sonaar styles
   the glyph with four-class selectors (.iron-audioplayer .sr_track_cover
   .srp_play .sricon-play), which outranked a bare `i` and left it white and
   25px. */

/* Catalog grid: a 44px ring centred on the cover. It sat in the bottom-right
   corner until 2026-10-04, because a solid ring in the middle hid the etched
   title. Stephen moved it back to the centre and made it see-through instead:
   a faint dark centre and a slightly translucent ring, so the title reads
   through it. Scoped to the grid: the list layout (category, palette and
   favorites pages) draws a 45px thumbnail and gets its own size below. */
.bbm-came-obsidian .srp_tracklist_grid .sr_track_cover .srp_play {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: -22px 0 0 -22px !important;
  width: 44px;
  height: 44px;
  border: 4px solid rgba(127, 127, 127, 0.8);
  background: rgba(18, 18, 18, 0.3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  overflow: visible;
  z-index: 2;
}

/* Phones: a tap on the cover that Sonaar doesn't see as the play button
   opens the beat page. Its check is `$(event.target).is('.srp_play')` or
   `.srp_play:hover`, and phones don't report hover on a tap. So a tap that
   landed on the triangle icon (target = <i>) or just outside the ring
   navigated instead of playing. The icon passes taps through to the button,
   and an invisible ring of 14px widens the target to 72px. A tap on a
   pseudo-element targets its element, so Sonaar's check passes. */
.bbm-came-obsidian .srp_tracklist_grid .sr_track_cover .srp_play * {
  pointer-events: none;
}

.bbm-came-obsidian .srp_tracklist_grid .sr_track_cover .srp_play::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
}

.bbm-came-obsidian .srp_tracklist_grid .sr_track_cover .srp_play .sricon-play {
  font-size: 14px;
  line-height: 1;
  margin-left: 3px;
  color: #7f7f7f;
}

/* List rows: a 30px ring centred on the 45px thumbnail. Sonaar shrinks the
   list's button with transform: scale(0.5) and it was inheriting the grid's
   corner pin, so it hung off the thumbnail's top-left corner. */
.bbm-came-obsidian .srp_tracklist_play_cover:not(.srp_tracklist_grid) .sr_track_cover .srp_play {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: -15px 0 0 -15px !important;
  width: 30px;
  height: 30px;
  transform: none;
  border: 3px solid #7f7f7f;
  background: rgba(18, 18, 18, 0.82);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.bbm-came-obsidian .srp_tracklist_play_cover:not(.srp_tracklist_grid) .sr_track_cover .srp_play .sricon-play {
  font-size: 10px;
  line-height: 1;
  margin-left: 2px;
  color: #7f7f7f;
}

/* Homepage carousel: the beat page's size, centred on the front cover and
   shown on hover (Sonaar's .srp_slider_play_cover_hover). */
.bbm-came-obsidian .srp_swiper-control .srp_play {
  width: 68px;
  height: 68px;
  border: 6px solid #7f7f7f;
  background: rgba(18, 18, 18, 0.82);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

.bbm-came-obsidian .srp_swiper-control .srp_play .sricon-play {
  font-size: 19px;
  margin-left: 4px;
  color: #7f7f7f;
}

.bbm-came-obsidian .srp_tracklist_play_cover .sr_track_cover .srp_play:hover,
.bbm-came-obsidian .srp_swiper-control .srp_play:hover {
  border-color: #a6a6a6;
}

.bbm-came-obsidian .srp_tracklist_play_cover .sr_track_cover .srp_play:hover .sricon-play,
.bbm-came-obsidian .srp_swiper-control .srp_play:hover .sricon-play {
  color: #a6a6a6;
}

/* --- Type ---------------------------------------------------------------- */

/* Light: titles. Page titles share header.section-header across every
   template (catalog, archives, about, licensing, services, contact, FAQ,
   sign-up, account, favorites, free mix, legal pages); section titles are
   .section-header > h2; the blog, the homepage hero and the beat page each
   have their own. They were black (#080808) for a day — the tone-on-tone
   read on a desktop monitor and vanished on phones, which crush that range
   to one black. "independent artists" is a .gradient-text span that paints
   a violet fill from a clipped background; it stays the headline's grey
   (violet is never display type), so the fill colour is forced too. */
.bbm-came-obsidian .hero-content h1,
.bbm-came-obsidian .hero-content h1 .gradient-text,
.bbm-came-obsidian .section-header > h1,
.bbm-came-obsidian .section-header > h2,
.bbm-came-obsidian .section-header-text > h1,
.bbm-came-obsidian .bbm-blog-header h1,
.bbm-came-obsidian.woocommerce div.product .product_title,
.bbm-came-obsidian .woocommerce div.product .product_title {
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: var(--text-primary);
  text-shadow: none;
}

/* A beat's title is the page's title, and it answers the cover beside it:
   set at section-title size rather than the base 2rem. */
.bbm-came-obsidian.woocommerce div.product .product_title,
.bbm-came-obsidian .woocommerce div.product .product_title {
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Grey: everything you read — one grey, --text-secondary. */
.bbm-came-obsidian .hero-content p,
.bbm-came-obsidian .section-header > p,
.bbm-came-obsidian .section-header-text > p {
  color: var(--text-secondary);
  text-shadow: none;
}

/* Violet: labels. Every .eyebrow and every one-off *-eyebrow class, the
   filter heading, the track-sheet labels and the About cards' headings.
   --accent-2 (#9b82ff), not the button violet: at 11-14px the latter is
   3.9:1 on this ground, under AA; this is ~6:1. */
.bbm-came-obsidian .eyebrow,
.bbm-came-obsidian .catalog-search-eyebrow,
.bbm-came-obsidian .catalog-collections-eyebrow,
.bbm-came-obsidian .collection-tile-eyebrow,
.bbm-came-obsidian .bbm-asking-eyebrow,
.bbm-came-obsidian .bbm-license-all-eyebrow,
.bbm-came-obsidian .sold-badge-eyebrow,
.bbm-came-obsidian .bbm-fav-signup-eyebrow,
.bbm-came-obsidian .bbm-bundle-offer-eyebrow,
.bbm-came-obsidian .bbm-blog-card-eyebrow,
.bbm-came-obsidian .catalog-sidebar .sidebar-heading,
.bbm-came-obsidian .ts-label,
.bbm-came-obsidian .about-stat-card h3 {
  color: var(--accent-2);
  text-shadow: none;
}

/* ...and violet is never display type. The About cards set their values
   (Producer / 25+ / Melodic Type) in 2-4.5rem violet: light grey here, so
   the labels above them carry the colour instead. */
.bbm-came-obsidian .about-stat-xl,
.bbm-came-obsidian .about-stat-big {
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: var(--text-primary);
}

.bbm-came-obsidian .collection-tile-eyebrow,
.bbm-came-obsidian .bbm-asking-eyebrow {
  font-size: 0.875rem;
  letter-spacing: 0.16em;
}

/* Collection tiles were briefly a LIGHTER frosted pane so an etched black
   label could be read on them; they are glass like the rest. */
.bbm-came-obsidian .collection-tile::before {
  background: none;
}

/* The logo is a white SVG. Pulled back so it sits with the type. */
.bbm-came-obsidian .site-logo-img {
  opacity: 0.8;
}

/* --- Violet, lit ------------------------------------------------------------
   Filled violet reads as a plastic button. A lit top edge and a slight
   falloff make it an enamel inlay instead. One shape for every button:
   seven were --radius-full pills, two of them !important; listed by the
   exact selectors that set the pill so specificity matches — NOT a blanket
   --radius-full override, which would also square the close buttons, count
   badges, avatars and chat bubble that are round on purpose. Tag chips stay
   pills: they are labels, not buttons. */
.bbm-came-obsidian .btn-primary,
.bbm-came-obsidian .single_add_to_cart_button,
.bbm-came-obsidian .srp-make-offer-bt,
.bbm-came-obsidian .btn-browse-all,
.bbm-came-obsidian .jetpack-contact-form__form .wp-block-button__link,
.bbm-came-obsidian .bbm-license-all-btn,
.bbm-came-obsidian .bbm-fav-signup-btn {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.bbm-came-obsidian .jetpack-contact-form__form .wp-block-button__link,
.bbm-came-obsidian .browse-all-cta .btn-browse-all,
.bbm-came-obsidian .bbm-license-all-btn,
.bbm-came-obsidian .bbm-license-all-empty-link,
.bbm-came-obsidian form.cev_pin_verification_form button.cev_pin_verify {
  border-radius: var(--radius-md);
}

.bbm-came-obsidian .bbm-fav-signup-input,
.bbm-came-obsidian .bbm-fav-signup-btn {
  border-radius: var(--radius-md) !important;
}

/* The offer popup's Send is keyed on an ID with !important in
   woocommerce.css (#make-offer-form button[type="submit"]), so only an ID
   selector can reach it. That rule also forces WHITE text on the violet —
   4.4:1, under AA — so it takes the black ink the other violet buttons use. */
.bbm-came-obsidian #make-offer-form button[type="submit"],
.bbm-came-obsidian .srp-popup-form--makeoffer button[type="submit"] {
  border-radius: var(--radius-md) !important;
  color: var(--accent-ink) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%), var(--accent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* --- Third-party colour ------------------------------------------------------
   Everything below exists because a plugin hard-codes a colour: on an
   all-neutral page, one white box or one green highlight is the loudest
   thing on screen. */

/* Sonaar's filters are vue-multiselect: white boxes, black text, and the
   library's default GREEN (#41b883) highlight and tags. */
.bbm-came-obsidian .multiselect__tags,
.bbm-came-obsidian .multiselect__single,
.bbm-came-obsidian .multiselect__input,
.bbm-came-obsidian .multiselect__content-wrapper {
  background-color: var(--bg-elevated);
  color: var(--text-secondary);
  border-color: var(--border);
}

.bbm-came-obsidian .multiselect__placeholder {
  color: var(--text-secondary);
}

.bbm-came-obsidian .multiselect__select::before {
  border-top-color: var(--text-muted);
}

.bbm-came-obsidian .multiselect__option {
  color: var(--text-secondary);
}

.bbm-came-obsidian .multiselect__option--highlight,
.bbm-came-obsidian .multiselect__option--highlight::after {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.bbm-came-obsidian .multiselect__option--selected,
.bbm-came-obsidian .multiselect__option--selected.multiselect__option--highlight {
  background: var(--bg-tertiary);
  color: var(--accent);
}

.bbm-came-obsidian .multiselect__tag {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.bbm-came-obsidian .multiselect__tag-icon::after {
  color: var(--text-muted);
}

.bbm-came-obsidian .multiselect__tag-icon:hover {
  background: var(--accent-subtle);
}

/* Card action icons (info, share, add) are Sonaar icon-font glyphs forced
   white. Grey, with the accent on hover. */
.bbm-came-obsidian .sr-playlist-item .song-store,
.bbm-came-obsidian .sr-playlist-item .song-store i {
  color: var(--text-secondary);
}

.bbm-came-obsidian .sr-playlist-item .song-store:hover,
.bbm-came-obsidian .sr-playlist-item .song-store:hover i {
  color: var(--accent);
}

/* The single-beat player's panel colour is a Sonaar plugin SETTING (the DB),
   not a shortcode attribute this theme writes, so bbm_player_bg() cannot
   reach it — it rendered navy. The waveform itself is drawn from the same
   settings and stays as configured there. */
.bbm-came-obsidian .srp_player_boxed {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border);
}

/* Sonaar's BPM range is vue-slider: two WHITE knobs, the brightest things
   in the catalog sidebar. A control, so it takes the violet enamel of the
   buttons; the rail is a black groove. */
.bbm-came-obsidian .vue-slider-dot-handle {
  background: var(--accent);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.7);
}

.bbm-came-obsidian .vue-slider-rail {
  background: #000;
}

.bbm-came-obsidian .vue-slider-process {
  background: var(--accent);
}

/* The BEAT TAPES screenshot is the app's own coral — the one large patch
   of colour left on a page where violet is otherwise the only hue. Shown in
   black and white; hovering it brings the colour back, as a preview of the
   room behind the invitation. */
.bbm-came-obsidian .bbm-signals-img {
  filter: grayscale(1) brightness(0.85) contrast(1.05);
  transition: filter 0.6s ease;
}

.bbm-came-obsidian .bbm-invite-signals:hover .bbm-signals-img {
  filter: none;
}

/* Filter tooltips were hard-coded navy (#0c0c14) with a violet border. */
.bbm-came-obsidian .bbm-filter-tooltip {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* The licence preview's redaction note was a hard-coded violet fill. Same
   treatment as the "price is negotiable" note: a black pane, violet rule. */
.bbm-came-obsidian .bbm-license-preview-notice {
  background: rgba(0, 0, 0, 0.40);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}