/* ==========================================================================
   SplitLayoutPdp — Experiment: splitLayoutPdp
   Optional: splitLayoutPdpLeftTitle moves the product header into the left panel
   Two independently-scrollable panels: left = sheet music, right = product info

   Layout tokens (keep media queries in sync with SplitLayoutPdpConfig):
     --split-layout-pdp-sheet-base   1100px
     --split-layout-pdp-right-width  400px
     mobile breakpoint               900px  /  desktop min 901px
   ========================================================================== */

/* ── Container ── */

.split-layout-pdp-container {
    display: flex;
    align-items: flex-start; /* required for position:sticky children */
    width: 100%;
    font-family: "ProximaNova", Arial, sans-serif;
    --split-layout-pdp-sheet-base: 1100px;
    --split-layout-pdp-right-width: 400px;
}

/* Placeholder for the right column while its HTML is still streaming in
   (see _SplitLayoutPdpLayout.cshtml's inline critical CSS, which mirrors
   this — keep both in sync). Desktop only: mobile flattens both panels via
   display:contents further down, so there's no separate column to reserve. */
@media (min-width: 901px) {
    #splitLayoutPdpContainer::after {
        content: "";
        flex: 0 0 var(--split-layout-pdp-right-width, 400px);
        align-self: stretch;
        min-height: 400px;
        /* Matches .split-layout-pdp-right-panel's own background/border
           below so swapping the placeholder for the real panel is a pure
           content change, not a colour flash. */
        background: #fcfdfd;
        border-left: 1px solid #e5e7eb;
    }
    #splitLayoutPdpContainer:has(#splitLayoutPdpRightPanel)::after {
        display: none;
    }
}

.split-layout-pdp-after-sheet {
    width: 100%;
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
}

/* Country restriction badge — rendered when the sheet itself isn't shown
   (permitted-in-country is false), so it has no sheet paper to size against.
   Constrain it to the same width as the sheet/paper would be, like the
   sections below (Related, "More Music") already do via --split-layout-pdp-sheet-inset,
   instead of stretching edge-to-edge of the panel. */
.split-layout-pdp-scroll-area > .country-restriction-wrapper {
    width: var(--split-layout-pdp-sheet-width, 1100px);
    max-width: 100%;
    margin: 20px auto 0;
    box-sizing: border-box;
}

.split-layout-pdp-music-panel {
    flex: 1;
    min-width: 0;
    position: sticky;
    top: var(--split-layout-pdp-top, 0px);
    height: calc(100vh - var(--split-layout-pdp-top, 0px));
    overflow: hidden;
    background: #F3F5F6;  /* gray "desk" visible left/right of the white paper */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.split-layout-pdp-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    /* Pre-JS default matches the zoomed placeholder width (see
       .split-layout-pdp-sheet-wrapper above) so left-title mode's title
       block — padded to this inset (line ~1629) — doesn't render assuming
       a full-width sheet and then jump once syncSheetInset() (JS) sets the
       real, smaller inset for the zoomed paper. */
    --split-layout-pdp-sheet-inset: calc((100% - min(calc(var(--split-layout-pdp-sheet-base, 1100px) * var(--split-layout-pdp-sheet-zoom, 0.85)), 100%)) / 2);
    --split-layout-pdp-sheet-width: min(calc(var(--split-layout-pdp-sheet-base, 1100px) * var(--split-layout-pdp-sheet-zoom, 0.85)), 100%);
}

.split-layout-pdp-scroll-body {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0 0;
}

/* The player bar is now nested in the scroll body (for tab order) but painted
   absolutely pinned to the panel's bottom edge — reserve equivalent space so
   scrolled-to-bottom content isn't hidden underneath it. Desktop only; mobile
   re-flows the player bar in-line via the order/display:contents system below. */
.split-layout-pdp-scroll-body:has(.split-layout-pdp-player-bar) {
    padding-bottom: var(--split-layout-pdp-player-h, 78px);
}

/* White "paper" sheet container — default 1100px * 0.85 (DEFAULT_ZOOM in
   svg-playback-zoom.js — keep the 0.85 fallback in sync with that constant)
   so the pre-JS/pre-Helicon blank placeholder is already the on-load size
   instead of full width then shrinking once JS locks the zoomed width.
   --split-layout-pdp-sheet-zoom is set on #splitLayoutPdpContainer by a tiny
   synchronous inline script (see _SplitLayoutPdpLayout.cshtml) from the same
   sessionStorage key svg-playback-zoom.js persists zoom-in/out clicks to,
   so a returning-within-session shopper's chosen zoom is honored on first
   paint too, not just after JS boots. Resized by zoom buttons after boot. */
/* position/width/overflow here are mirrored in _SplitLayoutPdpLayout.cshtml's
   inline critical CSS (see comment there) — keep both in sync. */
.split-layout-pdp-sheet-wrapper {
    position: relative;
    width: calc(var(--split-layout-pdp-sheet-base, 1100px) * var(--split-layout-pdp-sheet-zoom, 0.85));
    max-width: 100%;
    background: #fff;
    box-shadow: 0 2px 12px rgba(9, 40, 58, 0.12);
    flex-shrink: 0;
    /* No default width transition — Helicon play/FitTo must not animate a size jump */
    overflow: hidden;
}

/* Enabled only for zoom +/- clicks (see applyZoom({ animate: true })) */
.split-layout-pdp-sheet-wrapper.split-layout-pdp-zoom-animating {
    transition: width 0.28s ease, max-width 0.28s ease;
}

/* Title / related padding uses --split-layout-pdp-sheet-inset; interpolate it with the paper */
.split-layout-pdp-scroll-area.split-layout-pdp-zoom-animating .split-layout-pdp-header-section,
.split-layout-pdp-scroll-area.split-layout-pdp-zoom-animating .split-layout-pdp-related-header,
.split-layout-pdp-scroll-area.split-layout-pdp-zoom-animating .split-layout-pdp-related-scroll {
    transition: padding 0.28s ease;
}

/* Multi-page: live Helicon SVG stays mounted for playback but must not affect layout */
.split-layout-pdp-sheet-wrapper.split-layout-pdp-multipage #productSvg,
.split-layout-pdp-sheet-wrapper.split-layout-pdp-multipage .playbackCanvas {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Before Helicon finishes rendering, give the wrapper correct page proportions
 * (US Letter 8.5×11) so the user sees a properly-sized white "paper" immediately,
 * with no small→large scaling flash.
 * JS adds .split-layout-pdp-loaded after fixupInlineStyles/buildPageStack completes.
 * This rule, the loading indicator/spinner below, and the visibility:hidden
 * rule are all mirrored in _SplitLayoutPdpLayout.cshtml's inline critical CSS
 * so the placeholder shows on first paint instead of only after this external
 * stylesheet loads — keep both copies in sync.
 */
.split-layout-pdp-sheet-wrapper:not(.split-layout-pdp-loaded) {
    aspect-ratio: 8.5 / 11;
}
/* Keep inner content invisible while Helicon is still sizing/rendering.
   visibility:hidden preserves layout (Helicon can measure widths) but hides
   any intermediate small→full-size scaling from the user. The loading
   indicator itself is excluded so it can show in that same window. */
.split-layout-pdp-sheet-wrapper:not(.split-layout-pdp-loaded) > *:not(.split-layout-pdp-loading-indicator) {
    visibility: hidden !important;
}

/* Spinner shown over the paper while Helicon is still loading/sizing the
   first page — otherwise that window reads as a blank white box. Hidden via
   display:none once .split-layout-pdp-loaded lands (see above). */
.split-layout-pdp-loading-indicator {
    display: none;
    position: absolute;
    inset: 0;
    align-items: flex-start;
    justify-content: center;
    /* Near the top rather than vertically centered — the wrapper's placeholder
       aspect-ratio can run tall, and a centered spinner risks landing below
       the fold on short/small screens before the user scrolls. */
    padding-top: 15%;
    z-index: 1;
}

.split-layout-pdp-sheet-wrapper:not(.split-layout-pdp-loaded) .split-layout-pdp-loading-indicator {
    display: flex;
}

.split-layout-pdp-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(9, 40, 58, 0.12);
    border-top-color: #002242;
    border-radius: 50%;
    animation: split-layout-pdp-spin 0.8s linear infinite;
}

@keyframes split-layout-pdp-spin {
    to { transform: rotate(360deg); }
}

.split-layout-pdp-right-panel {
    width: var(--split-layout-pdp-right-width, 400px);
    flex-shrink: 0;
    position: sticky;
    top: var(--split-layout-pdp-top, 0px);
    height: calc(100vh - var(--split-layout-pdp-top, 0px));
    overflow-y: auto;
    scroll-behavior: smooth;
    border-left: 1px solid #e5e7eb;
    background: #fcfdfd;
    padding-bottom: 32px;
}

/* Full screen (native Fullscreen API on the container): hide the right panel
   so the sheet music panel fills the whole screen, and drop the sticky-header
   offset since nothing above this element is rendered while fullscreen. */
.split-layout-pdp-container.split-layout-pdp-is-fullscreen {
    background: #F3F5F6;
}
.split-layout-pdp-container.split-layout-pdp-is-fullscreen #splitLayoutPdpRightPanel {
    display: none;
}
.split-layout-pdp-container.split-layout-pdp-is-fullscreen .split-layout-pdp-music-panel {
    top: 0;
    height: 100vh;
}

/* App download card */
.split-layout-pdp-app-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #E0F0FA;
    border-radius: 16px;
    padding: 24px;
    margin: 16px 24px;
}
.split-layout-pdp-app-download-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.split-layout-pdp-app-download-title {
    font-size: 20px;
    font-weight: 700;
    color: #1E2225;
    line-height: 1.2;
}
.split-layout-pdp-app-download-sub {
    font-size: 14px;
    color: #1E2225;
    line-height: 1.4;
}
.split-layout-pdp-app-download-sub-mobile {
    display: none;
}
.split-layout-pdp-app-download img {
    flex-shrink: 0;
    border-radius: 8px;
}
.split-layout-pdp-app-download-btn-label {
    display: none;
}

/* Keep every right-panel section on the same panel background */
#splitLayoutPdpRightPanel .split-layout-pdp-breadcrumb,
#splitLayoutPdpRightPanel .split-layout-pdp-header-section,
#splitLayoutPdpRightPanel .split-layout-pdp-pricing-section,
#splitLayoutPdpRightPanel .split-layout-pdp-section,
#splitLayoutPdpRightPanel .split-layout-pdp-video-section,
#splitLayoutPdpRightPanel .split-layout-pdp-reviews-section {
    background: #fcfdfd;
}

/* Mobile: single column, natural height. Sheet is edge-to-edge (0 side gutter).
   Title / related keep their own 16px padding. */
