/**
 * Storelly Product Builder — Edit Pricing Option (v2)
 *
 * Modern card-based shell for views/options/edit-option.php.
 * Reuses design tokens from _tokens.css. Layers on top of the
 * legacy admin-options.css — does not replace it. Keeps Angular
 * directives (ng-model, ng-repeat, ng-click) intact; only the
 * outer chrome and field-card visuals are re-skinned.
 *
 * Scope: every rule prefixed with .spbwc-edit-v2 so it cannot
 * affect other admin screens that still consume admin-options.css.
 */

.spbwc-edit-v2 {
    font-family: var(--st-font-sans);
    color: var(--nbd-st-text);
    font-size: var(--text-md);
    line-height: 1.5;
}

/* Hide WP "wrap" default margin chaos inside our shell */
.spbwc-edit-v2 .wrap { margin: 0; padding: 0; }

/* Replace the browser's dashed focus ring on every clickable element inside
   the editor with a consistent brand-soft focus ring. Solid, professional. */
.spbwc-edit-v2 a:focus,
.spbwc-edit-v2 button:focus,
.spbwc-edit-v2 a:focus-visible,
.spbwc-edit-v2 button:focus-visible {
    outline: none;
}
.spbwc-edit-v2 a:focus-visible,
.spbwc-edit-v2 button:focus-visible {
    box-shadow: 0 0 0 2px var(--st-brand-soft);
}

/* ============================================================
   Breadcrumb back-bar
   ============================================================ */
.spbwc-edit-v2 .v2-backbar {
    display: flex; align-items: center; gap: var(--nbd-space-2);
    font-size: var(--text-base); color: var(--nbd-st-text-soft);
    margin-bottom: var(--nbd-space-3);
}
.spbwc-edit-v2 .v2-backbar a {
    color: var(--st-brand); text-decoration: none;
    display: inline-flex; align-items: center; gap: var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-backbar a:hover { text-decoration: underline; }
.spbwc-edit-v2 .v2-backbar .dashicons {
    font-size: var(--text-lg); width: var(--st-icon-md); height: var(--st-icon-md);
}
.spbwc-edit-v2 .v2-backbar__sep { color: var(--nbd-st-text-mute); }
.spbwc-edit-v2 .v2-backbar__current { color: var(--nbd-st-text); font-weight: var(--font-medium); }

/* ============================================================
   Tab strip (Builder / Apply / Output / Import-Export)
   ============================================================ */
.spbwc-edit-v2 .v2-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--nbd-st-border-light);
    margin: 0 0 var(--nbd-space-5);
}
.spbwc-edit-v2 .v2-tab {
    padding: var(--nbd-space-3) var(--nbd-space-4);
    font-size: var(--text-md); font-weight: var(--font-medium);
    color: var(--nbd-st-text-soft); cursor: pointer;
    border: none; background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: var(--nbd-space-1);
    font-family: inherit;
}
.spbwc-edit-v2 .v2-tab:hover { color: var(--nbd-st-text); }
.spbwc-edit-v2 .v2-tab.is-active {
    color: var(--st-brand);
    border-bottom-color: var(--st-brand);
    font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .v2-tab__count {
    font-size: var(--text-xs);
    padding: 2px var(--nbd-space-2);
    border-radius: var(--nbd-radius-pill);
    background: var(--nbd-st-bg-soft); color: var(--nbd-st-text-soft);
}
.spbwc-edit-v2 .v2-tab.is-active .v2-tab__count {
    background: var(--st-brand-soft); color: var(--st-brand-pressed);
}

.spbwc-edit-v2 .v2-tab-panel { display: none; }
.spbwc-edit-v2 .v2-tab-panel.is-active { display: block; }

/* ============================================================
   Card primitive (reused inside panels)
   ============================================================ */
.spbwc-edit-v2 .v2-card {
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--nbd-space-4);
}
.spbwc-edit-v2 .v2-card__head {
    display: flex; align-items: center; gap: var(--nbd-space-3);
    padding: var(--nbd-space-3) var(--nbd-space-4);
    border-bottom: 1px solid var(--nbd-st-border-subtle);
}
.spbwc-edit-v2 .v2-card__head--brand {
    background: var(--st-brand-tint);
    border-radius: var(--nbd-radius-lg) var(--nbd-radius-lg) 0 0;
}
.spbwc-edit-v2 .v2-card__title {
    font-size: var(--text-lg); font-weight: var(--font-semibold); margin: 0;
    display: flex; align-items: center; gap: var(--nbd-space-2);
}
.spbwc-edit-v2 .v2-card__title-icon {
    width: 24px; height: 24px; border-radius: var(--nbd-radius-sm);
    background: var(--st-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--text-base); font-weight: var(--font-bold);
}
.spbwc-edit-v2 .v2-card__sub {
    font-size: var(--text-base); color: var(--nbd-st-text-soft);
    margin-left: auto;
}
.spbwc-edit-v2 .v2-card__body { padding: var(--nbd-space-4); }
.spbwc-edit-v2 .v2-card__body--tight { padding: var(--nbd-space-3); }
.spbwc-edit-v2 .v2-card__body--flush { padding: 0; }

/* ============================================================
   Form pieces
   ============================================================ */
.spbwc-edit-v2 .v2-form-row {
    display: flex; flex-direction: column;
    gap: var(--nbd-space-1); margin-bottom: var(--nbd-space-3);
}
.spbwc-edit-v2 .v2-form-row__label {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
}
.spbwc-edit-v2 .v2-form-row__help {
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    margin: -2px 0 var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-input,
.spbwc-edit-v2 .v2-select,
.spbwc-edit-v2 .v2-textarea {
    width: 100%;
    padding: var(--st-field-pad);
    border: 1px solid var(--st-field-border);
    border-radius: var(--st-field-radius);
    background: var(--st-field-bg);
    font-size: var(--st-field-font);
    color: var(--nbd-st-text);
    font-family: inherit;
    box-shadow: var(--st-field-shadow);
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-input:focus,
.spbwc-edit-v2 .v2-select:focus,
.spbwc-edit-v2 .v2-textarea:focus {
    outline: none;
    border-color: var(--st-brand);
    box-shadow: var(--st-field-focus-shadow);
}
.spbwc-edit-v2 .v2-textarea { min-height: 72px; resize: vertical; }

/* Native <select> styled as an unambiguous dropdown (custom chevron). */
.spbwc-edit-v2 .v2-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    background-color: var(--st-field-bg);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238c8f94' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    cursor: pointer;
}

.spbwc-edit-v2 .v2-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--nbd-space-3);
}
@media (max-width: 760px) {
    .spbwc-edit-v2 .v2-meta-grid { grid-template-columns: 1fr; }
}
.spbwc-edit-v2 .v2-meta-item { display: flex; flex-direction: column; gap: 2px; }
.spbwc-edit-v2 .v2-meta-item__label {
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .v2-meta-item__value {
    font-size: var(--text-md); font-weight: var(--font-semibold);
}

/* ============================================================
   Status pills
   ============================================================ */
.spbwc-edit-v2 .v2-pill {
    display: inline-flex; align-items: center; gap: var(--nbd-space-1);
    padding: 3px var(--nbd-space-2);
    border-radius: var(--nbd-radius-pill);
    font-size: var(--text-sm); font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .v2-pill--active   { background: var(--st-pill-active-bg);   color: var(--st-pill-active-text); }
.spbwc-edit-v2 .v2-pill--pending  { background: var(--st-pill-pending-bg);  color: var(--st-pill-pending-text); }
.spbwc-edit-v2 .v2-pill--warning  { background: var(--st-pill-warning-bg);  color: var(--st-pill-warning-text); }
.spbwc-edit-v2 .v2-pill--danger   { background: var(--st-pill-danger-bg);   color: var(--st-pill-danger-text); }
.spbwc-edit-v2 .v2-pill--draft    { background: var(--st-pill-draft-bg);    color: var(--st-pill-draft-text); }
.spbwc-edit-v2 .v2-pill--featured { background: var(--st-pill-featured-bg); color: var(--st-pill-featured-text); }
.spbwc-edit-v2 .v2-pill__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}

/* ============================================================
   Field type palette (chips strip)
   ============================================================ */
.spbwc-edit-v2 .v2-palette {
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-lg);
    padding: var(--nbd-space-4) var(--nbd-space-4) var(--nbd-space-3);
    margin-bottom: var(--nbd-space-4);
    box-shadow: var(--shadow-card);
}
.spbwc-edit-v2 .v2-palette__head { margin-bottom: var(--nbd-space-3); }
.spbwc-edit-v2 .v2-palette__title {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--nbd-st-text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-palette__sub {
    font-size: var(--text-base);
    color: var(--nbd-st-text-soft);
    margin: 0;
}
.spbwc-edit-v2 .v2-palette__grid {
    display: flex; gap: var(--nbd-space-2); flex-wrap: wrap;
}
.spbwc-edit-v2 .v2-chip {
    display: inline-flex; align-items: center; gap: var(--nbd-space-2);
    padding: var(--nbd-space-2) var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    font-size: var(--text-md);
    font-weight: var(--font-medium);
    color: var(--nbd-st-text);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
    text-decoration: none;
    text-align: left;
    min-height: 48px;
}
.spbwc-edit-v2 .v2-chip:hover,
.spbwc-edit-v2 .v2-chip.is-hovered {
    background: var(--st-brand-tint);
    border-color: var(--st-brand);
    color: var(--st-brand-pressed);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}
.spbwc-edit-v2 .v2-chip__label {
    display: flex; flex-direction: column;
    line-height: 1.2;
}
.spbwc-edit-v2 .v2-chip__label strong {
    font-weight: var(--font-semibold);
    font-size: var(--text-md);
    color: inherit;
}
.spbwc-edit-v2 .v2-chip__label small {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
    font-weight: var(--font-normal);
    margin-top: 1px;
}
.spbwc-edit-v2 .v2-chip:hover .v2-chip__label small,
.spbwc-edit-v2 .v2-chip.is-hovered .v2-chip__label small {
    color: var(--st-brand);
}

/* Audit: chip icons re-mapped from hardcoded hex to design-token colors
   where possible. The 5 unique badge palettes stay locally defined since
   the token set does not provide a "tertiary" range yet. */

/* Hint drawer below the chip grid, populated on hover */
.spbwc-edit-v2 .v2-palette__hint {
    margin-top: var(--nbd-space-3);
    padding: var(--nbd-space-3) var(--nbd-space-4);
    background: var(--st-brand-tint);
    border: 1px solid var(--nbd-st-border-brand);
    border-radius: var(--nbd-radius-md);
    display: flex; gap: var(--nbd-space-3);
    animation: spbwcPaletteHintIn .18s ease;
}
@keyframes spbwcPaletteHintIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.spbwc-edit-v2 .v2-palette__hint-icon {
    font-size: var(--text-xl);
    line-height: 1.2;
    flex-shrink: 0;
}
.spbwc-edit-v2 .v2-palette__hint-text {
    margin: 0 0 var(--nbd-space-1);
    font-size: var(--text-md);
    color: var(--st-brand-pressed);
    font-weight: var(--font-medium);
}
.spbwc-edit-v2 .v2-palette__hint-example {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--st-brand-pressed);
    opacity: .82;
    font-style: italic;
}
.spbwc-edit-v2 .v2-chip__icon {
    width: 24px; height: 24px;
    border-radius: var(--nbd-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--text-base);
}
.spbwc-edit-v2 .v2-chip__icon--m   { background: var(--st-pill-featured-bg); color: var(--st-pill-featured-text); }
.spbwc-edit-v2 .v2-chip__icon--n   { background: var(--st-pill-active-bg);   color: var(--st-pill-active-text); }
.spbwc-edit-v2 .v2-chip__icon--t   { background: var(--st-pill-pending-bg);  color: var(--st-pill-pending-text); }
.spbwc-edit-v2 .v2-chip__icon--a   { background: var(--st-pill-pending-bg);  color: var(--st-pill-pending-text); }
.spbwc-edit-v2 .v2-chip__icon--u   { background: #e0e7ff;                    color: #3730a3; } /* indigo — tertiary palette, intentional */
.spbwc-edit-v2 .v2-chip__icon--com { background: #fce7f3;                    color: #9d174d; } /* pink — tertiary palette */
.spbwc-edit-v2 .v2-chip__icon--dt  { background: #e0f2fe;                    color: #075985; } /* sky — tertiary palette */
.spbwc-edit-v2 .v2-chip__icon--di  { background: var(--st-pill-active-bg);   color: var(--st-pill-active-text); }
.spbwc-edit-v2 .v2-palette__divider {
    width: 1px; background: var(--nbd-st-border-subtle);
    margin: 0 var(--nbd-space-1); align-self: stretch;
}

/* ============================================================
   Builder 2-col layout (Builder LEFT | Preview RIGHT sticky)
   minmax(0, 1fr) prevents the form column from expanding past its
   allocated width when nested content (sub-attributes / swatch tabs)
   has a natural width that exceeds the column. Without minmax(0, ...),
   wide content can push the column wider and overlap the Live Preview.
   ============================================================ */
.spbwc-edit-v2 .v2-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--nbd-space-5);
    align-items: start;
}
.spbwc-edit-v2 .v2-builder > * {
    min-width: 0;
    max-width: 100%;
}
/* Newly-added attribute/sub-attribute briefly flashes with a brand ring
   so the user can spot it after auto-scroll. */
@keyframes spbwc-flash-new {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-brand) 60%, transparent); }
    35%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--st-brand) 35%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.spbwc-edit-v2 .nbd-attribute-wrap.is-just-added,
.spbwc-edit-v2 .nbd-subattributes-wrap.is-just-added {
    animation: spbwc-flash-new 1.6s ease-out;
}

/* Field card containers must allow shrinking so wide nested content
   (sub-attributes / swatch tabs) wraps within the column instead of
   pushing the layout wider and overlapping the Live Preview pane. */
