/**
 * WEAM Variation Editor — CSS
 *
 * Uses WEAM design tokens from weam-tokens.css.
 * WP-native colors (#c3c4c7, #d63638, #787c82, #e0e0e0, etc.) preserved as-is.
 * Non-standard radii (2px, 3px, 10px) preserved — no matching tokens.
 *
 * @since 2.1.5.4
 * @updated 2.1.9.27 — Design System Phase 3 tokenization (146 replacements)
 */

/* =========================================================================
   CONTAINER
   ========================================================================= */

/* .weam-ve-wrap is on the panel div — no padding override.
   WC's .woocommerce_options_panel padding-left:162px positions content past the sidebar. */
.weam-ve-wrap {
    max-width: 100%;
}

/* =========================================================================
   SCANNER OVERLAY
   ========================================================================= */

.weam-ve-scanner {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--weam-r-lg);
    padding: 32px 40px;
    max-width: 520px;
    margin: 40px auto;
}

.weam-ve-scanner-title {
    font-size: var(--weam-text-lg);
    font-weight: 600;
    color: var(--weam-slate-800);
    margin: 0 0 20px;
}

.weam-ve-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.weam-ve-check-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: var(--weam-text-md);
    color: var(--weam-slate-500);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.weam-ve-check-item.weam-ve-visible {
    opacity: 1;
    transform: translateY(0);
}

.weam-ve-check-icon {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    margin-right: 10px;
}

.weam-ve-check-icon.pending { color: var(--weam-slate-400); }
.weam-ve-check-icon.checking { color: var(--weam-amber-500); }
.weam-ve-check-icon.pass { color: var(--weam-success); }
.weam-ve-check-icon.fail { color: var(--weam-error); }
.weam-ve-check-icon.skipped { color: var(--weam-slate-400); }

.weam-ve-check-label {
    flex: 1;
}

.weam-ve-check-value {
    text-align: right;
    font-family: var(--weam-font);
    font-size: var(--weam-text-base);
    color: var(--weam-slate-500);
    min-width: 80px;
}

/* Progress bar */
.weam-ve-progress {
    margin: 16px 0 0;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.weam-ve-progress-bar {
    height: 100%;
    background: var(--weam-amber-500);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s ease;
}

.weam-ve-scanner-result {
    margin-top: 16px;
    font-size: var(--weam-text-md);
    font-weight: 600;
}

.weam-ve-scanner-result.pass {
    color: var(--weam-success);
}

.weam-ve-scanner-result.fail {
    color: var(--weam-error);
}

/* =========================================================================
   CONFLICT NOTICE
   ========================================================================= */

.weam-ve-conflict {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #dba617;
    border-radius: var(--weam-r-sm);
    padding: 20px 24px;
    margin: 20px 0;
}

.weam-ve-conflict-title {
    font-size: var(--weam-text-lg);
    font-weight: 600;
    color: var(--weam-slate-800);
    margin: 0 0 8px;
}

.weam-ve-conflict-text {
    font-size: var(--weam-text-md);
    color: var(--weam-slate-500);
    margin: 0 0 16px;
    line-height: 1.6;
}

.weam-ve-conflict-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.weam-ve-conflict-tip {
    font-size: var(--weam-text-base);
    color: var(--weam-slate-500);
    margin: 0;
}

.weam-ve-conflict-status {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: var(--weam-r-sm);
    font-size: var(--weam-text-md);
}

.weam-ve-conflict-status.still-active {
    background: #fcf0f1;
    color: var(--weam-error);
}

.weam-ve-conflict-status.cleared {
    background: #edfaef;
    color: var(--weam-success);
}

/* =========================================================================
   TOOLBAR
   ========================================================================= */

.weam-ve-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--weam-r-lg);
    padding: 10px 16px;
    margin-bottom: 12px;
    position: relative;
    z-index: 10;
}

.weam-ve-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.weam-ve-toolbar-center {
    font-size: var(--weam-text-md);
    color: var(--weam-slate-500);
    flex: 1 1 auto;
    text-align: center;
    min-width: 100px;
}

.weam-ve-toolbar-center.warning {
    color: var(--weam-amber);
    font-weight: 600;
}

.weam-ve-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* =========================================================================
   VARIATION CARDS
   ========================================================================= */

.weam-ve-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Card shell — horizontal flex: image col + grid */
.weam-ve-card {
    display: flex;
    border: 1px solid #c3c4c7;
    border-radius: var(--weam-r-sm);
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.weam-ve-card:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.weam-ve-card.saving {
    border-color: var(--weam-amber-500);
}

.weam-ve-card.save-error {
    border-color: #d63638;
}

/* Disabled variation */
.weam-ve-card.weam-ve-card-off {
    opacity: 0.55;
}

/* ── Image column ─────────────────────────────────────────── */
.weam-ve-card-img {
    width: 120px;
    flex-shrink: 0;
    background: var(--weam-slate-50);
    border-right: 1px solid var(--weam-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    align-self: stretch;
    position: relative;
}

.weam-ve-card-img:hover {
    background: var(--weam-slate-100);
}

.weam-ve-card-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 3px;
    border: 2px dashed #c3c4c7;
    display: block;
    transition: border-color 0.15s;
}

.weam-ve-card-img:hover .weam-ve-card-image {
    border-color: var(--weam-info);
}

/* When there IS a real image, show it solid */
.weam-ve-card-image[src]:not([src=""]):not([src*="placeholder"]) {
    border-style: solid;
    border-color: #e0e0e0;
}

/* ── 4-column CSS grid ────────────────────────────────────── */
/* Cols: 1fr | 1fr | 1fr | 110px                             */
/* Col 1 is 1fr (was 120px) so large prices always fit        */
/* Rows: header(36px) | field | field | field | action(42px)  */

.weam-ve-grid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 110px;
    grid-template-rows: 36px;
    grid-auto-rows: auto;
}
/* Row 5 action cells need minimum height; r5c4 (Height field) needs auto */
.weam-vg.r5c1,
.weam-vg.r5c23 { min-height: 42px; }

