/*
 * Digitlix Theme 0.6.0, WooCommerce cart, checkout, account, order pages.
 *
 * Uses the design tokens from theme.css. The !important flags in this file are
 * deliberate: WooCommerce Blocks ships its own high-specificity styles that
 * load after the theme, so these are required to win, this is not the same
 * situation as the old Beat Store override war. Structure, PayPal containers,
 * and WooCommerce Blocks behavior are intentionally left alone.
 */

body.digitlix-commerce {
    color-scheme: dark;
    background: var(--dlx-bg) !important;
    color: var(--dlx-text) !important;
}
body.digitlix-commerce .dlx-content-page { padding: var(--dlx-space-2xl) 0 clamp(48px, 6vw, 68px); }
body.digitlix-commerce .dlx-content-page__inner {
    width: min(var(--dlx-shell-max), calc(100% - 2 * var(--dlx-gutter))) !important;
    max-width: var(--dlx-shell-max) !important;
    margin-inline: auto !important;
    /* The 120px prose section padding is too much air under the slim
       commerce header; the article's own padding carries the rhythm here. */
    padding-block: var(--dlx-space-lg) 0;
}

/* The reading-width cap on .dlx-entry-content is for prose pages; the cart
   and checkout blocks render inside it and must span their container. */
body.digitlix-commerce .dlx-entry-content { max-width: none; }

/* Commerce pages are paper: without this, native form controls (dropdown
   lists, autofill fills, checkboxes) inherit the body's dark scheme and
   render dark inside a light page. */
body.digitlix-commerce .dlx-content-page { color-scheme: light; }

/* Checkout is a focused funnel: a narrower container puts the intro, the
   checkout block, the license agreements and the assurance strip on one
   shared edge, instead of stranding a small form in the full-width shell. */
body.digitlix-checkout .dlx-content-page__inner {
    width: min(1200px, calc(100% - 2 * var(--dlx-gutter))) !important;
    max-width: 1200px !important;
}
body.digitlix-commerce .woocommerce,
body.digitlix-commerce .wp-block-woocommerce-cart,
body.digitlix-commerce .wp-block-woocommerce-checkout { width: 100% !important; max-width: 100% !important; color: var(--dlx-text) !important; }
body.digitlix-commerce .wc-block-components-sidebar-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    align-items: start !important;
    gap: var(--dlx-space-lg) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
/* Checkout gets a wider summary and more air between the columns than the
   cart. Must follow the rule above: same specificity, later source wins. */
body.digitlix-checkout .wc-block-components-sidebar-layout {
    grid-template-columns: minmax(0, 1fr) 380px !important;
    gap: var(--dlx-space-xl) !important;
}
body.digitlix-checkout .wc-block-components-main,
body.woocommerce-cart .wc-block-cart__main,
body.digitlix-checkout .wc-block-components-sidebar,
body.woocommerce-cart .wc-block-cart__sidebar {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
body.digitlix-checkout .wc-block-components-main,
body.woocommerce-cart .wc-block-cart__main {
    border: 1px solid var(--dlx-border) !important;
    border-radius: var(--dlx-radius-lg) !important;
    background: var(--dlx-surface) !important;
    padding: var(--dlx-space-lg) !important;
}
body.digitlix-checkout .wc-block-components-sidebar,
body.woocommerce-cart .wc-block-cart__sidebar {
    position: sticky !important;
    top: 96px !important;
    overflow: hidden !important;
    border: 1px solid var(--dlx-border) !important;
    border-radius: var(--dlx-radius-lg) !important;
    background: var(--dlx-surface) !important;
    padding: var(--dlx-space-md) !important;
}

/* =========================================================================
   Single beat page (woocommerce/content-single-product.php)

   The record page. The record, the licenses, more beats -- three bands on
   the paper, one hairline between each. The money action lives in the first
   band with the name: a three-way license switch, the chosen license's own
   description, and Add to cart. A slim follow bar carries the same button
   down the page once that block has scrolled away.

   No !important except where WooCommerce's own product stylesheet (which
   loads after the theme on product pages) is more specific than a class:
   the add-to-cart button and the variation description. Every selector is
   scoped to .dlx-beat-single so the classic WooCommerce markup inside it can
   be styled without touching cart, checkout or any non-beat product.

   Motion: the page arrives in reading order (sleeve, then the words, then
   the controls), license changes answer with a short pop, the follow bar
   slides in, and every one of those is cancelled by prefers-reduced-motion
   at the end of the file.
   ====================================================================== */

/* The content-page wrapper carries section padding meant for prose. Under
   the slim header that read as 117px of nothing above the breadcrumb. The
   page sets its own rhythm from here. */
.dlx-woocommerce-page.is-release { padding-top: 0; padding-bottom: 0; }
.dlx-woocommerce-page.is-release .dlx-content-page__inner { padding-block: 0; }

.dlx-beat-single { display: block; color: var(--dlx-text); }
.dlx-beat-single > * { min-width: 0; }

/* The one label voice on the page, used for the kicker above the title and
   above each band heading. */
.dlx-release__kicker {
    margin: 0 0 12px;
    color: var(--dlx-subtle);
    font-size: var(--dlx-fs-xs);
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.35;
    text-transform: uppercase;
}
.dlx-release__h2 {
    margin: 0;
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.625rem);
    font-weight: 650;
    letter-spacing: var(--dlx-track-display);
    line-height: 1.02;
}

.dlx-release__crumbs {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 20px 0 26px;
    color: var(--dlx-subtle);
    font-size: var(--dlx-fs-sm);
}
.dlx-release__crumbs a { color: var(--dlx-muted); text-decoration: none; border-bottom: 1px solid var(--dlx-border-strong); }
.dlx-release__crumbs a:hover { color: var(--dlx-text); border-color: currentColor; }
.dlx-release__crumbs [aria-current] { color: var(--dlx-text); font-weight: 600; }

/* ------------------------------------------------------------ The record */
.dlx-release__hero {
    display: grid;
    grid-template-columns: minmax(260px, 32%) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 5vw, 72px);
    padding-bottom: clamp(36px, 4vw, 48px);
    border-bottom: 1px solid var(--dlx-border);
}
/* The sleeve: square, whole, lifted off the paper by a soft long shadow and
   held by a hairline ring so a light cover still has an edge. It sits where
   it is placed and scrolls with the page -- it was sticky for one release,
   riding down the column as the buyer read, and that read as the artwork
   following them rather than holding still. */
.dlx-release__art {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: var(--dlx-radius-lg);
    background: var(--dlx-surface);
    box-shadow: 0 28px 60px -24px rgba(10, 13, 18, .45), 0 2px 6px rgba(10, 13, 18, .08);
    transition: transform var(--dlx-dur-slow) var(--dlx-ease-out), box-shadow var(--dlx-dur-slow) var(--dlx-ease-out);
}
.dlx-release__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dlx-release__art::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(11, 11, 13, .08);
    pointer-events: none;
}
.dlx-release__art:hover {
    transform: translateY(-4px);
    box-shadow: 0 36px 70px -26px rgba(10, 13, 18, .5), 0 4px 10px rgba(10, 13, 18, .08);
}
/* While this record is the one playing, the sleeve carries a slow breathing
   ring in the page's state colour. The page player's own waveform below is
   the progress; this is only the "it is this one" signal. */
.dlx-release__hero:has(.dlx-release__play.is-playing) .dlx-release__art {
    animation: dlx-release-breathe 2.8s ease-in-out infinite;
}
@keyframes dlx-release-breathe {
    0%, 100% { box-shadow: 0 28px 60px -24px rgba(10, 13, 18, .45), 0 2px 6px rgba(10, 13, 18, .08), 0 0 0 0 rgba(88, 101, 121, 0); }
    50% { box-shadow: 0 28px 60px -24px rgba(10, 13, 18, .45), 0 2px 6px rgba(10, 13, 18, .08), 0 0 0 10px rgba(88, 101, 121, .12); }
}

.dlx-release__id { min-width: 0; }
.dlx-release__title {
    margin: 0;
    font-size: clamp(2.75rem, 1.5rem + 5.5vw, 6rem);
    font-weight: 650;
    letter-spacing: var(--dlx-track-display);
    line-height: .92;
    overflow-wrap: anywhere;
}
/* The spec sheet: one cell per fact, label over value, a hairline between
   cells. The labels are the page's kicker voice; the values are the facts a
   buyer actually scans for, set at reading size with tabular figures so a
   row of records lines up. The key's enharmonic twin is a quieter note after
   the value rather than an equal partner. */
.dlx-release__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px 0;
    margin: 22px 0 0;
}
.dlx-release__fact {
    display: grid;
    gap: 5px;
    min-width: 0;
    border-left: 1px solid var(--dlx-border);
    padding: 2px 22px 2px 18px;
}
.dlx-release__fact:first-child { border-left: 0; padding-left: 0; }
.dlx-release__fact[hidden] { display: none; }
.dlx-release__fact dt {
    margin: 0;
    color: var(--dlx-subtle);
    font-size: var(--dlx-fs-xs);
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.2;
    text-transform: uppercase;
}
.dlx-release__fact dd {
    margin: 0;
    color: var(--dlx-text);
    font-size: var(--dlx-fs-base);
    font-weight: 600;
    letter-spacing: -.012em;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dlx-release__fact dd small {
    color: var(--dlx-muted);
    font-size: var(--dlx-fs-sm);
    font-weight: 500;
    letter-spacing: 0;
}

/* Chips: moods in the hero, tags under the license band. A quiet pill that
   becomes ink on hover -- each one is a search. */
.dlx-release__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.dlx-release__chips a {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border: 1px solid var(--dlx-border);
    border-radius: var(--dlx-radius-pill);
    color: var(--dlx-muted);
    padding: 0 11px;
    font-size: var(--dlx-fs-sm);
    text-decoration: none;
    text-transform: capitalize;
    transition: color var(--dlx-dur-fast) linear, border-color var(--dlx-dur-fast) linear, background var(--dlx-dur-fast) linear, transform var(--dlx-dur-fast) var(--dlx-ease);
}
.dlx-release__chips a:hover { border-color: var(--dlx-text); background: var(--dlx-text); color: var(--dlx-bg); transform: translateY(-1px); }

.dlx-release__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
}
.dlx-release__play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: var(--dlx-control-lg);
    border: 0;
    border-radius: var(--dlx-radius-control);
    background: var(--dlx-accent);
    color: var(--dlx-accent-contrast);
    padding: 0 22px 0 9px;
    font-family: inherit;
    font-size: var(--dlx-fs-md);
    font-weight: 650;
    cursor: pointer;
    transition: background var(--dlx-dur-fast) linear, transform var(--dlx-dur-fast) var(--dlx-ease), box-shadow var(--dlx-dur-fast) linear;
}
.dlx-release__play:hover { background: var(--dlx-accent-hover); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(10, 13, 18, .5); }
.dlx-release__play:active { transform: translateY(1px); box-shadow: none; }
.dlx-release__play:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 3px; }
.dlx-release__play-key {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    font-size: .7rem;
    transition: background var(--dlx-dur-fast) linear;
}
.dlx-beat-single__play-icon { display: block; transform: translateX(1px); letter-spacing: 1px; }
.dlx-release__play.is-playing .dlx-beat-single__play-icon { transform: none; font-size: .6rem; }
.dlx-release__play.is-playing .dlx-release__play-key { background: var(--dlx-signal); }

.dlx-release__record {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--dlx-control-lg);
    border: 1px solid var(--dlx-border-strong);
    border-radius: var(--dlx-radius-control);
    background: transparent;
    color: var(--dlx-text);
    padding: 0 18px;
    font-size: var(--dlx-fs-md);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--dlx-dur-fast) linear, background var(--dlx-dur-fast) linear, transform var(--dlx-dur-fast) var(--dlx-ease);
}
.dlx-release__record:hover { border-color: var(--dlx-text); background: var(--dlx-surface-soft); transform: translateY(-1px); }
.dlx-release__record:active { transform: translateY(1px); }
/* The recording light, at rest -- and it blinks, slowly, the way a
   standby light does. */