.spbwc-edit-v2 .pcpb-fields-builder,
.spbwc-edit-v2 .pcpb-field-wrap,
.spbwc-edit-v2 .nbd-attribute-wrap,
.spbwc-edit-v2 .nbd-subattributes-wrap,
.spbwc-edit-v2 .v2-attr-titlebar,
.spbwc-edit-v2 .nbd-attribute-content-wrap,
.spbwc-edit-v2 .nbd-attribute-img-wrap,
.spbwc-edit-v2 .v2-swatch-tabs__layout,
.spbwc-edit-v2 .v2-swatch-tabs__panel {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
@media (max-width: 1180px) {
    .spbwc-edit-v2 .v2-builder { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Preview panel (right column, sticky, fills viewport)
   ============================================================ */
.spbwc-edit-v2 .v2-preview {
    position: sticky;
    top: var(--nbd-space-4);
    display: flex; flex-direction: column;
    height: calc(100vh - var(--nbd-space-4) - 84px);
}
.spbwc-edit-v2 .v2-preview__head {
    display: flex; align-items: center; gap: var(--nbd-space-3);
    padding: var(--nbd-space-3) var(--nbd-space-4);
    background: var(--st-brand-tint);
    border: 1px solid var(--nbd-st-border-light);
    border-bottom: none;
    border-radius: var(--nbd-radius-lg) var(--nbd-radius-lg) 0 0;
}
.spbwc-edit-v2 .v2-preview__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin: 0;
    display: flex; align-items: center; gap: var(--nbd-space-2);
}
.spbwc-edit-v2 .v2-device {
    display: inline-flex;
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    padding: 2px;
    margin-left: auto;
}
.spbwc-edit-v2 .v2-device__btn {
    padding: var(--nbd-space-1) var(--nbd-space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border: none; background: transparent;
    cursor: pointer; color: var(--nbd-st-text-soft);
    border-radius: var(--nbd-radius-sm);
    font-family: inherit;
    display: inline-flex; align-items: center; gap: var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-device__btn.is-active {
    background: var(--st-brand); color: #fff;
}
.spbwc-edit-v2 .v2-preview__body {
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: 0 0 var(--nbd-radius-lg) var(--nbd-radius-lg);
    padding: var(--nbd-space-4);
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Mobile viewport simulator */
.spbwc-edit-v2 .v2-mobile {
    width: 340px; margin: 0 auto;
    background: #fff;
    border: 8px solid #1d2327;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.spbwc-edit-v2 .v2-mobile__notch {
    background: #1d2327; height: 18px;
    display: flex; align-items: center; justify-content: center;
}
.spbwc-edit-v2 .v2-mobile__notch::after {
    content: ""; width: 60px; height: 5px;
    background: #000; border-radius: 99px;
}
.spbwc-edit-v2 .v2-mobile__screen {
    padding: var(--nbd-space-3); font-size: var(--text-base);
}

/* Desktop wide simulator (shown when device=desktop) */
.spbwc-edit-v2 .v2-desktop {
    display: none;
    background: #fff;
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    overflow: hidden;
}
.spbwc-edit-v2 .v2-preview[data-device="desktop"] .v2-mobile { display: none; }
.spbwc-edit-v2 .v2-preview[data-device="desktop"] .v2-desktop { display: block; }

.spbwc-edit-v2 .v2-desktop__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid var(--nbd-st-border-subtle);
}
.spbwc-edit-v2 .v2-desktop__gallery {
    padding: var(--nbd-space-4);
    background: var(--nbd-st-bg-soft);
    display: flex;
    flex-direction: column;
    gap: var(--nbd-space-2);
}
.spbwc-edit-v2 .v2-desktop__hero {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #f3e8ff 0%, #c4b5fd 100%);
    border-radius: var(--nbd-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4c1d95;
    font-weight: var(--font-bold);
    font-size: var(--text-md);
}
.spbwc-edit-v2 .v2-desktop__thumbs {
    display: flex;
    gap: var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-desktop__thumbs span {
    flex: 1;
    aspect-ratio: 1 / 1;
    background: var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-sm);
}
.spbwc-edit-v2 .v2-desktop__thumbs span:first-child {
    background: linear-gradient(135deg, #c4b5fd, #a78bfa);
    border: 2px solid var(--st-brand);
}
.spbwc-edit-v2 .v2-desktop__name {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin: var(--nbd-space-2) 0 0;
    color: var(--nbd-st-text);
}
.spbwc-edit-v2 .v2-desktop__price {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--st-brand);
}
.spbwc-edit-v2 .v2-desktop__desc {
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    line-height: 1.5;
    margin: 0;
}
.spbwc-edit-v2 .v2-desktop__options {
    padding: var(--nbd-space-4);
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: var(--nbd-space-3);
}
.spbwc-edit-v2 .v2-desktop__calc {
    padding: var(--nbd-space-3) var(--nbd-space-4);
    background: var(--nbd-st-bg-soft);
    display: flex;
    flex-direction: column;
    gap: var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-desktop__calc label {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
}

/* Preview product header */
.spbwc-edit-v2 .v2-prv-img {
    width: 100%; height: 140px;
    background: linear-gradient(135deg, #f3e8ff 0%, #c4b5fd 100%);
    border-radius: var(--nbd-radius-md);
    margin-bottom: var(--nbd-space-3);
    display: flex; align-items: center; justify-content: center;
    color: #4c1d95; font-weight: var(--font-bold); font-size: var(--text-md);
}
.spbwc-edit-v2 .v2-prv-name {
    font-size: var(--text-lg); font-weight: var(--font-bold);
    margin: 0 0 var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-prv-price {
    font-size: var(--text-xl); font-weight: var(--font-bold);
    color: var(--st-brand);
    margin-bottom: var(--nbd-space-3);
}

/* Preview field sections */
.spbwc-edit-v2 .v2-prv-section { margin-bottom: var(--nbd-space-3); }
.spbwc-edit-v2 .v2-prv-section__head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-prv-section__label {
    font-size: var(--text-base); font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .v2-prv-section__chosen {
    font-size: var(--text-sm); color: var(--nbd-st-text-soft);
}

.spbwc-edit-v2 .v2-prv-swatches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-prv-swatches--desktop {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--nbd-space-2);
}
.spbwc-edit-v2 .v2-prv-swatch {
    border: 1.5px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-sm);
    padding: var(--nbd-space-1);
    text-align: center;
    font-size: var(--text-xs);
    background: #fff;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}
.spbwc-edit-v2 .v2-prv-swatches--desktop .v2-prv-swatch {
    padding: var(--nbd-space-2);
    font-size: var(--text-sm);
}
.spbwc-edit-v2 .v2-prv-swatch:hover {
    border-color: var(--nbd-st-border);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}
.spbwc-edit-v2 .v2-prv-swatch--active {
    border-color: var(--st-brand);
    background: var(--st-brand-tint);
    box-shadow: 0 0 0 2px var(--st-brand-soft);
}
.spbwc-edit-v2 .v2-prv-swatch__color {
    height: 24px;
    border-radius: 3px;
    margin-bottom: 2px;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    background-size: cover;
    background-position: center;
}
.spbwc-edit-v2 .v2-prv-swatches--desktop .v2-prv-swatch__color {
    height: 40px;
}
.spbwc-edit-v2 .v2-prv-swatch__price {
    font-size: var(--text-xs);
    color: var(--nbd-color-success);
    font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .v2-prv-swatch--active .v2-prv-swatch__price {
    color: var(--st-brand-pressed);
}

.spbwc-edit-v2 .v2-prv-input,
.spbwc-edit-v2 .v2-prv-select {
    width: 100%;
    padding: var(--nbd-space-1) var(--nbd-space-2);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-sm);
    font-size: var(--text-sm);
    font-family: inherit;
    background: #fff;
}
.spbwc-edit-v2 .v2-prv-textarea {
    min-height: 56px; resize: vertical;
}
.spbwc-edit-v2 .v2-prv-upload {
    border: 1.5px dashed var(--nbd-st-border);
    border-radius: var(--nbd-radius-sm);
    padding: var(--nbd-space-3);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    background: #fff;
}

/* Preview quantity-break buttons */
.spbwc-edit-v2 .v2-prv-qty-breaks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-prv-qty-break {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    padding: var(--nbd-space-1) var(--nbd-space-2);
    background: #fff;
    border: 1.5px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-sm);
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-prv-qty-break strong {
    font-size: var(--text-sm);
    color: var(--nbd-st-text);
    font-weight: var(--font-bold);
}
.spbwc-edit-v2 .v2-prv-qty-break small {
    font-size: 9px;
    color: var(--nbd-color-success);
    font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .v2-prv-qty-break:hover {
    border-color: var(--nbd-st-border);
}
.spbwc-edit-v2 .v2-prv-qty-break.is-active {
    border-color: var(--st-brand);
    background: var(--st-brand-tint);
    box-shadow: 0 0 0 2px var(--st-brand-soft);
}
.spbwc-edit-v2 .v2-prv-qty-break.is-active strong { color: var(--st-brand-pressed); }

/* Preview price summary */
.spbwc-edit-v2 .v2-prv-summary {
    margin-top: var(--nbd-space-3);
    padding: var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border-radius: var(--nbd-radius-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.spbwc-edit-v2 .v2-prv-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
}
.spbwc-edit-v2 .v2-prv-summary__row--total {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--nbd-st-text);
    border-top: 1px solid var(--nbd-st-border-subtle);
    padding-top: var(--nbd-space-2);
    margin-top: var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-prv-summary__total-value {
    color: var(--st-brand);
}

.spbwc-edit-v2 .v2-prv-empty {
    padding: var(--nbd-space-6) var(--nbd-space-4);
    text-align: center;
    color: var(--nbd-st-text-mute);
    font-size: var(--text-base);
}
.spbwc-edit-v2 .v2-prv-empty__icon {
    font-size: 32px;
    margin-bottom: var(--nbd-space-2);
    opacity: .5;
}

.spbwc-edit-v2 .v2-prv-cta {
    width: 100%; margin-top: var(--nbd-space-3);
    padding: var(--nbd-space-2);
    background: var(--st-brand); color: #fff;
    border: none; border-radius: var(--nbd-radius-md);
    font-size: var(--text-md); font-weight: var(--font-bold);
    cursor: default; font-family: inherit;
}

/* ============================================================
   Visual overlay on existing .pcpb-field-wrap cards
   Re-skins the legacy AngularJS builder cards using design tokens.
   ============================================================ */
.spbwc-edit-v2 .pcpb-fields-builder {
    background: transparent;
    padding: 0;
    box-shadow: none;
}
.spbwc-edit-v2 .pcpb-field-wrap {
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--nbd-space-3);
    padding: 0;
    overflow: hidden; /* prevent legacy translated tabs from leaking outside */
    transition: var(--transition-card), background-color .25s ease;
}

/* Expand/collapse animation — body fades + slides into view when
   ng-show toggles. We can't transition `display`, so target the
   .pcpb-field-content block which is rendered always but hidden
   inside `field_body` ng-template when not expanded. */
.spbwc-edit-v2 .pcpb-field-wrap.is-expanded .pcpb-field-content {
    animation: spbwcFieldBodyIn .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes spbwcFieldBodyIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.spbwc-edit-v2 .pcpb-field-wrap.is-expanded .nbd-tab-nav {
    animation: spbwcFadeIn .25s ease;
}
@keyframes spbwcFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.spbwc-edit-v2 .pcpb-field-wrap:hover {
    border-color: var(--nbd-st-border);
    box-shadow: var(--shadow-card-hover);
}
.spbwc-edit-v2 .pcpb-field-wrap.is-disabled {
    opacity: .65;
    background: var(--nbd-st-bg-soft);
}
.spbwc-edit-v2 .pcpb-field-wrap .nbd-nav {
    padding: var(--nbd-space-3) var(--nbd-space-4);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-st-bg);
}
/* Flex row layout for the header — replaces the legacy float scheme */
.spbwc-edit-v2 .pcpb-field-wrap .nbd-nav {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2);
    flex-wrap: wrap;
}
.spbwc-edit-v2 .pcpb-field-wrap .nbd-nav > div[ng-click] {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2);
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

/* ============================================================
   Drag handle (jQuery UI sortable trigger)
   ============================================================ */
.spbwc-edit-v2 .v2-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 28px;
    cursor: grab;
    color: var(--nbd-st-text-mute);
    border-radius: var(--nbd-radius-sm);
    flex-shrink: 0;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-drag-handle:hover {
    background: var(--nbd-st-bg-soft);
    color: var(--nbd-st-text);
}
.spbwc-edit-v2 .v2-drag-handle:active,
.spbwc-edit-v2 .v2-drag-handle.is-grabbing {
    cursor: grabbing;
    background: var(--st-brand-tint);
    color: var(--st-brand-pressed);
}
.spbwc-edit-v2 .v2-drag-handle__icon {
    font-size: var(--st-icon-sm);
    letter-spacing: -2px;
    line-height: 1;
    font-weight: var(--font-bold);
    transform: rotate(90deg);
}

/* While dragging: lift the card visually */
.spbwc-edit-v2 .pcpb-field-wrap.is-dragging {
    box-shadow: var(--shadow-card-hover);
    background: var(--st-brand-tint);
    border-color: var(--st-brand);
    opacity: .92;
    cursor: grabbing !important;
    z-index: 10;
}

/* Sortable placeholder — visible target row while dragging */
.spbwc-edit-v2 .v2-sortable-placeholder,
.v2-sortable-placeholder {
    background: var(--st-brand-tint);
    border: 2px dashed var(--st-brand);
    border-radius: var(--nbd-radius-md);
    margin-bottom: var(--nbd-space-3);
    box-sizing: border-box;
    list-style: none;
}
.spbwc-edit-v2 .pcpb-field-wrap .nbd-nav .nbstorelly-right.field-action {
    margin-left: auto; /* pin to right edge */
    float: none;
}
/* Hide the floating .clear hack — flex doesn't need it */
.spbwc-edit-v2 .pcpb-field-wrap .nbd-nav .clear { display: none; }

/* Field title text inside the card header (collapsed + expanded)
   Stack title on top, meta line below — corporate two-line layout. */
.spbwc-edit-v2 .pcpb-field-name,
.spbwc-edit-v2 .pcpb-field-name.left {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
    /* Reset legacy quirks */
    position: static !important;
    opacity: 1 !important;
    height: auto !important;
    line-height: 1.3 !important;
    left: auto !important;
    right: auto !important;
    max-width: none !important;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    transition: none;
    transform: none !important;
}
.spbwc-edit-v2 .pcpb-field-name span:first-child,
.spbwc-edit-v2 .pcpb-field-name.left span:first-child {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-2);
    flex-wrap: wrap;
}
.spbwc-edit-v2 .pcpb-field-name__title {
    font-size: var(--text-md);
    color: var(--nbd-st-text);
    font-weight: var(--font-semibold);
    line-height: 1.3;
}

/* Inline rename input — looks like text by default, becomes an input on focus */
.spbwc-edit-v2 .pcpb-field-name__title--editable {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--nbd-radius-sm);
    padding: 4px var(--nbd-space-2);
    margin: 0;
    color: var(--nbd-st-text);
    font: inherit;
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    min-width: 80px;
    max-width: 360px;
    width: 100%;
    flex: 0 1 auto;
    transition: var(--transition-fast);
    cursor: text;
    outline: none;
    box-shadow: none;
}
.spbwc-edit-v2 .pcpb-field-name__title--editable:hover {
    background: var(--nbd-st-bg-soft);
    border-color: var(--nbd-st-border-light);
}
.spbwc-edit-v2 .pcpb-field-name__title--editable:focus {
    background: var(--st-field-bg);
    border-color: var(--st-brand);
    box-shadow: var(--st-field-focus-shadow);
    cursor: text;
}
.spbwc-edit-v2 .pcpb-field-name__title--editable:placeholder-shown {
    color: var(--nbd-st-text-mute);
    font-style: italic;
}
.spbwc-edit-v2 .is-disabled .pcpb-field-name__title--editable {
    color: var(--nbd-st-text-mute);
    text-decoration: line-through;
}
.spbwc-edit-v2 .is-disabled .pcpb-field-name__title {
    color: var(--nbd-st-text-mute);
    text-decoration: line-through;
}

/* Meta line — small muted text under the title (line 2). Replaces the
   colorful chip layout with a single corporate-style text row. */
.spbwc-edit-v2 .pcpb-field-name__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    font-weight: var(--font-normal);
    line-height: 1.4;
    margin-top: 1px;
    padding-left: var(--nbd-space-2);
}
.spbwc-edit-v2 .pcpb-field-meta__item {
    color: var(--nbd-st-text-soft);
}
.spbwc-edit-v2 .pcpb-field-meta__item:first-child {
    color: var(--st-brand-pressed);
    font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .pcpb-field-meta__item--required {
    color: var(--st-pill-pending-text);
    font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .pcpb-field-meta__item--disabled {
    color: var(--st-pill-draft-text);
    font-style: italic;
}
.spbwc-edit-v2 .pcpb-field-meta__item--hidden {
    color: var(--st-pill-warning-text);
    font-style: italic;
}
.spbwc-edit-v2 .pcpb-field-meta__sep {
    color: var(--nbd-st-text-mute);
    font-weight: var(--font-normal);
    user-select: none;
}

/* Expanded state visual cue — left accent border on the whole card */
.spbwc-edit-v2 .pcpb-field-wrap.is-expanded {
    border-color: var(--st-brand-soft);
    box-shadow: var(--shadow-card-hover);
}
.spbwc-edit-v2 .pcpb-field-wrap.is-expanded .nbd-nav {
    background: var(--st-brand-tint);
    border-radius: var(--nbd-radius-md) var(--nbd-radius-md) 0 0;
    border-bottom: 1px solid var(--st-brand-soft);
}

/* Type label chip (e.g. "Multi-choice", "Text") */
.spbwc-edit-v2 .nbo-type-label-wrap { margin: 0 var(--nbd-space-1); }
.spbwc-edit-v2 .nbo-type-label {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--nbd-space-2);
    background: var(--st-pill-featured-bg);
    color: var(--st-pill-featured-text);
    border-radius: var(--nbd-radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 1px solid var(--nbd-st-border-brand);
}
.spbwc-edit-v2 .nbo-type-label.wpo {
    background: var(--st-pill-pending-bg);
    color: var(--st-pill-pending-text);
    border-color: transparent;
}
.spbwc-edit-v2 .nbo-type-label.default {
    background: var(--st-pill-draft-bg);
    color: var(--st-pill-draft-text);
    border-color: transparent;
}

/* ============================================================
   Field card header action group
   Sort arrows + action buttons combined into a single segmented
   toolbar, flush against the right edge of the card.
   ============================================================ */
.spbwc-edit-v2 .nbstorelly-right.field-action {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-2);
    margin-top: 0;
    margin-right: 0;
}

/* Sort arrows — ghost vertical stack inside one frame. */
.spbwc-edit-v2 .nbo-sort-group {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 28px;
    margin: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--nbd-radius-sm);
    overflow: hidden;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .nbo-sort-group:hover {
    background: var(--nbd-st-bg-soft);
    border-color: var(--nbd-st-border-light);
}
.spbwc-edit-v2 .nbo-sort {
    position: absolute;
    left: 0;
    width: 100%;
    height: 14px;
    line-height: 14px;
    text-align: center;
    color: var(--nbd-st-text-soft);
    cursor: pointer;
    transition: var(--transition-fast);
    background: transparent;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    margin: 0;
}
.spbwc-edit-v2 .nbo-sort.dashicons {
    font-size: var(--st-icon-sm);
    width: 100%;
    height: 14px;
}
.spbwc-edit-v2 .nbo-sort.nbo-sort-up   { top: 0; }
.spbwc-edit-v2 .nbo-sort.nbo-sort-down { top: 14px; border-top: 1px solid var(--nbd-st-border-subtle) !important; }
.spbwc-edit-v2 .nbo-sort:hover {
    background: var(--st-brand-tint);
    color: var(--st-brand-pressed);
}

/* Action button group — lean ghost icons. No fill until hover. */
.spbwc-edit-v2 .nbstorelly-right.field-action > .nbd-mini-btn,
.spbwc-edit-v2 .nbstorelly-right.field-action > a.nbd-mini-btn {
    width: 28px !important;
    height: 28px;
    min-height: var(--st-btn-min-h-sm);
    padding: 0 !important;
    border-radius: var(--nbd-radius-sm) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--nbd-st-text-mute) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    transition: var(--transition-fast);
    margin: 0 !important;
}
/* Solid brand focus ring replaces browser dashed outline */
.spbwc-edit-v2 .nbstorelly-right.field-action > a.nbd-mini-btn:focus,
.spbwc-edit-v2 .nbstorelly-right.field-action > a.nbd-mini-btn:focus-visible,
.spbwc-edit-v2 .nbstorelly-right.field-action > a.nbd-mini-btn:active {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--st-brand-soft) !important;
    border-color: var(--st-brand) !important;
}
.spbwc-edit-v2 .nbstorelly-right.field-action > .nbd-mini-btn .dashicons,
.spbwc-edit-v2 .nbstorelly-right.field-action > a.nbd-mini-btn .dashicons {
    font-size: var(--st-icon-md);
    width: var(--st-icon-md);
    height: var(--st-icon-md);
    line-height: var(--st-icon-md);
}
.spbwc-edit-v2 .nbstorelly-right.field-action > a.nbd-mini-btn:hover {
    background: var(--nbd-st-bg-soft) !important;
    color: var(--nbd-st-text) !important;
    border-color: var(--nbd-st-border-light) !important;
}

/* Destructive button — title-attribute based; works for both
   "Delete" and translated "Xóa" / "Supprimer" via partial match */
.spbwc-edit-v2 .nbstorelly-right.field-action > a.nbd-mini-btn[title*="elete"]:hover,
.spbwc-edit-v2 .nbstorelly-right.field-action > a.nbd-mini-btn[title*="emove"]:hover,
.spbwc-edit-v2 .nbstorelly-right.field-action > a.nbd-mini-btn[title*="Xoá"]:hover,
.spbwc-edit-v2 .nbstorelly-right.field-action > a.nbd-mini-btn[title*="Xóa"]:hover {
    background: var(--st-pill-danger-bg) !important;
    color: var(--nbd-color-danger) !important;
    border-color: var(--nbd-color-danger) !important;
}

/* Expand toggle — visual indicator that it's the chevron */
.spbwc-edit-v2 .pcpb-field-wrap.is-expanded
    .nbstorelly-right.field-action > a.nbd-mini-btn:last-child {
    background: var(--st-brand) !important;
    color: var(--nbd-st-text-inverse) !important;
    border-color: var(--st-brand) !important;
}

/* ============================================================
   Field internal tabs (General / Appearance / Product builder)
   When collapsed: tabs HIDDEN (they used to float outside the card
   via translateX(-100%) which leaked into the layout).
   When expanded: tabs render at the top of the field body, INSIDE
   the card — clear visual ownership.
   ============================================================ */

/* Hide tabs whenever the card is collapsed (the .left state). */
.spbwc-edit-v2 .pcpb-field-wrap:not(.is-expanded) .nbd-tab-nav,
.spbwc-edit-v2 .nbd-tab-nav.left {
    display: none !important;
}

/* Tabs now live INSIDE the body wrapper (.v2-field-body-wrap), not next
   to the title. Pill segmented control style. */
.spbwc-edit-v2 .v2-field-body-wrap {
    padding: var(--nbd-space-4);
    border-top: 1px solid var(--nbd-st-border-subtle);
    background: var(--nbd-st-bg-soft);
}
.spbwc-edit-v2 .v2-field-tabs {
    display: inline-flex;
    margin: 0 0 var(--nbd-space-3);
    padding: 3px;
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    gap: 2px;
    transform: none !important;
    list-style: none;
    box-shadow: var(--shadow-card);
}
.spbwc-edit-v2 .v2-field-tabs li {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--nbd-st-text-soft);
    padding: var(--nbd-space-1) var(--nbd-space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border: none;
    margin: 0;
    border-radius: var(--nbd-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    min-height: 26px;
    line-height: 1.4;
    font-family: inherit;
}
.spbwc-edit-v2 .v2-field-tabs li:hover {
    color: var(--nbd-st-text);
    background: var(--nbd-st-bg-soft);
}
.spbwc-edit-v2 .v2-field-tabs li.active {
    color: var(--nbd-st-text-inverse);
    background: var(--st-brand);
    box-shadow: var(--shadow-card);
}
.spbwc-edit-v2 .v2-field-tabs li.active:hover {
    background: var(--st-brand-pressed);
}

/* The pcpb-field-content inside the new body wrap loses its top border
   since the body wrap already provides one. */
.spbwc-edit-v2 .v2-field-body-wrap .pcpb-field-content {
    border-top: none;
    background: var(--nbd-st-bg);
    border-radius: var(--nbd-radius-md);
    padding: var(--nbd-space-3) var(--nbd-space-4);
    border: 1px solid var(--nbd-st-border-light);
}

/* ============================================================
   Per-field action bar (U5) — sits at the bottom of the body
   wrapper. Local Save/Reset/Delete actions for the field being
   edited so the user does not have to scroll to the global savebar.
   ============================================================ */
.spbwc-edit-v2 .v2-field-actionbar {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2);
    margin-top: var(--nbd-space-3);
    padding: var(--nbd-space-3);
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    box-shadow: var(--shadow-card);
}
.spbwc-edit-v2 .v2-field-actionbar__hint {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-1);
    line-height: 1.4;
}
.spbwc-edit-v2 .v2-field-actionbar__hint .dashicons {
    font-size: var(--st-icon-md);
    width: var(--st-icon-md);
    height: var(--st-icon-md);
    line-height: var(--st-icon-md);
    color: var(--nbd-st-text-mute);
}
.spbwc-edit-v2 .v2-field-actionbar__btn {
    padding: var(--st-btn-pad-md);
    font-size: var(--text-sm);
    line-height: 1.2;
    min-height: 32px;
}
.spbwc-edit-v2 .v2-field-actionbar__btn .dashicons {
    font-size: var(--st-icon-sm);
    width: var(--st-icon-sm);
    height: var(--st-icon-sm);
    line-height: var(--st-icon-sm);
}

/* ============================================================
   Field body — property rows
   Convert legacy float-based table layout into a vertical form-row
   with label above, hint below the input. Better hierarchy + easier
   to scan than the legacy 150px-label + 300px-control side-by-side.
   ============================================================ */
.spbwc-edit-v2 .pcpb-field-content {
    padding: var(--nbd-space-3) var(--nbd-space-4);
    border-top: 1px solid var(--nbd-st-border-subtle);
    background: var(--nbd-st-bg);
    border-radius: 0 0 var(--nbd-radius-md) var(--nbd-radius-md);
}
.spbwc-edit-v2 .pcpb-field-info {
    display: block;
    overflow: visible;
    padding: 0;
    margin: 0 0 var(--nbd-space-3);
    clear: both;
}

/* Compact horizontal layout for toggle rows (Enabled / Published / Required)
   — label + help on the left, switch pinned on the right. Wrapped in a
   subtle pill so the 3 toggles read as a cluster. */
.spbwc-edit-v2 .pcpb-field-info--toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nbd-space-4);
    padding: var(--nbd-space-2) var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-subtle);
    border-radius: var(--nbd-radius-md);
    margin-bottom: var(--nbd-space-2);
}
.spbwc-edit-v2 .pcpb-field-info--toggle + .pcpb-field-info--toggle {
    margin-top: -2px;
}
.spbwc-edit-v2 .pcpb-field-info--toggle .pcpb-field-info-1 {
    margin: 0;
    flex: 1;
    min-width: 0;
}
.spbwc-edit-v2 .pcpb-field-info--toggle .pcpb-field-info-1 label {
    line-height: 1.2;
}
.spbwc-edit-v2 .pcpb-field-info--toggle .pcpb-field-info-1 label b {
    font-size: var(--text-md);
}
.spbwc-edit-v2 .pcpb-field-info--toggle .v2-form-help {
    margin-top: 2px;
    font-size: var(--text-xs);
    line-height: 1.4;
}
.spbwc-edit-v2 .pcpb-field-info--toggle .pcpb-field-info-2 {
    width: auto;
    flex: 0 0 auto;
}
.spbwc-edit-v2 .pcpb-field-info-1,
.spbwc-edit-v2 .pcpb-field-info-2 {
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
.spbwc-edit-v2 .pcpb-field-info-1 {
    margin-bottom: var(--nbd-space-1);
}
.spbwc-edit-v2 .pcpb-field-info-1 > div { margin: 0; }
.spbwc-edit-v2 .pcpb-field-info-1 label {
    color: var(--nbd-st-text);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-1);
}
.spbwc-edit-v2 .pcpb-field-info-1 label b {
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
}
.spbwc-edit-v2 .pcpb-field-info-2 input[type="text"],
.spbwc-edit-v2 .pcpb-field-info-2 input[type="number"],
.spbwc-edit-v2 .pcpb-field-info-2 textarea,
.spbwc-edit-v2 .pcpb-field-info-2 select {
    width: 100% !important;
    max-width: 460px;
    padding: var(--st-field-pad);
    border: 1px solid var(--st-field-border);
    border-radius: var(--st-field-radius);
    background: var(--st-field-bg);
    font-size: var(--st-field-font);
    color: var(--nbd-st-text);
    font-family: inherit;
    transition: var(--transition-fast);
    box-shadow: var(--st-field-shadow);
}
.spbwc-edit-v2 .pcpb-field-info-2 textarea {
    min-height: 80px;
    resize: vertical;
}
.spbwc-edit-v2 .pcpb-field-info-2 input[type="text"]:focus,
.spbwc-edit-v2 .pcpb-field-info-2 input[type="number"]:focus,
.spbwc-edit-v2 .pcpb-field-info-2 textarea:focus,
.spbwc-edit-v2 .pcpb-field-info-2 select:focus {
    outline: none;
    border-color: var(--st-brand);
    box-shadow: var(--st-field-focus-shadow);
}

