.signcraft-product-wrap{display:flex;flex-direction:column;gap:14px;max-width:1200px;margin:0 auto;padding:20px 0} .signcraft-product-title{font-size:28px;margin:0} .signcraft-product-desc{color:#555;font-size:15px;line-height:1.5} .signcraft-actions{display:flex;align-items:center;gap:18px;padding:6px 0;flex-wrap:wrap} .signcraft-price-block{display:flex;flex-direction:column;gap:2px;min-width:140px} .signcraft-price-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#666;font-weight:600} .signcraft-price-value{font-family:Georgia,serif;font-size:28px;font-weight:700;color:#1a1612;line-height:1} .signcraft-price-value.loading{color:#999;font-weight:400;font-size:22px} #signcraft-add-to-cart{font-size:16px;font-weight:600;padding:14px 32px;background:#c8501a;color:#fff;border:none;border-radius:28px;cursor:pointer;transition:background .15s;margin-left:auto} #signcraft-add-to-cart:hover:not(:disabled){background:#9a3d13} #signcraft-add-to-cart:disabled{opacity:.6;cursor:wait} .signcraft-status{font-size:13px;color:#555;flex-basis:100%} .signcraft-status.error{color:#c8501a} .signcraft-status.success{color:#2a7a4a} /* Kill Storefront's two-column product layout + right sidebar so the configurator has the full page width to itself. The "single-product" class lives on (same element as signcraft-product), not on a descendant, so chain them on body rather than using a descendant combinator. */ body.signcraft-product div.product{display:block !important;float:none !important} body.signcraft-product div.product::before, body.signcraft-product div.product::after{display:none !important;content:none !important} body.signcraft-product div.product .images, body.signcraft-product div.product .woocommerce-product-gallery, body.signcraft-product div.product .entry-summary > .price, body.signcraft-product #secondary, body.signcraft-product .widget-area{display:none !important} body.signcraft-product div.product .summary, body.signcraft-product div.product .entry-summary{ float:none !important;width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important; } body.signcraft-product #primary, body.signcraft-product .content-area{ width:100% !important;float:none !important;margin:0 !important; } /* Desktop: break out of theme width, canvas left / editor right */ @media (min-width:1024px){ body.signcraft-product .col-full{max-width:94em} .signcraft-product-wrap{max-width:none;padding:28px 0 36px} .signcraft-product-title{font-size:34px} .signcraft-app{ flex-direction:row !important; height:min(820px,82vh) !important; gap:16px !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:visible !important; background:transparent !important; } .signcraft-app .lp{ order:1 !important; width:400px !important; max-height:none !important; flex-shrink:0 !important; border:1px solid var(--ls) !important; border-radius:10px !important; background:var(--pbg) !important; box-shadow:0 6px 24px rgba(0,0,0,.08) !important; } .signcraft-app .app{ order:2;flex:1 1 auto;min-width:0; border:1px solid var(--ls); border-radius:10px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.08); background:var(--cream); } .signcraft-actions{padding:10px 4px} .signcraft-price-value{font-size:34px} } @media (min-width:1440px){ .signcraft-app{height:min(880px,84vh) !important} .signcraft-app .lp{width:420px !important} } @media (max-width:600px){ #signcraft-add-to-cart{margin-left:0;width:100%} .signcraft-actions{gap:12px} } /* Mobile / tablet: 3D preview as a rounded card on top, letter-settings below with no border and no internal scroll. */ @media (max-width:1023px){ .signcraft-app{ border:0 !important;border-radius:0 !important; background:transparent !important;overflow:visible !important; height:auto !important; } .signcraft-app > header{ order:1;border-radius:0; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); } .signcraft-app .app{ order:2; border:0;border-radius:0; overflow:hidden;background:var(--cream); height:min(453px,52.65vh);flex:0 0 auto; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); background:#fff; } .signcraft-app .lp{ order:3; margin-top:12px; border:0;background:var(--pbg); max-height:none;overflow:visible; } }