.dlx-release__record-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dlx-danger);
    box-shadow: 0 0 0 3px rgba(168, 58, 44, .14);
    animation: dlx-release-standby 2.4s ease-in-out infinite;
}
@keyframes dlx-release-standby {
    0%, 100% { box-shadow: 0 0 0 3px rgba(168, 58, 44, .14); opacity: 1; }
    50% { box-shadow: 0 0 0 5px rgba(168, 58, 44, .06); opacity: .72; }
}
.dlx-beat-single__extras { display: inline-flex; gap: 6px; }
.dlx-beat-single__extras:empty { display: none; }
/* Free demo and share sit with the buttons, so they match their height. */
.dlx-beat-single__extras .dlxx-icon-button { width: var(--dlx-control-lg); height: var(--dlx-control-lg); border-radius: var(--dlx-radius-control); }
.dlx-beat-single__extras .dlxx-icon-button svg { width: 19px; height: 19px; }

.dlx-release__wave {
    /* theme.js draws the idle bars from --dlx-subtle at a third of their
       opacity and the played bars from --dlx-signal; on paper that came out
       as a faint dotted rule. Both are re-valued on the host so the shape
       reads as a waveform without touching the drawing code. */
    --dlx-subtle: var(--dlx-text);
    --dlx-signal: var(--dlx-signal-deep);
    position: relative;
    height: 68px;
    margin-top: 28px;
    border-top: 1px solid var(--dlx-border);
    border-bottom: 1px solid var(--dlx-border);
}
.dlx-release__wave canvas {
    position: absolute;
    inset: 8px 0;
    width: 100%;
    height: calc(100% - 16px);
    cursor: pointer;
}

/* ---------------------------------------------------------- The order */
.dlx-release__order { margin-top: 26px; }
.dlx-release__order-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}
.dlx-release__order-label {
    margin: 0;
    color: var(--dlx-subtle);
    font-size: var(--dlx-fs-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.dlx-release__order-compare {
    color: var(--dlx-muted);
    font-size: var(--dlx-fs-sm);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--dlx-border-strong);
    padding-bottom: 2px;
}
.dlx-release__order-compare:hover { color: var(--dlx-text); border-color: currentColor; }

/* The switch: a segmented control. Three equal cells in one rounded frame,
   divided by hairlines, each carrying the tier's name, price and the one
   fact that separates it ("Includes stems", "One buyer only"). The chosen
   cell is ink; the frame's rounding clips it. Nothing floats: every cell is
   a bounded thing whether or not it is chosen. */
.dlx-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--dlx-border-strong);
    border-radius: 12px;
    background: var(--dlx-surface-soft);
}
.dlx-seg__opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    min-height: 78px;
    border: 0;
    border-left: 1px solid var(--dlx-border);
    border-radius: 0;
    background: transparent;
    color: var(--dlx-text);
    padding: 13px 16px 12px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--dlx-dur-fast) linear, color var(--dlx-dur-fast) linear;
}
.dlx-seg__opt:first-child { border-left: 0; }
.dlx-seg__opt:hover { background: var(--dlx-surface); }
.dlx-seg__opt:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: -3px; }
.dlx-seg__name { font-size: var(--dlx-fs-sm); font-weight: 600; color: var(--dlx-muted); line-height: 1.2; transition: color var(--dlx-dur-fast) linear; }
.dlx-seg__price { font-size: 1.25rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dlx-seg__price span,
.dlx-seg__price bdi { display: inline; color: inherit; font: inherit; white-space: nowrap; }
.dlx-seg__price del { display: none; }
.dlx-seg__note { margin-top: 3px; color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); font-weight: 500; line-height: 1.3; transition: color var(--dlx-dur-fast) linear; }
.dlx-seg__opt[aria-checked="true"],
.dlx-seg__opt[aria-checked="true"]:hover {
    background: var(--dlx-text);
    color: var(--dlx-bg);
    border-left-color: var(--dlx-text);
}
.dlx-seg__opt[aria-checked="true"] + .dlx-seg__opt { border-left-color: var(--dlx-text); }
.dlx-seg__opt[aria-checked="true"] .dlx-seg__name { color: rgba(247, 247, 245, .72); }
.dlx-seg__opt[aria-checked="true"] .dlx-seg__note { color: rgba(247, 247, 245, .6); }
/* The recommended tier's note carries the page's state colour, the one
   quiet mark it gets; the slate rule it used to wear along the top edge
   read as a stray line. */
.dlx-seg__opt.is-featured .dlx-seg__note { color: var(--dlx-signal-deep); font-weight: 600; }
.dlx-seg__opt.is-featured[aria-checked="true"] .dlx-seg__note { color: var(--dlx-signal); }
/* The pop: a chosen cell lands with a short settle, so the change is felt,
   not only seen. Added by theme.js on selection and removed when it ends. */
.dlx-seg__opt.is-popped,
.dlx-tier.is-popped { animation: dlx-release-pop 340ms var(--dlx-ease-out); }
@keyframes dlx-release-pop {
    0% { transform: scale(.985); }
    55% { transform: scale(1.012); }
    100% { transform: scale(1); }
}

/* The checkout: what the chosen license includes, then the button. The form
   WooCommerce renders is laid out as part of this grid -- display: contents
   makes the form element stop being a box so its children take the cells. */
.dlx-release__checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "desc"
        "action"
        "offer";
    /* Spacing by margins, not row-gap: Chrome mints two empty implicit rows
       for the absolutely positioned (hidden) select and WooCommerce's live
       region, and a row-gap is paid on every track, empty or not -- which
       put 32px of nothing under the offer line. Margins only exist where
       content does. */
    row-gap: 0;
    margin-top: 16px;
}
.dlx-release__checkout .woocommerce-variation-add-to-cart { margin-top: 16px; }
.dlx-release__checkout .dlxx-offer-note { margin-top: 16px !important; }
.dlx-release__checkout,
.dlx-release__checkout > * { min-width: 0; }
.dlx-release__checkout form.cart,
.dlx-release__checkout .single_variation_wrap { display: contents; }

/* What the chosen license includes, from WooCommerce's variation description:
   the same sentence the license modal shows. It crossfades when the choice
   changes (theme.js toggles is-swapping around the update). */
.dlx-release__checkout .woocommerce-variation { grid-area: desc; display: grid; gap: 0; }
.dlx-release__checkout .woocommerce-variation:empty { display: none; }
.dlx-release__checkout .woocommerce-variation-description { margin: 0; color: var(--dlx-muted); font-size: var(--dlx-fs-md); line-height: 1.5; }
.dlx-release__checkout .woocommerce-variation-description p { margin: 0 !important; }
.dlx-release__checkout .woocommerce-variation-availability { color: var(--dlx-muted); font-size: var(--dlx-fs-sm); }
/* Every price a buyer needs is on the switch; WooCommerce's range above the
   form and its echo of the chosen price would say it twice more. */
.dlx-release__checkout > p.price,
.dlx-release__checkout .woocommerce-variation-price { display: none !important; }

.dlx-release__checkout .woocommerce-variation-add-to-cart {
    grid-area: action;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* A license is bought once; the quantity box only invites mistakes, and a
   chosen license has nothing to clear. */
.dlx-release__checkout .quantity { display: none !important; }
.dlx-release__checkout .reset_variations { display: none !important; }
/* The native select stays in the form -- WooCommerce reads it for price,
   stock, variation id and the gateway -- but once the switch is wired it is
   the switch that shows it. Hidden the screen-reader way rather than
   display:none so WooCommerce's own scripts still see a live control. */
.dlx-release__checkout form.dlx-has-picker table.variations {
    position: absolute !important;
    width: 1px !important;
    min-width: 0 !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%);
    padding: 0 !important;
    border: 0;
    white-space: nowrap;
    /* Parked in an existing cell. An absolutely positioned grid item that
       names no area still minted an implicit row of its own -- two of them,
       with this and WooCommerce's live-region -- and two empty rows with a
       16px gap each is the 32px that appeared under the offer line. */
    grid-area: desc;
}
.dlx-release__checkout .reset_variations_alert { grid-area: desc; }
/* Without script there is no switch and the select is the control. */
.dlx-release__checkout table.variations { grid-column: 1 / -1; width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.dlx-release__checkout table.variations tbody,
.dlx-release__checkout table.variations tr,
.dlx-release__checkout table.variations th,
.dlx-release__checkout table.variations td { display: block; width: 100%; border: 0; padding: 0; text-align: left; }
.dlx-release__checkout table.variations th.label label { display: block; margin-bottom: 7px; color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dlx-release__checkout select {
    width: 100%;
    min-height: var(--dlx-control);
    border: 1px solid var(--dlx-border-strong);
    border-radius: var(--dlx-radius-sm);
    background: var(--dlx-surface-input);
    color: var(--dlx-text);
    padding: 0 var(--dlx-space-sm);
    font-family: inherit;
    font-size: var(--dlx-fs-md);
}
.dlx-release__checkout .woocommerce-product-details__short-description { grid-column: 1 / -1; margin: 0; color: var(--dlx-muted); font-size: var(--dlx-fs-md); line-height: var(--dlx-lh-body); }
.dlx-release__checkout .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* The one action on the page that takes money. Marked important where
   WooCommerce's `.woocommerce button.button.alt` would otherwise win. */
.dlx-release__checkout button.single_add_to_cart_button {
    display: inline-flex !important;
    flex: 1 1 240px;
    max-width: 380px;
    min-height: var(--dlx-control-lg) !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0 !important;
    border-radius: var(--dlx-radius-control) !important;
    background: var(--dlx-accent) !important;
    color: var(--dlx-accent-contrast) !important;
    padding: 0 28px !important;
    font-family: inherit;
    font-size: var(--dlx-fs-md) !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: 0 12px 28px -14px rgba(10, 13, 18, .55);
    transition: background var(--dlx-dur-fast) linear, transform var(--dlx-dur-fast) var(--dlx-ease), box-shadow var(--dlx-dur-fast) linear;
}
.dlx-release__checkout button.single_add_to_cart_button:hover { background: var(--dlx-accent-hover) !important; transform: translateY(-1px); box-shadow: 0 16px 32px -14px rgba(10, 13, 18, .6); }
.dlx-release__checkout button.single_add_to_cart_button:active { transform: translateY(1px); box-shadow: none; }
.dlx-release__checkout button.single_add_to_cart_button.disabled,
.dlx-release__checkout button.single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* The button's own states while theme.js adds the license over AJAX. */
.dlx-release__checkout button.single_add_to_cart_button.is-adding { opacity: .7; cursor: progress; }
.dlx-release__checkout button.single_add_to_cart_button.is-added { background: var(--dlx-green) !important; animation: dlx-release-pop 340ms var(--dlx-ease-out); }
.dlx-release__checkout .ppc-button-wrapper { margin: 0 !important; }
.dlx-release__checkout .ppcp-messages:empty,
.dlx-release__checkout .ppcp-messages.is-empty { display: none !important; }

/* The buy-one-get-one line, as a fact about the price rather than a banner. */
.dlx-release__checkout .dlxx-offer-note {
    grid-area: offer;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin: 0;
    color: var(--dlx-muted);
    font-size: var(--dlx-fs-sm);
    line-height: 1.45;
}
.dlx-release__checkout .dlxx-offer-note { margin-bottom: 0 !important; }
.dlx-release__checkout .dlxx-offer-note > span:first-child {
    flex: 0 0 auto;
    border: 1px solid var(--dlx-signal);
    border-radius: 3px;
    padding: 1px 7px;
    color: var(--dlx-signal-deep);
    font-size: var(--dlx-fs-xs);
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dlx-release__checkout .dlxx-offer-note.is-unlocked > span:first-child { background: var(--dlx-signal); color: #fff; }

/* Make an offer, exclusive tier only: the quiet way out beside the button.
   It sits in the action row, after the button. */
.dlx-beat-single__negotiate {
    grid-area: action;
    justify-self: start;
    align-self: center;
    display: inline-flex;
    min-height: var(--dlx-control-lg);
    align-items: center;
    justify-content: center;
    margin-left: calc(min(380px, 100%) + 10px);
    border: 1px solid var(--dlx-border-strong);
    border-radius: var(--dlx-radius-control);
    background: transparent;
    color: var(--dlx-text);
    padding: 0 18px;
    font-family: inherit;
    font-size: var(--dlx-fs-ui);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dlx-dur-fast) linear, background var(--dlx-dur-fast) linear;
}
.dlx-beat-single__negotiate:hover { border-color: var(--dlx-text); background: var(--dlx-surface); }
.dlx-beat-single__negotiate[hidden] { display: none; }

.dlx-release__assure {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    color: var(--dlx-muted);
    font-size: var(--dlx-fs-sm);
}
.dlx-release__assure li { position: relative; padding-left: 14px; }
.dlx-release__assure li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 1px;
    background: var(--dlx-signal);
}
.dlx-release__assure a { color: var(--dlx-text); text-decoration: none; border-bottom: 1px solid var(--dlx-border-strong); padding-bottom: 2px; }
.dlx-release__assure a:hover { border-color: currentColor; }

/* ---------------------------------------------------------- The licenses */
.dlx-release__buy {
    padding: clamp(32px, 4vw, 48px) 0 clamp(40px, 5vw, 48px);
    border-bottom: 1px solid var(--dlx-border);
    /* "Compare" in the order block jumps here, and by the time it lands the
       follow bar has slid in under the fixed header -- 132px of chrome that
       sat exactly on the heading and the tier flags. Anchor navigation and
       scrollIntoView both honour this margin. */
    scroll-margin-top: calc(var(--dlx-header-h, 68px) + 64px + 28px);
}
.dlx-release__buy-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    align-items: end;
    gap: 18px 48px;
    margin-bottom: clamp(22px, 3vw, 32px);
}
.dlx-release__buy-note { margin: 0 0 4px; color: var(--dlx-muted); font-size: var(--dlx-fs-md); line-height: 1.55; }
.dlx-release__more {
    align-self: end;
    justify-self: start;
    margin-bottom: 6px;
    color: var(--dlx-text);
    font-size: var(--dlx-fs-ui);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--dlx-border-strong);
    padding-bottom: 3px;
}
.dlx-release__more:hover { border-color: currentColor; }
@media (min-width: 901px) {
    .dlx-release__buy-head .dlx-release__more { justify-self: end; }
}

