/* WMDM embed hooks. Self-contained: both themes drop styles-m. */ .wmdm-embed-btn{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:0 14px;height:40px;border-radius:20px;border:1px solid currentColor;font-size:13px;font-weight:600;line-height:1;text-decoration:none;color:inherit;opacity:.85} .wmdm-embed-btn:hover{opacity:1;text-decoration:none} /* Default icon box — 14px reads right at this button's 12-13px font-size. Used by every .wmdm-embed-btn context: the MUSEO PDP pill and the (2026-09-01) demoted legacy PDP button below, which no longer needs its own 18px override now that it isn't matching .btn-queue's hero-row sizing anymore. */ .wmdm-embed-btn svg{width:14px;height:14px;flex:0 0 auto} .wmdm-embed-btn--museo{height:32px;padding:0 12px;font-size:12px;margin:0 0 0 8px;align-self:flex-start} /* Legacy PDP: demoted out of the Play/Queue hero row (2026-09-01 "option 1" round — Embed no longer has equal billing with Play/Queue on any surface). Anchored instead in the quieter product-meta-tags row (DAW-type + genre chips) that sits directly above the hero, pushed to the far right of that row with margin-left:auto so it reads as a secondary action, not a third primary control — Play/Queue reclaim the full row and stay untouched by this file. Falls back to `.wmdm-embed-btn-row` (own right-aligned line directly under the hero controls) on the rare product with no meta-tags row — see wmdm-embed.js. Muted palette, not the hero-matching one this replaces: border/background reuse the existing --border-light/--border pair, text colour reuses this file's own established "quiet" grey (`.wmdm-embed-hint`, `.wmdm-embed-status` below) so every muted label in this file agrees. Height 32px, under the 40px cap and equal to the meta-tag chips' own height, so it reads as one more item in that row rather than a stray control. */ .product-meta-tags .wmdm-embed-btn,.wmdm-embed-btn-row .wmdm-embed-btn{height:32px;margin:0 0 0 auto;padding:0 12px;border-radius:16px;border:1px solid var(--border-light,#f0f0f2);background:rgba(255,255,255,.04);color:#6f6c63;font-size:12px;font-weight:600;opacity:1;transition:background-color .2s,border-color .2s,color .2s} .product-meta-tags .wmdm-embed-btn:hover,.wmdm-embed-btn-row .wmdm-embed-btn:hover{background:rgba(255,255,255,.08);border-color:var(--border,#e8e8ec);color:var(--text,#111);text-decoration:none} /* Fallback wrapper only used when a product has no .product-meta-tags row (see wmdm-embed.js) — right-aligns the lone button on its own line directly under the hero controls. */ .wmdm-embed-btn-row{display:flex;justify-content:flex-end;margin:10px 0 0} /* Listing surfaces (legacy cards, Top Sellers rail, MUSEO commerce cluster, MUSEO tracklist rows): demoted the same round — hidden until the shopper interacts with its card/row, so it no longer competes with Play/Queue at rest. CSS-only reveal (opacity + pointer-events, no JS class toggling): the button stays in normal tab order and a real keyboard :focus-visible always reveals it. `.is-in` (already added to the tray) stays visible unconditionally — that state was put there on purpose by the shopper, it isn't chrome to declutter. */ .wmdm-embed-tray-btn{font-size:12px;line-height:1;opacity:0;pointer-events:none;transition:opacity .15s ease} .wmdm-embed-tray-btn.is-in{background:var(--accent,#7c5cff);color:#fff;border-color:transparent;opacity:1;pointer-events:auto} .wmdm-embed-tray-btn:focus-visible{opacity:1;pointer-events:auto} /* One hover/focus-within target per surface — the actual card/row element the shopper's pointer lands on, not the smaller *-actions/*-controls group the button itself sits in, so hovering anywhere on the card reveals it: .wmdm-product-card legacy grid card .wmdm-topsellers-strip__item legacy Top Sellers rail card .museo-rail__row MUSEO sidebar / Top-100 rail row .museo-card MUSEO grid + carousel card (both share this one wrapper) .wmdm-mr-tracks__row MUSEO release-PDP tracklist row */ .wmdm-product-card:hover .wmdm-embed-tray-btn,.wmdm-product-card:focus-within .wmdm-embed-tray-btn, .wmdm-topsellers-strip__item:hover .wmdm-embed-tray-btn,.wmdm-topsellers-strip__item:focus-within .wmdm-embed-tray-btn, .museo-rail__row:hover .wmdm-embed-tray-btn,.museo-rail__row:focus-within .wmdm-embed-tray-btn, .museo-card:hover .wmdm-embed-tray-btn,.museo-card:focus-within .wmdm-embed-tray-btn, .wmdm-mr-tracks__row:hover .wmdm-embed-tray-btn,.wmdm-mr-tracks__row:focus-within .wmdm-embed-tray-btn{opacity:1;pointer-events:auto} /* Touch devices have no hover to reveal it, and the brief calls for it to stay fully hidden there (an always-on button would just recreate the "equal billing" problem this round fixes) — `:not(.is-in)` + `!important` so this wins regardless of the reveal rules' own specificity above (a media query adds no specificity of its own; !important is what survives cascade order against them here). */ @media (hover:none){.wmdm-embed-tray-btn:not(.is-in){opacity:0!important;pointer-events:none!important}} /* Category toolbar — small quiet text link next to Play All / the filters, same muted grey as the PDP's demoted button above. Opens the playlist builder for the current site in a new tab. */ .wmdm-embed-toolbar-link{color:#6f6c63;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;margin-left:4px} .wmdm-embed-toolbar-link:hover{color:#111;text-decoration:underline} .wmdm-embed-toolbar-link:focus-visible{outline:2px solid var(--accent,#7c5cff);outline-offset:2px;border-radius:2px} /* Legacy card actions (.wmdm-card-actions — both the grid and the Top-Sellers-rail variant below share this base): the tray button already inherits the theme's own .wmdm-card-btn base (44x44, radius 8px, spring transition) via the "wmdm-card-btn " prefix the JS gives it — add the .wmdm-card-btn-queue look (background/border/ colour/weight) it doesn't get for free, plus its hover. */ .wmdm-card-actions .wmdm-embed-tray-btn{background:rgba(255,255,255,.04);border:1px solid var(--border-light,#f0f0f2);color:var(--text,#111);font-size:18px;font-weight:700;line-height:inherit} .wmdm-card-actions .wmdm-embed-tray-btn:hover{background:rgba(255,255,255,.08);border-color:var(--border,#e8e8ec);color:var(--text,#111)} .wmdm-card-actions .wmdm-embed-tray-btn.is-in,.wmdm-card-actions .wmdm-embed-tray-btn.is-in:hover{background:var(--accent,#7c5cff);color:#fff;border-color:transparent} /* Legacy Top Sellers rail styles its own play/queue controls as a 34px circle (see .wmdm-topsellers-strip__actions .wmdm-top-seller-btn in genre-landing.min.css) — match that instead of the 44px card-button look the tray button gets everywhere else. */ .wmdm-topsellers-strip__actions .wmdm-embed-tray-btn{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--border-light,#f0f0f2);box-shadow:0 1px 4px rgba(0,0,0,.18);color:#111;font-size:14px} .wmdm-topsellers-strip__actions .wmdm-embed-tray-btn.is-in{background:var(--accent,#7c5cff);color:#fff;border-color:transparent} /* This button also carries the "wmdm-card-btn " prefix (same as the main grid), so its icon would otherwise inherit that class's 16px default. The rail's own siblings (.wmdm-top-seller-btn svg) are 14px in this smaller 34px circle — match that instead. Rail siblings are fill-based icons (font-icon-era styling); ours stays the stroke family per the task brief, family match only. */ .wmdm-topsellers-strip__actions .wmdm-embed-tray-btn svg{width:14px;height:14px} /* MUSEO commerce cluster (.museo-commerce__group — card/rail/dense-table surfaces): the tray button already inherits the theme's own .museo-commerce__btn base (36x32 flat segment, accent fill, accent-2 hover + focus-visible outline) and the group's own border-left divider, via the "museo-commerce__btn " prefix the JS gives it. It's a real