.model-viewer-wrapper {
  position: relative;
  width: 100%;
  height: 650px;
  background: #f8f9fa;
  border-radius: 1rem;
  overflow: hidden;
}

model-viewer {
  width: 100%;
  height: 100%;
  --progress-bar-color: #e3a51c;
  --progress-bar-height: 3px;
  --poster-color: transparent;
}

model-viewer::part(default-ar-button) {
  bottom: 1rem;
}

[dir="rtl"] model-viewer::part(default-ar-button) {
  left: 1rem;
  right: auto;
}

@media (max-width: 768px) {
  .model-viewer-wrapper { height: 400px; }
}

@media (max-width: 576px) {
  .model-viewer-wrapper { height: 300px; }
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1a1a; }
.viewer-fullscreen { width: 100vw; height: 100dvh; }
.viewer-fullscreen model-viewer { width: 100%; height: 100%; }
.viewer-close {
    position: fixed; top: 1rem; z-index: 10;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.25rem; background: rgba(0,0,0,0.6);
    color: #fff; border: none; border-radius: 2rem;
    font-size: 0.9rem; font-weight: 700; cursor: pointer;
    text-decoration: none; backdrop-filter: blur(4px);
    transition: background 0.2s;
}
.viewer-close:hover { background: rgba(0,0,0,0.85); color: #fff; }
[dir="ltr"] .viewer-close { left: 1rem; }
[dir="rtl"] .viewer-close { right: 1rem; }