/* The three tiers in full. Each card carries one real button; the card
   itself is pressable by delegation, and the chosen one is pressed into the
   paper with a full ink edge. */
.dlx-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.dlx-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--dlx-border);
    border-radius: var(--dlx-radius-lg);
    background: var(--dlx-bg);
    padding: 22px 22px 20px;
    cursor: pointer;
    transition: border-color var(--dlx-dur-fast) linear, background var(--dlx-dur-fast) linear, box-shadow var(--dlx-dur-fast) linear, transform var(--dlx-dur) var(--dlx-ease);
}
.dlx-tier:hover { border-color: var(--dlx-border-strong); background: var(--dlx-surface-soft); transform: translateY(-2px); }
/* The recommended tier carries the slate rule along its top edge, the same
   mark the homepage licensing band gives it. */
.dlx-tier.is-featured { box-shadow: inset 0 2px 0 var(--dlx-signal); }
.dlx-tier.is-selected,
.dlx-tier.is-selected:hover {
    border-color: var(--dlx-text);
    background: var(--dlx-surface-soft);
    box-shadow: inset 0 0 0 1px var(--dlx-text);
    transform: none;
}
.dlx-tier.is-featured.is-selected { box-shadow: inset 0 0 0 1px var(--dlx-text), inset 0 3px 0 var(--dlx-signal); }
.dlx-tier > p { margin: 0; }
.dlx-tier__flag {
    margin: 0 0 14px !important;
    color: var(--dlx-subtle);
    font-size: var(--dlx-fs-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.dlx-tier.is-featured .dlx-tier__flag { color: var(--dlx-signal-deep); }
.dlx-tier__name { font-size: var(--dlx-fs-lg); font-weight: 650; letter-spacing: -.012em; line-height: 1.2; }
.dlx-tier__price {
    margin: 6px 0 12px !important;
    font-size: 1.875rem;
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dlx-tier__price span,
.dlx-tier__price bdi { display: inline; color: inherit; font: inherit; white-space: nowrap; }
.dlx-tier__price del { display: none; }
.dlx-tier__desc { color: var(--dlx-muted); font-size: var(--dlx-fs-md); line-height: 1.5; }
.dlx-tier__files {
    margin: 16px 0 0 !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dlx-border-soft);
    color: var(--dlx-text);
    font-family: var(--dlx-font);
    font-size: var(--dlx-fs-sm);
    letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.dlx-tier__list {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.dlx-tier__list li { position: relative; padding-left: 15px; color: var(--dlx-muted); font-size: var(--dlx-fs-sm); line-height: 1.45; }
.dlx-tier__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .66em;
    width: 7px;
    height: 1px;
    background: var(--dlx-signal);
}
/* The card's one control: a ring that fills when chosen. */
.dlx-tier__choose {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 20px 0 0;
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid var(--dlx-border-soft);
    background: none;
    color: var(--dlx-subtle);
    font-family: inherit;
    font-size: var(--dlx-fs-sm);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.dlx-tier__choose:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 3px; border-radius: 4px; }
.dlx-tier__choose::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 1px solid var(--dlx-border-strong);
    border-radius: 50%;
    background: var(--dlx-bg);
    transition: background var(--dlx-dur-fast) linear, border-color var(--dlx-dur-fast) linear, box-shadow var(--dlx-dur-fast) linear;
}
.dlx-tier__state-on { display: none; }
.dlx-tier.is-selected .dlx-tier__choose { color: var(--dlx-text); }
.dlx-tier.is-selected .dlx-tier__choose::before { border-color: var(--dlx-text); background: var(--dlx-text); box-shadow: inset 0 0 0 3px var(--dlx-surface-soft); }
.dlx-tier.is-selected .dlx-tier__state-off { display: none; }
.dlx-tier.is-selected .dlx-tier__state-on { display: inline; }

.dlx-release__find { margin-top: clamp(28px, 4vw, 40px); }
.dlx-release__find .dlx-release__chips { margin-top: 0; }

/* ------------------------------------------------------- The follow bar */
.dlx-release__sticky {
    position: fixed;
    top: var(--dlx-header-h, 68px);
    left: 0;
    right: 0;
    z-index: calc(var(--dlx-z2) - 5);
    border-bottom: 1px solid var(--dlx-border);
    background: rgba(247, 247, 245, .94);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    /* A layer over the page, so it casts a little onto what it covers. */
    box-shadow: 0 10px 30px -18px rgba(10, 13, 18, .35);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 380ms var(--dlx-ease-out), opacity 260ms linear;
}
.dlx-release__sticky[hidden] { display: block; }
.dlx-release__sticky.is-shown { transform: none; opacity: 1; pointer-events: auto; }
/* It steps aside for anything that takes the whole screen. */
body.dlx-studio-open .dlx-release__sticky,
body.digitlix-cart-open .dlx-release__sticky,
body.dlx-quick-open .dlx-release__sticky { transform: translateY(-110%); opacity: 0; pointer-events: none; }
/* The same measure as the header and the page: the shell's max width and
   gutters, stated here because this wrapper must not be a .dlx-shell (see
   the template). Cover, name and button then sit on the content's own
   edges, in line with the logo and the cart above them. */
.dlx-release__sticky-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: var(--dlx-shell-max);
    min-height: 64px;
    margin-inline: auto;
    padding: 8px var(--dlx-gutter);
}
.dlx-release__sticky-art { flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; box-shadow: 0 6px 16px -8px rgba(10, 13, 18, .5), inset 0 0 0 1px rgba(11, 11, 13, .08); }
.dlx-release__sticky-id { display: grid; min-width: 0; flex: 1 1 auto; gap: 1px; }
.dlx-release__sticky-id strong { font-size: var(--dlx-fs-md); font-weight: 650; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlx-release__sticky-pick { display: flex; align-items: baseline; gap: 8px; color: var(--dlx-muted); font-size: var(--dlx-fs-sm); white-space: nowrap; }
.dlx-release__sticky-pick .dlx-release__pick-price { font-weight: 650; color: var(--dlx-text); font-variant-numeric: tabular-nums; }
.dlx-release__sticky-pick .dlx-release__pick-price:not(:empty)::before { content: "\00B7"; margin-right: 8px; color: var(--dlx-faint); font-weight: 400; }
.dlx-release__sticky-add {
    flex: none;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--dlx-radius-control);
    background: var(--dlx-accent);
    color: var(--dlx-accent-contrast);
    padding: 0 22px;
    font-family: inherit;
    font-size: var(--dlx-fs-ui);
    font-weight: 650;
    cursor: pointer;
    transition: background var(--dlx-dur-fast) linear, transform var(--dlx-dur-fast) var(--dlx-ease);
}
.dlx-release__sticky-add:hover { background: var(--dlx-accent-hover); transform: translateY(-1px); }
.dlx-release__sticky-add:active { transform: translateY(1px); }

/* ------------------------------------------------------------ More beats */
.dlx-release__related { padding: clamp(36px, 4vw, 48px) 0 var(--dlx-space-2xl); }
.dlx-release__related .dlx-beat-grid { margin-top: 0; }

/* ----------------------------------------------------- The related shelf */
/*
 * Four records to keep listening to. The art is the object, the play key
 * sits on it, the words sit under it, and the way through is a quiet link.
 * The card markup is shared (inc/beat-card.php); every rule is scoped here.
 */
.dlx-release__related .dlx-beat-grid {
    gap: clamp(16px, 2.2vw, 28px);
    border: 0;
    background: none;
}
.dlx-release__related .dlx-beat-card {
    gap: 0;
    background: transparent;
    padding: 0;
}
.dlx-release__related .dlx-beat-card__art {
    position: relative;
    overflow: hidden;
    border-radius: var(--dlx-radius-lg);
    background: var(--dlx-surface);
    box-shadow: 0 14px 34px -18px rgba(10, 13, 18, .4), 0 1px 3px rgba(10, 13, 18, .06);
}
.dlx-release__related .dlx-beat-card__art::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(11, 11, 13, .08);
    pointer-events: none;
}
.dlx-release__related .dlx-beat-card__art a { display: block; }
.dlx-release__related .dlx-beat-card__art img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform var(--dlx-dur-slow) var(--dlx-ease-out);
}
.dlx-release__related .dlx-beat-card:hover .dlx-beat-card__art img { transform: scale(1.025); }
/* The play key: on the sleeve, where a record's play key goes. Always
   present -- a thumb has no hover -- and ink enough to hold over any art. */
.dlx-release__related .dlx-play {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(11, 11, 13, .82);
    color: #fff;
    padding: 0 0 0 2px;
    font-size: .7rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    transition: background var(--dlx-dur-fast) linear, transform var(--dlx-dur-fast) var(--dlx-ease);
}
.dlx-release__related .dlx-play:hover { background: var(--dlx-text); transform: scale(1.06); }
.dlx-release__related .dlx-play:active { transform: scale(.96); }
.dlx-release__related .dlx-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dlx-release__related .dlx-play.is-playing { background: var(--dlx-signal-deep); }

.dlx-release__related .dlx-beat-card__body { flex: 1 1 auto; padding-top: 14px; }
.dlx-release__related .dlx-beat-card__body h3 {
    margin: 0 0 3px;
    font-size: var(--dlx-fs-md);
    font-weight: 650;
    letter-spacing: -.012em;
    line-height: 1.3;
}
.dlx-release__related .dlx-beat-card__body h3 a { color: var(--dlx-text); text-decoration: none; }
.dlx-release__related .dlx-beat-card__body h3 a:hover { color: var(--dlx-signal-deep); }
.dlx-release__related .dlx-beat-card__body p {
    margin: 0;
    color: var(--dlx-muted);
    font-size: var(--dlx-fs-sm);
    line-height: 1.45;
}
.dlx-release__related .dlx-beat-card__meta {
    margin-top: 8px;
    gap: 12px;
    color: var(--dlx-subtle);
    font-size: var(--dlx-fs-xs);
    font-variant-numeric: tabular-nums;
}
.dlx-release__related .dlx-beat-card__footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--dlx-border-soft);
    align-items: baseline;
    flex-wrap: nowrap;
}
.dlx-release__related .dlx-price { font-size: var(--dlx-fs-sm); font-weight: 650; gap: 4px; }
.dlx-release__related .dlx-price span { color: var(--dlx-muted); font-weight: 500; }
/* The way through: a text link, not a fourth black button on the row. */
.dlx-release__related .dlx-beat-card__footer .dlx-button {
    display: inline-block;
    flex: none;
    width: auto;
    min-width: 0;
    min-height: 0;
    border: 0;
    border-bottom: 1px solid var(--dlx-border-strong);
    border-radius: 0;
    background: none;
    color: var(--dlx-text);
    padding: 0 0 2px;
    font-size: var(--dlx-fs-sm);
    font-weight: 600;
    text-decoration: none;
    box-shadow: none;
    transform: none;
}
.dlx-release__related .dlx-beat-card__footer .dlx-button:hover { background: none; color: var(--dlx-text); border-color: currentColor; transform: none; box-shadow: none; }

