.scc-family{--cp-accent:#7b2140;--cp-paper:#f4eee7;color:inherit;font:inherit;margin:0}
.scc-family__heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px;line-height:1.5}
.scc-family__heading strong{font-weight:600}.scc-family__count{font-size:11px;opacity:.7;white-space:nowrap}
.scc-family__list{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none;max-width:330px}
.scc-family__item{position:relative;display:block}
.scc-family__link{position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid #c7bbb1;border-radius:7px;padding:3px;color:inherit;text-decoration:none;background:transparent;cursor:pointer;box-sizing:border-box}
.scc-family__link[aria-current="page"]{border:2px solid var(--cp-accent);padding:2px}
.scc-family__link:focus-visible{outline:2px solid var(--cp-accent);outline-offset:3px}
.scc-family__visual{display:block;width:100%;height:100%;border-radius:3px;background-color:var(--cp-colour);background-image:var(--cp-image);background-size:var(--cp-zoom,550%);background-position:var(--cp-pos,60% 72%);background-repeat:no-repeat}
.scc-family__link[aria-current="page"]:after{content:'✓';position:absolute;right:-4px;top:-5px;background:var(--cp-accent);color:var(--cp-paper);border-radius:50%;width:15px;height:15px;line-height:15px;text-align:center;font:10px/15px Arial,sans-serif}
.scc-family__name{position:absolute;z-index:4;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:5px 8px;background:#2e2825;color:#f4eee7;white-space:nowrap;font-size:11px;line-height:1.35;pointer-events:none;opacity:0;border-radius:3px}
.scc-family__link:hover .scc-family__name,.scc-family__link:focus-visible .scc-family__name{opacity:1}

.scc-family{display:block;margin-bottom:24px}
.scc-family [hidden],variant-selects [data-family-hidden-option]{display:none!important}
.scc-family__link[data-unavailable="true"]{opacity:.5}
.scc-family__link[data-unavailable="true"] .scc-family__visual{background-image:linear-gradient(to top right,transparent 48%,#7b2140 49%,#7b2140 51%,transparent 52%),var(--cp-image)}
.scc-family__notice{margin:9px 0 0;font-size:12px;color:var(--cp-accent)}
.scc-family__name{white-space:normal;text-align:center;width:max-content;max-width:150px}
@media(hover:none){.scc-family__name{display:none}}

.scc-family__link[data-unavailable="true"] .scc-family__visual{filter:grayscale(1)}