.wear-it-with{display:block;container:wiw / inline-size}.wear-it-with [hidden]{display:none!important}.wear-it-with__heading{margin:0 0 2rem;font-size:var(--font-size-static-sm, 1.4rem);font-weight:var(--font-weight-medium, 500);letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--color-heading-text, var(--color-foreground)))}.wear-it-with__list{--wiw-media-size: 12rem;--wiw-gap: 2rem;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2.4rem}.wear-it-with__item{margin:0;padding:0}.wear-it-with__row{display:grid;grid-template-columns:var(--wiw-media-size) minmax(0,1fr) auto;align-items:center;gap:var(--wiw-gap)}.wear-it-with__media{display:block;width:var(--wiw-media-size);aspect-ratio:1 / 1;overflow:hidden;background-color:rgba(var(--color-foreground),.04)}.wear-it-with__media img,.wear-it-with__media svg{width:100%;height:100%;object-fit:cover;display:block}.wear-it-with__media img.lazy{opacity:1}.wear-it-with__info{display:flex;flex-direction:column;gap:.6rem;min-width:0}.wear-it-with__title{font-size:var(--font-size-static-sm, 1.4rem);line-height:var(--line-height-static-md, 1.4);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:rgb(var(--color-foreground));transition:opacity var(--duration-short, .15s) ease}.wear-it-with__title:hover{opacity:.65}.wear-it-with__price{font-size:var(--font-size-static-sm, 1.4rem);letter-spacing:.06em;white-space:nowrap;color:rgba(var(--color-foreground),.6)}.wear-it-with__action{display:flex;justify-content:flex-end}.wear-it-with__button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:4.4rem;padding:0 2.4rem;border:.1rem solid rgba(var(--color-border, var(--color-foreground)),var(--alpha-border, .25));border-radius:10rem;background:transparent;color:rgb(var(--color-foreground));font-family:inherit;font-size:var(--font-size-static-xs, 1.2rem);letter-spacing:.1em;line-height:1.2;text-transform:uppercase;text-align:center;cursor:pointer;transition:background-color var(--duration-short, .15s) ease,color var(--duration-short, .15s) ease,border-color var(--duration-short, .15s) ease,opacity var(--duration-short, .15s) ease}.wear-it-with__button:hover:not([disabled]):not(.wear-it-with__button--disabled){background-color:rgb(var(--color-foreground));border-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.wear-it-with__button:focus-visible{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.2rem}.wear-it-with__button--disabled,.wear-it-with__button[disabled]{opacity:.4;cursor:not-allowed}.wear-it-with__button.is-loading .wear-it-with__button-label{opacity:0}.wear-it-with__button.is-loading:after{content:"";position:absolute;width:1.6rem;height:1.6rem;border:.2rem solid currentColor;border-top-color:transparent;border-radius:50%;animation:wiw-spin .7s linear infinite}@keyframes wiw-spin{to{transform:rotate(360deg)}}.wear-it-with__button.is-added{background-color:rgb(var(--color-foreground));border-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.wear-it-with__options{margin-block-start:1.2rem;padding:1.6rem 0 .4rem;margin-inline-start:calc(var(--wiw-media-size) + var(--wiw-gap));border-block-start:.1rem solid rgba(var(--color-border, var(--color-foreground)),var(--alpha-border, .15));display:flex;flex-direction:column;gap:1rem;animation:wiw-fade-in var(--duration-default, .25s) ease}@keyframes wiw-fade-in{0%{opacity:0;transform:translateY(-.4rem)}to{opacity:1;transform:none}}.wear-it-with__options-label{font-size:var(--font-size-static-xs, 1.2rem);letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--color-foreground),.6)}.wear-it-with__swatches{display:flex;flex-wrap:wrap;gap:.8rem}.wear-it-with__swatch{min-width:4.8rem;min-height:4rem;padding:0 1.2rem;border:.1rem solid rgba(var(--color-border, var(--color-foreground)),var(--alpha-border, .25));background:transparent;color:rgb(var(--color-foreground));font-family:inherit;font-size:var(--font-size-static-xs, 1.2rem);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color var(--duration-short, .15s) ease,color var(--duration-short, .15s) ease}.wear-it-with__swatch:hover:not([disabled]){background-color:rgb(var(--color-foreground));border-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.wear-it-with__swatch--unavailable{opacity:.35;cursor:not-allowed;text-decoration:line-through}.wear-it-with__swatch.is-loading{opacity:.5;pointer-events:none}.wear-it-with__message{margin:1rem 0 0;margin-inline-start:calc(var(--wiw-media-size) + var(--wiw-gap));font-size:var(--font-size-static-xs, 1.2rem);color:rgb(var(--color-error, 200 30 30))}@container wiw (max-width: 560px){.wear-it-with__list{--wiw-media-size: 9rem;--wiw-gap: 1.6rem}.wear-it-with__row{grid-template-columns:var(--wiw-media-size) minmax(0,1fr);align-items:start;row-gap:1.2rem}.wear-it-with__action{grid-column:2 / -1;justify-content:stretch}.wear-it-with__button{width:100%;padding:0 1.6rem}}@supports not (container-type: inline-size){@media screen and (max-width:990px){.wear-it-with__list{--wiw-media-size: 9rem;--wiw-gap: 1.6rem}.wear-it-with__row{grid-template-columns:var(--wiw-media-size) minmax(0,1fr);align-items:start;row-gap:1.2rem}.wear-it-with__action{grid-column:2 / -1;justify-content:stretch}.wear-it-with__button{width:100%;padding:0 1.6rem}}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/wear-it-with.css.map */