/* Color families keep all shade choices local to this component. */
.color-families{display:grid;grid-template-columns:minmax(0,1fr);gap:11px;width:100%;margin:0}
.color-family{min-width:0;border:1px solid var(--line,#eadfe6);border-radius:18px;background:#fff;overflow:hidden}
.color-family[open]{border-color:#d8b4c7;background:#fffafd}
.color-family__summary{display:flex;align-items:center;gap:10px;min-height:65px;padding:12px 15px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.color-family__summary::-webkit-details-marker{display:none}
.color-family__summary::marker{content:''}
.color-family__summary:hover{background:#fcf6fa}
.color-family__summary:focus-visible{outline:3px solid #b75388;outline-offset:-4px;border-radius:17px}
.color-family__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;flex:1;min-width:0;text-align:start}
.color-family__label{color:var(--ink,#412d3d);font-size:15px;font-weight:700;line-height:1.5}
.color-family__count{color:var(--rose,#9a4268);font-size:11px;font-weight:700;line-height:1.3}
.color-family__preview{display:flex;align-items:center;gap:0;flex:none;direction:rtl;padding-inline-start:3px}
.color-family__preview>i{display:block;flex:none;width:18px;height:18px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #412d3d12}
.color-family__preview>i+i{margin-inline-start:-3px}
.color-family__arrow{display:block;flex:none;color:var(--rose,#9a4268);font-family:Arial,sans-serif;font-size:21px;line-height:1;width:16px;text-align:center;transition:transform 150ms ease}
.color-family[open] .color-family__arrow{transform:rotate(180deg)}
.color-family__shades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 12px 13px}
.color-shade{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;min-height:112px;padding:6px;border:1px solid #e9dfe5;border-radius:12px;background:#fff;color:var(--ink,#412d3d);font:inherit;text-align:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color 120ms ease,box-shadow 120ms ease}
.color-shade:hover{border-color:#bd809d;background:#fffafd}
.color-shade.is-selected{border-color:var(--rose,#9a4268);box-shadow:inset 0 0 0 1px var(--rose,#9a4268);background:#fcf1f7}
.color-shade:focus-visible{outline:3px solid #b75388;outline-offset:3px;z-index:1}
.color-shade__swatch{display:block;flex:none;width:100%;height:55px;border-radius:7px;box-shadow:inset 0 0 0 1px #412d3d10}
.color-shade__label{display:block;margin:auto 0;min-height:31px;font-size:11px;font-weight:700;line-height:1.5;overflow-wrap:normal}
.color-shade__check{display:none;position:absolute;left:9px;top:9px;width:19px;height:19px;border:1px solid #fff;border-radius:50%;background:var(--rose,#9a4268);color:#fff;font-family:Arial,sans-serif;font-size:12px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 1px 5px #412d3d24}
.color-shade.is-selected .color-shade__check{display:block}
@media(max-width:360px){.color-family__summary{padding:11px 12px;gap:8px}.color-family__label{font-size:14px}.color-family__shades{padding:0 9px 11px;gap:6px}.color-shade{padding:5px;gap:6px;min-height:109px}.color-shade__label{font-size:10px}.color-family__preview>i{width:16px;height:16px}.color-shade__swatch{height:51px}}
@media(prefers-reduced-motion:reduce){.color-family__arrow,.color-shade{transition:none}}