.mhl-store {
    --mhl-store-bg:#fff;
    --mhl-card-bg:#fff;
    --mhl-text:#000;
    --mhl-muted:#6b6b6b;
    --mhl-accent:#ffd500;
    --mhl-border:#000;
    --mhl-btn-bg:#000;
    --mhl-btn-text:#fff;
    --mhl-btn-hover-bg:#ffd500;
    --mhl-btn-hover-text:#000;
    --mhl-btn-hover-border:#000;
    --mhl-player-track:#dedede;
    --mhl-player-progress:#ffd500;
    --mhl-player-playhead:#fff;
    --mhl-cart-badge-bg:#ffd500;
    --mhl-cart-badge-text:#000;
    --mhl-cart-bg:#fff;
    --mhl-cart-text:#000;
    --mhl-cart-border:#000;
    --mhl-cart-hover-bg:#fff;
    --mhl-cart-hover-text:#ffd500;
    --mhl-cart-hover-border:#ffd500;
    --mhl-cart-badge-hover-bg:#ffd500;
    --mhl-cart-badge-hover-text:#000;
    --mhl-columns:4;
    --mhl-radius:0px;
    --mhl-card-max-width:250px;
    position:relative;
    background:var(--mhl-store-bg);
    color:var(--mhl-text);
    font-family:inherit;
    box-sizing:border-box;
    padding:24px 24px 50px;
}
.mhl-store *, .mhl-store *:before, .mhl-store *:after { box-sizing:border-box; }
.mhl-store button, .mhl-store input { font:inherit; }
.mhl-store-toolbar { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:18px 0 24px; border-bottom:2px solid var(--mhl-border); margin-bottom:26px; }
.mhl-store-heading h2 { margin:0; color:var(--mhl-text); font-size:var(--mhl-store-title-size,42px); line-height:1; font-weight:900; letter-spacing:.02em; }
.mhl-store-heading p { margin:9px 0 0; color:var(--mhl-muted); font-size:15px; }
.mhl-store .mhl-cart-toggle { -webkit-appearance:none !important; appearance:none !important; display:flex !important; align-items:center !important; gap:9px !important; border:2px solid var(--mhl-cart-border) !important; background:var(--mhl-cart-bg) !important; background-color:var(--mhl-cart-bg) !important; color:var(--mhl-cart-text) !important; padding:9px 12px !important; cursor:pointer; font:inherit !important; font-weight:800 !important; letter-spacing:.03em !important; line-height:1.2 !important; border-radius:var(--mhl-radius) !important; box-shadow:none !important; transform:none !important; text-decoration:none !important; white-space:nowrap; }
.mhl-store .mhl-cart-toggle:hover, .mhl-store .mhl-cart-toggle:focus, .mhl-store .mhl-cart-toggle:active { background:var(--mhl-cart-hover-bg) !important; background-color:var(--mhl-cart-hover-bg) !important; color:var(--mhl-cart-hover-text) !important; border-color:var(--mhl-cart-hover-border) !important; box-shadow:none !important; transform:none !important; }
.mhl-cart-count { display:inline-flex; align-items:center; justify-content:center; min-width:25px; height:25px; padding:0 7px; background:var(--mhl-cart-badge-bg); color:var(--mhl-cart-badge-text); border-radius:999px; }
.mhl-store .mhl-cart-toggle:hover .mhl-cart-count,.mhl-store .mhl-cart-toggle:focus .mhl-cart-count,.mhl-store .mhl-cart-toggle:active .mhl-cart-count{background:var(--mhl-cart-badge-hover-bg);color:var(--mhl-cart-badge-hover-text)}
.mhl-cart-total { color:var(--mhl-cart-text) !important; }
.mhl-store .mhl-cart-toggle:hover .mhl-cart-total,.mhl-store .mhl-cart-toggle:focus .mhl-cart-total,.mhl-store .mhl-cart-toggle:active .mhl-cart-total{color:var(--mhl-cart-hover-text)!important}
.mhl-track-grid { display:grid; grid-template-columns:repeat(var(--mhl-columns), minmax(0,var(--mhl-card-max-width))); justify-content:start; gap:20px; }
.mhl-track-card { display:flex; flex-direction:column; min-width:0; background:var(--mhl-card-bg); color:var(--mhl-text); border:2px solid var(--mhl-border); border-radius:var(--mhl-radius); overflow:hidden; }
.mhl-track-card.is-playing { box-shadow:0 0 0 4px var(--mhl-accent); }
.mhl-track-artwork { position:relative; aspect-ratio:1 / 1; background:#111; overflow:hidden; border-bottom:2px solid var(--mhl-border); }
.mhl-track-artwork img { display:block; width:100%; height:100%; object-fit:cover; }
.mhl-artwork-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#090909; color:var(--mhl-accent); font-weight:900; letter-spacing:.16em; text-align:center; padding:30px; }
.mhl-track-body { display:flex; flex-direction:column; flex:1; padding:12px; }
.mhl-track-title { margin:0 0 10px; min-height:2.35em; color:var(--mhl-text); font-size:16px; line-height:1.18; font-weight:900; text-transform:uppercase; letter-spacing:.01em; }
.mhl-preview-controls { display:flex; align-items:center; justify-content:flex-start; gap:12px; margin-top:auto; min-width:0; }
.mhl-preview-controls.is-disabled { opacity:.5; }
/* Fully own the preview button styling so Elementor/theme button hover rules cannot leak in. */
.mhl-store .mhl-preview-button { -webkit-appearance:none !important; appearance:none !important; display:inline-flex !important; flex:0 0 auto !important; align-items:stretch !important; gap:0 !important; min-width:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; outline-offset:2px; background:transparent !important; color:var(--mhl-text) !important; font:inherit !important; font-size:12px !important; font-weight:900 !important; line-height:1 !important; letter-spacing:.05em !important; text-transform:none !important; text-decoration:none !important; cursor:pointer; overflow:visible; }
.mhl-store .mhl-preview-button:disabled { cursor:not-allowed; }
.mhl-store .mhl-preview-button:hover:not(:disabled),
.mhl-store .mhl-preview-button:focus:not(:disabled),
.mhl-store .mhl-preview-button:active:not(:disabled),
.mhl-store .mhl-preview-button:visited { background:transparent !important; background-color:transparent !important; color:var(--mhl-text) !important; border:0 !important; border-color:transparent !important; border-radius:0 !important; box-shadow:none !important; transform:none !important; padding:0 !important; margin:0 !important; }
.mhl-preview-icon { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; box-sizing:border-box; border:2px solid var(--mhl-border); background:var(--mhl-btn-bg); transition:none; }
.mhl-preview-label { display:inline-flex; align-items:center; justify-content:center; min-height:28px; box-sizing:border-box; padding:0 10px 0 8px; white-space:nowrap; background:transparent; color:var(--mhl-text); transition:background .15s ease,color .15s ease; }
.mhl-preview-icon::before { content:""; position:absolute; left:50%; top:50%; width:0; height:0; transform:translate(-38%,-50%); border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid var(--mhl-accent); }
.mhl-preview-icon::after { content:""; display:none; }
.mhl-preview-button[aria-pressed="true"] .mhl-preview-icon::before { left:50%; top:50%; width:4px; height:12px; transform:translate(-7px,-50%); border:0; background:var(--mhl-accent); }
.mhl-preview-button[aria-pressed="true"] .mhl-preview-icon::after { display:block; position:absolute; left:50%; top:50%; width:4px; height:12px; transform:translate(3px,-50%); background:var(--mhl-accent); }
.mhl-store .mhl-preview-button:hover:not(:disabled) .mhl-preview-label,
.mhl-store .mhl-preview-button:focus-visible:not(:disabled) .mhl-preview-label { background:var(--mhl-btn-hover-bg); color:var(--mhl-btn-hover-text); }
.mhl-preview-time { flex:1 1 auto; min-width:0; overflow:hidden; color:var(--mhl-muted); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.mhl-preview-progress-shell { --mhl-preview-fill-width:0px; --mhl-preview-thumb-pos:10px; position:relative; width:100%; height:20px; margin:13px 0 11px; }
.mhl-preview-progress-track { position:absolute; z-index:0; left:10px; right:10px; top:7.5px; height:5px; overflow:hidden; border-radius:999px; background:var(--mhl-player-track); pointer-events:none; }
.mhl-preview-progress-fill { display:block; width:var(--mhl-preview-fill-width); height:100%; background:var(--mhl-player-progress); }
.mhl-preview-playhead { position:absolute; z-index:1; left:var(--mhl-preview-thumb-pos); top:0; width:20px; height:20px; transform:translateX(-50%); box-sizing:border-box; border:1px solid #d9d9d9; background:var(--mhl-player-playhead); box-shadow:0 1px 4px rgba(0,0,0,.18); pointer-events:none; }
.mhl-store.mhl-playhead-shape-circle .mhl-preview-playhead { width:20px; height:20px; top:0; border-radius:50%; }
.mhl-store.mhl-playhead-shape-square .mhl-preview-playhead { width:16px; height:16px; top:2px; border-radius:0; }
.mhl-store.mhl-playhead-shape-bar .mhl-preview-playhead { width:7px; height:20px; top:0; border-radius:1px; }
.mhl-preview-progress { -webkit-appearance:none; appearance:none; position:absolute; z-index:2; inset:0; width:100%; height:20px; margin:0; padding:0; border:0; outline:0; background:transparent; opacity:0; cursor:pointer; }
.mhl-preview-progress:disabled { cursor:not-allowed; }
.mhl-preview-progress-shell:focus-within { outline:2px solid currentColor; outline-offset:2px; }
.mhl-preview-progress::-webkit-slider-runnable-track { -webkit-appearance:none; appearance:none; height:20px; border:0; background:transparent; }
.mhl-preview-progress::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:0; border:0; background:transparent; }
.mhl-preview-progress::-moz-range-track { height:20px; border:0; background:transparent; }
.mhl-preview-progress::-moz-range-progress { height:20px; border:0; background:transparent; }
.mhl-preview-progress::-moz-range-thumb { width:20px; height:20px; border:0; background:transparent; }
.mhl-track-purchase { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:0; padding-top:12px; }
.mhl-track-price { font-size:17px; font-weight:900; }
/* Own the purchase-button styling too. Elementor/theme hover rules must never leak into the cart button. */
.mhl-store .mhl-add-cart { -webkit-appearance:none !important; appearance:none !important; border:2px solid var(--mhl-border) !important; border-color:var(--mhl-border) !important; background:var(--mhl-btn-bg) !important; background-color:var(--mhl-btn-bg) !important; color:var(--mhl-btn-text) !important; padding:9px 12px !important; font:inherit !important; font-weight:900 !important; font-size:11px !important; line-height:1.15 !important; letter-spacing:.04em !important; text-decoration:none !important; cursor:pointer; border-radius:var(--mhl-radius) !important; box-shadow:none !important; transform:none !important; transition:background .15s ease,color .15s ease; }
.mhl-store .mhl-add-cart:hover,
.mhl-store .mhl-add-cart:focus,
.mhl-store .mhl-add-cart:focus-visible,
.mhl-store .mhl-add-cart:active { background:var(--mhl-btn-hover-bg) !important; background-color:var(--mhl-btn-hover-bg) !important; color:var(--mhl-btn-hover-text) !important; border-color:var(--mhl-btn-hover-border) !important; box-shadow:none !important; transform:none !important; }
.mhl-store .mhl-add-cart.is-in-cart,
.mhl-store .mhl-add-cart.is-in-cart:hover,
.mhl-store .mhl-add-cart.is-in-cart:focus,
.mhl-store .mhl-add-cart.is-in-cart:focus-visible,
.mhl-store .mhl-add-cart.is-in-cart:active { background:var(--mhl-accent) !important; background-color:var(--mhl-accent) !important; color:#000 !important; border-color:var(--mhl-border) !important; box-shadow:none !important; transform:none !important; }
.mhl-store .mhl-demo-checkout, .mhl-store .mhl-demo-complete, .mhl-store .mhl-demo-finish { -webkit-appearance:none !important; appearance:none !important; border:2px solid var(--mhl-border) !important; border-color:var(--mhl-border) !important; background:var(--mhl-btn-bg) !important; background-color:var(--mhl-btn-bg) !important; color:var(--mhl-btn-text) !important; padding:9px 12px !important; font:inherit !important; font-weight:900 !important; font-size:11px !important; line-height:1.2 !important; letter-spacing:.04em !important; text-decoration:none !important; cursor:pointer; border-radius:var(--mhl-radius) !important; box-shadow:none !important; transform:none !important; transition:background .15s ease,color .15s ease; }
.mhl-store .mhl-demo-checkout:hover:not(:disabled), .mhl-store .mhl-demo-checkout:focus:not(:disabled), .mhl-store .mhl-demo-checkout:active:not(:disabled), .mhl-store .mhl-demo-complete:hover, .mhl-store .mhl-demo-complete:focus, .mhl-store .mhl-demo-complete:active, .mhl-store .mhl-demo-finish:hover, .mhl-store .mhl-demo-finish:focus, .mhl-store .mhl-demo-finish:active { background:var(--mhl-btn-hover-bg) !important; background-color:var(--mhl-btn-hover-bg) !important; color:var(--mhl-btn-hover-text) !important; border-color:var(--mhl-btn-hover-border) !important; box-shadow:none !important; transform:none !important; }
.mhl-empty-store { border:2px solid var(--mhl-border); padding:34px; text-align:center; font-weight:700; }

.mhl-drawer-backdrop { position:fixed; inset:0; z-index:99997; background:rgba(0,0,0,.46); }
.mhl-cart-drawer { position:fixed; right:0; top:0; z-index:99998; width:min(430px,92vw); height:100vh; background:var(--mhl-card-bg); color:var(--mhl-text); border-left:2px solid var(--mhl-border); transform:translateX(101%); transition:transform .24s ease; display:flex; flex-direction:column; box-shadow:-14px 0 35px rgba(0,0,0,.18); }
.mhl-cart-drawer.is-open { transform:translateX(0); }
.mhl-cart-header { display:flex; justify-content:space-between; align-items:flex-start; padding:25px; border-bottom:2px solid var(--mhl-border); }
.mhl-cart-header h3 { margin:2px 0 0; font-size:28px; font-weight:900; color:var(--mhl-text); }
.mhl-cart-eyebrow { color:var(--mhl-muted); font-size:11px; font-weight:800; letter-spacing:.16em; }
.mhl-store .mhl-cart-close, .mhl-store .mhl-demo-close { -webkit-appearance:none !important; appearance:none !important; border:0 !important; border-color:transparent !important; background:transparent !important; background-color:transparent !important; color:var(--mhl-text) !important; font:inherit !important; font-size:34px !important; font-weight:400 !important; line-height:1 !important; margin:0 !important; padding:0 3px !important; min-width:0 !important; min-height:0 !important; border-radius:0 !important; box-shadow:none !important; transform:none !important; text-decoration:none !important; cursor:pointer; }
.mhl-store .mhl-cart-close:hover, .mhl-store .mhl-cart-close:focus, .mhl-store .mhl-cart-close:active, .mhl-store .mhl-demo-close:hover, .mhl-store .mhl-demo-close:focus, .mhl-store .mhl-demo-close:active { border:0 !important; background:transparent !important; background-color:transparent !important; color:var(--mhl-text) !important; box-shadow:none !important; transform:none !important; text-decoration:none !important; }
.mhl-cart-items { overflow:auto; flex:1; padding:0 25px; }
.mhl-cart-item { display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:12px; align-items:center; padding:16px 0; border-bottom:1px solid var(--mhl-border); }
.mhl-cart-item img, .mhl-cart-item-placeholder { width:62px; height:62px; object-fit:cover; background:#111; }
.mhl-cart-item-placeholder { display:flex; align-items:center; justify-content:center; color:var(--mhl-accent); font-size:10px; font-weight:900; }
.mhl-cart-item-title { font-weight:900; line-height:1.15; }
.mhl-cart-item-price { color:var(--mhl-muted); margin-top:4px; font-size:13px; }
.mhl-store .mhl-cart-remove { -webkit-appearance:none !important; appearance:none !important; border:0 !important; border-color:transparent !important; background:transparent !important; background-color:transparent !important; color:var(--mhl-muted) !important; font:inherit !important; font-size:12px !important; font-weight:400 !important; line-height:1.2 !important; margin:0 !important; padding:5px !important; border-radius:0 !important; box-shadow:none !important; transform:none !important; text-decoration:underline !important; text-underline-offset:2px; cursor:pointer; }
.mhl-store .mhl-cart-remove:hover, .mhl-store .mhl-cart-remove:focus, .mhl-store .mhl-cart-remove:active { border:0 !important; background:transparent !important; background-color:transparent !important; color:var(--mhl-text) !important; box-shadow:none !important; transform:none !important; text-decoration:underline !important; }
.mhl-cart-empty { padding:35px 25px; color:var(--mhl-muted); }
.mhl-cart-footer { border-top:2px solid var(--mhl-border); padding:22px 25px 28px; }
.mhl-cart-subtotal-row { display:flex; justify-content:space-between; align-items:center; font-size:20px; font-weight:900; }
.mhl-demo-note { color:var(--mhl-muted); font-size:12px; line-height:1.4; }
.mhl-demo-checkout { width:100%; margin-top:7px; }
.mhl-demo-checkout:disabled { opacity:.45; cursor:not-allowed; }

.mhl-demo-modal { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.64); display:flex; align-items:center; justify-content:center; padding:22px; }
.mhl-demo-modal[hidden] { display:none; }
.mhl-demo-modal-card { position:relative; width:min(620px,100%); max-height:calc(100vh - 44px); overflow:auto; background:var(--mhl-card-bg); color:var(--mhl-text); border:3px solid var(--mhl-border); padding:34px; box-shadow:0 20px 65px rgba(0,0,0,.28); }
.mhl-demo-close { position:absolute; top:14px; right:14px; }
.mhl-demo-step h3 { margin:5px 0 12px; font-size:30px; font-weight:900; color:var(--mhl-text); }
.mhl-demo-step p { color:var(--mhl-muted); line-height:1.55; }
.mhl-demo-summary { border-top:2px solid var(--mhl-border); border-bottom:2px solid var(--mhl-border); margin:20px 0; padding:13px 0; }
.mhl-demo-summary-row { display:flex; justify-content:space-between; gap:15px; padding:5px 0; }
.mhl-demo-summary-total { display:flex; justify-content:space-between; gap:15px; font-size:20px; font-weight:900; border-top:1px solid var(--mhl-border); margin-top:8px; padding-top:12px; }
.mhl-demo-complete, .mhl-demo-finish { width:100%; }
.mhl-success-mark { width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--mhl-accent); color:#000; font-size:36px; font-weight:900; margin-bottom:16px; }

.mhl-demo-customer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0 12px; }
.mhl-demo-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.mhl-demo-field-wide { grid-column:1 / -1; }
.mhl-demo-field > span { color:var(--mhl-text); font-size:11px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.mhl-demo-field small { color:var(--mhl-muted); font-size:9px; font-weight:700; }
.mhl-store .mhl-demo-field input { -webkit-appearance:none !important; appearance:none !important; width:100% !important; min-width:0 !important; box-sizing:border-box !important; margin:0 !important; padding:11px 12px !important; border:1px solid var(--mhl-border) !important; border-radius:0 !important; outline:0 !important; background:var(--mhl-card-bg) !important; color:var(--mhl-text) !important; box-shadow:none !important; font:inherit !important; font-size:14px !important; line-height:1.2 !important; }
.mhl-store .mhl-demo-field input:focus { border-width:2px !important; padding:10px 11px !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--mhl-accent) 30%, transparent) !important; }
.mhl-demo-form-error { margin:10px 0 0; padding:10px 12px; border:1px solid #9d1c1c; background:#fff4f4; color:#7a1010; font-size:13px; font-weight:800; line-height:1.35; }
.mhl-demo-complete:disabled { opacity:.55; cursor:wait; }
.mhl-download-list { display:flex; flex-direction:column; gap:10px; margin:18px 0; }
.mhl-store .mhl-download-link { display:block !important; border:2px solid var(--mhl-border) !important; border-color:var(--mhl-border) !important; background:var(--mhl-btn-bg) !important; background-color:var(--mhl-btn-bg) !important; color:var(--mhl-btn-text) !important; padding:12px 14px !important; border-radius:var(--mhl-radius) !important; box-shadow:none !important; transform:none !important; text-decoration:none !important; font-size:12px !important; font-weight:900 !important; letter-spacing:.04em !important; text-transform:uppercase !important; }
.mhl-store .mhl-download-link:hover, .mhl-store .mhl-download-link:focus, .mhl-store .mhl-download-link:active { border-color:var(--mhl-border) !important; background:var(--mhl-btn-hover-bg) !important; background-color:var(--mhl-btn-hover-bg) !important; color:var(--mhl-btn-hover-text) !important; box-shadow:none !important; transform:none !important; text-decoration:none !important; }
.mhl-store .mhl-download-all-link { display:block !important; margin:14px 0 18px !important; border:2px solid var(--mhl-border) !important; border-color:var(--mhl-border) !important; background:var(--mhl-accent) !important; background-color:var(--mhl-accent) !important; color:var(--mhl-cart-badge-text) !important; padding:13px 14px !important; border-radius:var(--mhl-radius) !important; box-shadow:none !important; transform:none !important; text-align:center !important; text-decoration:none !important; font-size:12px !important; font-weight:900 !important; letter-spacing:.05em !important; text-transform:uppercase !important; }
.mhl-store .mhl-download-all-link:hover, .mhl-store .mhl-download-all-link:focus, .mhl-store .mhl-download-all-link:active { border-color:var(--mhl-border) !important; background:var(--mhl-btn-hover-bg) !important; background-color:var(--mhl-btn-hover-bg) !important; color:var(--mhl-btn-hover-text) !important; box-shadow:none !important; transform:none !important; text-decoration:none !important; }
.mhl-store .mhl-download-all-link[hidden] { display:none !important; }
body.mhl-cart-open { overflow:hidden; }



/* v0.3.49 — desktop storefront geometry and breathing-room cleanup.
   Use a wrapping flex row so incomplete final rows remain centered while
   four cards still fit cleanly across ordinary desktop Elementor widths. */
@media (min-width: 961px) {
    .mhl-track-grid,
    .mhl-collection-track-list {
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-start;
        align-items:stretch;
        gap:20px;
    }
    .mhl-track-grid > .mhl-track-card,
    .mhl-collection-track-list > .mhl-track-card {
        flex:0 1 calc((100% - 60px) / 4);
        width:calc((100% - 60px) / 4);
        max-width:var(--mhl-card-max-width);
        min-width:210px;
    }
    .mhl-track-title {
        min-height:3.55em;
    }
    .mhl-release-year {
        display:block;
        margin:4px 0 0;
        min-height:1em;
    }
    .mhl-track-purchase {
        margin-top:auto;
    }
}

/* v0.3.15 — compact, width-aware card layout for phones/tablets. */
@media (max-width: 960px) {
    .mhl-track-grid {
        grid-template-columns:repeat(auto-fit, var(--mhl-responsive-card-width));
        justify-content:center;
        gap:var(--mhl-responsive-gap);
    }
    .mhl-track-body { padding:var(--mhl-mobile-body-padding); }
    .mhl-track-title {
        margin-bottom:var(--mhl-mobile-title-margin);
        font-size:var(--mhl-mobile-title-size);
        line-height:1.16;
    }
    .mhl-preview-controls { gap:var(--mhl-mobile-preview-gap); }
    .mhl-store .mhl-preview-button { font-size:var(--mhl-mobile-preview-font) !important; }
    .mhl-preview-icon {
        flex-basis:var(--mhl-mobile-preview-control);
        width:var(--mhl-mobile-preview-control);
        height:var(--mhl-mobile-preview-control);
    }
    .mhl-preview-label {
        min-height:var(--mhl-mobile-preview-control);
        padding-left:var(--mhl-mobile-preview-pad-left);
        padding-right:var(--mhl-mobile-preview-pad-right);
    }
    .mhl-preview-icon::before {
        left:calc(50% - 3px);
        top:calc(50% - 6px);
        border-top-width:6px;
        border-bottom-width:6px;
        border-left-width:8px;
    }
    .mhl-preview-button[aria-pressed="true"] .mhl-preview-icon::before { left:calc(50% - 5px); top:calc(50% - 6px); }
    .mhl-preview-button[aria-pressed="true"] .mhl-preview-icon::after { left:calc(50% + 2px); top:calc(50% - 6px); }
    .mhl-preview-time { font-size:var(--mhl-mobile-time-size); }
    .mhl-preview-progress-shell {
        margin:var(--mhl-mobile-progress-top) 0 var(--mhl-mobile-progress-bottom);
    }
    .mhl-track-purchase {
        gap:var(--mhl-mobile-purchase-gap);
        padding-top:var(--mhl-mobile-purchase-top);
    }
    .mhl-track-price { font-size:var(--mhl-mobile-price-size); }
    .mhl-store .mhl-add-cart {
        padding:var(--mhl-mobile-button-pad-y) var(--mhl-mobile-button-pad-x) !important;
        font-size:var(--mhl-mobile-button-size) !important;
    }
    .mhl-collection-label {
        margin-bottom:var(--mhl-mobile-meta-margin);
        font-size:var(--mhl-mobile-meta-size);
    }
    .mhl-collection-count, .mhl-view-label { font-size:var(--mhl-mobile-meta-size); }
    .mhl-collection-count { padding-top:var(--mhl-mobile-meta-pad); }
    .mhl-view-label { padding:var(--mhl-mobile-button-pad-y) var(--mhl-mobile-button-pad-x); }
}

@media (max-width: 560px) {
    .mhl-store { padding:18px 16px 36px; }
    .mhl-store-toolbar { align-items:flex-start; flex-direction:row; gap:10px; }
    .mhl-store-heading { flex:1 1 auto; min-width:0; }
    .mhl-store-heading h2 { font-size:min(var(--mhl-store-title-size,42px), 8vw); }
    .mhl-store-heading p { margin-top:8px; }
    .mhl-store .mhl-cart-toggle { flex:0 0 auto; width:auto !important; justify-content:flex-end !important; gap:6px !important; padding:7px 8px !important; font-size:10px !important; letter-spacing:.02em !important; }
    .mhl-cart-count { min-width:21px; height:21px; padding:0 6px; }
    .mhl-cart-total { font-size:10px; }
    .mhl-track-title { min-height:auto; }
    .mhl-demo-modal-card { padding:28px 22px; }
    .mhl-demo-customer-grid { grid-template-columns:1fr; }
    .mhl-demo-field-wide { grid-column:auto; }
}

/* v0.3 Collections, search and collection browsing */
.mhl-search-area { position:relative; max-width:560px; margin:0 0 28px; z-index:20; }
.mhl-store .mhl-store-search { -webkit-appearance:none !important; appearance:none !important; display:block !important; width:100% !important; margin:0 !important; padding:11px 14px !important; border:2px solid var(--mhl-border) !important; border-radius:var(--mhl-radius) !important; background:var(--mhl-search-bar-bg,var(--mhl-card-bg)) !important; color:var(--mhl-search-bar-text,var(--mhl-text)) !important; box-shadow:none !important; font:inherit !important; font-size:14px !important; line-height:1.2 !important; }
.mhl-store .mhl-store-search::-webkit-search-cancel-button {
    -webkit-appearance:none; appearance:none;
    width:16px; height:16px; margin-left:10px; cursor:pointer;
    background:var(--mhl-search-clear-color,var(--mhl-search-bar-text));
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.5 3.5 2 8 6.5 12.5 2 14 3.5 9.5 8l4.5 4.5-1.5 1.5L8 9.5 3.5 14 2 12.5 6.5 8z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.5 3.5 2 8 6.5 12.5 2 14 3.5 9.5 8l4.5 4.5-1.5 1.5L8 9.5 3.5 14 2 12.5 6.5 8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mhl-store .mhl-store-search::-webkit-search-cancel-button:hover { background:var(--mhl-accent); }
.mhl-store .mhl-store-search:focus { outline:3px solid var(--mhl-accent) !important; outline-offset:1px; }
.mhl-search-results { position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--mhl-search-results-bg,var(--mhl-card-bg)); color:var(--mhl-search-results-text,var(--mhl-text)); border:2px solid var(--mhl-border); box-shadow:0 12px 30px rgba(0,0,0,.16); max-height:380px; overflow:auto; }
.mhl-search-results[hidden] { display:none; }
.mhl-store .mhl-search-result { -webkit-appearance:none !important; appearance:none !important; width:100% !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:2px !important; margin:0 !important; padding:10px 12px !important; border:0 !important; border-bottom:1px solid var(--mhl-border) !important; border-radius:0 !important; background:var(--mhl-search-results-bg,var(--mhl-card-bg)) !important; color:var(--mhl-search-results-text,var(--mhl-text)) !important; box-shadow:none !important; text-align:left !important; cursor:pointer; }
.mhl-store .mhl-search-result:last-child { border-bottom:0 !important; }
.mhl-store .mhl-search-result:hover, .mhl-store .mhl-search-result:focus { background:var(--mhl-accent) !important; color:var(--mhl-btn-hover-text,#000) !important; transform:none !important; box-shadow:none !important; }
.mhl-search-result strong { font-size:13px; line-height:1.2; }
.mhl-search-result span, .mhl-search-empty { color:var(--mhl-search-results-text,var(--mhl-text)); opacity:.72; font-size:11px; }
.mhl-search-empty { padding:12px; }
.mhl-section-heading { display:flex; align-items:center; gap:12px; margin:28px 0 13px; }
.mhl-section-heading h3 { margin:0; color:var(--mhl-text); font-size:13px; font-weight:900; letter-spacing:.13em; }
.mhl-section-heading:after { content:""; flex:1; border-top:1px solid var(--mhl-border); opacity:.4; }
.mhl-collection-grid { margin-bottom:30px; }
.mhl-store .mhl-view-collection { -webkit-appearance:none !important; appearance:none !important; display:flex !important; flex-direction:column !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--mhl-text) !important; box-shadow:none !important; transform:none !important; text-decoration:none !important; text-align:left !important; cursor:pointer; }
.mhl-store .mhl-view-collection:hover, .mhl-store .mhl-view-collection:focus, .mhl-store .mhl-view-collection:active { background:transparent !important; color:var(--mhl-text) !important; box-shadow:none !important; transform:none !important; }
.mhl-view-collection > .mhl-track-artwork { display:block; width:100%; flex:none; }
.mhl-view-collection > .mhl-track-body { width:100%; }
.mhl-collection-label { display:block; margin:0 0 5px; color:var(--mhl-muted); font-size:10px; font-weight:900; letter-spacing:.12em; }
.mhl-collection-count { display:block; margin-top:auto; padding-top:6px; color:var(--mhl-muted); font-size:10px; font-weight:800; letter-spacing:.06em; }
.mhl-view-label { display:inline-block; padding:8px 9px; background:var(--mhl-btn-bg); color:var(--mhl-btn-text); border:2px solid var(--mhl-border); font-size:10px; font-weight:900; letter-spacing:.04em; }
.mhl-view-collection:hover .mhl-view-label, .mhl-view-collection:focus .mhl-view-label { background:var(--mhl-btn-hover-bg); color:var(--mhl-btn-hover-text); }
.mhl-release-year { display:inline-block; margin-left:6px; color:var(--mhl-muted); font-size:.67em; font-weight:700; letter-spacing:.02em; vertical-align:baseline; }
.mhl-track-number { display:inline-block; margin-right:7px; color:var(--mhl-muted); font-size:.72em; font-weight:700; }
.mhl-collection-view { padding-top:3px; }
.mhl-collection-view[hidden] { display:none; }
.mhl-store .mhl-back-store { -webkit-appearance:none !important; appearance:none !important; margin:0 0 20px !important; padding:8px 10px !important; border:2px solid var(--mhl-border) !important; border-radius:var(--mhl-radius) !important; background:var(--mhl-card-bg) !important; color:var(--mhl-text) !important; box-shadow:none !important; font:inherit !important; font-size:11px !important; font-weight:900 !important; cursor:pointer; }
.mhl-store .mhl-back-store:hover, .mhl-store .mhl-back-store:focus { background:var(--mhl-btn-hover-bg) !important; color:var(--mhl-btn-hover-text) !important; transform:none !important; box-shadow:none !important; }
.mhl-collection-hero { display:grid; grid-template-columns:minmax(180px,260px) minmax(0,1fr); gap:28px; align-items:center; padding-bottom:26px; border-bottom:2px solid var(--mhl-border); margin-bottom:26px; }
.mhl-collection-hero > img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border:2px solid var(--mhl-border); }
.mhl-collection-kicker { color:var(--mhl-muted); font-size:11px; font-weight:900; letter-spacing:.13em; }
.mhl-collection-hero h2 { margin:6px 0 18px; color:var(--mhl-text); font-size:clamp(28px,4vw,52px); line-height:1; font-weight:900; text-transform:uppercase; }
.mhl-collection-buyline { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.mhl-collection-buyline > strong { font-size:24px; }
.mhl-collection-buyline > span { color:var(--mhl-muted); font-size:12px; }
.mhl-store .mhl-add-collection { -webkit-appearance:none !important; appearance:none !important; margin:0 !important; padding:10px 13px !important; border:2px solid var(--mhl-border) !important; border-radius:var(--mhl-radius) !important; background:var(--mhl-btn-bg) !important; color:var(--mhl-btn-text) !important; box-shadow:none !important; transform:none !important; font:inherit !important; font-size:11px !important; font-weight:900 !important; cursor:pointer; }
.mhl-store .mhl-add-collection:hover, .mhl-store .mhl-add-collection:focus { background:var(--mhl-btn-hover-bg) !important; color:var(--mhl-btn-hover-text) !important; transform:none !important; box-shadow:none !important; }
.mhl-store .mhl-add-collection.is-in-cart { background:var(--mhl-accent) !important; color:var(--mhl-btn-hover-text,#000) !important; }
.mhl-collection-track-list { display:grid; grid-template-columns:repeat(var(--mhl-columns),minmax(0,var(--mhl-card-max-width))); justify-content:start; gap:20px; }
.mhl-store .mhl-add-cart.is-in-collection, .mhl-store .mhl-add-cart.is-in-collection:hover { opacity:.58 !important; cursor:not-allowed !important; background:var(--mhl-muted) !important; color:#fff !important; }
.mhl-search-hit { animation:mhlSearchFlash 3s ease-in-out; }
@keyframes mhlSearchFlash {
    0%, 16%, 32%, 48%, 64%, 80% { box-shadow:inset 0 0 0 4px var(--mhl-accent); }
    8%, 24%, 40%, 56%, 72%, 88%, 100% { box-shadow:inset 0 0 0 0 transparent; }
}
.mhl-cart-item-meta { margin-bottom:3px; color:var(--mhl-muted); font-size:9px; font-weight:900; letter-spacing:.1em; }
.mhl-download-section { display:flex; flex-direction:column; gap:8px; margin:14px 0 22px; padding-top:8px; border-top:1px solid var(--mhl-border); }
.mhl-download-section h4 { margin:0 0 3px; color:var(--mhl-text); font-size:12px; font-weight:900; letter-spacing:.08em; }
.mhl-store .mhl-download-collection-zip { display:block !important; margin-top:5px !important; padding:12px 14px !important; border:2px solid var(--mhl-border) !important; background:var(--mhl-accent) !important; color:var(--mhl-btn-hover-text,#000) !important; text-decoration:none !important; font-size:11px !important; font-weight:900 !important; text-align:center !important; }
.mhl-store .mhl-download-collection-zip:hover, .mhl-store .mhl-download-collection-zip:focus { background:var(--mhl-btn-hover-bg) !important; color:var(--mhl-btn-hover-text) !important; box-shadow:none !important; transform:none !important; }

@media (max-width:960px){ .mhl-collection-track-list{grid-template-columns:repeat(auto-fit,var(--mhl-responsive-card-width));justify-content:center;gap:var(--mhl-responsive-gap);} .mhl-collection-hero{grid-template-columns:170px minmax(0,1fr);} }
@media (max-width:560px){ .mhl-search-area{max-width:none;} .mhl-collection-hero{grid-template-columns:1fr;align-items:start;} .mhl-collection-hero>img{max-width:260px;} }
.mhl-collection-card .mhl-track-title { display:block; }

/* v0.3.17 — runtime responsive fallback. The JS adds this class from the
   actual storefront container width so mobile scaling does not depend solely
   on the page/theme viewport media-query environment. */
.mhl-store.mhl-mobile-layout .mhl-track-grid,
.mhl-store.mhl-mobile-layout .mhl-collection-track-list {
    grid-template-columns:repeat(auto-fit, var(--mhl-responsive-card-width)) !important;
    justify-content:center !important;
    gap:var(--mhl-responsive-gap) !important;
}
.mhl-store.mhl-mobile-layout .mhl-track-card {
    width:var(--mhl-responsive-card-width) !important;
    max-width:var(--mhl-responsive-card-width) !important;
    justify-self:center;
}
.mhl-store.mhl-mobile-layout .mhl-track-body { padding:var(--mhl-mobile-body-padding); }
.mhl-store.mhl-mobile-layout .mhl-track-title { margin-bottom:var(--mhl-mobile-title-margin); font-size:var(--mhl-mobile-title-size); line-height:1.16; }
.mhl-store.mhl-mobile-layout .mhl-preview-controls { gap:var(--mhl-mobile-preview-gap); }
.mhl-store.mhl-mobile-layout .mhl-preview-button { font-size:var(--mhl-mobile-preview-font) !important; }
.mhl-store.mhl-mobile-layout .mhl-preview-icon { flex-basis:var(--mhl-mobile-preview-control); width:var(--mhl-mobile-preview-control); height:var(--mhl-mobile-preview-control); }
.mhl-store.mhl-mobile-layout .mhl-preview-label { min-height:var(--mhl-mobile-preview-control); padding-left:var(--mhl-mobile-preview-pad-left); padding-right:var(--mhl-mobile-preview-pad-right); }
.mhl-store.mhl-mobile-layout .mhl-preview-time { font-size:var(--mhl-mobile-time-size); }
.mhl-store.mhl-mobile-layout .mhl-preview-progress-shell { margin:var(--mhl-mobile-progress-top) 0 var(--mhl-mobile-progress-bottom); }
.mhl-store.mhl-mobile-layout .mhl-track-purchase { gap:var(--mhl-mobile-purchase-gap); padding-top:var(--mhl-mobile-purchase-top); }
.mhl-store.mhl-mobile-layout .mhl-track-price { font-size:var(--mhl-mobile-price-size); }
.mhl-store.mhl-mobile-layout .mhl-add-cart { padding:var(--mhl-mobile-button-pad-y) var(--mhl-mobile-button-pad-x) !important; font-size:var(--mhl-mobile-button-size) !important; }
.mhl-store.mhl-mobile-layout .mhl-collection-label { margin-bottom:var(--mhl-mobile-meta-margin); font-size:var(--mhl-mobile-meta-size); }
.mhl-store.mhl-mobile-layout .mhl-collection-count,
.mhl-store.mhl-mobile-layout .mhl-view-label { font-size:var(--mhl-mobile-meta-size); }
.mhl-store.mhl-mobile-layout .mhl-collection-count { padding-top:var(--mhl-mobile-meta-pad); }
.mhl-store.mhl-mobile-layout .mhl-view-label { padding:var(--mhl-mobile-button-pad-y) var(--mhl-mobile-button-pad-x); }


/* v0.3.22 — multi-format availability */
.mhl-format-badges{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 2px;align-items:center}
.mhl-format-badges span{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--mhl-border);padding:2px 6px;font-size:9px;line-height:1.15;font-weight:700;letter-spacing:.08em;color:var(--mhl-format-badge-text,var(--mhl-muted));background:var(--mhl-format-badge-bg,transparent)}
.mhl-collection-card .mhl-format-badges{margin:5px 0 0}
.mhl-download-format-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0}
.mhl-download-format-title{display:block;min-width:150px;font-weight:700;font-size:12px;line-height:1.25}
.mhl-download-format-row .mhl-download-link{width:auto;min-width:64px;text-align:center;margin:0;padding:8px 10px}
@media(max-width:700px){.mhl-download-format-title{min-width:100%;}.mhl-format-badges span{font-size:8px;padding:2px 5px}}

/* v0.3.29 checkout guidance */
.mhl-store .mhl-demo-format-note{margin:10px 0 12px;color:var(--mhl-muted);font-size:12px;line-height:1.4;}

/* Retro Pixel visual style. Saved per skin; not tied to a specific skin id. */
.mhl-store.mhl-style-retro-pixel {
    font-family:var(--mhl-ui-font,"Lucida Console",Monaco,"Courier New",monospace);
    padding:30px 32px 56px;
    border:2px solid var(--mhl-border);
    box-shadow:none;
}
.mhl-store.mhl-style-retro-pixel .mhl-store-toolbar {
    align-items:center;
    padding:8px 0 24px;
    margin-bottom:24px;
    border-bottom:2px solid var(--mhl-border);
}
.mhl-store.mhl-style-retro-pixel .mhl-store-heading h2 {
    font-family:inherit;
    font-size:var(--mhl-store-title-size,42px);
    line-height:1.05;
    letter-spacing:.035em;
    text-shadow:3px 3px 0 #020914;
}
.mhl-store.mhl-style-retro-pixel .mhl-store-heading p {
    margin-top:12px;
    font-family:inherit;
    font-size:13px;
}
.mhl-store.mhl-style-retro-pixel .mhl-cart-toggle {
    border:2px solid var(--mhl-cart-border) !important;
    border-radius:0 !important;
    padding:12px 14px !important;
    box-shadow:4px 4px 0 #020914 !important;
}
.mhl-store.mhl-style-retro-pixel .mhl-cart-count { border-radius:0; }
.mhl-store.mhl-style-retro-pixel .mhl-search-area { margin:0 0 30px;max-width:680px; }
.mhl-store.mhl-style-retro-pixel .mhl-store-search {
    font-family:inherit !important;
    background:var(--mhl-search-bar-bg,var(--mhl-card-bg)) !important;
    color:var(--mhl-search-bar-text,var(--mhl-text)) !important;
    border:2px solid var(--mhl-border) !important;
    border-radius:0 !important;
    padding:14px 16px !important;
    box-shadow:3px 3px 0 #020914 !important;
}
.mhl-store.mhl-style-retro-pixel .mhl-store-search:focus { border-color:var(--mhl-accent) !important;box-shadow:3px 3px 0 #020914 !important; }
.mhl-store.mhl-style-retro-pixel .mhl-store-search::placeholder { color:var(--mhl-search-bar-text,var(--mhl-muted));opacity:.82; }
.mhl-store.mhl-style-retro-pixel .mhl-section-heading { margin:28px 0 18px; }
.mhl-store.mhl-style-retro-pixel .mhl-section-heading h3 { font-family:inherit;font-size:14px;letter-spacing:.08em;color:var(--mhl-accent); }
.mhl-store.mhl-style-retro-pixel .mhl-section-heading h3:after { background:var(--mhl-border); }
.mhl-store.mhl-style-retro-pixel .mhl-track-card {
    border:2px solid var(--mhl-border) !important;
    border-radius:0 !important;
    box-shadow:4px 4px 0 #020914;
    overflow:hidden;
}
.mhl-store.mhl-style-retro-pixel .mhl-track-card:hover { border-color:var(--mhl-accent) !important; }
.mhl-store.mhl-style-retro-pixel .mhl-track-artwork { border-bottom:2px solid var(--mhl-border); }
.mhl-store.mhl-style-retro-pixel .mhl-track-body { padding:13px; }
.mhl-store.mhl-style-retro-pixel .mhl-track-title { font-family:inherit;font-size:12px;line-height:1.45;letter-spacing:.02em; }
.mhl-store.mhl-style-retro-pixel .mhl-release-year,
.mhl-store.mhl-style-retro-pixel .mhl-preview-time,
.mhl-store.mhl-style-retro-pixel .mhl-format-badges,
.mhl-store.mhl-style-retro-pixel .mhl-track-price,
.mhl-store.mhl-style-retro-pixel .mhl-preview-label { font-family:inherit; }
.mhl-store.mhl-style-retro-pixel .mhl-preview-label { font-size:9px;letter-spacing:.03em; }
.mhl-store.mhl-style-retro-pixel .mhl-preview-icon { border-color:var(--mhl-accent);border-radius:0;box-shadow:2px 2px 0 #020914; }
.mhl-store.mhl-style-retro-pixel .mhl-preview-progress-track { border-radius:0;outline:1px solid #344b62; }
.mhl-store.mhl-style-retro-pixel .mhl-preview-playhead { box-shadow:2px 2px 0 #020914; }
.mhl-store.mhl-style-retro-pixel .mhl-format-badges span { border:1px solid var(--mhl-border);background:var(--mhl-format-badge-bg,#08111f);color:var(--mhl-format-badge-text,#fff);border-radius:0; }
.mhl-store.mhl-style-retro-pixel .mhl-track-price { color:var(--mhl-accent);font-size:17px; }
.mhl-store.mhl-style-retro-pixel .mhl-add-cart,
.mhl-store.mhl-style-retro-pixel .mhl-demo-checkout,
.mhl-store.mhl-style-retro-pixel .mhl-demo-complete,
.mhl-store.mhl-style-retro-pixel .mhl-demo-finish {
    font-family:inherit !important;
    font-size:9px !important;
    border:2px solid var(--mhl-accent) !important;
    border-radius:0 !important;
    box-shadow:3px 3px 0 #020914 !important;
}
.mhl-store.mhl-style-retro-pixel .mhl-add-cart:hover,
.mhl-store.mhl-style-retro-pixel .mhl-add-cart:focus-visible { transform:translate(2px,2px) !important;box-shadow:1px 1px 0 #020914 !important; }
.mhl-store.mhl-style-retro-pixel .mhl-empty-store { border-color:var(--mhl-border);background:#08111f;color:var(--mhl-muted); }
.mhl-store.mhl-style-retro-pixel .mhl-cart-drawer,
.mhl-store.mhl-style-retro-pixel .mhl-demo-modal-card { font-family:inherit;background:var(--mhl-store-bg);box-shadow:-6px 0 0 #020914; }
.mhl-store.mhl-style-retro-pixel .mhl-cart-drawer h3,
.mhl-store.mhl-style-retro-pixel .mhl-demo-step h3 { font-family:inherit; }
@media (max-width:960px) {
    .mhl-store.mhl-style-retro-pixel { padding:20px 16px 40px; }
    .mhl-store.mhl-style-retro-pixel .mhl-store-toolbar { align-items:flex-start;gap:16px; }
    .mhl-store.mhl-style-retro-pixel .mhl-store-heading h2 { font-size:var(--mhl-store-title-size,42px); }
}
@media (max-width:560px) {
    .mhl-store.mhl-style-retro-pixel .mhl-store-toolbar { flex-direction:column; }
    .mhl-store.mhl-style-retro-pixel .mhl-cart-toggle { align-self:flex-end; }
}

/* v0.3.54 — per-skin custom UI fonts */
.mhl-store.mhl-has-custom-font,
.mhl-store.mhl-has-custom-font .mhl-store-heading h2,
.mhl-store.mhl-has-custom-font .mhl-store-heading p,
.mhl-store.mhl-has-custom-font .mhl-section-heading h3,
.mhl-store.mhl-has-custom-font .mhl-track-title,
.mhl-store.mhl-has-custom-font .mhl-release-year,
.mhl-store.mhl-has-custom-font .mhl-preview-label,
.mhl-store.mhl-has-custom-font .mhl-preview-time,
.mhl-store.mhl-has-custom-font .mhl-format-badges,
.mhl-store.mhl-has-custom-font .mhl-track-price,
.mhl-store.mhl-has-custom-font .mhl-cart-drawer,
.mhl-store.mhl-has-custom-font .mhl-demo-modal-card,
.mhl-store.mhl-has-custom-font button,
.mhl-store.mhl-has-custom-font input,
.mhl-store.mhl-has-custom-font select,
.mhl-store.mhl-has-custom-font textarea {
    font-family:var(--mhl-ui-font,inherit) !important;
}


/* v0.3.57 — auto-fit typography uses an independent shared scale for each UI role. */
.mhl-store.mhl-has-custom-font .mhl-add-cart,
.mhl-store.mhl-has-custom-font .mhl-cart-toggle,
.mhl-store.mhl-has-custom-font .mhl-preview-label,
.mhl-store.mhl-has-custom-font .mhl-format-badges span,
.mhl-store.mhl-has-custom-font .mhl-track-price,
.mhl-store.mhl-has-custom-font .mhl-preview-time,
.mhl-store.mhl-has-custom-font .mhl-section-heading h3 {
    white-space:nowrap;
}


/* v0.3.57 — keep title hierarchy readable with display/pixel fonts.
   The JS chooses one shared title size from 24–16px for the entire catalog. */
.mhl-store.mhl-has-custom-font .mhl-track-title {
    line-height:1.28 !important;
    min-height:2.56em;
    overflow-wrap:normal;
    word-break:normal;
}
.mhl-store.mhl-has-custom-font .mhl-add-cart {
    white-space:nowrap;
}


/* v0.3.58 — cart drawer gets a larger independent typography hierarchy.
   JS still group-fits each repeated role when a custom skin font is active. */
.mhl-store.mhl-has-custom-font .mhl-cart-item-title {
    line-height:1.22 !important;
}
.mhl-store.mhl-has-custom-font .mhl-cart-item-price {
    line-height:1.2 !important;
}
.mhl-store.mhl-has-custom-font .mhl-cart-remove,
.mhl-store.mhl-has-custom-font .mhl-cart-eyebrow {
    white-space:nowrap;
}

/* Generic split-color headline treatment. Colors are saved with the active skin. */
.mhl-store.mhl-headline-mode-first-letter .mhl-store-heading h2 .mhl-headline-first{color:var(--mhl-headline-first,var(--mhl-accent));}
.mhl-store.mhl-headline-mode-first-letter .mhl-store-heading h2 .mhl-headline-rest{color:var(--mhl-headline-rest,var(--mhl-text));}


/* v0.3.65 — keep preview label and time readout in separate flex regions.
   Some wide display fonts caused flex shrinking to collapse the element boxes
   while their glyphs still overflowed, visually stacking PREVIEW and 0:00. */
.mhl-store .mhl-preview-controls {
    justify-content:flex-start;
}
.mhl-store .mhl-preview-button {
    flex:0 0 auto !important;
}
.mhl-store .mhl-preview-time {
    flex:0 0 auto;
    margin-left:auto;
    white-space:nowrap;
}
.mhl-store .mhl-preview-label {
    flex:0 0 auto;
    white-space:nowrap;
}


/* v0.3.67 — the timer must live inside the space left after the Preview button.
   Keep the button at its natural width, then give the timer only the remaining
   row width so the auto-fit code can actually detect overflow and shrink it. */
.mhl-store .mhl-preview-time {
    flex:1 1 0 !important;
    min-width:0 !important;
    width:auto !important;
    max-width:100% !important;
    overflow:hidden !important;
    margin-left:auto;
    text-align:right;
    white-space:nowrap;
}

/* v0.3.71 — mobile storefront containment + reliable card-scale application.
   Keep the full storefront inside the phone viewport so both outer borders are
   visible, and let the saved Mobile Card Scale drive the complete Retro Pixel
   card geometry instead of being overridden by fixed skin values. */
@media (max-width:960px) {
    .mhl-store,
    .mhl-store.mhl-mobile-layout {
        width:calc(100% - 12px) !important;
        max-width:calc(100% - 12px) !important;
        min-width:0 !important;
        margin-left:auto !important;
        margin-right:auto !important;
        overflow-x:clip;
    }
    .mhl-store .mhl-store-toolbar,
    .mhl-store .mhl-search-area,
    .mhl-store .mhl-track-grid,
    .mhl-store .mhl-collection-track-list,
    .mhl-store .mhl-collection-views {
        min-width:0 !important;
        max-width:100% !important;
    }
    .mhl-store.mhl-mobile-layout .mhl-track-grid,
    .mhl-store.mhl-mobile-layout .mhl-collection-track-list {
        width:100% !important;
        max-width:100% !important;
        overflow:visible !important;
    }
    .mhl-store.mhl-mobile-layout .mhl-track-card {
        flex:0 0 var(--mhl-responsive-card-width) !important;
        width:var(--mhl-responsive-card-width) !important;
        min-width:0 !important;
        max-width:var(--mhl-responsive-card-width) !important;
    }

    /* Retro Pixel used fixed values after the generic mobile rules, which made
       the scale slider look ineffective. On compact layouts, use the shared
       scale variables for the entire card instead. */
    .mhl-store.mhl-style-retro-pixel .mhl-track-body {
        padding:var(--mhl-mobile-body-padding) !important;
    }
    .mhl-store.mhl-style-retro-pixel .mhl-track-title {
        margin-bottom:var(--mhl-mobile-title-margin) !important;
        font-size:var(--mhl-mobile-title-size) !important;
    }
    .mhl-store.mhl-style-retro-pixel .mhl-preview-controls {
        gap:var(--mhl-mobile-preview-gap) !important;
    }
    .mhl-store.mhl-style-retro-pixel .mhl-preview-label {
        font-size:var(--mhl-mobile-preview-font) !important;
    }
    .mhl-store.mhl-style-retro-pixel .mhl-preview-time {
        font-size:var(--mhl-mobile-time-size) !important;
    }
    .mhl-store.mhl-style-retro-pixel .mhl-track-price {
        font-size:var(--mhl-mobile-price-size) !important;
    }
    .mhl-store.mhl-style-retro-pixel .mhl-add-cart {
        padding:var(--mhl-mobile-button-pad-y) var(--mhl-mobile-button-pad-x) !important;
        font-size:var(--mhl-mobile-button-size) !important;
    }
    .mhl-store.mhl-style-retro-pixel .mhl-format-badges span {
        font-size:var(--mhl-mobile-meta-size) !important;
        padding:calc(var(--mhl-mobile-meta-pad) * .34) calc(var(--mhl-mobile-meta-pad) * .84) !important;
    }
}

@media (max-width:560px) {
    .mhl-store,
    .mhl-store.mhl-style-retro-pixel,
    .mhl-store.mhl-mobile-layout {
        padding-left:14px !important;
        padding-right:14px !important;
    }
}



/* v0.3.73 — valid phone rules. v0.3.72's final mobile block was accidentally
   written with literal \\n characters, so browsers ignored it. */
@media (max-width:560px) {
    .mhl-store,
    .mhl-store.mhl-mobile-layout,
    .mhl-store.mhl-style-retro-pixel {
        width:calc(100vw - 10px) !important;
        width:calc(100dvw - 10px) !important;
        max-width:calc(100vw - 10px) !important;
        max-width:calc(100dvw - 10px) !important;
        min-width:0 !important;
        position:relative !important;
        left:50% !important;
        transform:translateX(-50%) !important;
        margin-left:0 !important;
        margin-right:0 !important;
        overflow-x:hidden !important;
    }

    .mhl-store.mhl-mobile-layout .mhl-track-grid,
    .mhl-store.mhl-mobile-layout .mhl-collection-track-list {
        display:grid !important;
        grid-template-columns:repeat(auto-fit,var(--mhl-responsive-card-width)) !important;
        justify-content:center !important;
        justify-items:center !important;
        width:100% !important;
        max-width:100% !important;
        gap:var(--mhl-responsive-gap) !important;
    }
    .mhl-store.mhl-mobile-layout .mhl-track-card {
        width:var(--mhl-responsive-card-width) !important;
        min-width:var(--mhl-responsive-card-width) !important;
        max-width:var(--mhl-responsive-card-width) !important;
        flex-basis:var(--mhl-responsive-card-width) !important;
    }

    .mhl-store.mhl-mobile-layout .mhl-track-title {font-size:var(--mhl-mobile-title-size) !important;}
    .mhl-store.mhl-mobile-layout .mhl-preview-label {font-size:var(--mhl-mobile-preview-font) !important;}
    .mhl-store.mhl-mobile-layout .mhl-preview-time {font-size:var(--mhl-mobile-time-size) !important;}
    .mhl-store.mhl-mobile-layout .mhl-track-price {font-size:var(--mhl-mobile-price-size) !important;}
    .mhl-store.mhl-mobile-layout .mhl-format-badges span {font-size:var(--mhl-mobile-meta-size) !important;}
    .mhl-store.mhl-mobile-layout .mhl-add-cart {font-size:var(--mhl-mobile-button-size) !important;}

    /* Headline size is independent of card scale, but capped for a phone viewport. */
    .mhl-store.mhl-style-retro-pixel .mhl-store-heading h2,
    .mhl-store.mhl-mobile-layout .mhl-store-heading h2 {
        font-size:min(var(--mhl-store-title-size,42px), 10vw) !important;
        line-height:1.05 !important;
    }

    /* Mobile search selection uses an inset flash only; it never paints outside
       the selected result/card and cannot create full-width horizontal artifacts. */
    .mhl-search-hit {
        outline:0 !important;
        overflow:hidden;
    }
}

/* v0.3.75 — compact retro store header/cart.
   Align the cart with the MUSIC STORE title rather than the combined
   title + intro block, and reduce the cart's visual bulk. */
.mhl-store.mhl-style-retro-pixel .mhl-store-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    column-gap:18px;
    row-gap:8px;
}

.mhl-store.mhl-style-retro-pixel .mhl-cart-toggle{
    align-self:start;
    margin-top:0 !important;
    gap:7px !important;
    padding:8px 10px !important;
    font-size:11px !important;
    line-height:1 !important;
}

.mhl-store.mhl-style-retro-pixel .mhl-cart-count{
    min-width:22px;
    height:22px;
    padding:0 6px;
    line-height:22px;
}

.mhl-store.mhl-style-retro-pixel .mhl-cart-total{
    font-size:11px;
    line-height:1;
}

@media (max-width:560px){
    .mhl-store.mhl-style-retro-pixel .mhl-store-toolbar{
        grid-template-columns:minmax(0,1fr) auto;
        align-items:start;
        gap:10px;
        padding-top:8px;
    }

    .mhl-store.mhl-style-retro-pixel .mhl-cart-toggle{
        gap:5px !important;
        padding:6px 7px !important;
        font-size:9px !important;
    }

    .mhl-store.mhl-style-retro-pixel .mhl-cart-count{
        min-width:19px;
        height:19px;
        padding:0 5px;
        line-height:19px;
    }

    .mhl-store.mhl-style-retro-pixel .mhl-cart-total{
        font-size:9px;
    }
}

/* v0.3.76 — normalize cart typography.
   CART, quantity, and total all use the exact same font size/weight/line-height. */
.mhl-store.mhl-style-retro-pixel .mhl-cart-toggle,
.mhl-store.mhl-style-retro-pixel .mhl-cart-toggle .mhl-cart-label,
.mhl-store.mhl-style-retro-pixel .mhl-cart-toggle .mhl-cart-count,
.mhl-store.mhl-style-retro-pixel .mhl-cart-toggle .mhl-cart-total{
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1 !important;
    letter-spacing:.02em !important;
}

.mhl-store.mhl-style-retro-pixel .mhl-cart-count{
    min-width:22px !important;
    height:22px !important;
    padding:0 6px !important;
}

@media (max-width:560px){
    .mhl-store.mhl-style-retro-pixel .mhl-cart-toggle,
    .mhl-store.mhl-style-retro-pixel .mhl-cart-toggle .mhl-cart-label,
    .mhl-store.mhl-style-retro-pixel .mhl-cart-toggle .mhl-cart-count,
    .mhl-store.mhl-style-retro-pixel .mhl-cart-toggle .mhl-cart-total{
        font-size:10px !important;
        font-weight:800 !important;
        line-height:1 !important;
    }

    .mhl-store.mhl-style-retro-pixel .mhl-cart-count{
        min-width:20px !important;
        height:20px !important;
        padding:0 5px !important;
    }
}

/* v0.3.99 — Pixel vinyl display. New baked-highlight record shell with uploadable center-label artwork. */
.mhl-track-artwork > .mhl-pixel-record { display:none; }
.mhl-store.mhl-record-mode .mhl-track-card[data-product-type="track"] .mhl-track-artwork {
    position:relative !important;
    overflow:hidden !important;
    background:transparent !important;
    border-bottom:0 !important;
}
.mhl-store.mhl-record-mode .mhl-track-card[data-product-type="track"] .mhl-track-artwork > .mhl-square-cover,
.mhl-store.mhl-record-mode .mhl-track-card[data-product-type="track"] .mhl-track-artwork > .mhl-artwork-placeholder { display:none !important; }
.mhl-store.mhl-record-mode .mhl-track-card[data-product-type="track"] .mhl-track-artwork > .mhl-pixel-record { display:block; }
.mhl-pixel-record, .mhl-thumb-design-demo {
    position:absolute;
    inset:0;
    pointer-events:none;
    background:transparent;
}
.mhl-vinyl-spin {
    position:absolute;
    width:91%;
    height:91%;
    left:4.5%;
    top:4.5%;
    background-image:url('../images/pixel-vinyl-disc-v2.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    transform-origin:center;
}
.mhl-vinyl-label {
    position:absolute;
    width:42%;
    height:42%;
    left:29%;
    top:29%;
    overflow:hidden;
    border-radius:50%;
    background:#0b0d11;
    box-shadow:0 0 0 1px rgba(230,230,230,.25);
}
.mhl-vinyl-label > .mhl-pixel-label-svg,
.mhl-vinyl-label > .mhl-manual-record-label {
    display:block;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    border:0 !important;
    border-radius:50% !important;
    box-shadow:none !important;
    transform:none !important;
}
.mhl-pixel-label-title {
    font-family:var(--mhl-ui-font,"Lucida Console",Monaco,monospace);
    font-weight:700;
    letter-spacing:0;
    text-rendering:geometricPrecision;
}
.mhl-blank-record-label { background:#111; }
.mhl-store.mhl-record-mode .mhl-track-card[data-product-type="track"].is-playing .mhl-vinyl-spin {
    animation:mhlPixelVinylSpin 2.8s linear infinite;
}
@keyframes mhlPixelVinylSpin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
/* Thumbnail Design demo reuses the exact record and label parts as the storefront. */
.mhl-thumb-design-demo {
    position:relative;
    inset:auto;
    width:min(360px,100%);
    aspect-ratio:1/1;
    overflow:hidden;
}
.mhl-thumb-design-demo .mhl-vinyl-spin { background-image:url('../images/pixel-vinyl-disc-v2.png'); }
@media (prefers-reduced-motion:reduce) {
    .mhl-store.mhl-record-mode .mhl-track-card[data-product-type="track"].is-playing .mhl-vinyl-spin { animation:none; }
}
.mhl-vinyl-spin { image-rendering:pixelated; }


/* v0.4.04 — Wyndell Site Core integration.
   Site Core owns the shared page panel/title; DTCMMS owns only the application UI inside it. */
.mhl-site-core-panel .mhl-store.mhl-site-core-inner,
.mhl-site-core-panel .mhl-store.mhl-site-core-inner.mhl-style-retro-pixel {
    width:100%;
    max-width:none;
    margin:0;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}
.mhl-site-core-panel .mhl-store-toolbar.mhl-site-core-toolbar,
.mhl-site-core-panel .mhl-store.mhl-style-retro-pixel .mhl-store-toolbar.mhl-site-core-toolbar {
    justify-content:flex-end;
    padding:0 0 20px;
    margin:0 0 24px;
    border-bottom:2px solid var(--mhl-border);
}
@media(max-width:700px){
    .mhl-site-core-panel .mhl-store-toolbar.mhl-site-core-toolbar,
    .mhl-site-core-panel .mhl-store.mhl-style-retro-pixel .mhl-store-toolbar.mhl-site-core-toolbar {
        flex-direction:row;
        align-items:center;
        justify-content:flex-end;
    }
}


/* v0.4.05 — preserve DTCMMS layout/typography while using Wyndell Site Core shell. */
.mhl-site-core-panel .mhl-store.mhl-site-core-inner .wl-page-title {
    font-family:var(--mhl-ui-font,"Lucida Console",Monaco,"Courier New",monospace) !important;
}
.mhl-site-core-panel .mhl-store-toolbar.mhl-site-core-toolbar .mhl-cart-toggle,
.mhl-site-core-panel .mhl-store.mhl-style-retro-pixel .mhl-store-toolbar.mhl-site-core-toolbar .mhl-cart-toggle {
    width:auto !important;
    max-width:max-content !important;
    flex:0 0 auto !important;
    align-self:flex-end !important;
}
@media (min-width:961px) {
    .mhl-site-core-panel .mhl-store.mhl-site-core-inner .mhl-track-grid,
    .mhl-site-core-panel .mhl-store.mhl-site-core-inner .mhl-collection-track-list {
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:flex-start !important;
        justify-items:initial !important;
        align-items:stretch !important;
    }
    .mhl-site-core-panel .mhl-store.mhl-site-core-inner .mhl-track-grid > .mhl-track-card,
    .mhl-site-core-panel .mhl-store.mhl-site-core-inner .mhl-collection-track-list > .mhl-track-card {
        justify-self:auto !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
}


/* v0.4.06 — search/cart alignment and cart drawer breathing room. */
.mhl-search-cart-row{display:flex;align-items:flex-start;gap:18px;margin:0 0 28px;}
.mhl-search-cart-row .mhl-search-area{flex:1 1 auto;max-width:none;margin:0;min-width:0;}
.mhl-search-cart-row .mhl-cart-toggle{flex:0 0 auto;width:auto!important;max-width:max-content!important;margin-left:auto!important;}
.mhl-cart-drawer{top:18px;height:calc(100vh - 18px);}
@media(max-width:560px){
  .mhl-search-cart-row{gap:10px;align-items:center;}
  .mhl-search-cart-row .mhl-cart-toggle{padding:7px 8px!important;font-size:10px!important;}
  .mhl-cart-drawer{top:10px;height:calc(100vh - 10px);}
}


/* v0.4.11 — Site Core mobile containment.
   The legacy standalone-store phone rule deliberately broke the store out to
   nearly 100vw. Once DTCMMS lives inside the shared Site Core panel, that
   breakout is wrong: it pushes the title, search/cart row and grid outside the
   panel and can fit multiple shrunken cards across. Keep the inner store
   contained and let the saved mobile card scale control one centered card. */
@media (max-width:560px) {
    .mhl-site-core-panel .mhl-store.mhl-site-core-inner,
    .mhl-site-core-panel .mhl-store.mhl-site-core-inner.mhl-style-retro-pixel,
    .mhl-site-core-panel .mhl-store.mhl-site-core-inner.mhl-mobile-layout {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        position:relative !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
        overflow-x:hidden !important;
        box-sizing:border-box !important;
    }

    .mhl-site-core-panel .mhl-store.mhl-site-core-inner .mhl-search-cart-row {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    .mhl-site-core-panel .mhl-store.mhl-site-core-inner .mhl-search-cart-row .mhl-search-area {
        min-width:0 !important;
        flex:1 1 0 !important;
    }

    .mhl-site-core-panel .mhl-store.mhl-site-core-inner.mhl-mobile-layout .mhl-track-grid,
    .mhl-site-core-panel .mhl-store.mhl-site-core-inner.mhl-mobile-layout .mhl-collection-track-list {
        /* v0.4.13: let the saved mobile scale determine how many cards fit.
           100% will usually remain one card wide; lower scales can naturally
           fit two cards when the available panel width allows it. */
        grid-template-columns:repeat(auto-fit,var(--mhl-responsive-card-width)) !important;
        justify-content:center !important;
        justify-items:center !important;
        gap:var(--mhl-responsive-gap) !important;
        width:100% !important;
        max-width:100% !important;
    }
}

/* v0.4.12 — responsive preview play/pause glyph.
   The old triangle used fixed 6/8/9px border geometry even when Mobile Card
   Scale shrank the control. These shapes are proportional to the icon box. */
.mhl-store .mhl-preview-icon::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:38% !important;
    height:46% !important;
    margin:0 !important;
    border:0 !important;
    background:var(--mhl-accent) !important;
    clip-path:polygon(0 0,100% 50%,0 100%) !important;
    transform:translate(-40%,-50%) !important;
}

.mhl-store .mhl-preview-icon::after{
    content:"" !important;
    display:none !important;
}

.mhl-store .mhl-preview-button[aria-pressed="true"] .mhl-preview-icon::before{
    display:block !important;
    left:29% !important;
    top:25% !important;
    width:17% !important;
    height:50% !important;
    border:0 !important;
    background:var(--mhl-accent) !important;
    clip-path:none !important;
    transform:none !important;
}

.mhl-store .mhl-preview-button[aria-pressed="true"] .mhl-preview-icon::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:54% !important;
    top:25% !important;
    width:17% !important;
    height:50% !important;
    border:0 !important;
    background:var(--mhl-accent) !important;
    transform:none !important;
}