.majestic-engraving { margin: 1.5em 0; max-width: 480px; }

/* Canvas preview (its own wrapper so it can live in a separate column/card). */
.majestic-engraving-canvas { margin: 0 0 1em; }
.majestic-engraving-canvas canvas { width: 100%; height: auto; border: 1px solid #ddd; background: #fff; display: block; }

/* Controls */
.majestic-engraving label { display: block; margin: .75em 0 .25em; font-weight: 600; }
.majestic-engraving textarea,
.majestic-engraving select,
.majestic-engraving input[type="range"] { width: 100%; box-sizing: border-box; }
.majestic-engraving textarea,
.majestic-engraving select { padding: .4em; }
.majestic-engraving input[type="range"] { accent-color: #000; }
.majestic-engraving .me-autofit { font-style: italic; font-weight: 600; color: #4AADA8; }
.majestic-engraving .me-fit-error { color: #b32d2e; margin: .5em 0; display: none; }
.majestic-engraving.me-overflow .me-fit-error { display: block; }

/* Two-column reorder layout: preview left, controls right (matches rp-edit-grid). */
.majestic-engraving-reorder .majestic-engraving { max-width: none; margin: 0; }
.majestic-engraving-reorder .majestic-engraving-canvas { margin: 0; }

/* Product-page launcher (open/close) + preview that replaces the gallery. */
/* The launcher + controls are injected inside form.cart. When a page builder
   (e.g. Elementor) lays that form out as a flex row (Quantity next to Add to
   Cart), force our two blocks to full width so they wrap onto their own lines
   instead of being squeezed into the row. Harmless when the form isn't flex. */
.majestic-engraving-launch,
#majestic-engraving-controls { flex: 0 0 100% !important; width: 100%; }
.woocommerce div.product form.cart,
form.cart { flex-wrap: wrap !important; }
.majestic-engraving-launch { margin: 1em 0; }
.majestic-engraving-launch .button { margin-right: .5em; }
.majestic-engraving-gallery-canvas { width: 100%; }
.majestic-engraving-gallery-canvas .majestic-engraving-canvas { margin: 0; }
#majestic-engraving-controls { margin: 1em 0; }
#majestic-engraving-controls .majestic-engraving { max-width: none; margin: 0; }