/*
 * Digitlix Theme, core stylesheet.
 *
 * v10 direction, "paper first": the site is warm paper by default -- header,
 * hero, catalogue, licensing, account, the whole reading and buying surface.
 * Ink is reserved, not default: the footer and two short emphasis bands, and
 * that is all. Artwork carries the colour; one ultramarine marks what is
 * playing or selected, and nothing else. Corners are square.
 *
 * One typeface. Inter, with the platform's own UI face ahead of it, so an
 * Apple device renders SF Pro and everything else renders Inter -- the
 * hierarchy is carried by weight, size and spacing rather than by a second
 * voice. Music data (BPM, key, elapsed time) is set in the same face with
 * tabular figures, so columns of numbers align without a second typeface.
 *
 * Every file in the theme (beat-store.css, stage.css, woocommerce.css,
 * accessibility.css) draws from the tokens below. The same token NAMES carry
 * two palettes: :root holds the paper world, and `.dlx-on-ink` re-values the
 * surface/text tokens for the ink bands, so components written once against
 * tokens read correctly in both worlds. `.dlx-on-paper` survives as the way
 * back to paper inside an ink band, and because eleven templates and five
 * stylesheets already name it.
 *
 * Contrast (sRGB):
 *   paper world: text #10100f on #f0eee9 17.9:1   muted #5b5852   7.3:1
 *   ink world:   text #f0eee9 on #0b0b0a 18.9:1   muted #b2afa8  10.4:1
 *   signal #2e4fd8 on paper 5.6:1, deep #1d3aa6 8.2:1
 */

:root {
    /*
     * Colour: transcribed from the V10 prototype's authoritative :root -- the
     * third of its three cascading blocks, which is the one that wins. Cool
     * Apple grey rather than warm bone, and a slate accent rather than an
     * ultramarine one. Token NAMES are unchanged so all five stylesheets and
     * both plugins follow without edits.
     *
     *   V10            here
     *   --paper        --dlx-bg              #f5f5f7
     *   --paper-2      --dlx-bg-2            #ececef
     *   --surface      --dlx-surface-soft    #ffffff   (row hover, cards)
     *   --ink          --dlx-text            #0b0b0d
     *   --muted        --dlx-muted           #6e6e73
     *   --line         --dlx-border          rgba(11,11,13,.10)
     *   --line-strong  --dlx-border-strong   rgba(11,11,13,.18)
     *   --accent       --dlx-signal          #8f9db2
     *   --accent-dark  --dlx-signal-hover    #5f6d82
     */
    /* V10.7 winning cascade (the V10.3 legibility + V10.4 refined-beauty
       layers are the last to re-value these; those are the values below). */
    --dlx-bg: #f7f7f5;
    --dlx-bg-2: #efefec;
    --dlx-surface: #efefec;
    --dlx-surface-2: #e9e9ec;
    --dlx-surface-3: #e0e0e4;
    --dlx-surface-soft: #ffffff;
    --dlx-surface-input: #ffffff;
    --dlx-border: rgba(11, 11, 13, .095);
    --dlx-border-strong: rgba(11, 11, 13, .17);
    --dlx-border-soft: rgba(11, 11, 13, .07);
    --dlx-text: #0b0b0d;
    --dlx-muted: #5f6067;
    --dlx-subtle: #62646b;
    --dlx-faint: #696b71;                 /* tertiary only, never body copy */
    --dlx-accent: #111111;                /* anything you are meant to press */
    --dlx-accent-hover: #242427;
    --dlx-accent-contrast: #ffffff;       /* text on accent */
    --dlx-signal: #8a96a7;                /* state only: playing, active, live */
    --dlx-signal-hover: #586579;
    --dlx-signal-soft: rgba(138, 150, 167, .16);
    --dlx-signal-ink: #ffffff;            /* text on signal */
    --dlx-signal-deep: #586579;           /* accent on paper, hover on light */
    --dlx-green-bg: #e4ece7;
    --dlx-green: #2f6e55;
    --dlx-danger: #a83a2c;
    --dlx-info: #6e6e73;
    --dlx-offer: var(--dlx-surface-2);
    --dlx-offer-border: var(--dlx-signal);
    --dlx-offer-gold: var(--dlx-signal);
    --dlx-focus: #70809a;
    --dlx-header-bg: rgba(247, 247, 245, .94);

    /* Elevation tokens shared with beat-store/woocommerce/accessibility css */
    --dlx-face: #ffffff;
    --dlx-face-lit: #ececef;
    --dlx-face-ink: #0b0b0d;
    --dlx-rim: rgba(11, 11, 13, .10);
    --dlx-rim-lit: rgba(11, 11, 13, .18);
    --dlx-rim-dark: rgba(11, 11, 13, .30);
    --dlx-cut: 0 18px 50px rgba(10, 13, 18, .10);
    --dlx-cut-deep: 0 34px 90px rgba(10, 13, 18, .20);
    --dlx-lift: translateY(-1px);
    --dlx-press: translateY(1px);

    /* Layout: shell = min(calc(100% - 64px), 1300px) in the reference */
    --dlx-shell-max: 1300px;
    --dlx-gutter: 32px;
    --dlx-reading: 780px;
    --dlx-wide: 1180px;
    /* Two kinds of size token, and the difference is load-bearing:
       *-bar / *-h are DESIGN heights the bars size themselves from;
       --dlx-header-h and --dlx-player-clearance are MEASUREMENTS theme.js
       publishes from the rendered bars for everything else to offset
       against (sticky toolbars, panels, body padding). A bar reading its
       own published measurement back feeds the loop and grows without
       bound -- the header did exactly that, one rounding pixel per
       re-measure, until it was 650px tall. */
    --dlx-header-bar: 68px;
    --dlx-header-h: 68px;
    --dlx-player-h: 98px;
    --dlx-player-clearance: 110px;

    /* Spacing scale */
    --dlx-space-2xs: 4px;
    --dlx-space-xs: 8px;
    --dlx-space-sm: 12px;
    --dlx-space-md: 16px;
    --dlx-space-lg: 24px;
    --dlx-space-xl: 32px;
    --dlx-space-2xl: 48px;
    --dlx-section-pad: clamp(64px, 6vw + 30px, 120px);

    /* Type: one voice. The platform UI face leads, so an Apple device renders
       SF Pro Display/Text and a Windows one renders Segoe, with Inter as the
       common denominator everywhere else -- no proprietary font is shipped,
       and on the devices artists actually use the site is set in the face
       their OS is already set in. There is no second face, mono included.

       --dlx-font-display is kept as a distinct token, and still pointed at
       the same stack: five stylesheets reference it, and keeping the name
       means display type can be re-voiced later in one place rather than in
       forty rules. */
    --dlx-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", "Segoe UI", sans-serif;
    --dlx-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", "Segoe UI", sans-serif;
    /* One face, full stop. This token is kept by name because five
       stylesheets and any future rule may still reach for "mono" for a
       figure; it resolves to the same face as everything else, and figures
       line up through tabular-nums instead of through a second typeface.
       The monospaced stack it used to carry read as the generic "data UI"
       look every template ships with, and on a record label it was the one
       thing on the page that did not sound like the label. */
    --dlx-font-mono: var(--dlx-font);
    --dlx-fs-xs: 0.6875rem;   /* 11px, labels/eyebrows; nothing goes smaller */
    --dlx-fs-sm: 0.75rem;     /* 12px, secondary meta */
    --dlx-fs-ui: 0.8125rem;   /* 13px, buttons, tabs, chips */
    --dlx-fs-md: 0.875rem;    /* 14px, nav, supporting copy */
    --dlx-fs-base: 1rem;      /* 16px, body */
    --dlx-fs-lg: 1.0625rem;   /* 17px, row titles */
    --dlx-fs-h3: 1.375rem;    /* 22px */
    /*
     * The middle of the scale. The site ran two registers -- 11-18px working
     * text and 28-115px display -- with the product itself (beat titles in
     * the lists) sitting at the bottom of the first one. These three steps
     * are the missing middle, in importance order:
     *   row       the thing being sold: a beat title in any list
     *   h4        a card or panel headline
     *   display-sm a section headline that should not shout at h2 scale
     */
    --dlx-fs-row: 1.3125rem;  /* 21px */
    --dlx-fs-h4: 2rem;        /* 32px */
    --dlx-fs-display-sm: clamp(2rem, 3vw, 2.75rem); /* 32-44px */
    /* The floor matters as much as the ceiling: a 40px minimum meant every
       section heading stayed 40px on a 375px screen, where it wrapped to two
       or three lines. The vw term is unchanged, so desktop is untouched --
       only widths below roughly 620px see the lower floor. */
    --dlx-fs-h2: clamp(1.75rem, 4.5vw, 4.25rem);  /* 28-68px section headings */
    --dlx-fs-h1: clamp(2.125rem, 6vw, 6rem);      /* 34-96px page titles */
    --dlx-fs-price: 1.75rem;  /* 28px license price */
    --dlx-lh-tight: .96;
    --dlx-lh-snug: 1.35;
    --dlx-lh-body: 1.6;
    --dlx-track-caps: .025em; /* labels are sentence-cased, barely tracked */
    /* The serif set its own width and wanted the tracking relaxed to -.015em;
       a grotesque at display size does not, and left there it read loose and
       unresolved. Back to the optical values for this class of face: tight
       enough that a 68px headline reads as one object, not so tight that the
       counters close. */
    --dlx-track-display: -.055em;
    --dlx-track-display-tight: -.068em;

    /* Radii: the prototype is softly rounded, not square. Thumbs 6-7px,
       controls 7-8px, cards 12px. */
    --dlx-radius-edge: 6px;
    --dlx-radius-sm: 6px;
    --dlx-radius: 7px;
    --dlx-radius-lg: 12px;
    --dlx-radius-xl: 12px;
    --dlx-radius-pill: 999px;
    --dlx-radius-control: 8px;

    /* Controls */
    --dlx-tap: 44px;
    --dlx-control: 46px;
    --dlx-control-lg: 52px;

    /* Motion */
    --dlx-ease: cubic-bezier(.22, 1, .36, 1);
    --dlx-ease-out: cubic-bezier(.22, 1, .36, 1);
    --dlx-dur-fast: 200ms;
    --dlx-dur: 220ms;
    --dlx-dur-slow: 720ms;

    /* Layers */
    --dlx-z1: 110;  /* sticky toolbars */
    --dlx-z2: 220;  /* header */
    --dlx-z3: 260;  /* player */
    --dlx-z4: 360;  /* drawers, modals */
}

