/* 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; }
.sf-slide { position: absolute; inset: 0 0 var(--sf-e, 0px) 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; overflow: visible; }
.sf-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.sf-bg { position: absolute; inset: 0; }
.sf-bg-blur { inset: -90px; background-size: cover; background-position: center; }
.sf-bg-image { background-image: var(--bg-d); background-size: cover; background-position: var(--fx, 50%) var(--fy, 50%); }
.sf-shade { position: absolute; inset: 0; background: #000; pointer-events: none; }
.sf-art { position: absolute; left: calc(var(--d-left) + var(--d-ox, 0%)); top: calc(var(--d-top) + var(--sf-pad, 0px) * var(--d-pk, 1) + var(--d-oy, 0px)); width: var(--d-w); height: var(--d-h); margin-left: var(--d-ml); margin-top: var(--d-mt); opacity: 0; transition: opacity .6s ease; }
.sf-slide.is-active .sf-art { opacity: 1; }
.sf-single { width: 100%; height: 100%; border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.sf-collage { position: relative; width: 100%; height: 100%; }
.sf-collage-cover { position: absolute; aspect-ratio: 1 / 1; border-radius: 8px; background-size: cover; background-position: center; background-color: #222; }
.sf-collage-badge { position: absolute; right: -6px; bottom: -6px; z-index: 20; padding: 8px 14px; border-radius: 999px; font: 900 13px var(--sans); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.sf-text { position: absolute; left: var(--d-left); right: var(--d-right); top: calc(var(--d-top) + var(--sf-pad, 0px) * var(--d-tp, 1) + var(--d-toy, 0px)); bottom: calc(var(--d-bottom) - var(--d-toy, 0px)); display: flex; flex-direction: column; justify-content: var(--d-justify); align-items: var(--d-align); text-align: var(--d-text); gap: 8px; }
.sf-kicker { font: 800 13px var(--sans); letter-spacing: 2px; text-transform: uppercase; opacity: .92; }
.sf-title { margin: 0; max-width: 560px; font: 900 calc(clamp(34px, 4.6vw, 58px) * var(--hs, 1))/1.02 var(--display, var(--sans)); letter-spacing: -.03em; text-wrap: balance; }
.sf-sub { font: 600 16px var(--sans); opacity: .86; }
.sf-cta-wrap { margin-top: 10px; }
.sf-cta { display: inline-block; white-space: nowrap; padding: 12px 22px; border-radius: 999px; font: 800 14px var(--sans); text-decoration: none; transition: transform .18s ease, filter .18s ease; }
.sf-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.sf-kicker, .sf-title, .sf-sub, .sf-cta-wrap { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.sf-slide.is-active .sf-kicker { opacity: .92; transform: none; transition-delay: .05s; }
.sf-slide.is-active .sf-title { opacity: 1; transform: none; transition-delay: .15s; }
.sf-slide.is-active .sf-sub { opacity: .86; transform: none; transition-delay: .25s; }
.sf-slide.is-active .sf-cta-wrap { opacity: 1; transform: none; transition-delay: .35s; }
.sf-dots { position: absolute; left: auto; right: var(--sf-gr, 56px); bottom: calc(var(--sf-ov, 0px) + 18px); z-index: 6; display: flex; justify-content: flex-end; gap: 10px; }
.sf-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.5); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.sf-dot.is-active { width: 28px; background: #fff; }
body.hdr-overlay { --sf-pad: 0px; }
body.hdr-overlay .sf-card { --sf-pad: 62px; }
.sf-card { --sf-pad: 0px; }

@media (prefers-reduced-motion: reduce) {
  .sf-slide, .sf-art, .sf-kicker, .sf-title, .sf-sub, .sf-cta-wrap { transition: none; transform: none; }
}

@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; }
  .sf-bg-image { background-image: var(--bg-m); }
  .sf-art { left: var(--m-left); top: calc(var(--m-top) + var(--sf-pad, 0px)); width: var(--m-w); height: var(--m-h); margin-left: var(--m-ml); margin-top: var(--m-mt); }
  .sf-text { left: var(--m-left); right: var(--m-right); top: calc(var(--m-top) + var(--sf-pad, 0px)); bottom: var(--m-bottom); justify-content: var(--m-justify); align-items: var(--m-align); text-align: var(--m-text); }
  .sf-title { font-size: clamp(26px, 8vw, 38px); }
  .sf-sub { font-size: 14px; }
  .sf-kicker { font-size: 11px; }
  .sf-cta { padding: 10px 18px; font-size: 13px; }
  .sf-dots { left: 0; right: 0; justify-content: center; bottom: calc(var(--sf-ov, 0px) + 12px); }
  /* compact strip: cover and text sit side by side */
}
@media (max-width: 700px) {
  /* the art/text vars carry mobile geometry for each slide; make the two coordinate systems independent */
  .sf-art, .sf-text { position: absolute; }
}