@media (max-width: 900px) {
    .split-layout-pdp-top-fold {
        overflow-x: hidden;
        max-width: 100%;
    }

    .split-layout-pdp-page-stack.is-expanded {
        max-width: 100%;
        min-width: 0;
    }

    .split-layout-pdp-container {
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        position: relative;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
        --split-layout-pdp-sheet-inset: 0px;
        --split-layout-pdp-sheet-width: 100%;
        --split-layout-pdp-ord-player: 1;
        --split-layout-pdp-ord-sheet: 2;
        --split-layout-pdp-ord-banner: 3;
        --split-layout-pdp-ord-keys: 4;
        --split-layout-pdp-ord-crumb: 5;
        --split-layout-pdp-ord-title: 6;
        --split-layout-pdp-ord-rating: 7;
        --split-layout-pdp-ord-byline: 8;
        --split-layout-pdp-ord-actions: 9;
        --split-layout-pdp-ord-pricing: 10;
        --split-layout-pdp-ord-rest: 11;
        --split-layout-pdp-ord-related: 12;
    }

    /* Flatten nested panels so flex order can interleave player / sheet / header / right / related. */
    .split-layout-pdp-music-panel,
    .split-layout-pdp-scroll-area,
    .split-layout-pdp-scroll-body,
    .split-layout-pdp-right-panel,
    .split-layout-pdp-header-section {
        display: contents;
    }

    .split-layout-pdp-player-bar {
        order: var(--split-layout-pdp-ord-player, 1);
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-top: none;
        border-bottom: none;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.8);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
    }

    .split-layout-pdp-sample-blurb,
    .split-layout-pdp-preview-clip,
    .split-layout-pdp-device-blurb-wrap,
    .country-restriction-wrapper {
        order: var(--split-layout-pdp-ord-sheet, 2);
    }

    .split-layout-pdp-preview-clip {
        width: 100%;
        max-width: 100%;
        /* Room for the first-page drop shadow (clipped when flush to player/edges) */
        padding: 8px;
        box-sizing: border-box;
        overflow: visible;
    }

    .split-layout-pdp-sheet-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        align-self: center;
        margin-top: 0;
        /* Match extra page snaps — don't use the weaker collapsed-show-all shadow on mobile */
        box-shadow: 0 2px 12px rgba(9, 40, 58, 0.12);
    }

    .split-layout-pdp-preview-clip:has(.split-layout-pdp-show-all-pages[aria-expanded="false"]) .split-layout-pdp-sheet-wrapper {
        box-shadow: 0 2px 12px rgba(9, 40, 58, 0.12);
    }

    .split-layout-pdp-full-arr {
        order: var(--split-layout-pdp-ord-banner, 3);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 24px 16px 28px;
        text-align: center;
    }

    .split-layout-pdp-full-arr-copy {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .split-layout-pdp-full-arr-title,
    .split-layout-pdp-full-arr-sub {
        width: 100%;
        text-align: center;
    }

    .split-layout-pdp-full-arr-staff {
        display: none;
    }

    .split-layout-pdp-title-block,
    .split-layout-pdp-title-row,
    .split-layout-pdp-keys-row {
        display: contents;
    }

    .split-layout-pdp-keys-field { order: var(--split-layout-pdp-ord-keys, 4); }
    .split-layout-pdp-breadcrumb { order: var(--split-layout-pdp-ord-crumb, 5); }
    .split-layout-pdp-song-title { order: var(--split-layout-pdp-ord-title, 6); }
    .split-layout-pdp-title-meta { order: var(--split-layout-pdp-ord-rating, 7); }
    .split-layout-pdp-info-row,
    .split-layout-pdp-mne-copy { order: var(--split-layout-pdp-ord-byline, 8); }
    .split-layout-pdp-header-actions { order: var(--split-layout-pdp-ord-actions, 9); }

    .split-layout-pdp-pricing-section {
        order: var(--split-layout-pdp-ord-pricing, 10);
        background: transparent !important;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding-top: 16px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 8px;
    }

    .split-layout-pdp-section,
    .split-layout-pdp-video-section,
    .split-layout-pdp-reviews-section,
    .split-layout-pdp-app-download {
        order: var(--split-layout-pdp-ord-rest, 11);
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #splitLayoutPdpRightPanel .split-layout-pdp-section,
    #splitLayoutPdpRightPanel .split-layout-pdp-video-section,
    #splitLayoutPdpRightPanel .split-layout-pdp-reviews-section,
    #splitLayoutPdpRightPanel .split-layout-pdp-app-download {
        background: #fff;
    }

    /* App download card keeps its own light-blue background on mobile
       (a "Download Now" button replaces the QR code — see below). */
    #splitLayoutPdpRightPanel .split-layout-pdp-app-download {
        background: #E0F0FA;
    }

    .split-layout-pdp-app-download {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }

    .split-layout-pdp-app-download-text {
        align-items: center;
        text-align: center;
    }

    .split-layout-pdp-app-download-title {
        font-weight: 600;
    }

    .split-layout-pdp-app-download-sub {
        font-weight: 400;
    }

    .split-layout-pdp-app-download-sub-desktop {
        display: none;
    }

    .split-layout-pdp-app-download-sub-mobile {
        display: inline;
    }

    .split-layout-pdp-app-download img {
        display: none;
    }

    .split-layout-pdp-app-download-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 36px;
        border-radius: 9999px;
        background: #09283A;
        text-decoration: none;
    }

    .split-layout-pdp-app-download-cta:hover,
    .split-layout-pdp-app-download-cta:focus {
        background: #0c364d;
        outline: none;
    }

    .split-layout-pdp-app-download-btn-label {
        display: inline-block;
        color: #fff;
        font-family: "ProximaNova", Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
    }

    .split-layout-pdp-hr {
        order: var(--split-layout-pdp-ord-rest, 11);
        background: none;
        margin: 0;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #splitLayoutPdpRightPanel .split-layout-pdp-pricing-section {
        background: transparent !important;
    }

    /* Pricing separator is not needed on mobile: pricing has its own top padding
       and the flex-order difference would leave it visually stranded. */
    .split-layout-pdp-hr--before-pricing {
        display: none;
    }

    /* Suppress any separator that is immediately followed by another separator
       in the DOM (catches edge cases where optional sections are all absent). */
    .split-layout-pdp-hr + .split-layout-pdp-hr {
        display: none;
    }

    .split-layout-pdp-after-sheet {
        order: var(--split-layout-pdp-ord-related, 12);
        width: 100%;
        max-width: 100%;
        min-width: 0;
        --split-layout-pdp-sheet-inset: 0px;
        --split-layout-pdp-sheet-width: 100%;
    }

    .split-layout-pdp-keys-field,
    .split-layout-pdp-header-actions,
    .split-layout-pdp-breadcrumb,
    .split-layout-pdp-song-title,
    .split-layout-pdp-title-meta,
    .split-layout-pdp-info-row,
    .split-layout-pdp-mne-copy {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
        background: transparent;
    }

    /* Vertical spacing between header items on mobile */
    .split-layout-pdp-breadcrumb { margin-bottom: 6px; }
    .split-layout-pdp-song-title  { margin-bottom: 10px; }
    .split-layout-pdp-title-meta  { margin-bottom: 10px; }
    /* Collapse the title-meta gap when there is no rating or review link */
    .split-layout-pdp-title-meta:not(:has(.split-layout-pdp-header-rating)):not(:has(.split-layout-pdp-read-reviews-link)) {
        margin-bottom: 0;
    }
    .split-layout-pdp-info-row,
    .split-layout-pdp-mne-copy    { margin-bottom: 14px; }

    .split-layout-pdp-header-pages {
        display: none;
    }

    .split-layout-pdp-keys-field {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin: 12px 0 8px;
    }

    .split-layout-pdp-keys-dropdown {
        min-width: 0;
        flex: 1 1 auto;
        max-width: 100%;
    }

    .split-layout-pdp-keys-dropdown .dropbtn,
    .split-layout-pdp-left-title .split-layout-pdp-keys-dropdown .dropbtn {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .split-layout-pdp-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 6px 0 12px;
    }

    .split-layout-pdp-header-actions a[data-track="wishlist_add"] {
        display: none;
    }

    .split-layout-pdp-song-title {
        padding-top: 12px;
    }

    .split-layout-pdp-keys-row {
        padding-top: 0;
        margin: 12px 0;
    }

    .split-layout-pdp-breadcrumb,
    #splitLayoutPdpRightPanel .split-layout-pdp-breadcrumb {
        margin: 0;
        padding-top: 12px;
        background: transparent;
    }

    .split-layout-pdp-page-stack.is-expanded {
        /* Width comes from --split-layout-pdp-sheet-width set by JS to match
           the live first-page locked width — do not override with calc(). */
        align-self: center;
        max-width: 100%;
    }

    .split-layout-pdp-right-panel {
        border-left: none;
        border-top: none;
    }

    .split-layout-pdp-player-right,
    #splitLayoutPdpMuteBtn,
    .split-layout-pdp-vol-track {
        display: none !important;
    }

    .split-layout-pdp-player-inner {
        justify-content: center;
        padding: 8px 16px;
        gap: 0;
        min-height: 64px;
    }

    .split-layout-pdp-player-center-wrap {
        min-width: 0;
        max-width: none;
        width: auto;
        flex: none;
    }

    /* product.css adds margin-top: 15px on .mn-btn-action-pro under 768px */
    .split-layout-pdp-pricing-section .productPageButtonContainer .layout-container {
        gap: 8px;
        grid-gap: 8px;
    }

    .split-layout-pdp-pricing-section .mn-btn-action-pro {
        margin-top: 0 !important;
    }

    /* Related section: reduce the desktop-sized top padding on mobile */
    .split-layout-pdp-related {
        padding-top: 20px;
    }

    .split-layout-pdp-related-block + .split-layout-pdp-related-block {
        margin-top: 24px;
    }
}

/* ── Sheet music panel: override Helicon's layout model ── */

/* Bootstrap .row adds margin: 0 -15px which widens content beyond the panel */
.split-layout-pdp-sheet-wrapper .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* #svgplayer has padding-bottom: 30px we don't need */
.split-layout-pdp-sheet-wrapper #svgplayer {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}

/*
 * .svg-product-display normally has:
 *   display: inline-block; padding-top: 130%; height: 100%;   (aspect-ratio hack)
 *   margin-top: -50px;                                        (new-design-override.css)
 * Override all of these so the SVG flows naturally at full width.
 */
.split-layout-pdp-sheet-wrapper .svg-product-display {
    display: block !important;
    padding-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    overflow: hidden !important; /* match Helicon NoYBar — no scrollbar width jump on play */
    width: 100% !important;
    /* Strip _product_redesign.scss card shadow/radius — sheet wrapper is the single paper layer */
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Non-playable / marketplace / DMB: PDF canvas must fill the paper, not sit
   position:absolute in a height:auto parent (that collapses to 0). */
.split-layout-pdp-sheet-wrapper.split-layout-pdp-nonplayable {
    overflow: visible;
}

.split-layout-pdp-sheet-wrapper.split-layout-pdp-nonplayable .svg-product-display {
    overflow: visible !important;
}

.split-layout-pdp-sheet-wrapper #nonPlayableCanvasWrapper {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto;
    width: 100%;
    aspect-ratio: 8.5 / 11;
}

.split-layout-pdp-sheet-wrapper #nonPlayableCanvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}

.split-layout-pdp-sheet-wrapper #printRowControls {
    display: none;
}

/*
 * .scrollingParent / #svgWin (embedded-preview path only) —
 * normally position:absolute, overflow:hidden.  Make it flow.
 */
.split-layout-pdp-sheet-wrapper #svgWin,
.split-layout-pdp-sheet-wrapper .scrollingParent {
    position: relative !important;
    height: auto !important;
    overflow: hidden !important; /* never toggle to auto — prevents FitTo width jump on play */
    width: 100% !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}

/*
 * The SVG / canvas element itself.
 * Helicon sets position:absolute + fixed pixel width/height via inline style.
 * !important CSS beats inline style (without !important), so these win.
 * height:auto works only when the SVG has a viewBox (which Helicon sets in
 * ZoomMode 2).  A post-render JS fixup (in SvgPlaybackVertical.js) also
 * clears any lingering inline styles for belt-and-suspenders safety.
 */
.split-layout-pdp-sheet-wrapper .playbackCanvas,
.split-layout-pdp-sheet-wrapper #productSvg,
.split-layout-pdp-sheet-wrapper #productCanvas {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 300px;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}

/*
 * Playback highlight nudge (32px left/up), by CSS rather than JS.
 * Aoide rewrites this rect's whole `style` attribute on every animation
 * frame during playback, so a JS-assigned `transform` gets clobbered within
 * a frame and never actually paints. This attribute-selector rule is
 * re-evaluated by the browser on every style recalc, so it keeps winning
 * regardless of how often Aoide rewrites the other inline style properties —
 * no JS polling/MutationObserver needed. Never rewrite Aoide's x/y directly
 * (that broke highlighting) — this only offsets the painted position.
 */
.split-layout-pdp-sheet-wrapper #productSvg rect[style*="fill-opacity: 0.15"],
.split-layout-pdp-sheet-wrapper #productSvg rect[style*="fill-opacity:0.15"] {
    transform: translate(-96px, -64px);
}

/* Hybrid: #heliconContainer often starts display:none then flips to block on play.
   Keep it in normal flow at full paper width so that toggle cannot reflow the sheet. */
.split-layout-pdp-sheet-wrapper #heliconContainer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    position: relative !important;
}