/*
 * The paper world is now :root, so `.dlx-on-paper` no longer needs to carry
 * the palette -- but it still has two jobs, and both are load-bearing.
 *
 * It paints. Eleven templates and the 404 use it as "this section is a
 * reading surface", and the rule below is what actually fills them.
 *
 * And it is the way back. Nested inside `.dlx-on-ink`, a paper component
 * would otherwise inherit the ink values; re-asserting the four tokens that
 * differ pulls it back to paper. That is why the declarations are not
 * simply deleted now that the root agrees with them.
 */
.dlx-on-paper,
.dlx-content-page,
.dlxx-modal,
.digitlix-license-modal,
.digitlix-cart-drawer,
.digitlix-player-panel,
.dlx-quick-license,
.dlx-search-overlay {
    --dlx-bg: #f7f7f5;
    --dlx-bg-2: #efefec;
    --dlx-surface: #efefec;
    --dlx-surface-2: #e9e9ec;
    --dlx-surface-3: #e0e0e4;
    --dlx-surface-soft: #ffffff;
    --dlx-surface-input: #ffffff;
    --dlx-border: rgba(11, 11, 13, .095);
    --dlx-border-strong: rgba(11, 11, 13, .17);
    --dlx-border-soft: rgba(11, 11, 13, .07);
    --dlx-text: #0b0b0d;
    --dlx-muted: #5f6067;
    --dlx-subtle: #62646b;
    --dlx-faint: #696b71;
    --dlx-accent: #111111;
    --dlx-accent-hover: #242427;
    --dlx-accent-contrast: #ffffff;
    --dlx-signal: #8a96a7;
    --dlx-signal-hover: #586579;
    --dlx-signal-soft: rgba(138, 150, 167, .16);
    --dlx-signal-ink: #ffffff;
    --dlx-green-bg: #e4ece7;
    --dlx-green: #2f6e55;
    --dlx-danger: #a83a2c;
    --dlx-info: #5f6067;
    --dlx-focus: #70809a;

    --dlx-face: #ffffff;
    --dlx-face-lit: #efefec;
    --dlx-face-ink: #0b0b0d;
    --dlx-rim: rgba(11, 11, 13, .095);
    --dlx-rim-lit: rgba(11, 11, 13, .17);
    --dlx-rim-dark: rgba(11, 11, 13, .30);
    --dlx-cut: 0 18px 50px rgba(10, 13, 18, .10);
    --dlx-cut-deep: 0 34px 90px rgba(10, 13, 18, .20);
}
.dlx-on-paper {
    background: var(--dlx-bg);
    color: var(--dlx-text);
}

/*
 * The ink world. Reserved, not default: the footer, and the two short bands
 * that step out of the page to say something once (the played playlist, the
 * exclusive line). Anything wanting ink gets the class -- there is no longer
 * a way to land on it by accident, which is the point of the inversion.
 *
 * These three already painted their own backgrounds, but drew borders and
 * secondary text from tokens; without this they would have kept dark paint
 * and taken paper's near-black muted values on top of it.
 */
.dlx-on-ink,
.dlx-collection,
.dlx-exclusive-strip,
.dlx-footer {
    --dlx-bg: #08080a;
    --dlx-bg-2: #101114;
    --dlx-surface: #15171b;
    --dlx-surface-2: #1b1e24;
    --dlx-surface-3: #20242a;
    --dlx-surface-soft: #111318;
    --dlx-surface-input: #15171b;
    --dlx-border: rgba(255, 255, 255, .14);
    --dlx-border-strong: rgba(255, 255, 255, .22);
    --dlx-border-soft: rgba(255, 255, 255, .10);
    --dlx-text: #f5f5f7;
    --dlx-muted: #b0b2b8;
    --dlx-subtle: #a3a5ab;
    --dlx-faint: #85878e;
    --dlx-accent: #f5f5f7;
    --dlx-accent-hover: #ffffff;
    --dlx-accent-contrast: #0b0b0d;
    --dlx-signal: #aeb6c3;
    --dlx-signal-hover: #cbd2dc;
    --dlx-signal-soft: rgba(174, 182, 195, .16);
    --dlx-signal-ink: #0b0b0d;
    --dlx-green-bg: #16241d;
    --dlx-green: #6fae90;
    --dlx-danger: #e88178;
    --dlx-info: #a1a1a6;
    --dlx-focus: #cbd2dc;

    --dlx-face: #15171b;
    --dlx-face-lit: #20242a;
    --dlx-face-ink: #f5f5f7;
    --dlx-rim: rgba(255, 255, 255, .12);
    --dlx-rim-lit: rgba(255, 255, 255, .22);
    --dlx-rim-dark: rgba(0, 0, 0, .5);
    --dlx-cut: 0 18px 50px rgba(0, 0, 0, .30);
    --dlx-cut-deep: 0 32px 90px rgba(0, 0, 0, .35);
}
.dlx-on-ink {
    background: var(--dlx-bg);
    color: var(--dlx-text);
}

/* ---------------------------------------------------------------- Base */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* The overscroll gutter above and below the document. Paper now, or an
       elastic scroll on iOS shows a black band past the header. */
    background: #f7f7f5;
    -webkit-text-size-adjust: 100%;
    /*
     * Reserve the scrollbar's width permanently.
     *
     * Every modal on the site locks the page with overflow:hidden, which
     * takes the scrollbar away -- and on a platform with classic (non-
     * overlay) scrollbars that hands ~15px back to the layout, so the whole
     * page, the fixed header and the centred dialog all lurch sideways at
     * the moment the popup appears. Reserving the gutter means the width
     * never changes and nothing moves. Browsers without the property keep
     * their previous behaviour.
     */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background: var(--dlx-bg);
    color: var(--dlx-text);
    font-family: var(--dlx-font);
    font-size: var(--dlx-fs-base);
    line-height: var(--dlx-lh-body);
    font-weight: 400;
    /* The prototype tracks the whole page in a hair. */
    letter-spacing: -.012em;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: #cfd6df; color: #101318; }

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
    font-family: var(--dlx-font-display);
    /* 600, not the serif's 650 and nowhere near black. Confidence at this
       size comes from the size; weight on top of it is shouting. */
    font-weight: 570;
    line-height: var(--dlx-lh-tight);
    letter-spacing: var(--dlx-track-display);
    margin: 0 0 var(--dlx-space-md);
    text-wrap: balance;
}

p { margin: 0 0 var(--dlx-space-md); }

