/*
 * Digitlix Theme -- Beat Store presentation, v5 "ink and paper".
 *
 * The theme deregisters the Beat Store Starter plugin's frontend stylesheet
 * (see digitlix_theme_take_over_store_styles() in functions.php) and styles the
 * plugin's markup here instead, using the theme's design tokens. One source of
 * truth, no full-bleed breakout, no !important override war. Plugin PHP/JS
 * behavior is untouched.
 *
 * Because the plugin stylesheet no longer loads, every rule the plugin relied
 * on for correct behavior is re-provided here -- most importantly the [hidden]
 * guards (search filtering, modal, drawer, and player all toggle `hidden`) and
 * the body scroll locks toggled by the plugin's JavaScript.
 *
 * The store lives in the paper world (.dlx-on-paper re-values the tokens);
 * the row that is playing inverts to ink, and the player is a full-width
 * paper bar fixed to the foot of the page.
 */

/* ------------------------------------------------------- Behavior guards */
.digitlix-store [hidden],
.digitlix-license-modal[hidden],
.digitlix-license-panel[hidden],
.digitlix-license-modal__success-actions[hidden],
.digitlix-cart-drawer[hidden],
.digitlix-cart-drawer__footer[hidden],
.digitlix-player[hidden] { display: none !important; }
/* Nothing competes with paying. The player, its panels and the accessibility
   launcher all stand down on checkout; catalog.js pauses playback to match, so
   the bar is not merely hidden while audio carries on underneath. */
body.digitlix-checkout .digitlix-player,
body.digitlix-checkout .digitlix-player-panel { display: none !important; }
body.digitlix-checkout { padding-bottom: var(--dlx-space-xl) !important; }

/* The license modal is a dialog over the whole page, so it holds the page
   still. The mini cart hangs off the cart button and does not. */
body.digitlix-modal-open { overflow: hidden; }

/* Older cached theme.js injected a table-style header row; 0.6.0 dropped it. */
.dlx-store-list-head { display: none; }

/* ------------------------------------------------------------ Store block */
.digitlix-store {
    /* One shared column template keeps every beat row aligned:
       index / sleeve / title+note / data / commerce. Every track is either
       fixed or minmax(0, fr): the header labels and the rows are separate
       grids reading this same template, and only content-independent tracks
       resolve to the same widths in both. */
    /* V10.7 columns: sleeve / title / bpm+key / mood / length / actions.
       No index column -- the reference retired row numbering. */
    --store-cols: 58px minmax(0, 1.65fr) minmax(0, .75fr) minmax(0, 1fr) minmax(0, .45fr) 210px;
    position: relative;
    color: var(--dlx-text);
}
.digitlix-store,
.digitlix-store *,
.digitlix-store *::before,
.digitlix-store *::after { box-sizing: border-box; }

/* ------------------------------------------------------------- Toolbar */
/*
 * The V10.7 working surface: one sticky bar under the site header carrying
 * the artist tabs, a quiet search field, the compact filter selects and the
 * count. It rides every catalogue, homepage included. The form inside it
 * dissolves (display: contents) so its controls sit on the same line as the
 * tabs and the count.
 */
/*
 * The catalogue toolbar. It wraps at every width, not only on a phone.
 *
 * It used to be nowrap above 620px, and the count and the Play-these button
 * are `flex: 0 0 auto` while the facet strip bottoms out at a 90px floor, so
 * between roughly 620px and 900px the row simply could not fit and pushed the
 * whole page sideways -- 87px of horizontal scroll at 768px, on a page that
 * should never scroll sideways at all. Wrapping is what the row already did
 * on a phone; doing it everywhere costs nothing at desktop widths (the items
 * fit on one line, so no line ever breaks) and removes the failure mode
 * instead of moving its breakpoint.
 *
 * The row gap is small on purpose: it is only ever seen when the row HAS
 * wrapped, and a 16px gutter between two stacked toolbar rows reads as a
 * layout gap rather than as one control strip.
 */
.dlxx-toolbar {
    position: sticky;
    top: var(--dlx-header-h);
    z-index: var(--dlx-z1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    min-width: 0;
    background: rgba(247, 247, 245, .955);
    backdrop-filter: saturate(130%) blur(16px);
    -webkit-backdrop-filter: saturate(130%) blur(16px);
    border-top: 1px solid rgba(11, 11, 13, .15);
    border-bottom: 1px solid rgba(11, 11, 13, .09);
    padding: 6px 0;
    transition: box-shadow .25s ease;
}
.dlxx-toolbar.is-stuck { box-shadow: 0 10px 28px rgba(15, 18, 22, .045); }
.dlxx-toolbar .digitlix-store__head { display: contents; }
/* The tabs give way first (they scroll); the tools and count never crush. */
.dlxx-toolbar .dlxx-facets { flex: 1 1 120px; min-width: 90px; order: -1; }
.dlxx-toolbar .dlxx-catalog__count {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}
/* Search, sort and the page actions. `flex: 0 0 auto` with nowrap meant this
   group could neither shrink nor break, so at a large text size it was the
   thing that pushed the toolbar past the viewport once the facet strip had
   already bottomed out. It may shrink and it may wrap now; it still does not
   GROW, so nothing about the desktop row changes. */
.digitlix-store__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
    flex: 0 1 auto;
}

