.hotspots{background:var(--background-color);--transition-effect: cubic-bezier(.45, .05, .55, .95);--transition-duration: .3s;--dot-radius: 20px}.hotspots--text-black{--dot-background: rgba(255, 255, 255, .4);--title-color: var(--heading-color, var(--theme-color-ink))}.hotspots--text-white{--title-color: var(--heading-color, var(--theme-color-reverse))}.hotspots--btn-white .hotspots-product__btn{background:var(--theme-color-reverse);border-color:var(--theme-color-reverse)}.hotspots--btn-white .hotspots-product__btn:hover{background:transparent;color:var(--theme-color-reverse)}.hotspots--btn-black .button--action-circle{background-color:var(--theme-color-ink);color:var(--theme-color-reverse)}.hotspots--btn-black .button--action-circle:hover{color:var(--theme-color-ink);background-color:var(--theme-color-reverse)}.hotspots-bg img,.hotspots-bg video{width:100%;height:100%;object-fit:cover}.hotspots--show-active .hotspots-action{opacity:0;z-index:-1}.hotspots-inner{padding:2.4rem}.hotspots-head,.hotspots-item__title{color:var(--title-color)}.hotspots-title{font-size:1.6rem}.hotspots-product__title{position:absolute;margin-top:32px;font-size:32px;line-height:1;width:100%;text-align:center}.hotspots-product__title{visibility:hidden;opacity:0;transition:var(--transition-duration) visibility var(--transition-effect),var(--transition-duration) opacity var(--transition-effect)}.hotspots-product__title.active{visibility:visible;opacity:1}.hotspots-content{margin-top:2rem}.hotspots-product__wrapper{margin-top:12rem;margin-bottom:15rem}.hotspots-product__inner{width:80%;margin-left:auto;margin-right:auto;max-width:36rem}.hotspots-product__btn{padding:1.1rem 1.2rem;gap:.8rem}.hotspots-items{position:absolute;margin-left:-2rem;margin-right:-2rem;width:calc(100% + 4rem);bottom:2rem;visibility:hidden;opacity:0;transition:var(--transition-duration) visibility var(--transition-effect),var(--transition-duration) opacity var(--transition-effect)}.hotspots-items.active{visibility:visible;opacity:1}.hotspots-items .splide__slide{padding:2rem;display:flex;flex-direction:column;justify-content:flex-end}.hotspots-item{max-width:40.8rem;margin-left:auto;margin-right:auto}.hotspots-item__detail{background-color:var(--theme-color-reverse);border-radius:.5rem;box-shadow:0 0 1.2rem #0003;padding:1.6rem}.hotspots--text-white .hotspots-item__detail{background-color:var(--theme-color-ink);color:var(--theme-color-reverse)}.hotspots--text-white .hotspots-item__close{background-color:var(--theme-color-reverse);color:var(--theme-color-ink)}.hotspots--text-white .hotspots-item__close:hover{color:var(--theme-color-reverse);background:transparent;border-color:var(--theme-color-reverse)}.hotspots-item__detail p{font-size:1.6rem;line-height:2.6rem}.hotspots-detail{flex-direction:column-reverse}.hotspots-nav{padding-top:.4rem}.hotspots-nav__dots{background:var(--theme-color-reverse);padding:.4rem;border-radius:1.6rem;gap:.4rem;-webkit-user-select:none;user-select:none}.hotspots-nav__dot{width:.8rem;height:.8rem;background:#0000004d;border-radius:8px;transition:var(--transition-duration) background var(--transition-effect),var(--transition-duration) width var(--transition-effect);-webkit-user-select:none;user-select:none}.hotspots-nav__dot.active{width:2.4rem;background:var(--theme-color-ink)}.hotspots-dot{--top-position: var(--pos-y-mobile);--left-position: var(--pos-x-mobile);--size: calc(var(--dot-radius) * 2);width:var(--size);height:var(--size);background:var(--dot-background, rgba(0, 0, 0, .6));box-shadow:0 .6rem .8rem #0000004d;border-radius:var(--size);overflow:hidden;border:.2rem solid var(--theme-color-reverse);justify-content:center;align-items:center;display:inline-flex;position:absolute;top:calc(calc(100% - var(--size)) / 100 * var(--top-position) + var(--dot-radius));left:calc(calc(100% - var(--size)) / 100 * var(--left-position) + var(--dot-radius));margin-top:calc(-1 * var(--dot-radius));margin-left:calc(-1 * var(--dot-radius));cursor:pointer;transition:var(--transition-duration) background var(--transition-effect);-webkit-user-select:none;user-select:none}.hotspots-dot:focus:not(:focus-visible){border:.2rem solid var(--theme-color-reverse)}.hotspots-dot__inner{width:var(--dot-radius);height:var(--dot-radius);border-radius:var(--dot-radius);background:var(--theme-color-reverse);transition:var(--transition-duration) width var(--transition-effect),var(--transition-duration) height var(--transition-effect)}.hotspots-dot.active{background:var(--theme-color-reverse)}.hotspots-dot.active .hotspots-dot__inner{width:100%;height:100%}.hotspots-action{transition:var(--transition-duration) opacity var(--transition-effect);margin-bottom:2rem}.hotspots-nav__arrows{gap:1.6rem}@media screen and (min-width: 750px){.hotspots-dot{--top-position: var(--pos-y-desktop);--left-position: var(--pos-x-desktop)}.hotspots-item__title{font-size:2.5rem;line-height:1.4;margin-bottom:1.6rem}.hotspots-item__close{padding:7px;width:3rem;height:3rem;min-width:3rem}.hotspots-item__close svg{display:block;width:100%;height:auto}}@media screen and (min-width: 990px){.hotspots-head{text-align:left}.hotspots-inner{padding:4rem}.hotspots-content{display:flex;flex-wrap:wrap;justify-content:center;margin-top:0}.hotspots-items{width:25%;left:0;bottom:15rem;opacity:1;visibility:visible}.hotspots-action{margin-bottom:0}.hotspots--show-active .hotspots-action{opacity:1;z-index:0}.hotspots-product__wrapper{width:50%;margin-top:2rem;margin-bottom:2.4rem}.hotspots-product__inner{width:100%;max-width:none}.hotspots-item{position:absolute;bottom:0;visibility:hidden;opacity:0;transition:var(--transition-duration) visibility var(--transition-effect),var(--transition-duration) opacity var(--transition-effect)}.hotspots-item.active{opacity:1;visibility:visible}.hotspots-detail{width:100%;flex-direction:row;justify-content:space-between}.hotspots-item__detail{display:flex;align-items:flex-start;gap:2rem}.hotspots-nav{padding-top:0}}@media screen and (min-width: 1240px){.hotspots-head{text-align:left}.hotspots-items{width:calc(50% - 30rem);max-width:44rem;bottom:19rem}.hotspots-item{max-width:none}.hotspots-product__wrapper{width:56rem;margin-top:2rem;margin-bottom:2.4rem}.hotspots-detail{width:100%;flex-direction:row;justify-content:space-between}}@media screen and (min-width: 1440px){.hotspots-item__detail{gap:4rem}.hotspots-item__close{width:4rem;height:4rem;min-width:4rem;padding:1.1rem}}
/*# sourceMappingURL=/cdn/shop/t/279/assets/section-hotspots.css.map */