/* Sweet SFX Home Hero (see hero.js). 1.2.0: the styles for the earlier layouts, slides, card stack and carousel were taken out.
   Every rule starts with the hero's ID, so the theme's and the Elementor
   kit's styles for buttons, inputs, links and headings (all element or class
   rules) can't take over its parts. */

/* ---- Theme guard: a clean start for the elements the theme styles ---- */
#sweet-sfx-hero, #sweet-sfx-hero * { box-sizing: border-box; }
#sweet-sfx-hero { font-family: Poppins, sans-serif; font-weight: 300; font-size: 18px; line-height: 1.5; color: #000; text-align: left; }
#sweet-sfx-hero h1, #sweet-sfx-hero h2, #sweet-sfx-hero p, #sweet-sfx-hero ul, #sweet-sfx-hero li { margin: 0; padding: 0; }
#sweet-sfx-hero h1 { text-transform: none; letter-spacing: normal; }
#sweet-sfx-hero ul { list-style: none; }
#sweet-sfx-hero a { color: inherit; text-decoration: none; box-shadow: none; }
#sweet-sfx-hero button, #sweet-sfx-hero input { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit;
  letter-spacing: normal; text-transform: none; line-height: normal; min-height: 0; width: auto; height: auto; white-space: normal; transition: none; text-decoration: none; }
#sweet-sfx-hero img { border: 0; box-shadow: none; max-width: none; }
#sweet-sfx-hero svg { display: block; }

/* Width: the hero follows its Elementor section (88% wide on desktop, like
   the rest of the page), with the page's 5% side margins on phones. */

/* ---- The hero (from the approved demo) ---- */
.sx-header-search { transition: opacity .35s ease, visibility .35s; }
.sx-header-search.is-hidden-by-hero { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
#sweet-sfx-hero.sx-hero { --sx-accent: #e50914; --sx-header: 78px; --k: 1; position: relative; overflow: visible; /* artwork may lift past the edges, as in the shop */ background: #fff;
  min-height: calc(100vh - var(--sx-header)); min-height: calc(100svh - var(--sx-header)); display: flex; }
#sweet-sfx-hero.sx-hero.is-pending .sx-intro > *, #sweet-sfx-hero.sx-hero.is-pending .sx-show { opacity: 0; }
#sweet-sfx-hero .sx-hero__inner { width: 100%; max-width: none; margin: 0; padding: clamp(44px, 7.5vh, 88px) 0 40px; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; align-content: start; } /* sits near the top, not centred */
#sweet-sfx-hero.sx-hero a { -webkit-tap-highlight-color: transparent; }
/* Focus rings only for keyboard users (hero.js adds .is-keyboard after Tab); a mouse click never leaves one. */
#sweet-sfx-hero.sx-hero :focus, #sweet-sfx-hero.sx-hero :focus-visible { outline: none; box-shadow: none; }
#sweet-sfx-hero.sx-hero.is-keyboard :focus-visible { outline: 2px solid var(--sx-accent); outline-offset: 3px; }

/* Left: what the site is, and the way into the shop. It never changes. */
#sweet-sfx-hero .sx-intro__eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--sx-accent); font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
#sweet-sfx-hero .sx-intro__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--sx-accent); }
#sweet-sfx-hero .sx-intro__title { margin: 0 0 20px; font-size: clamp(42px, 5vw, 80px); line-height: 1.03; font-family: var(--e-global-typography-primary-font-family, "Varela Round"), sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 900); font-style: normal; letter-spacing: -.02em; color: #000; }
#sweet-sfx-hero .sx-intro__title em { font-style: normal; color: var(--sx-accent); }
#sweet-sfx-hero .sx-intro__text { margin: 0 0 30px; max-width: 580px; font-size: var(--e-global-typography-text-font-size, 18px); line-height: 1.6; color: var(--e-global-color-text, #000); }
/* The paragraphs use the site's own text size (Elementor's global Text: 18px desktop, 16px tablet, 14px phone), so they match the rest of the site; the rest of the hero scales. */
/* Several paragraphs: a smaller gap between them than below the last (beats the size rules below). */
#sweet-sfx-hero .sx-intro .sx-intro__text:has(+ .sx-intro__text) { margin-bottom: .7em; }
#sweet-sfx-hero .sx-intro__types { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 26px; }
#sweet-sfx-hero .sx-intro__types-label { font-size: 13px; font-weight: 600; color: #777; margin-right: 4px; }
#sweet-sfx-hero .sx-chip { display: inline-block; padding: 7px 16px; border-radius: 18px; background: #f3f3f3; color: #000; font-size: 14px; font-weight: 400; text-decoration: none;
  transition: background-color .2s, color .2s, transform .2s; }
#sweet-sfx-hero .sx-chip:hover { background: var(--sx-accent); color: #fff; transform: translateY(-2px); }

/* Left, B: search first */
#sweet-sfx-hero .sx-search { display: flex; max-width: 580px; height: 64px; margin: 0 0 18px; border: 2px solid #000; border-radius: 32px; overflow: hidden; background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.08); transition: box-shadow .25s, border-color .25s; }
#sweet-sfx-hero .sx-search:focus-within { border-color: var(--sx-accent); box-shadow: 0 10px 28px rgba(0,0,0,.08); } /* red border, no red glow */
#sweet-sfx-hero .sx-search__input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 26px; font: 400 17px Poppins, sans-serif; color: #000; background: none; }
#sweet-sfx-hero .sx-search__btn { display: inline-flex; align-items: center; gap: 10px; margin: 6px; padding: 0 24px; border: 0; border-radius: 26px; background: var(--sx-accent); color: #fff;
  font: 700 14px Poppins, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color .2s; }
#sweet-sfx-hero .sx-search__btn:hover { background: #c80711; }
#sweet-sfx-hero .sx-search__btn svg { width: 18px; height: 18px; }
#sweet-sfx-hero .sx-intro__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; justify-content: space-between; max-width: 580px; }
/* Left, D: big numbers */
#sweet-sfx-hero .sx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 12px 40px; margin: 0 0 32px; padding-top: 22px; border-top: 1px solid #eee; max-width: 580px; } /* spread across the search box's width */
#sweet-sfx-hero .sx-stat__big { display: block; font: 900 clamp(34px, 3.4vw, 52px)/1 "Varela Round", sans-serif; color: #000; letter-spacing: -.02em; }
#sweet-sfx-hero .sx-stat:first-child .sx-stat__big { color: var(--sx-accent); }
#sweet-sfx-hero .sx-stat__label { display: block; margin-top: 6px; font-size: 13px; color: #666; }
#sweet-sfx-hero .sx-stat { text-align: center; } /* each small line centred under its number */
#sweet-sfx-hero .sx-intro--statsearch .sx-intro__types { margin-bottom: 0; }
#sweet-sfx-hero .sx-intro--statsearch .sx-stats { margin: 24px 0 22px; padding-top: 20px; }