/* "Short" inputs (numbers) get a tighter cap */
.spbwc-edit-v2 .nbd-short-ip {
    width: 100px !important;
    max-width: 100px;
    display: inline-block;
}
.spbwc-edit-v2 .pcpb-field-info-2 .nbd-medium-ip {
    width: 220px !important;
    max-width: 220px;
}

/* Legacy section divider (kept for backward compat — superseded by .v2-form-section) */
.spbwc-edit-v2 .v2-section-head {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2);
    padding: var(--nbd-space-1) 0;
    margin: var(--nbd-space-3) 0 var(--nbd-space-2);
    border-top: 1px solid var(--nbd-st-border-subtle);
    padding-top: var(--nbd-space-2);
    color: var(--nbd-st-text-soft);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ============================================================
   v2-form-section — block style for each property group
   (Basics / Configuration / Display / Validation / Pricing / Attributes).
   Built by JS at injectFieldSections(). Provides clear visual hierarchy.
   ============================================================ */
.spbwc-edit-v2 .v2-form-section {
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    margin-bottom: var(--nbd-space-3);
    overflow: hidden;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-form-section:hover {
    border-color: var(--nbd-st-border);
}
.spbwc-edit-v2 .v2-form-section__head {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2);
    padding: var(--nbd-space-2) var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border-bottom: 1px solid var(--nbd-st-border-subtle);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--nbd-st-text-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.4;
}
.spbwc-edit-v2 .v2-form-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: var(--nbd-radius-sm);
    background: var(--nbd-st-bg);
    color: var(--st-brand);
    font-size: var(--text-base);
    border: 1px solid var(--nbd-st-border-light);
    flex-shrink: 0;
}
.spbwc-edit-v2 .v2-form-section__label {
    flex: 1;
}
.spbwc-edit-v2 .v2-form-section__body {
    padding: var(--nbd-space-3) var(--nbd-space-4);
}
/* Tighter body padding for short sections (Display, Validation) which only
   hold toggle rows. */
.spbwc-edit-v2 .v2-form-section--display .v2-form-section__body,
.spbwc-edit-v2 .v2-form-section--validation .v2-form-section__body {
    padding: var(--nbd-space-2);
}

/* Per-section accent color on the icon */
.spbwc-edit-v2 .v2-form-section--basics .v2-form-section__icon       { color: var(--st-brand);              border-color: var(--nbd-st-border-brand); }
.spbwc-edit-v2 .v2-form-section--configuration .v2-form-section__icon { color: var(--st-pill-featured-text); border-color: var(--nbd-st-border-brand); }
.spbwc-edit-v2 .v2-form-section--display .v2-form-section__icon      { color: var(--st-pill-pending-text); border-color: var(--st-pill-pending-bg); }
.spbwc-edit-v2 .v2-form-section--validation .v2-form-section__icon   { color: var(--st-pill-active-text);  border-color: var(--st-pill-active-bg); }
.spbwc-edit-v2 .v2-form-section--pricing .v2-form-section__icon      { color: var(--nbd-color-success);    border-color: var(--st-pill-active-bg); }
.spbwc-edit-v2 .v2-form-section--attributes .v2-form-section__icon   { color: #9d174d;                     border-color: #fce7f3; } /* matches v2-chip__icon--com — pink tertiary */
.spbwc-edit-v2 .v2-form-section--conditional .v2-form-section__icon  { color: var(--st-accent-pressed, #d97706); border-color: var(--st-accent-soft); }

/* ============================================================
   Conditional logic rules (U15)
   ============================================================ */
.spbwc-edit-v2 .v2-cond-empty {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2);
    padding: var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border: 1px dashed var(--nbd-st-border);
    border-radius: var(--nbd-radius-md);
    color: var(--nbd-st-text-soft);
    font-size: var(--text-sm);
    font-style: italic;
    margin-bottom: var(--nbd-space-2);
}
.spbwc-edit-v2 .v2-cond-empty__icon {
    font-size: var(--text-2xl);
    color: var(--nbd-st-text-mute);
}
.spbwc-edit-v2 .v2-cond-rule {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr 32px;
    gap: var(--nbd-space-2);
    align-items: center;
    padding: var(--nbd-space-2) var(--nbd-space-3);
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    margin-bottom: var(--nbd-space-1);
    box-shadow: var(--shadow-card);
}
@media (max-width: 800px) {
    .spbwc-edit-v2 .v2-cond-rule {
        grid-template-columns: 1fr 1fr 32px;
        grid-template-areas:
            "label  label  remove"
            "field  field  field"
            "op     val    val";
    }
    .spbwc-edit-v2 .v2-cond-rule__label  { grid-area: label; }
    .spbwc-edit-v2 .v2-cond-rule__field  { grid-area: field; }
    .spbwc-edit-v2 .v2-cond-rule__op     { grid-area: op; }
    .spbwc-edit-v2 .v2-cond-rule__val    { grid-area: val; }
    .spbwc-edit-v2 .v2-cond-rule__remove { grid-area: remove; }
}
.spbwc-edit-v2 .v2-cond-rule__label {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: var(--font-bold);
    white-space: nowrap;
}
.spbwc-edit-v2 .v2-cond-rule__field,
.spbwc-edit-v2 .v2-cond-rule__op,
.spbwc-edit-v2 .v2-cond-rule__val {
    width: 100% !important;
    max-width: none !important;
    padding: var(--nbd-space-1) var(--nbd-space-2);
    font-size: var(--st-field-font);
}
.spbwc-edit-v2 .v2-cond-rule__op { max-width: 160px !important; }
.spbwc-edit-v2 .v2-cond-rule__field,
.spbwc-edit-v2 .v2-cond-rule__op { padding-right: 28px; }
.spbwc-edit-v2 .v2-cond-rule__remove {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--nbd-st-text-mute);
    border-radius: var(--nbd-radius-sm);
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-cond-rule__remove:hover {
    background: var(--st-pill-danger-bg);
    color: var(--nbd-color-danger);
    border-color: var(--nbd-color-danger);
}
.spbwc-edit-v2 .v2-cond-add {
    display: inline-flex;
    align-items: center;
    gap: var(--st-btn-gap);
    padding: var(--st-btn-pad-md);
    background: var(--nbd-st-bg);
    color: var(--st-brand);
    border: 1.5px dashed var(--nbd-st-border-brand);
    border-radius: var(--st-btn-radius);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
    margin-top: var(--nbd-space-2);
    font-family: inherit;
}
.spbwc-edit-v2 .v2-cond-add:hover {
    background: var(--st-brand-tint);
    border-style: solid;
    border-color: var(--st-brand);
    color: var(--st-brand-pressed);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}
.spbwc-edit-v2 .v2-cond-add .dashicons {
    font-size: var(--st-icon-md);
    width: var(--st-icon-md);
    height: var(--st-icon-md);
}

/* Remove margin-bottom from the last property row inside a section
   so the body padding is consistent. */
.spbwc-edit-v2 .v2-form-section__body > .pcpb-field-info:last-child {
    margin-bottom: 0;
}

/* Input + currency prefix (e.g. "$ 25.00") */
.spbwc-edit-v2 .v2-input-with-prefix {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--st-field-border);
    border-radius: var(--st-field-radius);
    background: var(--st-field-bg);
    overflow: hidden;
    max-width: 220px;
    box-shadow: var(--st-field-shadow);
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-input-with-prefix:focus-within {
    border-color: var(--st-brand);
    box-shadow: var(--st-field-focus-shadow);
}
.spbwc-edit-v2 .v2-input-prefix {
    padding: 0 var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border-right: 1px solid var(--nbd-st-border-light);
    color: var(--nbd-st-text-soft);
    font-weight: var(--font-semibold);
    font-size: var(--text-md);
    display: inline-flex;
    align-items: center;
}
.spbwc-edit-v2 .v2-input-with-prefix input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    flex: 1;
    padding: var(--nbd-space-2) var(--nbd-space-3) !important;
    width: auto !important;
    max-width: none !important;
}
.spbwc-edit-v2 .v2-input-with-prefix input:focus {
    box-shadow: none !important;
    border: none !important;
}
.spbwc-edit-v2 .v2-section-head:first-of-type {
    border-top: none;
    margin-top: 0;
}
.spbwc-edit-v2 .v2-section-head__icon {
    width: 18px; height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
}

/* Inline tooltip icon hidden — help text is now rendered inline */
.spbwc-edit-v2 .nbd-tip,
.spbwc-edit-v2 nbd-tip {
    display: none !important;
}

/* Inline form help text — replaces the hover tooltip pattern */
.spbwc-edit-v2 .v2-form-help {
    margin: 4px 0 0;
    padding: 0;
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    font-weight: var(--font-normal);
    line-height: 1.5;
    max-width: 540px;
}
.spbwc-edit-v2 .pcpb-field-info-1 label + .v2-form-help {
    margin-top: 2px;
}

/* ============================================================
   Inline error state — visual cue + message
   Activates via Angular's ng-invalid + ng-dirty classes (auto-added
   when ng-model bound input fails its validators after user input)
   or via explicit .v2-input-error class.
   ============================================================ */
.spbwc-edit-v2 input.ng-invalid.ng-dirty,
.spbwc-edit-v2 select.ng-invalid.ng-dirty,
.spbwc-edit-v2 textarea.ng-invalid.ng-dirty,
.spbwc-edit-v2 input.ng-invalid.ng-touched,
.spbwc-edit-v2 select.ng-invalid.ng-touched,
.spbwc-edit-v2 textarea.ng-invalid.ng-touched,
.spbwc-edit-v2 .v2-input-error,
.spbwc-edit-v2 .v2-input-error input,
.spbwc-edit-v2 .v2-input-error select,
.spbwc-edit-v2 .v2-input-error textarea {
    border-color: var(--nbd-color-danger) !important;
    background: var(--nbd-color-danger-soft) !important;
}
.spbwc-edit-v2 input.ng-invalid.ng-dirty:focus,
.spbwc-edit-v2 input.ng-invalid.ng-touched:focus,
.spbwc-edit-v2 .v2-input-error input:focus,
.spbwc-edit-v2 .v2-input-error select:focus,
.spbwc-edit-v2 .v2-input-error textarea:focus {
    border-color: var(--nbd-color-danger) !important;
    box-shadow: 0 0 0 3px var(--st-pill-danger-bg) !important;
    background: var(--nbd-st-bg-input) !important;
}

/* Error message line under the input */
.spbwc-edit-v2 .v2-form-error {
    margin: 4px 0 0;
    padding: 0;
    font-size: var(--text-sm);
    color: var(--nbd-color-danger);
    font-weight: var(--font-semibold);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-form-error::before {
    content: "⚠";
    font-size: var(--text-base);
    color: var(--nbd-color-danger);
}

/* Inline rename input gets a subtle red ring when invalid */
.spbwc-edit-v2 .pcpb-field-name__title--editable.ng-invalid.ng-dirty,
.spbwc-edit-v2 .pcpb-field-name__title--editable.ng-invalid.ng-touched {
    border-color: var(--nbd-color-danger) !important;
    background: var(--nbd-color-danger-soft) !important;
}

/* Required field star indicator next to label */
.spbwc-edit-v2 .v2-required {
    color: var(--nbd-color-danger);
    font-weight: var(--font-bold);
    margin-left: 2px;
}

/* ============================================================
   Mini-grid — compact labeled inputs row (min/max/step, MB...)
   Replaces the legacy <table class="nbd-table"> layout.
   ============================================================ */
.spbwc-edit-v2 .v2-mini-grid {
    display: grid;
    gap: var(--nbd-space-2);
    max-width: 600px;
}
.spbwc-edit-v2 .v2-mini-grid--2 { grid-template-columns: repeat(2, 1fr); }
.spbwc-edit-v2 .v2-mini-grid--3 { grid-template-columns: repeat(3, 1fr); }
.spbwc-edit-v2 .v2-mini-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
    .spbwc-edit-v2 .v2-mini-grid { grid-template-columns: 1fr !important; }
}

.spbwc-edit-v2 .v2-mini-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    padding: var(--nbd-space-2);
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-mini-field:focus-within {
    border-color: var(--st-brand);
    background: var(--nbd-st-bg-input);
}
.spbwc-edit-v2 .v2-mini-field__label {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--nbd-st-text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
}
.spbwc-edit-v2 .v2-mini-field input {
    width: 100% !important;
    max-width: none !important;
    padding: var(--nbd-space-1) var(--nbd-space-2) !important;
    border: 1px solid var(--st-field-border) !important;
    border-radius: var(--nbd-radius-sm) !important;
    background: var(--nbd-st-bg) !important;
    font-size: var(--st-field-font);
    color: var(--nbd-st-text);
    font-family: inherit;
    box-shadow: var(--st-field-shadow) !important;
}
.spbwc-edit-v2 .v2-mini-field input:focus {
    outline: none;
    border-color: var(--st-brand) !important;
    box-shadow: 0 0 0 2px var(--st-brand-soft) !important;
}
.spbwc-edit-v2 .v2-mini-field--wide {
    grid-column: span 2;
}
@media (max-width: 720px) {
    .spbwc-edit-v2 .v2-mini-field--wide { grid-column: span 1; }
}

/* ============================================================
   nbd-table modernize (used inside nbpb_com / pb_config)
   ============================================================ */
.spbwc-edit-v2 .nbd-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-st-bg);
}
.spbwc-edit-v2 .nbd-table {
    min-width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: var(--nbd-st-bg);
    font-size: var(--text-md);
}
.spbwc-edit-v2 .nbd-table thead th {
    background: var(--nbd-st-bg-soft);
    color: var(--nbd-st-text-soft);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: var(--font-bold);
    border: none;
    border-bottom: 1px solid var(--nbd-st-border-light);
    padding: var(--nbd-space-2) var(--nbd-space-3);
    text-align: left;
}
.spbwc-edit-v2 .nbd-table tbody td {
    border: none;
    border-bottom: 1px solid var(--nbd-st-border-subtle);
    padding: var(--nbd-space-2) var(--nbd-space-3);
    color: var(--nbd-st-text);
    vertical-align: middle;
    text-align: left;
}
/* Action column (last) — right-aligned for the delete button */
.spbwc-edit-v2 .nbd-table--views tbody td:last-child,
.spbwc-edit-v2 .nbd-table--views thead th:last-child {
    text-align: right;
}
.spbwc-edit-v2 .nbd-table--views tfoot td {
    text-align: center;
}
.spbwc-edit-v2 .nbd-table--views tfoot .button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.spbwc-edit-v2 .nbd-table--views tfoot .button .dashicons {
    font-size: var(--st-icon-sm);
    width: var(--st-icon-sm);
    height: var(--st-icon-sm);
    line-height: 1;
}
/* Helper text under tables / next to image uploads */
.spbwc-edit-v2 .v2-form-hint {
    display: block;
    margin-top: 6px;
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
    font-weight: var(--font-normal);
    font-style: italic;
    line-height: 1.4;
}
.spbwc-edit-v2 .nbd-table-wrap + .v2-form-hint,
.spbwc-edit-v2 .image-icon-wrap + .v2-form-hint {
    margin-top: 8px;
}
.spbwc-edit-v2 .nbd-table tbody tr:last-child td {
    border-bottom: none;
}
.spbwc-edit-v2 .nbd-table tbody tr:hover td {
    background: var(--nbd-st-bg-soft);
}
.spbwc-edit-v2 .nbd-table tfoot td {
    padding: var(--nbd-space-2) var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border-top: 1px solid var(--nbd-st-border-subtle);
}
.spbwc-edit-v2 .nbd-table input[type="text"],
.spbwc-edit-v2 .nbd-table input[type="number"] {
    width: 100%;
    padding: var(--nbd-space-1) var(--nbd-space-2);
    border: 1px solid var(--st-field-border);
    border-radius: var(--nbd-radius-sm);
    background: var(--st-field-bg);
    font-size: var(--st-field-font);
    font-family: inherit;
    box-shadow: var(--st-field-shadow);
}

