/* Product mockup canvas and logo upload controls. */
.canvas-container { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; max-width: 100%; max-height: 100%; overflow: hidden; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.3s ease; }
.main-img-wrap .main-img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; transform: none !important; }
.logo-overlay-container { position: absolute; top: 40%; left: 40%; width: 25%; height: 25%; cursor: move; display: flex; align-items: center; justify-content: center; z-index: 20; user-select: none; }
.logo-overlay-container::after { content: ''; position: absolute; inset: -4px; border: 1.5px dashed transparent; border-radius: 4px; transition: border-color 0.2s; pointer-events: none; }
.logo-overlay-container:hover::after, .logo-overlay-container.dragging::after { border-color: var(--terra); }
.logo-overlay-img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0.85; display: none; filter: drop-shadow(0 2px 6px rgba(30,21,18,0.15)); transition: opacity 0.2s, filter 0.25s ease; will-change: filter; }
.upload-section { margin-bottom: 1.25rem; background: var(--white); padding: 1rem; border-radius: var(--r); border: 1px solid var(--cream-d); }
.upload-title { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--brown-l); margin-bottom: .5rem; }
.upload-zone { border: 2px dashed var(--cream-d); border-radius: var(--r-sm); padding: 1.25rem 1rem; text-align: center; cursor: pointer; background: var(--cream); transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--terra); background: rgba(196,112,74,.05); }
.upload-icon { font-size: 1.5rem; color: var(--terra); }
.upload-text { font-size: .78rem; color: var(--brown-m); font-weight: 500; }
.upload-subtext { font-size: .65rem; color: var(--brown-l); }
.file-input { display: none; }
.logo-uploaded-badge { display: none; align-items: center; justify-content: space-between; background: rgba(196,112,74,.12); border: 1.5px solid var(--terra); border-radius: var(--r-sm); padding: .5rem .75rem; margin-top: .5rem; font-size: .75rem; color: var(--terra-d); font-weight: 600; }
.logo-remove-btn { background: none; border: none; color: var(--terra-d); cursor: pointer; font-size: 1rem; padding: 0 .25rem; }
.modal-stepper { display: flex; gap: 1.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--cream-d); padding-bottom: .5rem; }
.step-indicator { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--brown-l); display: flex; align-items: center; gap: .3rem; }
.step-indicator.active { color: var(--terra); }
.step-num { background: var(--cream-d); width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; color: var(--brown); }
.step-indicator.active .step-num { background: var(--terra); color: var(--white); }

/* Lightroom lightbox zoom system. */
.lightroom-lightbox { position: fixed; inset: 0; background: rgba(30, 21, 18, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.lightroom-lightbox.open { opacity: 1; pointer-events: auto; }
.ll-close { position: absolute; top: 1.5rem; right: 2rem; color: #fff; font-size: 3rem; font-weight: 300; cursor: pointer; user-select: none; transition: color 0.2s; z-index: 10001; }
.ll-close:hover { color: var(--terra-l); }
.ll-content-wrap { position: relative; max-width: 90vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; transform: scale(0.92); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.lightroom-lightbox.open .ll-content-wrap { transform: scale(1); }
.ll-content-wrap img#lightroomImg { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.ll-logo-wrap { position: absolute; pointer-events: none; display: none; align-items: center; justify-content: center; }
.ll-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }

/* Elementor theme isolation for product controls. */
#storeSection .mft-btn, #productOverlay .mft-btn, .o2-promo-store .mft-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; border-radius: 50% !important; border: none !important; background: #ffffff !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; color: var(--brown-d) !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; font-size: 16px !important; transition: all 0.2s ease !important; box-sizing: border-box !important; }
#storeSection .mft-btn svg, #productOverlay .mft-btn svg, .o2-promo-store .mft-btn svg { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; display: block !important; margin: 0 auto !important; color: var(--brown-d) !important; }
#storeSection .mft-btn:hover, #productOverlay .mft-btn:hover, .o2-promo-store .mft-btn:hover { background: var(--cream-l) !important; transform: scale(1.05) !important; color: var(--terra) !important; }
#storeSection .mft-btn:hover svg, #productOverlay .mft-btn:hover svg, .o2-promo-store .mft-btn:hover svg { color: var(--terra) !important; }
#storeSection .accordion-trigger, #productOverlay .accordion-trigger, .o2-promo-store .accordion-trigger { width: 100% !important; padding: 0.875rem 0 !important; background: none !important; border: none !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-family: 'Cormorant Garamond', serif !important; font-size: 1.15rem !important; font-weight: 700 !important; color: var(--brown-d) !important; cursor: pointer !important; text-align: left !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; }
#storeSection .accordion-trigger:hover, #storeSection .accordion-trigger:active, #storeSection .accordion-trigger.active, #productOverlay .accordion-trigger:hover, #productOverlay .accordion-trigger:active, #productOverlay .accordion-trigger.active, .o2-promo-store .accordion-trigger:hover, .o2-promo-store .accordion-trigger:active, .o2-promo-store .accordion-trigger.active { background: none !important; color: var(--terra) !important; border: none !important; box-shadow: none !important; }
#storeSection .qty-input-field, #productOverlay .qty-input-field, .o2-promo-store .qty-input-field { width: 50px !important; border: none !important; border-style: none !important; text-align: center !important; font-size: 0.95rem !important; font-weight: 600 !important; color: var(--brown-d) !important; background: transparent !important; outline: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; height: 32px !important; -moz-appearance: textfield !important; }