/* The listening strip: appears under the toolbar while something plays. */
.dlx-listening {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto minmax(90px, 132px) auto;
    align-items: center;
    gap: 10px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 2px;
    border-bottom: 0 solid var(--dlx-border);
    color: #66676d;
    transition: max-height .34s var(--dlx-ease), opacity .2s ease, padding .34s var(--dlx-ease), border-width .2s ease;
}
.dlx-listening[hidden] { display: none; }
.dlx-listening.is-active {
    max-height: 48px;
    opacity: 1;
    padding: 11px 2px 12px;
    border-bottom-width: 1px;
}
.dlx-listening__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #68778b;
    box-shadow: 0 0 0 0 rgba(104, 119, 139, .18);
}
.dlx-listening.is-active .dlx-listening__dot { animation: dlx-session-pulse 1.7s ease-in-out infinite; }
@keyframes dlx-session-pulse {
    50% { opacity: .55; box-shadow: 0 0 0 5px rgba(104, 119, 139, 0); }
}
.dlx-listening__label {
    font: 600 0.625rem/1 var(--dlx-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #696b71; font-variant-numeric: tabular-nums;
}
.dlx-listening__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    font-weight: 610;
    color: #1b1c20;
}
.dlx-listening__time {
    font: 520 0.6875rem/1 var(--dlx-font);
    color: #696b71;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dlx-listening__meter {
    height: 1px;
    background: #d7d8dc;
    position: relative;
    overflow: visible;
}
.dlx-listening__meter i {
    display: block;
    height: 1px;
    width: var(--dlx-session-progress, 0%);
    background: #68778b;
    transition: width .34s linear;
    position: relative;
}
.dlx-listening__meter i::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #68778b;
}
.dlx-listening__actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 2px;
}
.dlx-listening__actions button,
.dlx-listening__actions a {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(17, 19, 22, .12);
    border-radius: 7px;
    background: transparent;
    padding: 0 9px;
    color: #565960;
    font-size: 0.5625rem;
    font-weight: 640;
    letter-spacing: .005em;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s var(--dlx-ease);
}
.dlx-listening__actions button:hover,
.dlx-listening__actions a:hover { background: #fff; border-color: rgba(17, 19, 22, .22); color: #17191d; }
.dlx-listening__actions button:active { transform: scale(.97); }
.dlx-listening__actions button.is-saved { color: #3f4d60; border-color: #9aa5b4; background: #eef0f3; }
.dlx-listening__actions .dlx-listening__add { background: #15171a; color: #fff; border-color: #15171a; min-width: 48px; justify-content: center; }
.dlx-listening__actions .dlx-listening__add:hover { background: #292c31; color: #fff; border-color: #292c31; }
@media (prefers-reduced-motion: reduce) {
    .dlx-listening,
    .dlx-listening__meter i { transition: none; }
    .dlx-listening.is-active .dlx-listening__dot { animation: none; }
}
.digitlix-store__search {
    flex: 0 1 170px;
    min-width: 120px;
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: center;
    gap: 9px;
    height: 34px;
    color: #56585f;
}
.digitlix-store__search::before {
    content: "";
    width: 11px;
    height: 11px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    position: relative;
    box-shadow: 4px 5px 0 -3.6px currentColor;
    opacity: .8;
}
.digitlix-store__search input {
    border: 0;
    background: none;
    outline: 0;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 540;
    letter-spacing: -.006em;
    color: var(--dlx-text);
}
.digitlix-store__search input::placeholder { color: #64666d; }

.dlxx-catalog__select { position: relative; max-width: 100%; }
.dlxx-catalog__select select {
    max-width: 100%;
    height: 34px;
    border: 0;
    background: transparent;
    padding: 0 22px 0 7px;
    font-size: 0.6875rem;
    font-weight: 540;
    letter-spacing: -.006em;
    color: #111;
    appearance: none;
    cursor: pointer;
}
.dlxx-catalog__select::after {
    content: "\2304";
    position: absolute;
    right: 7px;
    top: 7px;
    font-size: 0.75rem;
    color: #8b8b90;
    pointer-events: none;
}
.dlxx-catalog__select select:hover { color: #000; }
.dlxx-catalog__select select:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 2px; }

/* Live filtering applies on change; the submit is the no-JS fallback and
   the form still submits from the search field's Enter. */
.dlxx-catalog__submit {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * The toolbar cart keeps carrying [data-digitlix-cart-open] -- the drawer
 * trigger the header cart delegates to and autoOpenCart() clicks -- but the
 * V10.7 header owns the visible cart, so this one serves invisibly.
 */
.digitlix-store__cart {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Artist tabs: V10.7 filter-tab vocabulary -- bare words, an underline that
   draws in, the active one in full ink. One scrollable row, never a wall. */
.dlxx-facets-wrap { border-bottom: 1px solid var(--dlx-border); }
.dlxx-facets {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0;
    min-width: 0;
}
.dlxx-facets::-webkit-scrollbar { display: none; }
.dlxx-facet {
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    min-height: 34px;
    gap: 5px;
    padding: 4px 0 8px;
    font-size: 0.75rem;
    font-weight: 540;
    letter-spacing: -.006em;
    color: #62646b;
    transition: color var(--dlx-dur-fast) linear;
}
.dlxx-facet::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: #111;
    transition: right .25s var(--dlx-ease);
}
.dlxx-facet:hover { color: #111; }
.dlxx-facet.is-active { color: #111; }
.dlxx-facet.is-active::after { right: 0; }
.dlxx-facet span {
    font-size: 0.6875rem;
    color: var(--dlx-faint);
    font-variant-numeric: tabular-nums;
}
.dlxx-facets-toggle { display: none; }

/* Count line: quiet data on the toolbar's right. "Play these" is the one
   dark session control. */
.dlxx-catalog__count {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 10px 0;
    font-size: 0.625rem;
    font-weight: 560;
    letter-spacing: .02em;
    color: #62646b;
}
.dlxx-catalog__clear {
    border-bottom: 1px solid currentColor;
    font-size: 0.625rem;
}
.dlxx-catalog__clear:hover { color: var(--dlx-signal-hover); }
.dlxx-catalog__play-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    gap: 6px;
    border: 0;
    background: var(--dlx-accent);
    color: var(--dlx-accent-contrast);
    padding: 0 13px;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: -.006em;
    cursor: pointer;
    margin-left: auto;
    transition: background var(--dlx-dur-fast) ease, transform .16s var(--dlx-ease);
}
.dlxx-catalog__play-page:hover { background: #292c31; }
.dlxx-catalog__play-page:active { transform: scale(.97); }
.dlxx-catalog__play-page span { font-size: 0.625rem; }

/* Live filtering: dim while the new rows are on their way. */
.digitlix-store__list.is-loading { opacity: .45; transition: opacity var(--dlx-dur) var(--dlx-ease); }

/* Fresh rows settle in with one short stagger after the content changes. */
.dlx-track.dlx-row-enter { animation: dlx-row-enter .32s var(--dlx-ease) both; }
@keyframes dlx-row-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dlx-track.dlx-row-enter { animation: none; }
}

/* -------------------------------------------- Beat Transfer (signature) */
/*
 * The digitLIX signature: when a listener deliberately starts a beat, its
 * fingerprint packet travels from where it was chosen into the session
 * player, trailing a hairline that fades before arrival. Once, on intent,
 * never looping. theme.js builds and animates these with WAAPI.
 */
.dlx-beat-transfer {
    position: fixed;
    z-index: 100450;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    pointer-events: none;
    display: grid;
    place-items: center;
    border: 1px solid rgba(211, 217, 226, .26);
    border-radius: 8px;
    background: #17191d;
    color: #d4dae3;
    box-shadow: 0 8px 26px rgba(8, 10, 13, .18);
    overflow: hidden;
    will-change: transform, opacity;
}
.dlx-beat-transfer::before {
    content: "DLX";
    position: absolute;
    left: 5px;
    top: 5px;
    color: #8993a2;
    font: 650 0.5625rem/1 var(--dlx-font);
    letter-spacing: .1em; font-variant-numeric: tabular-nums;
}
.dlx-beat-transfer__letter {
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: -.06em;
    transform: translateY(-1px);
}
.dlx-beat-transfer__bars {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    height: 7px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    opacity: .72;
}
.dlx-beat-transfer__bars i {
    display: block;
    flex: 1;
    min-width: 1px;
    height: var(--h, 4px);
    background: #8995a6;
    border-radius: 1px;
}
.dlx-beat-transfer-tail {
    position: fixed;
    z-index: 100449;
    height: 1px;
    transform-origin: 0 50%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, rgba(104, 119, 139, 0), rgba(104, 119, 139, .44), rgba(104, 119, 139, 0));
    will-change: transform, opacity;
}
.digitlix-player__art.dlx-transfer-receive { position: relative; }
.digitlix-player__art-ring {
    position: fixed;
    z-index: 100448;
    pointer-events: none;
    border: 1px solid rgba(104, 119, 139, .38);
    border-radius: 10px;
    animation: dlx-receive .48s var(--dlx-ease) both;
}
@keyframes dlx-receive {
    0% { opacity: 0; transform: scale(.82); }
    45% { opacity: 1; transform: scale(1.08); }
    100% { opacity: 0; transform: scale(1.18); }
}

/* The cue flash: one light sweep across the sleeve that just caught. */
.dlx-track.dlx-cue-flash .dlx-track__art::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    width: 32%;
    left: -40%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    animation: dlx-thumb-cue .5s var(--dlx-ease) both;
}
@keyframes dlx-thumb-cue { to { left: 112%; } }
@media (prefers-reduced-motion: reduce) {
    .dlx-beat-transfer,
    .dlx-beat-transfer-tail,
    .digitlix-player__art-ring { display: none !important; }
    .dlx-track.dlx-cue-flash .dlx-track__art::before { animation: none; content: none; }
}

.digitlix-store__no-results,
.digitlix-store__empty {
    margin: 0;
    color: var(--dlx-muted);
    padding: var(--dlx-space-2xl) 0;
    border-bottom: 1px solid var(--dlx-border);
}
.digitlix-store__no-results { margin-top: var(--dlx-space-sm); }

/* ------------------------------------------------------------- The rows */

/* V10.7 has no column-label row: the rows carry their own hierarchy. */
.dlx-catalog-head { display: none; }
.dlx-catalog-head + .dlx-shelf { border-top-color: rgba(11, 11, 13, .22); }

.dlx-shelf { border-top: 1px solid rgba(11, 11, 13, .22); }

.dlx-track {
    border-bottom: 1px solid rgba(11, 11, 13, .085);
    position: relative;
}

/* The scan line. Flat, calm, clickable to preview; the whole row is a
   working surface, not a card. */
.dlx-track__main {
    position: relative;
    display: grid;
    grid-template-columns: var(--store-cols);
    gap: 16px;
    align-items: center;
    min-height: 84px;
    padding: 10px 8px 10px 0;
    cursor: pointer;
    transition: background .16s ease;
}
.dlx-track:hover .dlx-track__main { background: #fff; }

/*
 * The playing row is a tiny timeline: a soft slate tint fills to the
 * playhead, a hairline marks the position, and a 2px rule holds the left
 * edge. theme.js publishes --dlx-track-progress on the row.
 */
.dlx-track { --dlx-track-progress: 0%; }
.dlx-track.is-playing .dlx-track__main,
.dlx-track.is-active .dlx-track__main {
    background:
        linear-gradient(90deg, rgba(104, 119, 139, .055) 0 var(--dlx-track-progress), transparent var(--dlx-track-progress) 100%),
        #f0f2f4;
}
.dlx-track.is-playing .dlx-track__main::before,
.dlx-track.is-active .dlx-track__main::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 2px;
    border-radius: 2px;
    background: #677488;
}
.dlx-track.is-playing .dlx-track__main::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: 10px;
    bottom: 10px;
    left: var(--dlx-track-progress);
    width: 1px;
    background: rgba(104, 119, 139, .18);
    transition: left .34s linear;
}
.dlx-track.is-playing .dlx-track__id h3 a { color: var(--dlx-text); }

/*
 * The state chip: "PLAYING" beside the title, the V10.7 way. Featured/new
 * tags borrow the same chip at rest.
 */
.dlx-track__flag {
    display: none;
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: 0.5rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    padding: 4px 5px;
    border-radius: 4px;
    background: #e8ebef;
    color: #5d6879;
    white-space: nowrap;
}
.dlx-track.is-featured .dlx-track__flag,
.dlx-track.is-new .dlx-track__flag,
.dlx-track.is-playing .dlx-track__flag { display: inline-flex; align-items: center; gap: 5px; }
.dlx-track__eq { display: none !important; }
.dlx-track__state { display: none; }
.dlx-track.is-playing .dlx-track__state { display: inline; }
.dlx-track.is-playing .dlx-track__tag { display: none; }

/* The active sleeve keeps time: a tiny equalizer strip over its foot. */
.dlx-track.is-playing .dlx-track__art::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 6px;
    height: 7px;
    background: repeating-linear-gradient(90deg, var(--dlx-bg) 0 2px, transparent 2px 4px);
    animation: dlx-eq-move .55s steps(4) infinite;
    opacity: .65;
    pointer-events: none;
}
@keyframes dlx-eq-move { 50% { transform: scaleY(.3); } }
@media (prefers-reduced-motion: reduce) {
    .dlx-track.is-playing .dlx-track__art::after { animation: none; }
}

/* The deterministic beat fingerprint under the title (theme.js seeds it
   from the beat's own name): identity, not ornament. */
.dlx-beat-fp {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 9px;
    margin-top: 7px;
    opacity: .36;
    transition: opacity .2s ease, transform .25s var(--dlx-ease);
}
.dlx-beat-fp i {
    display: block;
    width: 2px;
    height: var(--h, 5px);
    min-height: 2px;
    background: #676b73;
    border-radius: 1px;
    transform-origin: bottom;
}
.dlx-track:hover .dlx-beat-fp { opacity: .58; transform: translateX(1px); }
.dlx-track.is-playing .dlx-beat-fp { opacity: .82; }
.dlx-track.is-playing .dlx-beat-fp i {
    animation: dlx-fp .55s ease-in-out infinite alternate;
    animation-delay: calc(var(--i, 0) * 42ms);
}
@keyframes dlx-fp { to { transform: scaleY(.48); } }
@media (prefers-reduced-motion: reduce) {
    .dlx-track.is-playing .dlx-beat-fp i { animation: none; }
}

/* Row numbering removed (user call): the span stays in plugin markup but
   renders nothing and holds no column. */
.dlx-track__index { display: none; }

.dlx-track__art {
    position: relative;
    width: 54px;
    height: 54px;
    margin-left: 8px;
    border-radius: 7px;
    overflow: hidden;
    transition: transform .32s var(--dlx-ease), filter .25s ease;
}
.dlx-track__art img {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: cover;
}
@media (hover: hover) {
    .dlx-track:hover .dlx-track__art { transform: scale(1.035); }
}
.dlx-track.is-playing .dlx-track__art { filter: contrast(1.03); }
.dlx-track__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(10, 10, 12, .62);
    backdrop-filter: blur(2px);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
}
.dlx-track:hover .dlx-track__play,
.dlx-track__play:focus-visible,
.dlx-track.is-playing .dlx-track__play { opacity: 1; }
.dlx-track.is-playing .dlx-track__play { background: rgba(10, 10, 12, .54); }
.digitlix-beat__play-icon { font-size: 0.8125rem; }

.dlx-track__id { min-width: 0; position: relative; }
.dlx-track__id h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 620;
    letter-spacing: -.018em;
    line-height: 1.16;
    display: flex;
    transition: transform .28s var(--dlx-ease);
}
.dlx-track__id h3 a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    color: #171719;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-block: 2px;
}
.dlx-track__id h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dlx-track__id > p {
    overflow: hidden;
    margin: 2px 0 0;
    color: #62636a;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (hover: hover) {
    .dlx-track:hover .dlx-track__id h3 { transform: translateX(2px); }
}

/* BPM leads, key seats under it. */
.dlx-track__meta { min-width: 0; line-height: 1.24; }
.dlx-track__meta b {
    display: block;
    font-size: 0.6875rem;
    font-weight: 550;
    white-space: nowrap;
}
.dlx-track__meta small {
    display: block;
    font-size: 0.6875rem;
    font-weight: 540;
    color: #62636a;
    margin-top: 2px;
    white-space: nowrap;
}