/* ============================================================
   image-icon-wrap (designer view base / component icon / pb_config)
   Universal hover-to-reveal: red X badge hidden by default,
   appears only when the mouse is over the thumbnail.
   ============================================================ */
.spbwc-edit-v2 .image-icon-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: inline-block;
    border-radius: var(--nbd-radius-md);
    overflow: hidden;
    border: 1.5px solid var(--nbd-st-border-light);
    background: var(--nbd-st-bg-soft);
    background-image:
        linear-gradient(45deg, var(--nbd-st-border-subtle) 25%, transparent 25%),
        linear-gradient(-45deg, var(--nbd-st-border-subtle) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--nbd-st-border-subtle) 75%),
        linear-gradient(-45deg, transparent 75%, var(--nbd-st-border-subtle) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-input-inset);
}
.spbwc-edit-v2 .image-icon-wrap:hover {
    border-color: var(--st-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-brand) 14%, transparent);
}
.spbwc-edit-v2 .image-icon-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 4px !important;
    border: 0 !important;
    object-fit: contain; /* designer parts are transparent PNGs — show full image, no crop */
    box-sizing: border-box !important;
    cursor: pointer;
    display: block;
    transition: transform .25s ease;
    /* Sharp rendering for low-resolution PNGs */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Hover: pop the thumbnail out into a large preview (3x scale) so the user
   can inspect the original artwork. Anchored at the centre of the thumb
   and overlaid above neighbouring cells. */
.spbwc-edit-v2 .image-icon-wrap:hover {
    z-index: 100;
    overflow: visible;
}
/* Pop the image into a large preview to the RIGHT of the thumb so it
   doesn't cover the "Show in view" checkbox sitting above the thumb in
   the same table cell. */
.spbwc-edit-v2 .image-icon-wrap:hover img {
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    width: 240px !important;
    height: 240px !important;
    transform: none;
    background: #fff;
    border: 1px solid var(--nbd-st-border-light) !important;
    border-radius: var(--nbd-radius-md);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
    padding: 12px !important;
    z-index: 101;
}
/* Hide the dark overlay + pencil hint while the preview is up */
.spbwc-edit-v2 .image-icon-wrap:hover::before,
.spbwc-edit-v2 .image-icon-wrap:hover::after {
    display: none;
}
/* Allow the preview to overflow the table-wrap horizontal scroll container */
.spbwc-edit-v2 .nbd-table-wrap:has(.image-icon-wrap:hover) {
    overflow: visible;
}
/* Subtle dark overlay on hover — visual cue "click to change" */
.spbwc-edit-v2 .image-icon-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(1px);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
    z-index: 1;
}
.spbwc-edit-v2 .image-icon-wrap:hover::before {
    opacity: 1;
}
/* Edit hint pencil — fills most of the thumbnail on hover */
.spbwc-edit-v2 .image-icon-wrap::after {
    content: '\f464';
    font-family: dashicons;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.85);
    color: #fff;
    font-size: 40px;
    line-height: 1;
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    pointer-events: none;
    z-index: 2;
}
.spbwc-edit-v2 .image-icon-wrap:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
/* Red X delete badge — hidden by default; appears only on hover */
.spbwc-edit-v2 .image-icon-wrap .remove-image-icon {
    position: absolute;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    background: var(--nbd-color-danger);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    z-index: 3;
    opacity: 0;
    transform: scale(.8);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.spbwc-edit-v2 .image-icon-wrap:hover .remove-image-icon,
.spbwc-edit-v2 .image-icon-wrap:focus-within .remove-image-icon {
    opacity: 1;
    transform: scale(1);
}
.spbwc-edit-v2 .image-icon-wrap .remove-image-icon:hover {
    background: #b32d2e;
    transform: scale(1.1);
}

/* Designer pb_config table — labels visually grouped */
.spbwc-edit-v2 .view-config {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-1);
    padding: var(--nbd-space-1) var(--nbd-space-2);
    margin: 0 var(--nbd-space-1) var(--nbd-space-1) 0;
    background: var(--nbd-st-bg-soft);
    border-radius: var(--nbd-radius-sm);
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    cursor: pointer;
}
.spbwc-edit-v2 .view-config--image,
.spbwc-edit-v2 .view-config.view-config-image {
    display: block;
    margin-top: var(--nbd-space-1);
}


/* ============================================================
   v2 form widgets — visual replacements for legacy dropdowns
   ============================================================ */

/* Hide legacy <select> elements that have a v2 visual wrapper above.
   The select stays in the DOM for AngularJS ng-model + form name="…"
   so the legacy save handler still receives the value. */
.spbwc-edit-v2 .v2-hidden-legacy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Toggle switch (Yes/No) ────────────────────────────────── */
.spbwc-edit-v2 .v2-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--text-md);
    font-weight: var(--font-medium);
    color: var(--nbd-st-text-soft);
}
.spbwc-edit-v2 .v2-toggle input { display: none; }
.spbwc-edit-v2 .v2-toggle__track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: var(--nbd-radius-pill);
    background: var(--nbd-st-border);
    transition: var(--transition-fast);
    flex-shrink: 0;
}
.spbwc-edit-v2 .v2-toggle__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.spbwc-edit-v2 .v2-toggle input:checked + .v2-toggle__track {
    background: var(--st-brand);
}
.spbwc-edit-v2 .v2-toggle input:checked + .v2-toggle__track::after {
    transform: translateX(18px);
}
.spbwc-edit-v2 .v2-toggle input:checked ~ .v2-toggle__label {
    color: var(--st-brand);
}

/* ── Segmented control ─────────────────────────────────────── */
.spbwc-edit-v2 .v2-segmented {
    display: inline-flex;
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    padding: 3px;
    gap: 2px;
    max-width: 100%;
}
.spbwc-edit-v2 .v2-segmented--wrap {
    flex-wrap: wrap;
    border-radius: var(--nbd-radius-md);
}
.spbwc-edit-v2 .v2-segmented__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nbd-space-1);
    padding: var(--nbd-space-1) var(--nbd-space-3);
    background: transparent;
    border: none;
    border-radius: var(--nbd-radius-sm);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--nbd-st-text-soft);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
    line-height: 1.4;
    min-height: 28px;
    white-space: nowrap;
}
.spbwc-edit-v2 .v2-segmented__btn:hover {
    background: var(--nbd-st-bg-soft);
    color: var(--nbd-st-text);
}
.spbwc-edit-v2 .v2-segmented__btn.is-active {
    background: var(--st-brand);
    color: var(--nbd-st-text-inverse);
    font-weight: var(--font-semibold);
    box-shadow: var(--shadow-card);
}
.spbwc-edit-v2 .v2-segmented__btn.is-active:hover {
    background: var(--st-brand-pressed);
    color: var(--nbd-st-text-inverse);
}
.spbwc-edit-v2 .v2-segmented__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--nbd-radius-sm);
    background: var(--nbd-st-bg-soft);
    color: var(--nbd-st-text-soft);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-segmented__btn.is-active .v2-segmented__icon {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* ── Swatch type — vertical tabs layout ────────────────────
   Tabs stack vertically on the LEFT, content panel on the RIGHT.
   Used by the attribute editor (Image vs Color picker).         */
.spbwc-edit-v2 .v2-swatch-tabs {
    width: 100%;
}
.spbwc-edit-v2 .v2-swatch-tabs__layout {
    display: flex;
    gap: var(--nbd-space-4);
    align-items: flex-start;
    width: 100%;
}
.spbwc-edit-v2 .v2-swatch-tabs__nav {
    display: flex;
    flex-direction: column;
    gap: var(--nbd-space-2);
    width: 220px;
    flex-shrink: 0;
    role: tablist;
}
.spbwc-edit-v2 .v2-swatch-tabs__tab {
    display: flex;
    align-items: flex-start;
    gap: var(--nbd-space-2);
    padding: var(--nbd-space-2) var(--nbd-space-3);
    background: var(--nbd-st-bg);
    border: 1.5px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
    font-family: inherit;
    color: var(--nbd-st-text);
    position: relative;
}
.spbwc-edit-v2 .v2-swatch-tabs__tab:hover {
    border-color: var(--nbd-st-border);
    background: var(--nbd-st-bg-soft);
}
.spbwc-edit-v2 .v2-swatch-tabs__tab.is-active {
    border-color: var(--st-brand);
    background: color-mix(in srgb, var(--st-brand) 6%, var(--nbd-st-bg));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-brand) 12%, transparent);
}
.spbwc-edit-v2 .v2-swatch-tabs__tab.is-active::after {
    /* Pointer arrow on the right of the active tab → links to panel */
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    width: 10px;
    height: 10px;
    background: var(--st-brand);
    transform: translateY(-50%) rotate(45deg);
    border-radius: 2px;
    z-index: 1;
}
.spbwc-edit-v2 .v2-swatch-tabs__tab-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--nbd-radius-sm);
    background: var(--nbd-st-bg-soft);
    color: var(--nbd-st-text-soft);
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-swatch-tabs__tab-icon .dashicons {
    font-size: var(--st-icon-lg);
    width: var(--st-icon-lg);
    height: var(--st-icon-lg);
    line-height: 1;
}
.spbwc-edit-v2 .v2-swatch-tabs__tab.is-active .v2-swatch-tabs__tab-icon {
    background: var(--st-brand);
    color: #fff;
}
.spbwc-edit-v2 .v2-swatch-tabs__tab-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.spbwc-edit-v2 .v2-swatch-tabs__tab-body strong {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
    line-height: 1.2;
}
.spbwc-edit-v2 .v2-swatch-tabs__tab-body small {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
    line-height: 1.35;
    font-weight: var(--font-normal);
}
.spbwc-edit-v2 .v2-swatch-tabs__tab.is-active .v2-swatch-tabs__tab-body strong {
    color: var(--st-brand-pressed);
}
.spbwc-edit-v2 .v2-swatch-tabs__panel {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-subtle);
    border-radius: var(--nbd-radius-md);
}
/* Compact variant for sub-attribute editor */
.spbwc-edit-v2 .v2-swatch-tabs--compact .v2-swatch-tabs__nav {
    width: 180px;
}
.spbwc-edit-v2 .v2-swatch-tabs--compact .v2-swatch-tabs__tab {
    padding: 6px var(--nbd-space-2);
}
.spbwc-edit-v2 .v2-swatch-tabs--compact .v2-swatch-tabs__tab-icon {
    width: 28px;
    height: 28px;
}
.spbwc-edit-v2 .v2-swatch-tabs--compact .v2-swatch-tabs__tab-icon .dashicons {
    font-size: var(--st-icon-md);
    width: var(--st-icon-md);
    height: var(--st-icon-md);
}
/* Stack vertically on narrow screens */
@media (max-width: 720px) {
    .spbwc-edit-v2 .v2-swatch-tabs__layout {
        flex-direction: column;
    }
    .spbwc-edit-v2 .v2-swatch-tabs__nav {
        width: 100%;
        flex-direction: row;
    }
    .spbwc-edit-v2 .v2-swatch-tabs__nav .v2-swatch-tabs__tab {
        flex: 1;
    }
    .spbwc-edit-v2 .v2-swatch-tabs__tab.is-active::after {
        top: auto;
        right: 50%;
        bottom: -6px;
        transform: translateX(50%) rotate(45deg);
    }
}

/* ── Legacy swatch cards (kept for backward compat — no longer used) ── */
.spbwc-edit-v2 .v2-swatch-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nbd-space-2);
    max-width: 560px;
    margin-bottom: var(--nbd-space-3);
}
.spbwc-edit-v2 .v2-swatch-card {
    display: flex;
    align-items: flex-start;
    gap: var(--nbd-space-2);
    padding: var(--nbd-space-3);
    background: var(--nbd-st-bg);
    border: 1.5px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
    font-family: inherit;
    color: var(--nbd-st-text);
    position: relative;
}
.spbwc-edit-v2 .v2-swatch-card:hover {
    border-color: var(--nbd-st-border);
    background: var(--nbd-st-bg-soft);
}
.spbwc-edit-v2 .v2-swatch-card.is-active {
    border-color: var(--st-brand);
    background: color-mix(in srgb, var(--st-brand) 6%, var(--nbd-st-bg));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-brand) 12%, transparent);
}
.spbwc-edit-v2 .v2-swatch-card.is-active::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--st-brand);
    background-image:
        linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
    background-size: 10px 2px, 10px 2px;
    background-position: 3px 8px, 3px 8px;
    background-repeat: no-repeat;
}
.spbwc-edit-v2 .v2-swatch-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--nbd-radius-sm);
    background: var(--nbd-st-bg-soft);
    color: var(--nbd-st-text-soft);
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-swatch-card__icon .dashicons {
    font-size: var(--st-icon-lg);
    width: var(--st-icon-lg);
    height: var(--st-icon-lg);
    line-height: 1;
}
.spbwc-edit-v2 .v2-swatch-card.is-active .v2-swatch-card__icon {
    background: var(--st-brand);
    color: #fff;
}
.spbwc-edit-v2 .v2-swatch-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-right: 18px; /* leave room for the active check dot */
}
.spbwc-edit-v2 .v2-swatch-card__body strong {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
    line-height: 1.2;
}
.spbwc-edit-v2 .v2-swatch-card__body small {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
    line-height: 1.35;
    font-weight: var(--font-normal);
}
.spbwc-edit-v2 .v2-swatch-card.is-active .v2-swatch-card__body strong {
    color: var(--st-brand-pressed);
}

/* ── Image upload (hover-to-reveal: thumb-only; actions on hover) ─ */
.spbwc-edit-v2 .v2-img-upload {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-img-upload__thumb,
.spbwc-edit-v2 .nbd-attribute-img-inner.v2-img-upload__thumb,
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded .nbd-attribute-img-inner.v2-img-upload__thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--nbd-radius-md);
    overflow: hidden;
    background: var(--nbd-st-bg);
    border: 1.5px solid var(--nbd-st-border-light);
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-input-inset);
}
.spbwc-edit-v2 .v2-img-upload__thumb:hover {
    border-color: var(--st-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-brand) 14%, transparent);
}
.spbwc-edit-v2 .v2-img-upload__thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover;
    display: block;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-img-upload.is-empty .v2-img-upload__thumb {
    border-style: dashed;
    background: var(--nbd-st-bg-soft);
    box-shadow: none;
}
.spbwc-edit-v2 .v2-img-upload.is-empty .v2-img-upload__thumb img {
    opacity: 0; /* placeholder image hidden — use empty state UI instead */
}

/* Hide the legacy floating X badge inside the new upload area */
.spbwc-edit-v2 .v2-img-upload__thumb .remove-attribute-img {
    display: none !important;
}

/* Empty state: ICON fills the whole thumb (large visual placeholder).
   The "Click to upload" caption is hidden — the giant + icon IS the cue. */
.spbwc-edit-v2 .v2-img-upload__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nbd-st-text-mute);
    pointer-events: none;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-img-upload__empty .dashicons {
    font-size: 56px;
    width: 56px;
    height: 56px;
    line-height: 1;
    color: var(--nbd-st-text-mute);
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-img-upload__empty small {
    /* hidden — the giant icon alone signals "upload" */
    display: none;
}
.spbwc-edit-v2 .v2-img-upload__thumb:hover .v2-img-upload__empty {
    color: var(--st-brand-pressed);
}
.spbwc-edit-v2 .v2-img-upload__thumb:hover .v2-img-upload__empty .dashicons {
    color: var(--st-brand);
    transform: scale(1.15);
}

/* Hover overlay: dark scrim + 2 icon buttons (Replace / Remove) */
.spbwc-edit-v2 .v2-img-upload__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nbd-space-1);
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}
.spbwc-edit-v2 .v2-img-upload__thumb:hover .v2-img-upload__overlay,
.spbwc-edit-v2 .v2-img-upload__thumb:focus-within .v2-img-upload__overlay {
    opacity: 1;
    pointer-events: auto;
}
.spbwc-edit-v2 .v2-img-upload__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, .96);
    color: var(--nbd-st-text);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.spbwc-edit-v2 .v2-img-upload__icon-btn .dashicons {
    font-size: var(--st-icon-md);
    width: var(--st-icon-md);
    height: var(--st-icon-md);
    line-height: 1;
}
.spbwc-edit-v2 .v2-img-upload__icon-btn:hover {
    background: #fff;
    transform: scale(1.08);
    color: var(--st-brand-pressed);
}
.spbwc-edit-v2 .v2-img-upload__icon-btn--danger:hover {
    color: var(--nbd-color-danger);
}
.spbwc-edit-v2 .v2-img-upload__icon-btn:focus-visible {
    outline: 2px solid var(--st-brand);
    outline-offset: 2px;
}

.spbwc-edit-v2 .v2-img-upload__hint {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
    font-weight: var(--font-normal);
    line-height: 1.4;
}

