/* Glue between the mock's styles (mk.css, generated from the mock) and the real page. Keep this file small:
   anything that is about LOOKS belongs in the mock + mk.css, this only maps the mock onto the store's own page and palette. */

/* the mock's page-level rules (body: height, padding for its player, background) landed on the wrapper: the real page owns those */
.mk { height: auto; padding-bottom: 0 !important; margin: 0; background: transparent; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none; text-align: left; line-height: 1.4; }

/* the mock's colors follow the store's palette (the dark theme has the same values, so it looks exactly like the mock) */
.mk {
  --bg: var(--palette-background, #0d0d0d);
  --panel: var(--palette-surface, #171717);
  --panel-2: color-mix(in srgb, var(--panel) 96.5%, var(--ink));
  --btn2: color-mix(in srgb, var(--panel) 93.5%, var(--ink));
  --btn2-hover: color-mix(in srgb, var(--panel) 88%, var(--ink));
  --line: var(--palette-border, #303030);
  --ink: var(--palette-text, #f4f4f4);
  --muted: var(--palette-muted, #a6a6a6);
  --accent: var(--palette-accent, #e42024);
  --accent-ink: var(--palette-accent-text, #ffffff);
  --font: var(--sans, "Instrument Sans", Arial, sans-serif);
}

/* list width = the editor's "List width" (default 1220, like the mock); the search bar sticks under the store header */
.mk .mk-catalog { max-width: calc(var(--catalog-widget-width, 1100px) + 120px) !important; }   /* the mock's 1220px = the editor's list width 1100 + the mock's 2 x 60px side padding */
.mk .mk-lbar { top: calc(var(--sf-ann-off, 0px) + var(--mk-stick, 0px)); }

/* old bundle counter under the list is retired (the bundle maker replaces it) */
html body #bundleHome, html body .bundle-bar { display: none !important; }

.sl-sec-title { margin: 0 0 14px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--palette-text, var(--ink)); }

/* the list section spans the page; the mock's own .mk-catalog centers it at its max width, exactly like the mock */
html body #beats.page-shell { width: 100%; max-width: none; padding-inline: 0; margin-inline: 0; }

/* the player bar stays hidden until something plays or is in the cart (the page adds .visible), then slides in */
html body .mk .mk-bar { transform: translateY(125%) !important; transition: transform .25s ease; }
html body .mk .mk-bar.visible { transform: none !important; }
body.mkp-on { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }   /* room for the bar, constant so the page never jumps when its waveform grows */
@media (max-width: 780px) { body.mkp-on { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }
.mk .mk-cartb { position: relative; }
.mk .mk-cartb .mk-badge { top: 2px; right: 0; }
@media (prefers-reduced-motion: reduce) { html body .mk .mk-bar { transition: none; } }

/* --mk-list-w (the list's width, from the editor's list width) is set by mk-list.js; the player's waveform and right-hand buttons follow it */

/* the old featured-track hero is gone from the home page: it stays only for the beat page, which reuses it. Hiding it by default also ends the flash it
   made while the page's settings were still loading */
html body:not(.beat-page-view) #beat-detail, html body:not(.beat-page-view) .brand-masthead { display: none !important; }

.sl-sec-title { font-size: 15px; margin: 0 0 16px; }

/* light themes: form controls and scrollbars follow the theme (mk-list.js adds .mk-light when the page color is light) */
.mk.mk-light { color-scheme: light; }

/* bundle track list (featured product / bundle page): the mock's own list, lined up with the buy button's right edge like the description */
.pb-player .mk-btk { max-width: none; margin: 0; padding: 0; }

/* the store's product sections (assets/sf-cards.js): in the side-by-side layouts they take the whole row */
body.storefront-compact .sf-cards, body.storefront-compact .sf-fpsec, body.storefront-compact .sf-pack { grid-column: 1 / -1; }