/* Hide page-turn chevrons (vertical scroll replaces them) */
.split-layout-pdp-container #pageControls,
.split-layout-pdp-container #embeddedArrowWrapper,
.split-layout-pdp-container #embeddedArrowWrapper .fa,
.split-layout-pdp-container #previewPageLeft,
.split-layout-pdp-container #previewPageRight,
.split-layout-pdp-container #previewPageLeft .fa,
.split-layout-pdp-container #previewPageRight .fa,
.split-layout-pdp-container .hybridArrowButton,
.split-layout-pdp-container #btnHybridOnSheetPreviousPage,
.split-layout-pdp-container #btnHybridOnSheetNextPage,
.split-layout-pdp-container .pageChangeArrowContainer,
.split-layout-pdp-container .pageChangeArrowPdf {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Collections keep ColSvg page-turn via the small "‹ Song n of m ›" pager above the
   sheet (#pageControls) — not the big overlay chevrons (#embeddedArrowWrapper), which
   are hidden below, and not Helicon's vertical-scroll stack either. */
.split-layout-pdp-sheet-wrapper.split-layout-pdp-collection {
    position: relative;
}

/* Drop the card look (box-shadow + white plate) for collections — the pager row
   sitting on its own shadowed white background above the sheet read as a stray
   strip/shadow at the top. Let it sit flat on the page; the sheet paper itself
   (.svg-product-display below) still has its own border to stay visible. */
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection {
    background: transparent !important;
    box-shadow: none !important;
}

.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection #pageControls {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Big chevrons overlaid on the sheet's vertical center — redundant with the pager
   above, and visually intrusive on the sheet itself. */
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection #embeddedArrowWrapper,
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection #previewPageLeft,
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection #previewPageRight {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* "‹ Song 1 of 12 ›" pager styling — flex row with the small toolbar chevrons
   flanking the label/count instead of the old "Song: [<] 1 [>] of 12" layout. */
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .split-layout-pdp-col-pager {
    /* Fixed row height + height:100% on every child (incl. the <input>, below)
       is used instead of relying on each child's own baseline/line-height —
       those differ per element type (span vs .fa icon vs form control) and
       per platform (desktop Chrome vs mobile Safari), which is what made the
       "1" / chevrons drift up or down depending on device. Matching heights
       is the more robust way to keep every child vertically centered the same
       way everywhere. */
    height: 22px;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .split-layout-pdp-col-pager > * {
    display: inline-flex !important;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    line-height: 1;
}

.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .split-layout-pdp-col-pager #left,
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .split-layout-pdp-col-pager #right {
    visibility: visible !important;
    justify-content: center;
    cursor: pointer;
    /* Mobile browsers paint their default tap-highlight (a blue-ish rectangle)
       on any clickable element on touch, even plain <span>s with a JS handler. */
    -webkit-tap-highlight-color: transparent;
    outline: none;
    background: transparent;
    border-radius: 4px;
    user-select: none;
    -webkit-user-select: none;
}

.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .split-layout-pdp-col-pager #left:focus,
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .split-layout-pdp-col-pager #right:focus,
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .split-layout-pdp-col-pager #left:active,
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .split-layout-pdp-col-pager #right:active {
    background: transparent;
    outline: none;
    box-shadow: none;
}

.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .split-layout-pdp-col-pager input {
    -webkit-appearance: none;
    appearance: none;
    justify-content: center;
    text-align: center;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 -2px !important;
    /* full-preview.scss's #mBedPageNo (height/width: 29px, font-size: 13px —
       styling for the old print/embed toolbar's page box) is a bare ID
       selector, which outranks this rule's classes on specificity alone and
       was winning on every one of these properties, leaving the digit in a
       taller, differently-sized box than "Song"/"of N" and throwing off its
       vertical centering. !important is the only way to actually override
       an ID from here without duplicating this whole selector chain onto
       #mBedPageNo itself. */
    width: 20px !important;
    height: 100% !important;
    font: inherit !important;
    /* align-items:center on the flex row/item (above) only positions the
       <input> box itself — it can't touch how the browser renders the
       digit *inside* that box, which the UA centers against the full line
       box, not against this row's shared text baseline. */
    position: relative;
}

@media (min-width: 901px) {
    .split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .split-layout-pdp-col-pager input {
        /* Sub-pixel nudge — pixel-measured high vs "Song"/"of N" on desktop
           specifically (mobile/tablet measure flush without any offset).
           !important: this stylesheet gets reloaded/reinserted after
           initial paint, which can place the reinsertion later in source
           order than expected and flip a same-specificity, non-important
           tie the wrong way. */
        top: 1px !important;
    }
}

/* Legacy print/settings buttons (control's own print flow) aren't wired up for the
   split layout — drop them so the row is just the "Song: n of m" pager. */
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection #print-sample,
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection #showPrintOptions {
    display: none !important;
}

/* With the print/settings buttons gone, the row has a single child left —
   center the pager above the sheet instead of leaving it pinned to one side.
   #svgplayer .controls (product.scss) paints a light strip with its own
   padding behind this row by default — strip that so the pager just floats
   on the sheet-wrapper's white background, and use margin (not padding) for
   the gap above the sheet. */
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .collectionPrintRowControls.controls {
    justify-content: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
}

/* Breathing room above/below the sheet paper itself. !important + explicit
   margin-top needed: the generic rule above (line ~546) forces
   `margin-top: 0 !important` on every .svg-product-display, which would
   otherwise win the cascade (later same-property !important beats an
   earlier, less-specific !important only when it's later AND at least as
   specific — being extra-explicit here avoids relying on that ordering). */
/* The margin above/below was invisible because both the sheet-wrapper card and the
   paper (.svg-product-display) paint the same solid white — a white-on-white gap
   reads as "no margin" even though the space is really there. A thin border around
   the paper (instead of recoloring the whole card gray, which made the card's own
   box-shadow read as a stray line above the pager) is enough to make it visible. */
.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .svg-product-display {
    margin-top: 0 !important;
    margin-bottom: 32px !important;
    background: #fff !important;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
}

.split-layout-pdp-preview-clip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 0;
    align-self: center;
}

/* The general fit-content rule above comes after the main mobile block. Reassert
   full width here so the paper does not grow from ~300px to ~396px after render. */
@media (max-width: 900px) {
    .split-layout-pdp-preview-clip {
        width: 100%;
    }
}

.split-layout-pdp-preview-clip:has(.split-layout-pdp-show-all-pages[aria-expanded="false"]) .split-layout-pdp-sheet-wrapper {
    box-shadow: 0 1px 8px rgba(9, 40, 58, 0.08);
}

.split-layout-pdp-preview-clip:has(.split-layout-pdp-show-all-pages[aria-expanded="false"]) .split-layout-pdp-show-all-pages-wrap {
    position: relative;
    z-index: 3;
    margin-top: -4px;
    padding: 0 0 28px;
    overflow: visible;
}

.split-layout-pdp-preview-clip:has(.split-layout-pdp-show-all-pages[aria-expanded="false"]) .split-layout-pdp-show-all-pages-wrap::before {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: -20px;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(to left, rgba(9, 40, 58, 0.018), transparent 6px) left / 6px 100% no-repeat,
        linear-gradient(to right, rgba(9, 40, 58, 0.018), transparent 6px) right / 6px 100% no-repeat;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 48%,
        #000 58%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 48%,
        #000 58%,
        transparent 100%
    );
}

.split-layout-pdp-preview-clip:has(.split-layout-pdp-show-all-pages[aria-expanded="false"]) .split-layout-pdp-show-all-pages-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        to bottom,
        #fff 0%,
        #fff 42%,
        rgba(255, 255, 255, 0) 100%
    );
}

.split-layout-pdp-preview-clip .split-layout-pdp-show-all-pages {
    position: relative;
    z-index: 1;
    /* Nudge the button itself down within its wrap without moving the wrap's
       own white gradient/shadow "page stack" backdrop (::before/::after above). */
    top: 8px;
}

/* The faux page-stack shadow/frame above (box-shadow + ::before/::after on
   the wrap) simulates curling arrangement sheets stacking under the button —
   Digital Music Books / non-playable PDF previews are flat, uniform pages,
   so that treatment just reads as an unwanted white box + drop shadow behind
   the button. Strip it for that case, on both mobile and desktop.
   The sheet-wrapper's own solid white background (its default "paper" look,
   set unconditionally above) is included here too — for a page whose actual
   artwork doesn't reach every edge (e.g. a colored book cover shorter/narrower
   than the fixed 8.5x11 canvas box), that white fill shows through as a plain
   white frame around the colored page. */
.split-layout-pdp-preview-clip:has(.split-layout-pdp-sheet-wrapper.split-layout-pdp-nonplayable) .split-layout-pdp-sheet-wrapper,
.split-layout-pdp-preview-clip:has(.split-layout-pdp-sheet-wrapper.split-layout-pdp-nonplayable) .split-layout-pdp-show-all-pages-wrap {
    box-shadow: none !important;
    background: transparent !important;
}

.split-layout-pdp-preview-clip:has(.split-layout-pdp-sheet-wrapper.split-layout-pdp-nonplayable) .split-layout-pdp-show-all-pages-wrap::before,
.split-layout-pdp-preview-clip:has(.split-layout-pdp-sheet-wrapper.split-layout-pdp-nonplayable) .split-layout-pdp-show-all-pages-wrap::after {
    content: none;
}

/* Snapshot pages container (Option A multi-page stacking) */
.split-layout-pdp-page-stack {
    display: none;
    /* Growing content above the Show All/Less button must not drag the viewport
       down to keep that focused button on screen (browser scroll anchoring). */
    overflow-anchor: none;
}

.split-layout-pdp-page-stack.is-expanded {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
    width: var(--split-layout-pdp-sheet-width, 1100px);
    max-width: min(100%, var(--split-layout-pdp-sheet-width, 1100px));
    flex-shrink: 0;
    align-self: center;
    background: transparent;
    box-sizing: border-box;
}

.split-layout-pdp-page-snap {
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(9, 40, 58, 0.12);
}

.split-layout-pdp-page-snap.is-loading {
    display: block;
    position: relative;
    aspect-ratio: 8.5 / 11;
    min-height: 280px;
}

/* Reuse the same circular spinner shown while the first page loads (see
   .split-layout-pdp-loading-indicator/-spinner above) for every "Show All
   Pages" skeleton, not just the first. */
.split-layout-pdp-page-snap.is-loading .split-layout-pdp-loading-indicator {
    display: flex;
}

.split-layout-pdp-page-snap svg,
.split-layout-pdp-page-snap img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.split-layout-pdp-page-stack:not(.is-expanded) .split-layout-pdp-page-snap:not(:first-child) {
    display: none;
}

.split-layout-pdp-show-all-pages-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 28px 0 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
}

.split-layout-pdp-show-all-pages-wrap[hidden] {
    display: none !important;
}

.split-layout-pdp-show-all-pages {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 10px 20px;
    border: none;
    border-radius: 9999px;
    background: #D7DCE0;
    background-color: #D7DCE0;
    background-image: none;
    color: #09283A;
    font-family: "ProximaNova", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.split-layout-pdp-show-all-pages:hover,
.split-layout-pdp-show-all-pages:focus,
.split-layout-pdp-show-all-pages:active,
.split-layout-pdp-show-all-pages[aria-expanded="true"] {
    background: #D7DCE0;
    background-color: #D7DCE0;
    background-image: none;
    color: #09283A;
}

.split-layout-pdp-full-arr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Track the sheet's live paper width (kept in sync on every zoom/fullscreen
       change), not a stale boot/resize-only snapshot. */
    width: var(--split-layout-pdp-sheet-width, 1100px);
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    margin: 20px 0 0;
    padding: 32px 24px 36px;
    background: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(9, 40, 58, 0.06), 0 8px 24px rgba(9, 40, 58, 0.08);
}

@media (min-width: 901px) {
    .split-layout-pdp-full-arr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        flex-direction: row;
        align-items: center;
        column-gap: 24px;
    }
}

.split-layout-pdp-full-arr-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    z-index: 1;
}

.split-layout-pdp-full-arr-title {
    margin: 0;
    font-family: "ProximaNova", Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #09283A;
}

.split-layout-pdp-full-arr-sub {
    margin: 8px 0 0;
    font-family: "ProximaNova", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: #4C565D;
}

.split-layout-pdp-full-arr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 12px 36px;
    border: none;
    border-radius: 9999px;
    background: #09283A;
    color: #fff;
    font-family: "ProximaNova", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.split-layout-pdp-full-arr-btn:hover,
.split-layout-pdp-full-arr-btn:focus {
    background: #0c364d;
    color: #fff;
    outline: none;
}

