.e-dock{--e-dock-bg: 28 27 24;--e-dock-fg: 244 240 232;--s: var(--e-dock-size-d, 40px);--left: 16px;--pad: 5px;position:fixed;inset-inline-start:var(--left);inset-block-end:calc(var(--e-dock-bottom-d, 16px) + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:4px;padding:var(--pad);border:1px solid rgb(255 255 255 / .07);border-radius:999px;background:rgb(var(--e-dock-bg) / .8);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);color:rgb(var(--e-dock-fg));box-shadow:0 10px 30px #0003,0 1px #ffffff0d inset;opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),background-color .35s ease,box-shadow .35s ease,border-color .35s ease,padding .35s ease,inset-block-end .3s cubic-bezier(.22,1,.36,1)}.e-dock--widget{--pad: 6px;border-radius:calc(var(--s) * .3 + 8px)}.e-dock.is-ready{opacity:1;transform:none}html.lock .e-dock,html.e-qa-lock .e-dock{opacity:0;pointer-events:none}.e-dock__play{display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent}.e-dock__vinyl{position:relative;flex:none;width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;background:#0d0d0c;animation:e-dock-spin 6s linear infinite;animation-play-state:paused;transition:box-shadow .35s ease,width .35s ease,height .35s ease}.e-dock.is-playing .e-dock__vinyl{animation-play-state:running}@keyframes e-dock-spin{to{transform:rotate(360deg)}}.e-dock__art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.9}.e-dock__grooves{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#0000 0 2px,#0000002e 2px 2.6px),radial-gradient(circle at 50% 50%,#0000 0 30%,#00000040 31%,#0000 33%)}.e-dock__hub{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:calc(var(--s) * .4);height:calc(var(--s) * .4);display:grid;place-items:center;border-radius:50%;background:rgb(var(--e-dock-fg));color:rgb(var(--e-dock-bg));animation:inherit;animation-direction:reverse;transition:opacity .3s ease}.e-dock__icon{width:56%;height:56%}.e-dock__icon--pause,.e-dock.is-playing .e-dock__icon--play{display:none}.e-dock.is-playing .e-dock__icon--pause{display:block}.e-dock__meta{display:grid;gap:1px;min-width:0;max-width:132px;padding-inline-end:4px}.e-dock__eyebrow{font-size:.5625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.55}.e-dock__title{overflow:hidden;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}.e-dock__eq{display:none;align-items:flex-end;gap:2px;height:12px;margin-inline-end:6px}.e-dock__eq i{width:2px;height:4px;background:currentColor;opacity:.8}.e-dock.is-playing .e-dock__eq{display:flex}.e-dock.is-playing .e-dock__eq i{animation:e-dock-eq .9s ease-in-out infinite}.e-dock.is-playing .e-dock__eq i:nth-child(2){animation-delay:.15s}.e-dock.is-playing .e-dock__eq i:nth-child(3){animation-delay:.3s}@keyframes e-dock-eq{0%,to{height:3px}50%{height:12px}}.e-dock__divider{width:1px;height:calc(var(--s) * .55);margin-inline:4px;background:rgb(var(--e-dock-fg) / .2)}.e-dock__tv{position:relative;display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:50%;transition:background-color .25s ease}.e-dock__tv-img{width:74%;height:74%;object-fit:contain;transition:transform .35s cubic-bezier(.22,1,.36,1)}.e-dock__tip{position:absolute;inset-block-end:calc(100% + 12px);inset-inline-start:50%;padding:6px 10px;background:rgb(var(--e-dock-bg));color:rgb(var(--e-dock-fg));font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translate(-50%,4px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}@media(hover:hover)and (pointer:fine){.e-dock__tv:hover{background:rgb(var(--e-dock-fg) / .08)}.e-dock__tv:hover .e-dock__tv-img{transform:translateY(-2px) rotate(-4deg)}.e-dock__tv:hover .e-dock__tip{opacity:1;transform:translate(-50%)}.e-dock__play:hover .e-dock__vinyl{box-shadow:0 0 0 2px rgb(var(--e-dock-fg) / .25)}}.e-dock__play:focus-visible,.e-dock__tv:focus-visible{outline:2px solid rgb(var(--e-dock-fg));outline-offset:2px;border-radius:999px}@media screen and (max-width:699px){.e-dock{--s: var(--e-dock-size-m, 38px);--left: 12px;--pad: 4px;inset-block-end:calc(var(--e-dock-bottom-m, 12px) + env(safe-area-inset-bottom))}.e-dock--widget{--pad: 5px}.e-dock .e-dock__meta,.e-dock.is-playing .e-dock__eq{display:none}body.template-product:has(.product-quick-add.is-visible) .e-dock{inset-block-end:calc(var(--e-dock-bottom-m, 12px) + 86px + env(safe-area-inset-bottom))}}.e-dock[data-mode=compact] .e-dock__meta,.e-dock[data-mode=compact] .e-dock__eq{display:none}.e-dock__handle{display:none;place-items:center;width:12px;height:14px;opacity:.7}.e-dock__handle svg{width:7px;height:12px}.e-dock[data-mode=tucked]{transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),inset-inline-start .45s cubic-bezier(.22,1,.36,1),border-radius .45s cubic-bezier(.22,1,.36,1),padding .45s cubic-bezier(.22,1,.36,1),inset-block-end .3s cubic-bezier(.22,1,.36,1)}.e-dock[data-mode=tucked]:not(.is-open){inset-inline-start:0;gap:8px;min-height:56px;padding:8px 12px 8px 0;border-inline-start:0;border-radius:0 999px 999px 0;overflow:hidden;cursor:pointer}.e-dock[data-mode=tucked]:not(.is-open) .e-dock__vinyl{margin-inline-start:calc(var(--s) / -2)}.e-dock[data-mode=tucked]:not(.is-open) .e-dock__handle{display:grid}.e-dock[data-mode=tucked]:not(.is-open) .e-dock__meta,.e-dock[data-mode=tucked]:not(.is-open) .e-dock__eq,.e-dock[data-mode=tucked]:not(.is-open) .e-dock__divider,.e-dock[data-mode=tucked]:not(.is-open) .e-dock__tv{display:none}.e-dock[data-mode=tucked]:not(.is-open) .e-dock__hub{opacity:0}.e-dock[data-mode=tucked]:not(.is-open):active{transform:scale(.97);transform-origin:left center}@media screen and (max-width:699px){.e-dock[data-mode=tucked] .e-dock__meta{display:none}}@media(prefers-reduced-motion:reduce){.e-dock,.e-dock__vinyl,.e-dock__hub,.e-dock__eq i{animation:none!important;transition:none}}
/*# sourceMappingURL=/cdn/shop/t/52/assets/eighties-dock.css.map */