.color-family{--cf-cols: 8;--cf-gap: .8rem;display:block;margin:1.2rem 0;padding:1.6rem 1.4rem;background:rgb(var(--color-background, 255 255 255));border-radius:1.6rem;box-shadow:0 .8rem 1.2rem #959da533}.color-family__row+.color-family__row{margin-top:2rem}.color-family__header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1.2rem}.color-family__heading{margin:0;font-size:clamp(1.3rem,1.05rem + .8vw,1.5rem);font-weight:600;line-height:1.6;color:#1d1d1d}.color-family__value{font-weight:500;color:#666;margin-inline-start:.4rem}.color-family__arrows{display:flex;gap:.4rem;flex-shrink:0}.color-family__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:3.2rem;height:3.2rem;padding:0;border:.1rem solid #e5e5e5;border-radius:50%;background:transparent;color:rgb(var(--color-foreground));cursor:pointer;transition:opacity .15s ease,border-color .15s ease}.color-family__arrow svg{width:1.2rem;height:1.2rem}.color-family__arrow[data-family-prev] svg{transform:rotate(90deg)}.color-family__arrow[data-family-next] svg{transform:rotate(-90deg)}.color-family__arrow[aria-disabled=true]{opacity:.35;cursor:default;pointer-events:none}.color-family__grid{--cf-rows: 2;display:grid;grid-template-columns:repeat(var(--cf-cols),minmax(0,1fr));gap:var(--cf-gap)}.color-family__grid:has(.color-family__swatch:nth-child(9)){grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(var(--cf-rows),auto);grid-auto-columns:calc((100% - (var(--cf-cols) - 1) * var(--cf-gap)) / var(--cf-cols));overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.color-family__grid::-webkit-scrollbar{display:none}.color-family__colours{display:grid;grid-template-columns:repeat(var(--cf-cols),minmax(0,1fr));gap:var(--cf-gap)}.color-family__colours[hidden]{display:none}.color-family__swatch,.color-family__colour{position:relative;display:block;box-sizing:border-box;width:100%;aspect-ratio:1 / 1;min-height:0;padding:0;border:.1rem solid rgba(var(--color-foreground),.18);border-radius:50%;background:rgba(var(--color-foreground),.06) center / cover no-repeat;scroll-snap-align:start;cursor:pointer;transition:border-color .12s ease,transform .12s ease}.color-family__swatch[style*=--swatch--background],.color-family__colour[style*=--swatch--background]{background:var(--swatch--background) center / cover no-repeat}.color-family__swatch--blank{background:rgba(var(--color-foreground),.08)}.color-family__swatch:hover,.color-family__colour:hover{transform:scale(1.04)}.color-family__swatch:active,.color-family__colour:active{transform:scale(.92)}.color-family__swatch.is-selected,.color-family__colour.is-current{border:1px solid #e30045;animation:cf-pop .32s cubic-bezier(.34,1.56,.64,1)}.color-family__swatch:focus-visible,.color-family__colour:focus-visible{border-color:#e30045}@keyframes cf-pop{0%{transform:scale(.8)}55%{transform:scale(1.14)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.color-family__swatch,.color-family__colour{transition:none;animation:none}}.color-family__colour--static{cursor:default}@media screen and (max-width:989px){.color-family{--cf-cols: 6}.color-family__grid{--cf-rows: 3}.color-family__grid:has(.color-family__swatch:nth-child(7)){grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(var(--cf-rows),auto);grid-auto-columns:calc((100% - (var(--cf-cols) - 1) * var(--cf-gap)) / var(--cf-cols));overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}}
/*# sourceMappingURL=/cdn/shop/t/38/assets/component-color-family.css.map */