.split-layout-pdp-full-arr-staff {
    height: 53px;
    min-width: 0;
    background-image:
        linear-gradient(#c8ced3, #c8ced3),
        linear-gradient(#c8ced3, #c8ced3),
        linear-gradient(#c8ced3, #c8ced3),
        linear-gradient(#c8ced3, #c8ced3),
        linear-gradient(#c8ced3, #c8ced3);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position:
        center 0,
        center 13px,
        center 26px,
        center 39px,
        center 52px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 55%);
    mask-image: linear-gradient(to right, transparent, #000 55%);
}

.split-layout-pdp-full-arr-staff-end {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 55%);
    mask-image: linear-gradient(to left, transparent, #000 55%);
}

.split-layout-pdp-show-all-pages svg {
    display: block;
    flex-shrink: 0;
    transition: none;
}

.split-layout-pdp-show-all-pages[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Sample blurb — sits inside the white paper wrapper */
.split-layout-pdp-sheet-wrapper .split-layout-pdp-sample-blurb,
.split-layout-pdp-sample-blurb {
    font-size: 13px;
    color: #6b7280;
    margin: 12px 0;
    text-align: center;
    padding: 0 12px;
}

/* ── Right panel: shared section structure ── */

.split-layout-pdp-section {
    padding: 20px 24px;
    color: #1E2225;
}

.split-layout-pdp-signature .row,
.split-layout-pdp-signature .col-xs-12 {
    margin: 0 !important;
    padding: 0 !important;
}

.split-layout-pdp-signature .h3 {
    display: block;
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #1E2225;
}

.split-layout-pdp-signature p {
    margin: 0;
    color: #1E2225;
}

@keyframes split-layout-pdp-section-glimpse {
    0% { background-color: #d9eef9; }
    100% { background-color: #fcfdfd; }
}

.split-layout-pdp-section-glimpse {
    animation: split-layout-pdp-section-glimpse 1.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .split-layout-pdp-section-glimpse {
        animation-duration: 0.8s;
    }
}

.split-layout-pdp-section-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #1E2225;
    margin: 0 0 12px;
}

.split-layout-pdp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.split-layout-pdp-section-header .split-layout-pdp-section-title {
    margin: 0;
}

.split-layout-pdp-see-all-link {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    padding: 4px 12px;
    display: inline-block;
    transition: background 0.15s, border-color 0.15s;
}

.split-layout-pdp-see-all-link:hover {
    text-decoration: none;
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #09283A;
}

.split-layout-pdp-see-all-link--left {
    display: block;
    width: fit-content;
    margin-top: 16px;
    margin-right: auto;
}

/* ── Header section (breadcrumb, title, rating, info, keys) ── */

.split-layout-pdp-header-section {
    padding: 16px 20px 0;
}

@media (min-width: 901px) {
    #splitLayoutPdpRightPanel > .split-layout-pdp-breadcrumb {
        padding: 16px 20px 0;
        margin-bottom: 0;
    }

    #splitLayoutPdpRightPanel > .split-layout-pdp-breadcrumb + .split-layout-pdp-header-section {
        padding-top: 0;
    }

    #splitLayoutPdpRightPanel > .split-layout-pdp-breadcrumb + .split-layout-pdp-pricing-section {
        padding-top: 8px;
    }
}

/* Breadcrumb */
.split-layout-pdp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-bottom: 16px;
}

.split-layout-pdp-crumb-link {
    font-size: 14px;
    color: #6b7280;
    text-decoration: none;
}

.split-layout-pdp-crumb-link:hover {
    color: #374151;
    text-decoration: underline;
}

.split-layout-pdp-crumb-sep {
    font-size: 14px;
    color: #9ca3af;
    margin: 0 2px;
}

.split-layout-pdp-crumb-current {
    font-size: 14px;
    color: #9ca3af;
}

.split-layout-pdp-info-row .pdp-h1-treatment-supporting-line {
    display: block;
    overflow-wrap: anywhere;
    max-width: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: #09283A;
}

.split-layout-pdp-info-row .pdp-h1-treatment-supporting-line a,
.split-layout-pdp-info-row .pdp-h1-treatment-supporting-line a:visited,
.split-layout-pdp-info-row .pdp-h1-treatment-supporting-line a:hover {
    font-weight: 700;
    color: #09283A;
}

/* Title + rating stacked */
.split-layout-pdp-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.split-layout-pdp-song-title {
    font-size: 26px;
    font-weight: 700;
    color: #09283A;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-family: "ProximaNova", Arial, sans-serif;
    cursor: default;
    text-decoration: none;
    overflow-wrap: anywhere;
    max-width: 100%;
    min-width: 0;
}
.split-layout-pdp-song-title:hover {
    text-decoration: none;
}

/* Rating + "Read Reviews" on its own line below title */
.split-layout-pdp-title-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Right-title treatment: always drop the rating to its own line under the
   title, regardless of available width (left-title keeps them inline when
   they fit — see the min-width:901px override further down). */
.split-layout-pdp-container:not(.split-layout-pdp-left-title) .split-layout-pdp-title-meta {
    flex-basis: 100%;
}

.split-layout-pdp-read-reviews-link {
    font-size: 14px;
    font-weight: 400;
    color: #09283A;
    text-decoration: underline;
    white-space: nowrap;
}

.split-layout-pdp-read-reviews-link:hover {
    color: #09283A;
    opacity: 0.8;
}

/* Info row: By Artist on line 1 / badge + More Info + Pages on line 2 (right-aligned) */
.split-layout-pdp-info-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    color: #09283A;
}

/* On desktop the info-row is inside the right-panel scroll area; no extra bottom margin needed */
@media (min-width: 901px) {
    .split-layout-pdp-info-row {
        margin-bottom: 0;
    }
}

.split-layout-pdp-header-byline {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: #09283A;
}

.split-layout-pdp-header-byline-prefix {
    font-weight: 600;
}

.split-layout-pdp-header-byline a,
.split-layout-pdp-header-byline a:visited,
.split-layout-pdp-header-byline a:hover {
    font-weight: 700;
    line-height: inherit;
    color: #09283A;
    text-decoration: none;
}

/* Vertical separator between info row items — left-title treatment only */
.split-layout-pdp-info-sep {
    display: none;
    width: 0.5px;
    height: 18px;
    background: #82929B;
    flex-shrink: 0;
    align-self: center;
    margin: 0 4px;
}

.split-layout-pdp-info-line-break {
    flex-basis: 100%;
    width: 0;
    height: 0;
}

/* Right-title treatment: widen the gap between the scoring tag and "Pages: N"
   to 16px. The 6px flex gap on .split-layout-pdp-info-row already applies
   between every item, so only add the remaining 10px here. */
.split-layout-pdp-container:not(.split-layout-pdp-left-title) .split-layout-pdp-header-pages {
    margin-left: 10px;
}

.split-layout-pdp-header-badge {
    display: inline-flex;
    align-items: center;
    /* line-height's leading sits mostly below the glyphs, so flex-centering the
       line box alone reads as too high — line-height: 1 plus a touch more
       padding-top than padding-bottom re-centers the text on the pill's trim. */
    padding: 5px 10px 3px;
    background: #e2dfdf;
    border: 1px solid rgba(90, 90, 84, 0.20);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #1F1F1C;
    white-space: nowrap;
    flex: 0 1 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.split-layout-pdp-more-info-link {
    font-size: 14px;
    color: #6b7280;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.split-layout-pdp-more-info-link:hover {
    color: #374151;
}

.split-layout-pdp-more-info-icon {
    display: block;
    flex-shrink: 0;
}

.split-layout-pdp-header-pages {
    font-size: 14px;
    color: #374151;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Left-title experiment: header scrolls with the sheet (not sticky) ──
   Also matches the country-restricted / !ShowSheet markup, where there's no
   sheet to render a .split-layout-pdp-scroll-body wrapper around, and the
   header sits directly under .split-layout-pdp-scroll-area instead — without
   this, that path falls back to the generic .split-layout-pdp-header-section
   rule (fixed 20px padding, no sheet-width centering) and the title stretches
   edge-to-edge instead of matching the "paper" column width used everywhere else. */
.split-layout-pdp-left-title .split-layout-pdp-scroll-body > .split-layout-pdp-header-section,
.split-layout-pdp-left-title .split-layout-pdp-scroll-area > .split-layout-pdp-header-section {
    align-self: stretch;
    width: 100%;
    background: transparent;
    padding: 20px max(16px, var(--split-layout-pdp-sheet-inset, 16px)) 0;
    font-family: "ProximaNova", Arial, sans-serif;
    color: #09283A;
}

/* .split-layout-pdp-scroll-body itself adds 24px top padding (see its own
   rule) — cancel it here so the header sits flush with the panel edge instead
   of getting 24px (scroll-body) + 20px (this section's own padding above) of
   combined space. The country-restricted / !ShowSheet markup has no
   .split-layout-pdp-scroll-body wrapper (header is a direct child of
   .split-layout-pdp-scroll-area, which has no top padding of its own), so it
   must NOT get this negative margin — without this split, that variant's
   title gets pulled 24px past the panel edge, up into the header bar above it. */
.split-layout-pdp-left-title .split-layout-pdp-scroll-body > .split-layout-pdp-header-section {
    margin-top: -24px;
}

/* Desktop left-title: keep the key selector under the title on the left,
   with utility actions aligned to the right of that row. */
@media (min-width: 901px) {
    .split-layout-pdp-left-title .split-layout-pdp-scroll-body > .split-layout-pdp-header-section,
    .split-layout-pdp-left-title .split-layout-pdp-scroll-area > .split-layout-pdp-header-section {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 16px;
    }

    .split-layout-pdp-left-title .split-layout-pdp-title-block {
        flex: 1 1 auto;
        min-width: 0;
    }

    .split-layout-pdp-left-title .split-layout-pdp-keys-row {
        flex: 0 0 auto;
        margin-top: 0;
        margin-bottom: 0;
    }

    .split-layout-pdp-left-title .split-layout-pdp-keys-row:not(.split-layout-pdp-keys-row--actions-only) {
        flex: 1 0 100%;
        width: 100%;
    }

    .split-layout-pdp-left-title .split-layout-pdp-keys-row:not(.split-layout-pdp-keys-row--actions-only) .split-layout-pdp-header-actions {
        margin-left: auto;
    }
}

.split-layout-pdp-left-title #splitLayoutPdpRightPanel > .split-layout-pdp-breadcrumb {
    gap: 4px;
    margin-bottom: 0;
}

.split-layout-pdp-left-title .split-layout-pdp-crumb-link,
.split-layout-pdp-left-title .split-layout-pdp-crumb-sep,
.split-layout-pdp-left-title .split-layout-pdp-crumb-current {
    font-size: 14px;
    color: #6b7280;
    font-weight: 400;
}

.split-layout-pdp-left-title .split-layout-pdp-crumb-link:hover {
    color: #374151;
}

@media (min-width: 901px) {
    .split-layout-pdp-left-title .split-layout-pdp-title-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 14px;
    }
}

.split-layout-pdp-left-title .split-layout-pdp-song-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #09283A;
    font-family: "ProximaNova", Arial, sans-serif;
}

.split-layout-pdp-left-title .split-layout-pdp-title-meta {
    gap: 8px;
}

.split-layout-pdp-left-title .split-layout-pdp-header-stars {
    font-size: 16px;
    color: #f59e0b;
    letter-spacing: 1px;
}

.split-layout-pdp-left-title .split-layout-pdp-header-rating-avg {
    font-size: 14px;
    font-weight: 600;
    color: #1E2225;
}

.split-layout-pdp-left-title .split-layout-pdp-read-reviews-link,
.split-layout-pdp-left-title .split-layout-pdp-read-reviews-link:visited,
.split-layout-pdp-left-title .split-layout-pdp-read-reviews-link:hover,
.split-layout-pdp-left-title .split-layout-pdp-read-reviews-link:focus {
    font-size: 16px;
    font-weight: 400;
    color: #09283A;
    text-decoration: underline;
}

.split-layout-pdp-left-title .split-layout-pdp-info-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    font-size: 16px;
    color: #09283A;
}

.split-layout-pdp-left-title .split-layout-pdp-header-byline {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: #09283A;
}

.split-layout-pdp-left-title .split-layout-pdp-header-byline a,
.split-layout-pdp-left-title .split-layout-pdp-header-byline a:visited,
.split-layout-pdp-left-title .split-layout-pdp-header-byline a:hover {
    font-weight: 700;
    line-height: inherit;
    color: #09283A;
    text-decoration: none;
}

.split-layout-pdp-left-title .split-layout-pdp-info-sep {
    display: inline-block;
    width: 0.5px;
    height: 18px;
    background: #82929B;
    flex-shrink: 0;
    align-self: center;
    margin: 0 4px;
}

.split-layout-pdp-left-title .split-layout-pdp-header-badge {
    display: inline-flex;
    align-items: center;
    background: #e5e5e5;
    border: none;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: #09283A;
    max-width: none;
}

.split-layout-pdp-left-title .split-layout-pdp-more-info-link,
.split-layout-pdp-left-title .split-layout-pdp-more-info-link:visited,
.split-layout-pdp-left-title .split-layout-pdp-more-info-link:hover {
    font-size: 16px;
    font-weight: 400;
    color: #09283A;
    text-decoration: none;
}

.split-layout-pdp-left-title .split-layout-pdp-header-pages {
    font-size: 16px;
    color: #09283A;
}

.split-layout-pdp-left-title .split-layout-pdp-keys-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 4px;
}

@media (min-width: 901px) {
    /* Header is a row; actions sit on the bottom edge of the title stack */
    .split-layout-pdp-left-title .split-layout-pdp-keys-row {
        margin-top: 0;
        margin-bottom: 0;
    }
}

.split-layout-pdp-left-title .split-layout-pdp-keys-label {
    font-size: 14px;
    color: #6b7280;
}

.split-layout-pdp-left-title .split-layout-pdp-keys-field {
    gap: 4px;
}