/* Base grid cell */
.weam-vg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 12px;
    border-right: 1px solid var(--weam-border);
    border-bottom: 1px solid var(--weam-border);
    min-width: 0;
    overflow: hidden;
    background: #fff;
}

/* Backgrounds */
.weam-vg.r1c1,
.weam-vg.r1c234 { background: var(--weam-slate-100); }

.weam-vg.r4c1,
.weam-vg.r5c1,
.weam-vg.r5c23 { background: var(--weam-slate-50); }

/* Grid placement */
.weam-vg.r1c1   { grid-column: 1;   grid-row: 1; }
.weam-vg.r1c234 { grid-column: 2/5; grid-row: 1; border-right: none; }
.weam-vg.r2c1   { grid-column: 1;   grid-row: 2; }
.weam-vg.r2c23  { grid-column: 2/4; grid-row: 2; }
.weam-vg.r2c4   { grid-column: 4;   grid-row: 2; border-right: none; }
.weam-vg.r3c1   { grid-column: 1;   grid-row: 3; }
.weam-vg.r3c2   { grid-column: 2;   grid-row: 3; }
.weam-vg.r3c3   { grid-column: 3;   grid-row: 3; }
.weam-vg.r3c4   { grid-column: 4;   grid-row: 3; border-right: none; }
.weam-vg.r4c1   { grid-column: 1;   grid-row: 4; } /* empty spacer */
.weam-vg.r4c2   { grid-column: 2;   grid-row: 4; }
.weam-vg.r4c3   { grid-column: 3;   grid-row: 4; }
.weam-vg.r4c4   { grid-column: 4;   grid-row: 4; border-right: none; }
.weam-vg.r5c1   { grid-column: 1;   grid-row: 5; }
.weam-vg.r5c23  { grid-column: 2/4; grid-row: 5; flex-direction: row; align-items: center; gap: 24px; }
.weam-vg.r5c4   { grid-column: 4;   grid-row: 5; border-right: none; }

/* Last row — no bottom border */
.weam-vg.r5c1,
.weam-vg.r5c23,
.weam-vg.r5c4 { border-bottom: none; }

/* Empty spacer cell */
.weam-vg.weam-vg-empty {
    background: var(--weam-slate-50);
    pointer-events: none;
}

/* Fix 12: greyed-out fields (disabled but visible) */
.weam-ve-field-greyed {
    opacity:        0.4;
    pointer-events: none;
}
.weam-vg .weam-ve-field-greyed {
    opacity:        0.4;
    pointer-events: none;
    cursor:         not-allowed;
}

/* Field label */
.weam-vg-label {
    font-size: var(--weam-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--weam-slate-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

/* Variant title in header */
.weam-ve-variant-title {
    font-weight: 600;
    font-size: var(--weam-text-md);
    color: var(--weam-slate-800);
}

/* Inputs inside grid cells */
.weam-vg input[type="text"],
.weam-vg input[type="number"],
.weam-vg select {
    width: 100%;
    height: 26px;
    padding: 0 6px;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    font-size: var(--weam-text-base);
    color: var(--weam-slate-800);
    background: #fff;
    box-sizing: border-box;
    text-align: center;
}

/* Fix 6: Override WC's injected SVG arrows on select — appearance:auto adds browser chevron cleanly */
.weam-vg select {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    background-image: none !important;
    padding-right: 6px;
    text-align: left;
}

.weam-vg input:focus,
.weam-vg select:focus {
    outline: 1px solid var(--weam-info);
    border-color: var(--weam-info);
}

/* Price fields */
.weam-vg .weam-ve-price-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    transition: outline 0.2s;
}

/* Price health alert highlights — border only, matches plugin standard */
.weam-vg .weam-ve-price-wrap.pa-hl-urgent .weam-ve-currency,
.weam-vg .weam-ve-price-wrap.pa-hl-urgent input {
    border-color: #fca5a5;
}
.weam-vg .weam-ve-price-wrap.pa-hl-urgent .weam-ve-currency {
    border-right: none;
}
.weam-vg .weam-ve-price-wrap.pa-hl-warning .weam-ve-currency,
.weam-vg .weam-ve-price-wrap.pa-hl-warning input {
    border-color: #fcd34d;
}
.weam-vg .weam-ve-price-wrap.pa-hl-warning .weam-ve-currency {
    border-right: none;
}
.weam-vg .weam-ve-price-wrap.pa-hl-watch .weam-ve-currency,
.weam-vg .weam-ve-price-wrap.pa-hl-watch input {
    border-color: #94a3b8;
}
.weam-vg .weam-ve-price-wrap.pa-hl-watch .weam-ve-currency {
    border-right: none;
}

.weam-vg .weam-ve-currency {
    background: #f0f0f1;
    border: 1px solid #c3c4c7;
    border-right: none;
    border-radius: 3px 0 0 3px;
    padding: 0 5px;
    font-size: var(--weam-text-base);
    color: var(--weam-slate-500);
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 24px;   /* narrower minimum so short symbols don't waste space */
    max-width: 52px;   /* wide enough for NZ$, AR$, Rp, Kr, HK$ */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.weam-vg .weam-ve-price-wrap input {
    border-radius: 0 3px 3px 0;
    flex: 1;           /* fills all remaining width — no 999 limit */
    min-width: 0;
    width: 0;          /* flex child must start at 0 to let flex grow work */
    text-align: right; /* prices right-aligned */
}

/* Toggle row (r5c234) — inline toggles */
.weam-vg.r5c234 .weam-ve-toggle-cell {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── WooCommerce label override defence ────────────────────────────────
   .woocommerce_options_panel label has higher specificity than plain
   .weam-toggle — it overrides display:flex and breaks the toggle track.
   Scope to #woocommerce-product-data and use !important to win. */
#woocommerce-product-data .weam-vg .weam-toggle {
    display:        flex !important;
    flex-direction: row !important;
    align-items:    center !important;
    gap:            6px !important;
    cursor:         pointer !important;
    float:          none !important;
    width:          auto !important;
    margin:         0 !important;
    padding:        0 !important;
}

/* Hidden checkbox must not affect toggle layout */
#woocommerce-product-data .weam-vg .weam-toggle input[type="checkbox"] {
    position:       absolute !important;
    opacity:        0 !important;
    width:          0 !important;
    height:         0 !important;
    pointer-events: none !important;
}

/* Slider needs a positioning context */
#woocommerce-product-data .weam-vg .weam-toggle-slider {
    position:   relative !important;
    flex-shrink: 0 !important;
}

