.shoppable-image{padding-top:2.8rem;padding-bottom:2.8rem}.shoppable-image__layout{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center}.shoppable-image__layout--reverse{grid-template-columns:1fr 1.2fr}.shoppable-image__layout--reverse .shoppable-image__media{order:2}@media screen and (max-width:749px){.shoppable-image__layout,.shoppable-image__layout--reverse{grid-template-columns:1fr}.shoppable-image__layout--reverse .shoppable-image__media{order:0}}.shoppable-image__media{position:relative}.shoppable-image__media img{display:block;width:100%;height:auto}.shoppable-image__placeholder{aspect-ratio:1.2;background:rgba(var(--color-foreground),.08)}.shoppable-image__hotspot{position:absolute;transform:translate(-50%,-50%)}.shoppable-image__pin{width:3.2rem;height:3.2rem;border-radius:50%;background:rgb(var(--color-background));color:rgb(var(--color-foreground));border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 .1rem .6rem #0003;transition:transform .15s ease}.shoppable-image__hotspot--open .shoppable-image__pin{transform:rotate(45deg)}.shoppable-image__tooltip{position:absolute;bottom:calc(100% + .8rem);left:50%;transform:translate(-50%) translateY(.4rem);background:rgb(var(--color-background));color:rgb(var(--color-foreground));padding:.8rem 1.4rem;white-space:nowrap;border-radius:999px;box-shadow:0 .1rem .6rem #0003;font-size:1.2rem;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease}.shoppable-image__tooltip a{color:inherit;text-decoration:none}.shoppable-image__hotspot--open .shoppable-image__tooltip{opacity:1;visibility:visible;transform:translate(-50%) translateY(0);pointer-events:auto}.shoppable-image__heading{margin:0 0 1.4rem}.shoppable-image__text{font-size:1.4rem;line-height:1.6;margin-bottom:2rem}.shoppable-image__button{display:inline-block;padding:1.2rem 2.4rem;background:rgb(var(--color-button));color:rgb(var(--color-button-text));text-decoration:none;font-size:1.3rem}
/*# sourceMappingURL=/cdn/shop/t/34/assets/component-shoppable-image.css.map */