.split-layout-pdp-left-title .split-layout-pdp-keys-dropdown .dropbtn {
    background-color: #FEFEFD;
    border: 1px solid rgba(109, 109, 98, 0.3);
    border-radius: 10px;
    /* Fixed (not min-) width so the button doesn't resize as the shopper picks
       shorter/longer key labels — sized to fit the longest label, which is
       always the original published key (e.g. "Ab Major (Orig. published
       key)"); transposed keys are always shorter than that. */
    width: 280px;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    color: #09283A;
}

.split-layout-pdp-left-title .split-layout-pdp-keys-dropdown .dropdown:hover .dropbtn,
.split-layout-pdp-left-title .split-layout-pdp-keys-dropdown .dropdown:focus-within .dropbtn {
    background-color: #FEFEFD;
    border-color: rgba(109, 109, 98, 0.45);
    color: #1C7CB5;
}

/* .dropdown-content's containing block is .dropdown, which (being inline-block)
   shrinks to the .dropbtn's 280px — match that instead of the generic
   min-width: 225px so the popup isn't narrower than the button that opens it. */
.split-layout-pdp-left-title .split-layout-pdp-keys-dropdown .dropdown-content {
    width: 100%;
    min-width: 280px;
    box-sizing: border-box;
}

.split-layout-pdp-left-title .split-layout-pdp-icon-btn {
    font-size: 16px;
}

/* Keys row */
.split-layout-pdp-keys-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 12px;
}

/* In the right panel (Treatment 1): stack dropdown above icons with a gap */
#splitLayoutPdpRightPanel .split-layout-pdp-keys-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
}

.split-layout-pdp-container:not(.split-layout-pdp-left-title) #splitLayoutPdpRightPanel .split-layout-pdp-keys-field,
.split-layout-pdp-container:not(.split-layout-pdp-left-title) #splitLayoutPdpRightPanel .split-layout-pdp-keys-dropdown,
.split-layout-pdp-container:not(.split-layout-pdp-left-title) #splitLayoutPdpRightPanel .split-layout-pdp-keys-dropdown .dropdown,
.split-layout-pdp-container:not(.split-layout-pdp-left-title) #splitLayoutPdpRightPanel .split-layout-pdp-keys-dropdown .dropbtn,
.split-layout-pdp-container:not(.split-layout-pdp-left-title) #splitLayoutPdpRightPanel .split-layout-pdp-keys-dropdown .dropdown-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.split-layout-pdp-container:not(.split-layout-pdp-left-title) #splitLayoutPdpRightPanel .split-layout-pdp-keys-field {
    align-items: stretch;
}

#splitLayoutPdpRightPanel .split-layout-pdp-header-actions {
    align-self: flex-start;
}

.split-layout-pdp-keys-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.split-layout-pdp-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 2px;
}

.split-layout-pdp-keys-row--actions-only {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}


.split-layout-pdp-keys-label {
    font-size: 14px;
    color: #6b7280;
    white-space: nowrap;
}

/* Same hover/focus-open dropdown as the inline-arrangements key selector */
.split-layout-pdp-keys-dropdown {
    position: relative;
    z-index: 20;
}
.split-layout-pdp-keys-dropdown .dropdown {
    position: relative;
    display: inline-block;
    outline: none;
}
.split-layout-pdp-keys-dropdown .dropbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    background-color: #ffffff;
    border: 0.5px solid #D7DCE0;
    border-radius: 8px;
    padding: 10px 14px;
    height: 40px;
    min-width: 200px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 600;
    color: #09283A;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    white-space: nowrap;
}
.split-layout-pdp-keys-dropdown .dropbtn .fa {
    font-size: 12px;
    margin-left: 0;
}
.split-layout-pdp-keys-dropdown .dropdown:hover .dropbtn,
.split-layout-pdp-keys-dropdown .dropdown:focus-within .dropbtn {
    color: #1C7CB5;
    background-color: #D7DCE0;
    border-color: #D7DCE0;
}
.split-layout-pdp-keys-dropdown .dropdown-content,
#splitLayoutPdpRightPanel .split-layout-pdp-keys-dropdown .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 300;
    background-color: #f9f9f9;
    border: none;
    border-radius: 8px;
    min-width: 225px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 8px 16px rgba(9, 40, 58, 0.15);
}
.split-layout-pdp-keys-dropdown .dropdown:hover .dropdown-content,
.split-layout-pdp-keys-dropdown .dropdown:focus-within .dropdown-content,
#splitLayoutPdpRightPanel .split-layout-pdp-keys-dropdown .dropdown:hover .dropdown-content,
#splitLayoutPdpRightPanel .split-layout-pdp-keys-dropdown .dropdown:focus-within .dropdown-content {
    display: block !important;
}
.split-layout-pdp-keys-dropdown .dropdown-content > a {
    color: #09283A !important;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
}
.split-layout-pdp-keys-dropdown .dropdown-content > a:first-of-type {
    border-radius: 8px 8px 0 0;
}
.split-layout-pdp-keys-dropdown .dropdown-content > a:last-of-type {
    border-radius: 0 0 8px 8px;
}
.split-layout-pdp-keys-dropdown .dropdown-content > a:hover,
.split-layout-pdp-keys-dropdown .dropdown-content > a:focus {
    color: #1C7CB5 !important;
    background: #F3F5F6;
}
.split-layout-pdp-keys-dropdown .dropdown-content p {
    margin: 0;
}
.split-layout-pdp-keys-dropdown .dropdown-content p.active {
    font-weight: 700;
}

.split-layout-pdp-left-title .split-layout-pdp-keys-dropdown .dropbtn {
    background-color: #FEFEFD;
    border: 1px solid rgba(109, 109, 98, 0.3);
    border-radius: 10px;
}

/* ── Dropdown-content: hidden by default everywhere in the right panel ── */
/* dream.css only hides it inside #product-top-fold .product-side-bar, so we
   must re-declare the rule for our new right-panel context. */
#splitLayoutPdpRightPanel .dropdown-content,
#splitLayoutPdpRightPanel .dropdown-block .dropdown-content {
    display: none !important;
    position: absolute;
    z-index: 200;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(9, 40, 58,.12);
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
}

#splitLayoutPdpRightPanel .dropdown:hover .dropdown-content,
#splitLayoutPdpRightPanel .dropdown:focus-within .dropdown-content,
#splitLayoutPdpRightPanel .dropdown-block:hover .dropdown-content,
#splitLayoutPdpRightPanel .dropdown-block:focus-within .dropdown-content {
    display: block !important;
}

/* ── Cart buttons ── */

/* Stack the two buttons with a gap between them */
#splitLayoutPdpRightPanel .productPageButtonContainer .layout-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Space the cart icon away from the button label. line-height: 1 on both the
   icon and label removes each one's own font-based leading — with that
   leading left in, flex still centers each item's (uneven) box rather than
   the glyph/text itself, which is what actually read as "off-center". */
#splitLayoutPdpRightPanel .mn-btn-action-cart i.fa,
#splitLayoutPdpRightPanel .mn-btn-action-cart .fa {
    margin-right: 8px !important;
    line-height: 1;
}

#splitLayoutPdpRightPanel .mn-btn-action-cart span {
    line-height: 1;
    /* Equal-height flex boxes (via line-height: 1 above) center the icon and
       text's boxes evenly, but the shopping-cart glyph's own ink sits lower
       within its box than the text's ink sits within its — nudge the text
       down slightly so both read as vertically centered against each other.
       (Measured ~2px off pixel-for-pixel against a screenshot — see the
       equivalent fix in _product_redesign.scss for Control.) */
    position: relative;
    top: 2px;
}

#splitLayoutPdpRightPanel .mn-btn-action-cart,
#splitLayoutPdpRightPanel .mn-btn-action-cart:visited {
    background: #09283A !important;
    background-image: none !important;
    border: 2px solid #09283A !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    width: 100%;
    height: auto !important;
    min-height: 50px;
    /* product.css's .mn-button-base sets padding-top/bottom: 10px !important
       and height: 50px in content-box — that padding stacked on top of the
       fixed height pushed the (already off-center) content further down. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    /* block + inline icon/text relied on line-height for centering, which
       drifts with the icon font's own metrics — flex centers both exactly. */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#splitLayoutPdpRightPanel .mn-btn-action-cart:hover,
#splitLayoutPdpRightPanel .mn-btn-action-cart:focus {
    background: #2e3438 !important;
    border-color: #2e3438 !important;
    color: #fff !important;
}

/* Mobile-only mirrored sticky Add to Cart bar — see the @media (max-width: 900px)
   rules below for its shown/hidden styling. Desktop never shows it: the inline
   CTA above is always in view there, so there's nothing to mirror. */
#splitLayoutPdpStickyCta {
    display: none;
}

#splitLayoutPdpRightPanel .mn-btn-action-pro span,
#splitLayoutPdpRightPanel .mn-btn-action-pro .fa {
    line-height: 1;
}

#splitLayoutPdpRightPanel .mn-btn-action-pro,
#splitLayoutPdpRightPanel .mn-btn-action-pro:visited {
    background: #fff !important;
    background-image: none !important;
    border: 2px solid #09283A !important;
    color: #09283A !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 100%;
    height: auto !important;
    min-height: 50px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#splitLayoutPdpRightPanel .mn-btn-action-pro:hover,
#splitLayoutPdpRightPanel .mn-btn-action-pro:focus {
    background: #f5f5f5 !important;
    color: #09283A !important;
}

/* ── All links in the right panel ── */
#splitLayoutPdpRightPanel a,
#splitLayoutPdpRightPanel a:visited,
#splitLayoutPdpRightPanel a:hover,
#splitLayoutPdpRightPanel a:focus {
    color: #09283A;
}

/* ── Header rating stars — server-rendered, present at first paint ── */

/* Hide the JS-populated product-rating div; it still exists for callbacks */
.split-layout-pdp-product-rating-js {
    display: none !important;
}

.split-layout-pdp-header-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.split-layout-pdp-header-stars {
    color: #f59e0b;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.5px;
}

.split-layout-pdp-header-rating-avg {
    font-size: 14px;
    font-weight: 600;
    color: #1E2225;
    line-height: 1;
}

/* Native <select> pill — matches inline-arrangements key selector style */
.split-layout-pdp-keys-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #F3F5F6;
    border: none;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    color: #09283A;
    padding: 8px 34px 8px 14px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2309283A' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    line-height: 1.4;
    font-family: inherit;
    outline: none;
}
.split-layout-pdp-keys-select:hover {
    background-color: #D7DCE0;
}
.split-layout-pdp-keys-select:focus {
    background-color: #D7DCE0;
    outline: 2px solid #6b7280;
    outline-offset: 2px;
}

.split-layout-pdp-prints-form {
    margin: 0;
    width: 100%;
}

.split-layout-pdp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #D7DCE0;
    background: #F3F5F6;
    color: #09283A;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}
.split-layout-pdp-icon-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.split-layout-pdp-icon-btn[hidden] {
    display: none !important;
}
.split-layout-pdp-wish-filled,
.split-layout-pdp-wish-empty {
    display: none !important;
}
.split-layout-pdp-icon-btn.is-wishlisted .split-layout-pdp-wish-filled {
    display: block !important;
}
.split-layout-pdp-icon-btn:not(.is-wishlisted) .split-layout-pdp-wish-empty {
    display: block !important;
}

.split-layout-pdp-icon-btn:hover {
    border-color: #9ca3af;
    background: #e8eaec;
    color: #09283A;
    text-decoration: none;
}

.split-layout-pdp-container:not(.split-layout-pdp-left-title) .split-layout-pdp-icon-btn,
.split-layout-pdp-container:not(.split-layout-pdp-left-title) .split-layout-pdp-icon-btn:hover {
    background: transparent;
}

.split-layout-pdp-icon-btn svg {
    display: block;
    flex-shrink: 0;
}

/* .mn-embed-widget-trigger (shared with the control PDP's embed button) paints
   a filled blue rounded-square — override back to the same circular outline
   look as the other header icon buttons here. */
.split-layout-pdp-icon-btn.mn-embed-widget-trigger {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #D7DCE0;
    background: #F3F5F6;
    order: initial;
}
.split-layout-pdp-icon-btn.mn-embed-widget-trigger:hover {
    background: #e8eaec;
    border-color: #9ca3af;
}
.split-layout-pdp-container:not(.split-layout-pdp-left-title) .split-layout-pdp-icon-btn.mn-embed-widget-trigger,
.split-layout-pdp-container:not(.split-layout-pdp-left-title) .split-layout-pdp-icon-btn.mn-embed-widget-trigger:hover {
    background: transparent;
}

/* ── Pricing component ── */

.split-layout-pdp-pricing-section {
    padding: 12px 24px 20px;
}

