.demoplayer{--demoplayer-bg-container:rgba(18,18,18,0.96);--demoplayer-border-container:rgba(255,255,255,0.12);--demoplayer-boxshadow:0 -3px 24px 0 rgba(0,0,0,0.45);--demoplayer-bg-inactive:rgba(255,255,255,0.18);--demoplayer-bg-progress:#e31c23;--demoplayer-bg-progress-dot:#ff5a5f;--demoplayer-bg-cover:#0a0a0a;--demoplayer-bg-button:rgba(255,255,255,0.08);--demoplayer-bg-button-hover:rgba(255,255,255,0.16);--demoplayer-button-border:rgba(255,255,255,0.18);--demoplayer-button-border-active:rgba(255,255,255,0.35);--demoplayer-icon-inactive:#e8e8e8;--demoplayer-icon-active:#ffffff;--demoplayer-height:72px;position:fixed;z-index:65;bottom:0;left:0;right:0;width:auto;height:var(--demoplayer-height);transition:right .25s ease,bottom .3s ease,opacity .2s ease;border-top:1px solid var(--demoplayer-border-container);background:var(--demoplayer-bg-container);box-shadow:var(--demoplayer-boxshadow);backdrop-filter:blur(12px)}.demoplayer.cart-open{right:min(28rem,100vw)}@media (max-width:28rem){.demoplayer.cart-open{opacity:0;pointer-events:none;visibility:hidden}}.demoplayer audio{display:none}.demoplayer.hidden{bottom:calc(var(--demoplayer-height) - var(--demoplayer-height) * 2)}.demoplayer .container{gap:12px 16px;width:100%;max-width:1280px;margin:0 auto;padding:0 16px}.demoplayer .container,.demoplayer .meta{display:flex;align-items:center;height:100%}.demoplayer .meta{justify-content:flex-start;width:240px;min-width:160px;max-width:280px;flex-shrink:0}.demoplayer .meta .cover{overflow:hidden;width:60px;min-width:60px;height:60px;min-height:60px;border-radius:4px;background:var(--demoplayer-bg-cover);aspect-ratio:1/1}@media (max-width:480px){.demoplayer .meta{width:44px;min-width:44px;max-width:44px}.demoplayer .meta .cover{width:44px;min-width:44px;height:44px;min-height:44px}.demoplayer .meta .info{display:none}}.demoplayer .meta .cover img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.demoplayer .meta .info{display:flex;flex-direction:column;justify-content:center;width:calc(100% - 60px);padding:0 12px}.demoplayer .meta .title,.demoplayer .meta .vendor{overflow:hidden;width:calc(100% - 10px);white-space:nowrap;text-overflow:ellipsis}.demoplayer .meta .title,.demoplayer .meta a.title{font-size:13px;font-weight:600;color:#ffffff}.demoplayer .meta .vendor{font-size:12px;color:rgba(255,255,255,.55);opacity:1}.demoplayer .playbar{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0;width:auto;gap:10px}.demoplayer .button-play{display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;opacity:.8;border:1px solid var(--demoplayer-button-border);border-radius:50%;background:var(--demoplayer-bg-button)}.demoplayer .button-play:hover{opacity:1;border:1px solid var(--demoplayer-button-border-active);background:var(--demoplayer-bg-button-hover)}.demoplayer .button-play:hover svg{color:var(--demoplayer-icon-active)}.demoplayer .button-play svg{width:32px;min-width:32px;height:32px;min-height:32px;color:var(--demoplayer-icon-inactive);aspect-ratio:1/1}.demoplayer .playbar .bar{display:flex;flex-direction:column;width:calc(100% - 56px)}.demoplayer .playbar .bar .time{font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:space-between;width:100%;margin:-8px 0 2px;color:#ffffff}.demoplayer .playbar .bar .time .current,.demoplayer .playbar .bar .time .total{color:#ffffff;font-variant-numeric:tabular-nums}.demoplayer .playbar .bar .gauge{position:relative;width:100%;height:10px;padding:12px 0;margin:-12px 0;box-sizing:content-box;cursor:pointer;touch-action:none;border-radius:4px;background:transparent}.demoplayer .playbar .bar .gauge:before{content:"";right:0;background:var(--demoplayer-bg-inactive)}.demoplayer .playbar .bar .gauge .progress,.demoplayer .playbar .bar .gauge:before{position:absolute;left:0;top:50%;height:8px;transform:translateY(-50%);border-radius:4px;pointer-events:none}.demoplayer .playbar .bar .gauge .progress{z-index:1;display:flex;align-items:center;justify-content:flex-end;width:0;background:var(--demoplayer-bg-progress)}.demoplayer .playbar .bar .gauge:not(.is-scrubbing) .progress{transition:width .12s linear}.demoplayer .playbar .bar .gauge .progress:after{display:block;width:14px;height:14px;margin-right:-7px;content:"";border-radius:50%;background:var(--demoplayer-bg-progress-dot);box-shadow:0 0 5px 2px #fff;pointer-events:none}.demoplayer .controls{display:flex;align-items:center;justify-content:flex-end;width:auto;flex-shrink:0;gap:10px}.demoplayer .controls .button{position:relative;z-index:1000;display:flex;align-items:center;justify-content:center;width:40px;height:40px;cursor:pointer;opacity:.8;border:1px solid var(--demoplayer-button-border);border-radius:4px;background:var(--demoplayer-bg-button)}.demoplayer .controls .button:hover{opacity:1;border:1px solid var(--demoplayer-button-border-active);background:var(--demoplayer-bg-button-hover)}.demoplayer .controls .button.loading{pointer-events:none;cursor:wait;opacity:.55}@keyframes sy-cart-spin{to{transform:rotate(1turn)}}.demoplayer .controls .button.loading svg{animation:sy-cart-spin .8s linear infinite}.demoplayer .controls .button:hover svg{color:var(--demoplayer-icon-active)}.demoplayer .controls .button svg{width:24px;height:24px;color:var(--demoplayer-icon-inactive);aspect-ratio:1/1}@media (max-width:480px){.demoplayer .controls .button{width:28px;height:28px}.demoplayer .controls .button svg{width:22px;height:22px}}.demoplayer .controls .button-volume{width:auto;min-width:40px;padding:0 8px;gap:4px}.demoplayer .controls .button-volume__toggle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;color:inherit}.demoplayer .controls .button-volume__toggle svg{width:22px;height:22px}.demoplayer .controls .button-volume__pct{font-size:11px;font-weight:700;color:var(--demoplayer-icon-inactive);min-width:28px;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none}.demoplayer .controls .button-volume.is-muted{opacity:.7}.demoplayer .controls .volumebar{position:absolute;z-index:999;top:-118px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:40px;height:118px;padding:8px 8px 10px;border-radius:4px 4px 0 0;background:var(--demoplayer-bg-container);box-shadow:0 0 4px 0 rgba(0,0,0,.1)}.demoplayer .controls .volumebar__label{font-size:10px;font-weight:700;color:var(--demoplayer-icon-inactive);line-height:1}.demoplayer .controls .volumebar .gauge{position:relative;width:16px;height:100%;cursor:pointer;touch-action:none;border-radius:4px;background:var(--demoplayer-bg-inactive)}.demoplayer .controls .volumebar .gauge .progress{position:absolute;bottom:0;width:100%;height:0;border-radius:4px;background:var(--demoplayer-bg-progress);pointer-events:none}