/* All variants share the same 80×80 size — no compact override needed */
.spbwc-edit-v2 .nbd-subattributes-wrap .v2-swatch-cards {
    max-width: 480px;
}

@media (max-width: 720px) {
    .spbwc-edit-v2 .v2-swatch-cards {
        grid-template-columns: 1fr;
    }
}

/* ── Color picker row (with hint about second color) ─────── */
.spbwc-edit-v2 .v2-color-row {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2);
    flex-wrap: wrap;
}
.spbwc-edit-v2 .v2-color-row__hint {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
    font-weight: var(--font-normal);
    line-height: 1.3;
    flex: 1 1 100%;
    margin-top: 2px;
}

/* ── Attribute field row (label + input + hint stacked) ─────
   Internal spacing is TIGHT (label→input 6px, input→hint 4px) so the
   three elements read as ONE group. External spacing between adjacent
   v2-attr-field rows is wide (handled by parent gap) so each group is
   clearly separated from the next. */
.spbwc-edit-v2 .v2-attr-field {
    display: block;
    margin: 0;
    padding: 0;
}
.spbwc-edit-v2 .v2-attr-field > .v2-attr-section-label {
    margin: 0 0 6px;
}
.spbwc-edit-v2 .v2-attr-field__hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
    font-weight: var(--font-normal);
    font-style: italic;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
    margin: 4px 0 0;
    padding-left: 10px;
    border-left: 2px solid var(--nbd-st-border-subtle);
}
.spbwc-edit-v2 .v2-attr-section-label__opt {
    text-transform: none;
    letter-spacing: 0;
    color: var(--nbd-st-text-mute);
    font-weight: var(--font-normal);
    font-size: var(--text-xs);
    margin-left: 4px;
}

/* Subtle divider between price block and sub-attribute toggle */
.spbwc-edit-v2 .v2-attr-divider {
    height: 1px;
    background: var(--nbd-st-border-subtle);
    margin: var(--nbd-space-2) 0;
    border: 0;
}

/* Sub-attribute toggle row — bigger hit area + usage hint */
.spbwc-edit-v2 .v2-subattr-toggle {
    margin: 0;
}
.spbwc-edit-v2 .v2-subattr-toggle__label {
    display: flex;
    align-items: flex-start;
    gap: var(--nbd-space-2);
    padding: var(--nbd-space-2) var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-subtle);
    border-radius: var(--nbd-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-subattr-toggle__label:hover {
    border-color: var(--nbd-st-border);
    background: var(--nbd-st-bg);
}
.spbwc-edit-v2 .v2-subattr-toggle__label input[type="checkbox"] {
    margin: 2px 0 0 !important;
    flex-shrink: 0;
}
.spbwc-edit-v2 .v2-subattr-toggle__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}
.spbwc-edit-v2 .v2-subattr-toggle__text strong {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
}
.spbwc-edit-v2 .v2-subattr-toggle__text small {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
    font-weight: var(--font-normal);
}

/* ── Add-attribute row — block layout, button on its own line.
   Placed BELOW any previous content with clear separation. Button is
   centred + dashed-border (like a drop zone / "add new" affordance) so
   it never visually competes with the sub-attribute action buttons. */
.spbwc-edit-v2 .v2-attr-addrow {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: var(--nbd-space-4) 0 0;
    padding: var(--nbd-space-3);
    text-align: center;
    border: 1px dashed var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-st-bg-soft);
    clear: both;
}
.spbwc-edit-v2 .v2-attr-add-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--st-btn-gap);
    font-weight: var(--font-semibold);
    margin: 0 !important;
}
.spbwc-edit-v2 .v2-attr-add-btn .dashicons {
    font-size: var(--st-icon-md);
    width: var(--st-icon-md);
    height: var(--st-icon-md);
    line-height: 1;
}
.spbwc-edit-v2 .v2-attr-addrow__hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
    font-weight: var(--font-normal);
    font-style: italic;
    line-height: 1.4;
    margin: 6px 0 0;
    text-align: center;
}
.spbwc-edit-v2 .v2-attr-addrow--sub {
    margin-top: var(--nbd-space-3);
    background: var(--nbd-st-bg);
}

/* ── Display type cards (Dropdown/Radio/Swatch/Label/…) ───── */
.spbwc-edit-v2 .v2-display-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--nbd-space-2);
    max-width: 600px;
}
/* Sub-attribute variant — show use-case hint under the label */
.spbwc-edit-v2 .v2-display-cards--sub {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    max-width: none;
}
.spbwc-edit-v2 .v2-display-card__hint {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
    font-weight: var(--font-normal);
    line-height: 1.3;
    text-align: center;
    font-style: italic;
}
.spbwc-edit-v2 .v2-display-card.is-active .v2-display-card__hint {
    color: var(--st-brand-pressed);
}
.spbwc-edit-v2 .v2-display-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nbd-space-1);
    padding: var(--nbd-space-2);
    background: var(--nbd-st-bg);
    border: 1.5px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
}
.spbwc-edit-v2 .v2-display-card:hover {
    border-color: var(--nbd-st-border);
    background: var(--nbd-st-bg-soft);
}
.spbwc-edit-v2 .v2-display-card.is-active {
    border-color: var(--st-brand);
    background: var(--st-brand-tint);
}
.spbwc-edit-v2 .v2-display-card__label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text-soft);
    text-align: center;
    line-height: 1.2;
}
.spbwc-edit-v2 .v2-display-card.is-active .v2-display-card__label {
    color: var(--st-brand-pressed);
}
.spbwc-edit-v2 .v2-display-card__preview {
    display: block;
    width: 100%;
    height: 38px;
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-sm);
    position: relative;
    overflow: hidden;
}
.spbwc-edit-v2 .v2-display-card.is-active .v2-display-card__preview {
    border-color: var(--st-brand-soft);
}

/* Per-variant miniature visual */
/* Dropdown: caret in a bar */
.spbwc-edit-v2 .v2-display-card--d .v2-display-card__preview::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;
    right: 18px;
    height: 3px;
    margin-top: -1.5px;
    background: var(--nbd-st-border);
    border-radius: 1px;
}
.spbwc-edit-v2 .v2-display-card--d .v2-display-card__preview::after {
    content: "▾";
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--nbd-st-text-soft);
    line-height: 1;
}

/* Radio button: 3 dots */
.spbwc-edit-v2 .v2-display-card--r .v2-display-card__preview {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 8px;
}
.spbwc-edit-v2 .v2-display-card--r .v2-display-card__preview::before,
.spbwc-edit-v2 .v2-display-card--r .v2-display-card__preview::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--nbd-st-border);
}
.spbwc-edit-v2 .v2-display-card--r.is-active .v2-display-card__preview::before {
    border-color: var(--st-brand);
    background: var(--st-brand);
}

/* Swatch: small color tiles */
.spbwc-edit-v2 .v2-display-card--s .v2-display-card__preview {
    background: repeating-linear-gradient(
        90deg,
        var(--st-brand-soft) 0 14px,
        transparent 14px 18px,
        #fbbf24 18px 32px,
        transparent 32px 36px,
        #16a34a 36px 50px
    );
    background-size: 50px 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Label: bullet rows */
.spbwc-edit-v2 .v2-display-card--l .v2-display-card__preview {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 4px 6px;
}
.spbwc-edit-v2 .v2-display-card--l .v2-display-card__preview::before,
.spbwc-edit-v2 .v2-display-card--l .v2-display-card__preview::after {
    content: "";
    height: 4px;
    background: var(--nbd-st-border);
    border-radius: 1px;
}
.spbwc-edit-v2 .v2-display-card--l .v2-display-card__preview::before {
    width: 70%;
}
.spbwc-edit-v2 .v2-display-card--l .v2-display-card__preview::after {
    width: 50%;
}

/* Advanced Dropdown: thicker caret variant */
.spbwc-edit-v2 .v2-display-card--ad .v2-display-card__preview::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 6px;
    right: 18px;
    bottom: 8px;
    background:
        linear-gradient(var(--nbd-st-border), var(--nbd-st-border)) center / 60% 2px no-repeat,
        var(--nbd-st-bg-soft);
    border-radius: 2px;
}
.spbwc-edit-v2 .v2-display-card--ad .v2-display-card__preview::after {
    content: "▾";
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--st-brand);
    line-height: 1;
}

/* Large label: chunky chip */
.spbwc-edit-v2 .v2-display-card--xl .v2-display-card__preview {
    display: flex;
    align-items: center;
    justify-content: center;
}
.spbwc-edit-v2 .v2-display-card--xl .v2-display-card__preview::before {
    content: "";
    width: 60%;
    height: 60%;
    background: var(--nbd-st-border);
    border-radius: var(--nbd-radius-sm);
}
.spbwc-edit-v2 .v2-display-card--xl.is-active .v2-display-card__preview::before {
    background: var(--st-brand);
}


/* ============================================================
   Attribute editor (multi-choice values)
   Re-skin .nbd-attribute-wrap into a card with:
   - swatch preview (image/color) at the LEFT
   - name + description + price stacked on the RIGHT
   - drag handle + action chips at TOP-RIGHT corner
   ============================================================ */
.spbwc-edit-v2 .nbd-attribute-wrap {
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    padding: var(--nbd-space-3);
    margin-bottom: var(--nbd-space-2);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "swatch content actions"
        "extra extra extra";
    gap: var(--nbd-space-3);
    align-items: start;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .nbd-attribute-wrap:hover {
    border-color: var(--nbd-st-border);
    box-shadow: var(--shadow-card);
}

/* When expanded, switch to a vertical full-block layout so each section
   (titlebar / desc + price / swatch type / sub-attrs) spans the full card
   width with a single consistent gap between sections. */
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded {
    display: flex;
    flex-direction: column;
    gap: var(--nbd-space-4);
    padding: var(--nbd-space-4);
}
/* Content-wrap (desc + price) — generous gap between v2-attr-field rows so
   each [label/input/hint] group reads as a clear, separated section. */
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded .nbd-attribute-content-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--nbd-space-5);
    margin: 0;
    padding: 0;
}
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded > .nbd-attribute-img-wrap,
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded > .nbd-attribute-content-wrap {
    grid-area: auto;
    width: 100%;
    display: block;
}
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded > .nbd-attribute-action {
    position: absolute;
    top: var(--nbd-space-3);
    right: var(--nbd-space-3);
    z-index: 2;
}

/* Titlebar — vertically stacked: label → full-width input → Default pill.
   The card has absolute-positioned action buttons in the top-right corner,
   so we reserve right padding on the WHOLE titlebar container — every
   child (label, input, default pill) sits inside the safe zone and can
   never slide under the action buttons. */
.spbwc-edit-v2 .v2-attr-titlebar {
    width: 100%;
    box-sizing: border-box;
    padding: 0 110px 0 0;
    margin: 0;
}
.spbwc-edit-v2 .v2-attr-titlebar__label,
.spbwc-edit-v2 .v2-attr-section-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--nbd-st-text-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: var(--font-bold);
    line-height: 1.4;
    margin: 0 0 6px;
    padding: 0;
}
.spbwc-edit-v2 .v2-attr-titlebar__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--nbd-space-2);
}
.spbwc-edit-v2 .v2-attr-titlebar__input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: var(--st-field-pad) !important;
    border: 1px solid var(--st-field-border) !important;
    border-radius: var(--st-field-radius) !important;
    background: var(--st-field-bg) !important;
    font-size: var(--st-field-font);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
    font-family: inherit;
    max-width: none !important;
    flex: none;
    min-width: 0;
    box-shadow: var(--st-field-shadow) !important;
}
/* Default toggle now lives on its OWN row below the input — left-aligned
   so it reads as an explicit "mark this attribute as default" action. */
.spbwc-edit-v2 .v2-attr-titlebar__row > .v2-attr-default-toggle {
    align-self: flex-start;
}
.spbwc-edit-v2 .v2-attr-titlebar__input:focus {
    outline: none;
    border-color: var(--st-brand) !important;
    box-shadow: var(--st-field-focus-shadow) !important;
}

/* Default star toggle — pill with ★ icon */
.spbwc-edit-v2 .v2-attr-default-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--nbd-space-3);
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    cursor: pointer;
    user-select: none;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text-soft);
    transition: var(--transition-fast);
    flex-shrink: 0;
    line-height: 1.3;
}
.spbwc-edit-v2 .v2-attr-default-toggle input {
    display: none;
}
.spbwc-edit-v2 .v2-attr-default-toggle:hover {
    background: var(--nbd-st-bg-soft);
    color: var(--nbd-st-text);
}
.spbwc-edit-v2 .v2-attr-default-toggle.is-on {
    background: var(--st-pill-pending-bg);
    color: var(--st-pill-pending-text);
    border-color: var(--st-pill-pending-text);
}
.spbwc-edit-v2 .v2-attr-default-toggle__icon {
    font-size: var(--text-base);
    color: var(--nbd-st-text-mute);
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-attr-default-toggle.is-on .v2-attr-default-toggle__icon {
    color: var(--st-pill-pending-text);
}

/* Section labels merged with .v2-attr-titlebar__label above for consistency. */
/* Tighten any inner-div labels too (legacy bare divs that act as labels) */
.spbwc-edit-v2 .nbd-attribute-content-wrap > .v2-attr-section-label + .nbd-attribute-name,
.spbwc-edit-v2 .nbd-attribute-content-wrap > .v2-attr-section-label + .v2-attr-price-input {
    margin-top: 0;
    margin-bottom: var(--nbd-space-3);
}

/* Swatch (image or color) area — label spacing handled by label margin */
.spbwc-edit-v2 .nbd-attribute-img-wrap {
    grid-area: swatch;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
}
/* Section label styles unified above via .v2-attr-section-label */
/* Full-block mode: swatch type sits on its own row, image/color picker
   spans wider. */
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded .nbd-attribute-img-wrap {
    flex-direction: column;
    align-items: stretch;
}
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded .nbd-attribute-img-inner {
    width: 80px;
    height: 80px;
}
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded .nbd-attribute-color-inner {
    align-items: center;
}
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded .nbd-attribute-color-inner .nbd-color-picker {
    width: 120px !important;
    height: 40px;
}
.spbwc-edit-v2 .nbd-attribute-img-wrap select {
    width: 90px !important;
    padding: 4px var(--nbd-space-2);
    font-size: var(--text-sm);
    border-radius: var(--nbd-radius-sm);
    border: 1px solid var(--st-field-border);
    background: var(--st-field-bg);
    box-shadow: var(--st-field-shadow);
}
.spbwc-edit-v2 .nbd-attribute-img-inner {
    position: relative;
    width: 80px; height: 80px;
    border-radius: var(--nbd-radius-md);
    overflow: hidden;
    border: 1px solid var(--nbd-st-border-light);
    background: var(--nbd-st-bg-soft);
}
.spbwc-edit-v2 .nbd-attribute-img-inner img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover;
    cursor: pointer;
    display: block;
}
/* Legacy red X badge — hidden by default; appears only on hover.
   Applies to .nbd-attribute-img-inner WITHOUT the new v2-img-upload pattern
   (e.g. the secondary "Product image" inside the swatch panel). */
.spbwc-edit-v2 .nbd-attribute-img-inner {
    cursor: pointer;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .nbd-attribute-img-inner:hover {
    border-color: var(--st-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-brand) 14%, transparent);
}
.spbwc-edit-v2 .nbd-attribute-img-inner .remove-attribute-img {
    position: absolute;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    background: var(--nbd-color-danger);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    z-index: 3;
    opacity: 0;
    transform: scale(.8);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.spbwc-edit-v2 .nbd-attribute-img-inner:hover .remove-attribute-img,
.spbwc-edit-v2 .nbd-attribute-img-inner:focus-within .remove-attribute-img {
    opacity: 1;
    transform: scale(1);
}
.spbwc-edit-v2 .nbd-attribute-img-inner .remove-attribute-img:hover {
    background: #b32d2e;
    transform: scale(1.1);
}
.spbwc-edit-v2 .nbd-attribute-color-inner {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-1);
}
.spbwc-edit-v2 .nbd-attribute-color-inner .nbd-color-picker {
    width: 64px !important;
    height: 32px;
    padding: 0;
    border-radius: var(--nbd-radius-sm);
    cursor: pointer;
}
.spbwc-edit-v2 .add-color2 {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--nbd-st-bg-soft);
    color: var(--nbd-st-text-soft);
    font-weight: var(--font-bold);
    font-size: var(--text-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--nbd-st-border-light);
}
.spbwc-edit-v2 .add-color2:hover {
    background: var(--st-brand-tint);
    color: var(--st-brand-pressed);
    border-color: var(--st-brand);
}

/* Right side: content fields (name / description / price) */
.spbwc-edit-v2 .nbd-attribute-content-wrap {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: var(--nbd-space-2);
    min-width: 0;
}
.spbwc-edit-v2 .nbd-attribute-content-wrap > div:not(.nbd-attribute-name):not(.nbd-margin-10):not(hr):not(.v2-attr-field):not(.v2-attr-divider):not(.v2-subattr-toggle):not(.nbd-subattributes-wrapper):not(.nbd-enable-subattribute) {
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    font-weight: var(--font-semibold);
    margin-bottom: -4px;
}
.spbwc-edit-v2 .nbd-attribute-name {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2);
    flex-wrap: wrap;
}
.spbwc-edit-v2 .nbd-attribute-name input[type="text"] {
    flex: 1; min-width: 180px;
    padding: var(--st-field-pad);
    border: 1px solid var(--st-field-border);
    border-radius: var(--st-field-radius);
    background: var(--st-field-bg);
    font-size: var(--st-field-font);
    color: var(--nbd-st-text);
    font-family: inherit;
    box-shadow: var(--st-field-shadow);
}
.spbwc-edit-v2 .nbd-attribute-name input[type="text"]:focus {
    outline: none;
    border-color: var(--st-brand);
    box-shadow: var(--st-field-focus-shadow);
}
.spbwc-edit-v2 .nbd-attribute-name textarea {
    width: 100%;
    padding: var(--st-field-pad);
    min-height: 56px;
    border: 1px solid var(--st-field-border);
    border-radius: var(--st-field-radius);
    background: var(--st-field-bg);
    font-size: var(--st-field-font);
    color: var(--nbd-st-text);
    font-family: inherit;
    resize: vertical;
    box-shadow: var(--st-field-shadow);
}
.spbwc-edit-v2 .nbd-attribute-name label {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-1);
    padding: 4px var(--nbd-space-2);
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-pill);
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    cursor: pointer;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .nbd-attribute-name label:hover {
    background: var(--st-brand-tint);
    color: var(--st-brand-pressed);
}
.spbwc-edit-v2 .nbd-attribute-name label input[type="checkbox"] {
    margin: 0;
}
/* Reset duplicate "Additional Price" label spacing */
.spbwc-edit-v2 .nbd-attribute-content-wrap hr {
    margin: var(--nbd-space-2) 0;
    border: none;
    border-top: 1px solid var(--nbd-st-border-subtle);
}
.spbwc-edit-v2 .nbd-margin-10 { height: 0; margin: 0; }