/* MVSP component experiment — fills the pricing slot; keep its own PDF toggle. */
.split-layout-pdp-pricing-section .mvsp-container {
    margin-top: 0;
}

.split-layout-pdp-pricing-section .mvsp-add-to-cart-btn,
.split-layout-pdp-pricing-section .mvsp-buy-now-btn {
    box-sizing: border-box;
}

.split-layout-pdp-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.split-layout-pdp-price-current {
    font-size: 24px;
    font-weight: 400;
    color: #09283A;
}

.split-layout-pdp-price-original {
    font-size: 16px;
    color: #9ca3af;
    text-decoration: line-through;
}

.split-layout-pdp-price-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px;
}

.split-layout-pdp-price-includes {
    margin: 2px 0 6px;
    font-size: 14px;
    line-height: 1.4;
    color: #4C565D;
}

.split-layout-pdp-price-per-print {
    font-size: 14px;
    color: #4C565D;
    margin: 0 0 8px;
}

.split-layout-pdp-min-prints {
    font-size: 14px;
    color: #1E2225;
    margin: 0 0 8px;
}

.split-layout-pdp-print-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}

.split-layout-pdp-print-qty-label {
    font-size: 14px;
    font-weight: 600;
    color: #1E2225;
    margin: 0;
}

.split-layout-pdp-print-qty input.numPrints {
    width: 72px;
    height: 36px;
    border: 1px solid #D7DCE0;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 14px;
}

.split-layout-pdp-owned-alert,
.split-layout-pdp-cannot-purchase {
    margin: 0 0 12px;
    font-size: 14px;
}

.split-layout-pdp-mne-copy {
    font-size: 14px;
    font-weight: 500;
    color: #1E2225;
}

/* On desktop the mne-copy lives inside the scrollable right panel */
@media (min-width: 901px) {
    .split-layout-pdp-mne-copy {
        margin: 8px 0 0;
    }
}

.split-layout-pdp-device-blurb-wrap {
    margin: 12px 16px;
}

.split-layout-pdp-left-title .split-layout-pdp-scroll-body > .split-layout-pdp-sample-blurb {
    margin: 4px 0 8px;
}

.split-layout-pdp-left-title .split-layout-pdp-device-blurb-wrap {
    margin: 4px 16px 8px;
}

.split-layout-pdp-device-blurb {
    margin: 0;
}

.split-layout-pdp-sample-blurb a {
    color: #0272b3;
    text-decoration: underline;
}

.split-layout-pdp-upsells {
    margin: 0 0 8px;
}

#splitLayoutPdpRightPanel .checkbox-inline {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 14px;
    color: #1E2225;
    margin: 8px 0;
    font-weight: 400;
    white-space: normal;
}

#splitLayoutPdpRightPanel .checkbox-inline input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
}

#splitLayoutPdpRightPanel .pdf-checkbox-subtitle {
    font-size: 14px;
    color: #4C565D;
    margin: 0 0 8px 0;
}

#splitLayoutPdpRightPanel .split-layout-pdp-upsells .owns-pdf-message {
    font-size: 14px;
    color: #4C565D;
    margin: 4px 0 0;
}

#splitLayoutPdpRightPanel .mn-buynow-action {
    width: 100%;
    height: auto;
    min-height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    border-radius: 50px;
    border: 2px solid #09283A;
    background: #fff;
    color: #09283A;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#splitLayoutPdpRightPanel .mn-buynow-action:hover,
#splitLayoutPdpRightPanel .mn-buynow-action:focus {
    background: #f5f5f5;
}

#splitLayoutPdpRightPanel .apple-pay-button,
#splitLayoutPdpRightPanel .mn-btn-action-third-party {
    width: 100%;
    min-height: 50px;
    border-radius: 50px !important;
}

.split-layout-pdp-pricing-section .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 700;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 10px;
    transition: box-shadow 0.15s, background 0.15s;
}

.split-layout-pdp-btn-primary {
    background: #09283A;
    color: #fff !important;
    border-color: #09283A;
}

.split-layout-pdp-btn-primary:hover,
.split-layout-pdp-btn-primary:focus {
    background: #1a3560;
    box-shadow: 0 4px 12px rgba(9, 40, 58,0.18);
    color: #fff !important;
}

.split-layout-pdp-btn-outline {
    background: #fff;
    color: #09283A !important;
    border-color: #d1d5db;
}

.split-layout-pdp-btn-outline:hover,
.split-layout-pdp-btn-outline:focus {
    border-color: #9ca3af;
    box-shadow: 0 2px 6px rgba(9, 40, 58,0.08);
    color: #09283A !important;
}

.split-layout-pdp-expand-item {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.split-layout-pdp-expand-item.is-collapsed {
    grid-template-rows: 0fr;
}

.split-layout-pdp-expand-inner {
    overflow: hidden;
    min-height: 0;
}

.split-layout-pdp-expand-inner > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.split-layout-pdp-expand-item.is-collapsed .split-layout-pdp-expand-inner > * {
    opacity: 0;
    transform: translateY(12px);
}

.split-layout-pdp-see-more,
.split-layout-pdp-versions-see-more {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    margin-top: 16px;
    margin-right: auto;
    padding: 0;
    border: none;
    background: none;
    font-family: "ProximaNova", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #09283A;
    cursor: pointer;
    text-decoration: none;
}

.split-layout-pdp-see-more:hover,
.split-layout-pdp-versions-see-more:hover {
    color: #1a3d54;
    text-decoration: none;
}

.split-layout-pdp-see-more svg,
.split-layout-pdp-versions-see-more svg {
    display: block;
    flex-shrink: 0;
}

.split-layout-pdp-see-more[hidden],
.split-layout-pdp-versions-see-more[hidden] {
    display: none !important;
}

/* ── More Versions component — horizontal rows ── */

.split-layout-pdp-versions-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.split-layout-pdp-version-card {
    display: flex;
    align-items: stretch;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    /* No horizontal padding — thumb left edge aligns with "More Versions" title */
    padding: 0;
    margin-bottom: 14px;
}

.split-layout-pdp-version-card a.split-layout-pdp-version-card-info,
.split-layout-pdp-version-card a.split-layout-pdp-version-thumb-link {
    text-decoration: none;
    color: inherit;
}

.split-layout-pdp-version-thumb-link {
    display: block;
    height: 100%;
}

.split-layout-pdp-version-card:hover {
    background: transparent;
    text-decoration: none;
    color: inherit;
}

/* White bordered image box — 20% larger than prior 132px */
.split-layout-pdp-version-thumb-box {
    position: relative;
    width: 158px;
    flex-shrink: 0;
    aspect-ratio: 3 / 4;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    padding: 7px;
    box-sizing: border-box;
}

.split-layout-pdp-version-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.split-layout-pdp-version-thumb-box .arrangement-play-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    opacity: 0.9;
}

.split-layout-pdp-version-thumb-box .arrangement-play-btn svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Scoring badge on the sheet preview */
.split-layout-pdp-version-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 3px 8px;
    background: #e2dfdf;
    border: 1px solid rgba(90, 90, 84, 0.20);
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    color: #1f1f1c;
    white-space: nowrap;
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

/* Title + artist + rating sit to the right of the preview, pinned to the bottom */
.split-layout-pdp-version-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 3px;
    padding-bottom: 2px;
}

.split-layout-pdp-version-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #09283A;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

.split-layout-pdp-version-card-artist {
    font-size: 14px;
    color: #666;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.split-layout-pdp-version-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.split-layout-pdp-version-stars {
    color: #f59e0b;
    font-size: 11px;
    line-height: 1;
}

.split-layout-pdp-version-rating-count {
    font-size: 14px;
    color: #9ca3af;
    line-height: 1;
}

/* ── Video component ── */

.split-layout-pdp-video-section {
    padding: 12px 24px 20px;
}

.split-layout-pdp-pricing-section + .split-layout-pdp-video-section,
.split-layout-pdp-pricing-section + .split-layout-pdp-section {
    padding-top: 16px;
}

/* Spacing between right-panel sections */
#splitLayoutPdpRightPanel .split-layout-pdp-section + .split-layout-pdp-section,
#splitLayoutPdpRightPanel .split-layout-pdp-section + .split-layout-pdp-video-section,
#splitLayoutPdpRightPanel .split-layout-pdp-section + .split-layout-pdp-reviews-section,
#splitLayoutPdpRightPanel .split-layout-pdp-video-section + .split-layout-pdp-section,
#splitLayoutPdpRightPanel .split-layout-pdp-video-section + .split-layout-pdp-reviews-section,
#splitLayoutPdpRightPanel .split-layout-pdp-reviews-section + .split-layout-pdp-section {
    margin-top: 16px;
}

.split-layout-pdp-video-section .embed-responsive,
.split-layout-pdp-dmb-video {
    border-radius: 16px;
    overflow: hidden;
}

.split-layout-pdp-dmb-video iframe {
    width: 180px;
    height: 320px;
    max-width: 100%;
    border: 0;
    border-radius: 16px;
}

.split-layout-pdp-songs-lede {
    font-size: 14px;
    color: #515149;
    margin: 0 0 12px;
}

.split-layout-pdp-songs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.split-layout-pdp-song-item {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.split-layout-pdp-song-item:last-child {
    border-bottom: none;
}

.split-layout-pdp-song-thumb-link {
    /* Card chrome matches .arrangement-item (inline arrangement previews):
       white background + border + breathing-room padding around the page,
       rather than a tight, cropped edge-to-edge thumbnail. */
    flex-shrink: 0;
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 0;
}

.split-layout-pdp-song-thumb {
    display: block;
    width: 64px;
    height: 83px;
    /* Show the whole page (like inline arrangement previews), not a cropped
       fragment of it. */
    object-fit: contain;
    background: #fff;
}

.split-layout-pdp-song-content {
    flex: 1;
    min-width: 0;
}

.split-layout-pdp-song-item .split-layout-pdp-song-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1F1F1C;
    text-decoration: none;
    /* Undo the unscoped mobile header rule (`.split-layout-pdp-song-title` —
       reused for the product title's flex-reorder styling) that otherwise
       bleeds a 16px left/right padding + full width into these list titles,
       shifting them right of the thumbnail/meta/actions text below them. */
    width: auto;
    max-width: none;
    align-self: auto;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    background: transparent;
}

.split-layout-pdp-song-item .split-layout-pdp-song-title:hover {
    text-decoration: underline;
}

.split-layout-pdp-song-meta {
    display: block;
    font-size: 14px;
    color: #515149;
    margin-top: 2px;
}

.split-layout-pdp-song-actions {
    display: block;
    font-size: 14px;
    margin-top: 4px;
}

.split-layout-pdp-song-actions a {
    color: #0272b3;
}

/* ── Reviews component ── */

.split-layout-pdp-reviews-section {
    /* match right-panel background — no alternate tint */
    background: transparent;
}

.split-layout-pdp-reviews-list {
    display: flex;
    flex-direction: column;
}

.split-layout-pdp-review {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
}

.split-layout-pdp-reviews-list .split-layout-pdp-review:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.split-layout-pdp-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.split-layout-pdp-reviewer-name {
    font-size: 14px;
    font-weight: 600;
    color: #1F1F1C;
}

.split-layout-pdp-review-stars {
    color: #f59e0b;
    font-size: 11px;
    letter-spacing: 1px;
}

.split-layout-pdp-review-text {
    font-size: 14px;
    color: #374151;
    margin: 0;
    line-height: 1.5;
}

