/** * Print Customizer — Layout Override CSS (customizer-layout.css) * ───────────────────────────────────────────────────────────────── * Loaded via wp_enqueue_style() on single product pages where the * Print Customizer is active (see pc_enqueue_customizer_assets() in * includes/enqueue-and-render.php). * * Sections: * A. BDM Mockup viewport (3:2 aspect, responsive max-width) * B. WooCommerce Quantity + Add-to-Cart area spacing corrections * ───────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════ A. BDM MOCKUP VIEWPORT ────────────────────────────────────────────────────────────────── How BDM's scale system works (do NOT fight it): 1. PHP renders `.bdm-mockup-canvas` at its literal native pixel size (1200×800, set as an inline style width/height). 2. bdm-frontend.js reads the wrap's rendered width via getBoundingClientRect(), computes scale = wrapW / 1200, and applies `transform: scale(scale); transform-origin: 0 0` to the canvas element. This keeps every stored matrix3d corner pin geometrically accurate regardless of display width. 3. The wrap itself carries `position: relative; overflow: hidden; aspect-ratio: 3/2` from bdm-frontend.css. 4. On window resize, BDM re-runs refreshAllCanvases() via a debounced handler. We wire an additional ResizeObserver in pc-orchestrator.js. Viewport width fix: applyLayoutHierarchy() makes #mockup-viewer-section a direct flex child of form.variations_form. The section uses width:100%;max-width:960px and margin:auto to centre within whatever column the form occupies. ══════════════════════════════════════════════════════════════════ */ /* Outer section wrapper — centred, capped width. Heading text lives here above the canvas, so no aspect-ratio on this. */ #mockup-viewer-section { position: relative; width: 100%; max-width: 960px; margin: 20px auto 8px auto; box-sizing: border-box; padding: 0 12px; overflow: hidden; } /* The div the orchestrator injects BDM HTML into. Must fill 100% of the section so the canvas-wrap gets the right getBoundingClientRect().width for scale calculation. */ #print-gallery-viewport-wrapper { width: 100%; box-sizing: border-box; overflow: hidden; } /* ── Override legacy display_width inline max-width ──────────────── BDM v1.7 removed the "Frontend Display Width" admin field, but any scenario saved before that upgrade may still carry a non-zero display_width value (e.g. 600) in the database. PHP's class-bdm- frontend.php renders it as:
This inline style constrains the wrap to 600px, so BDM's JS measures it at 600px and computes scale = 600/1200 = 0.5 — rendering only the top-left quarter of the scene and clipping the rest, producing exactly the "cropped/partial" viewport seen in the screenshots. We nullify it with !important ONLY inside our own wrappers so we don't affect any other BDM usage on the page. After this override takes effect, pc-orchestrator.js calls BDMFrontend.refreshCanvasScale() via the ResizeObserver and the delayed setTimeout, which re-measures the wrap at its correct width and applies the right scale transform. */ #print-gallery-viewport-wrapper .bdm-mockup-canvas-wrap { max-width: none !important; width: 100% !important; } #mockup-viewer-section .bdm-mockup-canvas-wrap { max-width: none !important; width: 100% !important; } /* Placeholder boxes and empty-state placeholder — mimic the 3:2 canvas shape before artwork loads. Flex centering is safe here because there is no absolutely-positioned canvas child inside these elements. */ #mockup-viewer-section .bdm-placeholder-box, #mockup-viewer-section .bdm-mockup-wrap, #print-gallery-viewport-wrapper .pco-bdm-empty { width: 100%; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0 auto 20px auto; background-color: #f7f7f7; border: 1px dashed #e0e0e0; border-radius: 6px; box-sizing: border-box; color: #aaa; font-size: 0.9em; padding: 20px; } /* Gallery wrapper */ #mockup-viewer-section .bdm-mockup-gallery, #print-gallery-viewport-wrapper .bdm-mockup-gallery { width: 100%; overflow: hidden; border-radius: 6px; box-sizing: border-box; } /* Dots row */ #mockup-viewer-section .bdm-mockup-gallery-dots, #print-gallery-viewport-wrapper .bdm-mockup-gallery-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; margin-bottom: 4px; } /* ══════════════════════════════════════════════════════════════════ B. QUANTITY + ADD-TO-CART SPACING ────────────────────────────────────────────────────────────────── applyLayoutHierarchy() moves .woocommerce-variation-add-to-cart to be a direct flex child of form.variations_form (order:5) but adds no margin, so on some themes it butts directly against the element above it — Quantity input, Quantity dropdown, and Add-to-Cart button overlap each other. ══════════════════════════════════════════════════════════════════ */ .woocommerce-variation-add-to-cart, .single_variation_wrap .variations_button { display: flex !important; align-items: center !important; gap: 14px !important; margin-top: 20px !important; margin-bottom: 20px !important; flex-wrap: wrap !important; } .woocommerce-variation-add-to-cart .quantity, .single_variation_wrap .quantity { margin-right: 10px !important; margin-bottom: 0 !important; flex-shrink: 0; } .woocommerce-variation-add-to-cart .quantity input.qty, .single_variation_wrap .quantity input.qty { min-height: 44px !important; height: 44px !important; box-sizing: border-box; } .woocommerce-variation-add-to-cart button.single_add_to_cart_button, .woocommerce-variation-add-to-cart .pco-custom-add-to-cart { min-height: 44px !important; padding: 10px 20px !important; box-sizing: border-box; white-space: nowrap; } .woocommerce-variation-add-to-cart .reset_variations, .single_variation_wrap .reset_variations { display: inline-block; margin-left: 4px; align-self: center; white-space: nowrap; } .woocommerce-variation-price, .woocommerce-variation-availability { margin-bottom: 8px; } /* ── Responsive ──────────────────────────────────────────────────── */ @media ( max-width: 480px ) { .woocommerce-variation-add-to-cart, .single_variation_wrap .variations_button { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .woocommerce-variation-add-to-cart .quantity, .single_variation_wrap .quantity { margin-right: 0 !important; } .woocommerce-variation-add-to-cart button.single_add_to_cart_button, .woocommerce-variation-add-to-cart .pco-custom-add-to-cart { width: 100% !important; } } /* ── Qty + Add to Cart container ────────────────────────────────── */ .woocommerce-variation-add-to-cart, .single_variation_wrap .variations_button { display: flex !important; align-items: center !important; gap: 14px !important; margin-top: 20px !important; margin-bottom: 20px !important; flex-wrap: wrap !important; } /* ── Quantity input group ────────────────────────────────────────── */ .woocommerce-variation-add-to-cart .quantity, .single_variation_wrap .quantity { margin-right: 10px !important; margin-bottom: 0 !important; flex-shrink: 0; } /* ── Quantity input itself ───────────────────────────────────────── */ .woocommerce-variation-add-to-cart .quantity input.qty, .single_variation_wrap .quantity input.qty { min-height: 44px !important; height: 44px !important; box-sizing: border-box; } /* ── Add to Cart / custom button ─────────────────────────────────── */ .woocommerce-variation-add-to-cart button.single_add_to_cart_button, .woocommerce-variation-add-to-cart .pco-custom-add-to-cart { min-height: 44px !important; padding: 10px 20px !important; box-sizing: border-box; white-space: nowrap; } /* ── Clear variation link ────────────────────────────────────────── */ .woocommerce-variation-add-to-cart .reset_variations, .single_variation_wrap .reset_variations { display: inline-block; margin-left: 4px; align-self: center; white-space: nowrap; } /* ── Variation price / availability notice ───────────────────────── */ .woocommerce-variation-price, .woocommerce-variation-availability { margin-bottom: 8px; } /* ── Responsive: stack on narrow screens ─────────────────────────── */ @media ( max-width: 480px ) { .woocommerce-variation-add-to-cart, .single_variation_wrap .variations_button { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .woocommerce-variation-add-to-cart .quantity, .single_variation_wrap .quantity { margin-right: 0 !important; } .woocommerce-variation-add-to-cart button.single_add_to_cart_button, .woocommerce-variation-add-to-cart .pco-custom-add-to-cart { width: 100% !important; } } /* ══════════════════════════════════════════════════════════════════ C. BDM DEBUG PANEL (shown only when ?bdm_debug=1 in URL) ══════════════════════════════════════════════════════════════════ */ .pco-bdm-debug-panel { margin-top: 12px; background: #1e1e2e; color: #cdd6f4; border: 1px solid #45475a; border-radius: 8px; font-family: 'Courier New', Courier, monospace; font-size: 12px; line-height: 1.5; overflow: hidden; } .pco-dbg-header { background: #313244; padding: 8px 12px; font-size: 13px; font-weight: bold; color: #cba6f7; display: flex; align-items: center; justify-content: space-between; } .pco-dbg-close { background: none; border: none; color: #f38ba8; font-size: 18px; cursor: pointer; line-height: 1; padding: 0 4px; } .pco-dbg-close:hover { color: #eba0ac; } .pco-dbg-state { padding: 10px 14px; border-bottom: 1px solid #45475a; word-break: break-all; } .pco-dbg-scenarios { padding: 10px 14px; max-height: 320px; overflow-y: auto; } .pco-dbg-list { margin: 6px 0 0 0; padding-left: 18px; } .pco-dbg-list li { margin-bottom: 5px; } .pco-dbg-ok { color: #a6e3a1; } .pco-dbg-fail { color: #f38ba8; } .pco-bdm-debug-panel code { background: #313244; padding: 1px 4px; border-radius: 3px; color: #89dceb; font-size: 11px; }