/* Write with AI in the product editor ( 6.0.7 ): a button beside a field's label ( or Add media ), a line under the field. */
.ecdv2-field-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.ecdv2-ai-spark { display:inline-block; flex:none; width:14px; height:14px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.9 5.6L19.5 9.5l-5.6 1.9L12 17l-1.9-5.6L4.5 9.5l5.6-1.9zM19 14l.9 2.6 2.6.9-2.6.9L19 21l-.9-2.6-2.6-.9 2.6-.9zM5 15l.6 1.7 1.7.6-1.7.6L5 20l-.6-1.7L2.7 17.7l1.7-.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.9 5.6L19.5 9.5l-5.6 1.9L12 17l-1.9-5.6L4.5 9.5l5.6-1.9zM19 14l.9 2.6 2.6.9-2.6.9L19 21l-.9-2.6-2.6-.9 2.6-.9zM5 15l.6 1.7 1.7.6-1.7.6L5 20l-.6-1.7L2.7 17.7l1.7-.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ecdv2-product .ecdv2-ai-btn { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 10px; border:1px solid var(--ecv2-g300, #cbd5e1); border-radius:6px; background:#fff; color:var(--ecv2-g700, #334155); font-size:12.5px; font-weight:500; line-height:1; cursor:pointer; }
.ecdv2-product .ecdv2-ai-btn .ecdv2-ai-spark { color:var(--ec-brand, var(--ecv2-primary, #2271b1)); }
.ecdv2-product .ecdv2-ai-btn:hover { background:var(--ecv2-g50, #f8fafc); border-color:var(--ecv2-g400, #94a3b8); color:var(--ecv2-g900, #0f172a); }
.ecdv2-product .ecdv2-ai-btn:focus-visible { outline:2px solid var(--ec-brand, var(--ecv2-primary, #2271b1)); outline-offset:1px; }
.ecdv2-product .ecdv2-ai-btn[disabled] { cursor:progress; opacity:.75; }
.ecdv2-product .ecdv2-ai-btn.is-busy .ecdv2-ai-spark { animation:ecdv2-ai-spin 1s linear infinite; }
@keyframes ecdv2-ai-spin { to { transform:rotate( 360deg ); } }
@media ( prefers-reduced-motion: reduce ) { .ecdv2-product .ecdv2-ai-btn.is-busy .ecdv2-ai-spark { animation:none; } }
/* Beside Add media the button follows the media button's look ( admin-details-v2.css ); WordPress spaces those buttons with a margin. */
.ecdv2-product .wp-media-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.ecdv2-product .wp-media-buttons .button.ecdv2-ai-btn .ecdv2-ai-spark { color:var(--ec-brand, var(--ecv2-primary, #2271b1)); }
.ecdv2-ai-note { margin:2px 0 0; font-size:12px; line-height:1.45; color:var(--ecv2-g600, #475569); }
.ecdv2-ai-note:empty { display:none; }
.ecdv2-ai-note.is-error { color:#b91c1c; }
.ecdv2-ai-undo { margin:0 0 0 2px; padding:0; border:0; background:none; color:var(--ec-brand, var(--ecv2-primary, #2271b1)); font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.ecdv2-ai-undo:focus-visible { outline:2px solid currentColor; outline-offset:2px; border-radius:2px; }
.ecdv2-ai-hint { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:4px 0 0; font-size:12px; color:var(--ecv2-g600, #475569); }
.ecdv2-ai-hint .ecdv2-ai-spark { color:var(--ecv2-g400, #94a3b8); }
.ecdv2-ai-hint a { color:var(--ec-brand, var(--ecv2-primary, #2271b1)); text-decoration:underline; }