/* Sweet SFX Product Page 1.0.2 (23 Oct 2026): the product pages in the About Us / home page look (eyebrows, heavy
   Varela Round headings, Poppins text, grey "carpet" panels #f5f5f7, red pill buttons), the owner's option "E":
   - the first screen: the gallery (Sweet SFX Product Gallery, unchanged) centred in the left half; on the right the
     name, the description, and choosing and buying on a grey panel (version cards with their jars, the price, the
     basket button); it ends exactly at the fold, the top of the player bar;
   - the demo in the home page's black player bar, fixed along the bottom of the screen (as Home Hero's), sliding up as
     the page arrives and away at the footer;
   - below: How it was recorded (the features), Specs (the table, Metadata), Related Libraries (Elementor's widget).
   Built by product.js from what the product template and each product already have; nothing to edit per product.
   Sizes: as the About Us page (--k: the width / 1400, held back by the screen's height, 1 to 2.1); the product's name
   and the gallery on --kt (the width / 1400 or the height / 800), as the old page at 2K. Every rule is scoped to
   #ssfx-product so the theme's and Elementor's styles don't reach in. */

/* Until it's built (product.js, straight after the template), the template stays hidden, so the old layout never
   shows; shown anyway after 2s if the script never runs. */
html.ssfx-pp-js [data-elementor-type="product"]:not(.ssfx-pp-done) { visibility: hidden; animation: ssfx-pp-failsafe 0s linear 2s forwards; }
@keyframes ssfx-pp-failsafe { to { visibility: visible; } }

#ssfx-product { --k: 1; --red: #e50914; --carpet: #f5f5f7; --line: #e4e4e8; width: 100%; color: #000; font-family: Poppins, sans-serif; font-weight: 300; font-size: calc(15px * var(--k)); line-height: 1.65; text-align: left; }
#ssfx-product *, #ssfx-product *::before, #ssfx-product *::after { box-sizing: border-box; }
#ssfx-product p { margin: 0 0 calc(14px * var(--k)); font: inherit; color: inherit; }
#ssfx-product a { color: inherit; }
#ssfx-product .sp-eyebrow { display: inline-flex; align-items: center; gap: calc(10px * var(--k)); margin: 0 0 calc(14px * var(--k)); color: var(--red); font-size: max(12px, calc(10px * var(--k))); font-weight: 600; line-height: 1; letter-spacing: .2em; text-transform: uppercase; }
#ssfx-product .sp-eyebrow::before { content: ""; width: calc(28px * var(--k)); height: calc(2px * var(--k)); background: var(--red); }
#ssfx-product .sp-title { margin: 0 0 calc(20px * var(--k)); padding: 0; color: #000; font-family: "Varela Round", sans-serif; font-weight: 900; font-size: calc(48px * var(--k)); line-height: 1.04; letter-spacing: -.015em; text-align: left; text-transform: none; }
#ssfx-product .sp-sec { padding-top: calc(84px * var(--k)); }
#ssfx-product button { font: inherit; letter-spacing: normal; text-transform: none; }

/* Breadcrumb: small and quiet */
#ssfx-product .sp-crumbs { padding: calc(26px * var(--k)) 0 0; color: #77777d; font-size: max(13px, calc(12.5px * var(--k))); }
#ssfx-product .sp-crumbs .woocommerce-breadcrumb { margin: 0; padding: 0; color: inherit; font-size: inherit; }
#ssfx-product .sp-crumbs a { color: #44444a; text-decoration: none; }
#ssfx-product .sp-crumbs a:hover { color: var(--red); }

/* ==== 1. The first screen: two equal halves, as the old page ==== */
/* It fills the screen down to the player bar (--sp-fold, set by product.js on computers): a clean break at the fold.
   The gallery is the old page's size, Elementor's 65% of its half (less the old column's 10px padding each side),
   held back only on a screen too short for it and its thumbnails above the bar (the thumbnails add about a quarter);
   it's centred in the first screen (not the whole section), so it stays put when a version's details open. */
#ssfx-product .sp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(10px * var(--k)); align-items: start; min-height: var(--sp-fold, auto); padding-top: calc(26px * var(--k)); }
#ssfx-product .sp-media { justify-self: center; align-self: start; display: flex; flex-direction: column; justify-content: center; min-height: calc(var(--sp-fold, 0px) - 26px * var(--k));
  width: min(calc((100% - 20px) * .65), calc((100vh - max(6vh, 57px + 1vw) - var(--sp-dock, 0px) - 100px * var(--kt, var(--k)) - 16px) * .72)); }
#ssfx-product .sp-media .elementor-widget-woocommerce-product-images { width: 100% !important; max-width: none !important; margin: 0 !important; }
/* (1.0.7) The gallery's pictures no longer blend ("multiply", for the old white-backed version pictures): the version
   pictures are see-through now, and the blend ran the fanned "Images" stack's photos into one another (owner). */