/* Right: the showcase. Shared pieces first. */
#sweet-sfx-hero .sx-show { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
#sweet-sfx-hero .sx-shine { position: absolute; inset: 0; z-index: 50; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
#sweet-sfx-hero .sx-cap__link { display: inline-flex; align-items: center; gap: 8px; color: #000; font-size: 15px; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--sx-accent); padding-bottom: 2px; }
#sweet-sfx-hero .sx-cap__link svg { width: 14px; height: 14px; transition: transform .25s; }
#sweet-sfx-hero .sx-cap__link:hover { color: var(--sx-accent); }
#sweet-sfx-hero .sx-cap__link:hover svg { transform: translateX(4px); }
@keyframes sx-pulse { 50% { box-shadow: 0 0 0 8px rgba(229,9,20,.15); } } /* the ring that comes out while loading: no blur */
@keyframes sx-bar { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
/* Style 3, shop window */
#sweet-sfx-hero .sx-wall { width: min(100%, 600px); }
/* Desktop: the shop window sits on the same bottom line as the left side, so
   "Click a library to hear it" lines up with "Browse all … libraries". */
@media (min-width: 801px) and (min-height: 501px), (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-hero .sx-show--wall { align-self: end; }
  /* Whichever side is taller, the bottom lines meet. */
  #sweet-sfx-hero .sx-hero__inner:has(.sx-show--wall) .sx-intro { align-self: end; }
}
#sweet-sfx-hero .sx-wall__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); /* --cols set by hero.js */ gap: 16px; perspective: 1000px; }
#sweet-sfx-hero .sx-tile { position: relative; display: block; color: #000; text-align: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
/* The artwork plays the demo; the name goes to the library. */
#sweet-sfx-hero .sx-tile__media { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
#sweet-sfx-hero .sx-tile__name { color: #000; text-decoration: none; }
#sweet-sfx-hero .sx-tile__name:hover { color: var(--sx-accent); }
#sweet-sfx-hero .sx-tile__play { position: absolute; left: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--sx-accent); color: #fff;
  display: none; align-items: center; justify-content: center; box-shadow: none; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
#sweet-sfx-hero .sx-tile.has-audio .sx-tile__play { display: inline-flex; }
#sweet-sfx-hero .sx-tile__media:hover .sx-tile__play { transform: scale(1.12); }
#sweet-sfx-hero .sx-tile__play svg { width: 20px; height: 20px; margin-left: 2px; }
#sweet-sfx-hero .sx-tile__bars { display: none; align-items: flex-end; gap: 2px; height: 18px; }
#sweet-sfx-hero .sx-tile__bars i { width: 3px; height: 100%; border-radius: 2px; background: #fff; transform-origin: bottom; animation: sx-bar .9s ease-in-out infinite; }
#sweet-sfx-hero .sx-tile__bars i:nth-child(2) { animation-delay: -.3s; } #sweet-sfx-hero .sx-tile__bars i:nth-child(3) { animation-delay: -.6s; }
#sweet-sfx-hero .sx-tile.is-playing .sx-tile__play svg { display: none; }
#sweet-sfx-hero .sx-tile.is-playing .sx-tile__bars { display: inline-flex; }
/* With the Savage hover on, it does the lifting instead of the simple hover. */
#sweet-sfx-hero .sx-wall.has-tilt .sx-tile:hover { transform: none; }
#sweet-sfx-hero .sx-tile__shine { z-index: 2; }
#sweet-sfx-hero .sx-tile__play { z-index: 3; }
#sweet-sfx-hero .sx-tile__media { transform-style: preserve-3d; will-change: transform; }
/* The player under the tiles */
#sweet-sfx-hero .sx-player { display: grid; grid-template-columns: 56px minmax(0, 1fr) 52px; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 14px;
  border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06); }
#sweet-sfx-hero .sx-player__art { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; display: block; background: #f4f4f4; }
#sweet-sfx-hero .sx-player__title { font-size: 15px; font-family: var(--e-global-typography-primary-font-family, "Varela Round"), Poppins, sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 900); color: #000; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sweet-sfx-hero .sx-player__title:hover { color: var(--sx-accent); }
#sweet-sfx-hero .sx-player__time { flex: none; font-size: 12px; color: #777; font-variant-numeric: tabular-nums; white-space: nowrap; }
#sweet-sfx-hero .sx-wave { position: relative; height: 34px; cursor: pointer; outline-offset: 4px; }
#sweet-sfx-hero .sx-wave__bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; pointer-events: none; }
#sweet-sfx-hero .sx-wave__bars i { flex: 1; min-width: 1px; border-radius: 2px; background: #dcdcdc; transition: height .5s cubic-bezier(.2,.8,.2,1); }
#sweet-sfx-hero .sx-wave__bars--played { clip-path: inset(0 100% 0 0); transition: clip-path .25s linear; }
#sweet-sfx-hero .sx-wave__bars--played i { background: var(--sx-accent); }
#sweet-sfx-hero .sx-wave:hover .sx-wave__bars:not(.sx-wave__bars--played) i { background: #c9c9c9; }
#sweet-sfx-hero .sx-player__play { width: 52px; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--sx-accent); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: none; transition: transform .2s cubic-bezier(.2,.8,.2,1), background-color .2s; }
#sweet-sfx-hero .sx-player__play:hover { transform: scale(1.06); background: #c80711; }
#sweet-sfx-hero .sx-player__play svg { width: 26px; height: 26px; }
#sweet-sfx-hero .sx-player[data-state="idle"] .sx-player__play svg, #sweet-sfx-hero .sx-player[data-state="paused"] .sx-player__play svg { margin-left: 3px; }
#sweet-sfx-hero .sx-player[data-state="loading"] .sx-player__play { animation: sx-pulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #sweet-sfx-hero .sx-tile__bars i, #sweet-sfx-hero .sx-player[data-state="loading"] .sx-player__play { animation: none; } }
#sweet-sfx-hero .sx-tile:hover { transform: translateY(-6px); }
#sweet-sfx-hero .sx-tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; display: block; border-radius: 0; background: none; box-shadow: none; } /* as in the shop: the artwork as it is */
/* Under the tiles, as in the shop: names in the Elementor kit's Primary font (Varela Round 900), prices in its Text font (Poppins 300), both centred. Sizes stay the hero's own. */
#sweet-sfx-hero .sx-tile__name { display: block; margin-top: 8px; font-size: 14px; font-family: var(--e-global-typography-primary-font-family, "Varela Round"), Poppins, sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 900); line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sweet-sfx-hero .sx-tile__price { display: block; font-size: 12px; color: #666; font-family: var(--e-global-typography-text-font-family, Poppins), sans-serif; font-weight: var(--e-global-typography-text-font-weight, 300); text-align: center; }
#sweet-sfx-hero .sx-wall__head { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--sx-accent); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
#sweet-sfx-hero .sx-wall__head svg { width: 20px; height: 20px; flex: none; }