:focus-visible {
    outline: 2px solid var(--dlx-focus);
    outline-offset: 2px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.dlx-skip-link {
    position: absolute;
    left: var(--dlx-space-md);
    top: -60px;
    z-index: 500;
    background: var(--dlx-text);
    color: var(--dlx-bg);
    padding: 10px 16px;
    font-size: var(--dlx-fs-ui);
    font-weight: 650;
    transition: top var(--dlx-dur-fast) var(--dlx-ease);
}
.dlx-skip-link:focus { top: var(--dlx-space-md); }

/* ---------------------------------------------------------------- Layout */

.dlx-site { min-height: 100vh; display: flex; flex-direction: column; }
.dlx-main { flex: 1; }

.dlx-shell,
.dlx-t-shell,
.dlx-t-wide {
    width: 100%;
    max-width: var(--dlx-shell-max);
    margin-inline: auto;
    padding-inline: var(--dlx-gutter);
}
/* These three are the same container under different names, so one nested
   inside another applied the gutter twice and inset that block from every
   sibling -- the product page's related shelf sat 22px narrower than the
   content above it. A nested shell is a pass-through. */
.dlx-shell .dlx-shell,
.dlx-shell .dlx-t-shell,
.dlx-shell .dlx-t-wide,
.dlx-t-shell .dlx-shell,
.dlx-t-shell .dlx-t-shell,
.dlx-t-shell .dlx-t-wide,
.dlx-t-wide .dlx-shell,
.dlx-t-wide .dlx-t-shell,
.dlx-t-wide .dlx-t-wide {
    max-width: none;
    padding-inline: 0;
}
.dlx-reading-width { max-width: var(--dlx-reading); }

.dlx-section { padding-block: var(--dlx-section-pad); }
.dlx-section--compact { padding-block: calc(var(--dlx-section-pad) * .6); }

/* Adjacent paper sections are separated by a hairline, exactly as the
   reference draws its catalogue border-top. V10.7's rhythm gives every
   section its own padding pair, so nothing is halved at the join. */
.dlx-on-paper + .dlx-on-paper {
    border-top: 1px solid var(--dlx-border);
}

/* Room for the fixed player. The reservation lives inside the footer, not on
   the body: body padding sits below .dlx-site, so it paints in the body
   colour (#0b0b0a) against the footer's #080807 and shows as a faint band
   under the footer whenever the two heights disagree -- which is always,
   because the footer reserves clearance too. Keeping it in one place means
   the space is footer-coloured and counted once. */
body { padding-bottom: 0; }

/* ------------------------------------------------- Labels and shared UI */

/* The label voice: the V10.7 kicker. Small caps tracked wide, quietly
   weighted -- it marks a section without competing with the title. */
.dlx-eyebrow,
.dlx-rule {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.35;
    text-transform: uppercase;
    color: #5d6470;
    margin: 0 0 13px;
}
.dlx-on-ink .dlx-eyebrow,
.dlx-on-ink .dlx-rule { color: #a5a8af; }
.dlx-rule {
    display: flex;
    align-items: center;
    gap: 14px;
}
.dlx-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dlx-border);
}

/* Music data voice */
.dlx-mono {
    font-family: var(--dlx-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.dlx-display-xl {
    font-size: var(--dlx-fs-h1);
    line-height: .94;
    letter-spacing: var(--dlx-track-display);
    font-weight: 650;
}
.dlx-display-l {
    font-size: var(--dlx-fs-h2);
    line-height: var(--dlx-lh-tight);
    letter-spacing: var(--dlx-track-display);
    font-weight: 650;
}

.dlx-heading-row { margin-bottom: var(--dlx-space-xl); }
.dlx-heading-row h1, .dlx-heading-row h2 { margin-bottom: var(--dlx-space-xs); }
.dlx-heading-row p { color: var(--dlx-muted); max-width: 560px; }

.dlx-page-title { font-size: var(--dlx-fs-h2); }

.dlx-lead { font-size: 1.125rem; line-height: 1.6; color: var(--dlx-muted); }

/* Buttons.
   Primary: a solid block with the label left and a marker right.
   Secondary: the "line action" -- text with a hairline underneath. */
.dlx-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--dlx-control);
    min-width: 190px;
    padding: 0 22px;
    background: var(--dlx-accent);
    color: var(--dlx-accent-contrast);
    border: 0;
    font-size: var(--dlx-fs-md);
    font-weight: 650;
    letter-spacing: 0;
    cursor: pointer;
    transition: transform var(--dlx-dur) var(--dlx-ease), background var(--dlx-dur-fast) linear, color var(--dlx-dur-fast) linear;
}
/* Interactive means ultramarine, on both surfaces. Paper buttons already answered
   the pointer this way; ink buttons answered in white, which read as a
   different site. One language now: point at an action, it goes to signal. */