/* -------------------------------------------------------- The entrance */
/* theme.js stages the hero in reading order with the site's reveal
   classes; the sleeve holds the page's largest image, so it moves but never
   fades (the same rule the homepage's featured card follows). */
.dlx-release__hero .dlx-will-reveal--hero { transform: translateY(16px); }
/* Said again at the same specificity, because this sheet loads after the
   theme's generic .is-in rule and would otherwise win the tie -- which left
   every hero line parked 16px low, forever, with the entrance never quite
   finishing. */
.dlx-release__hero .dlx-will-reveal--hero.is-in { transform: none; }
.dlx-release__art.dlx-will-reveal--card { opacity: 1; transform: translateY(18px) scale(.985); transition: transform .9s var(--dlx-ease-out), box-shadow var(--dlx-dur-slow) var(--dlx-ease-out); }
.dlx-release__art.dlx-will-reveal--card.is-in { transform: none; }

/* -------------------------------------------------------------- Narrow */
@media (max-width: 1100px) {
    .dlx-release__hero { grid-template-columns: minmax(240px, 34%) minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .dlx-release__buy-head { grid-template-columns: 1fr; align-items: start; gap: 12px; margin-bottom: 24px; }
    .dlx-release__buy-note { margin: 0; }
    /* Stacked tiers read as a list. The long form of each card -- the
       sentence and the four-line list -- folds away; the order block above
       carries the chosen tier's own description. */
    .dlx-tiers { grid-template-columns: 1fr; gap: 8px; }
    .dlx-tier {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "flag  flag"
            "name  price"
            "files choose";
        align-items: center;
        column-gap: 16px;
        row-gap: 4px;
        padding: 16px 18px;
    }
    .dlx-tier:hover { transform: none; }
    .dlx-tier__flag { grid-area: flag; margin-bottom: 6px !important; }
    .dlx-tier__name { grid-area: name; }
    .dlx-tier__price { grid-area: price; justify-self: end; margin: 0 !important; font-size: 1.375rem; }
    .dlx-tier__desc,
    .dlx-tier__list { display: none; }
    .dlx-tier__files { grid-area: files; margin: 4px 0 0 !important; padding: 0; border: 0; color: var(--dlx-muted); }
    /* The ring is 16px; the finger is not. Padding grows the hit area to 44px
       and the negative margin keeps the ring where the grid put it. */
    .dlx-tier__choose { grid-area: choose; justify-self: end; margin: -14px -14px -14px 0; padding: 14px; border: 0; min-width: 44px; min-height: 44px; justify-content: center; }
    .dlx-tier__state-off,
    .dlx-tier__state-on { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .dlx-tier.is-featured { box-shadow: inset 3px 0 0 var(--dlx-signal); }
    .dlx-tier.is-featured.is-selected { box-shadow: inset 0 0 0 1px var(--dlx-text), inset 4px 0 0 var(--dlx-signal); }

    .dlx-release__checkout button.single_add_to_cart_button { max-width: none; flex-basis: 100%; }
    .dlx-beat-single__negotiate { margin-left: 0; width: 100%; }
    .dlx-release__sticky-pick { display: none; }
    .dlx-release__related .dlx-beat-grid,
    .dlx-release__related .dlx-beat-grid--4,
    .dlx-release__related .dlx-beat-grid--3,
    .dlx-release__related .dlx-beat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .dlx-release__related .dlx-play { width: 36px; height: 36px; left: 10px; bottom: 10px; }
    .dlx-release__related .dlx-beat-card__body { padding-top: 10px; }
}
@media (max-width: 760px) {
    .dlx-release__facts { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 14px 20px; justify-content: start; }
    .dlx-release__fact,
    .dlx-release__fact:first-child { border-left: 0; padding: 0; }
    .dlx-release__fact dd { white-space: normal; }
    .dlx-release__hero { grid-template-columns: 1fr; align-items: start; gap: 28px; padding-bottom: 36px; }
    .dlx-release__art { width: min(100%, 420px); }
    .dlx-release__title { font-size: clamp(2.5rem, 11vw, 4rem); }
    .dlx-release__actions { gap: 8px; }
    .dlx-release__play,
    .dlx-release__record { flex: 1 1 auto; justify-content: center; }
    .dlx-beat-single__extras { flex: 0 0 auto; }
    .dlx-release__wave { height: 56px; margin-top: 22px; }
    .dlx-seg__opt { min-height: 66px; padding: 10px 10px 9px; }
    .dlx-seg__price { font-size: var(--dlx-fs-base); }
    .dlx-seg__note { display: none; }
}
@media (max-width: 480px) {
    .dlx-release__crumbs { padding-top: 16px; }
    /* Play takes the row; Record and the two icons share the next one. */
    .dlx-release__play { flex: 1 1 100%; }
    .dlx-release__record { flex: 1 1 auto; padding: 0 12px; }
    .dlx-beat-single__extras { flex: 0 0 auto; }
    .dlx-release__sticky-inner { gap: 10px; }
    .dlx-release__sticky-art { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .dlx-release__art,
    .dlx-release__art:hover,
    .dlx-tier,
    .dlx-tier:hover,
    .dlx-seg__opt,
    .dlx-release__play,
    .dlx-release__record,
    .dlx-release__chips a,
    .dlx-release__sticky,
    .dlx-release__sticky-add,
    .dlx-release__related .dlx-beat-card__art img,
    .dlx-release__related .dlx-play { transition: none; transform: none; animation: none; }
    .dlx-release__record-dot,
    .dlx-release__hero:has(.dlx-release__play.is-playing) .dlx-release__art,
    .dlx-seg__opt.is-popped,
    .dlx-tier.is-popped,
    .dlx-release__checkout button.single_add_to_cart_button.is-added { animation: none; }
    .dlx-release__related .dlx-beat-card:hover .dlx-beat-card__art img { transform: none; }
    .dlx-release__sticky.is-shown { transform: none; }
}


/* =========================================================================
   Goods: merch and sound packs (inc/goods.php, template-parts/goods-single.php)

   The same language as the record page, read from the other side of the
   shop. Archive: a kicker, a one-word title, a line switch (Beats / Sound
   packs / Merch), a grid of objects. Single: the object left, the identity
   and the order right, what it is beneath, siblings under that.
   ====================================================================== */
.dlx-woocommerce-page.is-goods { padding-top: 0; padding-bottom: 0; }
.dlx-woocommerce-page.is-goods .dlx-content-page__inner { padding-block: 0; }
.dlx-goods { display: block; color: var(--dlx-text); }
.dlx-goods > * { min-width: 0; }

/* --------------------------------------------------------------- archive */
.dlx-goods-archive__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: end;
    gap: 18px 48px;
    padding: clamp(28px, 4vw, 52px) 0 clamp(18px, 2.5vw, 26px);
}
.dlx-goods-archive__title {
    margin: 0;
    font-size: clamp(2.75rem, 1.5rem + 4.5vw, 5rem);
    font-weight: 650;
    letter-spacing: var(--dlx-track-display);
    line-height: .94;
}
.dlx-goods-archive__intro { margin: 0 0 8px; color: var(--dlx-muted); font-size: var(--dlx-fs-md); line-height: 1.55; max-width: 44ch; }

/* The line switch: which part of the store you are in. Text with a rule
   under the current one, the catalogue toolbar's own vocabulary. */
.dlx-goods-lines {
    display: flex;
    gap: 26px;
    border-top: 1px solid var(--dlx-border);
    border-bottom: 1px solid var(--dlx-border);
    margin-bottom: clamp(24px, 3vw, 36px);
}
.dlx-goods-lines a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    color: var(--dlx-muted);
    font-size: var(--dlx-fs-ui);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--dlx-dur-fast) linear;
}
.dlx-goods-lines a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -1px;
    height: 1px;
    background: var(--dlx-text);
    transition: right .25s var(--dlx-ease);
}
.dlx-goods-lines a:hover { color: var(--dlx-text); }
.dlx-goods-lines a[aria-current] { color: var(--dlx-text); }
.dlx-goods-lines a[aria-current]::after { right: 0; }

.dlx-goods-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 28px);
}
.dlx-goods-card { display: flex; flex-direction: column; min-width: 0; }
.dlx-goods-card__art {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: var(--dlx-radius-lg);
    background: var(--dlx-surface);
    box-shadow: 0 14px 34px -18px rgba(10, 13, 18, .4), 0 1px 3px rgba(10, 13, 18, .06);
}
.dlx-goods-card__art::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(11, 11, 13, .08);
    pointer-events: none;
}
.dlx-goods-card__art a { display: block; height: 100%; }
.dlx-goods-card__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dlx-dur-slow) var(--dlx-ease-out);
}
.dlx-goods-card:hover .dlx-goods-card__art img { transform: scale(1.025); }
.dlx-goods-card__body { flex: 1 1 auto; padding-top: 14px; }
.dlx-goods-card__body h3 { margin: 0 0 3px; font-size: var(--dlx-fs-md); font-weight: 650; letter-spacing: -.012em; line-height: 1.3; }
.dlx-goods-card__body h3 a { color: var(--dlx-text); text-decoration: none; }
.dlx-goods-card__body h3 a:hover { color: var(--dlx-signal-deep); }
.dlx-goods-card__body p { margin: 0; color: var(--dlx-muted); font-size: var(--dlx-fs-sm); line-height: 1.45; }
.dlx-goods-card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--dlx-border-soft);
}
.dlx-goods-card__price { font-size: var(--dlx-fs-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.dlx-goods-card__price span,
.dlx-goods-card__price bdi { display: inline; color: inherit; font: inherit; }
.dlx-goods-card__price del { color: var(--dlx-subtle); font-weight: 500; margin-right: 6px; }
.dlx-goods-card__price ins { text-decoration: none; }
.dlx-goods-card__go { color: var(--dlx-text); font-size: var(--dlx-fs-sm); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--dlx-border-strong); padding-bottom: 2px; }
.dlx-goods-card__go:hover { border-color: currentColor; }

/* The demo key on a pack's cover: the shelf's play key, previewing the demo
   in place. theme.js swaps the glyph while it plays. */
.dlx-goods-demo { cursor: pointer; }
.dlx-goods-card .dlx-goods-demo {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(11, 11, 13, .82);
    color: #fff;
    padding: 0 0 0 2px;
    font-size: .7rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    transition: background var(--dlx-dur-fast) linear, transform var(--dlx-dur-fast) var(--dlx-ease);
}
.dlx-goods-card .dlx-goods-demo:hover { background: var(--dlx-text); transform: scale(1.06); }
.dlx-goods-card .dlx-goods-demo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dlx-goods-demo.is-playing { background: var(--dlx-signal-deep); }
.dlx-goods-demo.is-playing .dlx-goods-demo__key { letter-spacing: 1px; font-size: .6rem; }
.dlx-goods-demo.is-playing .dlx-release__play-key { background: var(--dlx-signal); }

.dlx-goods-pagination { margin-top: clamp(28px, 4vw, 40px); }
.dlx-goods-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.dlx-goods-pagination .page-numbers {
    display: inline-flex;
    min-width: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dlx-border);
    border-radius: var(--dlx-radius-control);
    color: var(--dlx-text);
    padding: 0 12px;
    font-size: var(--dlx-fs-sm);
    font-weight: 600;
    text-decoration: none;
}
.dlx-goods-pagination .page-numbers.current { background: var(--dlx-text); border-color: var(--dlx-text); color: var(--dlx-bg); }
.dlx-goods-pagination a.page-numbers:hover { border-color: var(--dlx-text); }

.dlx-goods-empty { padding: clamp(40px, 6vw, 72px) 0; color: var(--dlx-muted); font-size: var(--dlx-fs-md); }
.dlx-goods-empty p { margin: 0 0 14px; max-width: 48ch; }
.dlx-goods-empty__link { color: var(--dlx-text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--dlx-border-strong); padding-bottom: 2px; }

