.product-3d-viewer { position: relative; display: block; width: 100%; height: 650px; min-width: 0; overflow: hidden; isolation: isolate; background: #f5f5f5; color: #263332; border: 1px solid #e4e7e5; border-radius: 20px; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.product-3d-viewer *, .product-3d-viewer *::before, .product-3d-viewer *::after { box-sizing: border-box; }
.product-3d-viewer [hidden] { display: none !important; }
.product-3d-viewer .p3d__surface { position: absolute; inset: 0; }
.product-3d-viewer .p3d__canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.product-3d-viewer .p3d__canvas:active { cursor: grabbing; }
.product-3d-viewer .p3d__canvas:focus-visible { outline: 2px solid #347364; outline-offset: -4px; }
.product-3d-viewer .p3d__badge { position: absolute; top: 24px; left: 26px; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .09em; color: #66706d; padding: 9px 12px; border: 1px solid #dadedb; border-radius: 24px; pointer-events: none; }
.product-3d-viewer .p3d__toolbar { position: absolute; left: 22px; bottom: 22px; display: flex; gap: 4px; direction: ltr; padding: 5px; border: 1px solid #e2e5e2; background: #fffffff0; border-radius: 14px; box-shadow: 0 3px 14px #25372c06; backdrop-filter: blur(12px); }
.product-3d-viewer .p3d__button { appearance: none; position: relative; border: 0; border-radius: 9px; min-width: 44px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 12px; background: transparent; color: #4a5652; font-size: 12px; line-height: 1.4; font-family: inherit; cursor: pointer; transition: background .18s, color .18s; }
.product-3d-viewer .p3d__button svg { width: 19px; height: 19px; flex: none; }
.product-3d-viewer .p3d__button:hover { background: #eef2ee; color: #174e3f; }
.product-3d-viewer .p3d__button[aria-pressed="true"] { background: #e5eee8; color: #1f614d; }
.product-3d-viewer .p3d__button:disabled { opacity: .4; cursor: default; }
.product-3d-viewer .p3d__button:focus-visible, .product-3d-viewer .p3d__retry:focus-visible { outline: 2px solid #347364; outline-offset: 2px; }
.product-3d-viewer .p3d__hint { position: absolute; right: 26px; bottom: 29px; margin: 0; color: #7e8581; font-size: 11px; line-height: 2; font-family: inherit; pointer-events: none; }
.product-3d-viewer .p3d__status { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; padding: 32px; background: #f5f5f5f2; text-align: center; font-size: 13px; }
.product-3d-viewer .p3d__spinner { width: 30px; height: 30px; border: 2px solid #dce4df; border-top-color: #347364; border-radius: 50%; animation: p3d-spin .9s linear infinite; }
.product-3d-viewer .p3d__progress { appearance: none; height: 3px; width: 130px; border: 0; border-radius: 2px; overflow: hidden; background: #dce4df; accent-color: #347364; }
.product-3d-viewer .p3d__progress::-webkit-progress-bar { background: #dce4df; }
.product-3d-viewer .p3d__progress::-webkit-progress-value { background: #347364; }
.product-3d-viewer .p3d__retry { border: 1px solid #bdcbc1; border-radius: 8px; background: white; color: #235644; padding: 10px 18px; font: inherit; cursor: pointer; }
.product-3d-viewer:fullscreen, .product-3d-viewer.p3d--expanded { width: 100%; height: 100%; border: 0; border-radius: 0; }
.product-3d-viewer.p3d--expanded { position: fixed; inset: 0; z-index: 2147483647; height: 100dvh; }
@keyframes p3d-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .product-3d-viewer { height: auto; aspect-ratio: 4 / 5; min-height: 420px; border-radius: 16px; }
  .product-3d-viewer .p3d__surface { bottom: 64px; }
  .product-3d-viewer .p3d__toolbar { left: 14px; bottom: 14px; }
  .product-3d-viewer .p3d__button { width: 44px; padding: 0; }
  .product-3d-viewer .p3d__button span { display: none; }
  .product-3d-viewer .p3d__hint { right: 16px; bottom: 23px; max-width: calc(100% - 190px); font-size: 9px; line-height: 1.7; }
  .product-3d-viewer .p3d__badge { top: 18px; left: 18px; }
  .product-3d-viewer:fullscreen, .product-3d-viewer.p3d--expanded { aspect-ratio: auto; height: 100dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .product-3d-viewer .p3d__button { transition: none; }
  .product-3d-viewer .p3d__spinner { animation: none; border-style: dotted; }
}