.dlx-button:hover { transform: var(--dlx-lift); background: var(--dlx-signal); color: #fff; }
.dlx-on-paper .dlx-button:hover { background: var(--dlx-signal); color: #fff; }
.dlx-button:active { transform: var(--dlx-press); }

.dlx-button--secondary,
.dlx-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Was min-height:0, which measured 38px from its padding alone. */
    min-height: 40px;
    min-width: 0;
    padding: 8px 0;
    background: none;
    color: inherit;
    border: 0;
    border-bottom: 1px solid currentColor;
    font-size: var(--dlx-fs-ui);
    font-weight: 520;
}
.dlx-button--secondary:hover,
.dlx-text-link:hover {
    transform: none;
    background: none;
    color: var(--dlx-signal-hover);
}
.dlx-on-paper .dlx-button--secondary:hover,
.dlx-on-paper .dlx-text-link:hover { background: none; color: var(--dlx-signal-hover); }

.dlx-status { font-size: var(--dlx-fs-sm); color: var(--dlx-muted); }

/* ---------------------------------------------------------------- Header */

/* The header earns its edge.
 *
 * At the top of the page there is nothing behind it, so the rule and the
 * shadow are just decoration drawn across the start of the hero -- the bar
 * reads as part of the page. The moment anything scrolls under it, it
 * separates: a hairline, and a shadow soft enough to be felt rather than
 * seen. theme.js already maintained an is-lifted class from a sentinel at
 * the top of the body, which nothing had ever styled, so this costs no new
 * script and nothing on the scroll thread.
 *
 * The background stays near-opaque throughout. A transparent bar looks
 * better on one page and unreadable on the next, and the blur behind it is
 * only convincing when there is a surface to blur.
 */
.dlx-header {
    position: sticky;
    top: 0;
    z-index: var(--dlx-z2);
    background: var(--dlx-header-bg);
    backdrop-filter: saturate(140%) blur(18px);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    border-bottom: 1px solid transparent;
    transition: background .4s var(--dlx-ease), border-color .4s var(--dlx-ease), color .4s var(--dlx-ease);
}
.dlx-commerce-header { position: relative; }
.dlx-header.is-lifted {
    border-bottom-color: rgba(11, 11, 13, .085);
}

/*
 * On the homepage the header starts on the hero's black stage and turns to
 * paper the moment anything scrolls under it (the reference's body.at-top).
 * theme.js maintains .is-lifted from a top-of-document sentinel, so "not
 * lifted" is the same state and no new script is needed.
 */
body.home .dlx-header:not(.is-lifted) {
    background: rgba(8, 8, 10, .93);
    border-bottom-color: rgba(255, 255, 255, .09);
    color: #f5f5f7;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.home .dlx-header:not(.is-lifted) .dlx-brand { color: #f5f5f7; }
body.home .dlx-header:not(.is-lifted) .dlx-nav__list a,
body.home .dlx-header:not(.is-lifted) .dlx-account-link,
body.home .dlx-header:not(.is-lifted) .dlx-saved-link,
body.home .dlx-header:not(.is-lifted) .dlx-cart-link,
body.home .dlx-header:not(.is-lifted) .dlx-header-search__toggle { color: #e7e7ea; }
body.home .dlx-header:not(.is-lifted) .dlx-nav__list a:hover,
body.home .dlx-header:not(.is-lifted) .dlx-account-link:hover,
body.home .dlx-header:not(.is-lifted) .dlx-saved-link:hover,
body.home .dlx-header:not(.is-lifted) .dlx-cart-link:hover { color: #fff; }
body.home .dlx-header:not(.is-lifted) .dlx-account-link:hover,
body.home .dlx-header:not(.is-lifted) .dlx-saved-link:hover,
body.home .dlx-header:not(.is-lifted) .dlx-cart-link:hover,
body.home .dlx-header:not(.is-lifted) .dlx-header-search__toggle:hover { background: rgba(255, 255, 255, .07); }
body.home .dlx-header:not(.is-lifted) .dlx-cart-count { background: #f5f5f7; color: #111; }
.dlx-header__inner { gap: 24px; }

/* Markup order: brand, nav toggle, nav, then one actions cell that holds
   the search form AND the saved/account/cart links. The actions cell takes
   the flexible column; inside it the search floats centred (auto margins)
   with the links pinned right, which is the v5 composition. */
.dlx-header__inner {
    position: relative;
    max-width: var(--dlx-shell-max);
    margin-inline: auto;
    padding-inline: var(--dlx-gutter);
    min-height: var(--dlx-header-bar);
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 32px;
}

/*
 * The brand is a link whose visible content is a 13-19px wordmark, so its
 * tap area was the height of the artwork. Padded to a real target without
 * moving the mark: the flex box grows around it and the header row is taller
 * than 40px anyway, so nothing shifts.
 */
.dlx-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--dlx-text);
    /* Shrinkable, but only as wide as the mark itself: the brand sits in the
       flexible track, and without justify-self it would stretch across it and
       turn all that empty space into a link to the homepage. */
    min-width: 0;
    justify-self: start;
}
/* The V10.7 wordmark: live text, digitLIX with a slate dot after the X. */
.dlx-brand__word {
    font-family: var(--dlx-font-display);
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -.05em;
    line-height: 1;
    white-space: nowrap;
}
.dlx-brand__dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-left: 4px;
    background: #8d97a6;
    border-radius: 50%;
    transform: translateY(5px);
    transition: transform .22s var(--dlx-ease), opacity .2s ease, box-shadow .2s ease;
}
body.dlx-is-playing .dlx-brand__dot { opacity: 1; box-shadow: 0 0 0 4px rgba(104, 119, 139, .09); }
/* Legacy image mark, if a custom logo is ever set in the Customizer. */
.dlx-header .dlx-brand__logo,
.dlx-commerce-header .dlx-brand__logo {
    display: block;
    width: auto;
    height: 19px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0);
    opacity: .93;
}
body.home .dlx-header:not(.is-lifted) .dlx-brand__logo { filter: none; opacity: 1; }

.dlx-nav__list {
    display: flex;
    align-items: center;
    gap: 31px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dlx-nav__list a {
    position: relative;
    display: inline-block;
    padding-block: 7px;
    font-size: 0.8125rem;
    font-weight: 520;
    letter-spacing: -.012em;
    color: #343439;
    transition: color var(--dlx-dur-fast) linear;
}
.dlx-nav__list a:hover { color: #000; }
/* Where you are, marked the way everything else in this design marks state:
   one ultramarine rule. The nav gave no sense of place at all -- Beats and
   Licensing looked identical whether you were on them or not. Keyed off
   aria-current as well as the class, so it works for a WordPress menu and
   for the theme's own fallback list.
*
* The same rule is what hover draws, growing from the left rather than
* blinking on, so pointing at a link previews the mark the current page
* already wears. One idea doing two jobs instead of two effects competing.
* The global reduced-motion guard flattens the growth to an instant state. */
.dlx-nav__list a[aria-current="page"],
.dlx-nav__list .current-menu-item > a { color: var(--dlx-text); }
.dlx-nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    /* Full width, drawn from nothing with a scale rather than grown with a
       width: same movement, but on the compositor instead of in layout. */
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: .8;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dlx-dur) var(--dlx-ease);
}
.dlx-nav__list a:hover::after,
.dlx-nav__list a:focus-visible::after,
.dlx-nav__list a[aria-current="page"]::after,
.dlx-nav__list .current-menu-item > a::after { transform: scaleX(1); }

/* Hidden while the full nav is on show; the 1180px block below swaps them.
   Two bars that cross into an X, driven by aria-expanded so the styling
   follows the state the JS already maintains. */
.dlx-nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    margin-inline-start: -8px;
    background: none;
    border: 0;
    color: var(--dlx-text);
    cursor: pointer;
}
.dlx-nav-toggle > span:not(.screen-reader-text) {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform var(--dlx-dur) var(--dlx-ease), opacity var(--dlx-dur) linear;
}
.dlx-nav-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.dlx-nav-toggle[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* The beat search: a wide, quiet field in the middle of the header. Auto
   margins float it centred in the actions cell; the links stay right. */
.dlx-header-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
    max-width: 400px;
    margin-inline: auto;
    height: 38px;
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    /* A rule, not a box. The outlined field was the heaviest object in a
       header otherwise made of type and space -- it sat beside the wordmark
       competing with it, and a rectangle is the most app-like shape in a
       design whose whole argument is print. Underlined, it reads as a line
       of type you can write on, and the eye goes back to the logo. */
    border: 0;
    border-bottom: 1px solid var(--dlx-border);
    color: var(--dlx-muted);
    transition: border-color var(--dlx-dur-fast) linear, color var(--dlx-dur-fast) linear;
}
.dlx-header-search:hover { border-bottom-color: var(--dlx-border-strong); color: var(--dlx-text); }
/* Focus is a state, and state is what the ultramarine accent is for. */
.dlx-header-search:focus-within { border-bottom-color: var(--dlx-signal); color: var(--dlx-text); }
.dlx-header-search__toggle svg { width: 18px; height: 18px; }
.dlx-header-search__field {
    width: 100%;
    height: 36px;
    background: none;
    border: 0;
    outline: 0;
    color: var(--dlx-text);
    font-size: var(--dlx-fs-md);
    padding: 0 12px 0 0;
}
.dlx-header-search__field::placeholder { color: var(--dlx-muted); }

.dlx-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1px;
    min-width: 0;
}

/* One header-action vocabulary for search, saved, account and cart: 38px,
   icon plus a 12px word, and a soft radius-7 wash on hover. */
.dlx-account-link,
.dlx-saved-link,
.dlx-cart-link,
.dlx-header-search__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 520;
    letter-spacing: -.01em;
    color: #404046;
    cursor: pointer;
    transition: background var(--dlx-dur-fast) ease, color var(--dlx-dur-fast) ease;
}
.dlx-account-link:hover,
.dlx-saved-link:hover,
.dlx-cart-link:hover,
.dlx-header-search__toggle:hover { background: rgba(11, 11, 13, .045); color: var(--dlx-text); }
.dlx-account-link svg,
.dlx-saved-link svg,
.dlx-cart-link svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}
.dlx-header-word { white-space: nowrap; }