/* Stock-dependent visibility */
.weam-vg.weam-ve-stock-hidden {
    opacity: 0.35;
    pointer-events: none;
}

/* Enabled toggle in r1c1 (inherits WC override defence above) */
.weam-vg.r1c1 .weam-toggle {
    flex-direction: row;
    align-items:    center;
    gap:            6px;
    cursor:         pointer;
}

/* Show all button cell */
.weam-vg.r5c1 {
    align-items: flex-start;
    justify-content: center;
}

/* ── Expanded section ─────────────────────────────────────── */
/* Spans full width below the grid (flex column layout on card) */
.weam-ve-card {
    flex-wrap: wrap;
}

.weam-ve-card-advanced {
    display: none;
    width: 100%;
    border-top: 1px solid var(--weam-border);
    background: var(--weam-slate-50);
}

.weam-ve-card.expanded .weam-ve-card-advanced {
    display: block;
}

/* ── New fields badge on More button ─────────────────── */
.weam-ve-new-fields-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--weam-text-xs);
    font-weight: 600;
    color: var(--weam-amber-800);
    background: var(--weam-amber-100);
    border: 1px solid #fde68a;
    border-radius: 10px;
    margin-left: 6px;
    white-space: nowrap;
    line-height: 1.4;
    vertical-align: middle;
    cursor: help;
}

/* ── More section groups ─────────────────────────────── */
.weam-ve-more-group {
    padding: 12px 16px;
    border-bottom: 1px solid #e8ecf0;
}
.weam-ve-more-group:last-of-type {
    border-bottom: none;
}

.weam-ve-more-group-title {
    font-size: var(--weam-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--weam-slate-400);
    margin-bottom: 8px;
}

.weam-ve-more-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.weam-ve-more-spacer {
    /* fills second column when only 1 field in row */
}

/* Hide downloadable section when downloadable toggle is off */
.weam-ve-hidden {
    display: none !important;
}

/* ── Field (shared across advanced section) ───────────── */
.weam-ve-field {
    display:        flex !important;
    flex-direction: column !important;
    gap:            2px !important;
    float:          none !important;
}

.weam-ve-field > label,
.weam-ve-more-field > label {
    display:         block !important;
    float:           none !important;
    width:           auto !important;
    clear:           none !important;
    margin:          0 !important;
    padding:         0 !important;
    font-size: var(--weam-text-xs) !important;
    font-weight:     600 !important;
    text-transform:  uppercase !important;
    letter-spacing:  0.04em !important;
    color:           var(--weam-slate-400) !important;
}

