.color-fan__header .title{margin:0}.color-fan__header.center{text-align:center}.color-fan__header.right{text-align:right}.color-fan__subheading{margin:.5rem 0 0;color:rgba(var(--color-foreground),.65)}.color-fan__stage{position:relative;display:block;width:min(var(--fan-stage-width, 36rem),78vw);aspect-ratio:1;margin:2rem auto 0}.color-fan__card{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:var(--fan-box-width, 76%);height:var(--fan-box-height, 76%);border-radius:var(--fan-card-radius, var(--card-radius));background-color:var(--fan-color);opacity:var(--fan-opacity);transform:rotate(0) scale(.92);transition:transform var(--duration-long) cubic-bezier(.22,1,.36,1) var(--fan-delay);will-change:transform}.color-fan.is-open .color-fan__card{transform:rotate(var(--fan-angle)) scale(var(--fan-scale-open, 1))}.no-js .color-fan .color-fan__card{transform:rotate(var(--fan-angle))}.color-fan__card>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}.color-fan--spread .color-fan__card{transform:translateY(65%) rotate(0) translateY(-65%) scale(.92)}.color-fan--spread.is-open .color-fan__card{transform:translateY(65%) rotate(calc(var(--fan-angle) * var(--fan-spread-scale, 1))) translateY(-65%) scale(var(--fan-scale-open, 1))}.no-js .color-fan--spread .color-fan__card{transform:translateY(65%) rotate(calc(var(--fan-angle) * var(--fan-spread-scale, 1))) translateY(-65%)}@media screen and (max-width:749px){.color-fan--spread{--fan-spread-scale: .6}}.color-fan__media{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:var(--fan-box-width, 76%);height:var(--fan-box-height, 76%);z-index:1}.color-fan__media img,.color-fan__media svg{width:100%;height:100%;object-fit:cover;border-radius:var(--fan-image-radius, 0)}@property --fan-ring-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@keyframes fan-ring-spin{to{--fan-ring-angle: 360deg}}.color-fan{position:relative;display:block}.color-fan--ring .color-fan__card:before,.color-fan--ring .color-fan__card:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;z-index:1;border-radius:calc(var(--fan-card-radius, var(--card-radius)) + 3px);padding:5px;background:conic-gradient(from var(--fan-ring-angle),transparent 0deg,var(--fan-ring, var(--fan-color)) 120deg,var(--fan-ring, var(--fan-color)) 200deg,transparent 320deg);background:conic-gradient(from var(--fan-ring-angle),transparent 0deg,color-mix(in srgb,var(--fan-ring, var(--fan-color)) 45%,transparent) 70deg,var(--fan-ring, var(--fan-color)) 150deg,color-mix(in srgb,var(--fan-ring, var(--fan-color)) 45%,transparent) 240deg,transparent 310deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;filter:blur(6px);opacity:0;transition:opacity var(--duration-default) ease;pointer-events:none}.color-fan--ring .color-fan__card:after{top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:calc(var(--fan-card-radius, var(--card-radius)) + 6px);padding:9px;filter:blur(18px)}.color-fan--ring-custom .color-fan__card{--fan-ring: var(--fan-ring-color)}.color-fan--ring-halo .color-fan__card:before,.color-fan--ring-halo .color-fan__card:after{background:conic-gradient(from var(--fan-ring-angle),#0a84ff,#bf5af2,#ff375f,#ff9f0a,#ff375f,#bf5af2,#0a84ff);background:conic-gradient(from var(--fan-ring-angle) in oklch,#0a84ff,#bf5af2,#ff375f,#ff9f0a,#ff375f,#bf5af2,#0a84ff)}.color-fan--ring.is-open .color-fan__card:hover:before{opacity:.85;animation:fan-ring-spin 2.4s linear infinite}.color-fan--ring.is-open .color-fan__card:hover:after{opacity:.5;animation:fan-ring-spin 2.4s linear infinite}.color-fan__tooltip{position:absolute;z-index:2;translate:-50% -130%;padding:.4rem 1.2rem;background-color:rgb(var(--color-foreground));color:rgb(var(--color-background));border-radius:min(var(--fan-card-radius, var(--card-radius)),1.4rem);font-size:1.2rem;letter-spacing:.04em;white-space:nowrap;pointer-events:none}@media(prefers-reduced-motion:reduce){.color-fan__card{transition:none}.color-fan--ring.is-open .color-fan__card:hover:before,.color-fan--ring.is-open .color-fan__card:hover:after{animation:none}}.color-fan__card{color:#fff;text-decoration:none;cursor:pointer;overflow:hidden}.color-fan__card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:linear-gradient(180deg,#07231d14,#07231d9e);pointer-events:none}.color-fan__card-label{position:absolute;top:1rem;left:1rem;right:1rem;z-index:3;padding:.55rem .8rem;border-radius:999px;background:#07231db8;color:#fff;font-size:1.15rem;font-weight:600;line-height:1.2;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@media screen and (max-width:749px){.color-fan__stage{width:min(88vw,38rem)}.color-fan__card-label{top:.7rem;left:.7rem;right:.7rem;padding:.45rem .65rem;font-size:1rem}}@media screen and (max-width:749px){.color-fan--spread{--fan-spread-scale: 1.18}.color-fan__stage{width:min(96vw,42rem);margin-top:2.8rem}.color-fan__media{width:48%;height:60%}.color-fan.is-open .color-fan__card{z-index:2}.color-fan.is-open .color-fan__media{z-index:3}}@media screen and (max-width:749px){.color-fan--spread{--fan-spread-scale: .6}.color-fan__stage{width:min(var(--fan-stage-width, 36rem),78vw);margin:2rem auto 0}.color-fan__media,.color-fan.is-open .color-fan__media{width:var(--fan-box-width, 76%);height:var(--fan-box-height, 76%);z-index:1}.color-fan.is-open .color-fan__card{z-index:auto}}.color-fan__media{transition:opacity var(--duration-default) ease,transform var(--duration-default) ease}.color-fan.has-selection .color-fan__media{opacity:0;transform:scale(.94);pointer-events:none}.color-fan--spread.is-open .color-fan__card.is-active,.color-fan.is-open .color-fan__card.is-active{transform:rotate(0) scale(1.03);z-index:5;opacity:1}.color-fan--spread.is-open .color-fan__card.is-active{transform:translateY(0) rotate(0) translateY(0) scale(1.03)}.color-fan__card-label{top:auto;bottom:1rem;background:transparent;border-radius:0;padding:.5rem;font-size:1.25rem;text-shadow:0 2px 14px rgba(0,0,0,.75);-webkit-backdrop-filter:none;backdrop-filter:none;opacity:0;transform:translateY(.5rem);transition:opacity var(--duration-default) ease,transform var(--duration-default) ease}.color-fan__card.is-active .color-fan__card-label{opacity:1;transform:translateY(0)}.color-fan__choices{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin:1.5rem auto 0;max-width:64rem}.color-fan__choice{display:inline-flex;align-items:center;gap:.55rem;min-height:4rem;padding:.8rem 1.1rem;border:1px solid rgba(var(--color-foreground),.18);border-radius:999px;background:rgb(var(--color-background));color:rgb(var(--color-foreground));font:inherit;line-height:1.1;cursor:pointer;transition:border-color var(--duration-default) ease,background-color var(--duration-default) ease,transform var(--duration-default) ease}.color-fan__choice:hover,.color-fan__choice.is-active{border-color:#f2a7b5;background:#f2a7b529;transform:translateY(-1px)}.color-fan__choice-dot{width:.85rem;height:.85rem;flex:0 0 auto;border-radius:50%;background:var(--choice-color);box-shadow:0 0 0 1px rgba(var(--color-foreground),.12)}@media screen and (max-width:749px){.color-fan__choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(92vw,38rem);gap:.7rem;margin-top:1.2rem}.color-fan__choice{justify-content:center;min-height:4.4rem;padding:.75rem .65rem;font-size:1.1rem;text-align:center}.color-fan__card-label{bottom:.8rem;font-size:1.15rem}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/section-color-fan.css.map */