.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; } /* Artwork confirmation popup (shown when adding an engraved item to the basket). */ .me-confirm-backdrop { display: none; position: fixed; inset: 0; z-index: 100000; background: rgba( 0, 0, 0, .6 ); padding: 1em; overflow: auto; } .me-confirm-backdrop.is-open { display: flex; align-items: center; justify-content: center; } .me-confirm { background: #fff; color: #222; max-width: 480px; width: 100%; max-height: 90vh; overflow: auto; padding: 1.5em; box-sizing: border-box; text-align: left; } .me-confirm h3 { margin: 0 0 .5em; } .me-confirm p { margin: 0 0 1em; } .me-confirm-preview img { display: block; width: 100%; height: auto; border: 1px solid #ddd; } .me-confirm-preview img + img { margin-top: .75em; } .me-confirm-check { display: flex; align-items: flex-start; gap: .5em; margin: 1em 0; font-weight: 600; } .me-confirm-check input { margin: .2em 0 0; } .me-confirm-actions { display: flex; flex-wrap: wrap; gap: .5em; } /* The popup is appended to , outside WooCommerce's `.woocommerce .button` scope, so it carries its own button styling and works on any page. */ .me-confirm-actions .button { font: inherit; padding: .7em 1.2em; border: 1px solid #222; background: #fff; color: #222; cursor: pointer; } .me-confirm-actions .button.alt { background: #222; color: #fff; } .me-confirm-actions .button[disabled] { opacity: .5; cursor: not-allowed; }