/* Moods and length: quiet data columns. */
.dlx-track__mood {
    font-size: 0.6875rem;
    color: #62636a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.dlx-track__length {
    font-family: var(--dlx-font);
    font-size: 0.6875rem;
    font-weight: 540;
    color: #62636a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Save / more / Add ride together on the right. */
.dlx-track__buy {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-right: 0;
}
.dlx-track__price { display: none; }

/* Add is the primary row action: small, obvious, priced. */
.dlx-track__choose {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 38px;
    min-width: 101px;
    border: 1px solid rgba(11, 11, 13, .14);
    border-radius: 8px;
    background: #fff;
    color: #161619;
    padding: 0 11px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .18s var(--dlx-ease);
}
.dlx-track__choose > span { font-size: 0.6875rem; font-weight: 620; letter-spacing: -.008em; }
.dlx-track__choose > span::after {
    content: "\00a0+";
    opacity: 0;
    display: inline-block;
    transform: translateX(-2px);
    transition: opacity .16s ease, transform .2s var(--dlx-ease);
}
.dlx-track__choose small { font-size: 0.5625rem; font-weight: 560; color: #62646b; }
.dlx-track__choose small span,
.dlx-track__choose small bdi { display: inline; color: inherit; font: inherit; }
/*
 * The price sub-label is the one thing in the buy cell that can give way.
 * The button sits in a fixed 210px column and sets white-space: nowrap, so at
 * a large text size the action word plus the price ran straight past the
 * column and took the page with it -- 9px of horizontal scroll at 1265px.
 * The button may shrink to its 101px floor now, and the price truncates
 * inside it. The action word never truncates: it is the part that says what
 * the button does.
 */
.dlx-track__buy { min-width: 0; }
.dlx-track__choose { max-width: 100%; overflow: hidden; }
.dlx-track__choose > span { flex: none; }
.dlx-track__choose small { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dlx-track__choose:hover,
.dlx-track__choose:focus-visible {
    background: #111;
    border-color: #111;
    color: #fff;
}
.dlx-track__choose:hover > span::after { opacity: 1; transform: none; }
.dlx-track__choose:hover small { color: #cfd1d5; }
.dlx-track__choose:active { transform: scale(.975); }

/* Heart and the row's more/demo/share controls: 34px soft-radius ghosts.
   In catalogue rows the injected demo/share pair serves from behind the
   ••• menu (its items .click() them), so the buttons themselves stay out
   of the row line. */
.dlxx-row-actions { display: inline-flex; align-items: center; gap: 4px; }
.dlx-track__buy .dlxx-row-actions { display: none; }
.dlxx-icon-button,
.dlxx-save,
.dlx-track__more-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6f7178;
    padding: 0;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.dlxx-icon-button svg,
.dlxx-save svg { width: 15px; height: 15px; }
.dlxx-icon-button:hover,
.dlxx-save:hover,
.dlx-track__more-btn:hover {
    background: #e9e9e6;
    color: #111;
}
.dlxx-save.is-saved { color: #4f5e72; background: #eceff3; }
.dlxx-save.dlx-save-pop { animation: dlx-save-pop .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dlx-save-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.28); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .dlxx-save.dlx-save-pop { animation: none; }
}

/*
 * The ••• affordance whispers until the row is engaged -- but it whispered at
 * opacity .44, which composited the glyph to #bdbdbd on paper: 1.6:1, a
 * control that is text and is very nearly invisible. The quiet now comes from
 * the grey alone (#6f7178, 4.7:1) and the row still answers on hover by going
 * to full ink with a backing.
 */
.dlx-track__more-btn {
    font-size: 0.8125rem;
    letter-spacing: 1px;
    opacity: 1;
}
.dlx-track:hover .dlx-track__more-btn,
.dlx-track:focus-within .dlx-track__more-btn,
.dlx-track.is-playing .dlx-track__more-btn { opacity: 1; }

/* One contextual menu, reused for every track (theme.js positions it). Its
   items only reach behaviour that already exists elsewhere on the page. */
.dlx-track-menu {
    position: fixed;
    z-index: 120;
    width: 240px;
    background: rgba(250, 250, 252, .985);
    border: 1px solid rgba(0, 0, 0, .11);
    border-radius: 12px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .16);
    padding: 7px;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform-origin: top right;
    animation: dlx-menu-in .16s var(--dlx-ease) both;
}
.dlx-track-menu[hidden] { display: none; }
@keyframes dlx-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to { opacity: 1; transform: none; }
}
.dlx-track-menu__head {
    padding: 10px 10px 9px;
    border-bottom: 1px solid var(--dlx-border);
    margin-bottom: 5px;
}
.dlx-track-menu__head strong {
    display: block;
    font-size: 0.75rem;
    font-weight: 620;
    color: #111;
}
.dlx-track-menu__head span {
    display: block;
    font-size: 0.5625rem;
    color: #66686f;
    margin-top: 2px;
}
.dlx-track-menu button,
.dlx-track-menu a {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 7px;
    background: transparent;
    padding: 0 10px;
    text-align: left;
    color: #2a2a2d;
    font-size: 0.6875rem;
    font-weight: 540;
    cursor: pointer;
}
.dlx-track-menu button:hover,
.dlx-track-menu a:hover { background: #ececef; }
.dlx-track-menu button span,
.dlx-track-menu a span { color: #6a6c72; font-size: 0.5625rem; }
@media (prefers-reduced-motion: reduce) {
    .dlx-track-menu { animation: none; }
}

/* ------------------------------------------------------ The open track */
/* One row opens at a time (stage.js): the sleeve at size, waveform, facts
   and the license rail unfold inside the row, so a license is buyable
   without a modal and without stopping the music. The three-column
   composition is v5's expanded row: art / detail / licenses. The art and
   detail pin to the top instead of stretching against the taller rail --
   letting them stretch stranded the facts at the bottom of a void. */
.dlx-track__open { display: none; }
.dlx-track.is-open .dlx-track__open {
    display: grid;
    grid-template-columns: minmax(180px, .5fr) 1.15fr minmax(280px, .85fr);
    gap: 20px clamp(28px, 3vw, 42px);
    align-items: start;
    padding: 28px 0 34px;
    border-top: 1px solid var(--dlx-border);
    animation: dlx-openin .35s var(--dlx-ease-out) both;
}
@keyframes dlx-openin {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.dlx-track__focus {
    margin: 0 0 6px;
    font-size: var(--dlx-fs-xs);
    font-weight: 560;
    letter-spacing: var(--dlx-track-caps);
    color: var(--dlx-faint);
}
.dlx-track__open-title {
    margin: 0 0 18px;
    font-size: clamp(1.375rem, 3vw, 2.875rem);
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: .95;
}

.dlx-track__open-art {
    grid-column: 1;
    grid-row: 1 / 3;
}
.dlx-track__open-art img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.dlx-track__detail {
    grid-column: 2;
    grid-row: 1 / 3;
    min-width: 0;
}

.dlx-track__wave {
    position: relative;
    height: 62px;
    border-top: 1px solid var(--dlx-border);
    border-bottom: 1px solid var(--dlx-border);
}
.dlx-track__wave canvas {
    position: absolute;
    inset: 6px 0;
    width: 100%;
    height: calc(100% - 12px);
    cursor: pointer;
}
.dlx-track__wave [data-dlx-elapsed] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    font-family: var(--dlx-font);
    font-size: 0.6875rem;
    color: var(--dlx-subtle);
    font-variant-numeric: tabular-nums;
}

.dlx-track__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    /* Clears the elapsed-time readout hanging under the waveform. */
    margin: 30px 0 0;
}
/* Tempo, key and length already sit on the scan line above; the panel
   hides its copies. (The markup keeps them: the homepage stage clones
   this list for its own spec strip.) */
.dlx-track__facts .dlx-fact--core { display: none; }
.dlx-track__facts div { display: flex; gap: 8px; align-items: baseline; }
.dlx-track__facts dt {
    font-size: var(--dlx-fs-xs);
    font-weight: 560;
    color: var(--dlx-faint);
}
.dlx-track__facts dd {
    margin: 0;
    font-family: var(--dlx-font);
    font-size: 0.75rem;
    color: var(--dlx-muted);
    font-variant-numeric: tabular-nums;
}

/* The license rail. */
.dlx-rail {
    grid-column: 3;
    grid-row: 1;
    border-left: 1px solid var(--dlx-border);
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dlx-rail::before {
    content: "Choose a license";
    font-size: var(--dlx-fs-xs);
    font-weight: 560;
    letter-spacing: var(--dlx-track-caps);
    color: var(--dlx-faint);
    margin-bottom: 4px;
}
.dlx-rail__opt {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 6px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--dlx-border);
    background: none;
    padding: 12px 0;
    cursor: pointer;
    transition: background var(--dlx-dur-fast) linear;
}
.dlx-rail__opt:hover { background: var(--dlx-surface-2); }
.dlx-rail__name { font-size: 0.9375rem; font-weight: 650; }
.dlx-rail__price { font-size: 1rem; font-variant-numeric: tabular-nums; }
.dlx-rail__price span, .dlx-rail__price bdi { display: inline; font: inherit; }
.dlx-rail__what {
    grid-column: 1 / 3;
    color: var(--dlx-subtle);
    font-size: var(--dlx-fs-xs);
    line-height: 1.4;
}
.dlx-rail__opt:hover .dlx-rail__name { color: var(--dlx-signal-hover); }
.dlx-rail__opt[aria-checked="true"] .dlx-rail__name { color: var(--dlx-signal-hover); }
.dlx-rail__opt[aria-checked="true"]::before {
    content: "Selected";
    grid-column: 1 / 3;
    font-size: 0.625rem;
    font-weight: 650;
    color: var(--dlx-signal-hover);
    animation: dlx-fadein var(--dlx-dur) var(--dlx-ease-out) both;
}
@keyframes dlx-fadein {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: none; }
}

.dlx-track__act { grid-column: 3; grid-row: 2; padding-left: 24px; min-width: 0; }
/* Without license options the note takes the rail's place. */
.dlx-track__open > .dlx-track__note { grid-column: 3; grid-row: 1; }
.dlx-track__add {
    width: 100%;
    min-height: 44px;
    border: 0;
    background: var(--dlx-accent);
    color: var(--dlx-accent-contrast);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
    font-size: var(--dlx-fs-ui);
    font-weight: 650;
    cursor: pointer;
    margin-top: 14px;
    transition: background var(--dlx-dur-fast) linear, color var(--dlx-dur-fast) linear;
}
.dlx-track__add { justify-content: center; }
.dlx-track__add:hover:not([disabled]) { background: var(--dlx-signal); color: #fff; }
/* Waiting for a choice, not broken. A dimmed solid button reads as a control
   that failed; an outline reads as one that is not armed yet -- and it says
   so, because the label is "Pick a license". */
.dlx-track__add[disabled] {
    background: none;
    border: 1px solid var(--dlx-border);
    color: var(--dlx-muted);
    cursor: default;
}
.dlx-track__add.is-success { background: var(--dlx-green); color: #fff; }
.dlx-track__more,
.dlx-track__similar {
    display: inline-block;
    margin-top: 14px;
    font-size: var(--dlx-fs-ui);
    border-bottom: 1px solid var(--dlx-border-strong);
    padding-bottom: 3px;
}
.dlx-track__more:hover,
.dlx-track__similar:hover { color: var(--dlx-signal-hover); border-color: currentColor; }
/* Peers on one line under the buy button: this record in full, more records
   like it, or a conversation about owning it outright. */
.dlx-track__similar,
.dlx-track__negotiate { margin-left: 18px; color: var(--dlx-muted); border-bottom-color: var(--dlx-border); }
.dlx-track__negotiate {
    display: inline-block;
    margin-top: 14px;
    padding: 0 0 3px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--dlx-border);
    font-size: var(--dlx-fs-ui);
    font-weight: 400;
    cursor: pointer;
}
.dlx-track__negotiate:hover { color: var(--dlx-signal-hover); border-color: currentColor; }
.dlx-track__note { margin: 10px 0 0; font-size: var(--dlx-fs-sm); color: var(--dlx-muted); min-height: 1em; }
.dlx-track__note.is-success { color: var(--dlx-green); }
.dlx-track__note.is-error { color: var(--dlx-danger); }
.dlx-track__promo {
    margin: 10px 0 0;
    font-size: var(--dlx-fs-xs);
    color: var(--dlx-subtle);
    line-height: 1.5;
}

/* When rows are swapped in over AJAX they enter quietly. */
.dlxx-rows-clickable .dlx-track { cursor: pointer; }

/* Filtered rows step in with a short stagger (theme.js sets --dlx-row-i).
   The global reduced-motion guard collapses the duration to nothing. */
.dlx-row-enter {
    animation: dlx-rowin .45s var(--dlx-ease-out) both;
    animation-delay: calc(var(--dlx-row-i, 0) * 24ms);
}
@keyframes dlx-rowin {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ Pagination */
.dlxx-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 26px 0;
}
.dlxx-pagination__page,
.dlxx-pagination__step {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid transparent;
    font-size: var(--dlx-fs-ui);
    color: var(--dlx-muted);
    font-variant-numeric: tabular-nums;
}
.dlxx-pagination__page:hover,
.dlxx-pagination__step:hover { color: var(--dlx-signal-hover); }
.dlxx-pagination__page.is-current {
    border-color: var(--dlx-border-strong);
    color: var(--dlx-text);
    font-weight: 650;
}
.dlxx-pagination__gap { color: var(--dlx-faint); }

/* Promo line above the catalogue, when a promotion is running. */
.dlxx-catalog__promo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--dlx-border);
    font-size: var(--dlx-fs-sm);
    color: var(--dlx-muted);
}
.dlxx-catalog__promo-tag {
    font-size: 0.625rem;
    font-weight: 650;
    color: #fff;
    background: var(--dlx-signal);
    padding: 2px 7px;
}

/* ---------------------------------------------------------- License modal */
/*
 * V10.7's centred commerce: choosing a format for THIS record. The frozen
 * markup (backdrop / dialog / header / option grid / footer) is untouched;
 * everything here is presentation. Music keeps playing behind it.
 */
.digitlix-license-modal {
    position: fixed;
    z-index: 100200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    color: #0b0b0d;
    font-family: var(--dlx-font);
}
/* The scrim carries no blur: a backdrop-filter over the whole viewport has
   to re-sample everything behind it on the frame the modal opens, which is
   the frame that has to feel instant. The tint alone reads the same. */
.digitlix-license-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(4, 5, 7, .58);
    cursor: default;
}
.digitlix-license-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(620px, 100%);
    max-height: min(760px, calc(100dvh - 44px));
    overflow: hidden auto;
    background: #f8f8f7;
    border: 1px solid rgba(11, 11, 13, .13);
    border-radius: 15px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .25), 0 1px 4px rgba(0, 0, 0, .08);
    padding: 0;
}
/*
 * The entrance, and why it is this shape.
 *
 * It used to scale. Scaling a box full of text makes the browser re-raster
 * every glyph on every frame -- the type crawls and shimmers, and because
 * three option cards were animating on their own delays INSIDE a parent
 * that was itself moving, the whole popup read as jittering rather than
 * arriving. So: no scale, one moving element, and the dialog is promoted to
 * its own compositing layer so the rise is composited from a single
 * rasterisation. The children only fade.
 *
 * The standing `will-change` costs nothing while the popup is away: the
 * guard at the top of this file gives [hidden] `display: none`, so the
 * layer only exists for as long as the dialog is actually on screen.
 */
