.stl-card{display:grid;grid-template-columns:72px 1fr;gap:var(--spacing-6);align-items:center;width:max-content;max-width:100%}.stl-card__image-link{display:block;width:72px;height:72px}.stl-card__image{display:block;width:72px;height:auto;border-radius:var(--rounded-sm)}.stl-card__info{display:flex;flex-direction:column;gap:var(--spacing-1);min-width:0}.stl-card__vendor{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:rgb(var(--text-color) / .6)}.stl-card__title{font-size:var(--text-sm);font-weight:400;line-height:1.3;color:rgb(var(--text-color));text-decoration:none}.stl-card__title:hover{text-decoration:underline}.stl-card__bottom{display:flex;align-items:center;gap:var(--spacing-3);margin-top:var(--spacing-1-5);font-size:var(--text-sm)}.stl-card__bottom form{display:contents}.stl-card__action{appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0;background:none;cursor:pointer;font-size:var(--text-sm);color:rgb(var(--text-color) / .6);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.stl-card__action:hover{color:rgb(var(--text-color))}.stl-hotspot,.stl-hotspot-impact{--hot-spot-dot-size: var(--spacing-8);--hot-spot-dot-shadow-size: var(--spacing-2-5);position:absolute!important;grid-area:unset!important;max-width:none!important;top:var(--hot-spot-vertical-position, 50%);left:var(--hot-spot-horizontal-position, 50%);z-index:3;line-height:0}.stl-hotspot{transform:translate(-50%,-50%)}@media screen and (min-width:700px){.stl-hotspot,.stl-hotspot-impact{--hot-spot-dot-size: var(--spacing-12);--hot-spot-dot-shadow-size: var(--spacing-4)}}.stl-dot{appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0;cursor:pointer;--dot-size: 10px;position:relative;display:block;width:var(--dot-size);height:var(--dot-size);border-radius:9999px;background:rgb(var(--stl-dot-bg, 255 255 255));transition:transform .2s ease-in-out}.stl-dot[aria-expanded=true]{transform:scale(1.3)}.stl-dot:after{content:"";position:absolute;top:calc(50% - var(--spacing-6));left:calc(50% - var(--spacing-6));width:var(--spacing-12);height:var(--spacing-12);border-radius:9999px;background:radial-gradient(50% 50% at 50% 50%,rgb(var(--stl-dot-bg, 255 255 255) / 0),rgb(var(--stl-dot-bg, 255 255 255) / .3));animation:stl-ping 2s ease-in-out infinite alternate}.stl-dot:focus-visible{outline:2px solid rgb(var(--stl-dot-bg, 255 255 255));outline-offset:4px}@keyframes stl-ping{0%{transform:scale(1)}to{transform:scale(.8)}}.stl-floating-card{position:absolute;top:50%;left:calc(100% + 16px);z-index:50;width:max-content;max-width:min(360px,calc(100vw - 24px));padding:var(--spacing-4);background:rgb(var(--background));color:rgb(var(--text-color));border-radius:4px;box-shadow:0 1px 5px #0000001a;line-height:1.5;text-align:start;transform-origin:center left;transform:translateY(-50%) scale(.8);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.75,0,.175,1),transform .4s cubic-bezier(.75,0,.175,1),visibility .4s}.stl-hotspot[reverse] .stl-floating-card{left:auto;right:calc(100% + 16px);transform-origin:center right}.stl-floating-card.is-open{visibility:visible;opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto}.stl-floating-card:before{content:"";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-style:solid;border-width:8px;border-color:transparent rgb(var(--background)) transparent transparent}.stl-hotspot[reverse] .stl-floating-card:before{right:auto;left:100%;border-color:transparent transparent transparent rgb(var(--background))}.stl-floating-card--sheet{position:fixed;inset:auto 0 0 0;top:auto;width:auto;max-width:none;max-height:80vh;overflow-y:auto;padding:var(--spacing-6) var(--spacing-5) calc(var(--spacing-6) + env(safe-area-inset-bottom,0px));border-radius:var(--rounded-lg) var(--rounded-lg) 0 0;box-shadow:0 -4px 24px #0000002e;transform-origin:center bottom;transform:translateY(100%);z-index:1000}.stl-floating-card--sheet.is-open{transform:translateY(0)}.stl-floating-card--sheet:before{display:none}.stl-sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:999;opacity:0;transition:opacity .3s ease}.stl-sheet-backdrop.is-open{opacity:1}.product-list__promo:has(stl-hotspot[open]){position:relative;z-index:5}@media(prefers-reduced-motion:reduce){.stl-dot:after{animation:none}.stl-floating-card{transition:visibility .01s,opacity .01s}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/shop-the-look-hotspots.css.map */