.dlx-saved-count {
    font-size: 0.6875rem;
    font-weight: 650;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

/* The cart count: a small dark pill, per the reference. Hidden at zero. */
.dlx-cart-total { display: none; }
.dlx-cart-count[hidden] { display: none; }
.dlx-cart-count {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------- Desktop masthead */

/*
 * The wide header was three loose groups with no structure: brand and nav
 * bunched at the left, the utilities pinned right, and a 400px search rule
 * floating between them 87px off the page's true centre (it centres inside
 * its own cell, not the header, so it never lined up with anything).
 *
 * The field was also a decoy. theme.js listens for pointerdown on the whole
 * control and preventDefault()s it, handing straight over to the search
 * overlay -- so on a desktop that input could not be typed into. The widest
 * element in the masthead did nothing but look like a text box.
 *
 * So: the nav goes to the true centre, the search becomes an honest compact
 * control that says what it does, and the header reads as three deliberate
 * groups instead of four floating ones. Only above the point where the nav
 * collapses to a hamburger; the phone header is untouched.
 */

/* The word only belongs beside the icon once there is room to say it. Declared
   before the media query, not after it: same specificity, so source order is
   what decides, and behind it the label never appeared at all. */
.dlx-header-search__toggle .dlx-header-word { display: none; }

@media (min-width: 1181px) {
    .dlx-header__inner { grid-template-columns: auto minmax(0, 1fr); }

    /* Centred on the header, not on whatever space is left over. */
    .dlx-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .dlx-nav__list { gap: 30px; }
    /* Seven items now (Packs and Merch joined). At the narrow end of the
       desktop band the centred list reached the search icon by 22px; a
       tighter gap there buys the room back without touching wider screens. */
    @media (max-width: 1320px) { .dlx-nav__list { gap: 20px; } }

    .dlx-header-search {
        flex: 0 0 auto;
        max-width: none;
        height: auto;
        margin-inline: 0;
        display: inline-flex;
        border-bottom: 0;
        cursor: pointer;
    }
    /* Kept in the DOM for the no-JS GET fallback, but a decoy on desktop. */
    .dlx-header-search__field { display: none; }
    .dlx-header-search__toggle .dlx-header-word { display: inline; }
}

/* The cart is a header-action like its neighbours; only the count pill
   carries weight, and only when there is something to count. */

/* ------------------------------------------------------ Search overlay */

.dlx-search-overlay[hidden] { display: none !important; }
/* V10.7's command surface: a sheet under the header, not a modal card. */
.dlx-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 420;
    background: rgba(6, 7, 9, .3);
    overflow: auto;
}
body.dlx-search-open { overflow: hidden; }

.dlx-search-overlay__panel {
    width: 100%;
    margin: 0;
    background: rgba(245, 245, 247, .985);
    color: #0b0b0d;
    border-bottom: 1px solid var(--dlx-border);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .08);
    padding: calc(var(--dlx-header-h) + 10px) 0 24px;
}
.dlx-search-overlay__head,
.dlx-search-overlay__results,
.dlx-search-overlay__foot {
    width: min(calc(100% - 2 * var(--dlx-gutter)), var(--dlx-shell-max));
    margin-inline: auto;
}
.dlx-search-overlay__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 24px 0 14px;
    border-bottom: 1px solid var(--dlx-text);
}
.dlx-search-overlay__head svg { display: none; }
.dlx-search-overlay__head input {
    min-width: 0;
    border: 0;
    background: none;
    outline: 0;
    font-family: var(--dlx-font-display);
    font-size: clamp(2.125rem, 4.5vw, 3.875rem);
    font-weight: 560;
    letter-spacing: -.055em;
    color: var(--dlx-text);
    padding: 0;
}
.dlx-search-overlay__head input::placeholder { color: #a7aab1; font-weight: 520; }
.dlx-search-overlay__head input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.dlx-search-overlay__close {
    border: 0;
    border-radius: 8px;
    background: #e6e6e9;
    color: #3b3b40;
    height: 40px;
    padding: 0 14px;
    font-size: 0.75rem;
    font-weight: 560;
    cursor: pointer;
}
.dlx-search-overlay__close:hover { background: #dedee2; color: var(--dlx-text); }

.dlx-search-overlay__results { max-height: 55vh; overflow: auto; }
.dlx-search-result {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--dlx-border-soft);
    border-radius: 9px;
    background: none;
    color: inherit;
    padding: 10px 8px;
    cursor: pointer;
    transition: background var(--dlx-dur-fast) linear;
}
.dlx-search-result:hover,
.dlx-search-result.is-active { background: #eeeef1; }
.dlx-search-result img,
.dlx-search-result > i { border-radius: 6px; }
.dlx-search-result img,
.dlx-search-result > i {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: cover;
    background: var(--dlx-surface-3);
}
.dlx-search-result__id { min-width: 0; }
.dlx-search-result__id strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -.012em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dlx-search-result__id span {
    display: block;
    margin-top: 3px;
    font-family: var(--dlx-font);
    font-size: 0.6875rem;
    color: var(--dlx-subtle);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dlx-search-result__go { font-size: var(--dlx-fs-sm); color: var(--dlx-muted); }
.dlx-search-result:hover .dlx-search-result__go,
.dlx-search-result.is-active .dlx-search-result__go { color: var(--dlx-signal-hover); }
.dlx-search-overlay__empty { margin: 0; padding: 26px 22px; color: var(--dlx-muted); font-size: var(--dlx-fs-md); }

.dlx-search-overlay__foot {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 22px;
    font-family: var(--dlx-font);
    font-size: 0.6875rem;
    color: var(--dlx-subtle); font-variant-numeric: tabular-nums;
}
.dlx-search-overlay__foot a {
    margin-left: auto;
    font-family: var(--dlx-font);
    font-size: var(--dlx-fs-ui);
    color: var(--dlx-text);
    border-bottom: 1px solid var(--dlx-border-strong);
    padding-bottom: 2px;
}
.dlx-search-overlay__foot a:hover { color: var(--dlx-signal-hover); border-color: currentColor; }

@media (max-width: 620px) {
    .dlx-search-overlay { padding: 0 10px; }
    .dlx-search-overlay__panel { margin: 6vh auto; }
    .dlx-search-overlay__head { padding: 16px; }
    .dlx-search-overlay__head input { font-size: 1rem; }
    .dlx-search-result { padding: 10px 16px; }
    .dlx-search-overlay__foot span { display: none; }
    .dlx-search-overlay__foot a { margin: 0; }
}

/* ------------------------------------------------------ The material */

/*
 * V10.7 is flat surfaces and typography; the old grain sheet, letterpress
 * button shadows and scroll-scrubbed masthead gauge are gone. The one line
 * the header carries now is the global playhead: a 1px trace of the current
 * track's progress, published by theme.js as --dlx-page-track-progress and
 * visible only while something is actually playing.
 */
body { --dlx-page-track-progress: 0%; }
.dlx-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: var(--dlx-page-track-progress);
    height: 1px;
    background: #68778b;
    opacity: 0;
    pointer-events: none;
    transition: width .34s linear, opacity .2s ease;
}
body.dlx-is-playing .dlx-header::after { opacity: .78; }
@media (prefers-reduced-motion: reduce) {
    .dlx-header::after { transition: none; }
}

/* Flat buttons; pressing one is a scale tick, not a travel-into-shadow. */
.dlx-button {
    transition: background var(--dlx-dur-fast) linear, color var(--dlx-dur-fast) linear,
        transform var(--dlx-dur-fast) var(--dlx-ease);
}
.dlx-button:active { transform: scale(.985); }

/*
 * Pages hand over instead of hard-cutting: a short root crossfade on every
 * same-origin navigation, pure CSS. Browsers without the feature, and
 * readers who have asked for less motion, keep the instant cut.
 */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none !important; }
}

/* ------------------------------------------------ Interaction layer */

/* The cart bumps once whenever its count changes (theme.js observes the
   badge, so every write path counts). */
@keyframes dlx-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.dlx-cart-link.is-bump { animation: dlx-bump .32s var(--dlx-ease); }

/* A saved heart pops and throws one ultramarine ring -- on the click only
   (saves.js marks it), never on page paint. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes dlx-save-pop {
        0% { transform: scale(1); }
        40% { transform: scale(1.3); }
        100% { transform: scale(1); }
    }
    @keyframes dlx-save-ring {
        from { box-shadow: 0 0 0 0 rgba(46, 79, 216, .45); }
        to { box-shadow: 0 0 0 12px rgba(46, 79, 216, 0); }
    }
    .dlxx-save.dlxx-just-saved { animation: dlx-save-ring .5s var(--dlx-ease-out); }
    .dlxx-save.dlxx-just-saved svg { animation: dlx-save-pop .32s var(--dlx-ease); }
}

/* FAQ answers glide open instead of snapping. Height-to-auto interpolation
   is a progressive gift: browsers without interpolate-size keep the instant
   toggle they always had. */
@media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    .dlx-faq__list details::details-content {
        height: 0;
        overflow: clip;
        transition: height .3s var(--dlx-ease-out), content-visibility .3s allow-discrete;
    }
    .dlx-faq__list details[open]::details-content { height: auto; }
}

/* Cards that go somewhere rise to meet the pointer, casting the same ultramarine
   offset the featured card wears. */
.dlx-post-card {
    transition: transform var(--dlx-dur) var(--dlx-ease), box-shadow var(--dlx-dur) var(--dlx-ease);
}
@media (prefers-reduced-motion: no-preference) {
    .dlx-post-card:hover {
        transform: translateY(-3px);
        box-shadow: 6px 6px 0 -1px rgba(46, 79, 216, .16);
    }
}

/* ------------------------------------------------- Print signatures */

/* The ultramarine full stop that closes display headings (digitlix_theme_sig_period).
   Colour only -- it inherits size and weight, so it never disturbs metrics. */
.dlx-sig-dot { color: var(--dlx-signal); }

/* The count-up figure (theme.js). It must always wear its parent's type:
   without this guard it fell into .dlx-hero__rail span -- a rule for the
   descriptor lines -- and the store count rendered small and grey beside
   its own unit. Tabular digits so the width never breathes mid-count. */
/* The attribute selector keeps this at (0,2,0), above any single-class
   descendant rule like .dlx-hero__rail span -- a bare .dlx-count lost that
   fight and the figure shrank anyway. */
[data-dlx-countup] > .dlx-count {
    display: inline-block;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    font-variant-numeric: tabular-nums;
}

/* The OS scrollbar is part of the page. On Windows the stock grey control
   bar was the brightest object on an ink page; this keeps it in the room. */
html { scrollbar-color: #45433d #131311; }

/* The footer band drifts up as it enters, scrubbed by the scroll position
   itself rather than a clock. Compositor-only, and a no-op wherever
   scroll-driven animations (or motion at all) are unwelcome. */
@supports (animation-timeline: view()) {
    .dlx-footer__stamp {
        animation: dlx-band-drift linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
    }
    @keyframes dlx-band-drift {
        from { transform: translateY(36px); opacity: .55; }
        to { transform: none; opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .dlx-footer__stamp { animation: none; }
    }
}

/* ---------------------------------------------------- Scroll reveals */
/* theme.js applies .dlx-will-reveal only when IntersectionObserver exists
   and motion is welcome; content is never hidden by default. */

/* The timing is declared twice on purpose. A revealed element that carries
   its own transition -- the hero search does, for its focus rule -- matches
   the bare class at equal specificity, and whichever stylesheet loads later
   wins; the repeat on .is-in (0,2,0) is what guarantees the reveal keeps its
   own timing wherever it is applied. Durations sit in the band the rest of
   the site moves in rather than the 550/650ms they were. */
.dlx-will-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dlx-dur-slow) var(--dlx-ease-out), transform 460ms var(--dlx-ease-out);
}
.dlx-will-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--dlx-dur-slow) var(--dlx-ease-out), transform 460ms var(--dlx-ease-out);
}