/* Phones and narrow tablets: the shop message first (visible straight away), the showcase under it. */
/* Phones, and phones held sideways (short landscape screens): the stacked phone layout. */
@media (max-width: 800px), (max-height: 500px) and (orientation: landscape) {
  #sweet-sfx-hero.sx-hero { --sx-header: 112px; min-height: 0; }
  #sweet-sfx-hero .sx-hero__inner { grid-template-columns: 1fr; gap: 26px; padding: 22px 5% 30px; }
  #sweet-sfx-hero .sx-intro__eyebrow { font-size: 12px; margin-bottom: 10px; }
  #sweet-sfx-hero .sx-intro__title { font-size: clamp(34px, 10vw, 48px); margin-bottom: 12px; }
  #sweet-sfx-hero .sx-intro__text { font-size: var(--e-global-typography-text-font-size, 14px); line-height: 1.55; margin-bottom: 18px; text-align: justify; }
  #sweet-sfx-hero .sx-intro__types { margin-bottom: 16px; }
  #sweet-sfx-hero .sx-chip { padding: 6px 13px; font-size: 13px; }
  #sweet-sfx-hero .sx-search { display: none; } /* phones: the header's search is just above */
  #sweet-sfx-hero .sx-search__input { padding: 0 16px; font-size: 15px; }
  #sweet-sfx-hero .sx-search__btn { padding: 0 16px; }
  #sweet-sfx-hero .sx-search__btn span { display: none; }
  #sweet-sfx-hero .sx-stats { gap: 10px 22px; }
  #sweet-sfx-hero .sx-stat__big { font-size: 30px; }
  #sweet-sfx-hero .sx-wall__grid { gap: 10px; }
  #sweet-sfx-hero .sx-tile__name { font-size: 12px; }
  #sweet-sfx-hero .sx-tile__price { font-size: 10.5px; }
  /* Full width: the laptop caps (580px text, 600px tiles) only showed once a phone was held sideways. */
  #sweet-sfx-hero .sx-intro__text, #sweet-sfx-hero .sx-stats, #sweet-sfx-hero .sx-intro__foot, #sweet-sfx-hero .sx-intro--statsearch .sx-intro__types { max-width: none; }
  #sweet-sfx-hero .sx-wall { width: 100%; }
}

/* ---- Laptops and bigger: everything is sized by --k, so the hero fills the
   first screen under the header. hero.js works --k out from the window's
   height and width; without it: 1, then 1.18 from 1600px wide, 1.38 from 2200px. ---- */
@media (min-width: 801px) and (min-height: 501px), (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-hero .sx-hero__inner { gap: calc(56px * var(--k)); grid-template-columns: minmax(0, var(--sx-left, 1fr)) minmax(0, 1fr); } /* the message's column is as wide as its text (hero.js sets --sx-left); the tiles take the rest */
  #sweet-sfx-hero .sx-intro__eyebrow { font-size: calc(14px * var(--k)); margin-bottom: calc(16px * var(--k)); }
  #sweet-sfx-hero .sx-intro__title { font-size: calc(76px * var(--k)); margin-bottom: calc(20px * var(--k)); }
  #sweet-sfx-hero .sx-intro__text { font-size: max(14px, min(var(--e-global-typography-text-font-size, 18px), calc(18.75px * var(--k)))); margin-bottom: calc(30px * var(--k)); max-width: max(calc(660px * var(--k)), var(--sx-measure, 0px)); text-align: justify; } /* both edges straight (phones stay ragged: short lines would stretch the gaps) */ /* as wide as the search box and the numbers */
  #sweet-sfx-hero .sx-search { max-width: max(calc(660px * var(--k)), var(--sx-measure, 0px)); height: calc(64px * var(--k)); border-radius: calc(32px * var(--k)); margin-bottom: calc(18px * var(--k)); }
  #sweet-sfx-hero .sx-search__input { font-size: calc(17px * var(--k)); padding: 0 calc(26px * var(--k)); }
  #sweet-sfx-hero .sx-search__btn { font-size: calc(14px * var(--k)); padding: 0 calc(24px * var(--k)); border-radius: calc(26px * var(--k)); margin: calc(6px * var(--k)); }
  #sweet-sfx-hero .sx-search__btn svg { width: calc(18px * var(--k)); height: calc(18px * var(--k)); }
  #sweet-sfx-hero .sx-intro__types { gap: calc(8px * var(--k)) calc(10px * var(--k)); }
  #sweet-sfx-hero .sx-intro__types-label { font-size: calc(13px * var(--k)); }
  #sweet-sfx-hero .sx-chip { font-size: calc(14px * var(--k)); padding: calc(7px * var(--k)) calc(16px * var(--k)); border-radius: calc(18px * var(--k)); }
  #sweet-sfx-hero .sx-stats { max-width: max(calc(660px * var(--k)), var(--sx-measure, 0px)); gap: calc(12px * var(--k)) calc(40px * var(--k)); padding-top: calc(22px * var(--k)); }
  #sweet-sfx-hero .sx-intro__foot { max-width: max(calc(660px * var(--k)), var(--sx-measure, 0px)); } /* the paragraphs, search, line, numbers and links: their usual width, or the headline's where it's wider (hero.js sets --sx-measure) */
  #sweet-sfx-hero .sx-intro--statsearch .sx-stats { margin: calc(24px * var(--k)) 0 calc(22px * var(--k)); padding-top: calc(20px * var(--k)); }
  #sweet-sfx-hero .sx-stat__big { font-size: calc(52px * var(--k)); }
  #sweet-sfx-hero .sx-stat__label { font-size: calc(13px * var(--k)); }
  #sweet-sfx-hero .sx-cap__link { font-size: calc(15px * var(--k)); }
  /* The shop window grows and sits against the page's right edge. */
  #sweet-sfx-hero .sx-show--wall { justify-self: end; width: 100%; align-items: flex-end; }
  #sweet-sfx-hero .sx-wall { width: min(100%, calc(1220px * var(--k))); } /* fills its half, up to six tiles across; hero.js picks the columns */
  #sweet-sfx-hero .sx-wall__grid { gap: calc(16px * var(--k)); }
  #sweet-sfx-hero .sx-tile__name { font-size: calc(14px * var(--k)); margin-top: calc(8px * var(--k)); }
  #sweet-sfx-hero .sx-tile__price { font-size: calc(12px * var(--k)); }
  #sweet-sfx-hero .sx-tile__play { width: calc(30px * var(--k)); height: calc(30px * var(--k)); left: calc(8px * var(--k)); bottom: calc(8px * var(--k)); }
  #sweet-sfx-hero .sx-tile__play svg { width: calc(20px * var(--k)); height: calc(20px * var(--k)); margin-left: calc(2px * var(--k)); }
  #sweet-sfx-hero .sx-tile__bars { height: calc(17px * var(--k)); gap: calc(2px * var(--k)); }
  #sweet-sfx-hero .sx-tile__bars i { width: calc(3px * var(--k)); }
  #sweet-sfx-hero .sx-player { grid-template-columns: calc(56px * var(--k)) minmax(0, 1fr) calc(52px * var(--k)); gap: calc(14px * var(--k)); padding: calc(12px * var(--k)) calc(14px * var(--k)); margin-top: calc(22px * var(--k)); }
  #sweet-sfx-hero .sx-player__art { width: calc(56px * var(--k)); height: calc(56px * var(--k)); }
  #sweet-sfx-hero .sx-player__title { font-size: calc(15px * var(--k)); }
  #sweet-sfx-hero .sx-player__time { font-size: calc(12px * var(--k)); }
  #sweet-sfx-hero .sx-wave { height: calc(34px * var(--k)); }
  #sweet-sfx-hero .sx-player__play { width: calc(52px * var(--k)); height: calc(52px * var(--k)); }
  #sweet-sfx-hero .sx-player__play svg { width: calc(26px * var(--k)); height: calc(26px * var(--k)); }
  #sweet-sfx-hero .sx-wall__head { font-size: calc(13px * var(--k)); }
}
@media (min-width: 1600px) {
  #sweet-sfx-hero.sx-hero { --k: 1.18; }
}
@media (min-width: 2200px) {
  #sweet-sfx-hero.sx-hero { --k: 1.38; }
}
/* Where the page's section runs edge to edge (Elementor's tablet sizes, up to
   1024px), the hero keeps a margin, as on phones. hero.js adds the class. */
