.hero-media-editor{display:grid;gap:1rem;padding:1rem;border:1px solid #cfe0e1;border-radius:14px;background:#f5fbfa}.hero-media-editor h3,.hero-media-editor h4,.hero-media-editor p{margin:0}.hero-media-editor details{background:#fff}.hero-media-editor .secondary-button{background:#fff;color:#1b2d49;border:1px solid #9eb8bd;padding:.7rem 1rem}.hero-media-editor button{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}.hero-media-editor button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 7px 16px rgba(27,45,73,.14);filter:saturate(1.08)}.hero-media-editor button:focus-visible{outline:3px solid rgba(0,173,131,.3);outline-offset:3px}.hero-media-editor button:disabled{cursor:wait;opacity:.82}.hero-media-editor button.is-loading{display:inline-flex;align-items:center;justify-content:center;gap:.6rem}.hero-media-editor button.is-loading:before{content:"";width:1em;height:1em;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:contentplus-media-spin .7s linear infinite}.media-ai-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:1rem}.media-ai-actions small{flex:1 1 220px;color:#61748e;line-height:1.5}.media-ai-actions button{min-width:220px;min-height:48px}.selected-media{display:flex;align-items:center;gap:1rem;padding:.75rem;border-radius:12px;background:#fff;border:1px solid #d6e4e5}.selected-media.empty{color:#61748e}.selected-media img{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}.selected-media div{display:grid;gap:.2rem}.media-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.media-library button{padding:0;overflow:hidden;background:#fff;color:#1b2d49;border:2px solid transparent;text-align:left}.media-library button.selected{border-color:#00ad83}.media-library img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.media-library span{display:block;padding:.55rem;font-size:.78rem}.media-library .empty{grid-column:1/-1;color:#61748e}@keyframes contentplus-media-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.hero-media-editor button{transition:none}.hero-media-editor button.is-loading:before{animation-duration:1.4s}}@media(max-width:600px){.selected-media{align-items:flex-start;flex-direction:column}.selected-media img{width:100%}.media-ai-actions{align-items:stretch;flex-direction:column}.media-ai-actions button{width:100%}}