@media (prefers-reduced-motion: no-preference) {
    .digitlix-license-modal__dialog {
        animation: dlx-modal-in .22s var(--dlx-ease) both;
        will-change: transform, opacity;
    }
    .digitlix-license-modal .digitlix-license-card,
    .digitlix-license-modal__footer { animation: dlx-modal-fade .26s .04s var(--dlx-ease) both; }
}
@keyframes dlx-modal-in {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: none; }
}
/* Children fade only: nothing moves inside the moving parent. */
@keyframes dlx-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.digitlix-license-modal__close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #e9e9e7;
    color: #303237;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, transform .2s var(--dlx-ease);
}
.digitlix-license-modal__close:hover { background: #dfdfdc; }
.digitlix-license-modal__close:active { transform: scale(.94); }
.digitlix-license-modal__header {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: start;
    padding: 26px 64px 21px 28px;
    border-bottom: 1px solid var(--dlx-border);
    margin: 0;
    background: #f8f8f7;
}
.digitlix-license-modal__header img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    background: #17191d;
    border-radius: 7px;
    margin-top: 4px;
}
.digitlix-license-modal__header p {
    margin: 0 0 5px;
    font-size: 0.5625rem;
    font-weight: 650;
    letter-spacing: .105em;
    text-transform: uppercase;
    color: #5c6068;
}
.digitlix-license-modal__header h2 {
    margin: 0;
    font-size: clamp(1.875rem, 4vw, 2.375rem);
    font-weight: 570;
    line-height: 1.04;
    letter-spacing: -.045em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.digitlix-license-modal__header span {
    display: block;
    margin-top: 6px;
    color: #666970;
    font: 540 0.6875rem/1.4 var(--dlx-font);
    letter-spacing: .015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}

/* Options stack as quiet white cards; selecting one is a decision, not a
   card animation. */
.digitlix-license-modal__panels { padding: 18px 28px 9px; }
.digitlix-license-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    border: 0;
}
.digitlix-license-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 18px;
    text-align: left;
    min-height: 0;
    border: 1px solid rgba(11, 11, 13, .1);
    border-radius: 9px;
    background: #fff;
    color: inherit;
    padding: 17px 17px 16px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .18s ease, background .18s ease, transform .22s var(--dlx-ease);
}
.digitlix-license-card:hover { border-color: rgba(11, 11, 13, .24); }
.digitlix-license-card:active { transform: scale(.99); }
.digitlix-license-card.is-selected {
    border-color: #3b414a;
    box-shadow: inset 2px 0 0 #68768a;
    background: #fff;
}
.digitlix-license-card__check {
    position: absolute;
    right: 15px;
    bottom: 13px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(17, 19, 22, .16);
    border-radius: 50%;
    font-size: 0.625rem;
    color: transparent;
    opacity: .7;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .22s var(--dlx-ease);
}
.digitlix-license-card.is-selected .digitlix-license-card__check {
    color: #fff;
    background: #68778b;
    border-color: #68778b;
    opacity: 1;
    transform: scale(1.04);
}
.digitlix-license-card__name { font-size: 0.9375rem; font-weight: 590; letter-spacing: -.018em; line-height: 1.2; }
.digitlix-license-card__price { font-size: 1.0625rem; font-weight: 610; letter-spacing: -.025em; line-height: 1.2; text-align: right; }
.digitlix-license-card__price span,
.digitlix-license-card__price bdi { display: inline; font: inherit; }
.digitlix-license-card__description {
    grid-column: 1 / -1;
    color: #5f6168;
    font-size: 0.75rem;
    line-height: 1.48;
    letter-spacing: -.003em;
    padding-right: 28px;
}
.digitlix-license-modal__empty { color: #5f6168; padding: var(--dlx-space-lg) 28px; }

.digitlix-license-modal__status {
    min-height: 1.4em;
    margin: 6px 28px 0;
    font-size: 0.75rem;
    color: #5f6168;
}
.digitlix-license-modal__status.is-success { color: #3c5a46; }
.digitlix-license-modal__status.is-error { color: #a83a2c; }

.digitlix-license-modal__footer {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 16px 28px 24px;
    background: linear-gradient(to bottom, rgba(248, 248, 247, 0), #f8f8f7 18%);
}
.digitlix-license-modal__negotiate {
    min-height: 48px;
    border: 1px solid var(--dlx-border-strong);
    border-radius: 8px;
    background: none;
    padding: 0 16px;
    font-size: 0.8125rem;
    font-weight: 580;
    color: #0b0b0d;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.digitlix-license-modal__negotiate:hover { background: rgba(11, 11, 13, .05); }
.digitlix-license-modal__negotiate[hidden] { display: none; }
/* When negotiation is absent the add button takes the whole row. */
.digitlix-license-modal__negotiate[hidden] + .digitlix-license-modal__add,
.digitlix-license-modal__footer > .digitlix-license-modal__add:first-child { grid-column: 1 / -1; }
.digitlix-license-modal__add {
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: #111;
    color: #fff;
    padding: 0 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -.012em;
    cursor: pointer;
    transition: background .2s ease, transform .22s var(--dlx-ease);
}
.digitlix-license-modal__add:hover:not([disabled]) { background: #27272b; }
.digitlix-license-modal__add:active:not([disabled]) { transform: scale(.985); }
.digitlix-license-modal__add[disabled] { opacity: .55; cursor: default; }
.digitlix-license-modal__success-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--dlx-space-md);
}
.digitlix-license-modal__success-actions a {
    font-size: 0.8125rem;
    font-weight: 560;
    border-bottom: 1px solid rgba(11, 11, 13, .38);
    padding-bottom: 3px;
}
.digitlix-license-modal__success-actions a.is-primary {
    border: 0;
    border-radius: 8px;
    background: #111;
    color: #fff;
    padding: 13px 18px;
    font-weight: 600;
}
.digitlix-license-modal__success-actions a.is-primary:hover { background: #27272b; }

/* ------------------------------------------------------------ Cart drawer */
/* A floating card in the middle of the screen, not a full-height sidebar:
   a cart holding one or two beats should be the size of one or two beats,
   with the page still visible around it. */
/*
 * A drawer, which is what it is called and was not.
 *
 * It rendered as a dialog floating in the middle of the screen, which stops
 * the session: the catalogue disappears behind a scrim and the beat you were
 * looking at is gone. Docked to the right edge it arrives from where the cart
 * button is, leaves the list visible beside it, and reads as somewhere you
 * looked rather than somewhere you were sent. The scrim lightens to match --
 * the page behind is meant to still be there.
 *
 * Layout only. Both drawer implementations -- the starter's and the one
 * catalog.js injects on pages without the shortcode -- share these class
 * names, so both move together, and the scroll-lock watchdog, the Escape and
 * outside-click handlers and the [hidden] guard all address the same elements
 * they did before.
 */
.digitlix-cart-drawer {
    position: fixed;
    z-index: 100300;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    font-family: var(--dlx-font);
    color: var(--dlx-text);
}
.digitlix-cart-drawer__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(20, 18, 12, .38);
    cursor: default;
}
.digitlix-cart-drawer__panel {
    position: relative;
    width: min(460px, 100%);
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--dlx-bg-2);
    border-left: 1px solid var(--dlx-border);
    box-shadow: -30px 0 70px rgba(20, 18, 12, .22);
    overflow: hidden;
    animation: dlx-cart-in .34s var(--dlx-ease-out) both;
}
@keyframes dlx-cart-in {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .digitlix-cart-drawer__panel { animation: none; }
}
/* On a phone it takes the width; the player still owns the bottom strip, and
   theme.js keeps padding the drawer clear of it. */
@media (max-width: 620px) {
    .digitlix-cart-drawer__panel { width: 100%; border-left: 0; }
}
.digitlix-cart-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(16, 16, 15, .18);
    padding: 30px;
}
.digitlix-cart-drawer__header p {
    margin: 0 0 10px;
    font-size: 0.6875rem;
    font-weight: 560;
    letter-spacing: .025em;
    color: #545149;
}
.digitlix-cart-drawer__header h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: .95;
}
.digitlix-cart-drawer__header h2 span {
    font-family: var(--dlx-font);
    font-size: 0.8125rem;
    color: #545149;
    vertical-align: super; font-variant-numeric: tabular-nums;
}
.digitlix-cart-drawer__header button {
    border: 0;
    background: none;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}
/* flex-basis auto (not 0): the card is sized by its contents and only
   starts scrolling the list once it reaches the height of the screen. */
.digitlix-cart-drawer__body { flex: 0 1 auto; overflow: auto; padding: 0 30px; }
.digitlix-cart-drawer__loading,
.digitlix-cart-drawer__empty { color: var(--dlx-muted); padding: 30px 0 34px; font-size: 0.875rem; }
/* The store plugin prints a decorative note glyph before the empty-cart
   line. This design carries meaning in type and rules, not in ornament --
   and inline, it ran straight into the sentence with no space. */
.digitlix-cart-drawer__empty > span:first-child { display: none; }
.digitlix-cart-drawer__empty strong {
    display: block;
    margin-bottom: 6px;
    color: #10100f;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.01em;
}
.digitlix-cart-drawer__empty p { max-width: 40ch; margin: 0; line-height: 1.5; }
.digitlix-cart-drawer__error,
.digitlix-cart-drawer__inline-error { color: #a83a2c; font-size: 0.8125rem; padding: 10px 0; }
.digitlix-cart-drawer__items { display: block; }

.digitlix-cart-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 14px;
    align-items: center;
    border-bottom: 1px solid rgba(16, 16, 15, .18);
    padding: 16px 0;
}
.digitlix-cart-item img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    background: #d9d5cd;
}
.digitlix-cart-item__details { min-width: 0; }
.digitlix-cart-item__details strong {
    display: block;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.012em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.digitlix-cart-item__details span {
    display: block;
    margin-top: 4px;
    font-family: var(--dlx-font);
    font-size: 0.6875rem;
    color: #545149; font-variant-numeric: tabular-nums;
}
.digitlix-cart-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.digitlix-cart-item__price { font-size: 0.875rem; font-weight: 650; white-space: nowrap; }
.digitlix-cart-item__price span,
.digitlix-cart-item__price bdi { display: inline; font: inherit; }
/* Auto width: the label is the word "Remove", not a glyph, so a fixed
   30px box pushed the text out past the edge of the panel. */
.digitlix-cart-item__side button {
    min-height: 28px;
    border: 1px solid rgba(16, 16, 15, .18);
    border-radius: 999px;
    background: none;
    padding: 0 11px;
    font-family: inherit;
    font-size: 0.6875rem;
    letter-spacing: .01em;
    color: #545149;
    cursor: pointer;
    white-space: nowrap;
}
.digitlix-cart-item__side button:hover { color: #a83a2c; border-color: currentColor; }

/* The buy-one-get-one nudge, only when exactly one lease is in the cart.
   A footnote under the list rather than a boxed callout: a bordered panel
   for one quiet sentence read as an empty rectangle in a small cart. */
.dlx-drawer-nudge {
    margin: 14px 0 2px;
    border: 0;
    padding: 12px 0 0;
    font-size: 0.75rem;
    color: #545149;
    line-height: 1.5;
}
.dlx-drawer-nudge strong { color: #10100f; }
.dlx-drawer-nudge a { border-bottom: 1px solid currentColor; font-weight: 650; }
.dlx-drawer-nudge a:hover { color: #1d3aa6; }

/* Two actions, side by side: keep browsing, or pay. The subtotal spans the
   row above them so the amount reads as the heading of both. */
.digitlix-cart-drawer__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border-top: 1px solid rgba(16, 16, 15, .18);
    padding: 22px 30px;
}
.digitlix-cart-drawer__subtotal {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    font-size: 0.875rem;
}
.digitlix-cart-drawer__subtotal strong { font-size: 1.125rem; font-weight: 650; }
.digitlix-cart-drawer__subtotal strong span,
.digitlix-cart-drawer__subtotal strong bdi { display: inline; font: inherit; }

/* Buy-one-get-one, spelled out in the drawer. The store plugin's snapshot
   carries the pre-fee subtotal only, so without these the drawer showed the
   full price of two beats with no sign the second was free -- at the exact
   moment the offer is meant to be doing its work. The discount reads in the
   accent so the eye catches the saving, and the total below it is the figure
   that will actually be charged. */
.digitlix-cart-drawer__discount,
.digitlix-cart-drawer__total {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.875rem;
}
.digitlix-cart-drawer__discount[hidden],
.digitlix-cart-drawer__total[hidden] { display: none !important; }
.digitlix-cart-drawer__discount { margin-bottom: 4px; color: #1d3aa6; }
.digitlix-cart-drawer__discount strong { font-size: 1rem; font-weight: 650; }
.digitlix-cart-drawer__total {
    margin-bottom: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(16, 16, 15, .18);
}
.digitlix-cart-drawer__total strong { font-size: 1.25rem; font-weight: 700; }

.digitlix-cart-drawer__offer { grid-column: 1 / -1; }
.digitlix-cart-drawer__offer[hidden] { display: none !important; }
/* The shared note styling assumes a paper section; inside the drawer it only
   needs to stop reserving a section's worth of space beneath itself. */
.digitlix-cart-drawer__offer .dlxx-offer-note { margin: 0 0 12px; font-size: 0.8125rem; }
.digitlix-cart-drawer__checkout {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    background: #10100f;
    color: #fff;
    padding: 0 13px;
    font-size: 0.8125rem;
    font-weight: 650;
    transition: background var(--dlx-dur-fast) linear;
}
.digitlix-cart-drawer__checkout:hover { background: #2e4fd8; color: #fff; }
/* Secondary: dismisses the panel and leaves them where they were. */
.digitlix-cart-drawer__view {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(16, 16, 15, .28);
    background: none;
    color: #10100f;
    padding: 0 13px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color var(--dlx-dur-fast) linear, background var(--dlx-dur-fast) linear;
}
.digitlix-cart-drawer__view:hover { border-color: #10100f; background: rgba(16, 16, 15, .05); color: #10100f; }

/* ------------------------------------------------- Quick license chooser */
/* Opens from the player's license button, the hero's Add and the listening
   strip. Same centred V10.7 commerce surface as the catalogue modal, so
   there is one buying language wherever the choice is made. */
.dlx-quick-license {
    position: fixed;
    z-index: 100400;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    font-family: var(--dlx-font);
    color: #0b0b0d;
}
.dlx-quick-license[hidden] { display: none; }
.dlx-quick-license__scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(4, 5, 7, .58);
    cursor: default;
}
.dlx-quick-license__panel {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: min(760px, calc(100dvh - 44px));
    display: flex;
    flex-direction: column;
    overflow: hidden auto;
    background: #f8f8f7;
    border: 1px solid rgba(11, 11, 13, .13);
    border-radius: 15px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .25), 0 1px 4px rgba(0, 0, 0, .08);
}
@media (prefers-reduced-motion: no-preference) {
    .dlx-quick-license__panel {
        animation: dlx-modal-in .22s var(--dlx-ease) both;
        will-change: transform, opacity;
    }
    .dlx-quick-license__option { animation: dlx-modal-fade .26s .04s var(--dlx-ease) both; }
}
.dlx-quick-license__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    border-bottom: 1px solid var(--dlx-border);
    padding: 26px 22px 21px 28px;
}
.dlx-quick-license__head p {
    margin: 0 0 5px;
    font-size: 0.5625rem;
    font-weight: 650;
    letter-spacing: .105em;
    text-transform: uppercase;
    color: #5c6068;
}
.dlx-quick-license__head h2 {
    margin: 0;
    font-size: clamp(1.875rem, 4vw, 2.375rem);
    font-weight: 570;
    line-height: 1.04;
    letter-spacing: -.045em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dlx-quick-license__close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #e9e9e7;
    color: #303237;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, transform .2s var(--dlx-ease);
}
.dlx-quick-license__close:hover { background: #dfdfdc; }
.dlx-quick-license__close:active { transform: scale(.94); }
.dlx-quick-license__list {
    flex: 0 1 auto;
    overflow: auto;
    padding: 18px 28px 24px;
    display: grid;
    gap: 9px;
}
.dlx-quick-license__option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 18px;
    width: 100%;
    border: 1px solid rgba(11, 11, 13, .1);
    border-radius: 9px;
    background: #fff;
    padding: 17px 17px 16px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .22s var(--dlx-ease);
}
.dlx-quick-license__option:hover { border-color: rgba(11, 11, 13, .24); }
.dlx-quick-license__option:active { transform: scale(.99); }
.dlx-quick-license__option.is-adding {
    border-color: #3b414a;
    box-shadow: inset 2px 0 0 #68768a;
}
.dlx-quick-license__name { font-size: 0.9375rem; font-weight: 590; letter-spacing: -.018em; line-height: 1.2; }
.dlx-quick-license__price { font-size: 1.0625rem; font-weight: 610; letter-spacing: -.025em; white-space: nowrap; }
.dlx-quick-license__price span,
.dlx-quick-license__price bdi { display: inline; font: inherit; }
.dlx-quick-license__desc {
    grid-column: 1 / -1;
    margin-top: 2px;
    color: #5f6168;
    font-size: 0.75rem;
    line-height: 1.48;
}
.dlx-quick-license__status:empty { display: none; }
.dlx-quick-license__status {
    margin: 0;
    border-top: 1px solid var(--dlx-border);
    padding: 12px 28px;
    color: #5f6168;
    font-size: 0.75rem;
}
.dlx-quick-license__status.is-error { color: #a83a2c; }

/* -------------------------------------------------------------- Player */
/* One player for the whole site: a paper bar across the foot of the page.
   The plugin's markup is fixed and catalog.js / saves.js / theme.js insert
   controls at runtime, so every cell keeps an explicit grid assignment --
   insertion must never shift the others. */
.digitlix-player {
    position: fixed;
    z-index: var(--dlx-z3);
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    /* V10.7 zones on one grid: identity (art + copy), transport (prev /
       toggle / next, time / wave / time), then volume, tools and the CTA. */
    /*
     * The volume column is 78px rather than 60: a full range in 60px of
     * travel is about a pixel per 1.7%, which is not enough room to set a
     * level accurately with a pointer.
     *
     * The last two tracks are max-content, not auto. The controls have a
     * true minimum -- five icon buttons and a button with a word in it --
     * and an auto track will happily be compressed below it when the row
     * runs out of room, at which point the icons simply overflow their box
     * and print underneath the Add button. Pressure belongs on the two
     * flexible regions (the identity and the waveform), so their floors are
     * the ones that yield.
     */
    grid-template-columns: 58px minmax(150px, .95fr) 40px 44px 40px 46px minmax(170px, 1.6fr) 46px 72px max-content max-content;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: var(--dlx-player-h, 118px);
    padding: 12px;
    /* The shell centres at max-width and pads inside it, so its content
       column starts at centring + gutter; the bar's controls line up with
       that column, not with the centring alone. 100% rather than 100vw:
       the vw unit counts the scrollbar, the fixed bar's own width does not,
       and the difference walked the controls 7px off the column. */
    padding-left: calc(max(0px, (100% - var(--dlx-shell-max)) / 2) + var(--dlx-gutter));
    padding-right: calc(max(0px, (100% - var(--dlx-shell-max)) / 2) + var(--dlx-gutter));
    /*
     * The one piece of hardware on a paper site.
     *
     * It was paper too, which on the v5 dark shell made it the lit object in
     * a dark room; on a page that is paper throughout it became a slightly
     * different shade of the same thing, separated from the catalogue by a
     * hairline and asked to be the anchor of the whole session anyway. Ink is
     * what the palette reserved for it: the bar reads as a device the page is
     * resting on rather than another band of the page, and it is legible over
     * whatever is scrolling underneath without needing a heavier shadow.
     *
     * It self-tokenises, as it always has -- the canvas waveform and every
     * control catalog.js and saves.js inject read these off the element, and
     * the bar renders at body level where it inherits nothing useful.
     */
    /*
     * The prototype's bar is light, not ink -- near-white and translucent over
     * whatever scrolls under it, with a 2px slate hairline on its top edge and
     * a single dark round toggle as the only heavy object. The previous pass
     * had this inverted.
     *
     * It still self-tokenises: the canvas waveform and every control that
     * catalog.js and saves.js inject read their colours off this element.
     */
    border-top: 1px solid rgba(11, 11, 13, .12);
    background: rgba(250, 250, 249, .975);
    color: #0b0b0d;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .06);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    font-family: var(--dlx-font);
    --dlx-text: #0b0b0d;
    --dlx-muted: #6e6e73;
    --dlx-subtle: #6a6c73;
    --dlx-faint: #6f7178;
    --dlx-accent: #111114;
    --dlx-accent-contrast: #ffffff;
    --dlx-signal: #738198;
    --dlx-signal-hover: #5f6d82;
    --dlx-signal-soft: rgba(115, 129, 152, .16);
    --dlx-border: rgba(11, 11, 13, .12);
    --dlx-border-strong: rgba(11, 11, 13, .20);
    --dlx-surface-2: #ececef;
    --dlx-surface-3: #e8e8eb;
}
/* The slate rule along the bar's top edge. */
.digitlix-player::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: #738198;
}
.digitlix-player > * { min-width: 0; grid-row: 1; }
/* ...except the controls, which have a real minimum: min-width:0 is what
   lets a squeezed track shrink under its own contents, and these two are
   the ones that end up overlapping when it does. */
.digitlix-player__tools,
.dlx-player-cta { min-width: max-content; }

/* The re-entry when the record changes. 260ms sits in the standard band --
   long enough to read as a change, short enough that pressing next twice
   never feels like waiting. Opacity and transform only. */
@media (prefers-reduced-motion: no-preference) {
    .digitlix-player.dlx-track-in .digitlix-player__art,
    .digitlix-player.dlx-track-in .digitlix-player__details {
        animation: dlx-player-in 260ms var(--dlx-ease-out) both;
    }
    .digitlix-player.dlx-track-in .digitlix-player__details { animation-delay: 40ms; }
}
@keyframes dlx-player-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
.digitlix-player__art { grid-column: 1; }
.digitlix-player__details { grid-column: 2; }
.digitlix-player [data-dlxx-ctl="prev"] { grid-column: 3; }
.digitlix-player__toggle { grid-column: 4; }
.digitlix-player [data-dlxx-ctl="next"] { grid-column: 5; }
.digitlix-player__time[data-digitlix-current] { grid-column: 6; }
.dlx-player-wave,
.digitlix-player__progress { grid-column: 7; grid-row: 1; }
.digitlix-player__time[data-digitlix-duration] { grid-column: 8; }
.digitlix-player__volume { grid-column: 9; }
.digitlix-player__tools { grid-column: 10; }
.dlx-player-cta { grid-column: 11; }

.digitlix-player__art {
    width: 58px;
    height: 58px;
    background: #20242a;
    border-radius: 8px;
    object-fit: cover;
}
.digitlix-player__toggle {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #101114;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    transition: background .16s ease, transform .16s var(--dlx-ease);
}
.digitlix-player__toggle:hover { background: #000; transform: scale(1.04); }
.digitlix-player__toggle:active { transform: scale(.93); }

.digitlix-player__details { display: flex; min-width: 0; flex-direction: column; }
.digitlix-player__details strong,
.digitlix-player__details span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.digitlix-player__details strong { font-size: 0.90625rem; font-weight: 620; letter-spacing: -.015em; color: #131316; }
.digitlix-player__details strong a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}
.digitlix-player__details strong a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The artist style is a name, not a reading: mono is reserved for BPM,
   key and elapsed time. Set in the UI face it fits more of a long style
   string ("Future x Travis Scott x 808 Mafia Type Beat") in the same room. */
.digitlix-player__details span {
    color: #55575e;
    font-size: 0.78125rem;
    margin-top: 1px;
}
/* Tempo and key, appended by theme.js. This is information the artist is
   actively shopping on, so it reads at metadata size, not machine size:
   "168 BPM · F# maj" in mono with tabular figures. The slate tint while
   playing (below) is the whole remaining playback-state cue. */
.dlx-player-state {
    display: block;
    margin-top: 3px;
    color: #494c53;
    font: 560 0.75rem/1.25 var(--dlx-font);
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.digitlix-player.is-playing .dlx-player-state,
body.dlx-is-playing .dlx-player-state { color: #596779; }
.digitlix-player__time {
    color: #5d5f66;
    font-family: var(--dlx-font);
    font-size: 0.75rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.digitlix-player audio { display: none; }

/* The waveform lane: canvas behind, transparent range on top so dragging and
   keyboard seeking keep working. */
.dlx-player-wave {
    display: block;
    align-self: center;
    width: 100%;
    height: 48px;
    background: transparent;
    opacity: .92;
    pointer-events: none;
    transition: opacity var(--dlx-dur-fast) linear;
}
/*
 * The seek surface. The invisible range spans the ENTIRE row height in this
 * column -- a far bigger target than the 48px of drawn bars -- and it is the
 * one control here: clicking anywhere on the waveform seeks (the plugin
 * seeks on input events, so dragging scrubs live), keyboard arrows still
 * step, and no thumb or second progress bar ever shows.
 */
.digitlix-player__progress {
    align-self: stretch;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.digitlix-player__progress::-webkit-slider-runnable-track { border: 0; height: 100%; background: transparent; }
.digitlix-player__progress::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 2px; height: 48px; border: 0; background: transparent; }
.digitlix-player__progress::-moz-range-track { border: 0; background: transparent; }
.digitlix-player__progress::-moz-range-thumb { width: 2px; height: 48px; border: 0; background: transparent; }
.digitlix-player__progress:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: -2px; }
/* Hovering or grabbing the seek surface lights the waveform fully. */
.digitlix-player:has(.digitlix-player__progress:hover) .dlx-player-wave,
.digitlix-player:has(.digitlix-player__progress:active) .dlx-player-wave { opacity: 1; }

/* The volume track. It was a near-white at 28% alpha -- correct for the old
   ink bar, invisible on the light one, so the control read as empty space
   with a dot floating in it. Same greys the progress bar uses. */
.digitlix-player__volume {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: #d7d7da;
    accent-color: var(--dlx-text);
    cursor: pointer;
    opacity: .65;
    transition: opacity var(--dlx-dur-fast) linear;
}
.digitlix-player__volume:hover,
.digitlix-player__volume:focus-visible { background: #c9c9cd; opacity: 1; }
.digitlix-player__volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--dlx-text);
    margin-top: -4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.digitlix-player__volume::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: transparent; }
.digitlix-player__volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--dlx-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.digitlix-player__volume::-moz-range-track { height: 4px; border-radius: 2px; background: transparent; }
.digitlix-player__volume:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 3px; }

/* Transport and tool buttons (inserted by catalog.js and saves.js). */
.digitlix-player__ctl {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #51535a;
    padding: 0;
    cursor: pointer;
    transition: color var(--dlx-dur-fast) linear, background var(--dlx-dur-fast) linear;
}
.digitlix-player__ctl svg { width: 17px; height: 17px; }
.digitlix-player__ctl:hover { background: #e9e9e7; color: var(--dlx-text); }
/* Transport arrows sit tighter and rounder, per the reference. */
.digitlix-player [data-dlxx-ctl="prev"],
.digitlix-player [data-dlxx-ctl="next"] { border-radius: 50%; }
.digitlix-player__ctl:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 2px; }
.digitlix-player__ctl.is-on,
.digitlix-player__ctl.is-on:hover { background: var(--dlx-signal-soft); color: var(--dlx-signal); }
.digitlix-player__ctl[data-dlxx-repeat="one"] { position: relative; }
.digitlix-player__ctl[data-dlxx-repeat="one"]::after {
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: #1d3aa6;
    font-size: 0.5625rem;
    font-weight: 800;
    content: "1";
}
.digitlix-player__tools { position: relative; display: flex; align-items: center; gap: 2px; }
/* The utilities' tray. Opens upward off the ••• control; the five buttons
   inside are catalog.js's own nodes, shown at full presence with their
   names beside their icons. */
.dlx-player-more__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 16px);
    min-width: 200px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid var(--dlx-border);
    border-radius: 10px;
    box-shadow: 0 10px 34px rgba(11, 11, 13, .14);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dlx-player-more__menu[hidden] { display: none; }
.digitlix-player__tools .dlx-player-more__menu .digitlix-player__ctl {
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    padding: 0 10px;
    border-radius: 7px;
    opacity: 1;
    color: var(--dlx-text);
}
.dlx-player-more__menu .digitlix-player__ctl:hover { background: var(--dlx-surface-2); }
.dlx-player-more__label { font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
/* Utilities (shuffle, repeat, share, lyrics, queue, Record) sit back until
   the pointer comes to them; Save keeps full presence -- it is a primary
   action that happens to live in this cluster. */
.digitlix-player__tools .digitlix-player__ctl { opacity: .5; }
.digitlix-player__tools .digitlix-player__ctl:hover,
.digitlix-player__tools .digitlix-player__ctl:focus-visible { opacity: 1; }
.digitlix-player__tools .dlxx-save { border: 0; width: 40px; height: 40px; opacity: 1; }
.digitlix-player__tools .dlxx-save:hover { background: var(--dlx-surface-3); }
.digitlix-player__tools .dlxx-save.is-saved { color: var(--dlx-signal); border: 0; }

/* The buy control theme.js docks on the right of the bar. */
.dlx-player-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    background: #111;
    color: #fff;
    padding: 0 15px;
    font-size: 0.6875rem;
    font-weight: 590;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dlx-dur-fast) linear, color var(--dlx-dur-fast) linear;
}
.dlx-player-cta:hover { background: #242427; color: #fff; }
.dlx-player-cta .digitlix-beat__price { display: inline; font: inherit; }

/* Price-on-button rows: the standalone price span hides once theme.js moves
   the price onto the button. Without JS the pair renders unchanged. */
.dlx-priced-button .dlx-track__price { display: none; }

/* Where there is room, the bar breathes: wider gaps, the identity and the
   waveform sharing the flexible space, and the utility cluster set off from
   the transport by a quiet divider so it reads as one group rather than a
   run of loose icons. Below 1440 the columns barely fit as they are, so the
   generosity is conditional. */
@media (min-width: 1440px) {
    .digitlix-player {
        gap: 18px;
        /* Floors sized so the row still fits at exactly 1440: the previous
           160/280 pair overflowed the bar by 73px there while looking fine
           at 1680+. The wave keeps its flex weight, so it grows past 240 the
           moment there is room. */
        grid-template-columns: 58px minmax(190px, .9fr) 40px 44px 40px 46px minmax(280px, 1.7fr) 46px 80px max-content max-content;
    }
    .digitlix-player__tools {
        gap: 8px;
        margin-left: 4px;
        padding-left: 18px;
        border-left: 1px solid rgba(11, 11, 13, .12);
    }
    .dlx-player-cta { margin-left: 4px; }
}

/* ----------------------------------------- Playlist / lyrics / saved panels */
/* V10.7's intentional utility card: soft radius, glass wash, above the
   player on the right. Queue, lyrics and share all ride it. */
.digitlix-player-panel {
    position: fixed;
    z-index: var(--dlx-z4);
    right: 20px;
    bottom: calc(var(--dlx-player-clearance, 118px) + 14px);
    display: flex;
    width: min(390px, calc(100vw - 28px));
    max-height: min(540px, calc(100vh - var(--dlx-player-clearance, 118px) - 100px));
    flex-direction: column;
    overflow: hidden auto;
    background: rgba(250, 250, 252, .985);
    color: #0b0b0d;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-family: var(--dlx-font);
}
.digitlix-player-panel[hidden] { display: none; }
.digitlix-player-panel__head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dlx-space-sm);
    border-bottom: 1px solid var(--dlx-border);
    background: rgba(250, 250, 252, .985);
    padding: 17px 18px 14px;
}
.digitlix-player-panel__head strong { font-size: 1rem; font-weight: 600; }
/* The way out. Escape and a tap outside both already closed the panel, but a
   phone has neither an Escape key nor an obvious "outside", so the panel read
   as something that appeared and then trapped you. It sits in the sticky
   head, so it stays reachable however far the list is scrolled. */
.dlxx-panel-close {
    flex: 0 0 auto;
    align-self: center;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: -8px -8px -8px 0;
    padding: 0;
    border: 0;
    background: none;
    color: #545149;
    cursor: pointer;
    transition: color var(--dlx-dur-fast) linear;
}
.dlxx-panel-close svg { display: block; width: 18px; height: 18px; }
.dlxx-panel-close:hover { color: #10100f; }
.dlxx-panel-close:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 2px; }
.digitlix-player-panel__head span {
    overflow: hidden;
    max-width: 55%;
    color: #545149;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.digitlix-player-panel__empty { margin: 0; color: #545149; padding: var(--dlx-space-md); font-size: 0.8125rem; line-height: 1.55; }
.digitlix-player-panel__list { margin: 0; padding: var(--dlx-space-xs); list-style: none; }
.digitlix-player-panel__item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    border: 0;
    background: none;
    color: inherit;
    padding: 8px;
    text-align: left;
    cursor: pointer;
}
.digitlix-player-panel__item:hover { background: #ddd9d0; }
.digitlix-player-panel__item img,
.digitlix-player-panel__noart {
    width: 40px;
    height: 40px;
    object-fit: cover;
    background: #d9d5cd;
    display: block;
}
.digitlix-player-panel__item strong {
    display: block;
    font-size: 0.8125rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.digitlix-player-panel__meta {
    display: block;
    color: #545149;
    font-family: var(--dlx-font);
    font-size: 0.6875rem;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.digitlix-player-panel__now {
    font-size: 0.625rem;
    font-weight: 650;
    color: #1d3aa6;
}
/* Share destinations: one decision per row, hairline-divided like every list
   on the site. The copy rows carry a quiet second line; feedback lands in the
   aria-live status underneath. */
.digitlix-player-panel__share { padding: var(--dlx-space-xs) 0; }
.digitlix-player-panel__dest {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 11px var(--dlx-space-md);
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(16, 16, 15, .09);
    color: #10100f;
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--dlx-dur-fast) linear, color var(--dlx-dur-fast) linear;
}
.digitlix-player-panel__share .digitlix-player-panel__dest:last-child { border-bottom: 0; }
.digitlix-player-panel__dest strong { font-weight: 600; }
.digitlix-player-panel__dest span { font-size: 0.75rem; color: #6d6a63; }
.digitlix-player-panel__dest:hover { background: #ddd9d0; color: var(--dlx-signal-deep, #1d3aa6); }

.digitlix-player-panel__actions { display: flex; gap: 6px; padding: var(--dlx-space-sm) var(--dlx-space-md); border-top: 1px solid rgba(16, 16, 15, .14); }
.digitlix-player-panel__cta,
.digitlix-player-panel__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.75rem;
    font-weight: 650;
    border: 1px solid rgba(16, 16, 15, .3);
    background: none;
    color: inherit;
    cursor: pointer;
}
.digitlix-player-panel__cta { background: #10100f; color: #fff; border-color: #10100f; }
.digitlix-player-panel__cta:hover { background: #2e4fd8; border-color: #2e4fd8; }
.digitlix-player-panel__link:hover { border-color: #10100f; }
.digitlix-player-panel__form { display: flex; flex-direction: column; gap: 10px; padding: var(--dlx-space-md); }
.digitlix-player-panel__form input,
.digitlix-player-panel__form textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(16, 16, 15, .3);
    background: none;
    padding: 10px 0;
    outline: 0;
    font-size: 0.8125rem;
    color: inherit;
}
.digitlix-player-panel__form textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.digitlix-player-panel__form button {
    min-height: 40px;
    border: 0;
    background: #10100f;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 650;
    cursor: pointer;
}
.digitlix-player-panel__form button:hover { background: #2e4fd8; }
.digitlix-player-panel__status { min-height: 1.3em; margin: 0; padding: 0 var(--dlx-space-md) var(--dlx-space-sm); font-size: 0.75rem; }
.digitlix-player-panel__status.is-success { color: #3c5a46; }
.digitlix-player-panel__status.is-error { color: #a83a2c; }

/* The saved panel rides the same chassis. */
.dlxx-saved-panel { }
.dlxx-saved-panel__subhead {
    margin: 0;
    padding: var(--dlx-space-sm) var(--dlx-space-md) 2px;
    font-size: 0.6875rem;
    font-weight: 560;
    letter-spacing: .025em;
    color: #545149;
}
.dlxx-saved-panel__list,
.dlxx-saved-list { margin: 0; padding: var(--dlx-space-xs); list-style: none; }
.dlxx-saved-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px;
}
.dlxx-saved-item:hover { background: #ddd9d0; }
.dlxx-saved-item img { width: 40px; height: 40px; object-fit: cover; background: #d9d5cd; }
.dlxx-saved-item__meta { min-width: 0; }
.dlxx-saved-item__meta strong {
    display: block;
    font-size: 0.8125rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dlxx-saved-item__meta span {
    display: block;
    color: #545149;
    font-size: 0.6875rem;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dlxx-saved-item__act { display: flex; gap: 4px; }
.dlxx-saved-item__play,
.dlxx-saved-item__remove {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(16, 16, 15, .18);
    background: none;
    cursor: pointer;
    color: #4c4944;
    display: inline-grid;
    place-items: center;
}
.dlxx-saved-item__play:hover { color: #1d3aa6; border-color: currentColor; }
.dlxx-saved-item__remove:hover { color: #a83a2c; border-color: currentColor; }
.dlxx-saved-panel__all {
    display: block;
    padding: var(--dlx-space-sm) var(--dlx-space-md);
    border-top: 1px solid rgba(16, 16, 15, .14);
    font-size: 0.75rem;
    color: #545149;
}
.dlxx-saved-panel__all:hover { color: #10100f; }

/* --------------------------------------- Extras dialogs (demo, share, offer) */
.dlxx-modal {
    position: fixed;
    z-index: 100400;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--dlx-space-md);
    font-family: var(--dlx-font);
    color: #10100f;
}
.dlxx-modal[hidden] { display: none; }
/* Same scrim as the license modal: a tint, no viewport-wide blur to
   resample on the frame the dialog appears. */
.dlxx-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(4, 5, 7, .58);
    cursor: default;
}
/* Doubled class beats the Extras baseline sheet, which enqueues after this
   file and would otherwise win the tie with its ink-fallback surface. */
.dlxx-modal .dlxx-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: min(760px, calc(100dvh - 44px));
    overflow: hidden auto;
    background: #f8f8f7;
    color: #0b0b0d;
    border: 1px solid rgba(11, 11, 13, .13);
    border-radius: 15px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .25), 0 1px 4px rgba(0, 0, 0, .08);
    padding: 26px 28px 24px;
}
@media (prefers-reduced-motion: no-preference) {
    .dlxx-modal .dlxx-modal__dialog {
        animation: dlx-modal-in .22s var(--dlx-ease) both;
        will-change: transform, opacity;
    }
}
.dlxx-modal .dlxx-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #e9e9e7;
    color: #303237;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, transform .2s var(--dlx-ease);
}
.dlxx-modal .dlxx-modal__close:hover { background: #dfdfdc; color: var(--dlx-text); }
.dlxx-modal .dlxx-modal__close:active { transform: scale(.94); }
.dlxx-modal .dlxx-modal__eyebrow {
    margin: 0 0 5px;
    font-size: 0.5625rem;
    font-weight: 650;
    letter-spacing: .105em;
    text-transform: uppercase;
    color: #5c6068;
    opacity: 1;
}
.dlxx-modal .dlxx-modal__dialog h2,
.dlxx-modal__dialog h3 {
    margin: 0 0 6px;
    padding-right: 44px;
    font-family: var(--dlx-font-display);
    font-size: 1.875rem;
    font-weight: 570;
    letter-spacing: -.045em;
    line-height: 1.04;
}
.dlxx-modal .dlxx-modal__note { color: #5f6168; font-size: 0.75rem; opacity: 1; }
.dlxx-modal__note { color: #514e45; font-size: 0.8125rem; line-height: 1.6; margin: 0 0 18px; }

.dlxx-modal label,
.dlxx-modal .dlxx-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 560;
    letter-spacing: .025em;
    color: #545149;
    margin-bottom: 2px;
}
.dlxx-modal .dlxx-input,
.dlxx-modal input[type="text"],
.dlxx-modal input[type="email"],
.dlxx-modal input[type="number"],
.dlxx-modal textarea {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #77746d;
    background: transparent;
    padding: 12px 0;
    outline: 0;
    font-size: 0.875rem;
    color: #10100f;
    margin-bottom: 14px;
    font-family: var(--dlx-font);
}
.dlxx-modal textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
.dlxx-modal input:focus-visible,
.dlxx-modal textarea:focus-visible { border-bottom-color: #10100f; outline: none; }

.dlxx-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.75rem;
    color: #514e45;
    margin: 4px 0 10px;
}
.dlxx-consent input { margin-top: 3px; accent-color: #10100f; }
.dlxx-consent a { border-bottom: 1px solid currentColor; }

.dlxx-modal .dlxx-submit,
.dlxx-modal button[type="submit"] {
    width: 100%;
    min-height: 45px;
    border: 0;
    border-radius: 0;
    background: #10100f;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 650;
    cursor: pointer;
    margin-top: 8px;
    transition: background var(--dlx-dur-fast) linear;
}
.dlxx-modal .dlxx-submit:hover,
.dlxx-modal button[type="submit"]:hover { background: #2e4fd8; }

.dlxx-modal .dlxx-status,
.dlxx-modal .dlxx-status-msg { min-height: 1.3em; margin: 10px 0 0; font-size: 0.75rem; color: #545149; }
.dlxx-modal .dlxx-status.is-success,
.dlxx-modal .dlxx-status-msg.is-success { color: #3c5a46; }
.dlxx-modal .dlxx-status.is-error,
.dlxx-modal .dlxx-status-msg.is-error { color: #a83a2c; }
.dlxx-modal .dlxx-field > span {
    font-size: 0.6875rem;
    font-weight: 560;
    letter-spacing: .025em;
    text-transform: none;
    opacity: 1;
    color: #545149;
}

/* Share destinations: the same quiet white cards the license options use.
   Doubled class for the same reason as the dialog above -- the Extras
   baseline sheet enqueues after this one and sets its own flex row. */
.dlxx-modal .dlxx-share-links,
.dlxx-share-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 18px;
}
.dlxx-modal .dlxx-share-links a,
.dlxx-modal .dlxx-share-links button,
.dlxx-share-links a,
.dlxx-share-links button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    border: 1px solid rgba(11, 11, 13, .1);
    border-radius: 9px;
    background: #fff;
    color: inherit;
    padding: 0 12px;
    font-size: 0.75rem;
    font-weight: 590;
    letter-spacing: -.008em;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s var(--dlx-ease);
}
.dlxx-share-links a:hover,
.dlxx-share-links button:hover { border-color: rgba(11, 11, 13, .3); }
.dlxx-share-links a:active,
.dlxx-share-links button:active { transform: scale(.98); }
@media (max-width: 560px) {
    /* Doubled class again: the rule it has to beat is doubled too. */
    .dlxx-modal .dlxx-share-links,
    .dlxx-share-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------- Legacy plugin rows (own shortcode) */
/* The Beat Store Starter's own [digitlix_beat_store] markup, kept styled in
   case it renders anywhere (widgets, old pages). Same voice as .dlx-track. */
.digitlix-beat {
    display: grid;
    grid-template-columns: 50px 64px minmax(0, 1.2fr) minmax(0, .8fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 78px;
    border-bottom: 1px solid var(--dlx-border);
    padding: 10px 0;
}
/* State is a ultramarine rule at the row's edge, the same mark the nav wears: drawn
   in on hover, standing while the row is the one playing. */
.digitlix-beat:hover {
    background: var(--dlx-surface-2);
    box-shadow: inset 3px 0 0 var(--dlx-signal);
}
.digitlix-beat.is-playing,
.digitlix-beat.is-active { box-shadow: inset 3px 0 0 var(--dlx-signal); }
.digitlix-beat__play {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--dlx-border-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--dlx-text);
    padding: 0;
    cursor: pointer;
}
.digitlix-beat__play:hover { background: var(--dlx-accent); color: var(--dlx-accent-contrast); }
.digitlix-beat__play.is-playing { background: var(--dlx-signal); border-color: var(--dlx-signal); color: #fff; }
.digitlix-beat__art,
.digitlix-beat__art img { display: block; width: 64px; height: 64px; object-fit: cover; }
.digitlix-beat__identity h3 { margin: 0; font-size: var(--dlx-fs-row); font-weight: 650; letter-spacing: var(--dlx-track-display); line-height: 1.15; display: flex; }
.digitlix-beat__identity h3 a { display: inline-block; max-width: 100%; overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; }
.digitlix-beat__identity p { overflow: hidden; margin: 4px 0 0; color: var(--dlx-subtle); font-size: var(--dlx-fs-ui); text-overflow: ellipsis; white-space: nowrap; }
.digitlix-beat__meta { display: flex; flex-wrap: wrap; gap: 2px 16px; font-family: var(--dlx-font); font-size: 0.75rem; color: var(--dlx-muted); font-variant-numeric: tabular-nums;
}
.digitlix-beat__buy { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.digitlix-beat__price { font-size: var(--dlx-fs-ui); font-weight: 650; white-space: nowrap; }
.digitlix-beat__price span,
.digitlix-beat__price bdi { display: inline; font: inherit; }
.digitlix-beat__license {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    border: 0;
    background: var(--dlx-accent);
    color: var(--dlx-accent-contrast);
    padding: 0 14px;
    font-size: var(--dlx-fs-ui);
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}
.digitlix-beat__license:hover { background: var(--dlx-signal); color: #fff; }
.dlx-priced-button .digitlix-beat__price { display: none; }

/* Product-page inline preview (mostly replaced by the theme hero). */
.digitlix-single-preview { margin: var(--dlx-space-md) 0; }
.digitlix-single-preview__label {
    display: block;
    font-size: var(--dlx-fs-xs);
    font-weight: 560;
    color: var(--dlx-subtle);
    margin-bottom: 6px;
}

/* ------------------------------------------------------------ Responsive */
/* Reference breakpoints: 1180 sheds the quiet data columns, 900 keeps
   tempo/key, 620 is the four-column phone row. */
@media (max-width: 1180px) {
    .digitlix-store { --store-cols: 54px minmax(0, 1.6fr) minmax(0, .7fr) 200px; }
    .dlx-track__mood,
    .dlx-track__length { display: none; }
    .digitlix-player {
        grid-template-columns: 52px minmax(130px, .9fr) 36px 44px 36px 40px minmax(90px, 1.2fr) 40px auto auto;
        gap: 8px;
    }
    .digitlix-player__art { width: 52px; height: 52px; }
    .digitlix-player__volume { display: none; }
    .digitlix-player__tools { grid-column: 9; }
    .dlx-player-cta { grid-column: 10; }
}

@media (max-width: 900px) {
    .digitlix-store__tools { gap: 8px; }
    .dlxx-catalog__select select { padding: 0 18px 0 4px; }
    .digitlix-store { --store-cols: 46px minmax(0, 1fr) minmax(0, .55fr) auto; }
    .dlx-beat-fp { display: none; }
    .dlx-track__main { gap: 10px; min-height: 72px; }
    .dlx-track__art, .dlx-track__art img { width: 46px; height: 46px; }
    .dlx-track__id h3 { font-size: 0.875rem; }
    .dlx-track.is-open .dlx-track__open { grid-template-columns: 1fr; gap: 24px; }
    .dlx-track__open-art { grid-column: 1; grid-row: auto; max-width: 260px; }
    .dlx-track__detail { grid-column: 1; grid-row: auto; }
    .dlx-rail {
        grid-column: 1;
        grid-row: auto;
        border-left: 0;
        border-top: 1px solid var(--dlx-border);
        padding-left: 0;
        padding-top: 18px;
    }
    .dlx-track__act { grid-column: 1; grid-row: auto; padding-left: 0; }
    .dlx-track__open > .dlx-track__note { grid-column: 1; grid-row: auto; }
    /* Mobile transport keeps prev / play / next -- the controls an artist
       actually reaches for while browsing (v5 drops shuffle and repeat
       instead). Commerce stays one tap away on the right.

       Two rows, not one: a single cramped row had no room for the waveform
       at all, so a phone could play a beat but never see or scrub its
       progress -- the one thing every reference player (BeatStars included)
       treats as the centrepiece. Identity and transport stay up top; the
       full-width scrubber gets its own row underneath, sized for a thumb
       rather than a mouse. theme.js measures the rendered bar and republishes
       --dlx-player-clearance itself, so the taller bar does not need its
       fallback height tuned by hand here. */
    .digitlix-player {
        grid-template-columns: 46px 34px 52px 34px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        row-gap: 10px;
        column-gap: 10px;
        padding: 12px 16px 10px;
    }
    .digitlix-player__art { grid-column: 1; grid-row: 1; width: 46px; height: 46px; }
    .digitlix-player [data-dlxx-ctl="prev"] { grid-column: 2; grid-row: 1; }
    .digitlix-player__toggle { grid-column: 3; grid-row: 1; width: 52px; height: 52px; }
    .digitlix-player [data-dlxx-ctl="next"] { grid-column: 4; grid-row: 1; }
    .digitlix-player [data-dlxx-ctl="prev"],
    .digitlix-player [data-dlxx-ctl="next"] { width: 34px; }
    .digitlix-player__details { grid-column: 5; grid-row: 1; }
    .digitlix-player__volume { display: none; }
    .dlx-player-cta { grid-column: 6; grid-row: 1; min-height: 38px; padding: 0 12px; }

    .digitlix-player__time[data-digitlix-current] { grid-column: 1; grid-row: 2; }
    .dlx-player-wave { grid-column: 2 / 6; grid-row: 2; height: 34px; }
    /* The finger target is taller than the drawing. */
    .digitlix-player__progress { grid-column: 2 / 6; grid-row: 2; height: 48px; align-self: center; }

    /* Save, share, lyrics and queue, in the space the duration timestamp used
       to hold. The whole tools cluster was hidden on mobile, which left a
       phone with transport and nothing else -- no way to save a beat, send it
       to someone, or see what is queued. Putting them on the second row buys
       the room without making the bar any taller, and the remaining figure
       (elapsed) is the one that actually changes while you listen. */
    .digitlix-player__time[data-digitlix-duration] { display: none; }
    .digitlix-player__tools {
        display: flex;
        grid-column: 6;
        grid-row: 2;
        justify-content: flex-end;
        align-items: center;
        gap: 2px;
    }
    .digitlix-player__tools .digitlix-player__ctl {
        display: inline-grid;
        width: 36px;
        height: 36px;
    }
    .digitlix-player__tools .digitlix-player__ctl svg { width: 16px; height: 16px; }
    /* Shuffle and repeat stay behind: they set up a listening session rather
       than acting on the beat in front of you, and four icons is already the
       most this row can hold without squeezing the waveform. */
    .digitlix-player__tools [data-dlxx-ctl="shuffle"],
    .digitlix-player__tools [data-dlxx-ctl="repeat"] { display: none; }
    .digitlix-cart-drawer { padding: 14px; }
    .digitlix-cart-drawer__panel { width: 100%; }
    .digitlix-cart-drawer__header,
    .digitlix-cart-drawer__footer { padding-left: 22px; padding-right: 22px; }
    .digitlix-cart-drawer__body { padding: 0 22px; }
    .digitlix-license-grid { grid-template-columns: 1fr; }
    .digitlix-license-card { border-right: 0; border-bottom: 1px solid rgba(16, 16, 15, .18); }
    .digitlix-license-card:last-child { border-bottom: 0; }
    .digitlix-license-modal__footer { flex-wrap: wrap; }
}

@media (max-width: 620px) {
    /*
     * The phone toolbar: one dense sticky row. Tabs scroll, the search
     * field stays, sort steps back behind the Beats page, the count and
     * Play-these keep the session controls one thumb away.
     */
    .dlxx-toolbar { flex-wrap: wrap; gap: 4px 10px; padding: 6px 0 8px; }
    .dlxx-toolbar .dlxx-facets { flex: 1 1 100%; order: -1; }
    .digitlix-store__tools { flex: 1 1 auto; }
    .digitlix-store__search { flex: 1 1 120px; min-width: 100px; }
    .dlxx-catalog__select { display: none; }
    .dlxx-toolbar .dlxx-catalog__count { padding: 4px 0; }
    .dlxx-catalog__play-page { height: 32px; padding: 0 10px; font-size: 0.6875rem; }
    /* A facet is a tap target on a phone, not a word: side padding widens
       "All" past the 24px floor, and the first one pulls back so the row
       still starts on the margin. */
    .dlxx-facet { min-height: 38px; font-size: 0.6875rem; padding: 4px 7px 8px; }
    .dlxx-facet:first-child { margin-left: -7px; }

    /* The phone row: sleeve, title, then more and Add. The heart moves into
       the listening strip and the ••• menu keeps demo/share/negotiate. */
    .digitlix-store { --store-cols: 42px minmax(0, 1fr) auto; }
    .dlx-track__meta { display: none; }
    .dlx-track__buy .dlxx-save { display: none; }
    .dlx-track__buy { flex-wrap: nowrap; justify-content: flex-end; gap: 4px; padding-right: 4px; }
    .dlx-track__main { gap: 9px; min-height: 68px; padding-right: 4px; }
    .dlx-track__art, .dlx-track__art img { width: 42px; height: 42px; }
    .dlx-track__art { margin-left: 2px; }
    .dlx-track__choose { height: 34px; min-width: 82px; padding: 0 9px; }
    .dlx-track__choose > span { font-size: 0.6875rem; }
    .dlx-track__choose small { display: none; }
    .dlx-track__id h3 { font-size: 0.875rem; line-height: 1.25; }
    .dlx-track__id > p { font-size: 0.6875rem; }
    .dlx-track__flag { display: none !important; }

    /* The strip simplifies: Save and Add stay one tap away. */
    .dlx-listening { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
    .dlx-listening__label,
    .dlx-listening__time,
    .dlx-listening__meter { display: none; }
    .dlx-listening.is-active { max-height: 52px; padding: 9px 0 10px; }
    .dlx-listening__actions a[data-dlx-listening-similar] { display: none; }
    .dlx-listening__actions button { min-height: 34px; }

    /* Centred commerce runs nearly edge to edge. */
    .digitlix-license-modal { padding: 10px; }
    .digitlix-license-modal__dialog { border-radius: 13px; max-height: calc(100dvh - 20px); }
    .digitlix-license-modal__header { padding: 20px 56px 16px 18px; }
    .digitlix-license-modal__header h2 { font-size: 1.875rem; }
    .digitlix-license-modal__panels { padding: 13px 18px 5px; }
    .digitlix-license-card { padding: 15px 14px; }
    .digitlix-license-modal__footer { grid-template-columns: 1fr; padding: 13px 18px 18px; }
    .digitlix-license-modal__negotiate { order: 2; }
    .dlx-quick-license { padding: 10px; }
    .dlx-quick-license__panel { border-radius: 13px; max-height: calc(100dvh - 20px); }
    .dlx-quick-license__head { padding: 20px 18px 16px; }
    .dlx-quick-license__head h2 { font-size: 1.875rem; }
    .dlx-quick-license__list { padding: 13px 18px 18px; }
    /* On a phone the bar is transport + identity + cart on top, the scrubber
       under it, and the tools on a row of their own. This tier only tightens
       sizing to fit a narrower screen; it does not drop the waveform or the
       tools a second time. */
    /* Five columns, not six. The buy button used to hold a column of its own
       on the top row, and because grid columns are shared that column charged
       its ~102px to every row -- leaving 57px for the beat title, so even
       "Ambitious" truncated. Moved down beside the tools, it costs the title
       nothing and the name gets nearly three times the room. */
    .digitlix-player {
        grid-template-columns: 40px 30px 48px 30px minmax(0, 1fr);
        column-gap: 8px;
        row-gap: 8px;
        padding: 10px 14px 8px;
    }
    .digitlix-player__art { width: 40px; height: 40px; }
    .digitlix-player__toggle { width: 48px; height: 48px; }
    .digitlix-player [data-dlxx-ctl="prev"],
    .digitlix-player [data-dlxx-ctl="next"] { width: 30px; }
    .digitlix-player__details { grid-column: 5; grid-row: 1; }
    .dlx-player-cta {
        grid-column: 5 / -1;
        grid-row: 3;
        justify-self: end;
        min-height: 36px;
        padding: 0 14px;
        font-size: 0.75rem;
    }
    .digitlix-player__details strong { font-size: 0.875rem; }
    /* Timestamps cost more width than they earn at this size; the scrubber
       takes the room they give back and runs edge to edge. */
    .digitlix-player__time { display: none; }
    .dlx-player-wave { grid-column: 1 / -1; grid-row: 2; height: 32px; }
    .digitlix-player__progress { grid-column: 1 / -1; grid-row: 2; height: 46px; align-self: center; }

    /* Grid columns are shared down the whole grid, so parking four icons in
       the last column would have set that column's width for row 1 too and
       squeezed the track title to a few pixels on a 375px screen. A row of
       their own costs about 40px of height and keeps every target a
       comfortable size. */
    .digitlix-player__tools {
        grid-column: 1 / 5;
        grid-row: 3;
        justify-content: space-between;
        gap: 0;
    }
    .digitlix-player__tools .digitlix-player__ctl { width: 40px; height: 36px; }
}

/* ------------------------------------------------------- Motion guards */
@media (prefers-reduced-motion: reduce) {
    .digitlix-cart-drawer__panel { animation: none; }
}