@media (min-width: 801px) and (min-height: 501px), (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-hero.sx-hero--edge .sx-hero__inner { padding-left: 5%; padding-right: 5%; }
}
/* Tablets held upright (and any portrait screen wider than a phone): stacked
   like phones, the shop message above the shop window, both full width. */
@media (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-hero .sx-hero__inner { grid-template-columns: minmax(0, 1fr); gap: calc(40px * var(--k)); }
  #sweet-sfx-hero .sx-hero__inner:has(.sx-show--wall) .sx-intro, #sweet-sfx-hero .sx-show--wall { align-self: start; }
  #sweet-sfx-hero .sx-show--wall { justify-self: stretch; }
  /* The message sits above the tiles here, so it uses the full width too, lined up with them, with the text a touch bigger so the long lines stay easy to read. */
  #sweet-sfx-hero .sx-intro__text, #sweet-sfx-hero .sx-search, #sweet-sfx-hero .sx-stats, #sweet-sfx-hero .sx-intro__foot { max-width: none; }
  #sweet-sfx-hero .sx-intro__text { font-size: var(--e-global-typography-text-font-size, 16px); }
  #sweet-sfx-hero .sx-wall { width: 100%; }
}
/* Touch screens, a library without an MP3: SoundCloud's own player takes the
   player's place, and the visitor presses its play button (iOS needs that tap). */
#sweet-sfx-hero .sx-player__sc { display: none; }
#sweet-sfx-hero .sx-player.is-sc { display: block; padding: 0; overflow: hidden; }
#sweet-sfx-hero .sx-player.is-sc > :not(.sx-player__sc) { display: none; }
#sweet-sfx-hero .sx-player.is-sc .sx-player__sc { display: block; height: 166px; }

/* ==== The Spotlight layout (1.1.0, Home Hero → Layout: Spotlight) ====
   Three rows: the label and headline beside the first paragraph, the search and the
   categories; the player as a grey panel beside the tiles; the numbers and the other
   paragraphs, split by lines, with "Try a free sample" and "Browse all" on one line
   just above the fold. Sizes are the 2K design's divided by 1.6, times --k (hero.js
   fits --k to the screen, about 1.6 on a 2K screen). */
#sweet-sfx-hero.sx-hero.is-pending .sx-st__spot, #sweet-sfx-hero.sx-hero.is-pending .sx-st__low > *, #sweet-sfx-hero.sx-hero.is-pending .sx-st__head { opacity: 0; }
#sweet-sfx-hero.sx-hero--stage .sx-hero__inner { display: flex; flex-direction: column; align-items: stretch; } /* every row full width (the hero's base rule lines things up at the start) */
#sweet-sfx-hero.sx-hero--stage .sx-st__ask { display: grid; align-content: end; }
#sweet-sfx-hero.sx-hero--stage .sx-st__ask .sx-intro__text { max-width: none; margin: 0; text-align: left; }
#sweet-sfx-hero.sx-hero--stage .sx-search { max-width: none; margin: 0; }
#sweet-sfx-hero.sx-hero--stage .sx-intro__types { max-width: none; margin: 0; }
#sweet-sfx-hero.sx-hero--stage .sx-st__spot { display: flex; flex-direction: column; justify-content: space-between; background: #f5f5f6; }
#sweet-sfx-hero.sx-hero--stage .sx-show--wall { width: 100%; justify-self: stretch; align-self: start; }
#sweet-sfx-hero.sx-hero--stage .sx-wall { width: 100%; }
#sweet-sfx-hero.sx-hero--stage .sx-st__low { display: grid; grid-template-columns: repeat(var(--st-cols, 4), minmax(0, 1fr)); margin-top: auto; border-top: 1px solid #e9e9e9; }
#sweet-sfx-hero.sx-hero--stage .sx-st__low .sx-intro__text { max-width: none; margin: 0; text-align: justify; }
#sweet-sfx-hero.sx-hero--stage .sx-stats { margin: 0; padding: 0; border: 0; max-width: none; }
#sweet-sfx-hero.sx-hero--stage .sx-st__sample { grid-row: 2; grid-column: 1; justify-self: start; }
#sweet-sfx-hero.sx-hero--stage .sx-st__more { grid-row: 2; grid-column: -2 / -1; justify-self: end; }
/* The player panel: the artwork large, then "Now playing", the name, price and time, and play beside the waveform. */
#sweet-sfx-hero.sx-hero--stage .sx-player { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "kick" "title" "meta" "ctl"; justify-items: start;
  margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
#sweet-sfx-hero.sx-hero--stage .sx-player__artlink { grid-area: art; justify-self: center; position: relative; display: block; transform-style: preserve-3d; will-change: transform; } /* the artwork goes to the library, with the tiles' hover */
#sweet-sfx-hero.sx-hero--stage .sx-player__art { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 0; background: none; }
#sweet-sfx-hero.sx-hero--stage .sx-player__kick { grid-area: kick; color: var(--sx-accent); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
#sweet-sfx-hero.sx-hero--stage .sx-player__title { grid-area: title; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; } /* one line, so the panel never moves when the library changes */
#sweet-sfx-hero.sx-hero--stage .sx-player__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0 .6em; color: #777; }
#sweet-sfx-hero.sx-hero--stage .sx-player__price { font-weight: 600; color: #000; }
#sweet-sfx-hero.sx-hero--stage .sx-player__time { font-size: inherit; }
#sweet-sfx-hero.sx-hero--stage .sx-player__ctl { grid-area: ctl; justify-self: stretch; display: flex; align-items: center; background: #fff; }
#sweet-sfx-hero.sx-hero--stage .sx-player__ctl .sx-wave { flex: 1; min-width: 0; }
#sweet-sfx-hero.sx-hero--stage .sx-player__play { flex: none; }
#sweet-sfx-hero.sx-hero--stage .sx-player__sc { grid-column: 1 / -1; }
#sweet-sfx-hero.sx-hero--stage .sx-player.is-sc { display: block; width: 100%; } /* touch screens: SoundCloud's own player fills the panel's width (it was left at its default 300px) */
#sweet-sfx-hero.sx-hero--stage .sx-player.is-sc .sx-player__sc { width: 100%; border-radius: 12px; overflow: hidden; }