.split-layout-pdp-reviews-btn {
    display: block;
    width: 100%;
    padding: 7px 12px;
    border-radius: 9999px;
    border: 2px solid #d1d5db;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #09283A;
    cursor: pointer;
    text-align: center;
    margin-top: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.split-layout-pdp-reviews-btn:hover {
    border-color: #9ca3af;
    box-shadow: 0 2px 6px rgba(9, 40, 58,0.08);
}

/* ── Tags component ── */

.split-layout-pdp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.split-layout-pdp-tag {
    display: inline-block;
    padding: 4px 12px;
    background: none;
    border: 1px solid #D7DCE0;
    /* Fixed px radius (not 9999px) so a 2-line tag keeps the same corner
       rounding as a 1-line tag, instead of stretching into a tall stadium shape. */
    border-radius: 14px;
    font-size: 14px;
    color: #1E2225;
    font-weight: 500;
}

.split-layout-pdp-tag--link,
.split-layout-pdp-tag--link:visited {
    color: #1E2225;
    text-decoration: none;
}

.split-layout-pdp-tag--link:hover,
.split-layout-pdp-tag--link:focus {
    color: #0B6E99;
    border-color: #0B6E99;
    text-decoration: none;
}

/* ── Separator ── */

.split-layout-pdp-hr {
    margin: 8px 24px;
    border: none;
    border-top: 1px solid #e5e7eb;
}

/* ── Details component (semantic dl) ── */

.split-layout-pdp-collection-note {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.45;
    color: #09283A;
}

.split-layout-pdp-collection-note p {
    margin: 0;
}

.split-layout-pdp-collection-links {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.split-layout-pdp-collection-links li + li {
    margin-top: 4px;
}

.split-layout-pdp-collection-note a {
    color: #0B6E99;
    text-decoration: underline;
}

.split-layout-pdp-details-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.split-layout-pdp-detail-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin: 0;
}

.split-layout-pdp-detail-icon {
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.split-layout-pdp-detail-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.split-layout-pdp-detail-label {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: #62717A;
    line-height: 1.35;
}

.split-layout-pdp-detail-value {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #09283A !important;
    line-height: 1.35;
}

.split-layout-pdp-detail-value--range-images {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.split-layout-pdp-detail-value--range-images .split-layout-pdp-range-image + .split-layout-pdp-range-image {
    margin-top: -6px;
}

.split-layout-pdp-range-image {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.split-layout-pdp-range-image[data-range-tooltip]::after {
    content: attr(data-range-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 2;
    padding: 6px 10px;
    background: #09283A;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.split-layout-pdp-range-image[data-range-tooltip]:hover::after,
.split-layout-pdp-range-image[data-range-tooltip]:focus-within::after {
    opacity: 1;
    visibility: visible;
}

.split-layout-pdp-range-image picture,
.split-layout-pdp-range-image img {
    display: block;
}

.split-layout-pdp-range-image img {
    /* The source assets are 65x55 with a lot of empty staff space above
       and below the notes — scale down so each row doesn't take up more
       vertical room than the text rows around it. */
    width: 52px;
    height: 44px;
    /* These range-chart assets are opaque PNGs with a baked-in white
       background. Multiply blends the white away into whatever's behind
       it (page/card background), leaving just the staff/notes visible. */
    mix-blend-mode: multiply;
}

.split-layout-pdp-detail-value a {
    color: inherit;
    text-decoration: underline;
}

/* ── SEO overview ── */
.split-layout-pdp-seo-overview-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.split-layout-pdp-seo-overview {
    padding-bottom: 8px;
}
.split-layout-pdp-seo-overview + #splitLayoutPdpDetails {
    padding-top: 8px;
}
.split-layout-pdp-seo-overview-body.is-collapsed {
    overflow: hidden;
}
.split-layout-pdp-seo-overview-p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #1E2225;
}
.split-layout-pdp-score-details-toggle svg {
    transition: none;
}
.split-layout-pdp-score-details-toggle svg.is-expanded {
    transform: rotate(180deg);
}

/* ── FAQ (native details/summary) ── */
.split-layout-pdp-faq-item {
    position: relative;
    padding: 0;
}
.split-layout-pdp-faq-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 95%;
    border-top: 1px solid #E5E7EB;
    opacity: 0.5;
}
.split-layout-pdp-faq-item:last-child::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 95%;
    border-bottom: 1px solid #E5E7EB;
    opacity: 0.5;
}
.split-layout-pdp-faq-question {
    list-style: none;
    cursor: pointer;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.split-layout-pdp-faq-question::-webkit-details-marker { display: none; }
.split-layout-pdp-faq-question-text {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #09283A;
    line-height: 1.35;
}
.split-layout-pdp-faq-chevron {
    flex: none;
    color: #09283A;
    transition: transform 0.2s ease;
}
.split-layout-pdp-faq-item[open] .split-layout-pdp-faq-chevron {
    transform: rotate(180deg);
}
.split-layout-pdp-faq-answer {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
}
.split-layout-pdp-faq-answer a {
    color: #0B6E99;
    text-decoration: underline;
}
/* ── See More toggle (shared by Details & About) ── */

.split-layout-pdp-toggle-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.split-layout-pdp-toggle-btn:hover {
    color: #09283A;
}

.split-layout-pdp-toggle-btn.split-layout-pdp-score-details-toggle {
    margin-top: 0;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #09283A;
    gap: 8px;
}

.split-layout-pdp-collapsible {
    overflow: hidden;
}

.split-layout-pdp-collapsible.is-collapsed {
    max-height: 0;
}

/* ── About component ── */

.split-layout-pdp-about-text {
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
    margin: 0 0 12px;
}

/* ── Related Sheet Music section ── */
/* Full panel width so horizontal scroll can reach the right edge;
   left inset (--split-layout-pdp-sheet-inset) keeps content aligned with the paper. */
.split-layout-pdp-related {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    background: #F3F5F6;
    padding: 48px 0 8px;
    box-sizing: border-box;
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

.split-layout-pdp-related-block + .split-layout-pdp-related-block {
    margin-top: 40px;
}

.split-layout-pdp-related-header {
    /* 16px first so padding is never 0 if --split-layout-pdp-sheet-inset is invalid
       (e.g. 100% calc on a display:contents ancestor). */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 0 16px 12px;
    padding-left: max(16px, var(--split-layout-pdp-sheet-inset, 16px));
    padding-right: max(16px, var(--split-layout-pdp-sheet-inset, 16px));
    box-sizing: border-box;
}

.split-layout-pdp-related-heading {
    min-width: 0;
}

.split-layout-pdp-related-title {
    font-size: 24px;
    font-weight: 700;
    color: #1F1F1C;
    margin: 0;
    line-height: 1.2;
}

.split-layout-pdp-related-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: #515149;
    margin: 4px 0 0;
    line-height: 1.3;
}

.split-layout-pdp-related-see-all {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1F1F1C;
    text-decoration: none;
    white-space: nowrap;
    padding-top: 4px;
    line-height: 1.2;
}

.split-layout-pdp-related-see-all:hover,
.split-layout-pdp-related-see-all:focus {
    color: #1C7CB5;
    text-decoration: underline;
}

.split-layout-pdp-related-rfk {
    padding: 0 16px 16px;
    padding-left: max(16px, var(--split-layout-pdp-sheet-inset, 16px));
    padding-right: max(16px, var(--split-layout-pdp-sheet-inset, 16px));
    box-sizing: border-box;
}

/* Horizontal scroll row of cards — starts at sheet left, scrolls full width */
.split-layout-pdp-related-scroll {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 0 16px 16px 16px;
    padding-left: max(16px, var(--split-layout-pdp-sheet-inset, 16px));
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.split-layout-pdp-related-scroll::-webkit-scrollbar {
    display: none;
    height: 0;
}

.split-layout-pdp-related-scroll-wrap {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.split-layout-pdp-related-scroll-wrap::before,
.split-layout-pdp-related-scroll-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.15s;
}
.split-layout-pdp-related-scroll-wrap::before {
    left: 0;
    background: linear-gradient(to left, transparent, #F3F5F6);
}
.split-layout-pdp-related-scroll-wrap::after {
    right: 0;
    background: linear-gradient(to right, transparent, #F3F5F6);
}
.split-layout-pdp-related-scroll-wrap.can-scroll-left::before  { opacity: 1; }
.split-layout-pdp-related-scroll-wrap.can-scroll-right::after  { opacity: 1; }

/* Individual card — transparent container; only the image box is white */
.split-layout-pdp-related-card {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 200px;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 8px;
}

.split-layout-pdp-related-card:hover {
    text-decoration: none;
    color: inherit;
}

/* White bordered image box — matches .arrangement-item from inline arrangements */
.split-layout-pdp-related-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    padding: 8px;
    box-sizing: border-box;
}

.split-layout-pdp-related-thumb > a {
    display: block;
    width: 100%;
    height: 100%;
}

.split-layout-pdp-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Same play control as inline arrangements / browse / search */
.split-layout-pdp-related-thumb .arrangement-play-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0.9;
}

.split-layout-pdp-related-thumb .arrangement-play-btn svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Scoring badge at the bottom of thumbnail — matches PDP inline arrangements style */
.split-layout-pdp-related-scoring {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: #E2DFDF;
    border: 1px solid rgba(90, 90, 84, 0.20);
    color: #1F1F1C;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 9999px;
    white-space: nowrap;
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

/* Info: no background, on section gray — matches arrangement-card-title/artist style */
.split-layout-pdp-related-info {
    display: flex;
    flex-direction: column;
    padding: 0 2px;
    background: transparent;
}

.split-layout-pdp-related-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #09283A;
    margin: 0 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

.split-layout-pdp-related-card-artist {
    font-size: 14px;
    color: #666;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.split-layout-pdp-related-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.split-layout-pdp-related-stars {
    color: #f59e0b;
    font-size: 11px;
    line-height: 1;
}

.split-layout-pdp-related-rating-count {
    font-size: 14px;
    color: #9ca3af;
    line-height: 1;
}

/* ── Old playback controls row — hidden in SplitLayoutPdp (replaced by sticky bar) ── */

.split-layout-pdp-music-panel:not(.is-hybrid-product) .controls,
.split-layout-pdp-music-panel:not(.is-hybrid-product) #hybridPrintRowControls,
.split-layout-pdp-music-panel:not(.is-hybrid-product) .hybridPrintRowControls,
.is-hybrid-product .split-layout-pdp-sheet-wrapper .controls:not(#hybridPrintRowControls):not(.hybridPrintRowControls) {
    display: none !important;
}

.split-layout-pdp-container .split-layout-pdp-sheet-wrapper.split-layout-pdp-collection .collectionPrintRowControls.controls {
    display: flex !important;
}

/* Hybrid: keep interactive-audio strip mounted for JS, hide its chrome.
   Visible UI is #splitLayoutPdpPlayerBar (bridged in SvgPlaybackVertical.js). */
.is-hybrid-product #hybridPrintRowControls.split-layout-pdp-hybrid-strip-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* immersive-audio-controls.css forces display:flex !important — keep an element box */
    display: block !important;
    flex: none !important;
    z-index: -1;
}

/* ── Back to top ── floats over the music panel, anchored above the player bar.
   Desktop only — mobile stacks the panel into normal page flow with no fixed
   player to anchor above (see media query below). */
.split-layout-pdp-back-to-top {
    position: absolute;
    right: 16px;
    bottom: calc(var(--split-layout-pdp-player-h, 78px) + 16px);
    z-index: 15;
    display: none;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: none;
    border-radius: 999px;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    padding: 10px 12px;
    font-family: "ProximaNova", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: #09283A;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.split-layout-pdp-back-to-top svg {
    display: block;
    flex-shrink: 0;
    transform: rotate(180deg);
}

.split-layout-pdp-back-to-top.is-visible {
    display: inline-flex;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.split-layout-pdp-back-to-top:hover {
    background: #F3F5F6;
}

@media (max-width: 900px) {
    .split-layout-pdp-back-to-top {
        display: none !important;
    }
}

/* ── Sticky bottom player bar ──
   Nested in the DOM right after the header (for accessible tab order — see
   _SheetMusicPanel.cshtml) but positioned absolutely against the music panel
   (the nearest ancestor with position != static) so it still paints pinned to
   the panel's bottom edge regardless of where it sits in the document. */
.split-layout-pdp-player-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid rgba(229, 231, 235, 0.9);
    box-shadow: 0 -1px 8px rgba(9, 40, 58, 0.06);
    pointer-events: auto;
}

.split-layout-pdp-player-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 28px;
    gap: 24px;
    min-height: 78px;
    box-sizing: border-box;
}

/* Non-playable / DMB previews (and collections, which have their own song
   pager above the sheet instead): keep the sticky bar shell (consistent
   bottom space + visual continuity with playable products) but there is no
   audio sample to play/seek — hide only the playback-specific controls
   (volume/mute/time, transport + progress). Zoom and full-screen
   (.split-layout-pdp-player-right) still work on any static page/sheet, so
   they stay. min-height on .split-layout-pdp-player-inner above keeps the
   bar's height (and the scroll-body's reserved bottom padding) unchanged. */
.split-layout-pdp-player-bar--no-audio .split-layout-pdp-player-left,
.split-layout-pdp-player-bar--no-audio .split-layout-pdp-player-center-wrap,
.split-layout-pdp-player-bar--no-audio .split-layout-pdp-mobile-mute-btn {
    display: none !important;
}

/* With only the zoom/full-screen group left, space-between (on the row's
   default layout) would otherwise pin that lone child to the start (left)
   per flexbox spec — keep it anchored right like the full player. */
.split-layout-pdp-player-bar--no-audio .split-layout-pdp-player-inner {
    justify-content: flex-end;
}

/* Left: volume + time */
.split-layout-pdp-player-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.split-layout-pdp-player-left .split-layout-pdp-player-icon-btn {
    color: #3d4f66;
    font-size: 16px;
}

.split-layout-pdp-vol-track {
    position: relative;
    width: 72px;
    height: 14px;
    display: flex;
    align-items: center;
    background: transparent;
    border-radius: 9999px;
    flex-shrink: 0;
    cursor: pointer;
    touch-action: none;
}

.split-layout-pdp-vol-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 5px;
    margin-top: -2.5px;
    background: rgba(46, 157, 225, 0.25);
    border-radius: 9999px;
}

.split-layout-pdp-vol-fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 5px;
    margin-top: -2.5px;
    width: 60%;
    background: #2E9DE1;
    border-radius: 9999px;
    pointer-events: none;
}

.split-layout-pdp-vol-fill::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: #2E9DE1;
    box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(9, 40, 58, 0.15);
}

