.purchase-interactive-video-color-switch{position:relative;display:block;overflow:hidden;background:var(--pivcs-background, #0a0b05);color:var(--pivcs-text-color, #fff);--pivcs-ratio: var(--pivcs-design-ratio, .0694444444vw)}.purchase-interactive-video-color-switch__stage{position:relative;min-height:calc(var(--pivcs-stage-height, 800) * var(--pivcs-ratio));background-color:var(--pivcs-panel-background, #0a0b05);background-image:var(--pivcs-background-image, none);background-position:center;background-size:cover;background-repeat:no-repeat}.purchase-interactive-video-color-switch__panels,.purchase-interactive-video-color-switch__panel,.purchase-interactive-video-color-switch__media{position:absolute;top:0;right:0;bottom:0;left:0}.purchase-interactive-video-color-switch__panel[hidden],.purchase-interactive-video-color-switch__video[hidden],.purchase-interactive-video-color-switch__trigger[hidden]{display:none}.purchase-interactive-video-color-switch__panel{overflow:hidden;background:var(--pivcs-panel-background, #0a0b05);border-radius:calc(var(--pivcs-stage-radius, 0) * var(--pivcs-ratio));opacity:0;visibility:hidden;transition:opacity .65s ease,visibility 0s linear .65s}.purchase-interactive-video-color-switch__panel.is-active{opacity:1;visibility:visible;transition:opacity .65s ease,visibility 0s}.purchase-interactive-video-color-switch__cover,.purchase-interactive-video-color-switch__cover-image,.purchase-interactive-video-color-switch__video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.purchase-interactive-video-color-switch__cover,.purchase-interactive-video-color-switch__video{display:block}.purchase-interactive-video-color-switch__cover{z-index:1;opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}.purchase-interactive-video-color-switch__cover-image,.purchase-interactive-video-color-switch__video{object-fit:cover}.purchase-interactive-video-color-switch__cover-image{display:block}.purchase-interactive-video-color-switch__video{z-index:2;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s}.purchase-interactive-video-color-switch__video.is-active{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}.purchase-interactive-video-color-switch__video--mobile{display:none}.purchase-interactive-video-color-switch__video--mobile.is-active{display:block}.purchase-interactive-video-color-switch__video--master,.purchase-interactive-video-color-switch--no-transition .purchase-interactive-video-color-switch__panel,.purchase-interactive-video-color-switch--no-transition .purchase-interactive-video-color-switch__cover,.purchase-interactive-video-color-switch--no-transition .purchase-interactive-video-color-switch__video,.purchase-interactive-video-color-switch--no-transition .purchase-interactive-video-color-switch__trigger,.purchase-interactive-video-color-switch--no-transition .purchase-interactive-video-color-switch__color,.purchase-interactive-video-color-switch--no-transition .purchase-interactive-video-color-switch__color-name{transition:none}.purchase-interactive-video-color-switch__panel.is-playing .purchase-interactive-video-color-switch__cover,.purchase-interactive-video-color-switch__panel.has-segment-preview .purchase-interactive-video-color-switch__cover{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}.purchase-interactive-video-color-switch__copy{position:absolute;z-index:4;top:calc(var(--pivcs-copy-top, 70) * var(--pivcs-ratio));left:calc(var(--pivcs-copy-left, 58) * var(--pivcs-ratio));width:min(calc(var(--pivcs-content-width, 520) * var(--pivcs-ratio)),72%);text-align:var(--pivcs-text-align, left);pointer-events:none}.purchase-interactive-video-color-switch__copy-item[hidden]{display:none}.purchase-interactive-video-color-switch__title,.purchase-interactive-video-color-switch__subtitle{margin:0}.purchase-interactive-video-color-switch__title{color:var(--pivcs-text-color, #fff);font-family:FT Terra,sans-serif;font-size:calc(var(--pivcs-title-size, 56) * var(--pivcs-ratio));font-weight:var(--pivcs-title-weight, 500);line-height:1.1}.purchase-interactive-video-color-switch__subtitle{max-width:34ch;margin-top:calc(16 * var(--pivcs-ratio));color:var(--pivcs-muted-color, #fff);font-family:FT Terra,sans-serif;font-size:calc(var(--pivcs-body-size, 22) * var(--pivcs-ratio));font-weight:var(--pivcs-body-weight, 400);line-height:1.25;opacity:.6}.purchase-interactive-video-color-switch__title--mobile,.purchase-interactive-video-color-switch__subtitle--mobile{display:none}.purchase-interactive-video-color-switch__triggers{position:absolute;z-index:5;top:0;right:0;bottom:0;left:0;pointer-events:none}.purchase-interactive-video-color-switch__trigger{position:absolute;top:var(--pivcs-trigger-y, 65%);left:var(--pivcs-trigger-x, 58%);display:inline-flex;align-items:center;gap:calc(8 * var(--pivcs-ratio));min-width:0;min-height:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--pivcs-text-color, #fff);font:inherit;font-size:calc(20 * var(--pivcs-ratio));font-weight:500;line-height:1.2;transform:translate(-50%,-50%);cursor:pointer;pointer-events:auto;transition:opacity .25s ease,transform .25s ease}.purchase-interactive-video-color-switch__trigger:hover{background:transparent;transform:translate(-50%,-50%) scale(1.06)}.purchase-interactive-video-color-switch__trigger:focus-visible,.purchase-interactive-video-color-switch__color:focus-visible{outline:2px solid currentColor;outline-offset:4px}.purchase-interactive-video-color-switch__trigger-dot{display:block;flex:0 0 calc(20 * var(--pivcs-ratio));width:calc(20 * var(--pivcs-ratio));height:calc(20 * var(--pivcs-ratio));border-radius:50%;border:max(1px,calc(1 * var(--pivcs-ratio))) solid rgba(255,255,255,.9);background:radial-gradient(circle,rgba(255,255,255,.95) 0 calc(6 * var(--pivcs-ratio)),transparent calc(6.5 * var(--pivcs-ratio)));box-sizing:border-box}.purchase-interactive-video-color-switch__trigger[hidden]{opacity:0;pointer-events:none}.purchase-interactive-video-color-switch__color-nav{position:absolute;z-index:3;bottom:calc(var(--pivcs-nav-bottom, 40) * var(--pivcs-ratio));left:50%;display:flex;align-items:center;justify-content:center;gap:calc(var(--pivcs-nav-gap, 12) * var(--pivcs-ratio));min-height:calc(var(--pivcs-nav-height, 50) * var(--pivcs-ratio));box-sizing:border-box;border:max(1px,calc(1 * var(--pivcs-ratio))) solid rgba(255,255,255,.4);border-radius:999px;background:var(--pivcs-nav-background, rgba(255, 255, 255, .24));transform:translate(-50%);backdrop-filter:blur(calc(4 * var(--pivcs-ratio)));-webkit-backdrop-filter:blur(calc(4 * var(--pivcs-ratio)))}.purchase-interactive-video-color-switch__color{position:relative;display:inline-flex;align-items:center;gap:0;min-width:calc(30.6 * var(--pivcs-ratio));min-height:calc(30.6 * var(--pivcs-ratio));padding:calc(7 * var(--pivcs-ratio));border:0;border-radius:999px;background:transparent;color:var(--pivcs-nav-text-color, #fff);font:inherit;cursor:pointer;transition:min-width .65s ease,padding .65s ease,background-color .65s ease}.purchase-interactive-video-color-switch__color.is-active{padding-right:calc(16 * var(--pivcs-ratio))}.purchase-interactive-video-color-switch__swatch-image,.purchase-interactive-video-color-switch__swatch-fallback{display:block;flex:0 0 calc(30.6 * var(--pivcs-ratio));width:calc(30.6 * var(--pivcs-ratio));height:calc(30.6 * var(--pivcs-ratio));border-radius:50%;object-fit:cover;background:var(--pivcs-swatch-color, #d9d9d9);background-position:center;background-size:cover;background-repeat:no-repeat}.purchase-interactive-video-color-switch__color-name{display:grid;grid-template-columns:0fr;overflow:hidden;padding-left:0;color:inherit;font-family:FT Terra,sans-serif;font-size:calc(20 * var(--pivcs-ratio));font-weight:500;line-height:1.2;opacity:0;transition:grid-template-columns .65s ease,opacity .5s ease,padding-left .65s ease}.purchase-interactive-video-color-switch__color-name-inner{min-width:0;overflow:hidden;white-space:nowrap}.purchase-interactive-video-color-switch__color.is-active .purchase-interactive-video-color-switch__color-name{grid-template-columns:1fr;padding-left:calc(16 * var(--pivcs-ratio));opacity:1}@media(max-width:749px){.purchase-interactive-video-color-switch{--pivcs-ratio: var(--pivcs-design-ratio-mobile, .2666666667vw)}.purchase-interactive-video-color-switch__stage{min-height:calc(var(--pivcs-stage-height-mobile, 620) * var(--pivcs-ratio));background-image:var(--pivcs-background-image-mobile, var(--pivcs-background-image, none))}.purchase-interactive-video-color-switch__copy{top:calc(var(--pivcs-copy-top-mobile, 32) * var(--pivcs-ratio));left:calc(var(--pivcs-copy-left-mobile, 20) * var(--pivcs-ratio));width:calc(100% - (40 * var(--pivcs-ratio)));text-align:var(--pivcs-text-align-mobile, left)}.purchase-interactive-video-color-switch__title--desktop,.purchase-interactive-video-color-switch__subtitle--desktop{display:none}.purchase-interactive-video-color-switch__title--mobile,.purchase-interactive-video-color-switch__subtitle--mobile{display:block}.purchase-interactive-video-color-switch__title{font-size:calc(var(--pivcs-title-size-mobile, 32) * var(--pivcs-ratio));font-weight:var(--pivcs-title-weight-mobile, 500)}.purchase-interactive-video-color-switch__subtitle{margin-top:calc(10 * var(--pivcs-ratio));font-size:calc(var(--pivcs-body-size-mobile, 16) * var(--pivcs-ratio));font-weight:var(--pivcs-body-weight-mobile, 400)}.purchase-interactive-video-color-switch__video--desktop{display:none}.purchase-interactive-video-color-switch__video--desktop.is-active,.purchase-interactive-video-color-switch__video--mobile{display:block}.purchase-interactive-video-color-switch__trigger{top:var(--pivcs-trigger-y-mobile, 74%);left:var(--pivcs-trigger-x-mobile, 50%);gap:calc(6 * var(--pivcs-ratio));font-size:calc(16 * var(--pivcs-ratio))}.purchase-interactive-video-color-switch__trigger-dot{flex-basis:calc(16 * var(--pivcs-ratio));width:calc(16 * var(--pivcs-ratio));height:calc(16 * var(--pivcs-ratio));background-size:100% 100%}.purchase-interactive-video-color-switch__color-nav{right:auto;left:50%;bottom:calc(var(--pivcs-nav-bottom-mobile, 24) * var(--pivcs-ratio));width:max-content;min-height:calc(40 * var(--pivcs-ratio));justify-content:center;gap:calc(var(--pivcs-nav-gap-mobile, 8) * var(--pivcs-ratio));max-width:calc(100% - (32 * var(--pivcs-ratio)));overflow-x:auto;transform:translate(-50%);scrollbar-width:none}.purchase-interactive-video-color-switch__color-nav::-webkit-scrollbar{display:none}.purchase-interactive-video-color-switch__color{flex:0 0 auto;min-width:calc(38 * var(--pivcs-ratio));min-height:calc(38 * var(--pivcs-ratio));padding:calc(6 * var(--pivcs-ratio))}.purchase-interactive-video-color-switch__color.is-active{min-width:0;padding-right:calc(14 * var(--pivcs-ratio))}.purchase-interactive-video-color-switch__color:not(:last-child):after{content:"";position:absolute;top:50%;right:calc(-4 * var(--pivcs-ratio));width:max(1px,calc(1 * var(--pivcs-ratio)));height:calc(20 * var(--pivcs-ratio));background:#fffc;transform:translateY(-50%);pointer-events:none}.purchase-interactive-video-color-switch__swatch-image,.purchase-interactive-video-color-switch__swatch-fallback{flex-basis:calc(26 * var(--pivcs-ratio));width:calc(26 * var(--pivcs-ratio));height:calc(26 * var(--pivcs-ratio))}.purchase-interactive-video-color-switch__color-name{font-size:calc(16 * var(--pivcs-ratio))}.purchase-interactive-video-color-switch__color.is-active .purchase-interactive-video-color-switch__color-name{padding-left:calc(10 * var(--pivcs-ratio))}}@media(prefers-reduced-motion:reduce){.purchase-interactive-video-color-switch__panel,.purchase-interactive-video-color-switch__cover,.purchase-interactive-video-color-switch__video,.purchase-interactive-video-color-switch__trigger,.purchase-interactive-video-color-switch__color,.purchase-interactive-video-color-switch__color-name{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/section-purchase-interactive-video-color-switch.css.map */