/* ═══════════════════════════════════════════════════════════════ RS PRODUCT CONFIGURATOR — FRONTEND Fully isolated from Elementor / theme global styles. All selectors scoped under .rspc-configurator ═══════════════════════════════════════════════════════════════ */ /* ─── TYPOGRAPHY ─── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Ubuntu:wght@500;700&display=swap'); /* ─── PORTAL ROOT RESET ─── The modal/intro are moved to on mobile (portalMobileModal), so they are NO LONGER descendants of .rspc-configurator. The box-sizing reset below must therefore apply to the portaled nodes directly, otherwise the default content-box makes `width:100vw` + `padding` overflow the viewport. */ .rspc-modal, .rspc-modal *, .rspc-modal *::before, .rspc-modal *::after, .rspc-intro-modal, .rspc-intro-modal *, .rspc-intro-modal *::before, .rspc-intro-modal *::after { box-sizing: border-box; } /* Keep every visible configurator action button on the same brand treatment. * Disabled layer actions retain the same treatment while communicating state * through opacity and cursor only. */ .rspc-configurator .rspc-action-button, .rspc-modal .rspc-action-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-height: 38px !important; padding: 8px 14px !important; border: 1px solid var(--rspc-primary) !important; border-radius: var(--rspc-radius-sm) !important; background: var(--rspc-primary) !important; color: var(--rspc-primary-text) !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; cursor: pointer !important; transition: background-color .2s ease, border-color .2s ease, opacity .2s ease !important; } .rspc-configurator .rspc-action-button:hover, .rspc-configurator .rspc-action-button:focus, .rspc-configurator .rspc-action-button:active, .rspc-modal .rspc-action-button:hover, .rspc-modal .rspc-action-button:focus, .rspc-modal .rspc-action-button:active { border-color: var(--rspc-primary-hover) !important; background: var(--rspc-primary-hover) !important; color: var(--rspc-primary-text) !important; outline: 2px solid transparent !important; outline-offset: 2px !important; } .rspc-configurator .rspc-action-button:focus-visible, .rspc-modal .rspc-action-button:focus-visible { outline-color: var(--rspc-primary) !important; } .rspc-configurator .rspc-action-button:disabled, .rspc-modal .rspc-action-button:disabled { background: var(--rspc-primary) !important; border-color: var(--rspc-primary) !important; color: var(--rspc-primary-text) !important; opacity: .45 !important; cursor: not-allowed !important; } /* Keep contextual layer actions in their own row. The primary action grid * therefore has the same geometry whether an item is selected or not. */ .rspc-modal .rspc-action-bar { display: flex !important; flex-direction: column !important; gap: 8px !important; } .rspc-modal .rspc-primary-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; width: 100% !important; } .rspc-modal .rspc-context-actions { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; width: 100% !important; } .rspc-modal .rspc-context-actions[hidden] { display: none !important; } @media (max-width: 767px) { .rspc-modal .rspc-action-bar { gap: 6px !important; min-height: 0 !important; } .rspc-modal .rspc-primary-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; } .rspc-modal .rspc-primary-actions .rspc-download-menu, .rspc-modal .rspc-primary-actions .rspc-save { min-width: 0 !important; } .rspc-modal .rspc-primary-actions .rspc-save, .rspc-modal .rspc-primary-actions .rspc-status { grid-column: 1 / -1 !important; } .rspc-modal .rspc-context-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .rspc-modal .rspc-context-actions .rspc-action-button { width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════ ROOT — CSS custom properties, scoped box-sizing reset ═══════════════════════════════════════════════════════════════ */ .rspc-configurator, .rspc-configurator *, .rspc-configurator *::before, .rspc-configurator *::after { box-sizing: border-box; } .rspc-configurator { --rspc-primary: #E3181C; --rspc-primary-hover: #C5161B; --rspc-primary-text: #FFFFFF; --rspc-canvas-bg: #f4f6f8; --rspc-panel-bg: #FFFFFF; --rspc-overlay: rgba(13, 23, 37, 0.85); --rspc-border-light: #e8ebef; --rspc-border-medium: #d0d5dd; --rspc-text-dark: #111111; --rspc-text-muted: #687386; --rspc-text-medium: #333333; --rspc-accent-blue: #247cff; --rspc-upload-bg: #f0f2f5; --rspc-upload-hover: #e4e7ec; --rspc-radius: 16px; --rspc-radius-sm: 8px; --rspc-shadow: 0 24px 80px rgba(0,0,0,0.5); display: block !important; clear: both !important; width: 100% !important; flex: 0 0 100% !important; } /* ═══════════════════════════════════════════════════════════════ PRODUCT PAGE — "Configure product" trigger + product title ═══════════════════════════════════════════════════════════════ */ .rspc-open-wrapper { margin: 0 0 8px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .rspc-product-title { display: block; font-family: 'Ubuntu', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--rspc-text-dark) !important; background: transparent !important; border: 0 !important; text-decoration: none !important; margin: 0 !important; padding: 0 !important; } /* ─── Configure button (on product page) ─── */ .rspc-configurator .rspc-open { background: #E3181C !important; border-color: #E3181C !important; color: #fff !important; padding: 13px 24px !important; margin: 0px 0 !important; margin-left: 10px !important; } .rspc-configurator .rspc-open:hover { background: #C5161B !important; border-color: #C5161B !important; color: #fff !important; } .rspc-configurator-enabled form.cart > .single_add_to_cart_button, .rspc-configurator-enabled form.cart .single_add_to_cart_button { display: none !important; } .rspc-download-menu { position: relative; display: inline-block; } .rspc-download-options { position: absolute; z-index: 60; bottom: calc(100% + 6px); left: 0; display: grid; gap: 4px; min-width: 190px; padding: 6px; background: #fff; border: 1px solid var(--rspc-border-light); border-radius: var(--rspc-radius-sm); box-shadow: var(--rspc-shadow); max-width: min(420px, calc(100% - 32px)); } .rspc-download-options[hidden] { display: none; } .rspc-download-options .rspc-download-close { justify-self: end; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--rspc-text-muted); font-size: 22px; line-height: 1; cursor: pointer; } .rspc-download-options .rspc-download-close:hover, .rspc-download-options .rspc-download-close:focus { background: var(--rspc-upload-bg); color: var(--rspc-text-dark); } .rspc-download-options .button { width: 100%; margin: 0; text-align: left; } .rspc-context-actions[hidden] { display: none !important; } .rspc-context-actions .button:disabled { opacity: .45; cursor: not-allowed; } .rspc-italic-btn { margin-left: 4px; } .rspc-italic-btn.is-active, .rspc-bold-btn.is-active { background: var(--rspc-accent-blue); color: #fff; } /* Mobile: Stack buttons vertically on product page */ @media (max-width: 767px) { .single_add_to_cart_button, .rspc-configurator .rspc-open { display: block !important; width: calc(100% - 10px) !important; margin-left: 10px !important; margin-bottom: 10px !important; } } /* Mobile app shell. Kept last so it wins over the legacy responsive rules above without changing the desktop editor. */ @media (max-width: 767px) { html.rspc-scroll-locked, body.rspc-scroll-locked { overflow: hidden !important; } .rspc-modal, .rspc-intro-modal { position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: none !important; height: 100vh !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; padding: 0 !important; } .rspc-modal__panel { width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; max-height: none !important; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important; } .rspc-workspace { min-height: 0 !important; padding: 8px !important; } .rspc-design-area, .rspc-item, .rspc-rhandle, .rspc-move-handle, .rspc-rotate-handle, .rspc-ctrl-delete { touch-action: none !important; } .rspc-modal footer { flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; padding: 8px !important; } .rspc-modal footer .button, .rspc-modal footer .rspc-upload { flex: 0 0 auto !important; width: auto !important; min-height: 42px !important; white-space: nowrap !important; } .rspc-editor-panel { max-height: min(60dvh, 440px) !important; } } .rspc-template-drawer { display: none; position: absolute; z-index: 40; right: 16px; bottom: 72px; width: min(420px, calc(100% - 32px)); max-height: min(60vh, 520px); overflow: auto; background: var(--rspc-panel-bg); border: 1px solid var(--rspc-border-light); border-radius: var(--rspc-radius-sm); box-shadow: var(--rspc-shadow); } .rspc-template-drawer.is-open { display: block; } .rspc-template-drawer__head { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--rspc-border-light); } .rspc-template-drawer-close { border:0; background:transparent; font-size:24px; cursor:pointer; } .rspc-template-drawer__list { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:10px; padding:12px; } .rspc-template-drawer .rspc-template-choice { width:100% !important; height:auto !important; aspect-ratio:1; flex-direction:column; } .rspc-template-drawer .rspc-template-choice span { display:block; max-width:100%; padding:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; } .rspc-template-drawer__list { max-height: min(48vh, 420px); overflow-y: auto; overscroll-behavior: contain; } @media (max-width:767px) { .rspc-template-drawer { left:8px; right:8px; bottom:66px; width:auto; max-height:55dvh; } .rspc-template-drawer__list { max-height: calc(55dvh - 58px); } } @media (max-width: 767px) { .rspc-modal footer { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:6px !important; overflow:visible !important; padding:8px !important; } .rspc-modal footer .button, .rspc-modal footer .rspc-upload { display:flex !important; flex:initial !important; width:100% !important; min-width:0 !important; min-height:38px !important; padding:7px 8px !important; font-size:12px !important; line-height:1.2 !important; white-space:normal !important; text-align:center !important; } .rspc-modal footer .rspc-save, .rspc-modal footer .rspc-status { grid-column:1 / -1; } .rspc-status { max-width:100% !important; overflow-wrap:anywhere; margin:0 !important; padding:6px 8px !important; font-size:12px !important; } .rspc-template-drawer { bottom:0; max-height:65dvh; } } /* Compact, discoverable mobile action area: every action is visible in a two-column grid; the document never receives a horizontal scroller. */ @media (max-width: 767px) { .rspc-modal footer { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:6px !important; overflow:visible !important; padding:8px !important; } .rspc-modal footer .button, .rspc-modal footer .rspc-upload { display:flex !important; width:100% !important; min-width:0 !important; min-height:38px !important; padding:7px 8px !important; font-size:12px !important; line-height:1.2 !important; white-space:normal !important; text-align:center !important; } .rspc-modal footer .rspc-save, .rspc-modal footer .rspc-status { grid-column:1 / -1; } .rspc-status { max-width:100% !important; overflow-wrap:anywhere; margin:0 !important; padding:6px 8px !important; font-size:12px !important; } .rspc-template-drawer { bottom:0; max-height:65dvh; } } /* ═══════════════════════════════════════════════════════════════ MODAL ═══════════════════════════════════════════════════════════════ */ .rspc-modal { display: none !important; position: fixed !important; z-index: 999999 !important; inset: 0 !important; background: var(--rspc-overlay) !important; padding: 20px !important; margin: 0 !important; align-items: center !important; justify-content: center !important; font-family: 'Inter', sans-serif !important; } .rspc-modal.is-open { display: flex !important; } /* Mobile: Full-screen modal with no padding/margin */ @media (max-width: 767px) { .rspc-modal { padding: 0 !important; background: var(--rspc-panel-bg) !important; } .rspc-modal__panel { height: 100vh !important; width: 100vw !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; } } .rspc-modal__panel { position: relative !important; width: min(1200px, 100%) !important; height: min(90vh, 820px) !important; max-width: 100% !important; max-height: 100% !important; background: var(--rspc-panel-bg) !important; border-radius: var(--rspc-radius) !important; border: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-shadow: var(--rspc-shadow) !important; margin: 0 !important; padding: 0 !important; } /* ═══════════════════════════════════════════════════════════════ MODAL HEADER ═══════════════════════════════════════════════════════════════ */ .rspc-modal header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 18px 24px !important; margin: 0 !important; background: var(--rspc-panel-bg) !important; border-bottom: 1px solid var(--rspc-border-light) !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; flex-shrink: 0 !important; } .rspc-modal header strong { display: block !important; font-family: 'Ubuntu', sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--rspc-text-dark) !important; background: transparent !important; border: 0 !important; margin: 0 !important; padding: 0 !important; letter-spacing: -0.01em !important; text-transform: none !important; } .rspc-modal header span { display: block !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; color: var(--rspc-text-muted) !important; background: transparent !important; border: 0 !important; margin: 3px 0 0 !important; padding: 0 !important; } /* ═══════════════════════════════════════════════════════════════ CLOSE BUTTON ═══════════════════════════════════════════════════════════════ */ .rspc-close { display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: var(--rspc-radius-sm) !important; font-size: 28px !important; line-height: 1 !important; cursor: pointer !important; padding: 8px 14px !important; margin: 0 !important; background: var(--rspc-primary) !important; color: var(--rspc-primary-text) !important; font-family: 'Inter', sans-serif !important; font-weight: 400 !important; text-decoration: none !important; box-shadow: none !important; text-shadow: none !important; transition: background-color 0.2s ease !important; -webkit-appearance: none !important; appearance: none !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; text-transform: none !important; letter-spacing: normal !important; } .rspc-close:hover, .rspc-close:focus, .rspc-close:active { background: var(--rspc-primary-hover) !important; color: var(--rspc-primary-text) !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════ WORKSPACE / CANVAS ═══════════════════════════════════════════════════════════════ */ .rspc-workspace { overflow: hidden !important; flex: 1 1 auto !important; background: var(--rspc-canvas-bg) !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 0 !important; min-width: 0 !important; position: relative !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .rspc-product-stage { position: relative !important; display: block !important; max-width: 100% !important; max-height: 100% !important; line-height: 0 !important; flex: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .rspc-product-image { display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } .rspc-design-area { position: absolute !important; overflow: hidden !important; border: 2px dashed var(--rspc-primary) !important; background: rgba(36, 124, 255, 0.07) !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ═══════════════════════════════════════════════════════════════ DESIGN ITEMS (drag/resize elements on canvas) ═══════════════════════════════════════════════════════════════ */ .rspc-item { position: absolute !important; touch-action: none !important; cursor: move !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; display: flex !important; align-items: stretch !important; justify-content: flex-start !important; user-select: none !important; } /* Tiny items: the visual box may be very small, but the selectable / grabbable hit area must stay usable. An invisible padded overlay (only added by JS via the .is-tiny class) guarantees a safe minimum target without forcing the visual text to grow. */ .rspc-item.is-tiny::after { content: '' !important; position: absolute !important; inset: -16px !important; background: transparent !important; pointer-events: auto !important; z-index: 4 !important; } .rspc-item__resize { position: absolute !important; width: 14px !important; height: 14px !important; right: -7px !important; bottom: -7px !important; border-radius: 50% !important; background: var(--rspc-primary) !important; cursor: nwse-resize !important; border: 2px solid var(--rspc-panel-bg) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; margin: 0 !important; padding: 0 !important; } /* ─── Per-item control overlay ─── */ .rspc-item-controls { position: absolute !important; inset: 0 !important; display: block !important; padding: 0 !important; margin: 0 !important; pointer-events: none !important; z-index: 5 !important; box-sizing: border-box !important; border: 1px solid var(--rspc-primary) !important; } /* 8 resize handles */ .rspc-rhandle { position: absolute !important; width: 8px !important; height: 8px !important; border: 1px solid #fff !important; border-radius: 1px !important; background: var(--rspc-primary) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important; pointer-events: auto !important; touch-action: none !important; z-index: 7 !important; /* Invisible hit-target: ensure handles are always grabbable even when item is tiny. The ::before pseudo-element creates a larger invisible hit area (20x20px minimum). */ } .rspc-rhandle::before { content: ''; position: absolute !important; width: 20px !important; height: 20px !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; pointer-events: auto !important; } .rspc-rhandle--tl { display: none !important; } .rspc-rhandle--tc { top: -4px; left: 50%; margin-left: -4px; cursor: ns-resize; } .rspc-rhandle--tr { top: -4px; right: -4px; cursor: nesw-resize; } .rspc-rhandle--ml { top: 50%; margin-top: -4px; left: -4px; cursor: ew-resize; } .rspc-rhandle--mr { top: 50%; margin-top: -4px; right: -4px; cursor: ew-resize; } .rspc-rhandle--bl { bottom: -4px; left: -4px; cursor: nesw-resize; } .rspc-rhandle--bc { bottom: -4px; left: 50%; margin-left: -4px; cursor: ns-resize; } .rspc-rhandle--br { bottom: -4px; right: -4px; cursor: nwse-resize; } /* Move/drag handle (STAR) — sits at the TOP-LEFT corner of the bounding box */ .rspc-move-handle { position: absolute !important; top: -1px !important; left: -1px !important; margin-left: 0 !important; width: 13px !important; height: 13px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 1px solid #fff !important; border-radius: 3px !important; background: var(--rspc-primary) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; cursor: move !important; box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important; pointer-events: auto !important; touch-action: none !important; z-index: 7 !important; } /* Delete button — top-right outside */ .rspc-ctrl-delete { pointer-events: auto !important; position: absolute !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; padding: 0 !important; margin: 0 !important; border: 1px solid #fff !important; border-radius: 50% !important; background: #e02424 !important; color: #fff !important; font-size: 10px !important; line-height: 1 !important; cursor: pointer !important; box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important; -webkit-appearance: none !important; appearance: none !important; touch-action: none !important; top: -8px !important; right: -8px !important; left: auto !important; bottom: auto !important; z-index: 8 !important; } .rspc-ctrl-delete:hover { background: #b91c1c !important; } /* ─── Draggable rotation handle (above top-center of selected item) ─── */ .rspc-rotate-handle { position: absolute !important; top: -26px !important; left: 50% !important; margin-left: -11px !important; right: auto !important; bottom: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; margin: 0 0 0 -11px !important; padding: 0 !important; border: 1.5px solid #fff !important; border-radius: 50% !important; background: var(--rspc-primary) !important; color: #fff !important; font-size: 13px !important; line-height: 1 !important; cursor: grab !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; -webkit-appearance: none !important; appearance: none !important; touch-action: none !important; z-index: 6 !important; } .rspc-rotate-handle:active { cursor: grabbing !important; } /* Connector line from rotate handle to top-center of item */ .rspc-rotate-handle::after { content: ''; position: absolute; top: 20px; left: 50%; margin-left: -1px; width: 2px; height: 8px; background: var(--rspc-primary); pointer-events: none; } /* Live degree label that appears while dragging the rotate handle. */ .rspc-rotate-degrees { position: absolute !important; top: -46px !important; left: 50% !important; transform: translateX(-50%); right: auto !important; bottom: auto !important; display: none; align-items: center !important; justify-content: center !important; min-width: 44px !important; height: 24px !important; padding: 0 8px !important; margin: 0 !important; border-radius: 12px !important; background: var(--rspc-primary) !important; color: #fff !important; font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important; pointer-events: none !important; z-index: 6 !important; } /* Final mobile editor contract: the modal owns the viewport, the canvas gets * the remaining space, and actions form a compact two-column grid instead of * a horizontally scrolling desktop toolbar. These rules intentionally live * after the legacy responsive declarations so one layout wins consistently. */ @media (max-width: 767px) { .rspc-modal .rspc-workspace { touch-action: none !important; } .rspc-modal__panel { display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; min-width: 0 !important; } .rspc-workspace { min-width: 0 !important; min-height: 0 !important; } .rspc-modal footer { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-height: min(34dvh, 260px) !important; overflow-x: hidden !important; overflow-y: auto !important; } .rspc-modal footer .button, .rspc-modal footer .rspc-upload { min-width: 0 !important; min-height: 42px !important; padding: 8px !important; overflow-wrap: anywhere !important; } .rspc-modal footer .rspc-save, .rspc-modal footer .rspc-status { grid-column: 1 / -1 !important; } .rspc-rhandle, .rspc-move-handle, .rspc-ctrl-delete, .rspc-rotate-handle { width: 24px !important; height: 24px !important; } .rspc-rhandle { border-radius: 50% !important; } .rspc-rhandle--tc { top: -12px !important; margin-left: -12px !important; } .rspc-rhandle--tr { top: -12px !important; right: -12px !important; } .rspc-rhandle--ml { left: -12px !important; margin-top: -12px !important; } .rspc-rhandle--mr { right: -12px !important; margin-top: -12px !important; } .rspc-rhandle--bl { bottom: -12px !important; left: -12px !important; } .rspc-rhandle--bc { bottom: -12px !important; margin-left: -12px !important; } .rspc-rhandle--br { right: -12px !important; bottom: -12px !important; } .rspc-ctrl-delete { top: -12px !important; right: -12px !important; font-size: 14px !important; } .rspc-move-handle { top: -12px !important; left: -12px !important; font-size: 15px !important; } .rspc-rotate-handle { top: -38px !important; margin-left: -12px !important; font-size: 16px !important; } } /* Visible state — toggled by JS during rotation drag. */ .rspc-rotate-degrees.rspc-visible { display: inline-flex !important; } /* Allow outside handles to remain visible. */ .rspc-design-area { overflow: visible !important; } /* ═══════════════════════════════════════════════════════════════ RIGHT-SIDE EDITOR PANEL ═══════════════════════════════════════════════════════════════ */ .rspc-editor-panel { display: none; position: absolute; top: 0; right: 0; width: 220px; height: 100%; background: var(--rspc-panel-bg); border-left: 1px solid var(--rspc-border-light); flex-direction: column; z-index: 10; overflow-y: auto; font-family: 'Inter', sans-serif; } .rspc-editor-panel.is-open { display: flex !important; } .rspc-editor-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--rspc-border-light); flex-shrink: 0; } .rspc-editor-panel__close { border: 0; background: transparent; color: var(--rspc-text-muted); font-size: 22px; line-height: 1; cursor: pointer; } .rspc-editor-panel__close-label { display: none; } .rspc-editor-panel__title { font-family: 'Ubuntu', sans-serif; font-size: 14px; font-weight: 700; color: var(--rspc-text-dark); } .rspc-editor-panel__body { padding: 12px 16px; flex: 1; overflow: visible; } .rspc-editor-row { margin-bottom: 14px; } .rspc-editor-row__label { display: block; font-size: 12px; font-weight: 600; color: var(--rspc-text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .rspc-editor-row__control { display: flex; align-items: center; gap: 8px; } .rspc-font-field-wrapper { position: relative; width: 100%; min-width: 0; } /* ─── Font Size Control ─── */ .rspc-fontsize-control { display: flex; align-items: center; gap: 8px; background: var(--rspc-upload-bg); border: 1px solid var(--rspc-border-medium); border-radius: var(--rspc-radius-sm); padding: 4px; } .rspc-fontsize-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--rspc-border-medium); border-radius: 6px; background: var(--rspc-panel-bg); color: var(--rspc-text-dark); font-size: 18px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; -webkit-appearance: none; appearance: none; padding: 0; line-height: 1; user-select: none; } .rspc-fontsize-btn:hover { background: var(--rspc-upload-hover); } .rspc-fontsize-btn:active { background: #d0d5dd; } .rspc-fontsize-value { min-width: 36px; text-align: center; font-size: 16px; font-weight: 700; color: var(--rspc-text-dark); font-variant-numeric: tabular-nums; } /* ─── Font Size Slider ─── */ .rspc-editor-row--slider { margin-top: -6px; margin-bottom: 16px; } .rspc-fontsize-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--rspc-border-medium); outline: none; margin: 0; padding: 0; cursor: pointer; } /* ─── Bold Toggle ─── */ .rspc-bold-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 12px; border: 1px solid var(--rspc-border-medium); border-radius: 6px; background: var(--rspc-panel-bg); color: var(--rspc-text-dark); font-size: 16px; font-weight: 700; cursor: pointer; -webkit-appearance: none; appearance: none; line-height: 1; user-select: none; transition: background-color 0.15s ease, border-color 0.15s ease; } .rspc-bold-btn:hover { background: var(--rspc-upload-hover); } .rspc-bold-btn.is-active { background: var(--rspc-primary); border-color: var(--rspc-primary); color: #fff; } /* ─── Font-family searchable dropdown ─── */ .rspc-fontfamily-search { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--rspc-border-medium); border-radius: 6px; font-size: 13px; background: var(--rspc-panel-bg); color: var(--rspc-text-dark); } .rspc-fontfamily-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100; max-height: 180px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; background: #fff; font-size: 13px; box-sizing: border-box; box-shadow: 0 8px 18px rgba(0,0,0,.14); } .rspc-fontfamily-row { padding: 7px 9px; font-size: 13px; line-height: 1.3; color: var(--rspc-text-dark); cursor: pointer; border-bottom: 1px solid var(--rspc-border-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rspc-fontfamily-row:hover { background: var(--rspc-upload-hover); } .rspc-fontfamily-row:last-child { border-bottom: 0; } .rspc-fontsize-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--rspc-primary); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer; } .rspc-fontsize-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--rspc-primary); border: 2px solid #fff; cursor: pointer; } /* ─── Font Family Select ─── */ .rspc-fontfamily-select { position: static !important; display: block !important; width: 100%; height: 36px; padding: 0 8px; border: 1px solid var(--rspc-border-medium); border-radius: var(--rspc-radius-sm); background: var(--rspc-upload-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23687386'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; color: var(--rspc-text-dark); font-size: 13px; font-weight: 500; font-family: 'Inter', sans-serif; -webkit-appearance: none; appearance: none; cursor: pointer; outline: none; transition: border-color 0.15s ease; } .rspc-fontfamily-search, .rspc-fontfamily-list { display: none !important; } .rspc-fontfamily-select:hover, .rspc-fontfamily-select:focus { border-color: var(--rspc-primary); } /* ─── Remove old single-handle resize ─── */ .rspc-item__resize { display: none !important; } /* ─── Rotation Control (right-side panel) ─── */ .rspc-rotation-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 36px; border: 1px solid var(--rspc-border-medium); border-radius: var(--rspc-radius-sm); background: var(--rspc-upload-bg); color: var(--rspc-text-dark); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; -webkit-appearance: none; appearance: none; padding: 0; font-family: 'Inter', sans-serif; } .rspc-rotation-btn:hover { background: var(--rspc-upload-hover); } /* ─── Delete Button in Panel ─── */ .rspc-editor-delete-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 36px; border: 1px solid #f1b8b3; border-radius: var(--rspc-radius-sm); background: #fff5f4; color: #b42318; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; -webkit-appearance: none; appearance: none; padding: 0; font-family: 'Inter', sans-serif; } .rspc-editor-delete-btn:hover { background: #ffe8e5; } /* ─── Ensure workspace stays to the left of editor panel ─── */ .rspc-modal__panel { position: relative !important; } .rspc-workspace { position: relative !important; } /* When editor panel is open, shrink the workspace — DESKTOP only. On mobile the panel is an absolute bottom sheet and must NOT shrink the canvas (requirement 5). */ @media (min-width: 768px) { .rspc-modal.has-editor-panel .rspc-workspace { width: calc(100% - 220px) !important; max-width: calc(100% - 220px) !important; } } /* Mobile (<=767px): the canvas is the full-screen primary view; the editor panel is an absolute bottom sheet that never shrinks or covers the canvas. */ @media (max-width: 767px) { .rspc-mobile-settings-close { display: block; width: 100%; min-height: 40px; margin-top: 8px; border: 1px solid var(--rspc-border-medium); border-radius: var(--rspc-radius-sm); background: var(--rspc-panel-bg); color: var(--rspc-text-dark); font: 600 13px/1.2 'Inter', sans-serif; } .rspc-modal footer { flex-direction: column !important; align-items: stretch !important; } .rspc-modal footer .rspc-add-text, .rspc-modal footer .rspc-settings, .rspc-modal footer .rspc-download-svg, .rspc-modal footer .rspc-download-png, .rspc-modal footer .rspc-share, .rspc-modal footer .rspc-save { width: 100% !important; justify-content: center !important; } } /* ─── Mobile: keep the controls compact ─── */ @media (max-width: 768px) { .rspc-editor-panel { width: 180px; } .rspc-editor-panel__header { padding: 10px 12px; } .rspc-editor-panel__body { padding: 10px 12px; } .rspc-fontsize-btn { width: 28px; height: 28px; font-size: 15px; } .rspc-fontsize-value { min-width: 30px; font-size: 14px; } .rspc-editor-row { margin-bottom: 10px; } } /* Mobile: keep bottom bar and touch targets compact */ @media (max-width: 560px) { .rspc-editor-panel { width: 160px; } .rspc-editor-panel__header { padding: 8px 10px; } .rspc-editor-panel__body { padding: 8px 10px; } .rspc-fontsize-btn { width: 26px; height: 26px; font-size: 14px; } .rspc-fontsize-value { min-width: 28px; font-size: 13px; } .rspc-item-ctrl, .rspc-rotate-handle, .rspc-rotate-degrees { width: 28px !important; height: 28px !important; font-size: 15px !important; } } /* Mobile-only layout overrides. Desktop geometry and interaction styles stay * unchanged above this breakpoint. */ @media (max-width: 767px) { .single-product form.cart { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; } .single-product form.cart > .single_add_to_cart_button, .single-product form.cart > .rspc-configurator { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .single-product form.cart > .single_add_to_cart_button { margin-bottom: 8px !important; } .rspc-configurator .rspc-open { background: #E3181C !important; border-color: #E3181C !important; color: #fff !important; padding: 13px 24px !important; margin: 0 !important; margin-left: 10px !important; max-width: calc(100% - 10px) !important; } .rspc-modal { inset: 0 !important; width: 100% !important; max-width: 100% !important; height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; overflow: hidden !important; overscroll-behavior: contain !important; z-index: 999999 !important; } .rspc-modal__panel { width: 100% !important; max-width: 100% !important; height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; z-index: 1 !important; pointer-events: auto !important; } .rspc-modal header { padding: 12px 14px !important; } .rspc-modal header strong { font-size: 16px !important; } .rspc-modal header span { font-size: 12px !important; } .rspc-workspace { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; padding: 8px !important; overscroll-behavior: contain !important; } .rspc-modal.has-text-editing .rspc-workspace { align-items: flex-start !important; justify-content: center !important; overflow: auto !important; overflow-x: hidden !important; } .rspc-product-stage { width: auto !important; max-width: 100% !important; max-height: 100% !important; } .rspc-product-image { width: auto !important; max-width: 100% !important; max-height: 100% !important; } .rspc-editor-panel { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; inset: auto 0 0 0 !important; display: none !important; flex: 0 1 auto !important; width: 100% !important; max-width: 100% !important; max-height: 60dvh !important; border-left: 0 !important; border-top: 1px solid var(--rspc-border-light) !important; box-shadow: 0 -8px 24px rgba(0,0,0,0.18) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; z-index: 30 !important; pointer-events: auto !important; background: var(--rspc-panel-bg) !important; } .rspc-editor-panel.is-open.is-mobile-open { display: flex !important; } .rspc-editor-panel__header, .rspc-editor-panel__body { width: 100% !important; } .rspc-editor-panel__close, .rspc-mobile-settings-close, .rspc-fontsize-btn, .rspc-rotation-btn, .rspc-editor-delete-btn { min-height: 40px !important; } .rspc-editor-panel__close { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 6px 10px !important; border: 1px solid var(--rspc-border-medium) !important; border-radius: 6px !important; background: var(--rspc-panel-bg) !important; font-size: 14px !important; font-weight: 700 !important; } .rspc-editor-panel__close-label { display: inline !important; } .rspc-text { touch-action: manipulation !important; user-select: text !important; -webkit-user-select: text !important; } .rspc-rhandle, .rspc-item-ctrl, .rspc-rotate-handle { width: 12px !important; height: 12px !important; } .rspc-rotate-handle { line-height: 12px !important; } .rspc-modal footer { width: 100% !important; max-width: 100% !important; padding: 10px !important; gap: 8px !important; flex-wrap: wrap !important; overflow-y: auto !important; overscroll-behavior: contain !important; position: relative !important; z-index: 3 !important; } .rspc-modal footer .rspc-add-text, .rspc-modal footer .rspc-settings, .rspc-modal footer .rspc-download-svg, .rspc-modal footer .rspc-download-png, .rspc-modal footer .rspc-share, .rspc-modal footer .rspc-save { min-width: 0 !important; max-width: 100% !important; margin: 0 !important; } .rspc-boundary-warning { max-width: calc(100% - 16px) !important; white-space: normal !important; text-align: center !important; } } /* When item is selected, the per-item control overlay draws the selection border, so no extra outline is needed here. */ .rspc-item.is-selected { outline: none !important; } .rspc-text { white-space: pre !important; line-height: 1 !important; color: var(--rspc-text-dark) !important; caret-color: var(--rspc-primary) !important; background: transparent !important; border: 0 !important; margin: 0 !important; padding: 0 !important; outline: none !important; display: block !important; cursor: text !important; user-select: text !important; -webkit-user-select: text !important; width: 100% !important; } .rspc-item img { width: 100% !important; height: 100% !important; object-fit: contain !important; pointer-events: none !important; /* Templates retain their supplied artwork. Customer uploads are converted to real laser preview pixels before being added to the object model. */ filter: none !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; max-width: none !important; max-height: none !important; } /* ═══════════════════════════════════════════════════════════════ FOOTER / CONTROLS ═══════════════════════════════════════════════════════════════ */ .rspc-modal footer { display: flex !important; gap: 10px !important; padding: 16px 24px !important; margin: 0 !important; background: var(--rspc-panel-bg) !important; border-top: 1px solid var(--rspc-border-light) !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; flex-wrap: wrap !important; align-items: center !important; flex-shrink: 0 !important; } /* ═══════════════════════════════════════════════════════════════ FOOTER BUTTONS — fully isolated from theme/Elementor overrides ═══════════════════════════════════════════════════════════════ */ /* * Shared button base — all modals, all configurator buttons. * These override ANY theme / Elementor / WooCommerce button styles. */ .rspc-customize, .rspc-save, .rspc-upload, .rspc-template-choice, .rspc-close { font-family: 'Inter', sans-serif !important; box-sizing: border-box !important; } /* * Primary action (Save & Add / Configure) */ .rspc-save { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: var(--rspc-primary) !important; color: var(--rspc-primary-text) !important; border: 0 !important; border-radius: var(--rspc-radius-sm) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; padding: 10px 20px !important; margin: 0 !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; cursor: pointer !important; transition: background-color 0.2s ease !important; -webkit-appearance: none !important; appearance: none !important; text-transform: none !important; letter-spacing: normal !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; } .rspc-save:hover, .rspc-save:focus, .rspc-save:active { background-color: var(--rspc-primary-hover) !important; color: var(--rspc-primary-text) !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } .rspc-save:disabled { opacity: 0.6 !important; cursor: wait !important; } /* * Secondary action (Customize) */ .rspc-customize { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: var(--rspc-panel-bg) !important; color: var(--rspc-text-dark) !important; border: 1px solid var(--rspc-border-medium) !important; border-radius: var(--rspc-radius-sm) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; padding: 9px 18px !important; margin: 0 !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; cursor: pointer !important; transition: background-color 0.15s ease, border-color 0.15s ease !important; -webkit-appearance: none !important; appearance: none !important; text-transform: none !important; letter-spacing: normal !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; } .rspc-customize:hover, .rspc-customize:focus, .rspc-customize:active { background-color: #f5f6f8 !important; color: var(--rspc-text-dark) !important; border-color: #b0b5bd !important; outline: 0 !important; box-shadow: none !important; } /* * Upload label (styled as secondary button) */ .rspc-upload { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: var(--rspc-upload-bg) !important; color: var(--rspc-text-medium) !important; border: 1px solid var(--rspc-border-medium) !important; border-radius: var(--rspc-radius-sm) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; padding: 9px 18px !important; margin: 0 !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; cursor: pointer !important; transition: background-color 0.15s ease !important; -webkit-appearance: none !important; appearance: none !important; text-transform: none !important; letter-spacing: normal !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; position: relative !important; overflow: hidden !important; } .rspc-upload:hover, .rspc-upload:focus, .rspc-upload:active { background-color: var(--rspc-upload-hover) !important; color: var(--rspc-text-medium) !important; border-color: var(--rspc-border-medium) !important; outline: 0 !important; box-shadow: none !important; } .rspc-upload input[type="file"] { position: absolute !important; inset: 0 !important; opacity: 0 !important; width: 100% !important; height: 100% !important; cursor: pointer !important; } /* ═══════════════════════════════════════════════════════════════ TEMPLATE THUMBNAILS ═══════════════════════════════════════════════════════════════ */ .rspc-templates { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; } .rspc-template-choice { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 64px !important; height: 64px !important; padding: 3px !important; margin: 0 !important; position: relative !important; border: 2px solid transparent !important; border-radius: 8px !important; cursor: pointer !important; overflow: hidden !important; transition: border-color 0.15s ease !important; background: #f8f9fa !important; box-shadow: none !important; text-decoration: none !important; -webkit-appearance: none !important; appearance: none !important; } .rspc-template-choice:hover { border-color: #c0c8d4 !important; background: #f0f2f5 !important; } .rspc-template-choice img { width: 100% !important; height: 100% !important; object-fit: contain !important; filter: none !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; max-width: none !important; max-height: none !important; } .rspc-template-choice small { position: absolute !important; right: 2px !important; bottom: 2px !important; background: rgba(0, 0, 0, 0.75) !important; color: #fff !important; padding: 1px 5px !important; border-radius: 3px !important; font-size: 11px !important; font-weight: 600 !important; font-family: 'Inter', sans-serif !important; line-height: 1.3 !important; margin: 0 !important; border: 0 !important; } .rspc-template-choice.is-active { border-color: var(--rspc-primary) !important; } /* ═══════════════════════════════════════════════════════════════ INTRO MODAL ═══════════════════════════════════════════════════════════════ */ .rspc-intro-modal { display: none !important; position: fixed !important; z-index: 1000001 !important; inset: 0 !important; padding: 20px !important; margin: 0 !important; background: var(--rspc-overlay) !important; align-items: center !important; justify-content: center !important; font-family: 'Inter', sans-serif !important; } .rspc-intro-modal.is-open { display: flex !important; } .rspc-intro-modal__panel { position: relative !important; z-index: 2 !important; width: min(520px, 100%) !important; max-width: 100% !important; background: var(--rspc-panel-bg) !important; border-radius: var(--rspc-radius) !important; border: 0 !important; padding: 34px !important; margin: 0 !important; box-shadow: var(--rspc-shadow) !important; } .rspc-intro-modal__content h2 { display: block !important; font-family: 'Ubuntu', sans-serif !important; font-size: 25px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.015em !important; color: var(--rspc-text-dark) !important; background: transparent !important; border: 0 !important; margin: 0 0 18px !important; padding: 0 !important; text-transform: none !important; } .rspc-intro-modal__content ul { margin: 0 0 24px !important; padding: 0 0 0 22px !important; list-style: disc !important; background: transparent !important; border: 0 !important; } .rspc-intro-modal__content li { margin: 0 0 11px !important; padding: 0 !important; line-height: 1.55 !important; font-size: 15px !important; font-family: 'Inter', sans-serif !important; font-weight: 400 !important; color: var(--rspc-text-medium) !important; background: transparent !important; border: 0 !important; list-style: disc !important; } /* ─── Intro modal close button ─── */ .rspc-intro-close { position: absolute !important; top: 12px !important; right: 12px !important; width: 36px !important; height: 36px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: var(--rspc-radius-sm) !important; background: var(--rspc-primary) !important; color: var(--rspc-primary-text) !important; font-size: 22px !important; font-weight: 400 !important; line-height: 36px !important; cursor: pointer !important; text-align: center !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; transition: background-color 0.2s ease !important; -webkit-appearance: none !important; appearance: none !important; font-family: 'Inter', sans-serif !important; display: inline-block !important; min-width: 0 !important; min-height: 0 !important; } .rspc-intro-close:hover, .rspc-intro-close:focus, .rspc-intro-close:active { background: var(--rspc-primary-hover) !important; color: var(--rspc-primary-text) !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════ ADD TEXT BUTTON ═══════════════════════════════════════════════════════════════ */ .rspc-add-text, .rspc-settings, .rspc-download-svg, .rspc-download-png, .rspc-share { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: var(--rspc-panel-bg) !important; color: var(--rspc-text-dark) !important; border: 1px dashed var(--rspc-border-medium) !important; border-radius: var(--rspc-radius-sm) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; padding: 9px 18px !important; margin: 0 !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; cursor: pointer !important; transition: background-color 0.15s ease, border-color 0.15s ease !important; -webkit-appearance: none !important; appearance: none !important; text-transform: none !important; letter-spacing: normal !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; font-family: 'Inter', sans-serif !important; box-sizing: border-box !important; } .rspc-add-text:hover, .rspc-add-text:focus, .rspc-add-text:active, .rspc-settings:hover, .rspc-settings:focus, .rspc-settings:active, .rspc-download-svg:hover, .rspc-download-svg:focus, .rspc-download-svg:active, .rspc-download-png:hover, .rspc-download-png:focus, .rspc-download-png:active, .rspc-share:hover, .rspc-share:focus, .rspc-share:active { background-color: #f5f6f8 !important; color: var(--rspc-text-dark) !important; border-color: var(--rspc-primary) !important; outline: 0 !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════ STATUS MESSAGES (inline upload feedback) ═══════════════════════════════════════════════════════════════ */ .rspc-status { display: none; width: 100%; padding: 8px 14px; margin: 6px 0 0; border-radius: var(--rspc-radius-sm); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; text-align: center; } .rspc-status--success { display: block !important; background: #d4edda !important; color: #155724 !important; border: 1px solid #c3e6cb !important; } .rspc-status--error { display: block !important; background: #f8d7da !important; color: #721c24 !important; border: 1px solid #f5c6cb !important; } .rspc-status--loading { display: block !important; background: #fff3cd !important; color: #856404 !important; border: 1px solid #ffeeba !important; pointer-events: none !important; } .rspc-status--loading::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid #856404; border-top-color: transparent; border-radius: 50%; animation: rspc-spin 0.6s linear infinite; vertical-align: middle; } @keyframes rspc-spin { to { transform: rotate(360deg); } } /* ─── Boundary Warning ─── */ .rspc-boundary-warning { display: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 20; align-items: center; justify-content: center; padding: 8px 16px; border-radius: var(--rspc-radius-sm); background: #b42318; color: #fff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; box-shadow: 0 2px 8px rgba(0,0,0,0.25); pointer-events: none; white-space: nowrap; } /* ─── Upload loading state ─── */ .rspc-upload.is-loading { opacity: 0.6 !important; pointer-events: none !important; cursor: wait !important; position: relative !important; padding-left: 36px !important; } .rspc-upload.is-loading::before { content: ''; position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid #687386; border-top-color: transparent; border-radius: 50%; animation: rspc-spin 0.6s linear infinite; } /* ═══════════════════════════════════════════════════════════════ CART / ORDER META DISPLAY ═══════════════════════════════════════════════════════════════ */ .rspc-cart-design-image, .rspc-order-design-image { display: block !important; width: 180px !important; max-width: 100% !important; height: auto !important; margin: 4px 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ /* Tablet */ @media (max-width: 900px) { .rspc-modal__panel { width: 100% !important; height: 100% !important; border-radius: 0 !important; } .rspc-modal { padding: 0 !important; } .rspc-modal header { padding: 14px 18px !important; } .rspc-modal header strong { font-size: 16px !important; } .rspc-modal footer { padding: 12px 18px !important; } .rspc-template-choice { width: 56px !important; height: 56px !important; } } /* Phone */ @media (max-width: 600px) { .rspc-modal { padding: 0 !important; } .rspc-modal__panel { width: 100% !important; height: 100% !important; border-radius: 0 !important; } .rspc-modal header { padding: 12px 14px !important; } .rspc-modal header strong { font-size: 14px !important; } .rspc-modal header span { font-size: 12px !important; } .rspc-close { font-size: 24px !important; padding: 6px 12px !important; } .rspc-modal footer { padding: 10px 14px !important; gap: 6px !important; justify-content: center !important; } .rspc-template-choice { width: 48px !important; height: 48px !important; } .rspc-templates { justify-content: center !important; } .rspc-intro-modal__panel { padding: 24px 20px !important; margin: 10px !important; } .rspc-intro-modal__content h2 { font-size: 20px !important; } .rspc-intro-modal__content li { font-size: 14px !important; } .rspc-save { font-size: 12px !important; padding: 8px 14px !important; } } /* Small phone */ @media (max-width: 400px) { .rspc-modal footer { flex-direction: column !important; align-items: stretch !important; } .rspc-templates { justify-content: center !important; } .rspc-save { width: 100% !important; text-align: center !important; } } /* ─── Mobile: Configure Product button on single product page ─── */ @media (max-width: 767px) { .rspc-modal { width: 100vw !important; height: 100vh !important; height: 100dvh !important; inset: 0 !important; } .rspc-modal__panel { width: 100% !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; } .single-product form.cart { flex-wrap: wrap; } .single-product form.cart > .rspc-configurator { margin-top: 16px; } } /* Final mobile shell override: portalized nodes are viewport-owned and the compact action grid stays entirely inside the viewport. */ .rspc-modal, .rspc-intro-modal { --rspc-primary:#E3181C; --rspc-primary-hover:#C5161B; --rspc-primary-text:#fff; --rspc-canvas-bg:#f4f6f8; --rspc-panel-bg:#fff; --rspc-overlay:rgba(13,23,37,.85); --rspc-border-light:#e8ebef; --rspc-border-medium:#d0d5dd; --rspc-text-dark:#111; --rspc-text-muted:#687386; --rspc-text-medium:#333; --rspc-radius:16px; --rspc-radius-sm:8px; --rspc-shadow:0 24px 80px rgba(0,0,0,.5); } @media (max-width: 767px) { .rspc-modal, .rspc-intro-modal { position:fixed !important; inset:0 !important; width:100vw !important; max-width:none !important; height:100vh !important; height:100dvh !important; max-height:none !important; margin:0 !important; padding:0 !important; } .rspc-modal__panel { width:100vw !important; max-width:none !important; height:100vh !important; height:100dvh !important; max-height:none !important; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important; } .rspc-workspace { min-height:0 !important; padding:8px !important; } .rspc-design-area, .rspc-item, .rspc-rhandle, .rspc-move-handle, .rspc-rotate-handle, .rspc-ctrl-delete { touch-action:none !important; } .rspc-modal footer { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:6px !important; overflow:visible !important; padding:8px !important; } .rspc-modal footer .button, .rspc-modal footer .rspc-upload { display:flex !important; flex:initial !important; width:100% !important; min-width:0 !important; min-height:38px !important; padding:7px 8px !important; font-size:12px !important; line-height:1.2 !important; white-space:normal !important; text-align:center !important; } .rspc-modal footer .rspc-save, .rspc-modal footer .rspc-status { grid-column:1 / -1; } .rspc-status { max-width:100% !important; overflow-wrap:anywhere; margin:0 !important; padding:6px 8px !important; font-size:12px !important; } .rspc-editor-panel { max-height:min(60dvh, 440px) !important; } .rspc-template-drawer { left:8px; right:8px; bottom:0; width:auto; max-height:65dvh; } } @media (max-width: 767px) { .rspc-modal.has-text-editing footer.rspc-action-bar { display: none !important; } } /* Keep the template picker as an overlay so opening it never participates in the footer's action-bar sizing or causes the general actions to collapse. */ .rspc-modal .rspc-template-drawer { position: absolute !important; z-index: 80 !important; overflow: hidden !important; } .rspc-modal .rspc-template-drawer__list { overflow-y: auto !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; } /* Authoritative mobile layout (kept last so legacy breakpoints cannot create * a horizontal toolbar or reduce touch targets). */ @media (max-width: 767px) { .rspc-modal__panel { display:grid !important; grid-template-rows:auto minmax(0,1fr) auto !important; min-width:0 !important; } .rspc-workspace { min-width:0 !important; min-height:0 !important; } .rspc-modal footer { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; max-height:min(34dvh,260px) !important; overflow-x:hidden !important; overflow-y:auto !important; } .rspc-modal footer .button, .rspc-modal footer .rspc-upload { min-width:0 !important; min-height:42px !important; padding:8px !important; overflow-wrap:anywhere !important; } .rspc-modal footer .rspc-save, .rspc-modal footer .rspc-status { grid-column:1 / -1 !important; } /* The item transform already counter-scales these controls in JS. Keep the visual affordance compact; the larger invisible handle hit area remains available through .rspc-rhandle::before. */ .rspc-rhandle, .rspc-move-handle, .rspc-ctrl-delete, .rspc-rotate-handle { width:12px !important; height:12px !important; } .rspc-rhandle { border-radius:50% !important; } .rspc-rhandle--tc { top:-6px !important; margin-left:-6px !important; } .rspc-rhandle--tr { top:-6px !important; right:-6px !important; } .rspc-rhandle--ml { left:-6px !important; margin-top:-6px !important; } .rspc-rhandle--mr { right:-6px !important; margin-top:-6px !important; } .rspc-rhandle--bl { bottom:-6px !important; left:-6px !important; } .rspc-rhandle--bc { bottom:-6px !important; margin-left:-6px !important; } .rspc-rhandle--br { right:-6px !important; bottom:-6px !important; } .rspc-ctrl-delete { top:-6px !important; right:-6px !important; font-size:9px !important; } .rspc-move-handle { top:-6px !important; left:-6px !important; font-size:9px !important; } .rspc-rotate-handle { top:-27px !important; margin-left:-6px !important; font-size:10px !important; } .rspc-editor-panel { max-height:min(42dvh,360px) !important; } .rspc-template-drawer { position:absolute !important; inset:auto 8px 8px !important; width:auto !important; max-height:min(58dvh,520px) !important; z-index:100 !important; border-radius:12px !important; } .rspc-template-drawer__list { grid-template-columns:repeat(auto-fill,minmax(76px,1fr)) !important; overflow-y:auto !important; } } /* Final configurator action treatment. Kept after theme- and component- * specific rules so upload, save, download, and layer controls cannot drift * into separate visual variants. */ .rspc-modal .rspc-action-button, .rspc-modal .rspc-action-button:hover, .rspc-modal .rspc-action-button:focus, .rspc-modal .rspc-action-button:active { background: var(--rspc-primary, #E3181C) !important; border: 1px solid var(--rspc-primary, #E3181C) !important; border-radius: var(--rspc-radius-sm, 8px) !important; color: var(--rspc-primary-text, #FFFFFF) !important; font-weight: 600 !important; text-shadow: none !important; } .rspc-modal .rspc-action-button:hover, .rspc-modal .rspc-action-button:focus, .rspc-modal .rspc-action-button:active { background: var(--rspc-primary-hover, #C5161B) !important; border-color: var(--rspc-primary-hover, #C5161B) !important; } .rspc-modal .rspc-action-button:disabled { background: var(--rspc-primary, #E3181C) !important; border-color: var(--rspc-primary, #E3181C) !important; color: var(--rspc-primary-text, #FFFFFF) !important; opacity: .45 !important; cursor: not-allowed !important; } @media (max-width: 767px) { .rspc-modal .rspc-download-menu { position: static !important; } .rspc-modal .rspc-download-options { position: fixed !important; left: max(8px, env(safe-area-inset-left)) !important; right: max(8px, env(safe-area-inset-right)) !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: min(42dvh, 300px) !important; overflow-y: auto !important; padding: 10px !important; z-index: 1000 !important; } .rspc-modal .rspc-download-options .rspc-action-button { width: 100% !important; min-height: 42px !important; } .rspc-modal .rspc-rhandle, .rspc-modal .rspc-move-handle { width: 12px !important; height: 12px !important; touch-action: none !important; } .rspc-modal .rspc-rhandle--tc { top: -6px !important; margin-left: -6px !important; } .rspc-modal .rspc-rhandle--tr { top: -6px !important; right: -6px !important; } .rspc-modal .rspc-rhandle--ml { left: -6px !important; margin-top: -6px !important; } .rspc-modal .rspc-rhandle--mr { right: -6px !important; margin-top: -6px !important; } .rspc-modal .rspc-rhandle--bl { bottom: -6px !important; left: -6px !important; } .rspc-modal .rspc-rhandle--bc { bottom: -6px !important; margin-left: -6px !important; } .rspc-modal .rspc-rhandle--br { right: -6px !important; bottom: -6px !important; } .rspc-modal .rspc-move-handle { top: -6px !important; left: -6px !important; font-size: 9px !important; } .rspc-modal .rspc-ctrl-delete { width: 16px !important; height: 16px !important; top: -8px !important; right: -8px !important; font-size: 10px !important; } .rspc-modal .rspc-rotate-handle { width: 18px !important; height: 18px !important; top: -30px !important; margin-left: -9px !important; font-size: 12px !important; } .rspc-modal .rspc-rhandle::before { width: 32px !important; height: 32px !important; margin: -6px !important; } } @media (max-width: 767px) { .rspc-modal { height: var(--rspc-visual-height, 100dvh) !important; overflow: hidden !important; overscroll-behavior: contain !important; } .rspc-modal__panel { display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; height: var(--rspc-visual-height, 100dvh) !important; min-height: 0 !important; overflow: hidden !important; } .rspc-modal header { flex: none !important; min-width: 0 !important; } .rspc-workspace { min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } .rspc-modal footer { min-height: 0 !important; max-height: min(38dvh, 320px) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; align-content: start !important; } .rspc-editor-panel.is-open.is-mobile-open { max-height: min(58dvh, 480px, calc(var(--rspc-visual-height, 100dvh) - 64px)) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; } .rspc-template-drawer__list, .rspc-modal .rspc-download-options { overflow-y: auto !important; overscroll-behavior: contain !important; } .rspc-modal footer { max-height: min(38dvh, 320px, calc(var(--rspc-visual-height, 100dvh) - 58px)) !important; } } /* Mobile modal surfaces: reserve fixed header/action regions and let only the * content region scroll. The settings sheet is deliberately capped so the * canvas keeps a meaningful visible area while the keyboard is open. */ @media (max-width: 767px) { .rspc-intro-modal { height: var(--rspc-visual-height, 100dvh) !important; min-height: 0 !important; padding: 12px !important; align-items: center !important; overflow: hidden !important; } .rspc-intro-modal__panel { display: flex !important; flex-direction: column !important; width: min(520px, 100%) !important; height: min(92%, 640px) !important; max-height: calc(var(--rspc-visual-height, 100dvh) - 24px) !important; min-height: 0 !important; padding: 22px 16px 14px !important; margin: 0 !important; overflow: hidden !important; } .rspc-intro-modal__content { min-height: 0 !important; flex: 1 1 auto !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; padding: 0 4px 8px 0 !important; } .rspc-intro-modal__actions { flex: 0 0 auto !important; padding-top: 10px !important; border-top: 1px solid var(--rspc-border-light) !important; background: var(--rspc-panel-bg) !important; } .rspc-intro-modal__actions .rspc-intro-accept { display: flex !important; width: 100% !important; min-height: 44px !important; white-space: normal !important; text-align: center !important; } .rspc-editor-panel.is-open.is-mobile-open { top: auto !important; bottom: 0 !important; height: min(42dvh, 300px, calc(var(--rspc-visual-height, 100dvh) - 180px)) !important; max-height: min(42dvh, 300px, calc(var(--rspc-visual-height, 100dvh) - 180px)) !important; min-height: 0 !important; overflow: hidden !important; } .rspc-editor-panel.is-open.is-mobile-open .rspc-editor-panel__body { min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } }