.on-looks{display:flex;justify-content:center;padding:24px 0 32px;background:var(--on-color-white)}.on-looks__list{display:flex;gap:1px;box-sizing:border-box;width:100%;max-width:1270px;margin:0;padding:0 0 0 32px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.on-looks__list::-webkit-scrollbar{display:none}.on-look{position:relative;flex:0 0 176px;min-width:0}.on-look__media{position:relative;display:block;aspect-ratio:176 / 505;overflow:hidden;background:var(--on-color-white)}.on-look__image{display:block;width:100%;height:100%;object-fit:cover}.on-look--shoppable .on-look__media{cursor:pointer}.on-look__plus,.on-look__marker{position:absolute;top:var(--on-hotspot-y, 22%);left:var(--on-hotspot-x, 55%);color:var(--on-color-white);font-family:var(--on-font-alt);font-size:16px;font-weight:400;line-height:18.4px;letter-spacing:var(--on-tracking);text-transform:none;white-space:nowrap}.on-look__marker{pointer-events:none}.on-look__plus{z-index:1}.on-look__plus:focus-visible{outline:1px solid var(--on-color-ink);outline-offset:1px;box-shadow:0 0 0 1px var(--on-color-white)}.on-look-modal{position:fixed;top:0;right:0;bottom:0;left:0;box-sizing:border-box;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:16px;border:0;background:transparent;color:var(--on-color-ink);opacity:0;transition:opacity .2s ease-out}.on-look-modal[open]{display:flex;align-items:center;justify-content:center}.on-look-modal.is-open{opacity:1}.on-look-modal::backdrop{background:#0000;transition:background-color .2s ease-out}.on-look-modal.is-open::backdrop{background:#0000001a}.on-look-modal__panel{position:relative;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,223px) minmax(0,450px);column-gap:82px;align-items:start;width:879px;max-width:100%;min-height:min(640px,100%);max-height:100%;padding:0 89px 24px 34px;overflow-y:auto;overscroll-behavior:contain;border:.8px solid var(--on-color-ink);background:var(--on-color-white);font-family:var(--on-font-alt)}.on-look-modal__close{position:absolute;top:17px;right:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:16px;letter-spacing:var(--on-tracking);text-transform:uppercase}.on-look-modal__close svg{flex:none}.on-look-modal__look{height:531px;margin-top:1px;overflow:hidden}.on-look-modal__frame{position:relative;margin-top:-8%}.on-look-modal__image{display:block;width:100%;height:auto}.on-look-modal__products{display:flex;flex-direction:column;gap:4px;margin:13px 0 0;padding:0;list-style:none}.on-look-line{display:grid;grid-template-columns:140px minmax(0,1fr);column-gap:23px;align-items:center}.on-look-line__photo{position:relative;display:block;aspect-ratio:2 / 3;overflow:hidden;background:var(--on-color-surface)}.on-look-line__image{display:block;width:100%;height:100%;object-fit:cover}.on-look-line__badge{position:absolute;top:10px;left:10px;color:var(--on-color-ink);font-family:var(--on-font-display);font-size:9px;line-height:11px}.on-look-line__info{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12px;line-height:14px;letter-spacing:var(--on-tracking);text-transform:uppercase}.on-look-line__title,.on-look-line__price,.on-look-line__status{margin:0}.on-look-line__title a{color:inherit;text-decoration:none}.on-look-line__compare{margin-left:8px;color:var(--on-color-text-secondary)}.on-look-line__add{position:relative;margin-top:20px}.on-look-line__toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:28px;background:var(--on-color-badge);color:var(--on-color-hero-border);font-family:var(--on-font-display);font-size:12px;line-height:14px;letter-spacing:0;text-transform:uppercase}.on-look-line__toggle:disabled{background:var(--on-color-surface);color:var(--on-color-disabled);cursor:not-allowed}.on-look-line__toggle[aria-busy=true]{cursor:progress}.on-look-line__chevron{flex:none}.on-look-line__toggle[aria-expanded=true] .on-look-line__chevron{transform:rotate(180deg)}.on-look-line__sizes{position:absolute;top:100%;right:0;left:0;z-index:2;display:flex;flex-direction:column;box-sizing:border-box;border:.8px solid var(--on-color-ink);background:var(--on-color-white);visibility:hidden;opacity:0;transition:opacity .15s ease-out,visibility 0s linear .15s}.on-look-line__sizes.is-open{visibility:visible;opacity:1;transition:opacity .15s ease-out}@media screen and (min-width:750px){.on-look-line__sizes{display:none;transition:opacity .15s ease-out,visibility 0s linear .15s,display 0s linear .15s allow-discrete}.on-look-line__sizes.is-open{display:flex;transition:opacity .15s ease-out,display 0s allow-discrete}@starting-style{.on-look-line__sizes.is-open{opacity:0}}}.on-look-line__size{display:flex;align-items:center;box-sizing:border-box;width:100%;min-height:41px;padding:12px 12px 12px 40px;border-bottom:1px solid #e6e6e6;color:var(--on-color-ink);font-family:var(--on-font-alt);font-size:14px;line-height:16px;letter-spacing:0;text-align:left;text-transform:none}.on-look-line__size:last-child{border-bottom:0}.on-look-line__size:disabled{color:var(--on-color-disabled);text-decoration:line-through;cursor:not-allowed}.on-look-line__size[aria-busy=true]{background:var(--on-color-ink);color:var(--on-color-white)}@media(hover:hover){.on-look-line__size:not(:disabled):hover{background:var(--on-color-surface)}}.on-look-line__status{font-size:11px;line-height:13px;text-transform:none}.on-look-line__status:empty{display:none}.on-look-line__status.is-error{color:#b42318}.on-look-modal__veil{display:none}@media screen and (max-width:989px){.on-look-modal__panel{column-gap:32px;padding-right:24px}}@media screen and (max-width:749px){.on-looks{justify-content:flex-start;padding:34px 0 32px}.on-looks__list{gap:3px;padding:0 16px}.on-look{flex:0 0 102px}.on-look__plus,.on-look__marker{font-size:11px;line-height:13px}.on-look-modal__panel{display:block;width:100%;min-height:0;padding:56px 16px 24px}.on-look-modal__close{top:20px;right:16px}.on-look-modal__look{display:none}.on-look-modal__products{margin-top:0}.on-look-line{grid-template-columns:80px minmax(0,1fr);column-gap:12px}.on-look-line__toggle[aria-expanded=true]{background:#d9d9d9;color:var(--on-color-ink)}.on-look-line__sizes{position:fixed;top:auto;right:0;bottom:0;left:0;z-index:3;max-height:70vh;padding-bottom:env(safe-area-inset-bottom);overflow-y:auto;border:0;opacity:1;transform:translateY(100%);transition:transform .25s var(--on-ease-out),visibility 0s linear .25s}.on-look-line__sizes.is-open{transform:none;transition:transform .25s var(--on-ease-out)}.on-look-line__size{min-height:44px}.on-look-modal__veil{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;display:block;background:#2424231a;visibility:hidden;opacity:0;transition:opacity .25s var(--on-ease-out),visibility 0s linear .25s}.on-look-modal.has-sizes .on-look-modal__veil{visibility:visible;opacity:1;transition:opacity .25s var(--on-ease-out)}}@media(prefers-reduced-motion:reduce){.on-look-modal,.on-look-modal::backdrop,.on-look-line__sizes,.on-look-line__sizes.is-open,.on-look-modal__veil,.on-look-modal.has-sizes .on-look-modal__veil{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/on-shop-the-look.css.map */