/* ---------------------------------------------------------------- single */
.dlx-goods-hero {
    display: grid;
    grid-template-columns: minmax(280px, 46%) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 5vw, 72px);
    padding-bottom: clamp(36px, 4vw, 48px);
    border-bottom: 1px solid var(--dlx-border);
}
.dlx-goods-gallery { display: grid; gap: 10px; }
.dlx-goods-gallery__main {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: var(--dlx-radius-lg);
    background: var(--dlx-surface);
    box-shadow: 0 28px 60px -24px rgba(10, 13, 18, .45), 0 2px 6px rgba(10, 13, 18, .08);
}
.dlx-goods-gallery__main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dlx-goods-gallery__main::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(11, 11, 13, .08);
    pointer-events: none;
}
.dlx-goods-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.dlx-goods-gallery__thumb {
    width: 64px;
    height: 64px;
    overflow: hidden;
    border: 1px solid var(--dlx-border);
    border-radius: 8px;
    background: var(--dlx-surface);
    padding: 0;
    cursor: pointer;
    transition: border-color var(--dlx-dur-fast) linear;
}
.dlx-goods-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dlx-goods-gallery__thumb:hover { border-color: var(--dlx-border-strong); }
.dlx-goods-gallery__thumb.is-current { border-color: var(--dlx-text); box-shadow: inset 0 0 0 1px var(--dlx-text); }
.dlx-goods-gallery__thumb:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 2px; }

.dlx-goods-id { min-width: 0; }
.dlx-goods-title {
    margin: 0;
    font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem);
    font-weight: 650;
    letter-spacing: var(--dlx-track-display);
    line-height: .96;
    overflow-wrap: anywhere;
}
.dlx-goods-price {
    margin: 14px 0 0;
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -.025em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dlx-goods-price span,
.dlx-goods-price bdi { display: inline; color: inherit; font: inherit; }
.dlx-goods-price del { color: var(--dlx-subtle); font-weight: 500; margin-right: 8px; }
.dlx-goods-price ins { text-decoration: none; }
.dlx-goods-lede { margin: 14px 0 0; color: var(--dlx-muted); font-size: var(--dlx-fs-md); line-height: 1.55; max-width: 52ch; }
.dlx-goods-facts { margin-top: 20px; }
.dlx-goods-id .dlx-release__actions { margin-top: 22px; }
.dlx-goods-demo__key { display: block; transform: translateX(1px); }

/* The order: WooCommerce's form, dressed. Size becomes a row of pills that
   theme.js builds from the select; quantity becomes a stepper; the button
   is the one action that takes money. */
.dlx-goods-order { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--dlx-border); }
.dlx-goods-order form.cart { display: grid; gap: 16px; margin: 0 !important; }
.dlx-goods-order > p.price,
.dlx-goods-order .woocommerce-variation-price,
.dlx-goods-order .reset_variations { display: none !important; }
.dlx-goods-order table.variations { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.dlx-goods-order table.variations tbody,
.dlx-goods-order table.variations tr,
.dlx-goods-order table.variations th,
.dlx-goods-order table.variations td { display: block; width: 100%; border: 0; padding: 0; text-align: left; }
.dlx-goods-order table.variations tr + tr { margin-top: 14px; }
.dlx-goods-order table.variations th.label label {
    display: block;
    margin-bottom: 8px;
    color: var(--dlx-subtle);
    font-size: var(--dlx-fs-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.dlx-goods-order select {
    width: 100%;
    min-height: var(--dlx-control);
    border: 1px solid var(--dlx-border-strong);
    border-radius: var(--dlx-radius-sm);
    background: var(--dlx-surface-input);
    color: var(--dlx-text);
    padding: 0 var(--dlx-space-sm);
    font-family: inherit;
    font-size: var(--dlx-fs-md);
}
/* Once the pills exist the select is theirs; hidden the screen-reader way so
   WooCommerce's own scripts still read a live control. */
.dlx-goods-order .has-pills select {
    position: absolute !important;
    width: 1px !important;
    min-width: 0 !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%);
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
}
.dlx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.dlx-pills__opt {
    display: inline-flex;
    min-width: 48px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dlx-border-strong);
    border-radius: var(--dlx-radius-control);
    background: var(--dlx-surface-soft);
    color: var(--dlx-text);
    padding: 0 14px;
    font-family: inherit;
    font-size: var(--dlx-fs-ui);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dlx-dur-fast) linear, color var(--dlx-dur-fast) linear, border-color var(--dlx-dur-fast) linear;
}
.dlx-pills__opt:hover { border-color: var(--dlx-text); }
.dlx-pills__opt:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 2px; }
.dlx-pills__opt[aria-checked="true"] { background: var(--dlx-text); border-color: var(--dlx-text); color: var(--dlx-bg); }
.dlx-pills__opt.is-unavailable { opacity: .4; text-decoration: line-through; }

.dlx-goods-order .woocommerce-variation { display: grid; gap: 0; }
.dlx-goods-order .woocommerce-variation:empty { display: none; }
.dlx-goods-order .woocommerce-variation-description { margin: 0; color: var(--dlx-muted); font-size: var(--dlx-fs-md); line-height: 1.5; }
.dlx-goods-order .woocommerce-variation-description p { margin: 0 !important; }
.dlx-goods-order .woocommerce-variation-availability { color: var(--dlx-muted); font-size: var(--dlx-fs-sm); }
.dlx-goods-order .stock { margin: 0; color: var(--dlx-muted); font-size: var(--dlx-fs-sm); }
.dlx-goods-order .out-of-stock { color: var(--dlx-danger); }

/* Quantity and the button share a row. */
.dlx-goods-order .woocommerce-variation-add-to-cart,
.dlx-goods-order form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dlx-goods-order .quantity {
    display: inline-flex;
    align-items: center;
    height: var(--dlx-control-lg);
    border: 1px solid var(--dlx-border-strong);
    border-radius: var(--dlx-radius-control);
    background: var(--dlx-surface-soft);
    overflow: hidden;
}
.dlx-goods-order .quantity input.qty {
    width: 3rem;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--dlx-text);
    padding: 0;
    font-family: inherit;
    font-size: var(--dlx-fs-md);
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}
.dlx-goods-order .quantity input.qty::-webkit-outer-spin-button,
.dlx-goods-order .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dlx-goods-order .quantity input.qty:focus-visible { outline: none; }
.dlx-goods-order .dlx-qty-step {
    display: grid;
    place-items: center;
    width: 40px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--dlx-muted);
    font-family: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}
.dlx-goods-order .dlx-qty-step:hover { background: var(--dlx-surface); color: var(--dlx-text); }
.dlx-goods-order .dlx-qty-step:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: -3px; }
/* A pack is bought once; the stepper only invites mistakes. */
.dlx-goods-single.is-pack .dlx-goods-order .quantity { display: none !important; }

.dlx-goods-order button.single_add_to_cart_button {
    display: inline-flex !important;
    flex: 1 1 220px;
    max-width: 360px;
    min-height: var(--dlx-control-lg) !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0 !important;
    border-radius: var(--dlx-radius-control) !important;
    background: var(--dlx-accent) !important;
    color: var(--dlx-accent-contrast) !important;
    padding: 0 28px !important;
    font-family: inherit;
    font-size: var(--dlx-fs-md) !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: 0 12px 28px -14px rgba(10, 13, 18, .55);
    transition: background var(--dlx-dur-fast) linear, transform var(--dlx-dur-fast) var(--dlx-ease), box-shadow var(--dlx-dur-fast) linear;
}
.dlx-goods-order button.single_add_to_cart_button:hover { background: var(--dlx-accent-hover) !important; transform: translateY(-1px); }
.dlx-goods-order button.single_add_to_cart_button:active { transform: translateY(1px); box-shadow: none; }
.dlx-goods-order button.single_add_to_cart_button.disabled,
.dlx-goods-order button.single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.dlx-goods-order button.single_add_to_cart_button.is-adding { opacity: .7; cursor: progress; }
.dlx-goods-order button.single_add_to_cart_button.is-added { background: var(--dlx-green) !important; animation: dlx-release-pop 340ms var(--dlx-ease-out); }
/* Printful's size guide, when it hangs one on the summary. */
.dlx-goods-order .printful-size-guide,
.dlx-goods-order [class*="size-guide"] { margin-top: 4px; color: var(--dlx-muted); font-size: var(--dlx-fs-sm); }
.dlx-goods-order [class*="size-guide"] a,
.dlx-goods-order [class*="size-guide"] button { color: var(--dlx-text); background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--dlx-border-strong); cursor: pointer; }
.dlx-goods-order .ppc-button-wrapper { margin: 0 !important; }
.dlx-goods-id .dlx-release__assure { margin-top: 18px; }

/* What it is. */
.dlx-goods-about {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: clamp(28px, 5vw, 72px);
    padding: clamp(32px, 4vw, 48px) 0;
    border-bottom: 1px solid var(--dlx-border);
}
.dlx-goods-prose { color: var(--dlx-muted); font-size: var(--dlx-fs-base); line-height: var(--dlx-lh-body); max-width: 60ch; }
.dlx-goods-prose p { margin: 0 0 1em; }
.dlx-goods-prose p:last-child { margin-bottom: 0; }
.dlx-goods-contents { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dlx-goods-contents li { position: relative; padding-left: 16px; color: var(--dlx-text); font-size: var(--dlx-fs-md); line-height: 1.45; }
.dlx-goods-contents li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 1px; background: var(--dlx-signal); }
.dlx-goods-contents__format { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--dlx-border-soft); color: var(--dlx-subtle); font-size: var(--dlx-fs-sm); }

.dlx-goods-related { padding: clamp(36px, 4vw, 48px) 0 var(--dlx-space-2xl); }

/* WooCommerce's notice after a non-AJAX add (a quantity above one): in the
   page's voice rather than the stock green bar. */
.dlx-woocommerce-page.is-goods .woocommerce-message,
.dlx-woocommerce-page.is-goods .woocommerce-error,
.dlx-woocommerce-page.is-goods .woocommerce-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 16px 0 0;
    border: 1px solid var(--dlx-border);
    border-left: 3px solid var(--dlx-text);
    border-radius: var(--dlx-radius-lg);
    background: var(--dlx-surface-soft);
    color: var(--dlx-text);
    padding: 14px 18px;
    font-size: var(--dlx-fs-md);
    list-style: none;
}
.dlx-woocommerce-page.is-goods .woocommerce-error { border-left-color: var(--dlx-danger); }
.dlx-woocommerce-page.is-goods .woocommerce-message .button {
    order: 2;
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    border-radius: var(--dlx-radius-control);
    background: var(--dlx-accent);
    color: var(--dlx-accent-contrast);
    padding: 0 16px;
    font-size: var(--dlx-fs-ui);
    font-weight: 650;
    text-decoration: none;
}

/* ------------------------------------------------------------- narrow */
@media (max-width: 1100px) {
    .dlx-goods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .dlx-goods-archive__head { grid-template-columns: 1fr; align-items: start; gap: 12px; }
    .dlx-goods-archive__intro { margin: 0; }
    .dlx-goods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .dlx-goods-about { grid-template-columns: 1fr; gap: 28px; }
    .dlx-goods-card .dlx-goods-demo { width: 36px; height: 36px; left: 10px; bottom: 10px; }
}
@media (max-width: 760px) {
    .dlx-goods-hero { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; }
    .dlx-goods-gallery__main { width: min(100%, 480px); }
    .dlx-goods-lines { gap: 20px; overflow-x: auto; scrollbar-width: none; }
    .dlx-goods-lines a { white-space: nowrap; }
    .dlx-goods-order button.single_add_to_cart_button { max-width: none; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .dlx-goods-card__art img,
    .dlx-goods-demo,
    .dlx-goods-lines a::after { transition: none; }
    .dlx-goods-card:hover .dlx-goods-card__art img { transform: none; }
    .dlx-goods-order button.single_add_to_cart_button.is-added { animation: none; }
}

/* =========================================================================
   Customer account

   The account sits on the page rather than inside a card, with a quiet rule
   between the navigation and the view. One column width, one field style, one
   heading size: the pages differ in content, not in furniture.
   ====================================================================== */
body.digitlix-account .dlx-content-page { padding-top: clamp(28px, 3vw, 44px); }
body.digitlix-account .dlx-commerce-intro { margin-bottom: clamp(24px, 3vw, 36px); }
body.digitlix-account .dlx-commerce-intro h1 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }

