zb-colors{display:grid}.zb-colors__layout{gap:24px;grid-template-areas:"head" "stage" "panel"}.zb-colors .zb-colors__head{grid-area:head;margin-bottom:0}.zb-colors__head .zb-lead{margin-top:14px}.zb-colors .zb-colors__stage{grid-area:stage;aspect-ratio:4 / 5}.zb-colors__slide{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transform:scale(1.02);transition:opacity .6s var(--zb-ease),transform 1.2s var(--zb-ease)}.zb-colors__slide.is-active{opacity:1;transform:none}.zb-colors__slide img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.zb-colors__fallback{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--zb-swatch);background-image:linear-gradient(100deg,#ffffff2e,#fff0 50%,#00000014),repeating-linear-gradient(180deg,#fff0 0 28px,#ffffff73 28px 56px)}.zb-colors__panel{grid-area:panel;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.zb-colors__picked{margin:0;font-size:15px;color:var(--zb-muted)}.zb-colors__picked strong{color:var(--zb-text);font-weight:600}.zb-colors__swatches{display:flex;flex-wrap:wrap;gap:12px}.zb-colors__swatch{display:grid;place-items:center;width:56px;height:56px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;cursor:pointer;transition:border-color .25s,transform .25s var(--zb-ease);-webkit-tap-highlight-color:transparent}.zb-colors__swatch:hover{transform:translateY(-2px)}.zb-colors__swatch.is-active{border-color:var(--zb-text)}.zb-colors__swatch:focus-visible{outline:2px solid var(--zb-highlight);outline-offset:2px}.zb-colors__dot{width:44px;height:44px;border-radius:50%;background-color:var(--zb-swatch);background-image:var(--zb-swatch-img, repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 6px, rgba(255, 255, 255, .28) 6px 12px));background-size:cover;box-shadow:inset 0 0 0 1px #00000014}.zb-colors__desc{margin:0;max-width:28em;font-family:var(--zb-font-heading);font-size:20px;line-height:1.4;color:var(--zb-text)}.zb-colors__desc[hidden]{display:none}.zb-colors .zb-colors__cta{margin-top:8px;width:100%}@media(min-width:750px){.zb-colors .zb-colors__cta{width:auto}}@media(min-width:990px){.zb-colors__layout{grid-template-columns:1.25fr .75fr;grid-template-rows:auto 1fr;grid-template-areas:"stage head" "stage panel";column-gap:clamp(40px,6vw,88px);row-gap:32px;align-items:start}.zb-colors .zb-colors__head{align-self:end}}.zb-colors__notice{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#a8845b1f;color:var(--zb-text);font-size:14px;line-height:1.5}.zb-colors__notice[hidden]{display:none}
/*# sourceMappingURL=/cdn/shop/t/3/assets/zebra-colors.css.map */