/* Action chips (sort/delete/expand) */
.spbwc-edit-v2 .nbd-attribute-action {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
    z-index: 2;
}
/* Attribute editor mini-buttons — same polish + solid focus ring */
.spbwc-edit-v2 .nbd-attribute-action > .nbd-mini-btn,
.spbwc-edit-v2 .nbd-attribute-action > a.nbd-mini-btn {
    width: 28px !important;
    height: 28px;
    min-height: var(--st-btn-min-h-sm);
    padding: 0 !important;
    border-radius: var(--nbd-radius-sm) !important;
    border: 1px solid var(--nbd-st-border-light) !important;
    background: var(--nbd-st-bg) !important;
    color: var(--nbd-st-text-soft) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    transition: var(--transition-fast);
    margin: 0 !important;
}
.spbwc-edit-v2 .nbd-attribute-action > a.nbd-mini-btn:hover {
    background: var(--st-brand-tint) !important;
    color: var(--st-brand-pressed) !important;
    border-color: var(--st-brand) !important;
}
.spbwc-edit-v2 .nbd-attribute-action > a.nbd-mini-btn:focus,
.spbwc-edit-v2 .nbd-attribute-action > a.nbd-mini-btn:focus-visible,
.spbwc-edit-v2 .nbd-attribute-action > a.nbd-mini-btn:active {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--st-brand-soft) !important;
    border-color: var(--st-brand) !important;
}
.spbwc-edit-v2 .nbd-attribute-action > a.nbd-mini-btn[title*="elete"]:hover,
.spbwc-edit-v2 .nbd-attribute-action > a.nbd-mini-btn[title*="emove"]:hover {
    background: var(--st-pill-danger-bg) !important;
    color: var(--nbd-color-danger) !important;
    border-color: var(--nbd-color-danger) !important;
}
.spbwc-edit-v2 .nbd-attribute-action > a.nbd-mini-btn .dashicons {
    font-size: var(--st-icon-md);
    width: var(--st-icon-md);
    height: var(--st-icon-md);
    line-height: var(--st-icon-md);
}

/* Collapsed preview — legacy fallback (hidden by inline style) */
.spbwc-edit-v2 .nbd-attribute-name-preview {
    grid-area: content;
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
    align-self: center;
}

/* New collapsed attribute card — swatch + name + price + default */
.spbwc-edit-v2 .nbd-attribute-collapsed {
    grid-area: content / content / extra / actions;
    display: flex;
    align-items: center;
    gap: var(--nbd-space-3);
    min-width: 0;
}
.spbwc-edit-v2 .nbd-attribute-wrap:not(.is-expanded) {
    grid-template-areas: "swatch content actions";
}
.spbwc-edit-v2 .nbd-attribute-wrap:not(.is-expanded) .nbd-attribute-collapsed {
    grid-area: content;
}
.spbwc-edit-v2 .nbd-attribute-collapsed__swatch {
    width: 44px;
    height: 44px;
    border-radius: var(--nbd-radius-md);
    border: 1px solid var(--nbd-st-border-light);
    background-color: var(--nbd-st-bg-soft);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    /* Subtle inset shadow so empty swatches still look defined */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
    grid-area: swatch;
}
.spbwc-edit-v2 .nbd-attribute-wrap:not(.is-expanded) .nbd-attribute-img-wrap {
    display: none; /* expanded-only block */
}
.spbwc-edit-v2 .nbd-attribute-wrap.is-default {
    border-left: 3px solid var(--st-brand);
}
.spbwc-edit-v2 .nbd-attribute-collapsed__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.spbwc-edit-v2 .nbd-attribute-collapsed__name {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spbwc-edit-v2 .nbd-attribute-collapsed__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nbd-space-2);
    font-size: var(--text-xs);
    line-height: 1.4;
}
.spbwc-edit-v2 .nbd-attribute-collapsed__price {
    color: var(--nbd-color-success);
    font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .nbd-attribute-collapsed__free {
    color: var(--nbd-st-text-mute);
    font-weight: var(--font-medium);
}
.spbwc-edit-v2 .nbd-attribute-collapsed__default {
    color: var(--st-brand-pressed);
    font-weight: var(--font-bold);
    background: var(--st-brand-tint);
    padding: 1px var(--nbd-space-2);
    border-radius: var(--nbd-radius-pill);
}
.spbwc-edit-v2 .nbd-attribute-collapsed__sub {
    color: var(--st-pill-pending-text);
    background: var(--st-pill-pending-bg);
    padding: 1px var(--nbd-space-2);
    border-radius: var(--nbd-radius-pill);
    font-weight: var(--font-semibold);
}

/* Sub-attributes block (nested) */
.spbwc-edit-v2 .nbd-enable-subattribute {
    grid-area: extra;
    padding-top: var(--nbd-space-2);
    border-top: 1px dashed var(--nbd-st-border-subtle);
}
.spbwc-edit-v2 .nbd-enable-subattribute label {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-1);
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    cursor: pointer;
}
.spbwc-edit-v2 .nbd-subattributes-wrapper {
    grid-area: extra;
    padding: var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border: 1px dashed var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    margin-top: var(--nbd-space-2);
}
.spbwc-edit-v2 .nbd-subattributes-wrap {
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-sm);
    padding: var(--nbd-space-2);
    margin-bottom: var(--nbd-space-1);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--nbd-space-2);
    align-items: start;
}

/* "Add attribute" / "Add sub attribute" buttons */
.spbwc-edit-v2 .pcpb-field-info-2 a.button,
.spbwc-edit-v2 .nbd-subattributes-wrapper a.button {
    display: inline-flex;
    align-items: center;
    gap: var(--st-btn-gap);
    padding: var(--st-btn-pad-md);
    background: var(--nbd-st-bg);
    color: var(--st-brand);
    border: 1.5px dashed var(--nbd-st-border-brand);
    border-radius: var(--st-btn-radius);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
    box-shadow: none;
    line-height: 1.2;
    min-height: var(--st-btn-min-h-md);
}
.spbwc-edit-v2 .pcpb-field-info-2 a.button:hover,
.spbwc-edit-v2 .nbd-subattributes-wrapper a.button:hover {
    background: var(--st-brand-tint);
    border-style: solid;
    border-color: var(--st-brand);
    color: var(--st-brand-pressed);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}
.spbwc-edit-v2 .pcpb-field-info-2 a.button .dashicons,
.spbwc-edit-v2 .nbd-subattributes-wrapper a.button .dashicons {
    font-size: var(--st-icon-md);
    width: var(--st-icon-md);
    height: var(--st-icon-md);
    line-height: var(--st-icon-md);
}

/* Attribute price input ($ prefix + number input) */
.spbwc-edit-v2 .v2-attr-price-input {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--st-field-border);
    border-radius: var(--st-field-radius);
    background: var(--st-field-bg);
    overflow: hidden;
    max-width: 160px;
    box-shadow: var(--st-field-shadow);
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-attr-price-input:focus-within {
    border-color: var(--st-brand);
    box-shadow: var(--st-field-focus-shadow);
}
.spbwc-edit-v2 .v2-attr-price-input .v2-input-prefix {
    padding: 0 var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border-right: 1px solid var(--nbd-st-border-light);
    color: var(--nbd-st-text-soft);
    font-weight: var(--font-semibold);
    display: inline-flex;
    align-items: center;
}
.spbwc-edit-v2 .v2-attr-price-input input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    flex: 1;
    width: 100% !important;
    max-width: none !important;
    padding: var(--nbd-space-1) var(--nbd-space-2) !important;
    font-size: var(--text-md);
}
.spbwc-edit-v2 .v2-attr-price-input input:focus {
    box-shadow: none !important;
}

/* ============================================================
   Apply tab stats strip (D1)
   ============================================================ */
.spbwc-edit-v2 .v2-apply-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--nbd-space-3);
    margin-top: var(--nbd-space-4);
    padding-top: var(--nbd-space-3);
    border-top: 1px solid var(--nbd-st-border-subtle);
}
.spbwc-edit-v2 .v2-apply-stat {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-3);
    padding: var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-subtle);
    border-radius: var(--nbd-radius-md);
}
.spbwc-edit-v2 .v2-apply-stat__icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nbd-st-bg);
    border-radius: var(--nbd-radius-sm);
    border: 1px solid var(--nbd-st-border-light);
}
.spbwc-edit-v2 .v2-apply-stat strong {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--nbd-st-text);
    line-height: 1.1;
}
.spbwc-edit-v2 .v2-apply-stat small {
    display: block;
    font-size: var(--text-xs);
    color: var(--nbd-st-text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: var(--font-semibold);
    margin-top: 2px;
}

/* ============================================================
   U8 — Sub-attribute hierarchy visual nesting
   Connecting line on the left edge + indent so users see the
   parent → child relationship at a glance.
   ============================================================ */
.spbwc-edit-v2 .nbd-subattributes-wrapper {
    position: relative;
    margin-left: var(--nbd-space-4);
}
.spbwc-edit-v2 .nbd-subattributes-wrapper::before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: var(--nbd-space-3);
    left: calc(-1 * var(--nbd-space-3));
    width: 2px;
    background: var(--nbd-st-border-brand);
    border-radius: 2px;
}
.spbwc-edit-v2 .nbd-subattributes-wrap {
    position: relative;
}
/* Horizontal tick line connecting each sub-attribute card to the trunk */
.spbwc-edit-v2 .nbd-subattributes-wrap::before {
    content: "";
    position: absolute;
    top: 22px;
    left: calc(-1 * (var(--nbd-space-3) + var(--nbd-space-3)));
    width: var(--nbd-space-3);
    height: 2px;
    background: var(--nbd-st-border-brand);
    border-radius: 2px;
}

/* ============================================================
   Sub-attribute editor — vertical layout (no 3-col grid)
   Nested two levels deep, so we keep it linear for clarity:
   header row (swatch + actions) → name + default → description → price.
   ============================================================ */
.spbwc-edit-v2 .nbd-subattributes-wrapper {
    padding: var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border: 1px dashed var(--nbd-st-border-brand);
    border-radius: var(--nbd-radius-md);
    margin-top: var(--nbd-space-2);
}
.spbwc-edit-v2 .nbd-subattributes-wrapper .pcpb-field-info {
    margin-bottom: var(--nbd-space-3);
}
.spbwc-edit-v2 .nbd-subattributes-wrapper .pcpb-field-info-1 label b {
    font-size: var(--text-sm);
    color: var(--nbd-st-text);
    font-weight: var(--font-semibold);
    text-transform: none;
    letter-spacing: 0;
}
.spbwc-edit-v2 .nbd-subattributes-wrap {
    display: block;          /* OVERRIDE the legacy attribute grid */
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    padding: var(--nbd-space-3);
    margin-bottom: var(--nbd-space-2);
    box-shadow: var(--shadow-card);
    position: relative;
    grid-template-columns: none;
    grid-template-areas: none;
}
.spbwc-edit-v2 .nbd-subattributes-wrap:hover {
    border-color: var(--nbd-st-border);
}

/* Reset grid areas inherited from .nbd-attribute-wrap */
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-img-wrap,
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-content-wrap,
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-action {
    grid-area: auto;
    display: block;
    width: auto;
}

/* Top row: swatch (left) + actions (right) */
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-img-wrap {
    display: flex !important;
    align-items: center;
    gap: var(--nbd-space-2);
    margin-bottom: var(--nbd-space-3);
}
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-img-wrap > div:first-child {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: var(--font-bold);
    flex-shrink: 0;
    width: 80px;
}
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-img-inner {
    width: 48px;
    height: 48px;
}

/* Actions float top-right corner */
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-action {
    position: absolute;
    top: var(--nbd-space-2);
    right: var(--nbd-space-2);
    display: flex !important;
    gap: 2px;
    z-index: 2;
}

/* Content fields stack vertically — scoped to .is-expanded so Angular's
   ng-show="sop.isExpand" can hide the block when collapsed. Without
   .is-expanded scope, the !important display would override ng-show's
   display:none and keep Description/Price visible after collapsing. */
.spbwc-edit-v2 .nbd-subattributes-wrap.is-expanded > .nbd-attribute-content-wrap {
    display: flex !important;
    flex-direction: column;
    gap: var(--nbd-space-2);
}
/* Label lines (bare <div> in the legacy template) — excludes v2-attr-field
   so the v2 structured rows (with their OWN label + hint styling) are not
   force-uppercased. */
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-content-wrap > div:not(.nbd-attribute-name):not(.nbd-margin-10):not(.v2-attr-price-input):not(.v2-attr-field):not(.v2-attr-divider):not(.v2-subattr-toggle):not(.nbd-subattributes-wrapper):not(.nbd-enable-subattribute):not(hr) {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: var(--font-bold);
    margin: 0;
    line-height: 1.4;
}
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-name {
    margin: 0;
}
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-name input[type="text"] {
    width: 100%;
    padding: var(--st-field-pad);
    border: 1px solid var(--st-field-border);
    border-radius: var(--st-field-radius);
    background: var(--st-field-bg);
    font-size: var(--st-field-font);
    color: var(--nbd-st-text);
    font-family: inherit;
    box-shadow: var(--st-field-shadow);
}
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-name textarea {
    width: 100%;
    min-height: 50px;
    padding: var(--st-field-pad);
    border: 1px solid var(--st-field-border);
    border-radius: var(--st-field-radius);
    background: var(--st-field-bg);
    font-size: var(--text-sm);
    font-family: inherit;
    resize: vertical;
    box-shadow: var(--st-field-shadow);
}
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-color-inner .nbd-color-picker {
    width: 48px !important;
    height: 28px;
}

/* When sub-attribute is expanded → vertical full-block, compact */
.spbwc-edit-v2 .nbd-subattributes-wrap.is-expanded {
    display: flex;
    flex-direction: column;
    gap: var(--nbd-space-3);
    padding: var(--nbd-space-3) var(--nbd-space-4);
}

/* Swatch type row — stack vertically inside expanded sub-attribute so the
   new v2-swatch-cards (2 radio cards) + v2-img-upload (thumb + actions) fit
   without colliding. Compact sizing handled in the v2-swatch-cards block. */
.spbwc-edit-v2 .nbd-subattributes-wrap.is-expanded > .nbd-attribute-img-wrap {
    display: flex !important;
    flex-direction: column;
    gap: var(--nbd-space-2);
    margin: 0;
}
.spbwc-edit-v2 .nbd-subattributes-wrap.is-expanded .nbd-attribute-color-inner .nbd-color-picker {
    width: 100px !important;
    height: 36px;
}

.spbwc-edit-v2 .nbd-subattributes-wrap.is-default {
    border-left: 3px solid var(--st-brand);
    padding-left: calc(var(--nbd-space-4) - 2px);
}
/* Sub-attribute label respects the parent .v2-attr-titlebar right padding — no double-pad */

/* CRITICAL: override the max-width: 460px from .pcpb-field-info-2 so
   the textarea + price input inside a sub-attribute use the FULL card
   width. The deep nesting causes the legacy cap to bite. */
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-name,
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded .nbd-attribute-name {
    display: block !important;
    width: 100%;
}
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-name input[type="text"],
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-name textarea,
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded .nbd-attribute-content-wrap .nbd-attribute-name input[type="text"],
.spbwc-edit-v2 .nbd-attribute-wrap.is-expanded .nbd-attribute-content-wrap .nbd-attribute-name textarea {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* Legacy bare-<div> label rule — excludes v2-attr-field/divider/subattr-toggle
   so structured v2 rows are not force-uppercased. */
.spbwc-edit-v2 .nbd-subattributes-wrap .nbd-attribute-content-wrap > div:not(.nbd-attribute-name):not(.nbd-margin-10):not(.v2-attr-price-input):not(.v2-attr-section-label):not(.v2-attr-field):not(.v2-attr-divider):not(.v2-subattr-toggle):not(.nbd-subattributes-wrapper):not(.nbd-enable-subattribute):not(hr) {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: var(--font-bold);
    margin: 0;
    line-height: 1.4;
}

/* Attributes section intro — just help text (no bold label,
   the section header above already says "ATTRIBUTES") */
.spbwc-edit-v2 .v2-attrs-intro {
    margin-bottom: var(--nbd-space-3);
}
.spbwc-edit-v2 .v2-attrs-intro .v2-form-help {
    margin: 0;
}

/* Color picker visual polish — show real color in the trigger */
.spbwc-edit-v2 .nbd-attribute-color-inner {
    gap: var(--nbd-space-2);
}
.spbwc-edit-v2 .sp-replacer {
    border: 1px solid var(--nbd-st-border-light) !important;
    border-radius: var(--nbd-radius-md) !important;
    padding: 3px !important;
    background: var(--nbd-st-bg-input) !important;
    box-shadow: var(--shadow-input-inset) !important;
    height: 36px !important;
}
.spbwc-edit-v2 .sp-replacer:hover,
.spbwc-edit-v2 .sp-replacer.sp-active {
    border-color: var(--st-brand) !important;
    box-shadow: var(--shadow-input-focus) !important;
}
.spbwc-edit-v2 .sp-preview {
    border-radius: var(--nbd-radius-sm) !important;
    border-color: var(--nbd-st-border-light) !important;
    min-width: 64px;
}
.spbwc-edit-v2 .sp-dd { color: var(--nbd-st-text-soft) !important; }

/* Default radio/checkbox styling improvement */
.spbwc-edit-v2 .nbd-attribute-name label input[type="checkbox"]:checked + * {
    color: var(--st-brand-pressed);
    font-weight: var(--font-semibold);
}

/* "Clear All Fields" + "Add Field" action bar below the field list */
.spbwc-edit-v2 .pcpb-fields-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nbd-space-3);
    margin-top: var(--nbd-space-4);
    padding-top: var(--nbd-space-4);
    border-top: 1px dashed var(--nbd-st-border-light);
}
.spbwc-edit-v2 .pcpb-fields-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--st-btn-gap);
    padding: var(--st-btn-pad-lg);
    font-size: var(--st-btn-font-md);
    font-weight: var(--font-semibold);
    border-radius: var(--st-btn-radius);
    text-decoration: none;
    transition: var(--transition-fast);
    cursor: pointer;
    box-shadow: none;
    height: auto;
    min-height: var(--st-btn-min-h-lg);
    line-height: 1.2;
    white-space: nowrap;
}
.spbwc-edit-v2 .pcpb-fields-actions .button .dashicons {
    font-size: var(--st-icon-lg);
    width: var(--st-icon-lg);
    height: var(--st-icon-lg);
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
}
.spbwc-edit-v2 .pcpb-fields-actions__clear {
    background: var(--nbd-st-bg);
    color: var(--nbd-color-danger);
    border: 1px solid var(--st-pill-danger-bg);
}
.spbwc-edit-v2 .pcpb-fields-actions__clear:hover {
    background: var(--st-pill-danger-bg);
    color: var(--st-pill-danger-text);
    border-color: var(--nbd-color-danger);
}
.spbwc-edit-v2 .pcpb-fields-actions__add {
    background: var(--st-brand);
    color: var(--nbd-st-text-inverse);
    border: 1px solid var(--st-brand);
    box-shadow: var(--shadow-card);
}
.spbwc-edit-v2 .pcpb-fields-actions__add:hover {
    background: var(--st-brand-pressed);
    border-color: var(--st-brand-pressed);
    color: var(--nbd-st-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}

/* ============================================================
   Quantity Breaks card (option-level)
   ============================================================ */
.spbwc-edit-v2 .v2-qty-card .v2-card__head { gap: var(--nbd-space-3); }

.spbwc-edit-v2 .v2-qty-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--nbd-space-4);
    margin-bottom: var(--nbd-space-3);
}
.spbwc-edit-v2 .v2-qty-grid--minmax {
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 760px) {
    .spbwc-edit-v2 .v2-qty-grid,
    .spbwc-edit-v2 .v2-qty-grid--minmax { grid-template-columns: 1fr; }
}