/* Laptops and bigger, held sideways */
@media (min-width: 801px) and (min-height: 501px), (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-hero.sx-hero--stage .sx-hero__inner { gap: calc(18px * var(--k)); padding-top: calc(22px * var(--k)); padding-bottom: calc(30px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-st__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(75px * var(--k)); align-items: end; padding-bottom: calc(18px * var(--k)); border-bottom: 1px solid #e9e9e9; }
  #sweet-sfx-hero.sx-hero--stage .sx-intro__title { font-size: calc(57.5px * var(--k)); margin: 0; text-wrap: balance; } /* two even lines, as in the design */
  #sweet-sfx-hero.sx-hero--stage .sx-st__ask { gap: calc(13px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-st__ask .sx-intro__text { font-size: max(15px, calc(14.4px * var(--k))); line-height: 1.5; }
  #sweet-sfx-hero.sx-hero--stage .sx-search { height: calc(42px * var(--k)); border-radius: calc(21px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-search__input { font-size: max(14px, calc(11px * var(--k))); padding: 0 calc(18px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-search__btn { font-size: max(12px, calc(9px * var(--k))); padding: 0 calc(18px * var(--k)); border-radius: calc(17px * var(--k)); margin: calc(4px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-search__btn svg { width: calc(13px * var(--k)); height: calc(13px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-chip { font-size: max(12px, calc(9.4px * var(--k))); padding: calc(5px * var(--k)) calc(11px * var(--k)); border-radius: calc(12px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-intro__types-label { font-size: max(12px, calc(8.75px * var(--k))); }
  #sweet-sfx-hero.sx-hero--stage .sx-st__mid { display: grid; grid-template-columns: calc(450px * var(--k)) minmax(0, 1fr); gap: calc(25px * var(--k)); align-items: stretch; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__spot { padding: calc(22px * var(--k)); border-radius: calc(21px * var(--k)); gap: calc(12px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-player { gap: calc(4px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-player__artlink { width: 100%; max-width: calc(240px * var(--k)); margin-bottom: calc(10px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-player__kick { font-size: max(11px, calc(8px * var(--k))); }
  #sweet-sfx-hero.sx-hero--stage .sx-player__title { font-size: calc(25px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-player__meta { font-size: max(12px, calc(9px * var(--k))); }
  #sweet-sfx-hero.sx-hero--stage .sx-player__ctl { gap: calc(14px * var(--k)); padding: calc(10px * var(--k)) calc(12px * var(--k)); border-radius: calc(14px * var(--k)); margin-top: calc(10px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-player__play { width: calc(40px * var(--k)); height: calc(40px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-player__play svg { width: calc(20px * var(--k)); height: calc(20px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-wave { height: calc(30px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-wall__head { font-size: max(11px, calc(8px * var(--k))); }
  #sweet-sfx-hero.sx-hero--stage .sx-wall__grid { gap: calc(14px * var(--k)); grid-template-columns: repeat(var(--cols, 3), minmax(0, calc(230px * var(--k)))); justify-content: space-between; } /* tiles never bigger than 230px × k: on superwide screens the width shows more libraries instead */
  #sweet-sfx-hero.sx-hero--stage .sx-st__low { row-gap: calc(11px * var(--k)); padding-top: calc(15px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-st__low > :not(.sx-st__sample):not(.sx-st__more) { padding: 0 calc(27px * var(--k)); border-left: 1px solid #e9e9e9; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__low > :first-child { padding-left: 0; border-left: 0; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__low > .sx-intro__text:last-of-type { border-right: 1px solid #e9e9e9; } /* a line at its end too, as before it */
  #sweet-sfx-hero.sx-hero--stage .sx-st__low .sx-intro__text { font-size: max(14px, min(18px, calc(11.25px * var(--k)))); line-height: 1.55; }
  #sweet-sfx-hero.sx-hero--stage .sx-stats { gap: calc(6px * var(--k)) calc(14px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-stat__big { font-size: calc(25px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-stat__label { font-size: max(11px, calc(8.75px * var(--k))); margin-top: calc(4px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-st__low .sx-cap__link { font-size: max(13px, calc(10px * var(--k))); }
}
/* Tablets held upright: stacked, the player panel across the width beside its artwork. */
@media (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-hero.sx-hero--stage .sx-st__head, #sweet-sfx-hero.sx-hero--stage .sx-st__mid { grid-template-columns: minmax(0, 1fr); gap: calc(18px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-st__low { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(18px * var(--k)) calc(36px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-st__low > :not(.sx-st__sample):not(.sx-st__more) { padding: 0; border-left: 0; border-right: 0; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__sample, #sweet-sfx-hero.sx-hero--stage .sx-st__more { grid-row: auto; grid-column: auto; }
  #sweet-sfx-hero.sx-hero--stage .sx-player { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art kick" "art title" "art meta" "ctl ctl"; column-gap: calc(22px * var(--k)); align-items: center; }
  #sweet-sfx-hero.sx-hero--stage .sx-player__artlink { width: calc(150px * var(--k)); max-width: none; margin: 0; }
}
/* Phones, and phones held sideways */
@media (max-width: 800px), (max-height: 500px) and (orientation: landscape) {
  #sweet-sfx-hero.sx-hero--stage .sx-hero__inner { gap: 22px; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__head { display: grid; gap: 12px; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__ask { gap: 12px; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__ask .sx-intro__text { font-size: 15px; line-height: 1.55; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__mid { display: grid; gap: 18px; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__spot { padding: 16px; border-radius: 18px; gap: 10px; }
  #sweet-sfx-hero.sx-hero--stage .sx-player { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art kick" "art title" "art meta" "ctl ctl"; column-gap: 16px; row-gap: 3px; align-items: center; }
  #sweet-sfx-hero.sx-hero--stage .sx-player__artlink { width: 96px; margin: 0; }
  #sweet-sfx-hero.sx-hero--stage .sx-player__kick { font-size: 11px; }
  #sweet-sfx-hero.sx-hero--stage .sx-player__title { font-size: 20px; }
  #sweet-sfx-hero.sx-hero--stage .sx-player__meta { font-size: 12px; }
  #sweet-sfx-hero.sx-hero--stage .sx-player__ctl { gap: 12px; padding: 8px 10px; border-radius: 14px; margin-top: 8px; }
  #sweet-sfx-hero.sx-hero--stage .sx-player__play { width: 44px; height: 44px; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__low { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 18px; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__sample, #sweet-sfx-hero.sx-hero--stage .sx-st__more { grid-row: auto; grid-column: auto; justify-self: start; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__low .sx-intro__text { font-size: 14px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #sweet-sfx-hero.sx-hero--stage .sx-st__low { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Spotlight player, "mirror wave" (1.1.7): the waveform mirrored like a reflection
   (darker above its centre line, paler below), the played part red to orange, a playhead
   with the time over it (removed in 1.1.10), a pulsing play button while it plays, and a stop button that
   resets the player (shown only while a demo is playing or paused). ---- */
#sweet-sfx-hero.sx-hero--stage .sx-wave__bars i { background: linear-gradient(#cfcfd4 0 55%, #e9e9ec 55% 100%); }
#sweet-sfx-hero.sx-hero--stage .sx-wave:hover .sx-wave__bars:not(.sx-wave__bars--played) i { background: linear-gradient(#bdbdc3 0 55%, #e0e0e4 55% 100%); }
#sweet-sfx-hero.sx-hero--stage .sx-wave__bars--played i { background: linear-gradient(var(--sx-accent) 0, #ff5a36 55%, rgba(255, 90, 54, .38) 55%, rgba(255, 90, 54, .14) 100%); }
#sweet-sfx-hero.sx-hero--stage .sx-wave__head { position: absolute; top: -6%; bottom: -6%; left: 0; width: 2px; margin-left: -1px; background: #000; pointer-events: none; transition: left .25s linear, opacity .3s; }
#sweet-sfx-hero.sx-hero--stage .sx-wave__head span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; padding: 2px 7px; border-radius: 9px;
  background: #000; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
#sweet-sfx-hero.sx-hero--stage .sx-player[data-state="idle"] .sx-wave__head, #sweet-sfx-hero.sx-hero--stage .sx-player[data-state="loading"] .sx-wave__head span:empty { opacity: 0; }
#sweet-sfx-hero.sx-hero--stage .sx-player[data-state="playing"] .sx-player__play { animation: sx-ring 1.6s ease-out infinite; }
@keyframes sx-ring { 0% { box-shadow: 0 0 0 0 rgba(229, 9, 20, .45); } 100% { box-shadow: 0 0 0 16px rgba(229, 9, 20, 0); } }
#sweet-sfx-hero.sx-hero--stage .sx-player__stop { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #f1f1f3; color: #000; cursor: pointer;
  transition: background-color .2s, color .2s, opacity .25s, transform .25s; }
#sweet-sfx-hero.sx-hero--stage .sx-player__stop:hover { background: #000; color: #fff; }
#sweet-sfx-hero.sx-hero--stage .sx-player[data-state="idle"] .sx-player__stop { opacity: 0; transform: scale(.6); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #sweet-sfx-hero.sx-hero--stage .sx-player[data-state="playing"] .sx-player__play { animation: none; } }
@media (min-width: 801px) and (min-height: 501px), (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-hero.sx-hero--stage .sx-wave { height: calc(48px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-player__stop { width: calc(30px * var(--k)); height: calc(30px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-player__stop svg { width: calc(16px * var(--k)); height: calc(16px * var(--k)); }
  #sweet-sfx-hero.sx-hero--stage .sx-wave__head span { font-size: max(10px, calc(7.5px * var(--k))); }
}
@media (max-width: 800px), (max-height: 500px) and (orientation: landscape) {
  #sweet-sfx-hero.sx-hero--stage .sx-wave { height: 44px; }
  #sweet-sfx-hero.sx-hero--stage .sx-player__stop { width: 34px; height: 34px; }
  #sweet-sfx-hero.sx-hero--stage .sx-player__stop svg { width: 16px; height: 16px; }
}

/* The number of libraries is a link to the whole shop (1.1.9): it looks the same, and on
   hover the number lifts a touch and its words take the red underline of the hero's links. */
#sweet-sfx-hero a.sx-stat--link { color: inherit; text-decoration: none; cursor: pointer; }
#sweet-sfx-hero a.sx-stat--link .sx-stat__big { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
#sweet-sfx-hero a.sx-stat--link:hover .sx-stat__big { transform: translateY(-2px) scale(1.04); }
#sweet-sfx-hero a.sx-stat--link .sx-stat__label { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-decoration-thickness: 2px; transition: text-decoration-color .2s; }
#sweet-sfx-hero a.sx-stat--link:hover .sx-stat__label { text-decoration-color: var(--sx-accent); }

/* 1.1.11 One type scale for the home page (shared with the Version Guide): seven styles,
   Poppins 300 / 600 and Varela Round, sizes × k. Laptops and bigger; phones keep their own sizes. */
@media (min-width: 801px) and (min-height: 501px), (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-hero {
    --t1: calc(57.5px * var(--k));            /* 1 headline */
    --t3: calc(25px * var(--k));              /* 3 title */
    --t5: max(15px, calc(12px * var(--k)));   /* 5 body */
    --t6: max(11px, calc(8.8px * var(--k)));  /* 6 label (red capitals) */
    --t7: max(12px, calc(9.5px * var(--k)));  /* 7 small */
  }
  #sweet-sfx-hero.sx-hero--stage .sx-intro__eyebrow, #sweet-sfx-hero.sx-hero--stage .sx-player__kick, #sweet-sfx-hero.sx-hero--stage .sx-wall__head { font-size: var(--t6) !important; font-weight: 600 !important; letter-spacing: .16em !important; }
  #sweet-sfx-hero.sx-hero--stage .sx-intro__title { font-size: var(--t1) !important; }
  #sweet-sfx-hero.sx-hero--stage .sx-player__title, #sweet-sfx-hero.sx-hero--stage .sx-stat__big { font-size: var(--t3) !important; }
  #sweet-sfx-hero.sx-hero--stage .sx-intro__text, #sweet-sfx-hero.sx-hero--stage .sx-search__input { font-size: var(--t5) !important; font-weight: 300 !important; line-height: 1.6 !important; }
  #sweet-sfx-hero.sx-hero--stage .sx-chip, #sweet-sfx-hero.sx-hero--stage .sx-intro__types-label, #sweet-sfx-hero.sx-hero--stage .sx-player__meta,
  #sweet-sfx-hero.sx-hero--stage .sx-stat__label, #sweet-sfx-hero.sx-hero--stage .sx-search__btn { font-size: var(--t7) !important; }
  /* 1.1.12 The two links at the bottom (free sample, browse all) match the paragraphs above them. */
  #sweet-sfx-hero.sx-hero--stage .sx-st__low .sx-cap__link { font-size: var(--t5) !important; }
  #sweet-sfx-hero.sx-hero--stage .sx-st__low .sx-cap__link svg { width: .95em; height: .95em; }
  #sweet-sfx-hero.sx-hero--stage .sx-chip, #sweet-sfx-hero.sx-hero--stage .sx-stat__label { font-weight: 300 !important; }
  #sweet-sfx-hero.sx-hero--stage .sx-search__btn, #sweet-sfx-hero.sx-hero--stage .sx-intro__types-label { font-weight: 600 !important; }

  /* Library names and prices: the same Elementor global styles as Recent Releases and the shop
     (product title = global a3ff010, price = global Text in colour 981e12c). Tiles smaller than a
     shop tile (about 183px) shrink the text in step, never bigger than the shop's. */
  #sweet-sfx-hero.sx-hero--stage .sx-tile { container-type: inline-size; }
  #sweet-sfx-hero.sx-hero--stage .sx-tile__name {
    font-family: var(--e-global-typography-a3ff010-font-family, "Varela Round"), sans-serif !important;
    font-weight: var(--e-global-typography-a3ff010-font-weight, 900) !important;
    text-transform: var(--e-global-typography-a3ff010-text-transform, capitalize) !important;
    font-size: min(var(--e-global-typography-a3ff010-font-size, 20px), 10.9cqi) !important;
    line-height: 1.25 !important; letter-spacing: 0 !important; color: var(--e-global-color-981e12c, #000);
  }
  #sweet-sfx-hero.sx-hero--stage .sx-tile__price {
    font-family: var(--e-global-typography-text-font-family, Poppins), sans-serif !important;
    font-weight: var(--e-global-typography-text-font-weight, 300) !important;
    font-size: min(var(--e-global-typography-text-font-size, 18px), 9.8cqi) !important;
    line-height: 1.5 !important; color: var(--e-global-color-981e12c, #000) !important;
  }
  #sweet-sfx-hero.sx-hero--stage .sx-player__title {
    font-family: var(--e-global-typography-a3ff010-font-family, "Varela Round"), sans-serif !important;
    font-weight: var(--e-global-typography-a3ff010-font-weight, 900) !important;
    text-transform: var(--e-global-typography-a3ff010-text-transform, capitalize) !important;
  }
  #sweet-sfx-hero.sx-hero--stage .sx-player__price {
    font-family: var(--e-global-typography-text-font-family, Poppins), sans-serif !important;
    font-weight: var(--e-global-typography-text-font-weight, 300) !important;
    color: var(--e-global-color-981e12c, #000) !important;
  }
}

/* ==== 1.3.0 Sale: the player panel shows the sale while nothing is playing (hero.js
   turns it over to the player when a library is played, and back after) ==== */
/* (1.3.4: no preserve-3d on the panel: with it, the tilting artwork dipped behind the panel, the mouse "left" it and the hover shook) */
#sweet-sfx-hero .sx-st__spot.is-sale > .sx-player, #sweet-sfx-hero .sx-st__spot.is-sale > .sx-wall__head { display: none; }
#sweet-sfx-hero .sx-st__spot:not(.is-sale) > .sx-salecard { display: none; }
#sweet-sfx-hero.sx-hero--stage .sx-st__spot.is-sale-site.is-sale { background: var(--sx-accent); color: #fff; }
#sweet-sfx-hero .sx-salecard { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 0; gap: calc(4px * var(--k)); }
#sweet-sfx-hero .sx-salecard__art { position: relative; display: block; align-self: center; width: 100%; max-width: calc(240px * var(--k)); margin-bottom: calc(10px * var(--k)); }
#sweet-sfx-hero .sx-salecard__art img { display: block; width: 100%; height: auto; border-radius: calc(12px * var(--k)); }
#sweet-sfx-hero .sx-off { display: inline-block; padding: 0 .55em; border-radius: 999px; background: var(--sx-accent); color: #fff; font-weight: 600; white-space: nowrap; }
#sweet-sfx-hero .sx-salecard__kick { color: var(--sx-accent); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: var(--t6, 11px); }
#sweet-sfx-hero .sx-salecard__title { max-width: 100%; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; font-size: var(--t3, 20px);
  font-family: var(--e-global-typography-a3ff010-font-family, "Varela Round"), sans-serif; font-weight: var(--e-global-typography-a3ff010-font-weight, 900); text-transform: var(--e-global-typography-a3ff010-text-transform, capitalize); }
#sweet-sfx-hero .sx-salecard__title:hover { color: var(--sx-accent); }
#sweet-sfx-hero .sx-salecard__price { font-size: var(--t5, 15px); }
#sweet-sfx-hero .sx-old { color: #999; text-decoration: line-through; font-weight: 300; margin-right: .4em; }
#sweet-sfx-hero .sx-new { color: var(--sx-accent); font-weight: 600; }
#sweet-sfx-hero .sx-salecard__acts { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--k)) calc(16px * var(--k)); margin-top: calc(10px * var(--k)); }
#sweet-sfx-hero .sx-salecard__btn { display: inline-flex; align-items: center; gap: .5em; padding: .75em 1.5em; border-radius: 999px; background: var(--sx-accent); color: #fff; font-weight: 600; font-size: var(--t7, 12px);
  letter-spacing: .06em; text-transform: uppercase; transition: background-color .2s, transform .2s; }
#sweet-sfx-hero .sx-salecard__btn:hover { background: #c80711; color: #fff; transform: translateY(-2px); }
#sweet-sfx-hero .sx-salecard__btn svg { width: 1em; height: 1em; }
/* The site-wide strip (with a library on sale too), and the code to copy */
#sweet-sfx-hero .sx-salecard .sx-sale { width: 100%; margin-top: auto; }
#sweet-sfx-hero .sx-sale { display: flex; align-items: center; justify-content: space-between; gap: calc(10px * var(--k)); padding: calc(10px * var(--k)) calc(10px * var(--k)) calc(10px * var(--k)) calc(14px * var(--k));
  border-radius: calc(12px * var(--k)); background: var(--sx-accent); color: #fff; }
#sweet-sfx-hero .sx-sale__words { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#sweet-sfx-hero .sx-sale__what { font-family: var(--e-global-typography-a3ff010-font-family, "Varela Round"), sans-serif; font-weight: 900; font-size: max(14px, calc(16px * var(--k))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sweet-sfx-hero .sx-sale__when { font-size: max(11.5px, calc(9px * var(--k))); opacity: .85; }
#sweet-sfx-hero .sx-sale__code { flex: none; display: inline-flex; align-items: center; gap: .5em; padding: .4em .4em .4em .9em; border: 2px dashed rgba(255,255,255,.75); border-radius: 999px; background: rgba(255,255,255,.08);
  color: #fff; font-weight: 700; font-size: max(12px, calc(9.5px * var(--k))); letter-spacing: .08em; cursor: pointer; }
#sweet-sfx-hero .sx-sale__code span { padding: .25em .75em; border-radius: 999px; background: #fff; color: var(--sx-accent); font-size: .8em; letter-spacing: .06em; text-transform: uppercase; }
#sweet-sfx-hero .sx-sale__code:hover { background: rgba(255,255,255,.2); }
/* Site-wide only: the whole panel red, the % off large */
#sweet-sfx-hero .is-sale-site .sx-salecard { gap: calc(6px * var(--k)); }
#sweet-sfx-hero .is-sale-site .sx-salecard__kick { color: #fff; opacity: .9; }
#sweet-sfx-hero .sx-salecard__big { font-family: var(--e-global-typography-a3ff010-font-family, "Varela Round"), sans-serif; font-weight: 900; font-size: calc(92px * var(--k)); line-height: .95; letter-spacing: -.02em; }
#sweet-sfx-hero .sx-salecard__sub { font-family: var(--e-global-typography-a3ff010-font-family, "Varela Round"), sans-serif; font-weight: 900; font-size: var(--t3, 20px); line-height: 1.15; }
#sweet-sfx-hero .sx-salecard__when { font-size: max(12px, calc(10px * var(--k))); opacity: .9; margin-bottom: calc(10px * var(--k)); }
#sweet-sfx-hero .is-sale-site .sx-sale__code { font-size: max(14px, calc(13px * var(--k))); }
#sweet-sfx-hero .is-sale-site .sx-salecard__btn { background: #fff; color: var(--sx-accent); margin-top: calc(14px * var(--k)); }
#sweet-sfx-hero .is-sale-site .sx-salecard__btn:hover { background: #000; color: #fff; }
/* Phones and upright tablets: the panel sits across the width, so the card is smaller */
@media (max-width: 800px), (max-height: 500px) and (orientation: landscape), (min-width: 801px) and (orientation: portrait) {
  /* One library: the artwork beside the words, as the player is here; the code strip across the bottom. */
  #sweet-sfx-hero .sx-st__spot:not(.is-sale-site) .sx-salecard { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 3px; align-content: center; align-items: center; justify-items: start; }
  #sweet-sfx-hero .sx-st__spot:not(.is-sale-site) .sx-salecard > * { grid-column: 2; }
  #sweet-sfx-hero .sx-st__spot:not(.is-sale-site) .sx-salecard__art { grid-column: 1; grid-row: 1 / span 4; width: 120px; max-width: none; margin: 0; }
  #sweet-sfx-hero .sx-st__spot:not(.is-sale-site) .sx-salecard .sx-sale { grid-column: 1 / -1; margin-top: 10px; }
  #sweet-sfx-hero .sx-st__spot:not(.is-sale-site) .sx-salecard .sx-salecard__ctl { grid-column: 1 / -1; } /* the player across the card */
  #sweet-sfx-hero .sx-sale__what { white-space: normal; } /* wraps rather than being cut short */
  #sweet-sfx-hero .sx-salecard__big { font-size: 56px; }
}

/* ==== 1.3.1 Sale: corner tag A, and the library on sale's player in the card ==== */
/* The corner tag on the sale artwork and on that library's tile: flush in the top-left
   corner, clipped to the artwork's rounded corner, sized with the artwork. */
#sweet-sfx-hero .sx-tile__media, #sweet-sfx-hero .sx-salecard__art { container-type: inline-size; }
#sweet-sfx-hero .sx-tag { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: 11%; overflow: hidden; }
#sweet-sfx-hero .sx-tag > span { position: absolute; top: 0; left: 0; padding: .66em .86em .6em .8em; border-radius: 0 0 .93em 0; background: var(--sx-accent); color: #fff;
  font-family: Poppins, sans-serif; font-weight: 700; font-size: 8.5cqi; line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.22); }
/* The player's controls in the card (play, waveform, stop), and its time beside the price */
#sweet-sfx-hero .sx-salecard__ctl { width: 100%; }
#sweet-sfx-hero .sx-salecard__ctl .sx-player__ctl { margin-top: calc(6px * var(--k)); }
#sweet-sfx-hero .sx-salecard__time .sx-player__time { color: #777; font-weight: 300; font-size: var(--t7, 12px); }
#sweet-sfx-hero .sx-salecard__price { white-space: nowrap; }
#sweet-sfx-hero .sx-salecard[data-state="idle"] .sx-player__play svg, #sweet-sfx-hero .sx-salecard[data-state="paused"] .sx-player__play svg { margin-left: 3px; }
#sweet-sfx-hero .sx-salecard[data-state="loading"] .sx-player__play { animation: sx-pulse 1s ease-in-out infinite; }
#sweet-sfx-hero.sx-hero--stage .sx-salecard[data-state="playing"] .sx-player__play { animation: sx-ring 1.6s ease-out infinite; }
#sweet-sfx-hero.sx-hero--stage .sx-salecard:not([data-state]) .sx-player__stop, #sweet-sfx-hero.sx-hero--stage .sx-salecard[data-state="idle"] .sx-player__stop { opacity: 0; transform: scale(.6); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #sweet-sfx-hero .sx-salecard .sx-player__play { animation: none !important; } }
/* Both sales at once (the code strip under the card): smaller artwork, so the card stays the player's height */
#sweet-sfx-hero .sx-salecard:has(> .sx-sale) .sx-salecard__art { max-width: calc(170px * var(--k)); margin-bottom: calc(6px * var(--k)); }
@media (max-width: 800px), (max-height: 500px) and (orientation: landscape), (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-hero .sx-st__spot:not(.is-sale-site) .sx-salecard:has(> .sx-sale) .sx-salecard__art { width: 96px; }
  #sweet-sfx-hero .sx-st__spot:not(.is-sale-site) .sx-salecard:has(> .sx-sale) .sx-sale { margin-top: 6px; }
}

/* ==== 1.3.3 The Sale banner across the top of the panel (flush with its rounded top corners) ==== */
#sweet-sfx-hero .sx-st__spot:not(.is-sale) > .sx-banner { display: none; }
#sweet-sfx-hero .sx-banner { display: flex; align-items: center; justify-content: center; gap: .7em; margin: -16px -16px 0; padding: 9px 14px; border-radius: 18px 18px 0 0;
  background: var(--sx-accent); color: #fff; font-family: Poppins, sans-serif; font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
#sweet-sfx-hero .sx-banner b { flex: none; padding: .3em .7em; border-radius: 999px; background: #000; color: #fff; font-weight: 800; letter-spacing: .12em; }
#sweet-sfx-hero .sx-banner span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Site-wide only (the panel is red): the banner in black, its pill red */
#sweet-sfx-hero .is-sale-site > .sx-banner { background: #000; color: #fff; }
#sweet-sfx-hero .is-sale-site > .sx-banner b { background: var(--sx-accent); color: #fff; }
@media (min-width: 801px) and (min-height: 501px), (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-hero .sx-banner { margin: calc(-22px * var(--k)) calc(-22px * var(--k)) 0; padding: calc(10px * var(--k)) calc(16px * var(--k)); border-radius: calc(21px * var(--k)) calc(21px * var(--k)) 0 0; font-size: max(11px, calc(10px * var(--k))); }
}
/* 1.3.5 The library on sale's end day, under its price (the banner has no date when there are two offers) */
#sweet-sfx-hero .sx-salecard__ends { color: var(--sx-accent); font-weight: 600; font-size: var(--t7, 12px); }
#sweet-sfx-hero .sx-salecard__ends:empty { display: none; }

/* 1.3.7 The three paragraphs along the bottom in a lighter grey; the one at the top beside the headline stays black (owner) */
#sweet-sfx-hero.sx-hero--stage .sx-st__low .sx-intro__text { color: #777; }