/* 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 (the MUSEO PDP pill and any other .wmdm-embed-btn context that isn't the legacy hero row below) — 14px reads right at this button's 12-13px font-size. The legacy hero row overrides this to 18px to match .btn-queue svg exactly (see that rule further down). */ .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 hero: match .btn-queue (the secondary control) — same radius, border, background, colour, font weight/size, hover lift and easing curve. .btn-play and .btn-queue are flex:1 children of .product-player-controls, which is a flex row with the default align-items:stretch, so leaving height unset here makes ours the same 54px tall as its siblings without hardcoding a number. Deliberately not flex:1 itself: tested it live (equal thirds turned "Embed" into a ~290px button with mostly empty padding — screenshot kept in the task record) and it read as oversized for a tertiary action, so it stays content-width, matching everything about the queue button except how much of the row it claims. No `!important` anywhere in this file — this selector's specificity (0-2-0) already outranks both the unscoped rule above and .btn-queue's own (0-1-0) regardless of stylesheet load order, so plain cascade is enough. */ .product-player-controls .wmdm-embed-btn{height:auto;margin-left:0;gap:8px;padding:14px 24px;border-radius:var(--radius-md,12px);border:1px solid var(--border,#e8e8ec);background:rgba(255,255,255,.04);color:var(--text,#111);font-size:15px;font-weight:600;line-height:inherit;opacity:1;transition:transform .2s var(--ease-out,cubic-bezier(.16,1,.3,1)),background-color .2s,border-color .2s} .product-player-controls .wmdm-embed-btn:hover{background:rgba(255,255,255,.08);border-color:var(--border,#e8e8ec);color:var(--text,#111);transform:translateY(-1px);opacity:1;text-decoration:none} /* Icon box: .btn-play svg, .btn-queue svg are 18x18 (product-page.css) with an 8px gap to their text (the .btn-play/.btn-queue flex rule's own `gap:8px`, which this button's own rule above already copies) — match exactly so the icon+label pairing reads identically to Queue's "+". */ .product-player-controls .wmdm-embed-btn svg{width:18px;height:18px} .wmdm-embed-tray-btn{font-size:12px;line-height:1} .wmdm-embed-tray-btn.is-in{background:var(--accent,#7c5cff);color:#fff;border-color:transparent} /* 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