#ssfx-product .sp-info { padding-top: calc(8px * var(--k)); }
#ssfx-product .sp-info > .sp-title { margin-bottom: calc(18px * var(--k)); font-size: calc(38px * var(--kt, var(--k))); } /* the name: 60px at 2K, as the old page's */

/* The description, straight under the name. On a screen too short for it all above the bar, product.js keeps it to
   as many lines as fit (1.0.8: no fade; the last line ends at a whole word with "… Read more", placed by product.js). */
#ssfx-product .sp-desc { position: relative; margin: 0 0 calc(26px * var(--k)); color: #333; }
#ssfx-product .sp-desc p { text-align: justify; }
#ssfx-product .sp-desc p:last-child { margin-bottom: 0; }
#ssfx-product .sp-more { display: none; margin: calc(8px * var(--k)) 0 0; padding: 0 0 calc(2px * var(--k)); border: 0; border-bottom: 2px solid var(--red); border-radius: 0; background: none; box-shadow: none; color: #000; font: 600 max(13.5px, calc(13.5px * var(--k))) / 1.3 Poppins, sans-serif; cursor: pointer; }
#ssfx-product .sp-more:hover, #ssfx-product .sp-more:focus { color: var(--red); background: none; }
#ssfx-product .sp-desc.is-clamped .sp-desc__text { overflow: hidden; } /* its height: --lines whole lines, set by product.js */
#ssfx-product .sp-desc.is-clamped.is-open .sp-desc__text { max-height: none !important; }
#ssfx-product .sp-desc.is-clamped .sp-more { display: inline-block; }
/* "… Read more" on the last line, straight after its last whole word (left/top/line-height from product.js), on the
   page's white, covering the rest of that line */
#ssfx-product .sp-desc.is-clamped:not(.is-open) .sp-more { position: absolute; right: 0; margin: 0; padding: 0 0 0 .15em; border: 0; background: #fff; font-size: inherit; text-align: left; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
#ssfx-product .sp-desc.is-clamped:not(.is-open) .sp-more::before { content: "…\00a0"; display: inline-block; color: #333; font-weight: 300; }

/* Choosing and buying, together on a grey panel: the version cards (they set WooCommerce's own Version list, which
   is hidden), the price and basket button; the chosen version's details open under the button, so the price and
   button never move down. */
#ssfx-product .sp-pick { display: flex; flex-direction: column; padding: calc(18px * var(--k)) calc(18px * var(--k)) calc(20px * var(--k)); border-radius: calc(20px * var(--k)); background: var(--carpet); }
#ssfx-product .sp-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: calc(12px * var(--k)); font-weight: 600; font-size: calc(15px * var(--k)); }
#ssfx-product .sp-label a { font-size: max(13.5px, calc(13.5px * var(--k))); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--red); }
#ssfx-product .sp-label a:hover { color: var(--red); }
#ssfx-product .sp-vers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10px * var(--k)); }
#ssfx-product .sp-ver { position: relative; display: grid; grid-template-columns: calc(54px * var(--k)) minmax(0, 1fr); column-gap: calc(10px * var(--k)); align-items: center; margin: 0; padding: calc(10px * var(--k)) calc(10px * var(--k)) calc(10px * var(--k)) calc(8px * var(--k)); border: 1.5px solid #fff; border-radius: calc(14px * var(--k)); background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.06); color: #000; line-height: 1.25; text-align: left; cursor: pointer; transition: border-color .2s; }
#ssfx-product .sp-ver:hover, #ssfx-product .sp-ver:focus { border-color: #c9c9cf; background: #fff; color: #000; }
#ssfx-product .sp-ver.is-on { border-color: var(--red); }
#ssfx-product .sp-ver > * { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#ssfx-product .sp-ver img { grid-row: span 3; width: calc(54px * var(--k)); height: calc(54px * var(--k)); object-fit: contain; mix-blend-mode: multiply; border-radius: 0; box-shadow: none; }
#ssfx-product .sp-ver b { font-family: "Varela Round", sans-serif; font-weight: 900; font-size: calc(16px * var(--k)); line-height: 1.15; }
#ssfx-product .sp-ver span { font-weight: 600; font-size: calc(15px * var(--k)); }
#ssfx-product .sp-ver small { color: #66666c; font-size: calc(13px * var(--k)); }
#ssfx-product .sp-vdesc { order: 5; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
#ssfx-product .sp-vdesc.is-open { grid-template-rows: 1fr; opacity: 1; }
#ssfx-product .sp-vdesc > div { min-height: 0; overflow: hidden; }
#ssfx-product .sp-vdesc > div > div { margin-top: calc(12px * var(--k)); padding: calc(14px * var(--k)) calc(16px * var(--k)); border-radius: calc(12px * var(--k)); background: #fff; color: #333; font-size: calc(15px * var(--k)); line-height: 1.65; }
#ssfx-product .sp-vdesc p:last-child { margin-bottom: 0; }

