.hotspot{position:absolute;left:var(--hotspot-x);top:var(--hotspot-y);width:45px;height:45px;padding:0;border:none;background:none;color:#fff;transform:translate(-50%,-50%);cursor:pointer}.hotspot__surface{position:absolute;top:0;left:0;width:45px;height:45px;min-width:45px;padding:0;border-radius:50%;background-color:#000;overflow:hidden;white-space:nowrap;transition:width .25s ease,border-radius .25s ease,padding .25s ease}.hotspot__icon{position:absolute;top:22px;left:22px;width:12px;height:12px;transform:translate(-50%,-50%)}.hotspot__icon:before,.hotspot__icon:after{content:"";position:absolute;background:currentColor}.hotspot__icon:before{top:50%;left:0;width:100%;height:3px;transform:translateY(-50%)}.hotspot__icon:after{left:50%;top:0;width:3px;height:100%;transform:translate(-50%)}.hotspot__label{display:flex;align-items:center;height:45px;max-width:0;opacity:0;overflow:hidden;font-size:14px;transition:max-width .25s ease,opacity .2s ease}.hotspot--labeled:hover .hotspot__surface,.hotspot--labeled:focus-visible .hotspot__surface,.hotspot--labeled.is-active .hotspot__surface{width:auto;border-radius:8px;padding:0 20px}.hotspot--labeled:hover .hotspot__icon,.hotspot--labeled:focus-visible .hotspot__icon,.hotspot--labeled.is-active .hotspot__icon{display:none}.hotspot--labeled:hover .hotspot__label,.hotspot--labeled:focus-visible .hotspot__label,.hotspot--labeled.is-active .hotspot__label{max-width:240px;opacity:1}@media(max-width:896px){.hotspot,.hotspot__surface{width:32px;height:32px;min-width:32px}.hotspot__icon{top:16px;left:16px;width:10px;height:10px}.hotspot__icon:before,.hotspot__icon:after{background:currentColor}.hotspot__icon:before{height:2px}.hotspot__icon:after{width:2px}.hotspot__label{height:32px;font-size:13px}}dialog.hotspot-panel{position:fixed;top:16px;height:100%;right:16px;bottom:16px;left:auto;width:400px;max-width:calc(100vw - 32px);margin:0;padding:0;border:none;border-radius:12px;background:#fff;color:#000;overflow:hidden;translate:100% 0;transition:translate .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}dialog.hotspot-panel[open]{display:flex;flex-direction:column;translate:0 0}@starting-style{dialog.hotspot-panel[open]{translate:100% 0}}dialog.hotspot-panel.is-nav-swap{transition:none}dialog.hotspot-panel::backdrop{background:#0000;transition:background-color .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}dialog.hotspot-panel[open]::backdrop{background:#00000080}@starting-style{dialog.hotspot-panel[open]::backdrop{background:#0000}}dialog.hotspot-panel.is-nav-swap::backdrop{transition:none}@keyframes hotspot-panel-swap-enter{0%{opacity:0;translate:24px 0}to{opacity:1;translate:0 0}}dialog.hotspot-panel.is-nav-entering{animation:hotspot-panel-swap-enter .35s ease}.hotspot-panel__media{position:relative;flex-shrink:0;aspect-ratio:4 / 3}.hotspot-panel__media img,.hotspot-panel__placeholder{width:100%;height:100%;object-fit:cover}.hotspot-panel__close{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:50%;background:#000;color:#fff;font-size:18px;line-height:1;cursor:pointer}.hotspot-panel__body{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;align-items:flex-end;overflow-y:auto;padding:24px 32px;text-align:right}.hotspot-panel__subtitle{margin:0 0 4px;font-size:13px;color:#0009}.hotspot-panel__title{margin:0 0 16px;font-size:22px;font-weight:700}.hotspot-panel__content{font-size:14px;line-height:1.6;color:#000000bf}.hotspot-panel__content p+p{margin-top:16px}.hotspot-panel__nav{flex-shrink:0;display:flex;gap:8px;padding:0 32px 24px}.hotspot-panel__nav-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:50%;background:#000;color:#fff;cursor:pointer}@media(max-width:896px){dialog.hotspot-panel{top:0;left:0;right:0;bottom:0;width:100%;height:100%;max-width:none;max-height:none;border-radius:0;translate:0 100%}dialog.hotspot-panel[open]{translate:0 0}@starting-style{dialog.hotspot-panel[open]{translate:0 100%}}@keyframes hotspot-panel-swap-enter-mobile{0%{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}dialog.hotspot-panel.is-nav-entering{animation:hotspot-panel-swap-enter-mobile .2s ease}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/hotspot.css.map */