/* SWEATS storefront extras: hero slideshow, header controls, product sections. */
.sf-hidden { display: none !important; }

/* ---------------- header ---------------- */
.sf-currency { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border-radius: 999px; color: var(--ink); font: 800 .72rem var(--sans); letter-spacing: .04em; white-space: nowrap; cursor: default; }
.sf-currency[hidden] { display: none; }
.sf-currency b { font-weight: 800; }
.sf-flag { position: relative; display: block; width: 21px; height: 14px; border-radius: 3px; overflow: hidden; background: repeating-linear-gradient(180deg, #d22b3a 0 1.08px, #fff 1.08px 2.16px); box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
.sf-flag::after { content: ''; position: absolute; left: 0; top: 0; width: 9px; height: 7.6px; background: #2b3f7a; }
.sf-currency.no-flag .sf-flag { display: none; }
.sf-account-icon { width: 42px; min-height: 42px; height: 42px; padding: 0; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); }
body .sf-account-icon, body.theme-beast-mode .sf-account-icon { border: 0; background: transparent; color: var(--ink); }
body .sf-account-icon:hover, body .sf-account-icon:focus-visible, body.theme-beast-mode .sf-account-icon:hover { border: 0; background: transparent; color: var(--red); }
.sf-account-icon svg { display: block; }
.sf-account-icon[hidden] { display: none; }
@media (max-width: 980px) { .sf-currency { display: none; } .sf-account-icon { width: 35px; height: 35px; min-height: 35px; } }

@media (min-width: 981px) {
  body.hdr-logo-center .header-inner { grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav brand actions"; }
  body.hdr-logo-center .main-nav { grid-area: nav; justify-self: start; }
  body.hdr-logo-center .brand { grid-area: brand; justify-self: center; }
  body.hdr-logo-center .brand-lockup { align-items: center; text-align: center; }
  body.hdr-logo-center .header-actions { grid-area: actions; }
}
body.hdr-not-sticky .site-header { position: relative; }
body.hdr-overlay.hdr-not-sticky .site-header { position: absolute; left: 0; right: 0; }

/* Menu laid over the hero */
body.hdr-overlay .site-header { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; transition: background-color .22s ease, border-color .22s ease; }
body.hdr-overlay.hdr-not-sticky .site-header { position: absolute; }
body.hdr-overlay.hdr-scrolled .site-header { background: color-mix(in srgb, var(--surface) 62%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom-color: color-mix(in srgb, var(--ink, #fff) 8%, transparent); }
body.hdr-overlay:not(.hdr-scrolled) .site-header :is(.main-nav > a, .icon-button, .sf-currency, .sf-account-icon, .brand small, .storefront-owner-menu > summary > span:last-child) { color: var(--hdr-fg, #fff); }
body.hdr-overlay:not(.hdr-scrolled) .site-header .storefront-owner-menu > summary { background: transparent; border-color: currentColor; }
@media (max-width: 980px) { body.hdr-overlay:not(.hdr-scrolled) .site-header .main-nav { color: var(--ink); } body.hdr-overlay:not(.hdr-scrolled) .site-header .main-nav > a { color: var(--ink); } }

/* ---------------- hero slideshow ---------------- */
/* Keep the catalog in its final position while published slides and artwork load. */
body.home-header-slideshow:not(.sf-boot-ready):not(.beat-page-view) #top::before { content: ''; display: block; height: calc(var(--sf-boot-h, 377px) + 16px); }
@media (max-width: 700px) { body.home-header-slideshow:not(.sf-boot-ready):not(.beat-page-view) #top::before { height: calc(var(--sf-boot-hm, 341px) + 16px); } }
#sfHero { display: none; }
body.home-header-slideshow:not(.beat-page-view) #sfHero { display: block; }
body.home-header-slideshow:not(.beat-page-view) #beat-detail,
body.home-header-slideshow:not(.beat-page-view) .storefront-header-image,
body.home-header-slideshow:not(.beat-page-view) .brand-masthead { display: none !important; }
body.home-header-slideshow:not(.beat-page-view) #beats { position: relative; z-index: 2; }
body.storefront-compact.home-header-slideshow #sfHero { grid-column: 1 / -1; width: 100%; margin: 0; }
#sfHero { margin-top: 16px; }
body.hdr-overlay #sfHero { margin-top: 12px; }
.sf-card { position: relative; height: calc(var(--sf-h, 450px) + var(--sf-pad, 0px) + var(--sf-e, 0px)); border-radius: 18px; overflow: hidden; isolation: isolate; background: #0a0a0b; }
body.hdr-overlay { --sf-pad: 0px; }
body.hdr-overlay .sf-card { --sf-pad: 62px; }
.sf-card { --sf-pad: 0px; }

@media (max-width: 700px) {
  .sf-card { height: calc(var(--sf-hm, 480px) + var(--sf-pad, 0px) + var(--sf-e, 0px)); }
  #sfHero { margin-top: 12px; }
  .sf-card { border-radius: 14px; }
  /* compact strip: cover and text sit side by side */
}


/* ---------------- product shelves ---------------- */


body.storefront-compact-v2 > #sfHero { width: calc(min(var(--v2-page-width, 1800px), 100% - 64px) * var(--sf-w, 1)); margin-inline: auto; }
body.storefront-compact-v2 > #sfHero { margin-top: 20px; }












.sf-price { color: var(--red); font-weight: 900; }









@media (min-width: 981px) { body:not(.storefront-compact) .license-studio.sf-section-width { width: min(calc(var(--showcase-catalog-width, 1360px) * var(--sf-w, .8)), calc(100% - 56px)); } }





body.sf-no-signup .footer-subscribe { display: none; }

/* ---------------- editor preview frame ---------------- */
html.sfe-embed .storefront-owner-menu, html.sfe-embed .storefront-edit-toggle, html.sfe-embed #stickyPlayer { }
html.sfe-embed .storefront-owner-menu { display: none !important; }
html.sfe-embed body { cursor: default; }
html.sfe-embed .site-header, html.sfe-embed #sfHero, html.sfe-embed #license-studio, html.sfe-embed .storefront-footer { cursor: pointer; }

/* ---------------- grain, mosaic blur, play button ---------------- */
.sf-grain { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='1.6 0 0 0 -.3 1.6 0 0 0 -.3 1.6 0 0 0 -.3 0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 220px; }

/* ---------------- bundles slideshow ---------------- */
























/* ---------------- classic featured beat: blurred cover backdrop ---------------- */
.featured-track-card { position: relative; overflow: hidden; isolation: isolate; }
.featured-track-card::before { content: ''; position: absolute; inset: -50px; z-index: -2; background: var(--sf-feat-cover, none) center / cover no-repeat; filter: blur(46px) saturate(1.25) brightness(.5); opacity: .9; }
.featured-track-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: overlay; opacity: .5; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='1.6 0 0 0 -.3 1.6 0 0 0 -.3 1.6 0 0 0 -.3 0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 220px; }



/* ---------------- license studio: one calm tone, soft edges ---------------- */
body { --sf-sh: 20,30,60; --sf-hl: rgba(255,255,255,.95); }
body.theme-beast-mode { --sf-sh: 0,0,0; --sf-hl: rgba(255,255,255,.09); }
/* License studio: raised pieces, shadows and highlights come from the active theme */
@media (min-width: 981px) {
body.theme-beast-mode .license-studio .studio-choice-panel .intent-button,
body.theme-beast-mode .license-studio .studio-choice-panel .exclusive-license-placeholder,
body .license-studio .studio-choice-panel .intent-button,
body .license-studio .studio-choice-panel .exclusive-license-placeholder { background: var(--lic-fill); border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 1px 0 var(--sf-hl), 0 8px 18px -9px rgba(var(--sf-sh), calc(.34 * var(--lic-sm, 1) * var(--sf-dk, 1))), 0 1px 3px rgba(var(--sf-sh), calc(.1 * var(--lic-sm, 1) * var(--sf-dk, 1))); transition: transform .18s ease, box-shadow .18s ease; }
body.theme-beast-mode .license-studio .studio-choice-panel .intent-button:hover,
body.theme-beast-mode .license-studio .studio-choice-panel .exclusive-license-placeholder:hover,
body .license-studio .studio-choice-panel .intent-button:hover,
body .license-studio .studio-choice-panel .exclusive-license-placeholder:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--sf-hl), 0 12px 22px -9px rgba(var(--sf-sh), calc(.4 * var(--lic-sm, 1) * var(--sf-dk, 1))), 0 1px 3px rgba(var(--sf-sh), calc(.1 * var(--lic-sm, 1) * var(--sf-dk, 1))); }
body.theme-beast-mode .license-studio .studio-choice-panel .intent-button.active,
body.theme-beast-mode .license-studio .studio-choice-panel .intent-button.active:hover,
body .license-studio .studio-choice-panel .intent-button.active,
body .license-studio .studio-choice-panel .intent-button.active:hover { color: var(--ink); background: var(--lic-fill); border: 1px solid var(--lic-oc, var(--red)); transform: translateY(-2px); box-shadow: 0 0 0 var(--lic-ow, 2px) var(--lic-oc, var(--red)), inset 0 1px 0 var(--sf-hl), 0 14px 26px -10px rgba(var(--sf-sh), calc(.42 * var(--lic-sm, 1) * var(--sf-dk, 1))), 0 2px 6px rgba(var(--sf-sh), calc(.14 * var(--lic-sm, 1) * var(--sf-dk, 1))); }
body .license-studio .intent-button.active .studio-intent-license { color: var(--muted); }
body .license-studio .intent-button.active .studio-intent-check { color: var(--lic-oc, var(--red)); }
}
body.theme-beast-mode .license-studio .studio-console, body .license-studio .studio-console { box-shadow: inset 0 1px 0 var(--sf-hl), 0 34px 64px -28px rgba(var(--sf-sh), calc(.45 * var(--lic-sm, 1) * var(--sf-dk, 1))), 0 4px 12px rgba(var(--sf-sh), calc(.08 * var(--lic-sm, 1) * var(--sf-dk, 1))); }
body .license-studio .recommend-cta { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 18px -8px rgba(var(--sf-sh), calc(.4 * var(--lic-sm, 1) * var(--sf-dk, 1))); }
body .license-studio .recommend-cta:hover, body .license-studio .recommend-cta:focus-visible { box-shadow: inset 0 1px 3px rgba(10,16,27,.2); }
body.theme-beast-mode .license-studio .studio-feature-list, body.theme-beast-mode .license-studio .studio-key-terms,
body.theme-beast-mode .license-studio .comparison-matrix, body.theme-beast-mode .license-studio .comparison-disclosure,
body .license-studio .studio-feature-list, body .license-studio .studio-key-terms, body .license-studio .comparison-matrix, body .license-studio .comparison-disclosure { border-color: color-mix(in srgb, var(--ink) 8%, transparent); }
body.theme-beast-mode .license-studio .studio-terms-button, body .license-studio .studio-terms-button { border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
body.theme-beast-mode .license-studio .studio-choice-panel, body.theme-beast-mode .license-studio .recommendation { background: transparent; border-color: color-mix(in srgb, var(--ink) 8%, transparent); }

/* ---------------- full-width hero, logo contrast, scroll-up header ---------------- */
body.sf-hero-full { overflow-x: clip; }
body #sfHero.sf-full { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); margin-top: 0; padding: 0; }
body #sfHero.sf-full .sf-card { border-radius: 0; }
body.storefront-compact-v2 > #sfHero.sf-full { width: 100%; margin-inline: 0; }
body.hdr-overlay:not(.hdr-scrolled) .site-header .brand, body.hdr-overlay:not(.hdr-scrolled) .site-header .brand * { color: var(--hdr-logo, #fff); transition: color .25s ease; }
body.hdr-scroll-up .site-header { transition: transform .28s ease, background-color .22s ease, border-color .22s ease; }
body.hdr-scroll-up.hdr-hide .site-header { transform: translateY(-101%); }

/* cart badge: no hard ring around it in the header */
.site-header .cart-badge, .sticky-cart .cart-badge { border: 0; }

/* centered logo on mobile: menu + search left, logo centered, cart right */
@media (max-width: 980px) {
  body.hdr-logo-center .header-inner { display: flex; align-items: center; gap: 4px; position: relative; }
  body.hdr-logo-center .header-inner::after { content: ''; order: 2; flex: 1; }
  body.hdr-logo-center .header-actions { display: contents; }
  body.hdr-logo-center .header-actions > * { order: 3; }
  body.hdr-logo-center .header-actions > #menuButton { order: 0; }
  body.hdr-logo-center .header-actions > #headerSearch { order: 1; }
  body.hdr-logo-center .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); order: 2; text-align: center; }
  body.hdr-logo-center .brand-lockup { align-items: center; text-align: center; }
}

/* Left/right text: a block sized to its content, centered in the space beside the image */
/* Hero melts into the page, and the beat list rises over its edge */
.sf-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--sf-f, 0px); z-index: 5; pointer-events: none; background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--canvas) 5%, transparent) 25%, color-mix(in srgb, var(--canvas) 20%, transparent) 50%, color-mix(in srgb, var(--canvas) 50%, transparent) 70%, color-mix(in srgb, var(--canvas) 80%, transparent) 85%, var(--canvas) 100%); }
#sfHero { margin-bottom: 0; position: relative; z-index: 1; }
body.home-header-slideshow:not(.beat-page-view) #beats { position: relative; z-index: 2; }

/* Shadows and focus rings follow the theme instead of a fixed red */
.mobile-catalog-strip button.active { box-shadow: 0 5px 12px rgba(var(--sf-sh), calc(.28 * var(--lic-sm, 1) * var(--sf-dk, 1))); }
:focus-visible { outline-color: color-mix(in srgb, var(--red) 45%, transparent); }

/* The selected license tile keeps the same raised look as the others: neutral fill, theme-colored outline only */
@media (min-width: 981px) {
  html body:not(.storefront-compact) .license-studio .studio-choice-panel .intent-button.active,
  html body:not(.storefront-compact) .license-studio .studio-choice-panel .intent-button.active:hover {
    background: var(--lic-fill) !important;
    border: 1px solid var(--lic-oc, var(--red)) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 0 var(--lic-ow, 2px) var(--lic-oc, var(--red)), inset 0 1px 0 var(--sf-hl), 0 14px 26px -10px rgba(var(--sf-sh), calc(.42 * var(--lic-sm, 1) * var(--sf-dk, 1))), 0 2px 6px rgba(var(--sf-sh), calc(.14 * var(--lic-sm, 1) * var(--sf-dk, 1))) !important;
  }
}

/* ---------------- license studio customizer: every value falls back to the theme ---------------- */
.license-studio { --lic-fill: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 96%, var(--ink) 4%)); }
.license-studio[data-lic-shade="flat"] { --lic-fill: var(--surface); }
.license-studio[data-lic-shade="raised"] { --lic-fill: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 93%, var(--ink) 7%)); }
.license-studio[data-lic-shade="custom"] { --lic-fill: linear-gradient(180deg, var(--lic-tile), color-mix(in srgb, var(--lic-tile) 94%, var(--ink) 6%)); }
.license-studio[data-lic-card] .studio-console { background: var(--lic-card) !important; }
.license-studio[data-lic-side] .recommendation { background: var(--lic-side) !important; }
.license-studio[data-lic-btn] .recommend-cta { background: var(--lic-btn) !important; border-color: var(--lic-btn) !important; }
.license-studio[data-lic-btn] .recommend-cta { color: var(--lic-btn-fg, var(--palette-accent-text, #fff)) !important; }
.license-studio[data-lic-text] .studio-console, .license-studio[data-lic-text] .studio-console h2, .license-studio[data-lic-text] .studio-console h3, .license-studio[data-lic-text] .intent-button { color: var(--lic-text) !important; }

/* ---------------- catalog player refresh: one subtle tone, lifted active row (desktop) ---------------- */
body:not(.storefront-compact) { --cat-pill: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 95%, var(--ink) 5%)); --cat-pill-bd: color-mix(in srgb, var(--ink) 9%, transparent); --cat-pill-sh: inset 0 1px 0 var(--sf-hl), 0 6px 12px -8px rgba(var(--sf-sh), calc(.5 * var(--sf-dk, 1))); }
html body:not(.storefront-compact) .catalog-controls .catalog-search,
html body:not(.storefront-compact) .catalog-controls .tool-pill,
html body:not(.storefront-compact) .track-row:not(.active) .license-open:not(.in-cart) { background: var(--cat-pill) !important; border: 1px solid var(--cat-pill-bd) !important; box-shadow: var(--cat-pill-sh) !important; color: var(--ink); }
html body:not(.storefront-compact) .catalog-card { box-shadow: inset 0 1px 0 var(--sf-hl), 0 30px 60px -34px rgba(var(--sf-sh), calc(.55 * var(--sf-dk, 1))); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
html body:not(.storefront-compact) .catalog-head { font-size: .66rem; color: var(--muted); }
.bar-waveform i:not(.on) { background: color-mix(in srgb, var(--ink) 30%, var(--surface)); }
.track-row .key-cell:empty::before { content: "—"; color: var(--muted); opacity: .6; }
@media (min-width: 701px) {
  html body:not(.storefront-compact) .track-row.active { margin-inline: 8px; padding-inline: 14px; border-radius: 14px; border-bottom-color: transparent; background: color-mix(in srgb, var(--surface) 93%, var(--ink) 7%) !important; box-shadow: inset 0 1px 0 var(--sf-hl), 0 14px 26px -14px rgba(var(--sf-sh), calc(.6 * var(--sf-dk, 1))) !important; position: relative; z-index: 2; }
  html body:not(.storefront-compact) .track-row.active::before { left: -1px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; }
}

/* ---------------- framed hero: rounded card, color glow, gray center with color edges ---------------- */
@property --w { syntax: "<color>"; inherits: true; initial-value: #333333; }
#sfWash { position: absolute; top: 0; left: 0; right: 0; z-index: 0; pointer-events: none; opacity: var(--wo, .6); transition: --w .7s ease; background: radial-gradient(ellipse 95% 70% at 50% 34%, var(--w) 0%, color-mix(in srgb, var(--w) 62%, var(--w2, var(--canvas))) 40%, color-mix(in srgb, var(--w) 22%, var(--w2, var(--canvas))) 72%, var(--w2, var(--canvas)) 100%); -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%); }
body.sf-framed .site-header { background: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.sf-framed.hdr-scrolled .site-header { background: color-mix(in srgb, var(--surface) 70%, transparent) !important; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
body.sf-framed main, body.sf-framed #top { position: relative; z-index: 1; }
body.sf-framed .sf-card { border-radius: 24px; box-shadow: none; }
body.sf-framed .sf-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 70%, rgba(0,0,0,.14) 100%); }
body.sf-framed .sf-card::after { display: none; }
body.sf-framed .sf-grain { mix-blend-mode: overlay; }

/* dark theme: shadows read as dark smudges on a dark page, so keep them gentle */
body.theme-beast-mode { --sf-dk: .45; }

body.sf-framed.sf-logo-custom:not(.hdr-scrolled) .site-header .brand, body.sf-framed.sf-logo-custom:not(.hdr-scrolled) .site-header .brand * { color: var(--hdr-logo, #fff); transition: color .25s ease; }

/* license card (desktop): the three usage columns are truly equal, and the key-terms row below uses the same column lines */
@container studio (min-width: 1061px) {
  html body:not(.storefront-compact) .license-studio .recommend-details { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr) clamp(250px, 31.5cqw, 340px); }
  html body:not(.storefront-compact) .license-studio .recommend-details > .studio-key-terms { grid-template-columns: subgrid; column-gap: 0; }
  html body:not(.storefront-compact) .license-studio .recommend-details > .studio-key-terms > * { min-width: 0; padding-right: 12px; }
  /* the first column starts 24px in, so nudge the second by half of that: the three items are then evenly spaced */
  html body:not(.storefront-compact) .license-studio .studio-feature-list .studio-feature:nth-child(2),
  html body:not(.storefront-compact) .license-studio .recommend-details > .studio-key-terms > :nth-child(2) { margin-left: 12px; }
  html body:not(.storefront-compact) .license-studio .recommend-details > .studio-key-terms > :last-child { padding-left: clamp(17px, calc(2.6cqw + 1px), 29px); }
}
/* phone: usage numbers spread edge to edge with equal gaps between them */
@media (max-width: 700px) {
  .license-studio .studio-mobile-stats { grid-template-columns: repeat(3, auto); justify-content: space-between; }
}

/* search + filter row line up with the list edges below on every screen size */
html body:not(.storefront-compact) .catalog-controls { padding: 0 !important; margin-block: 4px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
@media (max-width: 700px) {
  html body:not(.storefront-compact) .catalog-controls { gap: 10px !important; }
}

/* phone license strip: thin dividers between the options */
@media (max-width: 980px) {
  html body .license-studio .studio-choice-panel .intent-button,
  html body .license-studio .studio-choice-panel .intent-button.active,
  html body .license-studio .studio-choice-panel .intent-button.active:hover {
    background-image: linear-gradient(var(--line-strong, var(--line)), var(--line-strong, var(--line))) !important;
    background-size: 1px 56% !important; background-position: right center !important; background-repeat: no-repeat !important;
  }
}

/* ---- Hero title fonts: self-hosted display fonts (SIL Open Font License), fetched only when used ---- */
@font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/InstrumentSans-Variable.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('/assets/fonts/syne.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Anton'; src: url('/assets/fonts/anton.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bebas Neue'; src: url('/assets/fonts/bebas-neue.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo Black'; src: url('/assets/fonts/archivo-black.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url('/assets/fonts/unbounded.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Rubik Mono One'; src: url('/assets/fonts/rubik-mono-one.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bungee'; src: url('/assets/fonts/bungee.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/assets/fonts/sora.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Big Shoulders Display'; src: url('/assets/fonts/big-shoulders-display.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url('/assets/fonts/dm-serif-display.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-Variable.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nimbus Sans'; src: url('/assets/fonts/NimbusSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nimbus Sans'; src: url('/assets/fonts/NimbusSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* shared background motion: one slow move for every slide's photo, on one clock so it carries across slides */
@keyframes sfbg-drift { from { translate: calc(var(--bgm-a, 2%) * -1) calc(var(--bgm-a, 2%) * -.35); } to { translate: var(--bgm-a, 2%) calc(var(--bgm-a, 2%) * .35); } }
@keyframes sfbg-zoom { from { scale: 1; } to { scale: var(--bgm-z, 1.1); } }
@keyframes sfbg-both { from { translate: calc(var(--bgm-a, 2%) * -1) calc(var(--bgm-a, 2%) * -.35); scale: 1; } to { translate: var(--bgm-a, 2%) calc(var(--bgm-a, 2%) * .35); scale: var(--bgm-z, 1.1); } }
#sfHero[data-bgm="drift"][data-carry="1"] :is(.mk-sl-bg, .mk-sl-glow) { animation: sfbg-drift var(--bgm-sec, 20s) ease-in-out var(--bgm-d, 0s) infinite alternate; }
#sfHero[data-bgm="zoom"][data-carry="1"] :is(.mk-sl-bg, .mk-sl-glow) { animation: sfbg-zoom var(--bgm-sec, 20s) ease-in-out var(--bgm-d, 0s) infinite alternate; }
#sfHero[data-bgm="both"][data-carry="1"] :is(.mk-sl-bg, .mk-sl-glow) { animation: sfbg-both var(--bgm-sec, 20s) ease-in-out var(--bgm-d, 0s) infinite alternate; }
#sfHero[data-bgm="drift"][data-carry="0"] .mk-sl-slide.mk-on :is(.mk-sl-bg, .mk-sl-glow) { animation: sfbg-drift var(--bgm-sec, 20s) ease-in-out infinite alternate; }
#sfHero[data-bgm="zoom"][data-carry="0"] .mk-sl-slide.mk-on :is(.mk-sl-bg, .mk-sl-glow) { animation: sfbg-zoom var(--bgm-sec, 20s) ease-in-out infinite alternate; }
#sfHero[data-bgm="both"][data-carry="0"] .mk-sl-slide.mk-on :is(.mk-sl-bg, .mk-sl-glow) { animation: sfbg-both var(--bgm-sec, 20s) ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { #sfHero[data-bgm] :is(.mk-sl-bg, .mk-sl-glow) { animation: none !important; } }

/* ---------- license cards layout ---------- */
.license-studio[data-lic-layout="cards"] > :not(#sfLicCards) { display: none !important; }
.license-studio[data-lic-layout="cards"] { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-block: 28px !important; }
.sf-lic { --lic-acc: var(--lic-oc, var(--red, #e42024)); color: var(--lic-text, var(--ink)); display: flex; flex-direction: column; gap: 30px; }
.sf-lic-top { text-align: center; display: grid; gap: 8px; justify-items: center; }
.sf-lic-eyebrow { font: 800 .7rem/1 var(--sans, inherit); letter-spacing: .2em; color: var(--lic-acc); }
.sf-lic-top h2 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; }
.sf-lic-top p { margin: 0; color: var(--muted); font-size: .95rem; }
.sf-lic-for { display: inline-block; font-size: 1.15rem; font-weight: 700; color: var(--lic-text, var(--ink)); }
.sf-lic-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 56px 14px; padding-top: 14px; }
.sf-lic-card { position: relative; flex: 1 1 208px; max-width: 252px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px; background: var(--lic-card, var(--surface)); border: 1px solid var(--line-strong, var(--line)); transition: transform .18s ease, box-shadow .18s ease; }
.sf-lic-card:hover { transform: translateY(-3px); }
.sf-lic-card.pop { border-color: var(--lic-acc); box-shadow: 0 0 0 1px var(--lic-acc), 0 18px 40px rgba(0,0,0,.28); transform: translateY(-8px); }
.sf-lic-card.pop:hover { transform: translateY(-10px); }
.sf-lic-badge { position: absolute; top: -12px; left: 18px; padding: 5px 11px; border-radius: 99px; background: var(--lic-acc); color: var(--palette-accent-text, #fff); font: 800 .6rem/1 var(--sans, inherit); letter-spacing: .14em; }
.sf-lic-badge.alt { background: var(--ink); color: var(--surface); }
.sf-lic-head h3 { margin: 0; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; }
.sf-lic-head p { margin: 3px 0 0; font-size: .8rem; color: var(--muted); min-height: 1.1em; }
.sf-lic-price { height: 44px; display: flex; align-items: center; font-size: 2.2rem; font-weight: 900; letter-spacing: -.03em; }
.sf-lic-price.small { font-size: 1.5rem; letter-spacing: -.02em; }
.sf-lic-min { font-size: .78rem; color: var(--muted); margin-top: -10px; }
.sf-lic-price.small span { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.sf-lic-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sf-lic-chips i { font: 800 .62rem/1 var(--sans, inherit); font-style: normal; letter-spacing: .08em; padding: 5px 8px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.sf-lic-rows { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; padding-top: 12px; border-top: 1px solid var(--line); }
.sf-lic-r { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; font-size: .8rem; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.sf-lic-r span { color: var(--muted); }
.sf-lic-r b { font-weight: 800; }
.sf-lic-r b.dim { opacity: .55; }
.sf-lic-act { display: grid; gap: 8px; justify-items: center; }
.sf-lic-act a { font-size: .78rem; color: var(--muted); text-decoration: underline; }
.sf-lic-btn { width: 100%; min-height: 44px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); background: transparent; color: inherit; font: 800 .92rem var(--sans, inherit); cursor: pointer; }
.sf-lic-btn:hover { border-color: var(--lic-acc); }
.sf-lic-card.pop .sf-lic-btn, .sf-lic-card .sf-lic-btn:focus-visible { background: var(--lic-btn, var(--lic-acc)); border-color: var(--lic-btn, var(--lic-acc)); color: var(--lic-btn-fg, var(--palette-accent-text, #fff)); }
.sf-lic-btn.alt { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.sf-lic-deal { position: absolute; top: calc(100% - 1px); left: 20px; right: 20px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 0 0 12px 12px; background: var(--lic-btn, var(--lic-acc)); color: var(--lic-btn-fg, var(--palette-accent-text, #fff)); font: 800 .72rem/1 var(--sans, inherit); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.sf-lic-dots { display: none; justify-content: center; gap: 7px; }
.sf-lic-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 25%, transparent); transition: width .15s; }
.sf-lic-dots i.on { width: 24px; border-radius: 99px; background: var(--ink); }
.sf-lic-strip { align-self: center; display: flex; align-items: center; gap: 22px; padding: 13px 26px; margin-top: 30px; border-radius: 999px; border: 1px solid var(--line-strong, var(--line)); background: var(--lic-card, var(--surface)); font-size: .85rem; white-space: nowrap; }
.sf-lic-s { display: flex; gap: 6px; }
.sf-lic-s span { color: var(--muted); }
.sf-lic-s + .sf-lic-s { padding-left: 22px; border-left: 1px solid var(--line); }
@media (max-width: 760px) {
  .sf-lic { gap: 22px; }
  .sf-lic-row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 28px 16px 44px; margin: -14px -16px -28px; scrollbar-width: none; gap: 10px; }
  .sf-lic-row::-webkit-scrollbar { display: none; }
  .sf-lic-card { flex: 0 0 min(236px, 66vw); max-width: none; scroll-snap-align: center; padding: 15px; gap: 10px; border-radius: 16px; }
  .sf-lic-card.pop { transform: translateY(-5px); }
  .sf-lic-head h3 { font-size: .98rem; }
  .sf-lic-head p { font-size: .74rem; }
  .sf-lic-price { height: 34px; font-size: 1.8rem; }
  .sf-lic-price.small { font-size: 1.25rem; }
  .sf-lic-chips i { padding: 4px 7px; font-size: .56rem; }
  .sf-lic-rows { gap: 6px; padding-top: 8px; }
  .sf-lic-r { font-size: .74rem; padding-bottom: 6px; }
  .sf-lic-btn { min-height: 40px; font-size: .86rem; }
  .sf-lic-act { gap: 5px; }
  .sf-lic-deal { height: 30px; left: 16px; right: 16px; font-size: .66rem; }
  .sf-lic-dots { display: flex; }
  .sf-lic-strip { align-self: stretch; flex-wrap: wrap; justify-content: center; gap: 4px 14px; border-radius: 14px; padding: 12px 14px; margin-top: 2px; white-space: normal; font-size: .78rem; }
  .sf-lic-strip .sf-lic-eyebrow { flex-basis: 100%; text-align: center; }
  .sf-lic-s { padding: 0; border: 0; }
  .sf-lic-s + .sf-lic-s { padding-left: 0; border-left: 0; }
}

/* ---------- encased hero: solid menu bar + bordered card on the page column ---------- */
body.sf-encased:not(.storefront-compact) .site-header { background: var(--canvas, var(--surface)) !important; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.sf-encased:not(.storefront-compact).hdr-scrolled .site-header { background: var(--canvas, var(--surface)) !important; }
body.sf-encased:not(.storefront-compact) .header-inner { width: min(var(--showcase-catalog-width, 1320px), calc(100% - 48px)); }
body.sf-encased:not(.storefront-compact) #sfHero { width: min(var(--showcase-catalog-width, 1320px), calc(100% - 48px)); max-width: none; margin: 22px auto 0; }
body.sf-encased:not(.storefront-compact) #sfHero .sf-card { border-radius: 22px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: none; overflow: hidden; }
body.sf-encased.sf-no-outline:not(.storefront-compact) #sfHero .sf-card { border-color: transparent; }
body.sf-encased #sfWash { display: none !important; }
@media (max-width: 760px) { body.sf-encased:not(.storefront-compact) #sfHero, body.sf-encased:not(.storefront-compact) .header-inner { width: calc(100% - 24px); } body.sf-encased:not(.storefront-compact) #sfHero { margin-top: 12px; } body.sf-encased:not(.storefront-compact) #sfHero .sf-card { border-radius: 18px; } }

.license-studio[data-lic-intro="1"] .studio-desktop-heading, .license-studio[data-lic-intro="1"] .studio-mobile-heading { display: none !important; }
.sf-lic-intro { margin-bottom: 22px; }

/* waveforms stay plain until a beat starts playing */
.bar-waveform[data-idle="1"]::after { opacity: 0; }

/* license heading: same spacing above and below it in both layouts */
body:not(.storefront-compact) .license-studio:is([data-lic-intro="1"], [data-lic-layout="cards"]) { padding-top: 56px !important; }
#sfLicCards > .sf-lic-top { margin-bottom: -16px; }
.sf-lic-intro { margin-bottom: 28px; }
.sf-lic-intro > .sf-lic-top { margin-bottom: 0; }
@media (max-width: 760px) { body:not(.storefront-compact) .license-studio:is([data-lic-intro="1"], [data-lic-layout="cards"]) { padding-top: 36px !important; } }
@media (max-width: 760px) { #sfLicCards > .sf-lic-top { margin-bottom: -8px; } }
body:not(.storefront-compact) .license-studio[data-lic-gap="1"] { padding-top: var(--lic-gap, 56px) !important; }
@media (max-width: 760px) { body:not(.storefront-compact) .license-studio[data-lic-gap="1"] { padding-top: var(--lic-gap-m, calc(var(--lic-gap, 56px) * .65)) !important; } }

/* ---------------- carousel + featured product sections ---------------- */





















































/* ---- product cards: clean by default (cover, then text), boxed on request ---- */











.sf-price { color: var(--ink); }
.sf-price.is-sale { color: var(--sf-sale, #e11d2e); }



/* ---- featured product: scrolling player, sale price, two buttons ---- */



















/* ---- announcement bar ---- */
.sf-ann { position: relative; z-index: 45; overflow: hidden; display: flex; align-items: center; background: var(--red); color: var(--palette-accent-text, #0b0b0c); font: 800 .78rem var(--sans); letter-spacing: .03em; }
.sf-ann[data-size="sm"] { height: 36px; } .sf-ann[data-size="md"] { height: 44px; font-size: .86rem; } .sf-ann[data-size="lg"] { height: 54px; font-size: .98rem; }
body.sf-ann-sticky .sf-ann { position: sticky; top: 0; }
.sf-ann-track { display: flex; width: max-content; height: 100%; align-items: center; animation: sf-ann-run var(--ann-dur, 18s) linear infinite; }
.sf-ann:hover .sf-ann-track { animation-play-state: paused; }
.sf-ann-set { display: flex; align-items: center; flex: none; }
.sf-ann-item { padding: 0 26px; white-space: nowrap; }
.sf-ann-dot { opacity: .55; }
@keyframes sf-ann-run { to { transform: translateX(-50%); } }
.sf-ann-static { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 0 12px; }
.sf-ann-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-ann-arrow { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .8; }
.sf-ann-arrow:hover { opacity: 1; background: rgba(255,255,255,.18); }
.sf-ann-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body.sf-ann-sticky .site-header { top: var(--sf-ann-h, 0px); }
body.hdr-overlay .site-header { top: var(--sf-ann-off, 0px); }
body.hdr-overlay.hdr-not-sticky .site-header { top: var(--sf-ann-h, 0px); }
@media (prefers-reduced-motion: reduce) { .sf-ann-track { animation: none; } }

.sf-ann[data-dir="right"] .sf-ann-track { animation-direction: reverse; }

/* Anything that follows the hero always paints above it, wherever you drag it in the list. */
#top > .license-studio, #top > #beats, #top > #sfSignup { position: relative; z-index: 2; }
#top > .sf-faq-section, #top > .sf-bundle-section, #top > .sf-builder-section { position: relative; z-index: 2; }
.sf-bundle-section, .sf-faq-section { width: min(calc(var(--showcase-catalog-width, 1360px) * var(--sf-w, 1)), calc(100% - 56px)); margin: 44px auto 0; }
.sf-builder-section { width: min(calc(var(--showcase-catalog-width, 1360px) * var(--sf-w, 1)), calc(100% - 56px)); margin: 40px auto 0; color: var(--ink); text-align: center; }
.sf-builder-section .sf-builder-inner { width: var(--sf-builder-width, 100%); max-width: 100%; margin: 0 auto; }
.sf-builder-section[data-align="left"] { text-align: left; }
.sf-builder-section[data-align="left"] .sf-builder-inner { margin-left: 0; }
.sf-builder-section[data-align="right"] { text-align: right; }
.sf-builder-section[data-align="right"] .sf-builder-inner { margin-right: 0; }
.sf-builder-text h2 { margin: 6px 0; font: 800 min(var(--sf-builder-heading-size, 42px), 10vw)/1.08 var(--display, var(--sans)); letter-spacing: -.04em; }
.sf-builder-text h3 { margin: 8px 0 0; font: 600 clamp(16px, 2vw, 24px)/1.3 var(--sans); }
.sf-builder-eyebrow { color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.sf-builder-body { max-width: 72ch; margin: 16px auto 0; color: var(--muted); line-height: 1.65; }
.sf-builder-section[data-align="left"] .sf-builder-body { margin-left: 0; }
.sf-builder-section[data-align="right"] .sf-builder-body { margin-right: 0; }
.sf-builder-body p { margin: 0 0 12px; }
.sf-builder-image figure { margin: 0 auto; }
.sf-builder-image img, .sf-builder-placeholder { display: block; width: var(--sf-builder-image-width, 100%); max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--sf-builder-radius, 16px); }
.sf-builder-placeholder { box-sizing: border-box; padding: 48px 16px; border: 1px dashed var(--line); color: var(--muted); }
.sf-builder-image figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; }
.sf-builder-spacer { height: var(--sf-builder-space, 48px); margin-top: 0; }
.sf-builder-html-frame { display: block; width: 100%; border: 0; background: transparent; color-scheme: dark; }
.sf-builder-html-placeholder { display: grid; place-items: center; min-height: 120px; border: 1px dashed color-mix(in srgb, currentColor 24%, transparent); border-radius: 12px; color: var(--muted, #aaa); font-size: 14px; }
.sf-builder-section { margin-top: var(--builder-top, 40px); padding: var(--builder-padding, 0); box-sizing: border-box; background: var(--builder-background, transparent); color: var(--builder-color, var(--ink)); border-radius: var(--sf-builder-radius, 16px); box-shadow: var(--builder-shadow, none); }
.sf-builder-section h2 { font: 750 min(var(--block-size, 36px), 9vw)/1.12 var(--display, var(--sans)); letter-spacing: -.035em; margin: 0; overflow-wrap: anywhere; }
.sf-builder-content { display: flex; flex-direction: column; align-items: center; gap: var(--builder-gap, 24px); }
.sf-builder-section[data-align="left"] .sf-builder-content { align-items: flex-start; }
.sf-builder-section[data-align="right"] .sf-builder-content { align-items: flex-end; }
.sf-builder-content .sf-builder-body { margin: 0; }
.sf-builder-content figure { margin: 0; max-width: 100%; }
.sf-builder-section picture, .sf-builder-section picture img { display: block; width: 100%; }
.sf-builder-section picture img { border-radius: var(--sf-builder-radius, 16px); }
.sf-builder-button { width: fit-content; }
.sf-builder-button.is-link, .sf-builder-text-link { background: transparent; color: inherit; padding: 0; border: 0; text-underline-offset: 5px; }
.sf-builder-body a { color: var(--red); text-decoration: underline; }
.sf-builder-body ul, .sf-builder-body ol { padding-left: 24px; text-align: left; }
.sf-builder-body p:last-child { margin-bottom: 0; }
.sf-builder-media-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--builder-gap, 24px); align-items: stretch; }
.sf-builder-media-copy { justify-content: center; padding: 24px; min-width: 0; }
.sf-builder-section[data-side="right"] .sf-builder-media-art { order: 2; }
.sf-builder-media-art img { height: 100%; object-fit: cover; min-height: 300px; }
.sf-builder-section[data-side="overlay"] .sf-builder-media-layout { position: relative; display: grid; min-height: 420px; overflow: hidden; border-radius: var(--sf-builder-radius, 16px); }
.sf-builder-section[data-side="overlay"] .sf-builder-media-art, .sf-builder-section[data-side="overlay"] .sf-builder-media-copy { grid-area: 1 / 1; }
.sf-builder-section[data-side="overlay"] .sf-builder-media-copy { position: relative; background: linear-gradient(transparent, rgba(0,0,0,.5)); color: #fff; z-index: 1; }
.sf-builder-section[data-position^="top"] .sf-builder-media-copy { justify-content: flex-start; }
.sf-builder-section[data-position^="bottom"] .sf-builder-media-copy { justify-content: flex-end; }
.sf-builder-section[data-position$="left"] .sf-builder-media-copy { align-items: flex-start; text-align: left; }
.sf-builder-section[data-position$="right"] .sf-builder-media-copy { align-items: flex-end; text-align: right; }
.sf-collection-grid, .sf-builder-column-grid { display: grid; grid-template-columns: repeat(var(--builder-columns, 3), minmax(0, 1fr)); gap: var(--builder-gap, 24px); margin-top: 24px; }
.sf-collection-tile { display: block; color: inherit; text-decoration: none; min-width: 0; }
.sf-collection-art { display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; border-radius: var(--sf-builder-radius, 16px); background: linear-gradient(135deg, color-mix(in srgb, var(--red) 18%, var(--surface)), var(--surface)); }
.sf-collection-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.sf-collection-monogram { font: 800 clamp(32px, 5vw, 64px)/1 var(--display, var(--sans)); letter-spacing: -.04em; opacity: .55; }
.sf-collection-tile:hover img { transform: scale(1.035); }
.sf-collection-copy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; text-align: left; }
.sf-collection-copy strong { flex: 1; font: 700 17px/1.3 var(--sans); }
.sf-collection-copy small { flex-basis: 100%; color: var(--muted); }
.sf-builder-section[data-card-style="boxed"] :is(.sf-collection-tile, .sf-builder-column) { padding: 16px; border-radius: var(--sf-builder-radius, 16px); background: var(--surface); box-shadow: var(--builder-shadow, none); }
.sf-builder-section:is(.sf-builder-collections, .sf-builder-columns) { box-shadow: none; }
.sf-builder-column h3 { margin: 16px 0 8px; font: 700 21px/1.3 var(--sans); }
.sf-builder-column .sf-builder-body { margin: 0; }
/* Product shelves share one responsive grid and a restrained artwork-first card. */












@media (max-width: 700px) {
  .sf-builder-section { margin-top: var(--builder-top-m, 24px); padding: var(--builder-padding-m, 0); }
  .sf-builder-spacer { margin-top: 0; }
  .sf-builder-media-layout { grid-template-columns: 1fr; gap: var(--builder-gap-m, 16px); }
  .sf-builder-content { gap: var(--builder-gap-m, 16px); }
  .sf-builder-section[data-side="right"] .sf-builder-media-art { order: 0; }
  .sf-builder-media-copy { padding: 16px; }
  .sf-builder-section[data-mobile-position^="top"] .sf-builder-media-copy { justify-content: flex-start; }
  .sf-builder-section[data-mobile-position^="middle"] .sf-builder-media-copy { justify-content: center; }
  .sf-builder-section[data-mobile-position^="bottom"] .sf-builder-media-copy { justify-content: flex-end; }
  .sf-builder-section[data-mobile-position$="left"] .sf-builder-media-copy { align-items: flex-start; text-align: left; }
  .sf-builder-section[data-mobile-position$="center"] .sf-builder-media-copy { align-items: center; text-align: center; }
  .sf-builder-section[data-mobile-position$="right"] .sf-builder-media-copy { align-items: flex-end; text-align: right; }
  .sf-collection-grid, .sf-builder-column-grid { grid-template-columns: repeat(var(--builder-columns-m, 1), minmax(0, 1fr)); gap: var(--builder-gap-m, 16px); }
  .sf-builder-section[data-stack-mobile="false"] :is(.sf-collection-grid, .sf-builder-column-grid) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .sf-builder-section[data-stack-mobile="false"] :is(.sf-collection-tile, .sf-builder-column) { flex: 0 0 78%; scroll-snap-align: start; }
  
  
  
  
}
@media (max-width: 700px) { .sf-builder-section { width: calc(100% - 24px); margin-top: var(--builder-top-m, 24px); } .sf-builder-spacer { height: var(--sf-builder-space-mobile, 24px); margin-top: 0; } }
.sf-bundle-heading { margin-bottom: 12px; }
.sf-bundle-heading h2, .sf-faq-section h2 { margin: 0; color: var(--ink); font: 850 clamp(1.35rem, 2.5vw, 2rem)/1.15 var(--display, var(--sans)); }
.sf-bundle-heading p { margin: 5px 0 0; color: var(--muted); font-size: .9rem; }
.sf-bundle-section .bundle-bar { margin-top: 0; }
#top > #beats + #bundleHome.sf-bundle-section { width: min(var(--catalog-widget-width, 1100px), calc(100% - 56px)); margin-top: var(--catalog-bundle-gap, 16px); }
body:not(.beat-page-view):not(.storefront-compact) #top > #beats:has(+ #bundleHome.sf-bundle-section) { padding-bottom: 0; }
#beats > #bundleHome { width: min(var(--catalog-widget-width, 1100px), 100%); margin-inline: auto; }
#beats > #bundleHome.sf-bundle-section { margin-top: var(--catalog-bundle-gap, 16px); }
body.sf-bundle-off #bundleHome, body.sf-bundle-off #compactBundleSlot .bundle-bar { display: none !important; }
body.sf-bundle-movable.storefront-compact #bundleHome { display: block; }
.sf-faq-list { margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.sf-faq-list details + details { border-top: 1px solid var(--line); }
.sf-faq-list summary { padding: 17px 20px; color: var(--ink); font-weight: 800; cursor: pointer; }
.sf-faq-list p { margin: 0; padding: 0 20px 18px; color: var(--muted); line-height: 1.55; }
@media (max-width: 700px) { .sf-bundle-section, .sf-faq-section { width: calc(100% - 24px); margin-top: 24px; } }
@media (min-width: 701px) {
  #beats.sf-beat-list .catalog-grid { grid-template-columns: 48px minmax(0, 1fr) 64px 56px 34px 34px 118px; grid-template-rows: auto; grid-template-areas: none; gap: 16px; }
  #beats.sf-beat-list .catalog-head { min-height: 42px; }
  #beats.sf-beat-list .catalog-head > :is(:nth-child(3), :nth-child(6)),
  #beats.sf-beat-list .track-row > :is(.row-play, .mobile-facts, .row-wave, .key-cell) { display: none !important; }
  #beats.sf-beat-list .track-row { min-height: 60px; padding-block: 7px; }
  #beats.sf-beat-list .track-row .mobile-cover { width: 44px; height: 44px; }
  #beats.sf-beat-list .track-row .track-copy { grid-area: auto; }
  #beats.sf-beat-list .track-row .save-icon, #beats.sf-beat-list .track-row .download-icon, #beats.sf-beat-list .track-row .license-open { grid-area: auto; }
  #beats.sf-beat-list .catalog-list { max-height: none; overflow: visible; }
}
body :is( #beats .catalog-card, .license-studio .studio-console, .sf-faq-list, .sf-bundle-section .bundle-bar) { box-shadow: 0 calc(var(--sf-section-shadow, 40) * .2px) calc(var(--sf-section-shadow, 40) * .52px) rgba(0, 0, 0, calc(var(--sf-section-shadow, 40) * .0024)) !important; }

/* the waveform column is a fixed track in Compact; never let it spill over time / BPM / key */
body.storefront-compact .track-row .row-wave { min-width: 0; max-width: 100%; }
body.storefront-compact #beats, body.storefront-compact #beats .catalog-card, body.storefront-compact #beats .catalog-list { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (min-width: 1120px) {
  body.storefront-compact #beats .catalog-grid { width: 100%; min-width: 0; box-sizing: border-box; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.05fr) 42px 40px 30px 30px minmax(74px, 82px); }
  body.storefront-compact #beats .license-open { width: 100%; min-width: 0; box-sizing: border-box; white-space: nowrap; }
}
@media (min-width: 981px) and (max-width: 1360px) {
  /* The row has nine visible grid children: cover, title, waveform, time,
     BPM, key, save, download, and license. A spare track-number column
     shifted every cell left and left an empty track before the actions. */
  body:not(.storefront-compact) #beats .catalog-grid { width: 100%; min-width: 0; box-sizing: border-box; grid-template-columns: 42px minmax(170px, 1fr) minmax(180px, 1.35fr) 54px 48px 74px 34px 34px minmax(84px, 100px); }
  body:not(.storefront-compact) #beats .license-open { width: 100%; min-width: 0; box-sizing: border-box; }
  body:not(.storefront-compact) #beats .catalog-controls { min-width: 0; width: 100%; box-sizing: border-box; }
}
@media (min-width: 981px) and (max-width: 1280px) {
  /* The key cell is hidden at this breakpoint, so its column must go too. */
  body:not(.storefront-compact) #beats .catalog-grid { grid-template-columns: 42px minmax(170px, 1fr) minmax(180px, 1.35fr) 54px 48px 34px 34px minmax(84px, 100px); }
}

/* Theme typography scales content while keeping existing page and section proportions as defaults. */
.sf-bundle-heading h2, .sf-faq-section h2 { font-size: calc(clamp(1.5rem, 2.4vw, 2rem) * var(--heading-scale, 1)); }

.masthead-title { font-size: calc(clamp(3.4rem, 6.2vw, 6.7rem) * var(--heading-scale, 1)); }
.section-heading h2 { font-size: calc(clamp(2.3rem, 3.6vw, 3.6rem) * var(--heading-scale, 1)); }
.studio-desktop-heading h2 { font-size: calc(clamp(2.3rem, 3vw, 3.15rem) * var(--heading-scale, 1)); }
.catalog-title { font-size: calc(clamp(2.8rem, 4vw, 4rem) * var(--heading-scale, 1)); }
body.storefront-compact .catalog-title { font-size: calc(1.35rem * var(--heading-scale, 1)); }

.masthead-copy { font-size: calc(clamp(.9rem, 1.25vw, 1.1rem) * var(--subheading-scale, 1)); }
.catalog-subtitle { font-size: calc(.84rem * var(--subheading-scale, 1)); }
@media (max-width: 980px) {
  .masthead-title { font-size: calc(clamp(2.8rem, 9vw, 4.2rem) * var(--heading-scale, 1)); }
  .masthead-copy { font-size: calc(.82rem * var(--subheading-scale, 1)); }
}
@media (max-width: 700px) {
  .masthead-title { font-size: calc(clamp(2.65rem, 12vw, 4rem) * var(--heading-scale, 1)); }
  .masthead-copy { font-size: calc(.76rem * var(--subheading-scale, 1)); }
  .section-heading h2 { font-size: calc(2.3rem * var(--heading-scale, 1)); }
  .catalog-subtitle { font-size: calc(.72rem * var(--subheading-scale, 1)); }
}

/* Compact: the search/filter bar and the license studio start on the same line */
body.storefront-compact:not(.storefront-compact-v2) .catalog-toolbar { height: 40px; margin-bottom: 18px; }
body.storefront-compact:not(.storefront-compact-v2) .catalog-controls { min-height: 40px; padding: 0; margin-top: -1px; align-items: flex-start; }

/* nothing tucks under or over anything else: even, positive gaps everywhere */
body.home-header-image:not(.beat-page-view) #beats { margin-top: 28px; }
body.storefront-compact.home-header-image:not(.beat-page-view) .storefront-header-image { margin: 0; }
body.storefront-compact.home-header-image:not(.beat-page-view) #beats { margin-top: 0; }
@media (max-width: 760px) { body.home-header-image:not(.beat-page-view) #beats { margin-top: 20px; } body.storefront-compact.home-header-image:not(.beat-page-view) .storefront-header-image { margin: 0 auto; } }




/* hero placed lower on the page (Showcase): normal section spacing, solid menu bar, never touching its neighbours */
html body.sf-hero-mid.sf-encased:not(.storefront-compact) #sfHero, html body.sf-hero-mid #sfHero { margin-top: 36px; margin-bottom: 36px; }
html body.sf-hero-mid #sfHero.sf-full { margin-top: 36px; margin-bottom: 36px; }
@media (max-width: 760px) { html body.sf-hero-mid.sf-encased:not(.storefront-compact) #sfHero, html body.sf-hero-mid #sfHero, html body.sf-hero-mid #sfHero.sf-full { margin-top: 24px; margin-bottom: 24px; } }

/* with Home added the menu has six links: keep each on one line and tighten the gaps on narrower desktops instead of wrapping */
@media (min-width: 981px) { .main-nav a { white-space: nowrap; } .main-nav { gap: clamp(16px, 2.1vw, 34px); } }

/* ---- account symbol for the signed-in owner (replaces the initials pill) and it stays visible on tablets/phones ---- */
.storefront-owner-menu > summary.sf-account-icon,
body.theme-beast-mode .storefront-owner-menu > summary.sf-account-icon,
body.hdr-overlay:not(.hdr-scrolled) .site-header .storefront-owner-menu > summary.sf-account-icon { display: flex; align-items: center; justify-content: center; gap: 0; border: 0; background: transparent; }
.storefront-owner-menu > summary.sf-account-icon > span { display: none; }
@media (max-width: 980px) { html body .storefront-owner-menu:not([hidden]) { display: block !important; } }
.storefront-owner-menu.sf-hidden { display: none !important; }

/* ---- tablet sticky player (701-980px): name left, controls centered, price/cart right, like the phone version but roomier ---- */
@media (min-width: 701px) and (max-width: 980px) {
  body .sticky-player .sticky-inner { width: calc(100% - 32px); min-height: 62px; padding: 8px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; border-radius: 18px; transform: none !important; }
  body .sticky-player .sticky-track-info { grid-column: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
  body .sticky-player .sticky-cover { flex: 0 0 42px; width: 42px; height: 42px; }
  body .sticky-player .sticky-copy { min-width: 0; }
  body .sticky-player .sticky-copy span, body .sticky-player .sticky-copy small { display: block; }
  body .sticky-player .sticky-copy strong, body .sticky-player .sticky-title-link { font-size: .82rem; }
  body .sticky-player .sticky-transport { grid-column: 2; width: auto; display: grid; grid-template-columns: 28px 30px 44px 30px 28px; align-items: center; justify-items: center; gap: 4px; }
  body .sticky-player #stickyShuffle { order: 1; } body .sticky-player #stickyPrevious { order: 2; } body .sticky-player #stickyPlay { order: 3; } body .sticky-player #stickyNext { order: 4; } body .sticky-player #stickyRepeat { order: 5; }
  body .sticky-player .sticky-transport-extra { width: 30px; height: 34px; padding: 0; border: 0; background: transparent; }
  body .sticky-player .sticky-transport-extra svg { width: 17px; height: 17px; }
  body .sticky-player .round-play, body .sticky-player .round-play.playing { width: 44px; min-width: 44px; max-width: 44px; height: 44px; }
  body .sticky-player .sticky-wave, body .sticky-player .sticky-cart { display: none !important; }
  body .sticky-player .sticky-price { grid-column: 3; justify-self: end; min-width: 0; max-width: 100%; }
}

/* hero foreground (cover + text): a plain layer that fills the slide; on tablets it is drawn at desktop size and scaled to fit (--sf-k is set from the hero width) */

/* ---- license cards on tablets (761-1100px): one row that uses the whole screen width; cards shrink to fit, and scroll sideways only if five still do not fit ---- */
@media (min-width: 761px) and (max-width: 1100px) {
  .sf-lic-row { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 28px 16px 44px; margin: -14px calc(50% - 50vw) -28px; }
  .sf-lic-row::-webkit-scrollbar { display: none; }
  .sf-lic-card { flex: 0 0 max(164px, calc((100% - 40px) / 5)); min-width: 0; max-width: 252px; scroll-snap-align: center; padding: 13px; gap: 10px; border-radius: 16px; }
  .sf-lic-card:first-child { margin-left: auto; } .sf-lic-card:last-child { margin-right: auto; }
  .sf-lic-card.pop { transform: translateY(-5px); }
  .sf-lic-head h3 { font-size: .98rem; } .sf-lic-head p { font-size: .74rem; }
  .sf-lic-price { height: 34px; font-size: 1.8rem; } .sf-lic-price.small { font-size: 1.25rem; }
  .sf-lic-chips i { padding: 4px 7px; font-size: .56rem; }
  .sf-lic-rows { gap: 6px; padding-top: 8px; } .sf-lic-r { font-size: .74rem; padding-bottom: 6px; }
  .sf-lic-btn { min-height: 40px; font-size: .86rem; } .sf-lic-act { gap: 5px; }
  .sf-lic-deal { height: 30px; left: 16px; right: 16px; font-size: .66rem; }
}

/* ---- tablets (701-980px): the page column uses the screen like the hero does, instead of stopping at 700px ---- */
@media (min-width: 701px) and (max-width: 980px) {
  body .page-shell, body .header-inner { width: calc(100% - 28px); }
}

/* tablets (701-980px): search, Filters, Saved and Sort share one line like on desktop */
@media (min-width: 701px) and (max-width: 980px) {
  /* the search bar takes all the spare room; the three buttons are only as wide as their content */
  html body:not(.storefront-compact) .catalog-controls { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  html body:not(.storefront-compact) .catalog-controls .search-wrap { grid-column: auto; }
  html body:not(.storefront-compact) .catalog-controls :is(#savedFilter, #sortMenu, #mobileFiltersMenu) { width: auto; }
  html body:not(.storefront-compact) .catalog-controls .tool-pill { padding: 0 18px; gap: 10px; white-space: nowrap; }
  html body:not(.storefront-compact) .catalog-controls #sortMenu { min-width: 156px; }
}

/* ---------- fade in on scroll (store-wide setting) ---------- */
.sf-reveal:not(.sf-reveal-in) { opacity: 0; transform: translateY(28px); }
.sf-reveal-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
.sf-reveal-in :is(.pk-rel, .pg-card, .pk-faq details) { transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--sf-fade-i, 0) * 80ms + 80ms); }
.sf-reveal:not(.sf-reveal-in) :is(.pk-rel, .pg-card, .pk-faq details) { opacity: 0; transform: translateY(22px); }
@media (prefers-reduced-motion: reduce) { .sf-reveal, .sf-reveal * { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---- license cards on desktop (owner: 5 must fit in one row, 6 if someone has 6): one row that never wraps; cards share the width (never wider than 252px), the row scrolls sideways only if they would get narrower than 168px ---- */
@media (min-width: 1101px) {
  .sf-lic-row { flex-wrap: nowrap; justify-content: safe center; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 28px 16px 44px; margin: -14px -16px -28px; }
  .sf-lic-row::-webkit-scrollbar { display: none; }
  /* a card is always as wide as it is when five fit in the row, so one to four licenses look just like five (centered) */
  .sf-lic-card { flex: 0 1 calc((100% - 56px) / 5); min-width: 168px; max-width: 252px; }
}

/* ---------- Hero Builder slides (sf-hero.js). The look is the mock's (mk.css, .mk-sl-*); this is only the glue to the page. ---------- */
#sfHero .sf-card { height: auto; min-height: 0; }
#sfHero .sf-card::after { display: none; }
#sfHero .mk-sl-slide { padding-top: var(--sf-pad, 0px); }
#sfHero .mk-sl-slide:not(.mk-on) { position: absolute; inset: 0; min-height: 0; }
@media (min-width: 781px) {
  #sfHero[data-size="custom"] .mk-sl { --sl-min: var(--sf-h, 450px); }
  #sfHero[data-size="custom"] .mk-sl-slide:not([data-t="center"]) { --sl-aw: min(var(--sl-art, 400px), calc(var(--sf-h, 450px) - 96px)); }
}
#sfHero .mk-sl-slide.sf-still .mk-sl-copy > *, #sfHero .mk-sl-slide.sf-still .mk-sl-art, #sfHero[data-enter="off"] .mk-sl-slide .mk-sl-copy > *, #sfHero[data-enter="off"] .mk-sl-slide .mk-sl-art { animation: none; }
#sfHero[data-pause="on"]:hover .mk-sl-dots button[aria-selected="true"] i::after { animation-play-state: paused; }
#sfHero + #beats { padding-top: 0; }