.split-layout-pdp-player-time {
    font-size: 13px;
    color: #5b6573;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    letter-spacing: 0.01em;
}

/* Center column: transport over segmented progress */
.split-layout-pdp-player-center-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 460px;
    width: 42%;
}

@media (min-width: 901px) {
    .split-layout-pdp-player-center-wrap {
        min-width: 300px;
    }
}

.split-layout-pdp-player-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-shrink: 0;
}

.split-layout-pdp-player-transport svg,
.split-layout-pdp-player-icon-btn svg {
    display: block;
    flex-shrink: 0;
}

.split-layout-pdp-player-transport[aria-pressed="true"] svg path {
    fill: #2E9DE1;
}

.split-layout-pdp-player-transport {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #3d4f66;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.split-layout-pdp-player-transport:hover:not(:disabled) {
    background: #eef4fc;
    color: #1e3a5f;
}

.split-layout-pdp-player-transport:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Play/Pause — Musicnotes blue (#2E9DE1), same as immersive hybrid player */
.split-layout-pdp-play-btn {
    width: 48px !important;
    height: 48px !important;
    background: #2E9DE1 !important;
    color: #fff !important;
    font-size: 18px !important;
    box-shadow: 0 2px 10px rgba(46, 157, 225, 0.35);
}

.split-layout-pdp-play-btn:hover:not(:disabled) {
    background: #2689c7 !important;
    color: #fff !important;
}

.split-layout-pdp-play-btn:disabled {
    opacity: 0.55;
    background: #2E9DE1 !important;
    color: #fff !important;
    cursor: default;
}

/* Replace the play icon with a spinner while the player is loading */
.split-layout-pdp-play-btn:disabled i {
    animation: split-layout-pdp-spin 1s linear infinite;
    font-size: 16px !important;
    margin-left: 0 !important;
}
/* Override the icon class to show a spinner glyph */
.split-layout-pdp-play-btn:disabled i::before {
    content: "\f110"; /* fa-spinner */
}

@keyframes split-layout-pdp-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.split-layout-pdp-play-btn i.fa-play {
    margin-left: 2px;
}

.split-layout-pdp-play-btn i.fa-pause {
    margin-left: 0;
    font-size: 16px;
}

.split-layout-pdp-player-active {
    color: #2E9DE1 !important;
}

/* Segmented progress under center controls */
.split-layout-pdp-player-progress {
    position: relative;
    width: 100%;
    height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.split-layout-pdp-progress-segments {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 5px;
    flex: 1;
    min-width: 0;
}

.split-layout-pdp-progress-seg {
    /* grow is set from page duration (seconds); equal 1 1 0 until then */
    flex: 1 1 0;
    height: 5px;
    border-radius: 9999px;
    background: rgba(46, 157, 225, 0.25);
    position: relative;
    overflow: hidden;
    min-width: 4px;
}

.split-layout-pdp-progress-seg-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: #2E9DE1;
    border-radius: 9999px;
    /* Keep width in lockstep with the rAF clock — no eased jumps */
}

.split-layout-pdp-progress-knob {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
    margin-left: -5.5px;
    border-radius: 50%;
    background: #2E9DE1;
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(9, 40, 58, 0.18);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s;
}

.split-layout-pdp-progress-knob.is-visible {
    opacity: 1;
}

/* Right: zoom */
.split-layout-pdp-player-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

/* Mobile mute button is only for mobile */
@media (min-width: 901px) {
    .split-layout-pdp-mobile-mute-btn {
        display: none !important;
    }
}

.split-layout-pdp-player-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: #3d4f66;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.split-layout-pdp-player-icon-btn:hover {
    background: #eef4fc;
    color: #1e3a5f;
}

.split-layout-pdp-zoom-label {
    font-size: 13px;
    color: #5b6573;
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Scrollbar styling for panels ── */

.split-layout-pdp-scroll-area,
.split-layout-pdp-right-panel {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.split-layout-pdp-scroll-area::-webkit-scrollbar,
.split-layout-pdp-right-panel::-webkit-scrollbar {
    width: 6px;
}

.split-layout-pdp-scroll-area::-webkit-scrollbar-thumb,
.split-layout-pdp-right-panel::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

/* After desktop player rules so mobile centering / seekbar actually apply */
@media (max-width: 900px) {
    /* Frost grid pins the player to the bottom; flatten + order put it back on top. */
    .split-layout-pdp-music-panel,
    .split-layout-pdp-scroll-area,
    .split-layout-pdp-scroll-body,
    .split-layout-pdp-right-panel,
    .split-layout-pdp-header-section,
    .split-layout-pdp-title-block,
    .split-layout-pdp-title-row,
    .split-layout-pdp-keys-row {
        display: contents;
        overflow: visible;
        height: auto;
        min-height: 0;
        position: static;
        flex: none;
    }

    .split-layout-pdp-player-bar {
        grid-area: auto;
        align-self: stretch;
        justify-self: auto;
        order: 1;
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-top: none;
        border-bottom: none;
        box-shadow: none;
    }

    .split-layout-pdp-player-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: relative;
        gap: 6px;
        padding: 8px 16px;
        min-height: 0;
    }

    .split-layout-pdp-player-center-wrap {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: none;
        gap: 8px;
        order: 1;
    }

    .split-layout-pdp-player-center {
        align-self: center;
        position: relative;
        z-index: 3;
        pointer-events: auto;
    }

    .split-layout-pdp-player-progress {
        display: flex !important;
        width: 100%;
        min-width: 0;
        align-self: stretch;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }

    .split-layout-pdp-player-left {
        position: absolute;
        left: 16px;
        top: 8px;
        height: 48px;
        display: flex !important;
        align-items: center;
        z-index: 1;
        width: auto;
        max-width: calc(50% - 80px);
        flex: none;
        gap: 0;
        min-width: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .split-layout-pdp-player-time {
        font-size: 12px;
    }

    #splitLayoutPdpMuteBtn,
    .split-layout-pdp-vol-track,
    .split-layout-pdp-player-right {
        display: none !important;
    }

    /* Mobile mute/unmute button — anchored to the right of the player bar,
       shown by JS only in the autoplay (starts-muted) variant */
    .split-layout-pdp-mobile-mute-btn {
        position: absolute;
        right: 16px;
        top: 8px;
        height: 48px;
        width: 44px;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 5;
        pointer-events: auto;
        flex-shrink: 0;
    }

    .split-layout-pdp-pricing-section .productPageButtonContainer .mn-buynow-action,
    .split-layout-pdp-pricing-section .productPageButtonContainer .apple-pay-button,
    .split-layout-pdp-pricing-section .productPageButtonContainer .mn-btn-action-pro {
        position: relative !important;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100% !important;
        margin: 0 !important;
        box-shadow: none;
    }

    /* Add to Cart (in any of its 3 mutually-exclusive forms — see _Pricing.cshtml)
       renders inline here, in normal flow, same as Buy Now/Apple Pay above.
       #splitLayoutPdpStickyCta (below) is a separate mirrored bar, fixed to the
       bottom of the screen, shown by JS (wireStickyAddToCart in
       split-layout-pdp.js) only once this inline one scrolls out of view — so
       the two never show at the same time. :not(#mvsp-popup-overlay *) excludes
       the MVSP popup's own buttons, which reuse these same classes but must
       stay inside the modal instead of pinning to the viewport. */
    .split-layout-pdp-pricing-section .mn-btn-action-cart:not(#mvsp-popup-overlay *),
    .split-layout-pdp-pricing-section > .mvsp-popup-trigger,
    .split-layout-pdp-pricing-section .mvsp-add-to-cart-btn:not(#mvsp-popup-overlay *) {
        position: relative !important;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100% !important;
        margin: 0 !important;
        box-shadow: none;
    }

    .split-layout-pdp-full-arr {
        display: none;
    }

    /* Hidden by default (translated below the fold, not display:none) so the
       show/hide driven by wireStickyAddToCart's IntersectionObserver can
       transition smoothly instead of popping in/out. */
    #splitLayoutPdpStickyCta {
        display: flex;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 50;
        transform: translateY(calc(100% + 24px));
        opacity: 0;
        pointer-events: none;
        /* cubic-bezier(0.22, 1, 0.36, 1) ("ease-out-quint") decelerates smoothly
           into place instead of the sharper, more mechanical linear-ish ease —
           reads as a gentle rise rather than a snap. */
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #splitLayoutPdpStickyCta.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    #splitLayoutPdpStickyCta .mn-btn-action-cart {
        width: 100%;
        margin: 0;
        box-shadow: 0 4px 20px rgba(9, 40, 58, 0.2);
    }

    .split-layout-pdp-container:has(#splitLayoutPdpStickyCta.is-visible) {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    /* Frosted-glass backdrop behind the fixed sticky CTA button so sheet
       content scrolling underneath it doesn't read as floating/hard-edged. */
    .split-layout-pdp-container:has(#splitLayoutPdpStickyCta.is-visible)::before {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(76px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        z-index: 40;
        pointer-events: none;
    }

    /* Header element spacing — reinforce mobile rules that may be overridden by later global rules */
    .split-layout-pdp-song-title  { margin-bottom: 10px; }
    .split-layout-pdp-title-meta  { margin-bottom: 10px; }
    .split-layout-pdp-title-meta:not(:has(.split-layout-pdp-header-rating)):not(:has(.split-layout-pdp-read-reviews-link)) {
        margin-bottom: 0;
    }
    .split-layout-pdp-info-row    { margin-bottom: 14px; align-items: center; }
    .split-layout-pdp-mne-copy    { margin-bottom: 14px; }

    /* Keep byline + scoring badge optically centered on the same row */
    .split-layout-pdp-header-byline {
        display: inline-flex;
        align-items: center;
        line-height: 1.2;
    }
    .split-layout-pdp-header-badge {
        display: inline-flex;
        align-items: center;
    }
    .split-layout-pdp-header-byline {
        gap: 0.25em;
    }

    /* No vertical pipes between title-section meta items on mobile */
    .split-layout-pdp-info-sep,
    .split-layout-pdp-left-title .split-layout-pdp-info-sep {
        display: none;
    }

    /* Hide all right-panel separators on mobile — the gray container background
       and each section's own padding provide sufficient visual separation.
       This also prevents "orphan" separators appearing when adjacent sections are absent. */
    .split-layout-pdp-hr {
        display: none;
    }

    /* Sections sit flush on white background — no gaps needed */
    .split-layout-pdp-section,
    .split-layout-pdp-reviews-section,
    .split-layout-pdp-video-section {
        margin-top: 0;
    }

    /* Related / Explore More Music: white background to match the rest of mobile */
    .split-layout-pdp-related {
        background: #fff;
    }
}


/* ── Wishlist toast ─────────────────────────────────────────────────────── */
#splitLayoutPdpWishlistToast {
    /* position: fixed; left/max-width/bottom set by JS, centered over the music
       panel (or viewport on mobile) — `left` is the horizontal midpoint, and the
       -50% translateX below re-centers the (shrink-to-fit) box on it. */
    position: fixed;
    /* `flex: 1` on the text child has a flex-basis of 0%, which the shrink-to-fit
       `width: auto` algorithm treats as ~0 contribution — the box collapses down
       to just the icon + "View List" and the text wraps to its narrowest word.
       `width: max-content` sizes off children's actual (max-content) width
       instead, so the box only shrinks to wrap once it's clamped by max-width. */
    width: max-content;
    max-width: 560px;
    /* Rises gently from underneath the player bar, fading in as it goes */
    transform: translate(-50%, 24px);
    opacity: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #E1FAE0;
    border: 1px solid #0E540D;
    border-radius: 8px;
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease-in-out;
    pointer-events: auto;
}

#splitLayoutPdpWishlistToast.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

.split-layout-pdp-wishlist-toast-text {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #0E540D;
    white-space: normal;
    margin-right: 4px;
}

.split-layout-pdp-wishlist-toast-link {
    font-size: 16px;
    font-weight: 700;
    color: #0E540D;
    text-decoration: none;
    flex-shrink: 0;
    margin-left: 4px;
}

.split-layout-pdp-wishlist-toast-link:hover {
    text-decoration: underline;
}