/* Switch (used in Qty card header) */
.spbwc-edit-v2 .v2-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-2);
    cursor: pointer;
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text-soft);
}
.spbwc-edit-v2 .v2-switch input { display: none; }
.spbwc-edit-v2 .v2-switch__track {
    width: 36px; height: 20px;
    border-radius: var(--nbd-radius-pill);
    background: var(--nbd-st-border);
    position: relative;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-switch__track::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: var(--transition-fast);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.spbwc-edit-v2 .v2-switch input:checked + .v2-switch__track {
    background: var(--st-brand);
}
.spbwc-edit-v2 .v2-switch input:checked + .v2-switch__track::after {
    transform: translateX(16px);
}
.spbwc-edit-v2 .v2-switch input:checked ~ .v2-switch__label {
    color: var(--st-brand);
}

/* Radio cards (Tier cards / Dropdown / Stepper) */
.spbwc-edit-v2 .v2-radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--nbd-space-2);
}
.spbwc-edit-v2 .v2-radio-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--nbd-space-3);
    background: var(--nbd-st-bg);
    border: 1.5px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    line-height: 1.3;
}
.spbwc-edit-v2 .v2-radio-card:hover {
    border-color: var(--nbd-st-border);
    background: var(--nbd-st-bg-soft);
}
.spbwc-edit-v2 .v2-radio-card.is-active {
    border-color: var(--st-brand);
    background: var(--st-brand-tint);
}
.spbwc-edit-v2 .v2-radio-card input[type="radio"] { display: none; }
.spbwc-edit-v2 .v2-radio-card strong {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
}
.spbwc-edit-v2 .v2-radio-card.is-active strong {
    color: var(--st-brand-pressed);
}
.spbwc-edit-v2 .v2-radio-card small {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-soft);
}

/* Display-mode radio cards with miniature preview visuals — premium look.
   Spacing is generous between cards so the active glow ring doesn't
   visually bleed into neighbouring cards. Visual is FLAT (no separate
   inner frame) so it reads as part of the card, not a floating layer. */
.spbwc-edit-v2 .v2-radio-cards--mode {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--nbd-space-4);
    max-width: 760px;
    align-items: stretch;
}
.spbwc-edit-v2 .v2-radio-cards--mode .v2-radio-card {
    padding: var(--nbd-space-4);
    align-items: stretch;
    gap: var(--nbd-space-2);
    text-align: left;
    border-radius: var(--nbd-radius-md);
    position: relative;
    background: var(--nbd-st-bg);
    border-width: 1.5px;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-radio-cards--mode .v2-radio-card:hover {
    border-color: var(--nbd-st-border);
    box-shadow: var(--shadow-card);
}
.spbwc-edit-v2 .v2-radio-cards--mode .v2-radio-card.is-active {
    border-color: var(--st-brand);
    background: var(--st-brand-tint);
    box-shadow: none;
}
/* Active checkmark badge */
.spbwc-edit-v2 .v2-radio-cards--mode .v2-radio-card.is-active::after {
    content: '\f147'; /* dashicons-yes */
    font-family: dashicons;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    background: var(--st-brand);
    color: #fff;
    font-size: 16px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    z-index: 2;
}
/* Visual preview area — flat, no border / no inset shadow, just a soft tile */
.spbwc-edit-v2 .v2-radio-card__visual {
    display: block;
    width: 100%;
    height: 64px;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    position: relative;
    overflow: visible;
    box-shadow: none;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-radio-cards--mode .v2-radio-card strong {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
    line-height: 1.3;
}
.spbwc-edit-v2 .v2-radio-cards--mode .v2-radio-card.is-active strong {
    color: var(--st-brand-pressed);
}
.spbwc-edit-v2 .v2-radio-cards--mode .v2-radio-card small {
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--nbd-st-text-soft);
    font-weight: var(--font-normal);
}
.spbwc-edit-v2 .v2-radio-card.is-active .v2-radio-card__visual {
    background: transparent;
    border-color: transparent;
}

/* Sections visual: 3 horizontal stacked bars (varying widths for realism) */
.spbwc-edit-v2 .v2-radio-card__visual--sections {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 0;
}
.spbwc-edit-v2 .v2-radio-card__visual--sections span {
    display: block;
    height: 8px;
    background: var(--nbd-st-border);
    border-radius: 3px;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-radio-card__visual--sections span:nth-child(1) { width: 92%; }
.spbwc-edit-v2 .v2-radio-card__visual--sections span:nth-child(2) { width: 75%; }
.spbwc-edit-v2 .v2-radio-card__visual--sections span:nth-child(3) { width: 60%; }
.spbwc-edit-v2 .v2-radio-card.is-active .v2-radio-card__visual--sections span {
    background: var(--st-brand);
}

/* Matrix visual: 2x4 grid of cells, one highlighted */
.spbwc-edit-v2 .v2-radio-card__visual--matrix {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
    padding: 0;
}
.spbwc-edit-v2 .v2-radio-card__visual--matrix span {
    background: var(--nbd-st-border);
    border-radius: 2px;
    transition: var(--transition-fast);
}
/* Highlight one cell to signal "pick a combo" */
.spbwc-edit-v2 .v2-radio-card__visual--matrix span:nth-child(6) {
    background: var(--nbd-st-text-soft);
}
.spbwc-edit-v2 .v2-radio-card.is-active .v2-radio-card__visual--matrix span {
    background: color-mix(in srgb, var(--st-brand) 35%, var(--nbd-st-bg));
}
.spbwc-edit-v2 .v2-radio-card.is-active .v2-radio-card__visual--matrix span:nth-child(6) {
    background: var(--st-brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-brand) 22%, transparent);
}

/* Stepper visual: 3 dots connected, first one active */
.spbwc-edit-v2 .v2-radio-card__visual--stepper {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
}
.spbwc-edit-v2 .v2-radio-card__visual--stepper .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--nbd-st-border);
    flex-shrink: 0;
    transition: var(--transition-fast);
    position: relative;
}
.spbwc-edit-v2 .v2-radio-card__visual--stepper .dot.is-active {
    background: var(--nbd-st-border-strong);
    transform: scale(1.15);
}
.spbwc-edit-v2 .v2-radio-card.is-active .v2-radio-card__visual--stepper .dot {
    background: color-mix(in srgb, var(--st-brand) 30%, var(--nbd-st-bg));
}
.spbwc-edit-v2 .v2-radio-card.is-active .v2-radio-card__visual--stepper .dot.is-active {
    background: var(--st-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-brand) 22%, transparent);
}
.spbwc-edit-v2 .v2-radio-card__visual--stepper .line {
    flex: 1;
    height: 2px;
    background: var(--nbd-st-border);
}
.spbwc-edit-v2 .v2-radio-card.is-active .v2-radio-card__visual--stepper .line {
    background: color-mix(in srgb, var(--st-brand) 30%, var(--nbd-st-bg));
}

/* Responsive: stack on narrow screens */
@media (max-width: 540px) {
    .spbwc-edit-v2 .v2-radio-cards--mode {
        grid-template-columns: 1fr;
    }
}

/* Quantity breaks table */
.spbwc-edit-v2 .v2-qty-breaks {
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    overflow: hidden;
    background: var(--nbd-st-bg);
}
.spbwc-edit-v2 .v2-qty-break {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 32px;
    gap: var(--nbd-space-3);
    align-items: center;
    padding: var(--nbd-space-2) var(--nbd-space-3);
    border-bottom: 1px solid var(--nbd-st-border-subtle);
}
.spbwc-edit-v2 .v2-qty-break:last-child { border-bottom: none; }
.spbwc-edit-v2 .v2-qty-break--head {
    background: var(--nbd-st-bg-soft);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: var(--font-bold);
    color: var(--nbd-st-text-soft);
}
.spbwc-edit-v2 .v2-qty-break > div {
    display: flex; align-items: center; gap: var(--nbd-space-1);
    min-width: 0;
}
.spbwc-edit-v2 .v2-qty-break input.v2-input {
    width: 100%;
    max-width: 140px;
    padding: var(--nbd-space-1) var(--nbd-space-2);
}
.spbwc-edit-v2 .v2-qty-break__prefix,
.spbwc-edit-v2 .v2-qty-break__suffix {
    font-size: var(--text-base);
    color: var(--nbd-st-text-soft);
    font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .v2-qty-break__default label {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-1);
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    cursor: pointer;
}
.spbwc-edit-v2 .v2-qty-break__default input[type="radio"]:checked + * {
    color: var(--st-brand-pressed);
    font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .v2-qty-break__remove {
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    color: var(--nbd-st-text-mute);
    cursor: pointer;
    border-radius: var(--nbd-radius-sm);
    font-family: inherit;
    font-size: var(--text-md);
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-qty-break__remove:hover {
    background: var(--st-pill-danger-bg);
    color: var(--nbd-color-danger);
}
.spbwc-edit-v2 .v2-qty-break-empty {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2);
    padding: var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border: 1px dashed var(--nbd-st-border);
    border-radius: var(--nbd-radius-md);
    color: var(--nbd-st-text-soft);
    font-size: var(--text-sm);
    font-style: italic;
}
.spbwc-edit-v2 .v2-qty-break-empty__icon {
    font-size: var(--text-2xl);
    color: var(--nbd-st-text-mute);
    font-style: normal;
}

/* ============================================================
   Designer tab — canvas views grid
   ============================================================ */
.spbwc-edit-v2 .v2-designer-empty {
    text-align: center;
    padding: var(--nbd-space-8) var(--nbd-space-4);
    background: var(--nbd-st-bg-soft);
    border: 1px dashed var(--nbd-st-border);
    border-radius: var(--nbd-radius-md);
}
.spbwc-edit-v2 .v2-designer-empty__icon {
    font-size: 48px;
    display: block;
    opacity: .5;
    margin-bottom: var(--nbd-space-3);
}
.spbwc-edit-v2 .v2-designer-empty__title {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--nbd-st-text);
    margin: 0 0 var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-designer-empty__body {
    font-size: var(--text-base);
    color: var(--nbd-st-text-soft);
    max-width: 460px;
    margin: 0 auto var(--nbd-space-4);
}

.spbwc-edit-v2 .v2-views-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--nbd-space-3);
    margin-bottom: var(--nbd-space-5);
}

.spbwc-edit-v2 .v2-view-card {
    position: relative;
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    overflow: hidden;
    transition: var(--transition-card);
    display: flex;
    flex-direction: column;
}
.spbwc-edit-v2 .v2-view-card:hover {
    border-color: var(--nbd-st-border);
    box-shadow: var(--shadow-card);
}

.spbwc-edit-v2 .v2-view-card__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--nbd-st-bg-soft);
    background-image:
        linear-gradient(45deg, var(--nbd-st-border-subtle) 25%, transparent 25%),
        linear-gradient(-45deg, var(--nbd-st-border-subtle) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--nbd-st-border-subtle) 75%),
        linear-gradient(-45deg, transparent 75%, var(--nbd-st-border-subtle) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    cursor: pointer;
    overflow: hidden;
}
.spbwc-edit-v2 .v2-view-card__thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.spbwc-edit-v2 .v2-view-card__placeholder {
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--nbd-space-1);
    color: var(--nbd-st-text-soft);
    font-size: var(--text-base);
}
.spbwc-edit-v2 .v2-view-card__placeholder span {
    font-size: 36px;
    opacity: .5;
}
.spbwc-edit-v2 .v2-view-card__placeholder small {
    font-size: var(--text-sm);
    padding: 0 var(--nbd-space-2);
    text-align: center;
}
.spbwc-edit-v2 .v2-view-card__edit-btn {
    position: absolute;
    bottom: var(--nbd-space-2);
    right: var(--nbd-space-2);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--nbd-st-border-light);
    color: var(--nbd-st-text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    z-index: 1;
}
.spbwc-edit-v2 .v2-view-card__edit-btn:hover {
    background: var(--st-brand);
    color: #fff;
    border-color: var(--st-brand);
}

.spbwc-edit-v2 .v2-view-card__body {
    padding: var(--nbd-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--nbd-space-2);
}
.spbwc-edit-v2 .v2-view-card__name {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .v2-view-card__dims {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-1);
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
}
.spbwc-edit-v2 .v2-view-card__dims label {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-1);
    flex: 1;
}
.spbwc-edit-v2 .v2-view-card__dims label > span {
    width: 14px;
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text-mute);
}
.spbwc-edit-v2 .v2-view-card__dims input.v2-input {
    padding: var(--nbd-space-1) var(--nbd-space-2);
    font-size: var(--text-sm);
}
.spbwc-edit-v2 .v2-view-card__times {
    color: var(--nbd-st-text-mute);
    font-weight: var(--font-semibold);
}
.spbwc-edit-v2 .v2-view-card__remove {
    position: absolute;
    top: var(--nbd-space-2);
    right: var(--nbd-space-2);
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--nbd-st-border-light);
    color: var(--nbd-color-danger);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-md);
    line-height: 1;
    z-index: 2;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-view-card__remove:hover {
    background: var(--nbd-color-danger);
    color: #fff;
}

/* Add-view tile */
.spbwc-edit-v2 .v2-view-card--add {
    background: var(--nbd-st-bg);
    border: 2px dashed var(--nbd-st-border);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--nbd-space-1);
    min-height: 200px;
    color: var(--nbd-st-text-soft);
    font-family: inherit;
    transition: var(--transition-fast);
}
.spbwc-edit-v2 .v2-view-card--add:hover {
    background: var(--st-brand-tint);
    border-color: var(--st-brand);
    color: var(--st-brand-pressed);
}
.spbwc-edit-v2 .v2-view-card__plus {
    font-size: 36px;
    line-height: 1;
    color: var(--st-brand);
}
.spbwc-edit-v2 .v2-view-card--add strong {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
}
.spbwc-edit-v2 .v2-view-card--add small {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
}

.spbwc-edit-v2 .v2-designer-actions {
    margin-top: var(--nbd-space-4);
}

/* Onboarding quick-start cards — shown when the option has no real fields yet */
.spbwc-edit-v2 .v2-onboarding {
    background: var(--nbd-st-bg);
    border: 1px dashed var(--nbd-st-border);
    border-radius: var(--nbd-radius-lg);
    padding: var(--nbd-space-4);
    margin-bottom: var(--nbd-space-4);
}
.spbwc-edit-v2 .v2-onboarding__title {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--nbd-st-text);
    margin: 0 0 var(--nbd-space-1);
}
.spbwc-edit-v2 .v2-onboarding__sub {
    font-size: var(--text-base);
    color: var(--nbd-st-text-soft);
    margin: 0 0 var(--nbd-space-4);
}
.spbwc-edit-v2 .v2-onboarding__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nbd-space-3);
}
.spbwc-edit-v2 .v2-onboarding__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nbd-space-1);
    padding: var(--nbd-space-3);
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
    text-align: left;
}
.spbwc-edit-v2 .v2-onboarding__card:hover {
    background: var(--st-brand-tint);
    border-color: var(--st-brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}
.spbwc-edit-v2 .v2-onboarding__card-icon {
    width: 36px; height: 36px;
    border-radius: var(--nbd-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--text-xl);
    margin-bottom: var(--nbd-space-1);
}
/* Indigo upload-action accent — matches v2-chip__icon--u (tertiary palette) */
.spbwc-edit-v2 .v2-onboarding__card-icon--upload {
    background: #e0e7ff;
    color: #3730a3;
}
.spbwc-edit-v2 .v2-onboarding__card strong {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
}
.spbwc-edit-v2 .v2-onboarding__card small {
    font-size: var(--text-sm);
    color: var(--nbd-st-text-soft);
    line-height: 1.4;
}
.spbwc-edit-v2 .v2-onboarding__card:hover small {
    color: var(--st-brand-pressed);
}

/* "What this field does" help banner — injected by JS into every expanded field card */
.spbwc-edit-v2 .v2-field-help {
    display: flex;
    gap: var(--nbd-space-3);
    padding: var(--nbd-space-3) var(--nbd-space-4);
    margin-bottom: var(--nbd-space-3);
    background: var(--st-brand-tint);
    border: 1px solid var(--nbd-st-border-brand);
    border-radius: var(--nbd-radius-md);
}
.spbwc-edit-v2 .v2-field-help__icon {
    font-size: var(--text-xl);
    line-height: 1.2;
    flex-shrink: 0;
}
.spbwc-edit-v2 .v2-field-help__title {
    margin: 0 0 var(--nbd-space-1);
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    color: var(--st-brand-pressed);
}
.spbwc-edit-v2 .v2-field-help__body {
    margin: 0 0 var(--nbd-space-1);
    font-size: var(--text-base);
    color: var(--st-brand-pressed);
    line-height: 1.5;
}
.spbwc-edit-v2 .v2-field-help__example {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--st-brand-pressed);
    opacity: .8;
    font-style: italic;
}

/* Hint banner */
.spbwc-edit-v2 .v2-hint {
    padding: var(--nbd-space-3);
    background: var(--st-accent-soft);
    border: 1px solid var(--st-accent);
    border-radius: var(--nbd-radius-md);
    font-size: var(--text-base);
    color: #854d0e;
    display: flex; gap: var(--nbd-space-2);
    margin-bottom: var(--nbd-space-4);
}
.spbwc-edit-v2 .v2-hint__icon { font-size: var(--text-lg); }

/* ============================================================
   Sticky save bar at bottom — frosted, two-column layout
   ============================================================ */

