/* 1.6.0 The shop's play buttons (shop-play.js): the red button bottom left of the artwork; playing, it stretches
   into a slim dark strip along the bottom of the artwork: pause, a progress line, the time and stop */
.sx-sp { position: absolute; z-index: 6; left: 7%; bottom: 7%; height: clamp(26px, 22%, 44px); width: clamp(26px, 22%, 44px); display: flex; align-items: center; gap: 8px;
  border-radius: 999px; line-height: 0; cursor: default; transition: width .3s cubic-bezier(.2,.8,.2,1), background-color .3s, padding .3s, opacity .25s, transform .25s; }
.sx-sp__btn { flex: none; display: grid; place-items: center; height: 100%; aspect-ratio: 1; border-radius: 50%; background: #e50914; color: #fff; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); transition: transform .2s cubic-bezier(.2,.8,.2,1), background-color .2s; }
.sx-sp__btn:hover { transform: scale(1.1); background: #c80711; }
.sx-sp__btn svg { display: block; width: 56%; height: 56%; }
.sx-sp[data-state="idle"] .sx-sp__btn svg, .sx-sp[data-state="paused"] .sx-sp__btn svg { margin-left: 8%; }
.sx-sp[data-state="loading"] .sx-sp__btn { animation: sx-pulse 1s ease-in-out infinite; }
.sx-sp__track, .sx-sp__time, .sx-sp__stop { display: none; }
.sx-sp:not([data-state="idle"]) { width: 86%; padding-right: 4px; background: rgba(14,14,16,.9); }
.sx-sp:not([data-state="idle"]) .sx-sp__track { display: block; flex: 1; min-width: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.sx-sp__track i { display: block; height: 100%; width: 0; background: #e50914; border-radius: inherit; transition: width .25s linear; }
.sx-sp:not([data-state="idle"]) .sx-sp__time { display: block; flex: none; min-width: 2.4em; color: #fff; font: 600 11px/1 Poppins, sans-serif; font-variant-numeric: tabular-nums; text-align: right; }
.sx-sp:not([data-state="idle"]) .sx-sp__stop { display: grid; place-items: center; flex: none; height: 76%; aspect-ratio: 1; border-radius: 50%; background: #333; color: #fff; cursor: pointer; transition: background-color .2s, color .2s; }
.sx-sp__stop:hover { background: #fff; color: #000; }
.sx-sp__stop svg { display: block; width: 60%; height: 60%; }
.sx-sp__btn:focus-visible, .sx-sp__stop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes sx-pulse { 50% { box-shadow: 0 0 0 8px rgba(229,9,20,.25); } }
@media (hover: hover) and (pointer: fine) {
  .sx-sp[data-state="idle"] { opacity: 0; transform: scale(.75); transform-origin: left bottom; }
  /* (1.8.7) Only with the mouse over the artwork itself, not anywhere on the card (its name and price too) */
  .sx-sp-box:hover .sx-sp, .sx-sp-box.is-hover .sx-sp, .sx-sp:focus-within { opacity: 1; transform: none; } /* (2.0.2) is-hover: Savage 3.1 judges it at rest, so no flicker at the edge */
}
@media (prefers-reduced-motion: reduce) { .sx-sp, .sx-sp__track i { transition: none; } .sx-sp[data-state="loading"] .sx-sp__btn { animation: none; } }
/* 1.6.6 An invisible ring 12px wide around the red circle also catches the click, so it's easier to hit
   without looking any bigger (the stop button, once playing, gets 6px) */
.sx-sp__btn, .sx-sp__stop { position: relative; }
.sx-sp__btn::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.sx-sp__stop::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
/* 1.8.2 The red line can be clicked to jump along the demo: the same thin line, in a taller clickable strip */
.sx-sp:not([data-state="idle"]) .sx-sp__track { position: relative; height: 22px; border-radius: 0; background: none; overflow: visible; cursor: pointer; }
.sx-sp__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255,255,255,.25); transition: height .15s, margin-top .15s; }
.sx-sp:not([data-state="idle"]) .sx-sp__track i { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; transition: width .25s linear, height .15s, margin-top .15s; }
.sx-sp__track:hover::before, .sx-sp__track:hover i { height: 6px !important; margin-top: -3px !important; } /* thickens under the mouse */
/* 1.8.2 On small covers the playing strip runs nearly the full width and drops the time, so the line is long enough to click */
.sx-sp.is-small:not([data-state="idle"]) { left: 4%; width: 92%; gap: 6px; }
.sx-sp.is-small .sx-sp__time { display: none !important; }
/* 1.8.4 The hero's tiles: the button shows with the mouse over the tile, as on the shop's covers */
@media (hover: hover) and (pointer: fine) {
  #sweet-sfx-hero .sx-tile__media:hover .sx-sp, #sweet-sfx-hero .sx-tile__media.is-hover .sx-sp, #sweet-sfx-hero .sx-tile .sx-sp:focus-within { opacity: 1; transform: none; } /* (1.8.7) over the artwork */
}
.sx-sp-art { position: relative; display: block; width: 100%; line-height: 0; } /* (2.0.4) a box round the picture alone, for the play button (shop-play.js artBox) */