/* The hero speaks in reading order, so it gets a longer rise and a touch more
   travel than the generic section reveal; theme.js hands each piece its place
   in the sequence as an inline delay. */
/* Brought into the band the rest of the site moves in. At 700/800ms with
   24px of travel and staged delays on top, the last line of the hero was
   still settling more than a second after the page was usable -- an entrance
   that had become a wait. Same idea, resolved in about half the time. */
/* Scoped through .dlx-hero for specificity, not for reach: the hero search
   carries its own transition for its focus rule, and at equal specificity
   that rule -- in a stylesheet that loads later -- won. The search then
   revealed with no transition on opacity or transform at all, so it popped
   into place between two pieces that were still arriving. */
.dlx-hero .dlx-will-reveal--hero { transform: translateY(16px); }

/* The featured card holds the page's LCP image, so it is never hidden --
   opacity stays at 1 and the card settles into place on transform alone.
   Rule of thumb this file now depends on: anything containing the hero
   artwork may move, but may not fade. */
.dlx-will-reveal--card {
    opacity: 1;
    transform: translateY(22px);
    transition: transform .9s var(--dlx-ease-out);
}
.dlx-will-reveal--card.is-in { transform: none; }

/* Wave entrance: each bar grows from the baseline, swept left to right by
   per-span delays from theme.js. The class is removed once the sweep lands,
   handing the spans back untouched to the .is-playing keyframes. */
.dlx-featured-card__wave.dlx-wave-enter i {
    transform: scaleY(.06);
    transform-origin: 50% 100%;
    opacity: .06;
    transition: transform .5s var(--dlx-ease-out), opacity .5s linear;
}
.dlx-featured-card__wave.dlx-wave-enter.is-in i {
    transform: none;
    opacity: .45;
}

/* ------------------------------------------------------------- Toast */

.dlx-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--dlx-player-clearance, 130px) + 16px);
    transform: translate(-50%, 12px);
    z-index: 500;
    background: #11110f;
    color: #fff;
    padding: 12px 16px;
    font-size: var(--dlx-fs-sm);
    font-weight: 560;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dlx-dur) var(--dlx-ease), transform var(--dlx-dur) var(--dlx-ease);
}
.dlx-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* Minimal commerce header (cart and checkout). */
.dlx-commerce-header {
    background: var(--dlx-bg);
    border-bottom: 1px solid var(--dlx-border-soft);
}
.dlx-commerce-header__inner {
    min-height: var(--dlx-header-bar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dlx-space-lg);
}
.dlx-back-link {
    display: inline-flex;
    align-items: center;
    /* A single line of 14px text is an 18px target; the commerce header has
       room for the real thing. */
    min-height: 44px;
    gap: 8px;
    font-size: var(--dlx-fs-md);
    color: var(--dlx-muted);
}
.dlx-back-link:hover { color: var(--dlx-text); }
.dlx-secure-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--dlx-fs-sm);
    color: var(--dlx-subtle);
}
.dlx-secure-note i {
    width: 7px; height: 7px;
    border-radius: var(--dlx-radius-pill);
    background: var(--dlx-green);
}

/* ------------------------------------------------------- Generic pages */

/* Content pages read on paper. */
.dlx-content-page {
    background: #f0eee9;
    color: #10100f;
}
.dlx-content-page__inner { padding-block: var(--dlx-section-pad); }

.dlx-entry-content { max-width: var(--dlx-reading); }
.dlx-entry-content a { border-bottom: 1px solid currentColor; }
.dlx-entry-content a:hover { color: var(--dlx-signal-hover); }
.dlx-entry-content h2 { font-size: var(--dlx-fs-h3); margin-top: var(--dlx-space-2xl); }
.dlx-entry-content li { margin-bottom: var(--dlx-space-xs); }

.dlx-empty-state {
    padding: var(--dlx-space-2xl) 0;
    color: var(--dlx-muted);
}
.dlx-empty-state strong { display: block; color: var(--dlx-text); margin-bottom: var(--dlx-space-xs); }

/* ---------------------------------------------------------------- Guides */

.dlx-guides__head { margin-bottom: var(--dlx-space-xl); }

.dlx-post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--dlx-border);
    border-bottom: 1px solid var(--dlx-border);
}
.dlx-post-card {
    min-height: 340px;
    padding: 24px;
    border-right: 1px solid var(--dlx-border);
    display: flex;
    flex-direction: column;
    background: none;
}
.dlx-post-card:first-child { padding-left: 0; }
.dlx-post-card:last-child { border-right: 0; }
.dlx-post-card__art { display: none; }
.dlx-post-card .dlx-eyebrow { margin-bottom: 40px; }
/* home.php prints these titles as h2; the original h3-only selector never
   matched, so guide cards fell back to the base heading scale and looked like
   a different site next to the lead article. */
.dlx-post-card h2,
.dlx-post-card h3 {
    font-size: var(--dlx-fs-h4);
    line-height: 1.05;
    letter-spacing: var(--dlx-track-display);
    margin: 0 0 15px;
}

/* Template button rows (about, guides, closing sections). The class was in
   the markup from the start and styled nowhere, leaving adjacent buttons to
   fuse at whatever width they happened to collide. */
.dlx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin-top: var(--dlx-space-lg);
}
.dlx-post-card p { color: var(--dlx-muted); font-size: var(--dlx-fs-md); }
.dlx-post-card .dlx-text-link { margin-top: auto; align-self: flex-start; }

.dlx-guide-lead { margin-bottom: var(--dlx-space-2xl); }
.dlx-guide-lead__art img { width: 100%; }
.dlx-guide__meta {
    display: flex;
    gap: 16px;
    color: var(--dlx-subtle);
    font-size: var(--dlx-fs-sm);
    margin: 0 0 8px;
}
.dlx-guide__head { max-width: var(--dlx-reading); margin: 28px 0 34px; }
.dlx-guide__head h1 {
    font-size: clamp(2.375rem, 4.5vw, 3.75rem);
    letter-spacing: var(--dlx-track-display);
    line-height: .98;
    margin: 6px 0 14px;
}
.dlx-guide__art { margin: 0 0 var(--dlx-space-xl); }
.dlx-guide__art img { width: 100%; }
.dlx-guide__body { margin-bottom: var(--dlx-space-2xl); }
.dlx-guide__body h2 { font-size: var(--dlx-fs-h3); margin-top: var(--dlx-space-2xl); }
.dlx-guide__cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dlx-space-xl);
    border-top: 1px solid var(--dlx-border);
    border-bottom: 1px solid var(--dlx-border);
    padding: 26px 0;
    margin: var(--dlx-space-2xl) 0;
}
.dlx-guide__cta h2 { font-size: 1.5rem; letter-spacing: var(--dlx-track-display); margin: 0 0 6px; }
.dlx-guide__cta p { margin: 0; color: var(--dlx-muted); font-size: var(--dlx-fs-md); max-width: 52ch; }
.dlx-guide__cta .dlx-button { flex: none; width: auto; }
.dlx-guide__related { margin-top: var(--dlx-space-2xl); }

/* ------------------------------------------------------------ Beat cards */

.dlx-beat-grid {
    display: grid;
    gap: 1px;
    background: var(--dlx-border);
    border-block: 1px solid var(--dlx-border);
}
.dlx-beat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dlx-beat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dlx-beat-grid--4, .dlx-beat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dlx-beat-card {
    background: var(--dlx-bg);
    padding: var(--dlx-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--dlx-space-sm);
}
.dlx-beat-card__art { position: relative; }
.dlx-beat-card__art img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.dlx-beat-card__body h3 { font-size: var(--dlx-fs-lg); margin: 0 0 4px; letter-spacing: -.012em; }
.dlx-beat-card__meta {
    font-family: var(--dlx-font);
    font-size: var(--dlx-fs-sm);
    color: var(--dlx-subtle);
    display: flex;
    gap: 14px;
    flex-wrap: wrap; font-variant-numeric: tabular-nums;
}
/* The pair may wrap onto two lines, but "133 BPM" and "G# min / Ab min" each
   stay whole -- broken across lines they read as separate values. */
.dlx-beat-card__meta > span { white-space: nowrap; }
.dlx-beat-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dlx-space-sm);
    /* Narrow cards give the full-width button its own row instead of
       squashing it against the price. */
    flex-wrap: wrap;
}
.dlx-beat-card__footer .dlx-button { white-space: nowrap; }
/* The label and the amount are separate elements with no whitespace between
   them in the markup, so the gap has to come from here. */
.dlx-price { font-weight: 650; display: inline-flex; align-items: baseline; gap: 5px; }


/* ---------------------------------------------------------- Resources */
/* The Guides index gets a row of small tools first; the tools themselves
   (checklists, the credit generator, the tempo calculator) share one quiet
   panel vocabulary inside a guide's prose. */