/* Buying: the price, and WooCommerce's own basket button beside it, restyled */
#ssfx-product .sp-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(14px * var(--k)) calc(24px * var(--k)); margin-top: calc(22px * var(--k)); padding-top: calc(20px * var(--k)); border-top: 1px solid #e2e2e6; }
#ssfx-product .sp-pick > .sp-buy:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* no versions (a simple product) */
#ssfx-product .sp-price { font-family: "Varela Round", sans-serif; font-weight: 900; font-size: calc(38px * var(--k)); line-height: 1; }
#ssfx-product .sp-price small { display: block; margin-top: calc(6px * var(--k)); font-family: Poppins, sans-serif; font-weight: 400; font-size: calc(13px * var(--k)); color: #77777d; }
#ssfx-product .sp-form { width: auto; }
/* WooCommerce's own Version list and what it shows, hidden when the cards stand in for it (without cards, e.g. a
   product with too many versions for WooCommerce to list on the page, its list stays and works as before) */
#ssfx-product.has-cards .sp-form table.variations, #ssfx-product.has-cards .sp-form .woocommerce-variation-description, #ssfx-product.has-cards .sp-form .woocommerce-variation-price, #ssfx-product.has-cards .sp-form .woocommerce-variation-availability, #ssfx-product.has-cards .sp-form .reset_variations { display: none !important; }
#ssfx-product .sp-form .quantity { display: none !important; } /* one of each: the libraries are sold individually */
/* PayPal, Pay in 3 and Apple / Google Pay stay off the product pages, so every order goes through the checkout and its
   EULA tick (owner). Switch them off for product pages in their plugins' settings too: that also stops their scripts. */
#ssfx-product .ppcp-messages, #ssfx-product .ppc-button-wrapper, #ssfx-product .wcpay-express-checkout-wrapper, #ssfx-product #wcpay-express-checkout-button-separator, #ssfx-product .wc-stripe-product-checkout-container { display: none !important; }
#ssfx-product .sp-form form.cart { margin: 0 !important; }
/* (1.0.5) Elementor's 20px gap under the basket widget: it sat below Add to basket, but above Ask about Ultimate (which
   follows the widget, empty when Ultimate is chosen), so that button was 20px lower (owner: "jumping"). Now both sit
   in the same place. */
#ssfx-product .sp-form > .elementor-element { margin: 0 !important; }
#ssfx-product .sp-form .woocommerce-variation-add-to-cart, #ssfx-product .sp-form form.cart:not(.variations_form) { display: flex !important; align-items: center; gap: calc(12px * var(--k)); }
#ssfx-product .sp-form .single_add_to_cart_button, #ssfx-product .sp-ask { display: inline-flex !important; align-items: center; justify-content: center; gap: calc(10px * var(--k)); width: auto; margin: 0 !important; padding: calc(13px * var(--k)) calc(30px * var(--k)) !important; border: 0 !important; border-radius: 999px !important; background: var(--red) !important; color: #fff !important; font-family: Poppins, sans-serif !important; font-size: calc(15px * var(--k)) !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .14); transition: transform .2s, background .2s, opacity .2s; cursor: pointer; }
#ssfx-product .sp-form .single_add_to_cart_button, #ssfx-product .sp-ask { min-width: calc(214px * var(--k)); } /* the same size, so Add to basket and Ask about Ultimate match (owner) */
#ssfx-product .sp-form .single_add_to_cart_button:hover, #ssfx-product .sp-ask:hover { background: #c40711 !important; transform: translateY(-2px); }
/* Before a version is chosen the button stays red, not greyed out (owner: grey looked "out of stock"); pressing it then
   points to the versions instead (product.js: the cards pulse red, "Choose a version first"). */