body.digitlix-account .woocommerce {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
}
/* WooCommerce puts clearfix ::before/::after on .woocommerce, on .col2-set
   and on every .form-row. Inside a grid container those pseudo-elements are
   grid items in their own right: they claim the first and last cells and
   shunt the real children along by one. That is what made the account page
   look sideways, signed in (navigation thrown into column two, content into
   column one of a second row) and signed out (Login into column two,
   Register underneath it). None of these wrappers contain floats any more,
   so there is nothing left for the clearfix to do. */
body.digitlix-account .woocommerce::before,
body.digitlix-account .woocommerce::after,
body.digitlix-account .u-columns::before,
body.digitlix-account .u-columns::after,
body.digitlix-account .form-row::before,
body.digitlix-account .form-row::after,
body.digitlix-commerce .form-row::before,
body.digitlix-commerce .form-row::after { display: none !important; }
/* Placed explicitly so the layout cannot drift again if anything else adds a
   child or a pseudo-element to this wrapper. */
body.digitlix-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
body.digitlix-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; }
body.digitlix-account .woocommerce-MyAccount-navigation,
body.digitlix-account .woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}
body.digitlix-account .woocommerce-MyAccount-navigation { border-right: 1px solid var(--dlx-border); padding-right: clamp(12px, 2vw, 24px); }
body.digitlix-account .woocommerce-MyAccount-navigation ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
body.digitlix-account .woocommerce-MyAccount-navigation a {
    display: block;
    border-radius: var(--dlx-radius-sm);
    color: var(--dlx-muted);
    padding: 10px 12px;
    font-size: var(--dlx-fs-ui);
    font-weight: 600;
    text-decoration: none;
}
body.digitlix-account .woocommerce-MyAccount-navigation a:hover { color: var(--dlx-text); }
body.digitlix-account .woocommerce-MyAccount-navigation .is-active a { background: var(--dlx-surface-2); color: var(--dlx-text); }
body.digitlix-account .woocommerce-MyAccount-content > *:first-child { margin-top: 0; }
body.digitlix-account .woocommerce-MyAccount-content h2,
body.digitlix-account .woocommerce-MyAccount-content h3 { color: var(--dlx-text); font-family: var(--dlx-font); font-size: var(--dlx-fs-h3); font-weight: 700; }
body.digitlix-account .woocommerce-MyAccount-content p { color: var(--dlx-muted); }
body.digitlix-account .woocommerce-MyAccount-content a:not(.dlxx-button):not(.button) { color: var(--dlx-text); }

/* Signed out: login and registration side by side, held to a readable width
   so a two-field form does not stretch across the whole page. */
body.digitlix-account:not(.logged-in) .woocommerce { display: block; }
/* Exactly two columns, capped. auto-fit split the full 1200px into three
   tracks and left the third one empty, which is where the "excessive empty
   space" on the sign-in page came from. */
body.digitlix-account .u-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
    gap: clamp(24px, 4vw, 56px);
}
body.digitlix-account .u-column1,
body.digitlix-account .u-column2 { float: none !important; width: auto !important; }
/* Placed explicitly for the same reason as the account navigation above. */
body.digitlix-account .u-column1 { grid-column: 1; grid-row: 1; }
body.digitlix-account .u-column2 { grid-column: 2; grid-row: 1; }
/* This block has to sit after the placement above, not before it: the two
   have the same specificity, so on source order alone the wide-screen rule
   would win at every width and stack Register on top of Login. */
@media (max-width: 700px) {
    body.digitlix-account .u-columns { grid-template-columns: minmax(0, 1fr); }
    body.digitlix-account .u-column1 { grid-column: 1; grid-row: 1; }
    body.digitlix-account .u-column2 { grid-column: 1; grid-row: 2; }
}
body.digitlix-account .woocommerce-form-login,
body.digitlix-account .woocommerce-form-register,
body.digitlix-account .woocommerce-ResetPassword {
    max-width: 440px;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.digitlix-account .woocommerce > h2,
body.digitlix-account .u-column1 > h2,
body.digitlix-account .u-column2 > h2 { margin: 0 0 var(--dlx-space-md); color: var(--dlx-text); font-family: var(--dlx-font); font-size: var(--dlx-fs-h3); font-weight: 700; }

/* One field style everywhere in the account. */
body.digitlix-account .woocommerce .form-row,
body.digitlix-account .woocommerce .woocommerce-form-row { display: grid; gap: 6px; margin: 0 0 var(--dlx-space-md); padding: 0; }
body.digitlix-account .woocommerce label { color: var(--dlx-subtle); font-size: var(--dlx-fs-ui); }
body.digitlix-account .woocommerce .required { color: var(--dlx-muted); text-decoration: none; }
body.digitlix-account .woocommerce input[type="text"],
body.digitlix-account .woocommerce input[type="email"],
body.digitlix-account .woocommerce input[type="password"],
body.digitlix-account .woocommerce input[type="tel"],
body.digitlix-account .woocommerce input[type="number"],
body.digitlix-account .woocommerce input[type="search"],
body.digitlix-account .woocommerce textarea,
body.digitlix-account .woocommerce select {
    width: 100%;
    min-height: var(--dlx-control);
    border: 1px solid var(--dlx-border-strong);
    border-radius: var(--dlx-radius-sm);
    background: var(--dlx-surface-input);
    color: var(--dlx-text);
    padding: 10px 14px;
    font-family: inherit;
    font-size: var(--dlx-fs-md);
    box-shadow: var(--dlx-cut);
    color-scheme: dark;
}
/* Checkboxes are not slots; the inset belongs to fields you type into. */
body.digitlix-account .woocommerce input[type="checkbox"],
body.digitlix-account .woocommerce input[type="radio"] { box-shadow: none; }
body.digitlix-account .woocommerce input:focus-visible,
body.digitlix-account .woocommerce textarea:focus-visible,
body.digitlix-account .woocommerce select:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 2px; }
body.digitlix-account .woocommerce-form-login__rememberme,
body.digitlix-account .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 8px; color: var(--dlx-muted); }
body.digitlix-account .woocommerce-form-login__rememberme input,
body.digitlix-account .woocommerce-form__label-for-checkbox input { width: auto; min-height: 0; }
body.digitlix-account .woocommerce-privacy-policy-text p { font-size: var(--dlx-fs-sm); }
body.digitlix-account .woocommerce-LostPassword { margin: var(--dlx-space-sm) 0 0; font-size: var(--dlx-fs-sm); }

body.digitlix-account .woocommerce-Button,
body.digitlix-account button.button,
body.digitlix-account a.button,
body.digitlix-account .dlxx-button {
    display: inline-flex;
    min-height: var(--dlx-control);
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: var(--dlx-radius-sm) !important;
    background: var(--dlx-accent) !important;
    color: var(--dlx-accent-contrast) !important;
    padding: 0 20px !important;
    font-size: var(--dlx-fs-ui) !important;
    font-weight: 800 !important;
    text-decoration: none;
    cursor: pointer;
}
body.digitlix-account .woocommerce-Button:hover,
body.digitlix-account button.button:hover,
body.digitlix-account a.button:hover,
body.digitlix-account .dlxx-button:hover { background: var(--dlx-accent-hover) !important; }

/* --- Purchases, lyrics and offers -------------------------------------- */
.dlxx-account__intro { margin: 0 0 var(--dlx-space-lg); color: var(--dlx-muted); font-size: var(--dlx-fs-md); max-width: 62ch; }
.dlxx-account--empty { display: grid; justify-items: start; gap: var(--dlx-space-sm); max-width: 46ch; }
.dlxx-account--empty strong { color: var(--dlx-text); font-size: var(--dlx-fs-lg); }
.dlxx-account--empty p { margin: 0; color: var(--dlx-muted); }
.dlxx-account--empty .dlxx-button { margin-top: var(--dlx-space-xs); }

.dlxx-purchases,
.dlxx-offers { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dlx-border-soft); }
.dlxx-purchase,
.dlxx-offer {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--dlx-space-md);
    border-bottom: 1px solid var(--dlx-border-soft);
    padding: var(--dlx-space-md) 0;
}
.dlxx-purchase__art { display: block; overflow: hidden; width: 48px; height: 48px; border-radius: 6px; }
.dlxx-purchase__art img { width: 100%; height: 100%; object-fit: cover; }
.dlxx-purchase__identity h3 { margin: 0; color: var(--dlx-text); font-family: var(--dlx-font); font-size: var(--dlx-fs-md); font-weight: 700; }
.dlxx-purchase__identity h3 a { color: inherit; text-decoration: none; }
.dlxx-purchase__identity h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dlxx-purchase__identity p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 3px 0 0; color: var(--dlx-subtle); font-size: var(--dlx-fs-sm); }
.dlxx-tag { color: var(--dlx-text); font-size: var(--dlx-fs-sm); font-weight: 700; }
.dlxx-purchase__files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dlxx-purchase__files .dlxx-button { min-height: 36px !important; padding: 0 14px !important; font-size: var(--dlx-fs-sm) !important; }
.dlxx-purchase__pending { color: var(--dlx-subtle); font-size: var(--dlx-fs-sm); }

.dlxx-offer-status { color: var(--dlx-subtle); font-size: var(--dlx-fs-sm); font-weight: 700; white-space: nowrap; }
.dlxx-offer-status--accepted { color: var(--dlx-green); }
.dlxx-offer-status--declined { color: var(--dlx-danger); }
.dlxx-offer-status--replied { color: var(--dlx-info); }

.dlxx-lyrics__form { display: grid; gap: var(--dlx-space-md); max-width: 720px; margin-bottom: var(--dlx-space-xl); }
.dlxx-lyrics__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dlx-space-md); }
.dlxx-lyrics__form label { display: grid; gap: 6px; }
.dlxx-lyrics__form label > span { color: var(--dlx-subtle); font-size: var(--dlx-fs-ui); }
.dlxx-lyrics__form textarea { min-height: 220px; font-family: var(--dlx-font); line-height: 1.7; resize: vertical; font-variant-numeric: tabular-nums;
}
.dlxx-lyrics__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dlx-space-md); }
.dlxx-link { border: 0; background: none; color: var(--dlx-muted); padding: 0; font-family: inherit; font-size: var(--dlx-fs-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dlxx-link:hover { color: var(--dlx-text); }
.dlxx-link--danger { color: var(--dlx-danger); }
.dlxx-lyrics__list { display: grid; max-width: 720px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dlx-border-soft); }
.dlxx-lyrics__list a { display: grid; gap: 2px; border-bottom: 1px solid var(--dlx-border-soft); padding: 12px 0; text-decoration: none; }
.dlxx-lyrics__list strong { color: var(--dlx-text); font-size: var(--dlx-fs-md); }
.dlxx-lyrics__list a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.dlxx-lyrics__list span { color: var(--dlx-subtle); font-size: var(--dlx-fs-sm); }

@media (max-width: 820px) {
    body.digitlix-account .woocommerce { grid-template-columns: minmax(0, 1fr); gap: var(--dlx-space-lg); }
    /* One column here, so the explicit placement above has to come back to a
       single stack or the content would ask for a column that no longer exists. */
    body.digitlix-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
    body.digitlix-account .woocommerce-MyAccount-content { grid-column: 1; grid-row: 2; }
    body.digitlix-account .woocommerce-MyAccount-navigation { border-right: 0; border-bottom: 1px solid var(--dlx-border); padding: 0 0 var(--dlx-space-sm); }
    body.digitlix-account .woocommerce-MyAccount-navigation ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: var(--dlx-space-xs); }
    body.digitlix-account .woocommerce-MyAccount-navigation a { white-space: nowrap; }
    .dlxx-purchase,
    .dlxx-offer { grid-template-columns: 48px minmax(0, 1fr); }
    .dlxx-purchase__files,
    .dlxx-offer .dlxx-offer-status { grid-column: 2 / -1; justify-content: flex-start; justify-self: start; }
}

/* --- Empty cart --------------------------------------------------------
   WooCommerce fills an empty cart with a "New in store" product grid whose
   buttons keep Woo's default blue-grey. These rules bring it into the palette
   rather than leaving the one screen a visitor sees when they arrive early
   looking like a different site. */
