.focal-point{--point-size: 4rem;display:block;position:absolute;z-index:var(--z-index-flat, 1);line-height:var(--line-height-lowest, 1);top:var(--vertical);left:var(--horizontal);margin-left:calc(-1 * var(--point-size)/2);margin-top:calc(-1 * var(--point-size)/2)}.focal-point__button{-webkit-appearance:none;appearance:none;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0;width:var(--point-size);height:var(--point-size);background:transparent;cursor:pointer;border-radius:50%;border:none;color:rgba(var(--color-white),1)}.focal-point__button .icon{width:100%;height:100%}.focal-popup{--point-size: 4rem;display:block;position:absolute;visibility:hidden;opacity:0;pointer-events:none;z-index:calc(var(--z-index-temporary, 5) - 3);transition:var(--duration-short) ease;transition-property:opacity,visibility;top:calc(var(--top) + var(--point-size));left:calc(var(--left) + var(--point-size));margin-top:calc((var(--top) + var(--point-size)) * -1/2);width:20rem;max-width:100%;border-width:var(--popup-border-width);border-style:solid;border-color:rgba(var(--color-foreground),var(--popup-border-opacity));box-shadow:var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity))}.focal-popup.position-right{left:auto;right:calc(100% - var(--left))}.focal-popup.position-bottom{top:auto;bottom:calc(100% - var(--top))}.focal-popup[open]{visibility:visible;opacity:1;pointer-events:auto}.focal-popup .card__content{padding:1.6rem}.focal-popup .card__heading{--font-family: var(--font-body-family);--font-size: var(--card-heading-font-size-mobile);--font-weight: var(--font-body-weight);--text-transform: inherit;--letter-spacing: var(--body-letter-spacing, 0rem);--line-height: var(--body-line-height, 1.5);margin-bottom:.8rem}.focal-point__button:hover .icon,.focal-point__button:focus .icon{transform:rotate(90deg)}@media screen and (max-width: 749px){.focal-point{top:var(--vertical-mobile, var(--vertical));left:var(--horizontal-mobile, var(--horizontal))}}@media screen and (min-width: 750px){.focal-point{--point-size: 5.6rem}.focal-popup{--point-size: 5.6rem;width:30rem;left:calc(var(--left) + var(--point-size) + .8rem)}.focal-popup.position-right{left:auto;right:calc(100% - var(--left) + .8rem)}.focal-popup .card__content{padding:2.4rem}.focal-popup .card__heading{--font-size: var(--card-heading-font-size-tablet)}}@media screen and (min-width: 1033px){.focal-popup .card__heading{--font-size: var(--card-heading-font-size-desktop)}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/component-focal-point.css.map */