/* ---------------- product shelves ---------------- */
.sf-shelf { width: min(calc(var(--showcase-catalog-width, 1360px) * var(--sf-w, 1)), calc(100% - 56px)); margin: 44px auto 0; }
body.storefront-compact .sf-shelf { grid-column: 1 / -1; width: calc(100% * var(--sf-w, 1)); margin: 28px auto 0; }
body.storefront-compact-v2 > .sf-shelf, 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-shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sf-shelf-head h2 { margin: 0; font: 900 clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--display, var(--sans)); letter-spacing: -.03em; }
.sf-shelf-head p { margin: 5px 0 0; color: var(--muted); font-size: .9rem; }
.sf-shelf-row { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-layout-grid .sf-shelf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-layout-featured .sf-shelf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-product { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.sf-product:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.14); }
.sf-product-cover { display: block; aspect-ratio: 1 / 1; border-radius: 11px; background: var(--canvas) center / cover no-repeat; }
.sf-product-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-product-copy strong { font: 800 .98rem/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-product-line { display: flex; align-items: baseline; gap: 10px; }
.sf-price { color: var(--red); font-weight: 900; }
.sf-product s { color: var(--muted); font-size: .85em; }
.sf-product small { color: var(--muted); font-weight: 700; }
.sf-product-featured { flex-direction: row; align-items: stretch; gap: 20px; padding: 16px; }
.sf-product-featured .sf-product-cover { width: 42%; flex: none; }
.sf-product-featured .sf-product-copy { justify-content: center; gap: 8px; }
.sf-product-featured .sf-product-copy strong { white-space: normal; font-size: 1.35rem; }
.sf-product-featured em { color: var(--muted); font-style: normal; font-size: .9rem; line-height: 1.4; }
.sf-product-buy { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.sf-product-button { padding: 9px 16px; border-radius: 999px; background: var(--red); color: var(--palette-accent-text, #fff); font: 800 .78rem var(--sans); }
@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)); } }
@media (max-width: 980px) {
  .sf-shelf { width: min(100% - 28px, 700px); margin-top: 34px; }
  /* Card size is set by width, never by how many products there are: aim for the shelf's "per row"
     (3 for grids, otherwise the saved value), but keep every card between --card-min and --card-max. */
  .sf-shelf { --sf-tper: var(--sf-per, 4); --sf-card: clamp(var(--card-min, 160px), calc((100% - 16px * (var(--sf-tper) - 1)) / var(--sf-tper)), var(--card-max, 300px)); }
  .sf-layout-grid { --sf-tper: 3; }
  .sf-shelf-row, .sf-layout-grid .sf-shelf-row { grid-template-columns: repeat(auto-fill, var(--sf-card)); justify-content: start; }
}
@media (max-width: 560px) {
  .sf-shelf-row:not(.sf-carousel), .sf-layout-grid .sf-shelf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .sf-layout-featured .sf-shelf-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sf-shelf { width: calc(100% - 24px); }
  .sf-product-featured { flex-direction: column; }
  .sf-product-featured .sf-product-cover { width: 100%; }
}

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 .sf-shelf, 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; }
.sf-mosaic { display: flex; }
.sf-mosaic span { flex: 1 1 0; background-size: cover; background-position: center; }
.sf-cta-wrap { display: flex; align-items: center; gap: 12px; }
.sf-play { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: transform .18s ease; }
.sf-play:hover { transform: scale(1.07); }
.sf-play .player-glyph { display: block; width: 18px; height: 18px; margin: 0; fill: currentColor; }
.sf-play .play-glyph { transform: translateX(1px); }
.sf-play .pause-glyph, .sf-play.is-playing .play-glyph { display: none; }
.sf-play.is-playing .pause-glyph { display: block; }
.sf-text[style*="--d-align:center"] .sf-cta-wrap { justify-content: center; }
@media (max-width: 700px) { .sf-play { width: 40px; height: 40px; } .sf-mosaic span:nth-child(n+4) { display: none; } }