body.woocommerce-cart .wc-block-cart__empty-cart__title,
body.woocommerce-cart .cart-empty {
    color: var(--dlx-text) !important;
    font-family: var(--dlx-font-display);
    font-size: var(--dlx-fs-h2) !important;
    font-weight: 700;
    line-height: var(--dlx-lh-tight);
}
/* Woo draws a 160px frowning-face above that heading, with 64px beneath it:
   224px of decoration, in a flat cartoon style that belongs to no other part
   of this site. The words already say the cart is empty. */
body.woocommerce-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none; }
/* The block template separates the message from the product grid with a
   grey "..." . A hairline in the theme's own border colour reads as a section
   break instead of as leftover placeholder text. */
body.woocommerce-cart .wp-block-separator.is-style-dots { height: auto; }
body.woocommerce-cart .wp-block-separator.is-style-dots::before {
    content: "";
    display: block;
    border-top: 1px solid var(--dlx-border);
}
/* Every other heading on the site starts at the left margin; these two came
   out of the block template centred, which left the empty cart looking like a
   different page from the one above it. */
body.woocommerce-cart .wc-block-cart__empty-cart__title,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2.has-text-align-center { text-align: left !important; }
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
    font-family: var(--dlx-font-display);
    font-size: var(--dlx-fs-h3) !important;
    font-weight: 700;
}
body.woocommerce-cart .wc-block-grid__product-image img { border-radius: var(--dlx-radius-sm); }
body.woocommerce-cart .wc-block-grid__product-title { color: var(--dlx-text) !important; font-size: var(--dlx-fs-md) !important; font-weight: 700; }
/* Woo underlines the grid's product links; no other card title on the site is
   underlined, so they read as raw links sitting in a styled grid. */
body.woocommerce-cart .wc-block-grid__product-link { text-decoration: none; }
body.woocommerce-cart .wc-block-grid__product-link:hover .wc-block-grid__product-title { text-decoration: underline; text-underline-offset: 3px; }
body.woocommerce-cart .wc-block-grid__product-price { color: var(--dlx-muted) !important; }
body.woocommerce-cart .wc-block-grid__product a.button,
body.woocommerce-cart .wc-block-grid__product .wp-block-button__link {
    min-height: var(--dlx-tap);
    border-radius: var(--dlx-radius-sm) !important;
    background: var(--dlx-accent) !important;
    color: var(--dlx-accent-contrast) !important;
    font-size: var(--dlx-fs-ui) !important;
    font-weight: 800 !important;
}

/* Type hierarchy */
body.digitlix-commerce .wc-block-components-title,
body.digitlix-commerce .wc-block-components-checkout-step__title,
body.digitlix-commerce .wc-block-components-order-summary__button-text,
body.digitlix-commerce .wc-block-components-totals-item__label,
body.digitlix-commerce .wc-block-components-totals-item__value,
body.digitlix-commerce .wc-block-components-product-name,
body.digitlix-commerce .wc-block-cart-item__product .wc-block-components-product-name,
body.digitlix-commerce h2,
body.digitlix-commerce h3,
body.digitlix-commerce strong { color: var(--dlx-text) !important; }
body.digitlix-commerce .wc-block-components-title { font-size: var(--dlx-fs-h3) !important; font-weight: 800 !important; }
body.digitlix-commerce .wc-block-components-checkout-step__title { font-size: var(--dlx-fs-base) !important; font-weight: 800 !important; }
body.digitlix-commerce .wc-block-components-checkout-step__description,
body.digitlix-commerce .wc-block-components-checkbox__label,
body.digitlix-commerce .wc-block-components-address-card address,
body.digitlix-commerce .wc-block-components-product-metadata,
body.digitlix-commerce .wc-block-components-order-summary-item__description,
body.digitlix-commerce .wc-block-components-totals-coupon__button,
body.digitlix-commerce .wc-block-cart-item__remove-link { color: var(--dlx-muted) !important; }
body.digitlix-commerce .wc-block-components-product-metadata,
body.digitlix-commerce .wc-block-components-order-summary-item__description { font-size: var(--dlx-fs-sm) !important; line-height: 1.45 !important; }

/* Checkout sections */
body.digitlix-commerce .wc-block-components-checkout-step { margin: 0 !important; border-bottom: 1px solid var(--dlx-border) !important; padding: 0 0 var(--dlx-space-lg) !important; }
body.digitlix-commerce .wc-block-components-checkout-step + .wc-block-components-checkout-step { padding-top: var(--dlx-space-lg) !important; }
body.digitlix-commerce .wc-block-components-checkout-step:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
body.digitlix-commerce .wc-block-components-checkout-step__heading { margin-bottom: var(--dlx-space-md) !important; }
body.digitlix-commerce .wc-block-checkout__add-note { display: none !important; }
body.digitlix-commerce .wc-block-components-address-card,
body.digitlix-commerce .wc-block-components-radio-control,
body.digitlix-commerce .wc-block-components-radio-control-accordion-option {
    border-color: var(--dlx-border-strong) !important;
    background: var(--dlx-surface-input) !important;
    color: var(--dlx-text) !important;
}
body.digitlix-commerce .wc-block-components-address-card { border-radius: var(--dlx-radius-control) !important; padding: var(--dlx-space-md) !important; }
body.digitlix-commerce .wc-block-components-radio-control-accordion-option:has(input:checked),
body.digitlix-commerce .wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-color: var(--dlx-accent) !important; }
body.digitlix-commerce .wc-block-components-radio-control__label { font-weight: 700 !important; }
body.digitlix-commerce .wc-block-components-radio-control__label,
body.digitlix-commerce .wc-block-components-radio-control__description,
body.digitlix-commerce .wc-block-components-radio-control-accordion-content { color: var(--dlx-muted) !important; }
body.digitlix-commerce .wc-block-components-radio-control-accordion-content {
    padding: var(--dlx-space-2xs) var(--dlx-space-md) var(--dlx-space-md) !important;
    font-size: var(--dlx-fs-ui) !important;
    text-align: left !important;
}
body.digitlix-commerce .wc-block-components-radio-control-accordion-content p { margin: var(--dlx-space-xs) 0 0 !important; }

/* Inputs */
body.digitlix-commerce .wc-block-components-text-input input,
body.digitlix-commerce .wc-block-components-combobox-control input,
body.digitlix-commerce input[type="text"],
body.digitlix-commerce input[type="email"],
body.digitlix-commerce input[type="tel"],
body.digitlix-commerce input[type="password"],
body.digitlix-commerce textarea,
body.digitlix-commerce select {
    min-height: var(--dlx-control) !important;
    border: 1px solid var(--dlx-border-strong) !important;
    border-radius: var(--dlx-radius-sm) !important;
    background: var(--dlx-surface-input) !important;
    color: var(--dlx-text) !important;
    /* Cut into the page, like every other field on the site. Checkout gets
       the depth cue and nothing else: the layout, the order of the fields and
       the copy are all left exactly as WooCommerce ships them, because this is
       the one page where being interesting is a cost. */
    box-shadow: var(--dlx-cut) !important;
}
body.digitlix-commerce .wc-block-components-text-input label,
body.digitlix-commerce .wc-block-components-combobox-control label { color: var(--dlx-muted) !important; }
body.digitlix-commerce input:focus,
body.digitlix-commerce textarea:focus,
body.digitlix-commerce select:focus { border-color: var(--dlx-subtle) !important; outline: 3px solid var(--dlx-signal-soft) !important; outline-offset: 2px !important; }
body.digitlix-commerce input[type="checkbox"],
body.digitlix-commerce input[type="radio"] { accent-color: var(--dlx-accent); }

/* Buttons */
body.digitlix-commerce .wc-block-components-button,
body.digitlix-commerce button.button,
body.digitlix-commerce a.button,
body.digitlix-commerce input.button,
body.digitlix-commerce #place_order {
    min-height: var(--dlx-control) !important;
    border: 1px solid var(--dlx-accent) !important;
    border-radius: var(--dlx-radius-control) !important;
    background-color: var(--dlx-accent) !important;
    background-image: var(--dlx-face-ink) !important;
    color: var(--dlx-accent-contrast) !important;
    padding: 0 18px !important;
    font-size: var(--dlx-fs-ui) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: var(--dlx-z2) !important;
    transition: background-color var(--dlx-dur-fast) var(--dlx-ease),
                border-color var(--dlx-dur-fast) var(--dlx-ease),
                transform var(--dlx-dur-fast) var(--dlx-ease),
                box-shadow var(--dlx-dur-fast) var(--dlx-ease);
}
body.digitlix-commerce .wc-block-components-button:hover,
body.digitlix-commerce button.button:hover,
body.digitlix-commerce a.button:hover,
body.digitlix-commerce input.button:hover,
body.digitlix-commerce #place_order:hover { background-color: var(--dlx-accent-hover) !important; border-color: var(--dlx-text) !important; box-shadow: var(--dlx-z3) !important; }
body.digitlix-commerce .wc-block-components-button:active,
body.digitlix-commerce button.button:active,
body.digitlix-commerce a.button:active,
body.digitlix-commerce input.button:active,
body.digitlix-commerce #place_order:active { background-image: none !important; transform: translate3d(0, 1px, 0); box-shadow: var(--dlx-press) !important; }
body.digitlix-commerce .wc-block-components-checkout-place-order-button { width: 100% !important; min-height: var(--dlx-control-lg) !important; }
body.digitlix-commerce .wc-block-components-express-payment-continue-rule { color: var(--dlx-muted) !important; margin-block: var(--dlx-space-md) !important; }
body.digitlix-commerce .wc-block-components-express-payment__content { border-color: var(--dlx-border-strong) !important; border-radius: var(--dlx-radius) !important; background: var(--dlx-surface-input) !important; padding: var(--dlx-space-sm) !important; }
body.digitlix-commerce .wc-block-components-express-payment__title-container .wc-block-components-title { font-size: var(--dlx-fs-ui) !important; color: var(--dlx-muted) !important; }

/* Order summary and cart rows */
body.digitlix-commerce .wc-block-components-order-summary { border: 0 !important; }
body.digitlix-commerce .wc-block-components-order-summary-item { border-color: var(--dlx-border) !important; padding-block: var(--dlx-space-sm) !important; }
body.digitlix-commerce .wc-block-components-order-summary-item__image img,
body.digitlix-commerce .wc-block-cart-item__image img { border-radius: var(--dlx-radius-sm) !important; }
body.digitlix-commerce .wc-block-components-totals-wrapper { border-color: var(--dlx-border) !important; padding-block: 13px !important; }
body.digitlix-commerce .wc-block-components-order-summary-item__individual-price,
body.digitlix-commerce .wc-block-components-product-price__value { color: var(--dlx-text) !important; }
body.digitlix-commerce .wc-block-cart-items,
body.digitlix-commerce .wc-block-cart-items th,
body.digitlix-commerce .wc-block-cart-items td { border-color: var(--dlx-border) !important; }
body.digitlix-commerce .wc-block-cart-items__row { padding: var(--dlx-space-md) 0 !important; }
body.digitlix-commerce .wc-block-components-quantity-selector { border-color: var(--dlx-border-strong) !important; border-radius: var(--dlx-radius-sm) !important; background: var(--dlx-surface-input) !important; }
body.digitlix-commerce .wc-block-components-quantity-selector input,
body.digitlix-commerce .wc-block-components-quantity-selector button { color: var(--dlx-text) !important; }
body.digitlix-commerce .wc-block-components-totals-footer-item,
body.digitlix-commerce .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: var(--dlx-fs-h3) !important; font-weight: 800 !important; }
body.digitlix-commerce .wc-block-components-totals-coupon-link { color: var(--dlx-muted) !important; }

/* Do not turn PayPal messaging containers into blank white boxes. */
body.digitlix-commerce .ppcp-messages,
body.digitlix-commerce [id*="ppcp-messages"] {
    min-height: 0 !important;
    margin: var(--dlx-space-xs) 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
}
body.digitlix-commerce .ppcp-messages:empty,
body.digitlix-commerce [id*="ppcp-messages"]:empty { display: none !important; }
/* :empty misses it once PayPal has inserted its own empty <span>, which still
   reserves a 26px band under the total. The messaging draws into an iframe
   when it actually has something to say, so no iframe means nothing to show. */
body.digitlix-commerce .ppcp-messages:not(:has(iframe)) { display: none !important; }

/* The offer notice offer.js writes ahead of the cart and checkout blocks.
   Empty and hidden until the cart data says what it should say, so nothing
   flashes on screen before the first paint. */
