/* ── Section cards ────────────────────────────────────────────── */
    .form-section { margin-bottom: 1.75rem; }
    .form-section .section-title {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #6c757d;
        border-bottom: 1px solid #e9ecef;
        padding-bottom: .5rem;
        margin-bottom: 1.25rem;
    }

    /* ── Read-only field ──────────────────────────────────────────── */
    .detail-field {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: .375rem;
        padding: .45rem .75rem;
        min-height: 38px;
        font-size: .9rem;
        color: #212529;
        word-break: break-word;
    }
    .detail-field.empty {
        color: #adb5bd;
        font-style: italic;
    }
    .detail-field.textarea {
        min-height: 72px;
        white-space: pre-wrap;
    }

    /* ── Badge toggles ────────────────────────────────────────────── */
    .flag-badge {
        font-size: .72rem;
        font-weight: 600;
        padding: 4px 12px;
        border-radius: 999px;
    }

    /* ── Color swatch pill ────────────────────────────────────────── */
    .color-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: .78rem;
        font-weight: 600;
        padding: 3px 12px;
        border-radius: 999px;
        border: 1.5px solid;
    }
    .color-pill.primary    { background:#e7f0fd; color:#0d6efd; border-color:#0d6efd; }
    .color-pill.secondary  { background:#fff3cd; color:#856404; border-color:#ffc107; }
    .color-pill.tertiary   { background:#d1e7dd; color:#0f5132; border-color:#198754; }
    .color-pill.quaternary { background:#f8d7da; color:#842029; border-color:#dc3545; }
    .color-pill.quinary    { background:#e2d9f3; color:#432874; border-color:#6f42c1; }
    .color-pill-swatch {
        width: 10px; height: 10px;
        border-radius: 50%;
        border: 1px solid rgba(0,0,0,.2);
        flex-shrink: 0;
    }

    /* ── Tab nav ──────────────────────────────────────────────────── */
    .nav-tabs .nav-link { color: #495057; }
    .nav-tabs .nav-link.active { font-weight: 600; }

    /* ── Variant table ────────────────────────────────────────────── */
    .variant-table th {
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #6c757d;
        background: #f8f9fa;
    }

    /* ── Product image ────────────────────────────────────────────── */
    #product-main-image {
        max-height: 220px;
        object-fit: contain;
        border-radius: .5rem;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        width: 100%;
        padding: .5rem;
    }
    .no-image-placeholder {
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        border: 1px dashed #ced4da;
        border-radius: .5rem;
        color: #adb5bd;
        font-size: .85rem;
    }

    /* ── SKU chip ─────────────────────────────────────────────────── */
    .sku-chip {
        font-family: monospace;
        font-size: 1.1rem;
        font-weight: 700;
        background: #e7f0fd;
        color: #0d6efd;
        padding: 4px 14px;
        border-radius: 6px;
        letter-spacing: .05em;
    }

       /* ── Section cards ────────────────────────────────────────────── */
    .form-section { margin-bottom: 1.75rem; }
    .form-section .section-title {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #6c757d;
        border-bottom: 1px solid #e9ecef;
        padding-bottom: .5rem;
        margin-bottom: 1.25rem;
    }

    /* ── Select2 skin to match Bootstrap ─────────────────────────── */
    .select2-container--default .select2-selection--multiple {
        border: 1px solid #ced4da;
        border-radius: .375rem;
        min-height: 38px;
        padding: 2px 6px;
    }
    .select2-container--default.select2-container--focus
        .select2-selection--multiple {
        border-color: #86b7fe;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
        outline: 0;
    }
    .select2-container--default .select2-selection--multiple
        .select2-selection__choice {
        background-color: #0d6efd;
        border: none;
        border-radius: .25rem;
        color: #fff;
        padding: 2px 10px;
        margin-top: 4px;
    }
    .select2-container--default .select2-selection--multiple
        .select2-selection__choice__remove {
        color: rgba(255,255,255,.8);
        margin-right: 5px;
        border-right: none;
        background: transparent;
    }
    .select2-container--default .select2-selection--multiple
        .select2-selection__choice__remove:hover { color: #fff; }
    .select2-container { width: 100% !important; }

    /* ── Color swatch in dropdown ─────────────────────────────────── */
    .color-option {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .color-swatch {
        width: 14px; height: 14px;
        border-radius: 50%;
        border: 1px solid rgba(0,0,0,.2);
        flex-shrink: 0;
        display: inline-block;
    }

    /* ── Color-type legend pills ──────────────────────────────────── */
    #color-type-legend {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin-top: .75rem;
        min-height: 28px;
    }
    .type-pill {
        font-size: .72rem;
        font-weight: 600;
        padding: 3px 12px;
        border-radius: 999px;
        border: 1.5px solid;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .type-pill.primary    { background:#e7f0fd; color:#0d6efd; border-color:#0d6efd; }
    .type-pill.secondary  { background:#fff3cd; color:#856404; border-color:#ffc107; }
    .type-pill.tertiary   { background:#d1e7dd; color:#0f5132; border-color:#198754; }
    .type-pill.quaternary { background:#f8d7da; color:#842029; border-color:#dc3545; }
    .type-pill.quinary    { background:#e2d9f3; color:#432874; border-color:#6f42c1; }
    .type-pill-swatch {
        width: 10px; height: 10px;
        border-radius: 50%;
        border: 1px solid rgba(0,0,0,.2);
    }

    /* ── Tab nav ──────────────────────────────────────────────────── */
    .nav-tabs .nav-link { color: #495057; }
    .nav-tabs .nav-link.active { font-weight: 600; }

    /* ── Pricing tier rows ────────────────────────────────────────── */
    .pricing-tier-row .input-group-text {
        min-width: 36px;
        justify-content: center;
    }

    /* ── Section cards ────────────────────────────────────────────── */
    .form-section { margin-bottom: 1.75rem; }
    .form-section .section-title {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #6c757d;
        border-bottom: 1px solid #e9ecef;
        padding-bottom: .5rem;
        margin-bottom: 1.25rem;
    }

    /* ── Select2 skin to match Bootstrap ─────────────────────────── */
    .select2-container--default .select2-selection--multiple {
        border: 1px solid #ced4da;
        border-radius: .375rem;
        min-height: 38px;
        padding: 2px 6px;
    }
    .select2-container--default.select2-container--focus
        .select2-selection--multiple {
        border-color: #86b7fe;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
        outline: 0;
    }
    .select2-container--default .select2-selection--multiple
        .select2-selection__choice {
        background-color: #0d6efd;
        border: none;
        border-radius: .25rem;
        color: #fff;
        padding: 2px 10px;
        margin-top: 4px;
    }
    .select2-container--default .select2-selection--multiple
        .select2-selection__choice__remove {
        color: rgba(255,255,255,.8);
        margin-right: 5px;
        border-right: none;
        background: transparent;
    }
    .select2-container--default .select2-selection--multiple
        .select2-selection__choice__remove:hover { color: #fff; }
    .select2-container { width: 100% !important; }

    /* ── Color swatch in dropdown ─────────────────────────────────── */
    .color-option {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .color-swatch {
        width: 14px; height: 14px;
        border-radius: 50%;
        border: 1px solid rgba(0,0,0,.2);
        flex-shrink: 0;
        display: inline-block;
    }

    /* ── Color-type legend pills ──────────────────────────────────── */
    #color-type-legend {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin-top: .75rem;
        min-height: 28px;
    }
    .type-pill {
        font-size: .72rem;
        font-weight: 600;
        padding: 3px 12px;
        border-radius: 999px;
        border: 1.5px solid;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .type-pill.primary    { background:#e7f0fd; color:#0d6efd; border-color:#0d6efd; }
    .type-pill.secondary  { background:#fff3cd; color:#856404; border-color:#ffc107; }
    .type-pill.tertiary   { background:#d1e7dd; color:#0f5132; border-color:#198754; }
    .type-pill.quaternary { background:#f8d7da; color:#842029; border-color:#dc3545; }
    .type-pill.quinary    { background:#e2d9f3; color:#432874; border-color:#6f42c1; }
    .type-pill-swatch {
        width: 10px; height: 10px;
        border-radius: 50%;
        border: 1px solid rgba(0,0,0,.2);
    }

    /* ── Tab nav ──────────────────────────────────────────────────── */
    .nav-tabs .nav-link { color: #495057; }
    .nav-tabs .nav-link.active { font-weight: 600; }

    /* ── SKU chip (read-only) ─────────────────────────────────────── */
    .sku-chip {
        font-family: monospace;
        font-size: 1rem;
        font-weight: 700;
        background: #e7f0fd;
        color: #0d6efd;
        padding: 3px 12px;
        border-radius: 6px;
        letter-spacing: .05em;
    }

    /* ── Current image thumbnail ──────────────────────────────────── */
    #current-image-wrap img {
        max-height: 120px;
        object-fit: contain;
        border: 1px solid #e9ecef;
        border-radius: .375rem;
        background: #f8f9fa;
        padding: .25rem;
    }

      /* ── Pricing tier rows ────────────────────────────────────────── */
    .pricing-tier-row .input-group-text {
        min-width: 36px;
        justify-content: center;
    }