/* ---------------- bundles slideshow ---------------- */
.sf-shelf-head { align-items: flex-end; }
.sf-bs-nav { display: flex; gap: 8px; }
.sf-bs-nav button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); cursor: pointer; }
.sf-bs-nav button:hover { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.sf-bs-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sf-bs-stage { position: relative; height: 320px; border-radius: 18px; overflow: hidden; isolation: isolate; background: #0a0a0b; }
.sf-bs { position: absolute; inset: 0; display: flex; align-items: center; gap: 44px; padding: 32px 52px; color: #fff; text-decoration: none; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; overflow: hidden; }
.sf-bs.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.sf-bs-bg { position: absolute; inset: -60px; z-index: -2; background-size: cover; background-position: center; filter: blur(44px) saturate(1.2) brightness(.55); background-color: #111; }
.sf-bs .sf-grain { z-index: -1; opacity: .5; }
.sf-bs-cover { flex: none; width: 230px; height: 230px; border-radius: 12px; background: #1a1a1d center / cover no-repeat; box-shadow: 0 22px 50px rgba(0,0,0,.55); }
.sf-bs-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sf-bs-copy small { font: 800 12px var(--sans); letter-spacing: 2px; text-transform: uppercase; opacity: .85; }
.sf-bs-copy strong { font: 900 clamp(28px, 3.6vw, 46px)/1.04 var(--display, var(--sans)); letter-spacing: -.03em; text-wrap: balance; }
.sf-bs-copy em { max-width: 480px; font-style: normal; font-size: .95rem; line-height: 1.45; opacity: .8; }
.sf-bs-buy { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.sf-bs-price { font: 900 1.2rem var(--sans); }
.sf-bs-price s { margin-left: 8px; font-size: .8em; opacity: .6; }
.sf-bs .sf-product-button { background: #fff; color: #0b0b0c; }
.sf-bs-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.sf-bs-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 30%, transparent); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.sf-bs-dot.is-active { width: 26px; background: var(--ink); }
@media (max-width: 700px) {
  .sf-bs-stage { height: 420px; }
  .sf-bs { flex-direction: column; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
  .sf-bs-cover { width: 170px; height: 170px; }
  .sf-bs-copy { align-items: center; }
  .sf-bs-copy strong { font-size: 26px; }
  .sf-bs-copy em { display: none; }
}

/* ---------------- 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; }
body.sf-feat-on .featured-track-card { --ink: #f4f4f5; --muted: #c9c9cf; color: #f4f4f5; }
body:not(.sf-feat-on) .featured-track-card::before, body:not(.sf-feat-on) .featured-track-card::after { display: none; }

/* ---------------- 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 */
@media (min-width: 701px) {
  .sf-text.sf-fit { display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; align-content: var(--d-justify); align-items: start; justify-items: start; }
}
/* 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%); }
.sf-slide > .sf-bg, .sf-slide > .sf-shade, .sf-slide > .sf-grain { bottom: calc(-1 * var(--sf-e, 0px)); }
.sf-slide > .sf-bg-blur { bottom: calc(-90px - var(--sf-e, 0px)); }
.sf-art, .sf-text { z-index: 2; }
#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-bg-gray { -webkit-mask-image: radial-gradient(ellipse 80% 95% at 50% 50%, rgba(0,0,0,.85) 0%, transparent 100%); mask-image: radial-gradient(ellipse 80% 95% at 50% 50%, rgba(0,0,0,.85) 0%, transparent 100%); }
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-single { box-shadow: 0 10px 30px -14px rgba(0,0,0,.3); }

.sf-tint { pointer-events: none; }

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;
  }
}

/* ---- Name hero slide: 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; }

.sf-name-slide { overflow: visible; }
.sf-name-photo { transform: scale(var(--nz, 1)); transform-origin: var(--fx, 50%) var(--fy, 50%); position: absolute; inset: -90px; bottom: calc(-90px - var(--sf-e, 0px)); background-image: var(--bg-d); background-size: cover; background-position: var(--fx, 50%) var(--fy, 50%); }
.sf-name-shade { position: absolute; inset: 0; bottom: calc(-1 * var(--sf-e, 0px)); }
.sf-name-slide > .sf-grain { bottom: calc(-1 * var(--sf-e, 0px)); }
.sf-name-defs { position: absolute; width: 0; height: 0; }
.sf-name-wrap { position: absolute; left: 0; right: 0; top: var(--sf-pad, 0px); bottom: 0; padding: 64px 6% 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; z-index: 2; box-sizing: border-box; }
.sf-name { margin: 0; max-width: 100%; text-shadow: 0 6px 40px rgba(0, 0, 0, .35); overflow-wrap: normal; }
.sf-name-sub { font: 700 clamp(11px, 1.15vw, 15px) var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .88; }
.sf-name-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.sf-cta-ghost { background: transparent; border: 1.5px solid currentColor; padding: 10.5px 22px; }
.sf-name, .sf-name-sub, .sf-name-btns { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.sf-slide.is-active .sf-name, .sf-slide.is-active .sf-name-sub, .sf-slide.is-active .sf-name-btns { opacity: 1; transform: none; }
.sf-slide.is-active .sf-name-sub { transition-delay: .12s; }
.sf-slide.is-active .sf-name-btns { transition-delay: .24s; }
@media (max-width: 700px) {
  .sf-name-photo { background-image: var(--bg-m); background-size: var(--bgs-m, cover); }
  .sf-name-wrap { padding: 60px 5% 46px; gap: 12px; }
  .sf-cta-ghost { padding: 8.5px 18px; }
}
@media (prefers-reduced-motion: reduce) { .sf-name, .sf-name-sub, .sf-name-btns { transition: none; transform: none; } }

/* fade the bottom of the hero into the page color */
.sf-fade { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--sf-fade, 0) * 1%); max-height: 100%; z-index: 5; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--canvas, #0d0d0d) 0%, transparent) 0%, color-mix(in srgb, var(--canvas, #0d0d0d) 8%, transparent) 18%, color-mix(in srgb, var(--canvas, #0d0d0d) 28%, transparent) 38%, color-mix(in srgb, var(--canvas, #0d0d0d) 58%, transparent) 62%, color-mix(in srgb, var(--canvas, #0d0d0d) 86%, transparent) 84%, var(--canvas, #0d0d0d) 100%); }

/* name hero: zoom, slow motion, text position */
.sf-name-photo { will-change: transform; }
@keyframes sfn-zin { from { transform: scale(var(--nz, 1)); } to { transform: scale(calc(var(--nz, 1) * 1.2)); } }
@keyframes sfn-zout { from { transform: scale(calc(var(--nz, 1) * 1.2)); } to { transform: scale(var(--nz, 1)); } }
@keyframes sfn-pan { from { transform: translate3d(-4%, 0, 0) scale(var(--nz, 1)); } to { transform: translate3d(4%, 0, 0) scale(var(--nz, 1)); } }
@keyframes sfn-tilt { from { transform: translate3d(0, -4%, 0) scale(var(--nz, 1)); } to { transform: translate3d(0, 4%, 0) scale(var(--nz, 1)); } }
.sf-nm-zoomin, .sf-nm-zoomout, .sf-nm-pan, .sf-nm-tilt { animation-duration: var(--nsec, 16s); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: paused; }
.sf-nm-zoomin { animation-name: sfn-zin; } .sf-nm-zoomout { animation-name: sfn-zout; } .sf-nm-pan { animation-name: sfn-pan; } .sf-nm-tilt { animation-name: sfn-tilt; }
.sf-slide.is-active .sf-nm-zoomin, .sf-slide.is-active .sf-nm-zoomout, .sf-slide.is-active .sf-nm-pan, .sf-slide.is-active .sf-nm-tilt { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .sf-nm-zoomin, .sf-nm-zoomout, .sf-nm-pan, .sf-nm-tilt { animation: none; } }
.sf-name-wrap[data-v="top"] { justify-content: flex-start; }
.sf-name-wrap[data-v="bottom"] { justify-content: flex-end; }
.sf-name-wrap[data-a="left"] { align-items: flex-start; text-align: left; }
.sf-name-wrap[data-a="right"] { align-items: flex-end; text-align: right; }
.sf-name-wrap[data-a="left"] .sf-name-btns { justify-content: flex-start; }
.sf-name-wrap[data-a="right"] .sf-name-btns { justify-content: flex-end; }
.sf-name-wrap { user-select: none; -webkit-user-select: none; }
.sf-name-wrap .sf-name-btns { user-select: auto; }

/* 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(.sf-bg-blur, .sf-bg-image, .sf-name-photo.sf-nm-off) { animation: sfbg-drift var(--bgm-sec, 20s) ease-in-out var(--bgm-d, 0s) infinite alternate; }
#sfHero[data-bgm="zoom"][data-carry="1"] :is(.sf-bg-blur, .sf-bg-image, .sf-name-photo.sf-nm-off) { animation: sfbg-zoom var(--bgm-sec, 20s) ease-in-out var(--bgm-d, 0s) infinite alternate; }
#sfHero[data-bgm="both"][data-carry="1"] :is(.sf-bg-blur, .sf-bg-image, .sf-name-photo.sf-nm-off) { animation: sfbg-both var(--bgm-sec, 20s) ease-in-out var(--bgm-d, 0s) infinite alternate; }
#sfHero[data-bgm="drift"][data-carry="0"] .sf-slide.is-active :is(.sf-bg-blur, .sf-bg-image, .sf-name-photo.sf-nm-off) { animation: sfbg-drift var(--bgm-sec, 20s) ease-in-out infinite alternate; }
#sfHero[data-bgm="zoom"][data-carry="0"] .sf-slide.is-active :is(.sf-bg-blur, .sf-bg-image, .sf-name-photo.sf-nm-off) { animation: sfbg-zoom var(--bgm-sec, 20s) ease-in-out infinite alternate; }
#sfHero[data-bgm="both"][data-carry="0"] .sf-slide.is-active :is(.sf-bg-blur, .sf-bg-image, .sf-name-photo.sf-nm-off) { animation: sfbg-both var(--bgm-sec, 20s) ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { #sfHero[data-bgm] :is(.sf-bg-blur, .sf-bg-image, .sf-name-photo) { 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; margin-left: 8px; 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 ---------------- */
.sf-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 16px; padding-bottom: 4px; }
.sf-carousel::-webkit-scrollbar { display: none; }
.sf-carousel .sf-product { flex: 0 0 calc((100% - 16px * (var(--sf-per, 4) - 1)) / var(--sf-per, 4)); scroll-snap-align: start; }
@media (max-width: 980px) { .sf-carousel .sf-product { flex-basis: var(--sf-card); } }
.sf-feat { width: min(calc(var(--showcase-catalog-width, 1360px) * var(--sf-w, 1)), calc(100% - 56px)); margin: 44px auto 0; }
body.storefront-compact .sf-feat { grid-column: 1 / -1; width: calc(100% * var(--sf-w, 1)); margin: 28px auto 0; }
body.storefront-compact-v2 > .sf-feat { width: calc(min(var(--v2-page-width, 1800px), 100% - 64px) * var(--sf-w, 1)); margin-inline: auto; }
.sf-feat-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; align-items: start; padding: 28px; border-radius: 22px; }
.sf-feat-bg-surface .sf-feat-card { background: var(--surface); }
.sf-feat-bg-plain .sf-feat-card { background: transparent; padding-inline: 0; }
.sf-feat-right .sf-feat-art { order: 2; }
.sf-feat-art { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: var(--canvas); }
.sf-feat-cover { position: absolute; inset: 0; background: var(--canvas) center / cover no-repeat; transition: transform .5s ease; }
.sf-feat-zoom .sf-feat-art:hover .sf-feat-cover { transform: scale(1.03); }
.sf-feat-badge { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--red); color: var(--palette-accent-text, #fff); font: 850 .72rem var(--sans); }
.sf-feat-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf-feat-eyebrow { color: var(--red); font: 850 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.sf-feat-info h2 { margin: 0; font: 900 clamp(1.9rem, 3.4vw, 3rem)/1.02 var(--display, var(--sans)); letter-spacing: -.04em; }
.sf-feat-info p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; max-width: 52ch; }
.sf-feat-description { max-width: 52ch; color: var(--muted); font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
@media (min-width: 981px) { .sf-feat-info:has(.sf-feat-secondary) .sf-feat-description { width: calc(100% - var(--sf-preview-cut, 0px)); max-width: none; box-sizing: border-box; } }
.sf-feat-description p { margin: 0 0 12px; color: inherit; font-size: inherit; line-height: inherit; }
.sf-feat-description > :last-child { margin-bottom: 0; }
.sf-feat-description :is(ul, ol) { padding-left: 24px; }
.sf-feat-description blockquote { margin: 0 0 12px 24px; }
.sf-feat-list { margin-top: 6px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, transparent); overflow: hidden; }
.sf-feat-info:has(.sf-feat-secondary) .sf-feat-list { width: 100%; }
.sf-feat-list-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; }
.sf-feat-list-head b { font: 800 .86rem var(--sans); }
.sf-feat-list-head small { color: var(--muted); font-weight: 700; }
.sf-feat-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); }
.sf-feat-play { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); cursor: pointer; transition: transform .15s ease, background .15s ease; }
.sf-feat-play:hover { transform: scale(1.08); }
.sf-feat-play.is-playing { background: var(--red); color: var(--palette-accent-text, #fff); }
.sf-feat-play .player-glyph { display: block; width: 15px; height: 15px; fill: currentColor; }
.sf-feat-play .pause-glyph, .sf-feat-play.is-playing .play-glyph { display: none; }
.sf-feat-play.is-playing .pause-glyph { display: block; }
.sf-feat-title { display: flex; flex-direction: column; min-width: 0; }
.sf-feat-title b { font: 750 .9rem var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-feat-title small { color: var(--muted); font-weight: 650; font-size: .76rem; }
.sf-feat-more { display: block; padding: 11px 14px; border-top: 1px solid var(--line); color: var(--red); font: 800 .8rem var(--sans); text-decoration: none; }
.sf-feat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-feat-chips span { padding: 6px 11px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 7%, transparent); font: 750 .76rem var(--sans); }
.sf-feat-buy { display: flex; align-items: center; gap: 18px; margin-top: 6px; flex-wrap: wrap; }
.sf-feat-price { display: flex; align-items: baseline; gap: 10px; }
.sf-feat-price b { font: 900 2rem var(--sans); letter-spacing: -.03em; }
.sf-feat-price s { color: var(--muted); font-size: 1.05rem; }
.sf-feat-button { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 200px; min-height: 52px; padding: 0 26px; border-radius: 12px; background: var(--red); color: var(--palette-accent-text, #fff); font: 850 1rem var(--sans); text-decoration: none; transition: transform .15s ease, filter .15s ease; }
.sf-feat-button:hover { transform: translateY(-1px); filter: brightness(.95); }
@media (max-width: 980px) { .sf-feat { width: min(100% - 28px, 700px); margin-top: 34px; } .sf-feat-card { grid-template-columns: 1fr; gap: 22px; padding: 18px; } .sf-feat-right .sf-feat-art { order: 0; } .sf-feat-art { width: min(100%, 460px); margin-inline: auto; } }
@media (max-width: 980px) { .sf-feat-info:has(.sf-feat-secondary) .sf-feat-list { width: 100%; } }
html.sfe-embed .sf-feat { cursor: pointer; }

/* ---- product cards: clean by default (cover, then text), boxed on request ---- */
.sf-shelf { --sf-sale: #e11d2e; }
.sf-product { position: relative; }
.sf-card-clean .sf-product { padding: 0; background: transparent; border-radius: 0; gap: 12px; }
.sf-card-clean .sf-product:hover { transform: none; box-shadow: none; }
.sf-card-clean .sf-product-cover { border-radius: 16px; transition: transform .25s ease, box-shadow .25s ease; }
.sf-card-clean .sf-product:hover .sf-product-cover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.22); }
.sf-card-clean .sf-product-featured { gap: 22px; padding: 0; }
.sf-card-boxed .sf-product-cover { border-radius: 11px; }
.sf-product-kind { color: var(--muted); font-weight: 600; font-size: .78rem; }
.sf-product-copy { gap: 3px; }
.sf-product-line { margin-top: 5px; }
.sf-price { color: var(--ink); }
.sf-price.is-sale { color: var(--sf-sale, #e11d2e); }
.sf-product-badge { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: var(--sf-sale, #e11d2e); color: #fff; font: 800 .68rem/1 var(--sans); letter-spacing: .02em; }
.sf-product-cover { position: relative; }

/* ---- featured product: scrolling player, sale price, two buttons ---- */
.sf-feat-row { padding: 0 14px; min-height: 46px; box-sizing: border-box; }
.sf-feat-row[hidden] { display: none; }
.sf-feat-play { width: 28px; height: 28px; }
.sf-feat-play .player-glyph { width: 12px; height: 12px; }
.sf-feat-title { flex-direction: row; align-items: baseline; gap: 10px; }
.sf-feat-scroll { max-height: calc(var(--sf-rows, 7) * 52px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent; overscroll-behavior: contain; }
.sf-feat-scroll.is-scrolling { -webkit-mask-image: none; mask-image: none; }
.sf-feat-scroll.is-scrolling:hover, .sf-feat-scroll.is-scrolling:focus-within { -webkit-mask-image: none; mask-image: none; }
.sf-feat-search { padding: 0 12px 10px; }
.sf-feat-search input { width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); font: 650 .84rem var(--sans); outline: none; }
.sf-feat-search input:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 35%, transparent); }
.sf-feat-eyebrow { color: var(--red); }
.sf-feat-price b.is-sale { color: var(--sf-sale, #e11d2e); }
.sf-feat-badge { background: var(--sf-sale, #e11d2e); color: #fff; }
.sf-feat-button { border: 0; cursor: pointer; background: var(--sf-btn, var(--red)); }
.sf-feat-button:disabled { opacity: .7; cursor: default; }
.sf-feat-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 28%, transparent); color: var(--ink); font: 800 .95rem var(--sans); text-decoration: none; transition: background-color .15s ease; }
.sf-feat-secondary:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.sf-preview { border: 1px solid var(--line); background: var(--surface); }
@media (min-width: 981px) { .sf-feat-info:has(.sf-feat-secondary) .sf-preview { width: calc(100% - var(--sf-preview-cut, 0px)); box-sizing: border-box; } }
body.theme-beast-mode .sf-feat .sf-preview { background: color-mix(in srgb, var(--canvas) 72%, #000); }
.sf-preview-now { display: flex; align-items: center; gap: 12px; padding: 12px 14px 5px; }
.sf-preview-now > img { width: 46px; height: 46px; flex: none; object-fit: cover; border-radius: 8px; background: var(--canvas); }
.sf-preview-now-title { flex: 1; min-width: 0; }
.sf-preview-now-title small { display: block; color: var(--red); font: 800 10px var(--sans); letter-spacing: .14em; }
.sf-preview-now-title b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1rem var(--sans); }
.sf-preview-transport { display: flex; align-items: center; gap: 4px; }
.sf-preview-transport button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.sf-preview-transport button svg { width: 16px; height: 16px; fill: currentColor; }
.sf-preview-transport .sf-preview-main { width: 46px; height: 46px; background: var(--red); color: var(--palette-accent-text, #fff); box-shadow: none; outline: 0; }
.sf-preview-main .player-glyph { width: 19px; height: 19px; }
.sf-preview-main .pause-glyph, .sf-preview-main.is-playing .play-glyph { display: none; }
.sf-preview-main.is-playing .pause-glyph { display: block; }
.sf-preview-transport button:hover { filter: brightness(1.12); }
.sf-preview-transport button:focus-visible, .sf-preview-row:focus-visible, .sf-preview-wave:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sf-preview-wave { position: relative; height: 44px; margin: 3px 14px 0; cursor: pointer; }
.sf-preview-wave-bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.sf-preview-wave-bars span { flex: 1; min-width: 1px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 24%, transparent); }
.sf-preview-wave-progress { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--sf-preview-progress, 0%)) 0 0); }
.sf-preview-wave-progress .sf-preview-wave-bars span { background: var(--red); }
.sf-preview-times { display: flex; justify-content: space-between; padding: 0 14px 10px; color: var(--muted); font: 750 .72rem var(--sans); }
.sf-preview-row { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; height: 52px; padding: 6px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); font-family: var(--sans); text-align: left; cursor: pointer; }
.sf-preview-row:hover, .sf-preview-row.on { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.sf-preview-row.on b { color: var(--red); }
.sf-preview-row[hidden] { display: none; }
.sf-preview-num { width: 20px; flex: none; color: var(--muted); font-size: .65rem; font-weight: 800; }
.sf-preview-row > img { width: 36px; height: 36px; flex: none; object-fit: cover; border-radius: 7px; background: var(--canvas); }
.sf-preview-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.sf-preview-mini { display: flex; align-items: center; gap: 1px; width: 100px; height: 18px; flex: none; }
.sf-preview-mini span { flex: 1; min-width: 1px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 24%, transparent); }
.sf-preview-row.on .sf-preview-mini span { background: var(--red); }
.sf-preview-row time { color: var(--muted); font-size: .68rem; font-weight: 800; }
@media (max-width: 600px) { .sf-preview-mini { display: none; } .sf-preview-now { gap: 8px; padding-inline: 10px; } .sf-preview-row { padding-inline: 10px; } .sf-preview-wave { margin-inline: 10px; } .sf-preview-times { padding-inline: 10px; } }

/* ---- 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 > .sf-shelf, #top > .sf-feat, #top > .license-studio, #top > #beats, #top > #sfSignup, body > .sf-shelf, body > .sf-feat { 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. */
body .sf-shelf { margin-top: var(--sf-section-top, 44px); }
body .sf-shelf:is(.sf-layout-grid, .sf-layout-cards) .sf-shelf-row { grid-template-columns: repeat(var(--sf-per, 4), minmax(0, 1fr)); gap: calc(var(--sf-grid-gap, 24px) * 1.8) var(--sf-grid-gap, 24px); }
body .sf-shelf .sf-product-copy strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 700 16px/1.35 var(--sans); }
body .sf-shelf.sf-card-clean .sf-product-cover { border-radius: var(--sf-image-radius, 6px); box-shadow: none; }
body .sf-shelf.sf-card-clean .sf-product:hover .sf-product-cover { transform: none; box-shadow: none; }
body .sf-shelf .sf-product-line { margin-top: 3px; gap: 8px; flex-wrap: wrap; font-size: 14px; }
body .sf-shelf .sf-price { font-weight: 600; }
body .sf-shelf .sf-product { gap: 14px; }
body .sf-shelf[data-image-ratio="portrait"] .sf-product-cover { aspect-ratio: 3 / 4; }
body .sf-shelf[data-image-ratio="landscape"] .sf-product-cover { aspect-ratio: 4 / 3; }
body .sf-shelf[data-image-ratio="original"] .sf-product-cover { aspect-ratio: 1; background-size: contain; }
@media (max-width: 980px) { body .sf-shelf:is(.sf-layout-grid, .sf-layout-cards) .sf-shelf-row { grid-template-columns: repeat(min(var(--sf-per, 4), 3), minmax(0, 1fr)); } }
@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; }
  body .sf-shelf { margin-top: var(--sf-section-top-mobile, 28px); }
  body .sf-shelf:is(.sf-layout-grid, .sf-layout-cards) .sf-shelf-row { grid-template-columns: repeat(var(--sf-per-mobile, 2), minmax(0, 1fr)); gap: 28px 14px; }
  body .sf-shelf .sf-product-copy strong { font-size: 14px; }
  body .sf-shelf .sf-product-line { font-size: 13px; }
}
@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(.sf-feat-card, .sf-shelf, #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-title { font-size: calc(clamp(34px, 4.6vw, 58px) * var(--hs, 1) * var(--heading-scale, 1)); }
.sf-shelf-head h2, .sf-bundle-heading h2, .sf-faq-section h2 { font-size: calc(clamp(1.5rem, 2.4vw, 2rem) * var(--heading-scale, 1)); }
.sf-feat-info h2 { font-size: calc(clamp(1.9rem, 3.4vw, 3rem) * 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)); }
.sf-sub { font-size: calc(16px * var(--subheading-scale, 1)); }
.sf-name-sub { font-size: calc(clamp(11px, 1.15vw, 15px) * var(--subheading-scale, 1)); }
.sf-feat-eyebrow, .sf-kicker { font-size: calc(.72rem * var(--subheading-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; } }
#top > .sf-shelf + #beats, #top > .sf-feat + #beats { margin-top: 44px; }
#top > #beats + .sf-shelf, #top > #beats + .sf-feat { margin-top: 44px; }
body.storefront-compact #top > .sf-shelf + #beats, body.storefront-compact #top > .sf-feat + #beats { margin-top: 0; }

/* 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) */
.sf-fg { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sf-fg > * { pointer-events: auto; }
@media (min-width: 701px) { .sf-fg { width: calc(100% / var(--sf-k, 1)); height: calc(100% / var(--sf-k, 1)); transform: scale(var(--sf-k, 1)); transform-origin: 0 0; } }

/* ---- 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: 1 0 164px; 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, body .sf-shelf { 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, .sf-product, .sf-bs-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, .sf-product, .sf-bs-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; } }