body.digitlix-commerce .dlxx-offer-holder[hidden] { display: none !important; }
body.digitlix-commerce .dlxx-offer-holder .dlxx-offer-note { margin-bottom: var(--dlx-space-md); }

/* WooCommerce prints the fee and discount rows whether or not there is a fee
   or a discount. This store has neither, so they came out as two 26px bands
   of pure padding between Subtotal and Total: a 52px hole in the middle of
   the order summary. A totals row with no contents has nothing to show. */
body.digitlix-commerce .wc-block-components-totals-wrapper:not(:has(*)),
body.digitlix-commerce [class*="order-summary-fee-block"]:not(:has(*)),
body.digitlix-commerce [class*="order-summary-discount-block"]:not(:has(*)) { display: none !important; }

/* Classic WooCommerce fallback */
body.digitlix-commerce .woocommerce form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: var(--dlx-space-lg); }
body.digitlix-commerce .woocommerce #customer_details,
body.digitlix-commerce .woocommerce #order_review,
body.digitlix-commerce .woocommerce-cart-form,
body.digitlix-commerce .cart-collaterals,
body.digitlix-commerce .woocommerce-MyAccount-navigation,
body.digitlix-commerce .woocommerce-MyAccount-content,
body.digitlix-order-received .woocommerce-order {
    border: 1px solid var(--dlx-border);
    border-radius: var(--dlx-radius-lg);
    background: var(--dlx-surface);
    padding: var(--dlx-space-lg);
}
body.digitlix-commerce .woocommerce #customer_details { grid-column: 1; }
body.digitlix-commerce .woocommerce #order_review_heading,
body.digitlix-commerce .woocommerce #order_review { grid-column: 2; }
body.digitlix-commerce .woocommerce #order_review { position: sticky; top: 96px; }
body.digitlix-commerce table.shop_table { border-color: var(--dlx-border) !important; background: transparent !important; }
body.digitlix-commerce table.shop_table th,
body.digitlix-commerce table.shop_table td { border-color: var(--dlx-border) !important; color: var(--dlx-text) !important; }
body.digitlix-commerce #payment { border: 1px solid var(--dlx-border-strong) !important; border-radius: var(--dlx-radius-control) !important; background: var(--dlx-surface-input) !important; }
body.digitlix-commerce #payment div.payment_box { background: var(--dlx-surface-2) !important; color: var(--dlx-muted) !important; }

/* My Account */
body.digitlix-commerce .woocommerce-MyAccount-navigation { float: left; width: 25%; }
body.digitlix-commerce .woocommerce-MyAccount-content { float: right; width: calc(75% - var(--dlx-space-lg)); }
body.digitlix-commerce .woocommerce-MyAccount-navigation ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
body.digitlix-commerce .woocommerce-MyAccount-navigation a { display: block; min-height: var(--dlx-tap); border-radius: var(--dlx-radius-sm); color: var(--dlx-muted); padding: 11px 12px; text-decoration: none; }
body.digitlix-commerce .woocommerce-MyAccount-navigation .is-active a { background: var(--dlx-accent); color: var(--dlx-accent-contrast); }
body.digitlix-commerce .woocommerce-MyAccount-content::after { display: table; clear: both; content: ""; }

/* Order received */
body.digitlix-order-received .woocommerce-order > p:first-child { border: 1px solid var(--dlx-green) !important; border-radius: var(--dlx-radius-control); background: var(--dlx-green-bg); color: var(--dlx-green) !important; margin-bottom: var(--dlx-space-lg); padding: 15px; }
/* One row of facts about the order. WooCommerce prints four of these for a
   guest and five (email included) for a signed-in buyer, so the track count
   is auto-fit: unused tracks collapse and the tiles always fill the row.
   The email takes two tracks because it is always the longest value. On one
   track it wrapped to two lines and left every other tile standing in
   empty space, which is what made the row look ragged. */
body.digitlix-order-received .woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin: 0 0 var(--dlx-space-lg) !important; padding: 0 !important; }
body.digitlix-order-received .woocommerce-order-overview__email { grid-column: span 2; }
body.digitlix-order-received .woocommerce-order-overview__email strong { overflow-wrap: anywhere; }
/* WooCommerce's clearfix pseudo-elements would become invisible grid items
   and leave a phantom empty first tile. */
body.digitlix-order-received .woocommerce-order-overview::before,
body.digitlix-order-received .woocommerce-order-overview::after { content: none !important; display: none !important; }
body.digitlix-order-received .woocommerce-order-overview li { float: none !important; display: flex; flex-direction: column; justify-content: flex-start; margin: 0 !important; border: 1px solid var(--dlx-border) !important; border-radius: 9px; color: var(--dlx-subtle) !important; padding: 11px 13px 12px !important; font-size: 0.6875rem; line-height: 1.3; }
body.digitlix-order-received .woocommerce-order-overview strong { display: block; margin-top: 5px; color: var(--dlx-text) !important; font-size: var(--dlx-fs-ui); line-height: 1.35; }
/* Only the actual file is a button; the product name reads as a link. */
body.digitlix-order-received .woocommerce-order-downloads a.woocommerce-MyAccount-downloads-file { display: inline-flex; min-height: var(--dlx-tap); align-items: center; border-radius: 9px; background: var(--dlx-accent); color: var(--dlx-accent-contrast) !important; padding: 0 15px; font-weight: 800; text-decoration: none; }
body.digitlix-order-received .woocommerce-order-downloads td.download-product a { color: var(--dlx-text) !important; font-weight: 600; text-decoration: none; }
body.digitlix-order-received .woocommerce-order-downloads td.download-product a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
    body.digitlix-commerce .wc-block-components-sidebar-layout,
    body.digitlix-commerce .woocommerce form.checkout { grid-template-columns: 1fr !important; }
    body.digitlix-checkout .wc-block-components-sidebar,
    body.woocommerce-cart .wc-block-cart__sidebar,
    body.digitlix-commerce .woocommerce #order_review { position: static !important; }
    body.digitlix-commerce .woocommerce #customer_details,
    body.digitlix-commerce .woocommerce #order_review_heading,
    body.digitlix-commerce .woocommerce #order_review { grid-column: 1; }
    body.digitlix-commerce .woocommerce-MyAccount-navigation,
    body.digitlix-commerce .woocommerce-MyAccount-content { float: none; width: 100%; }
    body.digitlix-commerce .woocommerce-MyAccount-navigation { margin-bottom: var(--dlx-space-md); }
    body.digitlix-order-received .woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    body.digitlix-checkout .wc-block-components-main,
    body.woocommerce-cart .wc-block-cart__main,
    body.digitlix-checkout .wc-block-components-sidebar,
    body.woocommerce-cart .wc-block-cart__sidebar { border-radius: var(--dlx-radius) !important; padding: var(--dlx-space-md) !important; }
    body.digitlix-order-received .woocommerce-order-overview { grid-template-columns: 1fr; }
    /* A span of 2 in a single-column grid would invent a second column. */
    body.digitlix-order-received .woocommerce-order-overview__email { grid-column: auto; }
}

/* Post-purchase account offer (Beat Extras signup.php): one quiet card at
   the end of the thank-you page turning the guest order into a library. */
.dlxx-signup {
    margin-top: var(--dlx-space-xl);
    border: 1px solid var(--dlx-border-strong);
    border-radius: var(--dlx-radius);
    background: var(--dlx-surface-2);
    padding: clamp(20px, 2.5vw, 28px);
}
.dlxx-signup h2 { margin: 0 0 8px; font-size: var(--dlx-fs-h3); letter-spacing: -.02em; }
.dlxx-signup p { max-width: 62ch; margin: 0 0 var(--dlx-space-md); color: var(--dlx-muted); font-size: var(--dlx-fs-md); }
.dlxx-signup__form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dlxx-signup__form input[type="password"] {
    min-height: var(--dlx-control-lg);
    min-width: min(300px, 100%);
    border: 1px solid var(--dlx-border-strong);
    border-radius: var(--dlx-radius-control);
    background: var(--dlx-surface-input);
    color: var(--dlx-text);
    padding: 0 14px;
    font-family: inherit;
    font-size: var(--dlx-fs-md);
}
.dlxx-signup__button {
    display: inline-flex;
    align-items: center;
    min-height: var(--dlx-control-lg);
    border: 0;
    border-radius: var(--dlx-radius-control);
    background: var(--dlx-accent);
    color: var(--dlx-accent-contrast);
    padding: 0 22px;
    font-family: inherit;
    font-size: var(--dlx-fs-ui);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.dlxx-signup__hint { color: var(--dlx-subtle); font-size: var(--dlx-fs-sm); }
.dlxx-signup__error { color: var(--dlx-danger); font-size: var(--dlx-fs-md); margin: 0 0 var(--dlx-space-sm); }
.dlxx-signup--done { border-color: var(--dlx-green); }
.dlxx-signup--done p { max-width: 68ch; }

/* ------------------------------------------------- License agreements */
/* Rendered by Beat Extras on the cart/checkout pages (preview) and on the
   thank-you / My Account order views (the issued documents). Quiet legal
   paper: hairline disclosures, a comfortable reading measure inside. */

.dlxx-agreements { margin: var(--dlx-space-2xl) 0 0; }
.dlxx-agreements h2 {
    font-size: var(--dlx-fs-h3);
    letter-spacing: -.02em;
    margin: 0 0 6px;
}
.dlxx-agreements__note {
    color: var(--dlx-muted);
    font-size: var(--dlx-fs-sm);
    max-width: 68ch;
    margin: 0 0 var(--dlx-space-md);
}
.dlxx-agreement { border-top: 1px solid var(--dlx-border); }
.dlxx-agreement:last-child { border-bottom: 1px solid var(--dlx-border); }
.dlxx-agreement summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--dlx-space-md);
    padding: 16px 0;
    cursor: pointer;
}
.dlxx-agreement summary::-webkit-details-marker { display: none; }
.dlxx-agreement summary strong { font-size: var(--dlx-fs-md); font-weight: 650; }
.dlxx-agreement summary span {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    color: var(--dlx-subtle);
    font-size: var(--dlx-fs-sm);
    white-space: nowrap;
}
.dlxx-agreement summary i {
    font-style: normal;
    font-size: 1.0625rem;
    font-weight: 300;
    transition: transform var(--dlx-dur) var(--dlx-ease);
}
.dlxx-agreement[open] summary i { transform: rotate(45deg); }
.dlxx-agreement__body {
    max-width: 78ch;
    padding: 0 0 26px;
    /* This is a binding contract, not secondary meta: full ink at reading
       size. The muted #716e67 it used before was ~4.3:1 on paper, under
       the 4.5:1 AA floor, and at 12px on top of that. */
    font-size: var(--dlx-fs-md);
    line-height: 1.7;
    color: var(--dlx-text);
}
.dlxx-agreement__parties {
    color: var(--dlx-text);
    font-weight: 560;
    border-bottom: 1px solid var(--dlx-border);
    padding-bottom: 12px;
}
.dlxx-agreement__body ol { padding-left: 1.4em; margin: 0 0 var(--dlx-space-sm); }
.dlxx-agreement__body ol ol { margin-top: 8px; }
.dlxx-agreement__body li { margin-bottom: 10px; }
.dlxx-agreement__body li > p { margin: 8px 0; }
.dlxx-agreement__body a { color: var(--dlx-text); border-bottom: 1px solid var(--dlx-border-strong); word-break: break-all; }
.dlxx-agreement__body a:hover { color: var(--dlx-signal-hover); }

/*
 * WooCommerce's own controls, sized for a pointer.
 *
 * The password reveal ships at 22px and the account form's checkbox at 13px.
 * Both are WooCommerce markup rather than the theme's, so they are corrected
 * here by size alone -- no wrappers, no reordering, nothing that would put
 * the theme inside markup it does not own.
 */
.woocommerce button.show-password-input,
.woocommerce-page button.show-password-input {
    min-width: 40px;
    min-height: 40px;
    background-position: center;
}
.woocommerce input[type="checkbox"],
.woocommerce-page input[type="checkbox"],
.wc-block-components-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* The related shelf's "View beat" had been 22px tall on a phone: a label,
   not a button. 36px is the floor a thumb can hit without aiming. */
@media (max-width: 760px) {
    .dlx-release__related .dlx-beat-card__footer .dlx-button { min-height: 36px; padding-top: 0; padding-bottom: 0; }
}