/* Montoya Color Picker — scoped styles (all classes prefixed with .mcp-) */
.mcp-wrap {
    --mcp-red: #DC1E2E;
    --mcp-text: #1c1c1c;
    --mcp-muted: #6b6b6b;
    --mcp-border: #e5e5e5;
    --mcp-cols: 7;

    font-family: inherit;
    color: var(--mcp-text);
    padding: 24px 0;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
.mcp-wrap *,
.mcp-wrap *::before,
.mcp-wrap *::after { box-sizing: border-box; }

.mcp-header { text-align: center; margin-bottom: 44px; }
.mcp-title  { font-size: 44px; font-weight: 800; margin: 0 0 6px; line-height: 1.1; letter-spacing: -.01em; }
.mcp-sub    { font-size: 15px; color: var(--mcp-muted); margin: 0; }

/* Body layout: [families] [arrow] [swatches] [info] */
.mcp-body {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 30px minmax(260px, 1fr) minmax(220px, 1fr);
    gap: 26px;
    align-items: start;
    padding: 0 16px;
}

.mcp-col-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--mcp-text);
    line-height: 1.1;
}

/* Family selector (circles) */
.mcp-family-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px 12px;
    justify-items: center;
}
.mcp-family-swatch {
    all: unset;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
    transition: transform .15s ease;
    display: block;
}
.mcp-family-swatch:hover { transform: translateY(-2px); }
.mcp-family-swatch:focus-visible { outline: 2px solid var(--mcp-red); outline-offset: 4px; }
.mcp-family-swatch.is-active {
    outline: 2px solid #111;
    outline-offset: 4px;
}
.mcp-family-swatch.is-active::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 22px; height: 22px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
        center / 14px 14px no-repeat;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    pointer-events: none;
}
.mcp-family-swatch.is-active::before {
    content: attr(data-name);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 14px;
    white-space: nowrap;
    pointer-events: none;
}

/* Arrow separator */
.mcp-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
}

/* Color grid (squares) */
.mcp-color-grid {
    display: grid;
    grid-template-columns: repeat(var(--mcp-cols), 1fr);
    gap: 3px;
    padding: 6px;
    border: 1px solid var(--mcp-border);
    background: #fff;
    border-radius: 2px;
}
.mcp-color-cell {
    all: unset;
    aspect-ratio: 1;
    cursor: pointer;
    transition: transform .12s ease;
    display: block;
}
.mcp-color-cell:hover { transform: scale(1.1); z-index: 2; position: relative; }
.mcp-color-cell:focus-visible { outline: 2px solid #111; outline-offset: 1px; z-index: 3; position: relative; }
.mcp-color-cell.is-active { outline: 2px solid #111; outline-offset: -2px; z-index: 3; position: relative; }

/* Info panel */
.mcp-info { padding-top: 6px; }
.mcp-fam-name {
    font-size: 14px;
    color: var(--mcp-muted);
    margin-bottom: 6px;
}
.mcp-color-name {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 18px;
}
.mcp-swatch-lg {
    height: 130px;
    border-radius: 4px;
    position: relative;
    padding: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    color: #111;
}
.mcp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 12px 26px;
    background: #111;
    color: #fff !important;
    border-radius: 999px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    transition: transform .15s, box-shadow .2s;
}
.mcp-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
    color: #fff !important;
}

@media (max-width: 960px) {
    .mcp-body {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
    .mcp-arrow { display: none; }
    .mcp-info { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .mcp-body { grid-template-columns: 1fr; }
    .mcp-family-grid { grid-template-columns: repeat(5, 1fr); }
    .mcp-family-swatch { width: 48px; height: 48px; }
    .mcp-color-name { font-size: 28px; }
}