.sps3d-wrap{--sps3d-blue:#123f9a;--sps3d-ink:#14264b;--sps3d-muted:#61708a;--sps3d-line:#dce5f1;max-width:1180px;margin:32px auto;padding:20px;color:var(--sps3d-ink);font-family:Arial,Helvetica,sans-serif;clear:both}.sps3d-wrap *{box-sizing:border-box}.sps3d-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}.sps3d-header h2{margin:0;color:#123b83;font-size:clamp(23px,3.6vw,32px);line-height:1.2}.sps3d-subtitle{margin:6px 0 0;color:var(--sps3d-muted)}.sps3d-notice{background:#eaf2ff;border:1px solid #cbdcff;border-radius:12px;padding:10px 13px;max-width:360px;flex:1 1 260px;font-size:12px;line-height:1.45}.sps3d-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px}.sps3d-viewer,.sps3d-panel{background:#fff;border:1px solid var(--sps3d-line);border-radius:18px;box-shadow:0 8px 26px #183b7410}.sps3d-viewer{overflow:hidden;min-width:0}.sps3d-viewerbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;background:#fff;border-bottom:1px solid #edf1f7;color:#425574;font-size:13px}.sps3d-viewerbar strong{color:var(--sps3d-blue)}.sps3d-stage{height:min(69vh,690px);min-height:400px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#fff 40%,#f7faff 100%);overflow:hidden;touch-action:none;cursor:grab}.sps3d-stage.is-dragging{cursor:grabbing}.sps3d-product-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none;pointer-events:none;transform-origin:center;transition:filter .12s}.sps3d-toolbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:13px}.sps3d-toolbar button{border:1px solid #cbd8ec;background:#fff;color:var(--sps3d-blue);padding:10px 13px;border-radius:10px;font-weight:700;cursor:pointer;line-height:1.2}.sps3d-toolbar button:hover{background:#edf4ff}.sps3d-panel{padding:17px;align-self:start}.sps3d-panel h3{margin:0 0 12px;color:#123b83;font-size:19px}.sps3d-tip{display:flex;gap:9px;margin:14px 0;font-size:13px;line-height:1.45}.sps3d-tip>span{font-size:20px;min-width:24px}.sps3d-detail{width:100%;border-radius:12px;border:1px solid var(--sps3d-line);display:block;margin-top:10px}.sps3d-small{font-size:11px;line-height:1.5;color:var(--sps3d-muted);margin-top:14px}.sps3d-panel hr{border:0;border-top:1px solid #e8edf5;margin:16px 0}.sps3d-stage:fullscreen{height:100vh;min-height:0;width:100vw;background:#fff}.sps3d-stage:fullscreen .sps3d-product-image{max-width:100%;max-height:100%}@media(max-width:820px){.sps3d-wrap{padding:11px;margin:20px auto}.sps3d-layout{grid-template-columns:1fr}.sps3d-panel{order:2}.sps3d-stage{height:58vh;min-height:350px}.sps3d-notice{max-width:none;flex-basis:100%}.sps3d-viewerbar{font-size:12px}}@media(max-width:480px){.sps3d-stage{min-height:300px}.sps3d-toolbar button{font-size:12px;padding:9px 10px}}

/* Force the complete frame to fit inside the stage, overriding theme/WooCommerce image rules. */
body.single-product .sps3d-wrap .sps3d-stage > img.sps3d-product-image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  flex: 0 1 auto !important;
}

/* WooCommerce product layout: isolate the viewer styles from theme and related-product CSS. */
body.single-product.sps3d-active-product .woocommerce div.product {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 3%;
  row-gap: 0;
  align-items: start;
  width: 100%;
}
body.single-product.sps3d-active-product .woocommerce div.product > .woocommerce-product-gallery {
  display: none !important;
}
body.single-product.sps3d-active-product .woocommerce div.product > .sps3d-wrap {
  display: block !important;
  grid-column: 1;
  grid-row: 1;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
body.single-product.sps3d-active-product .woocommerce div.product > .summary {
  display: block !important;
  grid-column: 2;
  grid-row: 1;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
body.single-product.sps3d-active-product .sps3d-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
}
body.single-product.sps3d-active-product .sps3d-panel { display: none !important; }
body.single-product.sps3d-active-product .sps3d-viewer,
body.single-product.sps3d-active-product .sps3d-stage,
body.single-product.sps3d-active-product .sps3d-toolbar { width: 100%; min-width: 0; }
body.single-product.sps3d-active-product .sps3d-stage {
  height: min(65vh, 650px);
  min-height: 380px;
}
body.single-product.sps3d-active-product .sps3d-header { display: none !important; }
body.single-product.sps3d-active-product .sps3d-toolbar { padding: 12px 6px; }
body.single-product.sps3d-active-product .sps3d-toolbar button { max-width: 100%; }
@media (max-width: 820px) {
  body.single-product.sps3d-active-product .woocommerce div.product {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }
  body.single-product.sps3d-active-product .woocommerce div.product > .sps3d-wrap {
    grid-column: 1;
    grid-row: 1;
  }
  body.single-product.sps3d-active-product .woocommerce div.product > .summary {
    grid-column: 1;
    grid-row: 2;
  }
  body.single-product.sps3d-active-product .sps3d-stage {
    height: 58vh;
    min-height: 340px;
    max-height: 580px;
  }
}
@media (max-width: 480px) {
  body.single-product.sps3d-active-product .sps3d-stage { min-height: 300px; }
  body.single-product.sps3d-active-product .sps3d-toolbar { gap: 6px; }
  body.single-product.sps3d-active-product .sps3d-toolbar button { font-size: 12px; padding: 9px 10px; }
}