#ssfx-product .sp-form .single_add_to_cart_button.disabled { opacity: 1 !important; cursor: pointer; }
#ssfx-product .sp-vers.is-nudge .sp-ver { animation: sp-nudge .9s ease-out; }
@keyframes sp-nudge { 0% { border-color: var(--red); box-shadow: 0 0 0 0 rgba(229, 9, 20, .5); } 100% { border-color: #fff; box-shadow: 0 0 0 10px rgba(229, 9, 20, 0); } }
#ssfx-product .sp-label > span { transition: color .25s; }
#ssfx-product .sp-label.is-hint > span { color: var(--red); }
#ssfx-product .sp-ask { display: none !important; }
#ssfx-product.is-poa .sp-ask { display: inline-flex !important; }
#ssfx-product.is-poa .sp-form .woocommerce-variation-add-to-cart { display: none !important; }

/* ==== The demo: the home page's player bar (Home Hero's #sweet-sfx-bar, same sizes and colours), fixed along the
   bottom of the screen. It slides up about 0.5s after the page arrives (0.7s), as the home page's does, and slides
   down out of the way at the footer. ==== */
#ssfx-product .sp-dock { position: fixed; z-index: 9990; left: 0; right: 0; bottom: 0; padding: calc(12px * var(--k)) 6% calc(12px * var(--k) + env(safe-area-inset-bottom)); background: #0e0e10; color: #fff; box-shadow: 0 -3px 12px rgba(0,0,0,.08); transform: translateY(105%); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
#ssfx-product .sp-dock.is-in { transform: none; }
#ssfx-product .sp-dock.is-in.is-away { transform: translateY(105%); }
#ssfx-product .sp-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 2.2fr); grid-template-areas: "art kick ctl" "art title ctl" "art meta ctl"; align-items: center; column-gap: calc(20px * var(--k)); width: min(100%, calc(1500px * var(--k))); margin: 0 auto; }
#ssfx-product .sp-bar__art { grid-area: art; display: block; width: calc(76px * var(--k)); aspect-ratio: 1; object-fit: cover; border-radius: 0; background: none; box-shadow: none; } /* the artwork's own see-through corners, as the home page's */
#ssfx-product .sp-bar__kick { grid-area: kick; align-self: end; color: var(--red); font-size: max(10px, calc(11px * var(--k))); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
#ssfx-product .sp-bar__title { grid-area: title; max-width: 100%; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; font-family: "Varela Round", sans-serif; font-weight: 900; font-size: calc(22px * var(--k)); }
#ssfx-product .sp-bar__meta { grid-area: meta; align-self: start; color: #aaa; font-size: max(12px, calc(12px * var(--k))); font-variant-numeric: tabular-nums; }
#ssfx-product .sp-bar__ctl { grid-area: ctl; display: flex; align-items: center; gap: calc(14px * var(--k)); padding: calc(10px * var(--k)) calc(12px * var(--k)); border-radius: calc(14px * var(--k)); background: #222; }
#ssfx-product .sp-bar button { margin: 0; padding: 0; border: 0; box-shadow: none; line-height: 1; min-height: 0; }
#ssfx-product .sp-bar__play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: calc(40px * var(--k)); height: calc(40px * var(--k)); border-radius: 50%; background: var(--red); color: #fff; cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.2,1), background-color .2s; }
#ssfx-product .sp-bar__play:hover, #ssfx-product .sp-bar__play:focus { transform: scale(1.06); background: #c80711; color: #fff; }
#ssfx-product .sp-bar__play svg { width: 50%; height: 50%; }
#ssfx-product .sp-bar[data-state="idle"] .sp-bar__play svg, #ssfx-product .sp-bar[data-state="paused"] .sp-bar__play svg { margin-left: 8%; }
#ssfx-product .sp-bar[data-state="loading"] .sp-bar__play { animation: sp-pulse 1s ease-in-out infinite; }
#ssfx-product .sp-bar[data-state="playing"] .sp-bar__play { animation: sp-ring 1.6s ease-out infinite; }
@keyframes sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes sp-ring { 0% { box-shadow: 0 0 0 0 rgba(229, 9, 20, .55); } 100% { box-shadow: 0 0 0 14px rgba(229, 9, 20, 0); } }
#ssfx-product .sp-wave { position: relative; flex: 1; min-width: 0; height: calc(44px * var(--k)); cursor: pointer; }
#ssfx-product .sp-wave__bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 4px; pointer-events: none; }
#ssfx-product .sp-wave__bars i { flex: 1; min-width: 1px; border-radius: 99px; background: #9a9aa0; transition: height .5s cubic-bezier(.2,.8,.2,1); }
#ssfx-product .sp-wave:hover .sp-wave__bars:not(.sp-wave__bars--played) i { background: #c4c4ca; }
#ssfx-product .sp-wave__bars--played { clip-path: inset(0 100% 0 0); transition: clip-path .25s linear; }
#ssfx-product .sp-wave__bars--played i { background: #ff3b2f; box-shadow: 0 0 6px rgba(255,59,47,.45); }
#ssfx-product .sp-bar__stop { flex: none; display: inline-flex; align-items: center; justify-content: center; width: calc(30px * var(--k)); height: calc(30px * var(--k)); border-radius: 50%; background: #333; color: #fff; cursor: pointer; transition: background-color .2s, opacity .25s, transform .25s; }
#ssfx-product .sp-bar__stop svg { width: 55%; height: 55%; }
#ssfx-product .sp-bar__stop:hover, #ssfx-product .sp-bar__stop:focus { background: #fff; color: #000; }
#ssfx-product .sp-bar[data-state="idle"] .sp-bar__stop { opacity: 0; transform: scale(.6); pointer-events: none; }
/* iPhones, iPads and other touch screens only let sound start from a tap on SoundCloud's own player, so there it
   shows in the bar for the visitor to press (as the home page). */
#ssfx-product .sp-bar__sc { display: none; }
#ssfx-product .sp-bar__sc iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Google's reCAPTCHA badge (bottom right) lifted above the bar while it's showing */
html.ssfx-pp-docked .grecaptcha-badge { bottom: calc(var(--ssfx-pp-dock, 0px) + 14px) !important; transition: bottom .7s cubic-bezier(.2, .8, .2, 1) !important; }

/* The collections' videos (YouTube) */
#ssfx-product .sp-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(420px * var(--k))), 1fr)); gap: calc(16px * var(--k)); }
#ssfx-product .sp-video { aspect-ratio: 16 / 9; border-radius: calc(14px * var(--k)); overflow: hidden; background: #000; }
#ssfx-product .sp-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ==== 2. How it was recorded: the features as cards in a row (and the collections' "Cars in the library" table) ==== */
#ssfx-product .sp-sub { margin: calc(30px * var(--k)) 0 calc(14px * var(--k)); font-family: "Varela Round", sans-serif; font-weight: 900; font-size: calc(22px * var(--k)); }
#ssfx-product .sp-about .sp-text { margin-bottom: calc(28px * var(--k)); }
#ssfx-product .sp-about .sp-text p { max-width: 70ch; text-align: justify; }
#ssfx-product .sp-text .sp-table { box-shadow: none; border: 1px solid var(--line); }
#ssfx-product .sp-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(300px * var(--k))), 1fr)); gap: calc(14px * var(--k)); margin: calc(6px * var(--k)) 0 0; padding: 0; list-style: none; }
#ssfx-product .sp-feats li { display: grid; grid-template-columns: calc(52px * var(--k)) minmax(0, 1fr); gap: calc(18px * var(--k)); align-items: center; margin: 0; padding: calc(18px * var(--k)) calc(22px * var(--k)); background: var(--carpet); border-radius: calc(16px * var(--k)); font-size: calc(15px * var(--k)); line-height: 1.65; }
#ssfx-product .sp-feats .sp-ic { display: grid; place-items: center; width: calc(52px * var(--k)); height: calc(52px * var(--k)); border-radius: 50%; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
#ssfx-product .sp-feats img { width: calc(26px * var(--k)); height: calc(26px * var(--k)); margin: 0; }

/* ==== 3. Specs: on the grey carpet; the table as the home page's Version Guide ==== */
#ssfx-product .sp-carpet { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: calc(56px * var(--k)); align-items: start; padding: calc(56px * var(--k)); background: var(--carpet); border-radius: calc(22px * var(--k)); }
#ssfx-product .sp-meta { margin-top: calc(10px * var(--k)); padding-top: calc(24px * var(--k)); border-top: 1px solid #e0e0e5; }
#ssfx-product .sp-meta h3 { margin: 0 0 calc(8px * var(--k)); font-family: "Varela Round", sans-serif; font-weight: 900; font-size: calc(20px * var(--k)); }
#ssfx-product .sp-table { width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: calc(18px * var(--k)); overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.07); font-size: calc(15px * var(--k)); }
#ssfx-product .sp-table td, #ssfx-product .sp-table th { padding: calc(14px * var(--k)) calc(20px * var(--k)); border: 0; border-bottom: 1px solid var(--line); background: none !important; text-align: left; font-weight: 400; vertical-align: middle; transition: background-color .5s; }
#ssfx-product .sp-table tr:last-child td { border-bottom: 0; }
#ssfx-product .sp-table tr:first-child td { padding-top: calc(20px * var(--k)); font-family: "Varela Round", sans-serif; font-weight: 900; font-size: calc(16px * var(--k)); }
#ssfx-product .sp-table tr:first-child td strong { font-weight: inherit; }
#ssfx-product .sp-table td:first-child { color: #66666c; font-weight: 500; }
#ssfx-product .sp-table a { display: inline-flex; align-items: center; gap: calc(6px * var(--k)); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--red); }
#ssfx-product .sp-table a:hover { color: var(--red); }
#ssfx-product .sp-table a strong { font-weight: inherit; }
#ssfx-product .sp-table td.is-flash { background: #fde7e8 !important; } /* Compare versions: the chosen version's column, for a moment */

/* ==== 4. Related Libraries: Elementor's widget (the owner's Related Libraries snippet), the page's heading, the
   tiles across the full width (as many columns as tiles showing, --cols) ==== */
#ssfx-product .sp-related { padding-bottom: calc(110px * var(--k)); }
#ssfx-product .sp-related .related > h2 { display: none; }
#ssfx-product .sp-related > .elementor-element { width: 100% !important; max-width: none !important; }
@media (min-width: 1025px) { #ssfx-product .sp-related ul.products { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)) !important; } }

/* ==== Tablets and phones: one column, no fold to fill ==== */
@media (max-width: 1024px) {
  #ssfx-product .sp-top, #ssfx-product .sp-carpet { grid-template-columns: minmax(0, 1fr); gap: calc(32px * var(--k)); }
  #ssfx-product .sp-media { width: min(100%, 520px); min-height: 0; }
  #ssfx-product .sp-sec { padding-top: 72px; }
}
@media (max-width: 767px) {
  #ssfx-product .sp-title { font-size: 34px; }
  #ssfx-product .sp-info > .sp-title { font-size: 32px; }
  #ssfx-product .sp-vers { grid-template-columns: minmax(0, 1fr); }
  /* (1.0.3) justified on phones too (owner), with words split at the line ends so the short lines don't leave gaps */
  #ssfx-product .sp-desc p, #ssfx-product .sp-about .sp-text p { -webkit-hyphens: auto; hyphens: auto; }
  #ssfx-product .sp-pick { padding: 14px 14px 16px; }
  #ssfx-product .sp-label > span, #ssfx-product .sp-label a { white-space: nowrap; }
  #ssfx-product .sp-carpet { padding: 24px; }
  #ssfx-product .sp-table td { padding: 12px 10px; }
  #ssfx-product .sp-related { padding-bottom: 72px; }
  /* the bar as the home page's on phones: the artwork, the name and time, play and stop (no waveform) */
  #ssfx-product .sp-bar { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "art title ctl" "art meta ctl"; column-gap: 12px; row-gap: 2px; }
  #ssfx-product .sp-bar__art { width: 52px; }
  #ssfx-product .sp-bar__kick { display: none; }
  #ssfx-product .sp-bar__title { align-self: end; font-size: 17px; }
  #ssfx-product .sp-bar__meta { font-size: 13px; }
  #ssfx-product .sp-bar__ctl { gap: 10px; padding: 0; background: none; }
  #ssfx-product .sp-wave { display: none; }
  #ssfx-product .sp-bar__play { width: 46px; height: 46px; }
  #ssfx-product .sp-bar__stop { width: 34px; height: 34px; }
  #ssfx-product .sp-bar[data-state="idle"] .sp-bar__stop { display: none; }
}
/* (1.0.3) The bar as slim as the home page's on phones (owner), held either way: the phone layout up to 800px wide and on
   phones on their side (it showed the full desktop bar there, with the waveform), and the same padding as the home page's */
@media (max-width: 800px), (max-height: 500px) and (orientation: landscape) {
  #ssfx-product .sp-dock { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  #ssfx-product .sp-bar { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "art title ctl" "art meta ctl"; column-gap: 12px; row-gap: 2px; }
  #ssfx-product .sp-bar__art { width: 52px; }
  #ssfx-product .sp-bar__kick { display: none; }
  #ssfx-product .sp-bar__title { align-self: end; font-size: 17px; }
  #ssfx-product .sp-bar__meta { font-size: 13px; }
  #ssfx-product .sp-bar__ctl { gap: 10px; padding: 0; background: none; }
  #ssfx-product .sp-wave { display: none; }
  #ssfx-product .sp-bar__play { width: 46px; height: 46px; }
  #ssfx-product .sp-bar__stop { width: 34px; height: 34px; }
  #ssfx-product .sp-bar[data-state="idle"] .sp-bar__stop { display: none; }
}
/* Phones on their side: one slim line (artwork, name, play), as the home page's */
@media (max-height: 500px) and (orientation: landscape) {
  #ssfx-product .sp-dock { padding: 6px 20px calc(6px + env(safe-area-inset-bottom)); }
  #ssfx-product .sp-bar { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "art title ctl"; row-gap: 0; }
  #ssfx-product .sp-bar__art { width: 36px; }
  #ssfx-product .sp-bar__meta { display: none; }
  #ssfx-product .sp-bar__title { align-self: center; font-size: 15px; }
  #ssfx-product .sp-bar__play { width: 36px; height: 36px; }
  #ssfx-product .sp-bar__stop { width: 30px; height: 30px; }
}

/* (1.0.4) SoundCloud's player slim, everywhere and always (owner): its 20px "mini" player (play, name, time, progress)
   sits under the library's name, our artwork kept, so the bar stays the height it was before play was pressed (it grew
   to 120px). Drawn a quarter bigger (scaled), so its play button is easier to hit. */
#ssfx-product .sp-bar.is-sc { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art title" "art sc"; row-gap: 4px; }
#ssfx-product .sp-bar.is-sc > :is(.sp-bar__kick, .sp-bar__meta, .sp-bar__ctl, .sp-wave) { display: none; }
#ssfx-product .sp-bar.is-sc .sp-bar__sc { display: block; grid-area: sc; align-self: start; height: 25px; border-radius: 0; overflow: hidden; }
#ssfx-product .sp-bar.is-sc .sp-bar__sc iframe { width: 80% !important; height: 20px !important; transform: scale(1.25); transform-origin: 0 0; }
@media (max-height: 500px) and (orientation: landscape) {
  #ssfx-product .sp-bar.is-sc { grid-template-columns: auto minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "art title sc"; }
  #ssfx-product .sp-bar.is-sc .sp-bar__sc { align-self: center; }
}

/* (1.0.8) The first screen in three sizes, so the description fits beside the chosen version (owner): computers 1800px
   wide and up (1080p, 2K, 4K) get A (a little tighter than before; the description fits whole); laptops get A+ (1.0.10: A where it all fits)
   (tighter again: no file count on the cards, smaller price); touch screens on their side (iPad landscape) get A++
   (A+ with the description at 14px and a smaller name). Chosen by product.js (sp-c1/2/3); 1024px and narrower as
   before. Where it still doesn't all fit, "… Read more" (above). */
@media (min-width: 1025px) {
  /* A */
  #ssfx-product.sp-c1 .sp-label { margin-bottom: calc(8px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver { grid-template-columns: calc(42px * var(--k)) minmax(0, 1fr); padding: calc(7px * var(--k)) calc(8px * var(--k)) calc(7px * var(--k)) calc(6px * var(--k)); column-gap: calc(8px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver img { width: calc(42px * var(--k)); height: calc(42px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver b { font-size: calc(15px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver span { font-size: calc(14px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver small { font-size: calc(12px * var(--k)); }
  #ssfx-product.sp-c1 .sp-buy { margin-top: calc(14px * var(--k)); padding-top: calc(14px * var(--k)); }
  #ssfx-product.sp-c1 .sp-price { font-size: calc(32px * var(--k)); }
  #ssfx-product.sp-c1 .sp-vdesc > div > div { margin-top: calc(8px * var(--k)); padding: calc(10px * var(--k)) calc(14px * var(--k)); font-size: calc(14px * var(--k)); line-height: 1.5; }
  /* A+ and A++ */
  #ssfx-product:is(.sp-c2, .sp-c3) .sp-desc { margin-bottom: calc(18px * var(--k)); }
  #ssfx-product.sp-c2 .sp-desc p { line-height: 1.58; }
  #ssfx-product:is(.sp-c2, .sp-c3) .sp-pick { padding: calc(10px * var(--k)) calc(16px * var(--k)) calc(14px * var(--k)); } /* the label a little higher (owner) */
  #ssfx-product:is(.sp-c2, .sp-c3) .sp-label { margin-bottom: calc(8px * var(--k)); font-size: calc(14px * var(--k)); }
  #ssfx-product:is(.sp-c2, .sp-c3) .sp-ver { grid-template-columns: calc(38px * var(--k)) minmax(0, 1fr); padding: calc(6px * var(--k)) calc(8px * var(--k)) calc(6px * var(--k)) calc(6px * var(--k)); column-gap: calc(8px * var(--k)); }
  #ssfx-product:is(.sp-c2, .sp-c3) .sp-ver img { grid-row: span 2; width: calc(38px * var(--k)); height: calc(38px * var(--k)); }
  #ssfx-product:is(.sp-c2, .sp-c3) .sp-ver b { font-size: calc(15px * var(--k)); }
  #ssfx-product:is(.sp-c2, .sp-c3) .sp-ver span { font-size: calc(14px * var(--k)); }
  #ssfx-product:is(.sp-c2, .sp-c3) .sp-ver small { display: none; }
  #ssfx-product:is(.sp-c2, .sp-c3) .sp-buy { margin-top: calc(12px * var(--k)); padding-top: calc(12px * var(--k)); }
  #ssfx-product:is(.sp-c2, .sp-c3) .sp-price { font-size: calc(28px * var(--k)); }
  #ssfx-product:is(.sp-c2, .sp-c3) .sp-price small { margin-top: calc(4px * var(--k)); }
  #ssfx-product:is(.sp-c2, .sp-c3) .sp-vdesc > div > div { margin-top: calc(8px * var(--k)); padding: calc(9px * var(--k)) calc(12px * var(--k)); font-size: calc(13.5px * var(--k)); line-height: 1.45; }
  /* A++ only */
  #ssfx-product.sp-c3 .sp-desc p { font-size: calc(14px * var(--k)); line-height: 1.55; }
  #ssfx-product.sp-c3 .sp-info > .sp-title { margin-bottom: calc(14px * var(--k)); font-size: calc(34px * var(--kt, var(--k))); }
}

/* (1.0.9) A bigger on screens 2200 to 3199px wide (2K), so the grey panel ends level with the gallery's small pictures
   (owner); 1080p keeps the 1.0.8 A, where "Standard Pack" would wrap and the description would be cut (4K: 1.0.11, below). */
@media (min-width: 2200px) and (max-width: 3199px) {
  #ssfx-product.sp-c1 .sp-pick { padding: calc(28px * var(--k)) calc(22px * var(--k)) calc(30px * var(--k)); }
  #ssfx-product.sp-c1 .sp-label { margin-bottom: calc(18px * var(--k)); font-size: calc(17px * var(--k)); }
  #ssfx-product.sp-c1 .sp-label a { font-size: calc(15px * var(--k)); }
  #ssfx-product.sp-c1 .sp-vers { gap: calc(12px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver { grid-template-columns: calc(88px * var(--k)) minmax(0, 1fr); padding: calc(15px * var(--k)) calc(12px * var(--k)) calc(15px * var(--k)) calc(10px * var(--k)); column-gap: calc(12px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver img { width: calc(88px * var(--k)); height: calc(88px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver b { font-size: calc(18px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver span { font-size: calc(17px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver small { font-size: calc(14px * var(--k)); }
  #ssfx-product.sp-c1 .sp-buy { margin-top: calc(30px * var(--k)); padding-top: calc(28px * var(--k)); }
  #ssfx-product.sp-c1 .sp-price { font-size: calc(44px * var(--k)); }
  #ssfx-product.sp-c1 .sp-price small { font-size: calc(14px * var(--k)); }
  #ssfx-product.sp-c1 .sp-form .single_add_to_cart_button, #ssfx-product.sp-c1 .sp-ask { font-size: calc(17px * var(--k)) !important; padding: calc(15px * var(--k)) calc(34px * var(--k)) !important; }
  #ssfx-product.sp-c1 .sp-vdesc > div > div { margin-top: calc(18px * var(--k)); padding: calc(20px * var(--k)) calc(20px * var(--k)); font-size: calc(16.5px * var(--k)); line-height: 1.65; }
}
/* (1.0.11) A bigger on 4K too, 3200px wide and up (owner: "could do A at 4k?"): the 2K sizes with smaller jars and names,
   so "Standard Pack" stays on one line, and the spacing set so the grey panel ends level with the gallery's small
   pictures with a version chosen. */
@media (min-width: 3200px) {
  #ssfx-product.sp-c1 .sp-pick { padding: calc(26px * var(--k)) calc(22px * var(--k)) calc(28px * var(--k)); }
  #ssfx-product.sp-c1 .sp-label { margin-bottom: calc(17px * var(--k)); font-size: calc(17px * var(--k)); }
  #ssfx-product.sp-c1 .sp-label a { font-size: calc(15px * var(--k)); }
  #ssfx-product.sp-c1 .sp-vers { gap: calc(12px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver { grid-template-columns: calc(64px * var(--k)) minmax(0, 1fr); padding: calc(14px * var(--k)) calc(12px * var(--k)) calc(14px * var(--k)) calc(10px * var(--k)); column-gap: calc(12px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver img { width: calc(64px * var(--k)); height: calc(64px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver b { font-size: calc(16px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver span { font-size: calc(15px * var(--k)); }
  #ssfx-product.sp-c1 .sp-ver small { font-size: calc(13px * var(--k)); }
  #ssfx-product.sp-c1 .sp-buy { margin-top: calc(28px * var(--k)); padding-top: calc(26px * var(--k)); }
  #ssfx-product.sp-c1 .sp-price { font-size: calc(44px * var(--k)); }
  #ssfx-product.sp-c1 .sp-price small { font-size: calc(14px * var(--k)); }
  #ssfx-product.sp-c1 .sp-form .single_add_to_cart_button, #ssfx-product.sp-c1 .sp-ask { font-size: calc(17px * var(--k)) !important; padding: calc(15px * var(--k)) calc(34px * var(--k)) !important; }
  #ssfx-product.sp-c1 .sp-vdesc > div > div { margin-top: calc(17px * var(--k)); padding: calc(18px * var(--k)) calc(20px * var(--k)); font-size: calc(16.5px * var(--k)); line-height: 1.65; }
}


@media (prefers-reduced-motion: reduce) {

  #ssfx-product .sp-dock, #ssfx-product .sp-vdesc { transition: none; }
  #ssfx-product .sp-bar__play { animation: none !important; }
}