byte-shop-the-look{--shop-the-look-dot-color: #ffffff;--shop-the-look-radius: 16px;--shop-the-look-gap: 1.25rem;--shop-the-look-dot-size: 10px;display:block}.shop-the-look__header{margin-bottom:1.5rem;text-align:center}.shop-the-look__title{margin:0}.shop-the-look__layout{display:grid;gap:var(--shop-the-look-gap);align-items:center}.shop-the-look__media{display:grid;gap:1rem}.shop-the-look__image-carousel{position:relative;display:grid;border-radius:var(--shop-the-look-radius);overflow:hidden}.shop-the-look__image-slide{grid-area:1 / 1;position:relative;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease}.shop-the-look__image-slide.is-active{opacity:1;visibility:visible}.shop-the-look__image-slide .img-ar,.shop-the-look__image-slide .placeholder-image{border-radius:var(--shop-the-look-radius)}.shop-the-look__dots{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.shop-the-look__image-slide:not(.is-active) .shop-the-look__dots{pointer-events:none}.shop-the-look__image-slide:not(.is-active) .shop-the-look__dot{visibility:hidden}.shop-the-look__dot{--shop-the-look-dot-x: 50%;--shop-the-look-dot-y: 50%;position:absolute;top:var(--shop-the-look-dot-y);left:var(--shop-the-look-dot-x);width:var(--shop-the-look-dot-size);height:var(--shop-the-look-dot-size);margin-top:calc(var(--shop-the-look-dot-size) / -2);margin-left:calc(var(--shop-the-look-dot-size) / -2);padding:0;border:0;border-radius:50%;background-color:var(--shop-the-look-dot-color);cursor:pointer;pointer-events:auto;transition:transform .2s ease;z-index:2}.shop-the-look__dot:after{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;margin-top:-24px;margin-left:-24px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,transparent,color-mix(in srgb,var(--shop-the-look-dot-color) 30%,transparent));animation:byte-shop-the-look-ping 2s ease-in-out infinite alternate;pointer-events:none}.shop-the-look__dot[aria-current=true]{transform:scale(1.3)}.shop-the-look__dot:focus-visible{outline:2px solid currentColor;outline-offset:4px}.shop-the-look__image-controls{display:flex;gap:.75rem;justify-content:center}.shop-the-look__products{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;justify-items:center;padding-left:1rem}.shop-the-look__look-products{display:none;grid-area:1 / 1;width:100%;gap:1rem;justify-items:center}.shop-the-look__look-products.is-active{display:grid}.shop-the-look__carousel{width:100%;display:grid}.shop-the-look__slide{grid-area:1 / 1;width:100%;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease}.shop-the-look__slide.is-active{opacity:1;visibility:visible;transform:translateY(0)}.shop-the-look__slide .product-block{padding:16px;border-radius:var(--shop-the-look-radius);background-color:rgb(var(--body-bg-color));color:rgb(var(--body-text-color));border:1px solid lightgray;box-shadow:0 2px 16px #00000014}.shop-the-look__controls{display:flex;gap:.75rem;justify-content:center}.shop-the-look__control{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgb(var(--body-text-color) / 15%);border-radius:50%;background:rgb(var(--body-bg-color));color:rgb(var(--body-text-color));cursor:pointer;transition:opacity .2s ease}.shop-the-look__control:hover{opacity:.75}.shop-the-look__control:focus-visible{outline:2px solid currentColor;outline-offset:3px}.shop-the-look__control svg{width:18px;height:18px}.shop-the-look__control[disabled]{opacity:.35;cursor:not-allowed}@keyframes byte-shop-the-look-ping{0%{transform:scale(.85);opacity:.6}to{transform:scale(1.1);opacity:1}}@media screen and (pointer:fine){.shop-the-look__dot:hover{transform:scale(1.3)}}@media screen and (min-width:750px){byte-shop-the-look{--shop-the-look-gap: 2rem}.shop-the-look__layout{grid-template-columns:minmax(0,1fr) minmax(0,40%)}.shop-the-look__carousel{max-width:420px;margin-inline:auto}}@media screen and (min-width:990px){byte-shop-the-look{--shop-the-look-gap: 0}.shop-the-look__layout{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-the-look__carousel{max-width:360px}}@media screen and (max-width:749px){.shop-the-look__products{padding-left:0}.shop-the-look__carousel{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-inline:var(--container-pad, 20px);margin-inline:calc(var(--container-pad, 20px) * -1)}.shop-the-look__carousel::-webkit-scrollbar{display:none}.shop-the-look__slide{flex:0 0 min(85vw,340px);scroll-snap-align:start;grid-area:unset;opacity:1;visibility:visible;transform:none;transition:none}.shop-the-look__slide:not(.is-active){opacity:.55}.shop-the-look__slide.is-active{opacity:1}.shop-the-look__controls{display:none}}
/*# sourceMappingURL=/cdn/shop/t/12/assets/byte-shop-the-look.css.map */