.dlx-resources { margin: 0 0 var(--dlx-space-2xl); }
.dlx-resources__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.dlx-resources__head h2 { margin: 0; font-size: var(--dlx-fs-h3); letter-spacing: var(--dlx-track-display); }
.dlx-resources__head p { margin: 0; color: var(--dlx-muted); font-size: var(--dlx-fs-sm); }
.dlx-resources__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--dlx-border); border: 1px solid var(--dlx-border); border-radius: var(--dlx-radius-lg); overflow: hidden; }
.dlx-resource {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    min-height: 150px;
    background: var(--dlx-bg);
    color: var(--dlx-text);
    padding: 18px 18px 16px;
    text-decoration: none;
    transition: background var(--dlx-dur-fast) linear;
}
.dlx-resource:hover { background: var(--dlx-surface-soft); }
.dlx-resource__kind { color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dlx-resource strong { font-size: var(--dlx-fs-md); font-weight: 650; letter-spacing: -.012em; line-height: 1.3; }
.dlx-resource span:not(.dlx-resource__kind) { color: var(--dlx-muted); font-size: var(--dlx-fs-sm); line-height: 1.45; }
.dlx-resource em { font-style: normal; color: var(--dlx-text); font-size: var(--dlx-fs-sm); font-weight: 600; }
.dlx-resource:hover em { color: var(--dlx-signal-deep); }

.dlx-checklist { margin: 28px 0; border: 1px solid var(--dlx-border); border-radius: var(--dlx-radius-lg); background: var(--dlx-surface-soft); padding: 18px 20px 8px; }
.dlx-checklist__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 8px; }
.dlx-checklist__head h3 { margin: 0; font-size: var(--dlx-fs-lg); font-weight: 650; letter-spacing: -.012em; }
.dlx-checklist__progress { margin: 0; color: var(--dlx-subtle); font-size: var(--dlx-fs-sm); font-variant-numeric: tabular-nums; }
.dlx-checklist.is-complete .dlx-checklist__progress { color: var(--dlx-green); font-weight: 600; }
.dlx-checklist__reset { margin-left: auto; border: 0; background: none; color: var(--dlx-muted); padding: 0; font-family: inherit; font-size: var(--dlx-fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dlx-checklist__reset[hidden] { display: none; }
.dlx-checklist__list { margin: 0; padding: 0; list-style: none; }
.dlx-checklist__list li { border-top: 1px solid var(--dlx-border-soft); }
.dlx-checklist__item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; cursor: pointer; }
.dlx-checklist__item input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dlx-checklist__box { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--dlx-border-strong); border-radius: 6px; background: var(--dlx-bg); transition: background var(--dlx-dur-fast) linear, border-color var(--dlx-dur-fast) linear; }
.dlx-checklist__item input:checked + .dlx-checklist__box { background: var(--dlx-text); border-color: var(--dlx-text); box-shadow: inset 0 0 0 3px var(--dlx-surface-soft); }
.dlx-checklist__item input:focus-visible + .dlx-checklist__box { outline: 2px solid var(--dlx-focus); outline-offset: 2px; }
.dlx-checklist__text { color: var(--dlx-text); font-size: var(--dlx-fs-base); line-height: 1.45; }
.dlx-checklist__list li.is-done .dlx-checklist__text { color: var(--dlx-subtle); text-decoration: line-through; text-decoration-color: var(--dlx-border-strong); }

