.hf-hotspot-image{display:block;width:var(--hf-hotspot-image-w-mobile, var(--hf-hotspot-image-w, 100%));margin-top:var(--hf-hotspot-image-margin-top);margin-bottom:var(--hf-hotspot-image-margin-bottom)}@media(min-width:750px){.hf-hotspot-image{width:var(--hf-hotspot-image-w, 100%)}}.hf-hotspot-image__media{position:relative;width:100%;aspect-ratio:var(--hf-hotspot-image-ratio);overflow:visible}.hf-hotspot-image__desktop-media,.hf-hotspot-image__mobile-media{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.hf-hotspot-image__mobile-media{display:none}.hf-hotspot-image__img{display:block;width:100%;height:100%;object-fit:cover}.hf-hotspot-modal-image img{display:block;width:100%;max-width:100%;height:auto;object-fit:cover}.hf-hotspot-image__placeholder,.hf-hotspot-image__placeholder-img{width:100%;height:100%}.hf-hotspot-image--original .hf-hotspot-image__media{aspect-ratio:auto;overflow:visible}.hf-hotspot-image--original .hf-hotspot-image__desktop-media,.hf-hotspot-image--original .hf-hotspot-image__mobile-media{position:static}.hf-hotspot-image--original .hf-hotspot-image__img{height:auto;object-fit:initial}.hf-hotspot-image--rounded .hf-hotspot-image__desktop-media,.hf-hotspot-image--rounded .hf-hotspot-image__mobile-media{border-radius:var(--media-radius)}.hf-hotspot-image--border .hf-hotspot-image__media{border:var(--media-border-width) solid var(--color-border-value)}.hf-hotspot-image--shadow .hf-hotspot-image__media{box-shadow:var(--media-support-shadow-horizontal-offset) var(--media-support-shadow-vertical-offset) var(--media-support-shadow-blur-radius) rgba(var(--color-shadow),var(--media-support-shadow-opacity))}.hf-hotspot-image__empty-state{position:absolute;right:1.6rem;bottom:1.6rem;z-index:1;padding:.8rem 1rem;border-radius:1rem;background:rgba(var(--color-background),.92);color:rgb(var(--color-foreground));font-size:1.2rem;line-height:1.4}.hf-hotspot-image .bullet-point,.hf-hotspot-image .hotspot-btn,.hf-hotspot-image .hotspot__content{position:absolute;top:var(--offset-y)}.hf-hotspot-image .hotspot{--btn-size: var(--hf-hotspot-btn-size, 4rem);--carret-height: .5rem}.hf-hotspot-image .hotspot-btn{left:var(--offset-x);display:flex;align-items:center;justify-content:center;width:var(--btn-size);height:var(--btn-size);transform:translate(-50%,-50%);border:0;border-radius:50%;background-color:rgb(var(--color-background));color:rgb(var(--color-foreground));cursor:pointer;z-index:1}.hf-hotspot-image .hotspot-btn .material-icon{display:block;width:calc(var(--btn-size) * .75);height:calc(var(--btn-size) * .75);pointer-events:none;transition:transform .1s ease-in-out}.hf-hotspot-image .hotspot[data-open=true] .material-icon{transform:rotate(135deg)}.hf-hotspot-image .hotspot-btn:before,.hf-hotspot-image .hotspot-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:50%;border:solid 1px rgb(var(--color-background));animation:hf-hotspot-ripple 2s linear infinite;pointer-events:none}.hf-hotspot-image .hotspot-btn:after{animation-delay:1s}@keyframes hf-hotspot-ripple{0%{opacity:0;transform:none}20%,70%{opacity:1}to{opacity:0;transform:scale(1.5)}}.hf-hotspot-image .hotspot__content{left:var(--offset-x);width:min(var(--hf-hotspot-modal-width),calc(100vw - 2rem));max-width:var(--hf-hotspot-modal-width);transform:translate(-50%,calc(-100% - (var(--btn-size) / 2) - var(--carret-height)));background:rgb(var(--color-background));background:var(--gradient-background);border:var(--container-border-thickness) solid var(--container-border-color);border-radius:var(--container-radius);box-shadow:var(--container-shadow-horizontal-offset) var(--container-shadow-vertical-offset) var(--container-shadow-blur-radius) rgba(var(--color-shadow),var(--container-shadow-opacity));opacity:0;visibility:hidden;pointer-events:none;transition:none;z-index:2;overflow:hidden}.hf-hotspot-image[data-contain-hotspot-modal=true] .hotspot__content{left:clamp(calc((var(--hf-hotspot-modal-width) / 2) + 1rem),var(--offset-x),calc(100% - (var(--hf-hotspot-modal-width) / 2) - 1rem))}.hf-hotspot-image .hotspot[data-open=true] .hotspot__content{opacity:1;visibility:visible;pointer-events:auto}.hf-hotspot-image .hotspot[data-direction=bottom] .hotspot__content{transform:translate(-50%,calc((var(--btn-size) / 2) + var(--carret-height)))}.hf-hotspot-image .hotspot__content.left{text-align:left}.hf-hotspot-image .hotspot__content.center{text-align:center}.hf-hotspot-image .hotspot__content.right{text-align:right}.hf-hotspot-image .hotspot__content-inner{display:flex;flex-direction:column;gap:1rem;padding:var(--hf-container-padding-mobile)}.hf-hotspot-image .hotspot__placeholder{margin:0;font-size:1.3rem;line-height:1.5}.hf-hotspot-modal-block{width:100%;margin-top:var(--hf-hotspot-modal-margin-top, 0);margin-bottom:var(--hf-hotspot-modal-margin-bottom, 0);text-align:var(--hf-hotspot-modal-align-mobile, left)}.hf-hotspot-modal-block--button{display:flex;justify-content:var(--hf-hotspot-modal-justify-mobile, flex-start)}.hf-hotspot-modal-block--image .hf-hotspot-modal-image{margin-left:calc(var(--hf-container-padding-mobile) * -1);margin-right:calc(var(--hf-container-padding-mobile) * -1);max-width:none}.hf-hotspot-modal-block--image:first-child .hf-hotspot-modal-image{margin-top:calc(var(--hf-container-padding-mobile) * -1)}.hf-hotspot-modal-image{overflow:hidden}.hf-hotspot-modal-image--placeholder{min-height:12rem}.hf-hotspot-modal-image__placeholder{width:100%;height:100%}.hf-hotspot-modal-title{margin:0}.hf-hotspot-modal-block--text>*:first-child{margin-top:0}.hf-hotspot-modal-block--text>*:last-child{margin-bottom:0}.hf-hotspot-image .bullet-point,.hf-hotspot-image .bullet-point__title{color:rgb(var(--color-foreground))}.hf-hotspot-image .bullet-point{--bullet-size: var(--hf-hotspot-bullet-size);--line-width: var(--hf-hotspot-line-width);--line-square-size: 4rem;--line-square-diagonal: calc(var(--line-square-size) * 1.41);--text-padding: 1rem;--desktop-width: var(--hf-hotspot-bullet-width);--mobile-width: var(--hf-hotspot-bullet-width-mobile);left:var(--offset-x);width:100%;max-width:calc(var(--desktop-width) - var(--line-square-size));height:var(--line-width);background:rgb(var(--color-foreground));transform:translate(var(--line-square-size),-50%);text-align:right}.hf-hotspot-image .bullet-point__line-end,.hf-hotspot-image .bullet-point__line-end:after{content:"";display:block;background:rgb(var(--color-foreground))}.hf-hotspot-image .bullet-point__line-end{position:absolute;top:0;right:100%;width:var(--line-square-size);height:var(--line-width);transform-origin:top right}.hf-hotspot-image .bullet-point__line-end:after{position:absolute;top:calc(var(--line-width) / 2);left:0;width:var(--bullet-size);height:var(--bullet-size);border-radius:50%;transform:translate(-50%,-50%)}.hf-hotspot-image .bullet-point__title,.hf-hotspot-image .bullet-point__text{position:absolute;left:0;max-width:100%;box-sizing:border-box;line-height:1.3;white-space:normal;word-break:normal;overflow-wrap:break-word;-webkit-hyphens:none;hyphens:none}.hf-hotspot-image .bullet-point__title{margin:0;width:100%;top:-.2em;transform:translateY(-100%)}.hf-hotspot-image .bullet-point__text{top:1rem;width:100%;min-width:0}.hf-hotspot-image .bullet-point__text>:first-child{margin-top:0}.hf-hotspot-image .bullet-point__text>:last-child{margin:0}.hf-hotspot-image .bullet-point__text p{width:auto;max-width:none}.hf-hotspot-image .bullet-point[data-line-bend=bottom]{top:calc(var(--offset-y) - var(--line-square-size))}.hf-hotspot-image .bullet-point[data-line-bend=top]{top:calc(var(--offset-y) + var(--line-square-size))}.hf-hotspot-image .bullet-point[data-line-bend=bottom] .bullet-point__line-end{width:var(--line-square-diagonal);transform:rotate(315deg)}.hf-hotspot-image .bullet-point[data-line-bend=top] .bullet-point__line-end{width:var(--line-square-diagonal);transform:rotate(45deg)}.hf-hotspot-image .bullet-point[data-direction=left]{transform:translate(calc(-100% - var(--line-square-size) - (var(--line-width) / 2)),-50%);text-align:left}.hf-hotspot-image .bullet-point[data-direction=left] .bullet-point__line-end{left:100%;right:auto;transform-origin:top left}.hf-hotspot-image .bullet-point[data-direction=left] .bullet-point__line-end:after{left:100%}.hf-hotspot-image .bullet-point[data-line-bend=bottom][data-direction=left] .bullet-point__line-end{transform:rotate(45deg)}.hf-hotspot-image .bullet-point[data-line-bend=top][data-direction=left] .bullet-point__line-end{transform:rotate(-45deg)}.hf-hotspot-image .bullet-point[data-direction=left] .bullet-point__title,.hf-hotspot-image .bullet-point[data-direction=left] .bullet-point__text{padding-right:var(--text-padding);padding-left:0}.hf-hotspot-image .bullet-point[data-direction=right] .bullet-point__title,.hf-hotspot-image .bullet-point[data-direction=right] .bullet-point__text{padding-left:var(--text-padding);padding-right:0}@media screen and (min-width:750px){.hf-hotspot-image .hotspot__content-inner{padding:var(--hf-container-padding-desktop)}.hf-hotspot-modal-block{text-align:var(--hf-hotspot-modal-align-desktop, left)}.hf-hotspot-modal-block--button{justify-content:var(--hf-hotspot-modal-justify-desktop, flex-start)}.hf-hotspot-modal-block--image .hf-hotspot-modal-image{margin-left:calc(var(--hf-container-padding-desktop) * -1);margin-right:calc(var(--hf-container-padding-desktop) * -1)}.hf-hotspot-modal-block--image:first-child .hf-hotspot-modal-image{margin-top:calc(var(--hf-container-padding-desktop) * -1)}}.hf-hotspot-image .bullet-point[data-contain=true][data-direction=right]{max-width:min(var(--desktop-width),calc(100% - var(--offset-x) - var(--line-square-size) - 1rem))}.hf-hotspot-image .bullet-point[data-contain=true][data-direction=left]{max-width:min(var(--desktop-width),calc(var(--offset-x) - var(--line-square-size) - 1rem))}@media screen and (max-width:749px){.hf-hotspot-image .hotspot{--btn-size: var(--hf-hotspot-btn-size-mobile, 3rem)}.hf-hotspot-image .hotspot--mobile-position,.hf-hotspot-image .bullet-point--mobile-position{--offset-x: var(--mobile-offset-x) !important;--offset-y: var(--mobile-offset-y) !important}.hf-hotspot-image--has-mobile-image .hf-hotspot-image__desktop-media{display:none}.hf-hotspot-image--has-mobile-image .hf-hotspot-image__mobile-media{display:block}.hf-hotspot-image .hotspot__content{left:clamp(calc((var(--hf-hotspot-modal-width-mobile) / 2) + 1rem),var(--offset-x),calc(100% - (var(--hf-hotspot-modal-width-mobile) / 2) - 1rem));width:min(var(--hf-hotspot-modal-width-mobile),calc(100vw - 2rem));max-width:var(--hf-hotspot-modal-width-mobile)}.hf-hotspot-image .hf-hotspot-modal-title{font-size:1.6rem}.hf-hotspot-image .bullet-point{--bullet-size: var(--hf-hotspot-bullet-size-mobile);--line-width: var(--hf-hotspot-line-width-mobile);--line-square-size: 3rem;--text-padding: .5rem;max-width:min(var(--mobile-width),calc(100% - var(--offset-x) - var(--line-square-size) - 1rem))}.hf-hotspot-image .bullet-point[data-direction=left]{max-width:min(var(--mobile-width),calc(var(--offset-x) - var(--line-square-size) - 1rem))}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-line-bend=none]{top:var(--offset-y)}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-line-bend=bottom]{top:calc(var(--offset-y) - var(--line-square-size))}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-line-bend=top]{top:calc(var(--offset-y) + var(--line-square-size))}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-direction=right]{transform:translate(calc(var(--line-square-size) / 2),-50%);text-align:right;max-width:min(var(--mobile-width),calc(100% - var(--offset-x) - var(--line-square-size)))!important}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-direction=left]{transform:translate(calc(-100% - var(--line-square-size) - (var(--line-width) / 2)),-50%);text-align:left;max-width:min(var(--mobile-width),calc(var(--offset-x) - var(--line-square-size) - 1rem))}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-direction=right] .bullet-point__line-end{left:auto;right:100%;transform-origin:top right}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-direction=right] .bullet-point__line-end:after{left:0;right:auto}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-line-bend=none] .bullet-point__line-end{transform:none}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-line-bend=bottom][data-mobile-direction=right] .bullet-point__line-end{transform:rotate(315deg)}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-line-bend=bottom][data-mobile-direction=left] .bullet-point__line-end,.hf-hotspot-image .bullet-point--mobile-position[data-mobile-line-bend=top][data-mobile-direction=right] .bullet-point__line-end{transform:rotate(45deg)}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-direction=left] .bullet-point__line-end{left:100%;right:auto;transform-origin:top left}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-direction=left] .bullet-point__line-end:after{left:100%;right:auto}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-line-bend=top][data-mobile-direction=left] .bullet-point__line-end{transform:rotate(-45deg)}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-direction=left] .bullet-point__title,.hf-hotspot-image .bullet-point--mobile-position[data-mobile-direction=left] .bullet-point__text{padding-right:var(--text-padding);padding-left:0}.hf-hotspot-image .bullet-point--mobile-position[data-mobile-direction=right] .bullet-point__title,.hf-hotspot-image .bullet-point--mobile-position[data-mobile-direction=right] .bullet-point__text{padding-right:0;padding-left:var(--text-padding)}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-hotspot-image.css.map */