.color-compare-carousel{display:block;isolation:isolate;--ccc-card-w: var(--ccc-card-w-d, 440px)}.color-compare-carousel.ccc--disabled{display:none}.ccc__inner{display:flex;flex-direction:column;align-items:center;gap:32px;padding-top:var(--ccc-pt, 72px);padding-bottom:var(--ccc-pb, 72px)}.ccc__title{margin:0;text-align:center;color:var(--color-foreground, #141414);font-size:32px;line-height:1.15;max-width:20ch}.ccc__title-rte :is(h1,h2,h3,h4,h5,h6,p){margin:0;font-size:inherit;line-height:inherit;font-family:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit}.ccc__title-rte--mobile{display:none}.ccc__viewport{position:relative;width:100%;overflow:hidden;height:min(587px,78vw);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}.color-compare-carousel.is-dragging .ccc__viewport{cursor:grabbing}.ccc__track{position:absolute;top:0;right:0;bottom:0;left:0}.ccc__card{position:absolute;top:50%;left:50%;width:var(--ccc-card-w, 440px);max-width:90%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:pointer;transform-origin:center center;transform:translate(-50%,-50%);transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease;will-change:transform,opacity;-webkit-appearance:none;appearance:none}.color-compare-carousel.is-dragging .ccc__card{transition:none}.ccc__media{position:absolute;top:0;right:0;bottom:0;left:0;display:block;border-radius:14px;overflow:hidden;background:var(--color-background, #f6f6f6)}.ccc__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.ccc__chip{position:absolute;top:20px;left:20px;display:none;align-items:center;padding:5px 9px;background:#fff;border:1px solid #1a1a1a;border-radius:4px;color:#1a1a1a;font-size:11px;line-height:11px;letter-spacing:.01em;z-index:2;pointer-events:none;white-space:nowrap}.ccc__card.is-active .ccc__chip{display:inline-flex}.ccc__swatches{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;max-width:640px}.ccc__swatch{position:relative;width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;cursor:pointer;overflow:hidden;transition:box-shadow .16s ease,border-color .16s ease;-webkit-appearance:none;appearance:none}.ccc__swatch .color{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;border:0;border-radius:0;background-color:var(--color-background, var(--color));object-fit:cover}.ccc__swatch:not([aria-selected=true]) .color{border:1px solid var(--color-border);border-radius:6px;box-sizing:border-box}.ccc__swatch[aria-selected=true] .color{border:1px solid var(--color-foreground, #111010);border-radius:6px;box-sizing:border-box}.ccc__swatch[aria-selected=true]:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;transform:translate(-50%,-50%);background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAuOTUgMS41NSAxMy4xIDEwLjkiPiA8cGF0aCBkPSJNMS40NDk3MSA3Ljg3MzY0TDQuOTc4ODcgMTEuOTUwMUwxMy41NDk3IDIuMDUwMTEiIHN0cm9rZT0id2hpdGUiIHN0eWxlPSImIzEzNDtzdHJva2U6IHJlZDsmIzEzNDsiLz4gPC9zdmc+);background-size:contain;background-repeat:no-repeat;mix-blend-mode:difference;pointer-events:none}.ccc__swatch:focus-visible{outline:2px solid var(--color-foreground, #111010);outline-offset:2px}.ccc__cta{display:flex;justify-content:center;width:100%}.ccc__buy.btn{width:268px;max-width:90%;min-height:48px}@media(max-width:749px){.ccc__inner{gap:24px;padding-top:var(--ccc-pt-sm, 32px);padding-bottom:var(--ccc-pb-sm, 32px)}.ccc__title{font-size:24px;max-width:calc(325 / 375 * 100vw)}.ccc__title--has-mobile .ccc__title-rte--desktop{display:none}.ccc__title--has-mobile .ccc__title-rte--mobile{display:block}.color-compare-carousel{--ccc-card-w: calc(304px * 440 / 587)}.ccc__viewport{height:304px}.ccc__swatches{gap:12px;padding:0 16px}.ccc__swatch{width:36px;height:36px}.ccc__swatch[aria-selected=true]:after{width:18px;height:18px}.ccc__cta{max-width:268px}.ccc__buy.btn{width:100%;max-width:100%}}@media(prefers-reduced-motion:reduce){.ccc__card{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/179/assets/color-compare-carousel.css.map */