.dlx-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin: 28px 0; border: 1px solid var(--dlx-border); border-radius: var(--dlx-radius-lg); background: var(--dlx-surface-soft); padding: 22px; }
.dlx-tool__form { display: grid; gap: 12px; align-content: start; }
.dlx-tool__form--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dlx-tool__form label { display: grid; gap: 6px; }
.dlx-tool__form label span { color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dlx-tool__form label small { color: var(--dlx-muted); font-size: var(--dlx-fs-sm); }
.dlx-tool__form input { width: 100%; min-height: 44px; border: 1px solid var(--dlx-border-strong); border-radius: var(--dlx-radius-sm); background: var(--dlx-bg); color: var(--dlx-text); padding: 0 12px; font-family: inherit; font-size: var(--dlx-fs-md); font-variant-numeric: tabular-nums; }
.dlx-tool__form input:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 2px; }
.dlx-tool__out { display: grid; gap: 12px; align-content: start; min-width: 0; }
.dlx-tool__out-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dlx-tool__out-head .dlx-release__kicker { margin: 0; }
.dlx-tool__copy { display: inline-flex; min-height: 34px; align-items: center; border: 1px solid var(--dlx-border-strong); border-radius: var(--dlx-radius-control); background: transparent; color: var(--dlx-text); padding: 0 12px; font-family: inherit; font-size: var(--dlx-fs-sm); font-weight: 600; cursor: pointer; }
.dlx-tool__copy:hover { background: var(--dlx-text); border-color: var(--dlx-text); color: var(--dlx-bg); }
.dlx-tool__result { margin: 0; border: 1px solid var(--dlx-border); border-radius: var(--dlx-radius-sm); background: var(--dlx-bg); color: var(--dlx-text); padding: 14px 16px; font-family: inherit; font-size: var(--dlx-fs-md); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.dlx-tool__hint { margin: 0; color: var(--dlx-muted); font-size: var(--dlx-fs-sm); line-height: 1.5; }
.dlx-bpm-calc { grid-template-columns: 1fr; }
.dlx-bpm-calc__big { display: grid; gap: 4px; }
.dlx-bpm-calc__big .dlx-release__kicker { margin: 0; }
.dlx-bpm-calc__big strong { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 650; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.dlx-bpm-calc__sub { color: var(--dlx-muted); font-size: var(--dlx-fs-sm); }
.dlx-bpm-calc__table { width: 100%; border-collapse: collapse; font-size: var(--dlx-fs-sm); font-variant-numeric: tabular-nums; }
.dlx-bpm-calc__table th { padding: 8px 0; border-bottom: 1px solid var(--dlx-border); color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); font-weight: 600; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.dlx-bpm-calc__table td { padding: 8px 0; border-bottom: 1px solid var(--dlx-border-soft); }
.dlx-bpm-calc__table td:nth-child(n+2) { text-align: right; }
.dlx-bpm-calc__table th:nth-child(n+2) { text-align: right; }
.dlx-bpm-calc__reverse { display: grid; gap: 8px; padding-top: 6px; }
.dlx-bpm-calc__reverse label { display: grid; gap: 6px; max-width: 240px; }
.dlx-bpm-calc__reverse label span { color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dlx-bpm-calc__reverse input { min-height: 44px; border: 1px solid var(--dlx-border-strong); border-radius: var(--dlx-radius-sm); background: var(--dlx-bg); color: var(--dlx-text); padding: 0 12px; font-family: inherit; font-size: var(--dlx-fs-md); font-variant-numeric: tabular-nums; }
.dlx-bpm-calc__reverse p { margin: 0; color: var(--dlx-text); font-size: var(--dlx-fs-md); font-weight: 600; }
.dlx-guide__body table.dlx-sheet { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: var(--dlx-fs-md); }
.dlx-guide__body table.dlx-sheet th { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--dlx-border); color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); font-weight: 600; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.dlx-guide__body table.dlx-sheet td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--dlx-border-soft); vertical-align: top; }
.dlx-guide__body table.dlx-sheet td:first-child { font-weight: 650; white-space: nowrap; }
@media (max-width: 1100px) { .dlx-resources__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .dlx-tool { grid-template-columns: 1fr; padding: 18px; }
    .dlx-tool__form--row { grid-template-columns: 1fr; }
    .dlx-guide__body table.dlx-sheet { display: block; overflow-x: auto; }
}
@media (max-width: 480px) { .dlx-resources__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Search */
/* Results come in groups -- beats, packs and merch, guides -- each with the
   site's heading row and the grid that kind of thing already uses. */
.dlx-search__group { margin: 0 0 var(--dlx-space-2xl); }
.dlx-search__group + .dlx-search__group { margin-top: calc(var(--dlx-space-2xl) * -0.25); }
.dlx-search .dlx-guides__head { margin-bottom: var(--dlx-space-xl); }
/* The beat grid paints its hairlines with a border-coloured background
   behind 1px gaps; with one or two results the empty cells showed that
   grey. Here the grid is bare and each card draws its own right and
   bottom hairline into the gap. */
.dlx-search .dlx-beat-grid { background: none; }
.dlx-search .dlx-beat-card { box-shadow: 1px 0 0 var(--dlx-border), 0 1px 0 var(--dlx-border); }

/* ---------------------------------------------------------------- Footer */

/* The compact V10.7 footer: brand column plus four link columns on
   near-black, one utility bar, nothing oversized. */
.dlx-footer {
    background: #08090a;
    color: #a0a2a9;
    border-top: 1px solid rgba(255, 255, 255, .1);
    /* The player's clearance is reserved here so the space is footer-coloured.
       theme.js publishes the measurement, so this collapses to normal footer
       padding on pages with no player rather than leaving dead space. */
    padding: 54px 0 calc(34px + var(--dlx-player-clearance));
}
/* Checkout hides the player, so it needs no reservation at all. */
body.digitlix-checkout .dlx-footer { padding-bottom: 34px; }

.dlx-footer__top {
    display: grid;
    /* Brand plus up to five link groups (Store / Account / Learn / Legal /
       Follow) on one row. auto-fit needs the other tracks definite, so the
       brand column is a fixed width rather than an fr. */
    grid-template-columns: 280px repeat(auto-fit, minmax(110px, 1fr));
    gap: 36px;
}
.dlx-footer__group,
.dlx-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dlx-footer__brand .dlx-brand { color: #f5f5f7; margin-bottom: 6px; }
.dlx-footer__brand p {
    max-width: 310px;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #a0a2a9;
    margin: 0;
}
.dlx-footer__heading {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #d0d1d6;
    margin: 0 0 12px;
}
.dlx-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.dlx-footer__links a,
.dlx-footer__group a,
.dlx-footer__email {
    display: block;
    padding: 5px 0;
    color: #a0a2a9;
    font-size: 0.75rem;
    transition: color var(--dlx-dur-fast) linear;
}
.dlx-footer__links a:hover,
.dlx-footer__group a:hover,
.dlx-footer__email:hover { color: #f5f5f7; }

.dlx-footer__bar {
    display: flex;
    justify-content: space-between;
    gap: var(--dlx-space-md);
    margin-top: 38px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    color: #85878e;
    font-size: 0.6875rem;
    font-weight: 540;
    letter-spacing: .075em;
    text-transform: uppercase;
}

/* Old footer pieces kept harmless if they render anywhere. */
.dlx-footer__lead { display: none; }
.dlx-footer__stamp { display: none; }
.dlx-footer__contact p { color: #85878e; font-size: var(--dlx-fs-sm); }
.dlx-social { list-style: none; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; }
.dlx-social__link { display: block; padding: 5px 0; color: #a0a2a9; font-size: 0.75rem; }
.dlx-social__link:hover { color: #f5f5f7; }
.dlx-social__link svg { display: none; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1180px) {
    /* Brand, then the actions cluster, then the toggle pinned right. The nav
       itself leaves the flow entirely and drops out of the header when open. */
    /* The brand takes the flexible track and the actions take exactly the room
       they need. With it the other way round, the actions cell was handed a
       track narrower than its own contents and, being justified to the end,
       spilled its overflow *backwards* -- which is how the search icon ended
       up printed over the wordmark on every phone under 430px. Now the mark
       scales into whatever is left instead. */
    .dlx-header__inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; }
    .dlx-brand { order: 1; }
    .dlx-header__actions { order: 2; }
    .dlx-nav-toggle { display: flex; order: 3; margin-inline-start: 0; }
    /* The compact header searches through the overlay only: the inline field
       gives its width back to the wordmark and the icons. */
    .dlx-header-search { flex: 0 0 auto; margin-inline: 0; max-width: none; border-bottom: 0; }
    .dlx-header-search__field { display: none; }

    .dlx-nav {
        order: 4;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        background: var(--dlx-header-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--dlx-border-soft);
        padding: 6px var(--dlx-gutter) 14px;
        max-height: calc(100dvh - var(--dlx-header-h));
        overflow-y: auto;
    }
    .dlx-nav.is-open { display: block; }
    .dlx-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .dlx-nav__list li { display: block; }
    .dlx-nav__list a {
        display: block;
        padding: 15px 0;
        font-size: var(--dlx-fs-base);
        border-bottom: 1px solid var(--dlx-border-soft);
    }
    .dlx-nav__list li:last-child a { border-bottom: 0; }

    .dlx-post-grid { grid-template-columns: repeat(2, 1fr); }
    .dlx-beat-grid, .dlx-beat-grid--4 { grid-template-columns: repeat(3, 1fr); }
    :root { --dlx-player-h: 104px; --dlx-player-clearance: 116px; }
}

@media (max-width: 900px) {
    /* Saved stays reachable on a phone -- as its heart, not its word.
       The account link steps back; it lives in the footer and the cart
       flow, and is not a mobile browsing priority. */
    .dlx-account-link { display: none; }
    .dlx-saved-link .dlx-header-word { display: none; }
    /* Icon only here, so the link is exactly as tall as an 18px glyph unless
       it is given a box. The glyph stays 18px; the target does not. */
    .dlx-saved-link { min-width: 44px; justify-content: center; }
    .dlx-saved-link svg { display: block; width: 18px; height: 18px; }
    .dlx-guide__cta { flex-direction: column; align-items: flex-start; gap: 18px; }
    .dlx-footer__top { grid-template-columns: repeat(3, 1fr); }
    .dlx-beat-grid, .dlx-beat-grid--4, .dlx-beat-grid--3 { grid-template-columns: repeat(2, 1fr); }
    /* The mobile player gains a second row here (its own rules live in
       beat-store.css) for the waveform; theme.js re-measures and republishes
       the real height once the bar paints, but a closer fallback avoids a
       one-frame jump in the page's bottom clearance before that happens. */
    :root { --dlx-player-h: 118px; --dlx-player-clearance: 130px; }
}

@media (max-width: 620px) {
    :root {
        /* Three rows here (transport, scrubber, tools). theme.js measures the
           rendered bar and republishes the real clearance; this fallback only
           has to be close enough to avoid a jump on the first frame. */
        --dlx-header-bar: 62px; --dlx-header-h: 62px; --dlx-player-h: 146px; --dlx-player-clearance: 158px;
        /* Section padding was tuned against 40-64px headings. With those now
           at 28-34px on a phone, 64px of air above and below each section
           reads as a gap rather than rhythm. */
        --dlx-section-pad: clamp(40px, 11vw, 64px);
    }
    /* Five controls share a 375px bar. Every pixel taken back from the gaps
       is a pixel the wordmark keeps. */
    .dlx-header__inner { gap: 12px; }
    .dlx-header__actions { gap: 12px; }
    .dlx-brand__word { font-size: 1.4375rem; }
    /* Same specificity story as the base rule above. */
    .dlx-header .dlx-brand__logo,
    .dlx-commerce-header .dlx-brand__logo { height: 13px; }
    /* The search collapses to its icon beside the cart; the overlay (or,
       without JavaScript, focusing the field) is the way in. */
    .dlx-header-search {
        flex: 0 0 38px;
        margin: 0 6px 0 auto;
        grid-template-columns: 38px;
        /* Collapsed to an icon, the underline has nothing to underline and
           would read as a stray dash beside the cart. */
        border-bottom: 0;
    }
    .dlx-header-search__toggle { width: 44px; }
    .dlx-header-search__field {
        position: absolute;
        top: calc(100% + 9px);
        right: -52px;
        width: calc(100vw - 2 * var(--dlx-gutter));
        max-width: 420px;
        background: var(--dlx-bg-2);
        border: 1px solid var(--dlx-border);
        padding: 0 12px;
        height: 44px;
        display: none;
    }
    .dlx-header-search:focus-within .dlx-header-search__field { display: block; }
    .dlx-cart-link { height: 44px; padding: 0 12px; }
    /* Cart and checkout: three items on one phone-width row left both labels
       wrapping mid-phrase ("Keep browsing / beats", "Secure / checkout") and
       pushed the mark to the right, where it sits nowhere else on the site.
       The bar is not sticky, so it can afford a second line: brand on top and
       left like everywhere else, the two notes beneath it, neither wrapping. */
    .dlx-commerce-header__inner {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px 18px;
        padding-block: 10px;
    }
    .dlx-commerce-header .dlx-brand { order: -1; flex-basis: 100%; }
    .dlx-back-link,
    .dlx-secure-note { white-space: nowrap; }
    .dlx-post-grid { grid-template-columns: 1fr; }
    .dlx-post-card { padding: 24px; border-right: 0; border-bottom: 1px solid var(--dlx-border); }
    .dlx-beat-grid, .dlx-beat-grid--4, .dlx-beat-grid--3, .dlx-beat-grid--2 { grid-template-columns: 1fr 1fr; }
    .dlx-footer { padding-top: 44px; }
    .dlx-footer__top { grid-template-columns: 1fr 1fr; }
    .dlx-button { min-width: 0; width: 100%; }
}

/* One beat card per row on phones. Two columns on a 390px screen leaves each
   card about 190px, which breaks the title over three lines, splits "133 BPM"
   across two, and wraps the button label. */
@media (max-width: 540px) {
    .dlx-beat-grid,
    .dlx-beat-grid--4,
    .dlx-beat-grid--3,
    .dlx-beat-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------- Motion guards */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.admin-bar .dlx-header { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .dlx-header { top: 46px; }
}