.weam-ve-more-field {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.weam-ve-field input,
.weam-ve-field select,
.weam-ve-field textarea,
.weam-ve-more-field input {
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: var(--weam-text-base);
    color: var(--weam-slate-800);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    height: 26px;
}

.weam-ve-field textarea {
    height: auto;
    min-height: 60px;
    resize: vertical;
}

.weam-ve-field input:focus,
.weam-ve-field select:focus,
.weam-ve-field textarea:focus,
.weam-ve-more-field input:focus {
    border-color: var(--weam-info);
    box-shadow: 0 0 0 1px var(--weam-info);
    outline: none;
}

.weam-ve-field.weam-ve-field-row,
.weam-ve-desc-row {
    /* full width in its group */
}

.weam-ve-field select {
    appearance: auto;
    cursor: pointer;
}

/* Date input: show proper date picker */
.weam-ve-more-field input[type="date"] {
    cursor: pointer;
}

/* ── Download files table ───────────────────────────── */
.weam-ve-downloads-table {
    border: 1px solid var(--weam-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
    background: #fff;
}

.weam-ve-downloads-header {
    display: grid;
    grid-template-columns: 1fr 1fr 56px;
    background: var(--weam-slate-100);
    border-bottom: 1px solid var(--weam-border);
    padding: 0 8px;
    height: 28px;
    align-items: center;
    font-size: var(--weam-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--weam-slate-400);
    gap: 8px;
}

.weam-ve-dl-row {
    display: grid;
    grid-template-columns: 1fr 1fr 28px 28px;
    gap: 4px;
    padding: 5px 8px;
    border-bottom: 1px solid #f0f0f1;
    align-items: center;
}
.weam-ve-dl-row:last-child {
    border-bottom: none;
}

.weam-ve-dl-row input {
    height: 24px;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: var(--weam-text-sm);
    color: var(--weam-slate-800);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
.weam-ve-dl-row input:focus {
    border-color: var(--weam-info);
    outline: none;
}

.weam-ve-dl-remove,
.weam-ve-dl-choose {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    font-size: var(--weam-text-lg);
    color: var(--weam-slate-600);
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
}
.weam-ve-dl-remove:hover { background: #fee2e2; border-color: var(--weam-red-400, #f87171); color: var(--weam-error); }
.weam-ve-dl-choose:hover { background: #eff6ff; border-color: #93c5fd; color: var(--weam-info); }

.weam-ve-downloads-add {
    margin-top: 2px;
}
.weam-ve-downloads-add .button {
    font-size: var(--weam-text-sm);
    padding: 2px 10px;
    height: 26px;
    line-height: 22px;
}

/* ── Expanded footer ────────────────────────────────── */
.weam-ve-expanded-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 1px solid #f0f0f1;
    background: var(--weam-slate-50);
}

/* Danger button override — outline (red dot handled by weam-ctd.css) */
#woocommerce-product-data .weam-ve-expanded-footer .weam-ctd-wrap.weam-ctd-danger .weam-ctd-btn {
    color: var(--weam-slate-400) !important;
    background: transparent !important;
    border: 1.5px solid #a7aaad !important;
}
#woocommerce-product-data .weam-ve-expanded-footer .weam-ctd-wrap.weam-ctd-danger .weam-ctd-btn:hover {
    background: var(--weam-slate-800, #1E293B) !important;
    border-color: var(--weam-slate-800, #1E293B) !important;
    color: white !important;
}

/* Stock-dependent field visibility (manage_stock toggle) */

/* Expanded section CSS defined in VARIATION CARDS block above */

/* Save indicator */
.weam-ve-save-indicator {
    font-size: var(--weam-text-sm);
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.weam-ve-save-indicator.visible {
    opacity: 1;
}

.weam-ve-save-indicator.saving {
    color: var(--weam-amber-500);
}

.weam-ve-save-indicator.saved {
    color: var(--weam-success);
}

.weam-ve-save-indicator.error {
    color: var(--weam-error);
}

/* =========================================================================
   PAGINATION
   ========================================================================= */

.weam-ve-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0;
    font-size: var(--weam-text-md);
    color: var(--weam-slate-500);
}

.weam-ve-pagination button {
    background: #f0f0f1;
    border: 1px solid #c3c4c7;
    border-radius: var(--weam-r-sm);
    padding: 4px 12px;
    cursor: pointer;
    font-size: var(--weam-text-md);
    color: var(--weam-slate-900);
    transition: background 0.15s ease;
}

.weam-ve-pagination button:hover {
    background: #e0e0e0;
}

.weam-ve-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================================================================
   EMPTY STATES
   ========================================================================= */

.weam-ve-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--weam-slate-500);
    font-size: var(--weam-text-md);
    line-height: 1.6;
}

.weam-ve-empty-icon {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.4;
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.weam-ve-footer {
    text-align: center;
    padding: 8px 0;
    margin-top: 12px;
}

/* Footer: Switch to classic editor (CTD button) */
.weam-ve-footer {
    text-align: center;
    padding: 12px 0;
    margin-top: 12px;
}

/* Switch-back link above WC classic panel (CTD button) */
.weam-ve-switchback {
    padding: 10px 16px;
    margin-bottom: 8px;
    text-align: center;
}

/* =========================================================================
   CTD BUTTONS — VE now uses standard .weam-ctd-wrap / .weam-ctd-btn
   from weam-product-edit.css. No VE-specific overrides needed.
   ========================================================================= */

/* =========================================================================
   TRANSITIONS
   ========================================================================= */

.weam-ve-fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.weam-ve-fade-in {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 782px) {
    .weam-ve-card-fields {
        grid-template-columns: 1fr;
        padding-left: 0;
    }

    .weam-ve-card-advanced {
        padding-left: 0;
    }

    .weam-ve-card-expand {
        padding-left: 0;
    }

    .weam-ve-toggle-grid {
        grid-template-columns: 1fr;
    }

    .weam-ve-action-bar {
        flex-wrap: wrap;
    }

    .weam-ve-more-label {
        display: none;
    }

    .weam-ve-advanced-grid {
        grid-template-columns: 1fr;
    }

    .weam-ve-toolbar {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .weam-ve-scanner {
        padding: 20px;
        margin: 20px auto;
    }
}

/* ==========================================================================
   IMAGE POPUP
   ========================================================================== */

.weam-ve-card {
    position: relative;
}

.weam-ve-img-clickable {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.weam-ve-img-clickable:hover {
    opacity: 0.75;
}

/* Backdrop: covers the card only */
.weam-ve-img-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--weam-r-lg);
    z-index: 10;
}

/* Fixed (page-level) backdrop — covers entire viewport */
.weam-ve-img-backdrop-fixed {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999990;
}

/* Popup: centered on the card */
.weam-ve-img-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: var(--weam-r-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 11;
    width: 280px;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
}

/* Fixed (page-level) popup — centered in viewport, always on top */
.weam-ve-img-popup-fixed {
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: var(--weam-r-lg);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
    padding: 20px;
    z-index: 999991;
    width: 320px;
    max-height: 85vh;
    overflow-y: auto;
    text-align: center;
}

.weam-ve-img-close {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: none;
    font-size: var(--weam-text-2xl);
    line-height: 1;
    color: var(--weam-slate-500);
    cursor: pointer;
    padding: 2px 6px;
}

.weam-ve-img-close:hover {
    color: var(--weam-slate-800);
}

.weam-ve-img-preview-wrap {
    margin: 8px auto 16px;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    border-radius: var(--weam-r-sm);
    overflow: hidden;
    background: #f6f7f7;
}

.weam-ve-img-preview {
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
}

.weam-ve-img-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.weam-ve-img-actions .weam-ctd-wrap {
    flex-shrink: 0;
}

/* Image popup is appended to body (outside #woocommerce-product-data),
   outline mode uses margin-left: 0. */
.weam-ve-img-actions .weam-ctd-wrap.sm .weam-ctd-btn {
    margin-left: 0;
}
.weam-ve-img-actions .weam-ctd-wrap:not(.sm) .weam-ctd-btn {
    margin-left: 0;
}

.weam-ve-img-actions .weam-ctd-btn {
    font-size: var(--weam-text-base);
    padding: 4px 12px;
}

/* Keep popup active card above siblings AND above toolbar */
.weam-ve-popup-active {
    z-index: 999;
    position: relative;
}

/* ==========================================================================
   IMAGE POPUP — METADATA FIELDS
   ========================================================================== */

.weam-ve-img-meta {
    margin-top: 12px;
    text-align: left;
    border-top: 1px solid #e0e0e0;
    padding-top: 10px;
}

.weam-ve-meta-hidden {
    display: none;
}

.weam-ve-img-meta-field {
    margin-bottom: 8px;
}

.weam-ve-img-meta-field label {
    display: block;
    font-size: var(--weam-text-sm);
    font-weight: 600;
    color: var(--weam-slate-500);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.weam-ve-img-meta-field input,
.weam-ve-img-meta-field textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: var(--weam-text-base);
    padding: 5px 8px;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    line-height: 1.4;
}

.weam-ve-img-meta-field input:focus,
.weam-ve-img-meta-field textarea:focus {
    border-color: var(--weam-info);
    box-shadow: 0 0 0 1px var(--weam-info);
    outline: none;
}

.weam-ve-img-meta-field textarea {
    resize: vertical;
    min-height: 36px;
}

/* ==========================================================================
   IMAGE SIZE WARNING
   ========================================================================== */

.weam-ve-img-size-warn {
    color: var(--weam-amber-700);
    background: #fcf9e8;
    border: 1px solid #e0d48e;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: var(--weam-text-sm);
    text-align: center;
    margin: 4px 0 8px;
}

/* ==========================================================================
   CARD IMAGE WRAP + FALLBACK BADGE
   ========================================================================== */

.weam-ve-card-img-wrap {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.weam-ve-card-img-wrap .weam-ve-card-image {
    width: 48px;
    height: 48px;
}

.weam-ve-fallback-img {
    opacity: 0.5;
}

.weam-ve-fallback-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #dba617;
    color: #fff;
    font-size: var(--weam-text-2xs);
    font-weight: 700;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 2px;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   PER-PRODUCT OVERRIDE PANEL
   ========================================================================== */

.weam-ve-overrides {
    margin: 8px 0 12px;
    border: 1px solid #e0e0e0;
    border-radius: var(--weam-r-md);
    background: #f9f9f9;
}

.weam-ve-overrides-toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 10px 14px;
    font-size: var(--weam-text-md);
    font-weight: 500;
    color: var(--weam-slate-500);
    cursor: pointer;
    text-align: left;
}

.weam-ve-overrides-toggle:hover {
    color: var(--weam-slate-800);
    background: #f0f0f1;
}

.weam-ve-overrides-body {
    padding: 0 14px 14px;
}

.weam-ve-overrides-hint {
    font-size: var(--weam-text-base);
    color: var(--weam-slate-500);
    margin: 0 0 8px;
}

.weam-ve-override-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #e8e8e8;
}

.weam-ve-override-row:last-of-type {
    border-bottom: none;
}

.weam-ve-override-row label {
    flex: 1;
    font-size: var(--weam-text-md);
    color: var(--weam-slate-800);
    cursor: pointer;
}

.weam-ve-override-row input[type="checkbox"] {
    margin: 0 4px 0 0;
}

.weam-ve-override-row input[type="text"] {
    flex: 1;
    font-size: var(--weam-text-base);
    padding: 4px 8px;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
}

.weam-ve-override-global {
    font-size: var(--weam-text-sm);
    color: var(--weam-slate-500);
    flex-shrink: 0;
}

/* =========================================================================
   VARIATION PRESETS PANEL
   ========================================================================= */

.weam-ve-presets {
    margin: 8px 0 12px;
    border: 1px solid var(--weam-border, #E2E8F0);
    border-radius: var(--weam-r-md);
    background: #fff;
    overflow: hidden; /* prevent grid from bleeding past left/right edges */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
}

.weam-ve-presets-toggle {
    display: block;
    width: 100%;
    background: var(--weam-slate-50, #F8FAFC);
    border: none;
    border-bottom: 1px solid var(--weam-border, #E2E8F0);
    padding: 10px 14px;
    font-size: var(--weam-text-md);
    font-weight: 500;
    color: var(--weam-slate-700, #334155);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.weam-ve-presets-toggle:hover {
    background: var(--weam-slate-100, #F1F5F9);
}

.weam-ve-presets-mixed {
    color: var(--weam-slate-500, #64748B);
    font-weight: 600;
}

.weam-ve-presets-body {
    padding: 12px 14px 14px;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.weam-ve-presets-hint {
    font-size: var(--weam-text-base);
    color: var(--weam-slate-500);
    margin: 0 0 10px;
}

.weam-ve-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 4px 16px;
    min-width: 0;
    max-width: 100%;
}

.weam-ve-preset-item {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: var(--weam-r-sm);
    font-size: var(--weam-text-md);
    color: var(--weam-slate-800);
    cursor: pointer;
    transition: background 0.1s;
    min-width: 0;
    overflow: hidden;
    /* Reset WC's .woocommerce_options_panel label { float:left; width:150px } */
    float: none !important;
    width: auto !important;
}

/* Toggle inside preset item — override WC label resets */
.weam-ve-preset-item .weam-ve-preset-toggle-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1;
    min-width: 0;
}

.weam-ve-preset-item .weam-ve-preset-toggle-label input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

.weam-ve-preset-item .weam-toggle-slider {
    position: relative !important;
    flex-shrink: 0 !important;
}

/* Mixed/indeterminate state — neutral slider with centered dot */
.weam-ve-preset-item .weam-toggle-slider.weam-toggle-mixed {
    background: var(--weam-slate-200, #E2E8F0) !important;
}
.weam-ve-preset-item .weam-toggle-slider.weam-toggle-mixed::before {
    transform: translateX(7px) !important;
    background: var(--weam-slate-500, #64748B) !important;
}

.weam-ve-preset-item .weam-toggle-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reset WC's forced checkbox styling inside presets */
.weam-ve-preset-item input[type="checkbox"] {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.weam-ve-preset-item:hover {
    background: var(--weam-slate-50, #F8FAFC);
}

.weam-ve-preset-item input[type="checkbox"] {
    margin: 0;
    accent-color: var(--weam-slate-600, #475569);
    flex-shrink: 0;
}

.weam-ve-preset-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weam-ve-preset-source {
    font-size: var(--weam-text-2xs);
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 2px;
    background: var(--weam-border);
    color: var(--weam-slate-500);
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 3px;
}

.weam-ve-preset-badge {
    font-size: var(--weam-text-xs);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

.weam-ve-preset-badge.on {
    background: #e6f4ea;
    color: var(--weam-success);
}

.weam-ve-preset-badge.off {
    background: #f0f0f0;
    color: var(--weam-slate-500);
}

.weam-ve-preset-badge.mixed {
    background: #fef7e0;
    color: var(--weam-amber-700);
    font-weight: 600;
}

.weam-ve-presets-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--weam-border, #E2E8F0);
    min-width: 0;
    overflow: hidden;
}

.weam-ve-presets-result {
    font-size: var(--weam-text-base);
    font-weight: 500;
}

/* Copy from first: separator + grid */
.weam-ve-copy-first-sep {
    border-top: 1px solid var(--weam-border, #E2E8F0);
    margin: 12px 0;
}

.weam-ve-copy-first-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px 12px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.weam-ve-copy-field-item {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--weam-r-sm);
    font-size: var(--weam-text-md);
    color: var(--weam-slate-800);
    cursor: pointer;
    transition: background 0.1s;
    float: none !important;
    width: auto !important;
    min-width: 0;
    overflow: hidden;
}
.weam-ve-copy-field-item:hover {
    background: var(--weam-slate-50, #F8FAFC);
}
.weam-ve-copy-field-item input[type="checkbox"] {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    accent-color: var(--weam-slate-600, #475569);
    flex-shrink: 0;
}
.weam-ve-copy-field-label {
    white-space: nowrap;
    font-weight: 500;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weam-ve-copy-field-value {
    font-size: var(--weam-text-xs);
    color: var(--weam-slate-500);
    background: var(--weam-slate-50, #F8FAFC);
    border: 1px solid var(--weam-border, #E2E8F0);
    border-radius: 3px;
    padding: 1px 6px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}
.weam-ve-copy-first-result {
    font-size: var(--weam-text-base);
    font-weight: 500;
}

/* =========================================================================
   RENAME PREVIEW PANEL (Phase C1)
   ========================================================================= */

.weam-ve-rename-panel {
    margin: 0 0 16px 0;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: var(--weam-r-sm);
}

.weam-ve-rename-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    background: #f6f7f7;
}

.weam-ve-rename-header h3 {
    margin: 0;
    font-size: var(--weam-text-lg);
    font-weight: 600;
}

.weam-ve-rename-close {
    background: none;
    border: none;
    font-size: var(--weam-text-2xl);
    cursor: pointer;
    color: var(--weam-slate-500);
    padding: 0 4px;
    line-height: 1;
}

.weam-ve-rename-close:hover {
    color: var(--weam-error);
}

.weam-ve-rename-loading,
.weam-ve-rename-error,
.weam-ve-rename-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--weam-slate-500);
}

.weam-ve-rename-error {
    color: var(--weam-error);
}

/* Summary bar */
.weam-ve-rename-summary {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-size: var(--weam-text-md);
    flex-wrap: wrap;
}

.weam-ve-rs-total { font-weight: 600; }
.weam-ve-rs-rename { color: var(--weam-success); }
.weam-ve-rs-shared { color: var(--weam-amber-700); }
.weam-ve-rs-skip { color: var(--weam-slate-500); }
.weam-ve-rs-unchanged { color: var(--weam-info); }

/* Active settings bar */
.weam-ve-rename-settings-bar {
    display: flex;
    gap: 14px;
    padding: 8px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-size: var(--weam-text-base);
    background: #f9f9f9;
    flex-wrap: wrap;
    align-items: center;
}

.weam-ve-rset-label {
    font-weight: 600;
    color: var(--weam-slate-500);
}

.weam-ve-rset {
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 500;
}

.weam-ve-rset.on {
    background: #e6f4ea;
    color: var(--weam-success);
}

.weam-ve-rset.off {
    background: #f0f0f0;
    color: var(--weam-slate-500);
}

.weam-ve-rset-template code {
    background: #f0f0f0;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: var(--weam-text-sm);
}

/* Warnings */
.weam-ve-rename-warnings {
    padding: 8px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.weam-ve-rw {
    padding: 6px 0;
    font-size: var(--weam-text-md);
    line-height: 1.4;
}

.weam-ve-rw + .weam-ve-rw {
    border-top: 1px solid #f0f0f0;
}

.weam-ve-rw-warning { color: var(--weam-amber-700); }
.weam-ve-rw-error { color: var(--weam-error); }
.weam-ve-rw-info { color: var(--weam-info); }
.weam-ve-rw-advisory { color: var(--weam-slate-500); }

.weam-ve-rw-icon {
    margin-right: 4px;
}

/* Preview table */
.weam-ve-rename-table-wrap {
    overflow-x: auto;
}

.weam-ve-rename-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--weam-text-base);
}

.weam-ve-rename-table th {
    background: #f6f7f7;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid #c3c4c7;
    white-space: nowrap;
}

.weam-ve-rename-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.weam-ve-rename-table tbody tr:hover {
    background: #f6f7f7;
}

.weam-ve-rename-table code {
    background: #f0f0f0;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: var(--weam-text-sm);
    word-break: break-all;
}

.weam-ve-rt-check { width: 30px; text-align: center; }
.weam-ve-rt-status { width: 36px; text-align: center; }
.weam-ve-rt-var { width: 70px; }
.weam-ve-rt-arrow { width: 24px; text-align: center; color: var(--weam-slate-500); }
.weam-ve-rt-refs { width: 70px; }

/* Row status colors */
.weam-ve-rr-skip td { color: var(--weam-slate-500); }
.weam-ve-rr-unchanged td { color: var(--weam-info); }
.weam-ve-rr-shared .weam-ve-rt-new code { border-left: 3px solid #dba617; padding-left: 7px; }
.weam-ve-rr-ready .weam-ve-rt-new code { border-left: 3px solid #007017; padding-left: 7px; }

/* Reference tooltip */
.weam-ve-ref-count {
    background: #e0e0e0;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: var(--weam-text-sm);
    cursor: help;
}

/* Action bar */
.weam-ve-rename-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    background: #f6f7f7;
}

.weam-ve-rename-selected {
    font-size: var(--weam-text-md);
    font-weight: 600;
    margin-right: auto;
}

/* Backup confirmation label */
.weam-ve-rename-backup-label {
    font-size: var(--weam-text-base);
    color: var(--weam-slate-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.weam-ve-rename-backup-label input[type="checkbox"] {
    margin: 0;
}

/* Nudge effect when trying to execute without backup confirmation */
.weam-ve-rename-backup-label.weam-ve-backup-nudge {
    color: var(--weam-error);
    font-weight: 600;
    background: #fce8e8;
    padding: 4px 10px;
    border-radius: var(--weam-r-sm);
    transition: all 0.2s ease;
}

/* C.34: Progress bar */
.weam-ve-rename-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid #e0e0e0;
}

.weam-ve-rp-bar {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: var(--weam-r-sm);
    overflow: hidden;
}

.weam-ve-rp-fill {
    height: 100%;
    background: var(--weam-amber-500);
    border-radius: var(--weam-r-sm);
    width: 0;
    transition: width 0.3s ease;
}

.weam-ve-rp-text {
    font-size: var(--weam-text-base);
    color: var(--weam-slate-500);
    white-space: nowrap;
    min-width: 120px;
}

/* C.35: Report UI */
.weam-ve-rename-report {
    border-top: 2px solid var(--weam-amber-500);
}

.weam-ve-rr-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.weam-ve-rr-header h4 {
    margin: 0;
    font-size: var(--weam-text-lg);
    font-weight: 600;
}

.weam-ve-rr-stat {
    font-size: var(--weam-text-base);
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 500;
}

.weam-ve-rr-stat.ok { background: #e6f4ea; color: var(--weam-success); }
.weam-ve-rr-stat.copy { background: #fef7e0; color: var(--weam-amber-700); }
.weam-ve-rr-stat.err { background: #fce8e8; color: var(--weam-error); }

.weam-ve-rr-actions {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    background: #f6f7f7;
}

/* Clickable note items in report table */
.weam-ve-rn-note {
    display: inline-block;
    font-size: var(--weam-text-sm);
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    border-bottom: 1px dashed;
    transition: opacity 0.15s;
}

.weam-ve-rn-note:hover { opacity: 0.8; }

.weam-ve-rn-success { background: #e6f4ea; color: var(--weam-success); border-color: var(--weam-success); }
.weam-ve-rn-info    { background: #e8f0fe; color: var(--weam-info); border-color: var(--weam-info); }
.weam-ve-rn-warning { background: #fef7e0; color: var(--weam-amber-700); border-color: var(--weam-amber-700); }
.weam-ve-rn-error   { background: #fce8e8; color: var(--weam-error); border-color: var(--weam-error); }

/* Note detail popup */
.weam-ve-rn-popup {
    position: absolute;
    bottom: 100%;
    right: 0;
    min-width: 280px;
    max-width: 380px;
    background: var(--weam-slate-800);
    color: #fff;
    font-size: var(--weam-text-base);
    line-height: 1.5;
    padding: 14px 16px;
    border-radius: var(--weam-r-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    white-space: pre-line;
    margin-bottom: 6px;
}

.weam-ve-rn-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 20px;
    border: 6px solid transparent;
    border-top-color: var(--weam-slate-800);
}

.weam-ve-rn-popup-close {
    position: absolute;
    top: 4px;
    right: 8px;
    color: var(--weam-slate-500);
    cursor: pointer;
    font-size: var(--weam-text-xl);
    line-height: 1;
    padding: 2px;
}

.weam-ve-rn-popup-close:hover { color: #fff; }

.weam-ve-rn-popup-text {
    color: var(--weam-slate-200);
}

/* ============================================================
   DEDICATED TAB WIDTH FIX — built outside → in
   Same principle as attributes tab fix: each layer passes
   explicit width down to the next.
   Scoped to #weam_variant_manager_data only.
   ============================================================ */

/* L1: panel — fills content area width */
#weam_variant_manager_data {
    width: 100%;
    box-sizing: border-box;
}

/* L2: JS container — receives width from panel */
#weam_variant_manager_data #weam-ve-container {
    width: 100%;
    box-sizing: border-box;
}

/* L3: cards wrapper — receives width from container */
#weam_variant_manager_data .weam-ve-cards {
    width: 100%;
    box-sizing: border-box;
}

/* L4: each card — fills the cards wrapper width */
#weam_variant_manager_data .weam-ve-card {
    width: 100%;
    box-sizing: border-box;
}

/* L5: presets panel — contained within container width */
#weam_variant_manager_data .weam-ve-presets {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* ============================================================
   COMBINED TAB WIDTH FIX — same rules for combined tab context.
   When VE is moved into #weam-ve-combined-slot, the rules
   scoped to #weam_variant_manager_data no longer apply.
   ============================================================ */

#weam-ve-combined-slot #weam-ve-container {
    width: 100%;
    box-sizing: border-box;
}

#weam-ve-combined-slot .weam-ve-cards {
    width: 100%;
    box-sizing: border-box;
}

#weam-ve-combined-slot .weam-ve-card {
    width: 100%;
    box-sizing: border-box;
}

#weam-ve-combined-slot .weam-ve-presets {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

#weam-ve-combined-slot .weam-ve-toolbar {
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   NUCLEAR WC OVERRIDE — WooCommerce applies float:left + width:150px
   to ALL <label> and float:left to ALL <input[type=checkbox]> inside
   .woocommerce_options_panel. These rules beat WC's specificity
   for VE elements inside the combined panel.
   ============================================================ */
#woocommerce-product-data .weam-ve-presets label {
    float: none !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

#woocommerce-product-data .weam-ve-presets input[type="checkbox"] {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

#woocommerce-product-data .weam-ve-copy-first-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

#woocommerce-product-data .weam-ve-presets-body {
    overflow: hidden !important;
    max-width: 100% !important;
}

#woocommerce-product-data .weam-ve-presets-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   VARIATION ATTRIBUTES — inside VE grid, below R5
   Shows per-variation attribute dropdowns (Color, Size, etc.)
   Added: 2.1.13.49
   ═══════════════════════════════════════════════════════════════ */

/* Separator: spans all 4 grid columns, row 6 */
.weam-ve-varattr-sep {
    grid-column: 1 / -1;
    grid-row: 6;
    font-size: var(--weam-text-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--weam-slate-400, #94a3b8);
    padding: 8px 10px 2px;
    border-top: 1px solid var(--weam-border, #e2e4e7);
    line-height: 1;
}

/* Each attribute cell — direct child of parent grid, label + dropdown stacked */
.weam-ve-varattr-cell {
    padding: 6px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-right: 1px solid var(--weam-border, #e2e4e7);
    border-bottom: 1px solid var(--weam-border, #e2e4e7);
    min-height: 0;
}

/* Green = set, Amber = "Any" */
.weam-ve-varattr-cell.weam-va-ok {
    background: var(--weam-success-light, #f0fdf4);
    border-left: 3px solid var(--weam-success, #16a34a);
}
.weam-ve-varattr-cell.weam-va-warn {
    background: var(--weam-warning-light, #fffbeb);
    border-left: 3px solid var(--weam-amber-500, #F59E0B);
}

/* Empty filler and c4 spacer cells */
.weam-ve-varattr-cell.weam-ve-varattr-empty {
    background: transparent;
    border-left: none;
}
.weam-ve-varattr-cell.weam-ve-varattr-c4 {
    background: transparent;
    border-left: none;
    border-right: none;
}

/* Label with status dot */
.weam-ve-varattr-label {
    font-size: var(--weam-text-sm);
    font-weight: 500;
    color: var(--weam-slate-600, #475569);
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

/* Status dot */
.weam-ve-varattr-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.weam-ve-varattr-dot.green { background: var(--weam-success, #16a34a); }
.weam-ve-varattr-dot.amber { background: var(--weam-amber-500, #F59E0B); }

/* Dropdown styling */
.weam-ve-varattr-select {
    width: 100%;
    height: 28px;
    font-size: var(--weam-text-base);
    padding: 0 6px;
    border: 1px solid var(--weam-border, #e2e4e7);
    border-radius: var(--weam-r-sm, 4px);
    background: #fff;
    color: var(--weam-slate-700, #334155);
    line-height: 28px;
}
.weam-ve-varattr-select:focus {
    border-color: var(--weam-amber-500, #F59E0B);
    box-shadow: 0 0 0 1px var(--weam-amber-500, #F59E0B);
    outline: none;
}

/* Amber border on "Any" option selected */
.weam-va-warn .weam-ve-varattr-select {
    border-color: var(--weam-amber-500, #F59E0B);
}

/* ── Orphan Variation Popup ── */
.weam-ve-orphan-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 100060;
    display: flex;
    align-items: center;
    justify-content: center;
}
.weam-ve-orphan-popup {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    max-width: 420px;
    width: 90%;
    overflow: hidden;
}
.weam-ve-orphan-header {
    padding: 16px 20px;
    font-weight: 600;
    font-size: var(--weam-text-lg);
    border-bottom: 1px solid #e5e7eb;
    color: var(--weam-amber-800);
    background: var(--weam-warning-light, #fffbeb);
}
.weam-ve-orphan-icon {
    color: var(--weam-amber-500, #f59e0b);
}
.weam-ve-orphan-body {
    padding: 16px 20px;
}
.weam-ve-orphan-body p {
    margin: 0 0 8px;
    font-size: var(--weam-text-md);
    line-height: 1.5;
    color: var(--weam-slate-700);
}
.weam-ve-orphan-ids {
    font-family: var(--weam-font-mono);
    font-size: var(--weam-text-base);
    color: var(--weam-slate-500);
}
.weam-ve-orphan-actions {
    padding: 12px 20px 16px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ─── Price Alert filter overlay ─── */
.weam-ve-pa-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fffbeb;
	border: 1px solid #f59e0b;
	border-radius: 6px;
	padding: 8px 14px;
	margin-bottom: 10px;
	font-size: var(--weam-text-base);
	font-weight: 500;
	color: var(--weam-amber-800);
}
.weam-ve-pa-banner-clear {
	cursor: pointer;
	font-size: var(--weam-text-xl);
	line-height: 1;
	color: var(--weam-amber-800);
	opacity: 0.6;
}
.weam-ve-pa-banner-clear:hover { opacity: 1; }
.weam-ve-card.weam-ve-pa-highlight {
	border-left: 3px solid #f59e0b;
	box-shadow: 0 0 0 1px #fde68a;
}
.weam-ve-card.weam-ve-pa-dimmed {
	opacity: 0.3;
	pointer-events: none;
}