/**
 * Copyright (c) 2026 WMDM. All rights reserved.
 *
 * Per-genre landing enrichment — fallback intro + FAQ. Colours use the cubase
 * theme CSS variables (--text/--text-80/--text-40/--border-light/--primary) so
 * the text adapts to both the dark stores (io + locales) and the light main
 * site — exactly like the theme's own components. Inherits the site font;
 * only colours/spacing are set here.
 */

/* ---- Fallback intro (only shown on genres with no native description) ---- */
.wmdm-genre-intro {
    margin: 0 0 1.75rem;
}
.wmdm-genre-intro__inner {
    max-width: 920px;
}
.wmdm-genre-intro p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-80);
    margin: 0 0 .85rem;
}
.wmdm-genre-intro h2,
.wmdm-genre-intro h3 {
    color: var(--text);
    margin: 0 0 .6rem;
}

/* ---- Foldable category description (genre child pages + format pages) ----
   2026-08-17 speed review: the fold is applied by CSS at first paint (not by
   genre-landing.js after load), and the toggle overlays the block instead of
   being inserted below it. The old JS-after-load fold moved the whole grid up
   ~190px and was a CLS ~0.1 hit on every genre/Formats page. JS now only adds
   the toggle when the text is actually clipped. */
body[class*="categorypath-genres-"] .category-description,
body[class*="wmdm-format-page"] .wmdm-format-description {
    position: relative;
    max-height: 3.6em; /* ~2 clean, fully-readable lines — no wash-out fade */
    overflow: hidden;
}
/* redundant lead-in heading (restates the H1) — hidden here, JS also removes it */
body[class*="categorypath-genres-"] .category-description > strong:first-child,
body[class*="categorypath-genres-"] .category-description > strong:first-child + br,
body[class*="wmdm-format-page"] .wmdm-format-description > strong:first-child,
body[class*="wmdm-format-page"] .wmdm-format-description > strong:first-child + br {
    display: none;
}
body[class*="categorypath-genres-"] .category-description.wmdm-desc--expanded,
body[class*="wmdm-format-page"] .wmdm-format-description.wmdm-desc--expanded {
    max-height: none;
    overflow: visible;
    padding-bottom: 1.8em; /* room for the overlaid "See less" */
}
.wmdm-desc-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0, var(--bg, #fff) 28%);
    border: none;
    padding: 0 0 0 2.2em;
    margin: 0;
    line-height: 1.65;
    cursor: pointer;
    color: var(--primary);
    font-weight: 600;
    font-size: .9rem;
}
.wmdm-desc-toggle:hover {
    text-decoration: underline;
}

/* ---- Top Sellers / sidebar pulled up beside the title (genre child pages) ----
   The title + (folded) description sit ABOVE the .columns row, so the sidebar
   normally starts at the toolbar line. Lift it up into the empty space beside
   the heading so Top Sellers reaches the top. Desktop only (single-column on
   mobile stacks naturally). */
@media (min-width: 1024px) {
    /* Sidebar stays in its column (no negative-margin lift — the title +
       description band is full-width PageBuilder "contained" content, so
       lifting the panel into it overlaps the text). With the description
       folded the header is compact, so Top Sellers sits high; sticky keeps
       it in view as the grid scrolls. */
    body[class*="categorypath-genres-"] .sidebar-main {
        position: sticky;
        top: 1rem;
        align-self: flex-start;
    }
}

/* ---- Top Sellers horizontal strip (genre child pages) ---- */
/* Top Sellers now lives in a strip at the top — hide the sidebar copy
   (genre pages AND format pages). */