.spbwc-edit-v2 .v2-savebar {
    position: sticky;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    margin: var(--nbd-space-5) 0 0;
    padding: var(--nbd-space-3) var(--nbd-space-4);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nbd-space-3);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, .08);
    z-index: 50;
}
.spbwc-edit-v2 .v2-savebar__left {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-3);
    flex: 1 1 auto;
    min-width: 0;
}
.spbwc-edit-v2 .v2-savebar__right {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-2);
    flex-shrink: 0;
}
.spbwc-edit-v2 .v2-savebar__hint {
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.spbwc-edit-v2 .v2-savebar__hint kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-light);
    border-bottom-width: 2px;
    border-radius: var(--nbd-radius-sm);
    font-family: var(--st-font-sans);
    font-size: 10px;
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text-soft);
    line-height: 1.4;
}
.spbwc-edit-v2 .v2-savebar__primary {
    box-shadow: var(--shadow-card);
    font-weight: var(--font-bold);
    min-width: 120px;
    justify-content: center;
}
.spbwc-edit-v2 .v2-savebar__primary:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
.spbwc-edit-v2 .v2-savebar__right .v2-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--st-btn-gap);
}
.spbwc-edit-v2 .v2-savebar__right .v2-btn .dashicons {
    font-size: var(--st-icon-sm);
    width: var(--st-icon-sm);
    height: var(--st-icon-sm);
    line-height: var(--st-icon-sm);
}
.spbwc-edit-v2 .v2-savebar__status {
    font-size: var(--text-base);
    color: var(--nbd-st-text-soft);
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Narrow screens: hide the keyboard hint to make room for buttons */
@media (max-width: 900px) {
    .spbwc-edit-v2 .v2-savebar__hint { display: none; }
}
@media (max-width: 640px) {
    .spbwc-edit-v2 .v2-savebar {
        flex-wrap: wrap;
        padding: var(--nbd-space-2) var(--nbd-space-3);
        gap: var(--nbd-space-2);
    }
    .spbwc-edit-v2 .v2-savebar__left,
    .spbwc-edit-v2 .v2-savebar__right {
        width: 100%;
        justify-content: space-between;
    }
}
.spbwc-edit-v2 .v2-savebar__status strong { color: var(--nbd-color-success); }

/* Dirty / clean state: small dot indicator before the status text */
.spbwc-edit-v2 .v2-savebar__status::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--nbd-st-text-mute);
    flex-shrink: 0;
    transition: background-color .2s, box-shadow .2s;
}
.spbwc-edit-v2 .v2-savebar__status.is-clean::before {
    background: var(--nbd-color-success);
}
.spbwc-edit-v2 .v2-savebar__status.is-dirty::before {
    background: var(--nbd-color-warning);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .18);
    animation: spbwcDirtyPulse 1.6s ease-in-out infinite;
}
.spbwc-edit-v2 .v2-savebar__status.is-dirty {
    color: var(--nbd-color-warning);
    font-weight: var(--font-semibold);
}
@keyframes spbwcDirtyPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

.spbwc-edit-v2 .v2-btn {
    display: inline-flex; align-items: center; gap: var(--st-btn-gap);
    padding: var(--st-btn-pad-md);
    border-radius: var(--st-btn-radius);
    font-size: var(--st-btn-font-md); font-weight: var(--font-semibold);
    cursor: pointer; border: 1px solid transparent;
    transition: var(--transition-fast);
    text-decoration: none; white-space: nowrap;
    font-family: inherit;
}
.spbwc-edit-v2 .v2-btn--primary {
    background: var(--st-brand); color: #fff; border-color: var(--st-brand);
}
.spbwc-edit-v2 .v2-btn--primary:hover {
    background: var(--st-brand-pressed); border-color: var(--st-brand-pressed);
}
.spbwc-edit-v2 .v2-btn--primary[disabled],
.spbwc-edit-v2 .v2-btn--primary.is-disabled {
    opacity: .5; cursor: not-allowed;
}
.spbwc-edit-v2 .v2-btn--secondary {
    background: var(--nbd-st-bg);
    color: var(--nbd-st-text);
    border-color: var(--nbd-st-border-light);
}
.spbwc-edit-v2 .v2-btn--secondary:hover {
    background: var(--nbd-st-bg-soft);
    border-color: var(--nbd-st-border);
}
.spbwc-edit-v2 .v2-btn--danger-link {
    background: transparent;
    color: var(--nbd-color-danger);
    border: none;
    padding: var(--nbd-space-1) var(--nbd-space-2);
}
.spbwc-edit-v2 .v2-btn--danger-link:hover { text-decoration: underline; }

/* Product chips inside Apply tab */
.spbwc-edit-v2 .v2-product-list {
    display: flex; flex-wrap: wrap;
    gap: var(--nbd-space-1);
    margin-top: var(--nbd-space-2);
}

/* Force select2 (wc-product-search) match v2 look */
.spbwc-edit-v2 .select2-container .select2-selection--multiple {
    min-height: 40px;
    border-radius: var(--st-field-radius);
    border-color: var(--st-field-border);
}

/* Notice for max input vars */
.spbwc-edit-v2 #notice-max-input-vars {
    border: 1px solid var(--nbd-color-danger);
    border-radius: var(--nbd-radius-md);
    margin-bottom: var(--nbd-space-4);
    background: var(--nbd-st-bg);
}
.spbwc-edit-v2 #notice-max-input-vars h2 {
    background: var(--st-pill-danger-bg);
    color: var(--st-pill-danger-text);
    margin: 0;
    padding: var(--nbd-space-2) var(--nbd-space-3);
    border-radius: var(--nbd-radius-md) var(--nbd-radius-md) 0 0;
    border-bottom: none !important;
}
.spbwc-edit-v2 #notice-max-input-vars .inside {
    padding: var(--nbd-space-3);
}


/* ============================================================
   Toast (AJAX save feedback on edit page)
   ============================================================ */
.spbwc-edit-v2-toast {
    position: fixed;
    bottom: 84px; /* clears the savebar */
    right: var(--nbd-space-4);
    z-index: 9999;
    min-width: 220px;
    max-width: 360px;
    padding: var(--nbd-space-3) var(--nbd-space-4);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-st-text);
    color: var(--nbd-st-text-inverse);
    box-shadow: var(--shadow-card-hover);
    font-size: var(--text-md);
    font-weight: var(--font-medium);
    line-height: 1.4;
    animation: spbwcToastIn .25s ease;
}
.spbwc-edit-v2-toast.is-success {
    background: var(--nbd-color-success);
}
.spbwc-edit-v2-toast.is-error {
    background: var(--nbd-color-danger);
}
.spbwc-edit-v2-toast.is-info {
    background: var(--st-brand-pressed);
}
@keyframes spbwcToastIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ▓▓  LIST PAGE  ▓▓
   Scoped under .spbwc-options-page (the list view wrapper).
   ============================================================ */

/* SVG composite thumbnail — card view */
.spbwc-options-page .spbwc-option-card__thumb--svg {
    background: var(--nbd-st-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--nbd-space-2);
    border-radius: var(--nbd-radius-md) var(--nbd-radius-md) 0 0;
}
.spbwc-options-page .spbwc-option-card__thumb--svg svg {
    width: 100%;
    height: auto;
    max-width: 96px;
    max-height: 96px;
    display: block;
}

/* SVG composite thumbnail — list view (WP_List_Table column) */
.spbwc-options-page .spbwc-option-thumb--svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--nbd-st-bg-soft);
    border-radius: var(--nbd-radius-md);
    margin-right: var(--nbd-space-2);
    vertical-align: middle;
    overflow: hidden;
    flex-shrink: 0;
}
.spbwc-options-page .spbwc-option-thumb--svg svg {
    width: 36px;
    height: 36px;
    display: block;
}

/* Loading state on block view during AJAX */
.spbwc-options-page .spbwc-block-view.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.55;
    transition: opacity .15s ease;
}
.spbwc-options-page .spbwc-block-view.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--nbd-st-border-light);
    border-top-color: var(--st-brand);
    border-radius: 50%;
    animation: spbwcSpin .8s linear infinite;
    pointer-events: none;
}
@keyframes spbwcSpin {
    to { transform: rotate(360deg); }
}

/* Card actions — danger button (trash) */
.spbwc-options-page .spbwc-card-btn--danger {
    color: var(--nbd-color-danger);
    border-color: transparent;
    background: transparent;
}
.spbwc-options-page .spbwc-card-btn--danger:hover {
    background: var(--st-pill-danger-bg);
    color: var(--st-pill-danger-text);
    border-color: transparent;
}

/* Card action: convert <button> to look like the existing <a> button */
.spbwc-options-page button.spbwc-card-btn {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

/* Status tabs — use design tokens (replace hardcoded styles
   that may have crept in via admin-options.css) */
.spbwc-options-page .spbwc-status-tab {
    border-radius: var(--nbd-radius-pill);
    transition: var(--transition-fast);
}
.spbwc-options-page .spbwc-status-tab.is-active {
    background: var(--st-brand);
    color: var(--nbd-st-text-inverse);
    border-color: var(--st-brand);
}
.spbwc-options-page .spbwc-status-tab.is-active .spbwc-status-tab__count {
    background: rgba(255, 255, 255, 0.22);
    color: var(--nbd-st-text-inverse);
}

/* Status badges — design-token aligned */
.spbwc-options-page .spbwc-badge,
.spbwc-edit-v2 .spbwc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-1);
    padding: 3px var(--nbd-space-2);
    border-radius: var(--nbd-radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1.2;
}
.spbwc-options-page .spbwc-badge--published,
.spbwc-edit-v2 .spbwc-badge--published {
    background: var(--st-pill-active-bg);
    color: var(--st-pill-active-text);
}
.spbwc-options-page .spbwc-badge--draft,
.spbwc-edit-v2 .spbwc-badge--draft {
    background: var(--st-pill-draft-bg);
    color: var(--st-pill-draft-text);
}

/* Field-count chip */
.spbwc-options-page .spbwc-field-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--nbd-space-2);
    background: var(--st-pill-featured-bg);
    color: var(--st-pill-featured-text);
    border-radius: var(--nbd-radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

/* Card date — clock + ago text */
.spbwc-options-page .spbwc-option-card__date {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-1);
    color: var(--nbd-st-text-soft);
    font-size: var(--text-sm);
    margin-top: var(--nbd-space-1);
}


/* ============================================================
   ▓▓  PRODUCT / OPTION BADGES — global audit  ▓▓
   Override any hardcoded values that may have leaked from
   admin-options.css with the canonical design-token palette.
   ============================================================ */

/* Select2 (wc-product-search) — match Storelly brand tokens. */
.spbwc-edit-v2 .select2-container .select2-selection--multiple,
.spbwc-options-page .select2-container .select2-selection--multiple {
    min-height: 40px;
    border-radius: var(--st-field-radius);
    border-color: var(--st-field-border);
    background: var(--st-field-bg);
    box-shadow: var(--st-field-shadow);
}
.spbwc-edit-v2 .select2-container--focus .select2-selection--multiple,
.spbwc-options-page .select2-container--focus .select2-selection--multiple {
    border-color: var(--st-brand);
    box-shadow: var(--st-field-focus-shadow);
}
.spbwc-edit-v2 .select2-selection__choice,
.spbwc-options-page .select2-selection__choice,
.spbwc-edit-v2 .select2-container--default .select2-selection--multiple .select2-selection__choice,
.spbwc-options-page .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--st-pill-featured-bg) !important;
    color: var(--st-pill-featured-text) !important;
    border: 1px solid var(--nbd-st-border-brand) !important;
    border-radius: var(--nbd-radius-pill) !important;
    padding: 2px 10px !important;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1.5;
    margin: 3px 4px 0 0 !important;
}
.spbwc-edit-v2 .select2-selection__choice__remove,
.spbwc-options-page .select2-selection__choice__remove,
.spbwc-edit-v2 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.spbwc-options-page .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--st-pill-featured-text) !important;
    margin-right: var(--nbd-space-1) !important;
    font-weight: var(--font-bold);
    border: none;
    background: transparent;
}
.spbwc-edit-v2 .select2-selection__choice__remove:hover,
.spbwc-options-page .select2-selection__choice__remove:hover {
    color: var(--nbd-color-danger) !important;
}

/* Search input inside Select2 — token padding */
.spbwc-edit-v2 .select2-search--inline .select2-search__field,
.spbwc-options-page .select2-search--inline .select2-search__field {
    font-family: inherit;
    font-size: var(--st-field-font);
    color: var(--nbd-st-text);
}

/* Dropdown options inside the Select2 popup */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--st-brand) !important;
    color: var(--nbd-st-text-inverse) !important;
}

/* ════════════════════════════════════════════════════════════════════
   Storefront-fidelity preview — affordance under the quick sketch +
   full-screen modal hosting the shared storefront renderer in an iframe.
   ════════════════════════════════════════════════════════════════════ */
.spbwc-edit-v2 .v2-preview__accurate {
    margin: var(--nbd-space-3);
    padding: var(--nbd-space-3);
    border: 1px dashed var(--nbd-st-border);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-st-bg-soft);
}
.spbwc-edit-v2 .v2-preview__accurate-note {
    display: flex;
    gap: var(--nbd-space-1);
    margin: 0 0 var(--nbd-space-2);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--nbd-st-text-mute);
}
.spbwc-edit-v2 .v2-preview__accurate-note .dashicons {
    flex: 0 0 auto;
    font-size: var(--st-icon-md);
    width: var(--st-icon-md);
    height: var(--st-icon-md);
    color: var(--st-brand);
}
.spbwc-edit-v2 .v2-preview__sf-btn {
    width: 100%;
    justify-content: center;
}

/* Body lock while the modal is open. */
body.spbwc-sf-preview-lock { overflow: hidden; }

.v2-sfprev {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 3vw, 32px);
}
.v2-sfprev.is-open { display: flex; }
.v2-sfprev__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(2px);
}
.v2-sfprev__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(960px, 100%);
    max-height: 90vh;
    background: var(--nbd-st-bg);
    border-radius: var(--nbd-radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.v2-sfprev__head {
    display: flex;
    align-items: flex-start;
    gap: var(--nbd-space-3);
    flex-wrap: wrap;
    padding: var(--nbd-space-4);
    border-bottom: 1px solid var(--nbd-st-border-light);
    background: var(--nbd-st-bg-soft);
}
.v2-sfprev__titles { flex: 1 1 220px; min-width: 0; }
.v2-sfprev__title {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-1);
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
}
.v2-sfprev__title .dashicons { color: var(--st-brand); }
.v2-sfprev__sub {
    margin: var(--nbd-space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--nbd-st-text-mute);
}
.v2-sfprev__total {
    font-weight: var(--font-semibold);
    color: var(--nbd-color-success);
}
.v2-sfprev__tools {
    display: flex;
    align-items: flex-end;
    gap: var(--nbd-space-2);
}
.v2-sfprev__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
}
.v2-sfprev__price-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.v2-sfprev__cur { color: var(--nbd-st-text-mute); font-size: var(--text-md); }
.v2-sfprev__price input.v2-input { width: 96px; }
.v2-sfprev__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--st-btn-radius);
    background: var(--nbd-st-bg);
    color: var(--nbd-st-text);
    cursor: pointer;
    transition: var(--transition-fast);
}
.v2-sfprev__icon-btn:hover {
    background: var(--nbd-st-bg-soft);
    border-color: var(--nbd-st-border);
}
.v2-sfprev__body {
    position: relative;
    flex: 1 1 auto;
    overflow: auto;
    background: var(--nbd-st-bg-soft);
}
.v2-sfprev__body form { display: none; }
.v2-sfprev__body iframe {
    display: block;
    width: 100%;
    min-height: 320px;
    border: 0;
    background: transparent;
}
.v2-sfprev__state {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--nbd-space-2);
    font-size: var(--text-md);
    color: var(--nbd-st-text-mute);
    background: var(--nbd-st-bg-soft);
}
.v2-sfprev__state .dashicons { font-size: var(--st-icon-2xl); width: var(--st-icon-2xl); height: var(--st-icon-2xl); color: var(--nbd-color-warning); }
.v2-sfprev.is-loading .v2-sfprev__state--loading { display: flex; }
.v2-sfprev.is-error .v2-sfprev__state--error { display: flex; }

/* First-load skeleton — shimmer stand-ins centred in the frame. */
.v2-sfprev__skeleton {
    width: min(560px, 86%);
    display: flex;
    flex-direction: column;
    gap: var(--nbd-space-3);
}
.v2-sfprev__sk-bar,
.v2-sfprev__sk-grid > span {
    height: 16px;
    border-radius: var(--nbd-radius-sm);
    background: linear-gradient(
        90deg,
        var(--nbd-st-border-light) 25%,
        var(--nbd-st-bg) 37%,
        var(--nbd-st-border-light) 63%
    );
    background-size: 400% 100%;
    animation: spbwc-sf-shimmer 1.4s ease infinite;
}
.v2-sfprev__sk-bar--title { height: 26px; width: 55%; }
.v2-sfprev__sk-bar--wide { width: 100%; }
.v2-sfprev__sk-bar { width: 80%; }
.v2-sfprev__sk-bar--cta { height: 44px; width: 200px; border-radius: var(--nbd-radius-md); margin-top: var(--nbd-space-2); }
.v2-sfprev__sk-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--nbd-space-2);
}
.v2-sfprev__sk-grid > span { height: 52px; }
@keyframes spbwc-sf-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .v2-sfprev__sk-bar,
    .v2-sfprev__sk-grid > span { animation: none; }
}

/* Live-edit refresh: keep the prior render visible but dimmed, and float a
   small "Updating…" pill — same non-blocking pattern as the Template Library. */
.v2-sfprev.is-updating .v2-sfprev__body iframe { opacity: 0.4; transition: opacity 0.15s ease; }
.v2-sfprev__updating {
    display: none;
    position: absolute;
    inset-block-start: var(--nbd-space-3);
    inset-inline-end: var(--nbd-space-3);
    z-index: 3;
    align-items: center;
    gap: var(--nbd-space-1);
    padding: 6px var(--nbd-space-2);
    border-radius: var(--nbd-radius-pill);
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
    color: var(--nbd-st-text-mute);
}
.v2-sfprev.is-updating .v2-sfprev__updating { display: inline-flex; }
.v2-sfprev__updating .spinner { float: none; margin: 0; }

/* Viewport switcher (segmented) — Desktop / Tablet / Mobile. */
.v2-sfprev__viewport {
    display: inline-flex;
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    overflow: hidden;
    background: var(--nbd-st-bg);
}
.v2-sfprev__vp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--nbd-st-text-mute);
    cursor: pointer;
    transition: var(--transition-fast);
}
.v2-sfprev__vp + .v2-sfprev__vp { border-inline-start: 1px solid var(--nbd-st-border-light); }
.v2-sfprev__vp:hover { background: var(--nbd-st-bg-soft); color: var(--nbd-st-text); }
.v2-sfprev__vp.is-active { background: var(--st-brand-tint); color: var(--st-brand-pressed); }

/* Preview stage — width constrained per viewport; the storefront's own
   responsive CSS reflows inside. */
.v2-sfprev__stage {
    width: 100%;
    margin-inline: auto;
    transition: max-width 0.2s ease;
}
.v2-sfprev__stage[data-viewport="tablet"] { max-width: 600px; }
.v2-sfprev__stage[data-viewport="mobile"] { max-width: 390px; }

/* Empty state — no buyer-facing fields yet. */
.v2-sfprev.is-empty .v2-sfprev__state--empty { display: flex; }
.v2-sfprev__state--empty .dashicons { color: var(--nbd-st-text-mute); }
.v2-sfprev__state--empty p { margin: 0; max-width: 280px; text-align: center; }

/* Preview-against-product picker. */
.v2-sfprev__product {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--nbd-st-text-mute);
}
/* When a real product drives the price, the sample-base field is ignored. */
.v2-sfprev.is-product .v2-sfprev__price { opacity: 0.5; }
/* The product-search Select2 dropdown is appended to <body>; while the modal is
   open it must clear the modal's stacking context. Scoped to the open-modal
   body class so normal Select2 z-index is untouched elsewhere. */
body.spbwc-sf-preview-lock .select2-container--open { z-index: 100001; }

@media (max-width: 600px) {
    .v2-sfprev__head { flex-direction: column; }
    .v2-sfprev__tools { width: 100%; justify-content: space-between; }
}