body[class*="categorypath-genres-"] .sidebar-main .wmdm-top-sellers,
body[class*="wmdm-format-page"] .sidebar-main .wmdm-top-sellers {
    display: none;
}
/* Panel + gradient header to match the Top Creators widget. */
.wmdm-topsellers-strip {
    border: 1px solid var(--border-light, rgba(0, 0, 0, .12));
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 1.75rem;
}
.wmdm-topsellers-strip__head {
    background: linear-gradient(135deg, var(--primary, #2bb3c0) 0%, #a30222 100%);
    padding: 16px 20px;
}
.wmdm-topsellers-strip__title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wmdm-topsellers-strip__title svg {
    width: 20px;
    height: 20px;
}
.wmdm-topsellers-strip__list {
    list-style: none;
    margin: 0;
    padding: 16px 20px;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Without this, scroll-snap-align:start snaps the first card flush to the
       container edge and scrolls past the 20px left padding (cards touch the
       border). scroll-padding keeps the snap inside the padding. */
    scroll-padding: 0 20px;
}
.wmdm-topsellers-strip__item {
    flex: 0 0 150px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}
.wmdm-topsellers-strip__media {
    position: relative;
}
.wmdm-topsellers-strip__thumb {
    display: block;
}
.wmdm-topsellers-strip__thumb img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--bg-elevated);
}
/* play + queue buttons, same pairing/style as the front-page Top Sellers cards */
.wmdm-topsellers-strip__actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
}
.wmdm-topsellers-strip__actions .wmdm-top-seller-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.wmdm-topsellers-strip__actions .wmdm-top-seller-btn--play {
    background: var(--primary, #2bb3c0);
}
.wmdm-topsellers-strip__actions .wmdm-top-seller-btn--cue {
    background: #fff;
    border: 1px solid var(--border-light);
}
.wmdm-topsellers-strip__actions .wmdm-top-seller-btn svg {
    width: 16px;
    height: 16px;
}
.wmdm-topsellers-strip__name {
    margin: .5rem 0 .2rem;
    font-size: .85rem;
    line-height: 1.3;
    color: var(--text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wmdm-topsellers-strip__name:hover {
    color: var(--primary);
}
.wmdm-topsellers-strip__creator {
    font-size: .78rem;
    color: var(--text-40);
    margin-bottom: .2rem;
}
.wmdm-topsellers-strip__creator a {
    color: var(--text-40);
    text-decoration: none;
}
.wmdm-topsellers-strip__creator a:hover {
    color: var(--primary);
    text-decoration: underline;
}
.wmdm-topsellers-strip__price .price {
    font-weight: 700;
    color: var(--text);
    font-size: .9rem;
}
.wmdm-topsellers-strip__price .price--old {
    color: var(--text-40);
    text-decoration: line-through;
    font-size: .8rem;
    margin-left: .35rem;
}

/* ---- FAQ (matches the .wmdm-faq markup from faq/accordion.phtml) ---- */
.wmdm-faq {
    margin: 2.5rem 0 1.5rem;
    max-width: 920px;
}
.wmdm-faq__heading {
    font-size: 1.4rem;
    color: var(--text);
    margin: 0 0 1rem;
}
.wmdm-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wmdm-faq__item {
    border-bottom: 1px solid var(--border-light);
}
.wmdm-faq__q {
    cursor: pointer;
    padding: 1rem 0;
    font-weight: 600;
    color: var(--text);
    list-style: none;
    position: relative;
    padding-right: 1.5rem;
}
.wmdm-faq__q::-webkit-details-marker {
    display: none;
}
.wmdm-faq__q::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--primary);
}
details[open] > .wmdm-faq__q::after {
    content: '\2212'; /* minus */
}
.wmdm-faq__a {
    padding: 0 0 1.1rem;
    color: var(--text-80);
    line-height: 1.65;
}

/* Genre Briefing sidebar panel — sits below the "Become a Creator" CTA,
   matching the sidebar card feel (border, radius, padding, uppercase title). */
.wmdm-genre-briefing {
    margin-top: 16px;
    padding: 16px 16px 22px;
    border: 1px solid var(--border-light, rgba(0, 0, 0, .12));
    border-radius: 8px;
}
.wmdm-genre-briefing .block-title {
    margin: 0 0 10px;
}
.wmdm-genre-briefing .block-title strong {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-40, rgba(0, 0, 0, .55));
}
/* Namedrop — the hero of the card */
.wmdm-genre-briefing .gb-refs {
    margin: 0 0 10px;
    line-height: 1.5;
}
.wmdm-genre-briefing .gb-refs-label {
    display: block;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--text-40, rgba(0, 0, 0, .5));
    margin-bottom: 2px;
}
.wmdm-genre-briefing .gb-refs-list {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, inherit);
}
.wmdm-genre-briefing .gb-counts {
    font-size: 12px;
    color: var(--text-80, rgba(0, 0, 0, .7));
    margin: 0 0 8px;
}
/* Related-genre cross-links (format pages) */
.wmdm-genre-briefing .gb-genres {
    margin: 0 0 10px;
}
.wmdm-genre-briefing .gb-genres-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.wmdm-genre-briefing .gb-genre-link {
    display: inline-block;
    font-size: 12px;
    line-height: 1.2;
    padding: 4px 9px;
    border: 1px solid var(--border-light, rgba(0, 0, 0, .12));
    border-radius: 999px;
    color: var(--text-80, rgba(0, 0, 0, .7));
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.wmdm-genre-briefing .gb-genre-link:hover {
    border-color: var(--primary, #4ade80);
    color: var(--text, inherit);
}
.wmdm-genre-briefing .gb-pulse {
    font-size: 12px;
    color: var(--text-80, rgba(0, 0, 0, .7));
    margin: 0;
}
.wmdm-genre-briefing .gb-pulse .gb-dot {
    color: #4ade80;
}
=====JS
/**
 * Copyright (c) 2026 WMDM. All rights reserved.
 *
 * Genre landing space optimisation: fold the long category description
 * behind a "See more" toggle. Self-gates to genre child pages via the body
 * class `categorypath-genres-<slug>`. No-JS degrades gracefully (full text).
 */
(function () {
    'use strict';

    function init() {
        var cls = document.body.className;
        // Genre child pages OR format (Shopbybrandpro) pages.
        if (!/categorypath-genres-/.test(cls) && !/wmdm-format-page/.test(cls)) {
            return;
        }
        var desc = document.querySelector('.category-description, .wmdm-format-description');
        if (!desc) {
            return;
        }

        // Strip the redundant lead-in heading: every genre description opens
        // with `<strong>{Genre} Music Production Resources</strong><br>` which
        // just restates the H1. Remove it (and its trailing <br>).
        var lead = desc.querySelector('strong');
        if (lead && lead.textContent.trim().length <= 60
            && lead.nextSibling && lead.nextSibling.nodeName === 'BR') {
            var br = lead.nextSibling;
            lead.remove();
            if (br && br.parentNode) {
                br.remove();
            }
        }

        // Only fold when the text is genuinely long.
        if (desc.scrollHeight <= 130) {
            return;
        }
        desc.classList.add('wmdm-desc--collapsible');

        var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'wmdm-desc-toggle';
        btn.textContent = 'See more';
        btn.setAttribute('aria-expanded', 'false');
        desc.parentNode.insertBefore(btn, desc.nextSibling);

        btn.addEventListener('click', function () {
            var expanded = desc.classList.toggle('wmdm-desc--expanded');
            btn.textContent = expanded ? 'See less' : 'See more';
            btn.setAttribute('aria-expanded', expanded ? 'true' : 'false');
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
===== static copies
de_DE en_US es_ES fr_FR it_IT ja_JP nl_NL pl_PL pt_BR zh_Hans_CN 
1786958055
60
total 84
drwxrwxr-x 2 wmdm wmdm  4096 Aug 11 08:06 .
drwxrwxr-x 4 wmdm wmdm  4096 Aug 11 08:06 ..
-rw-rw-r-- 1 wmdm wmdm  2159 Aug 11 08:06 genre-landing.js
-rw-rw-r-- 1 wmdm wmdm  2525 Aug 11 08:06 license-handler.js