/* 1. Inherit the active Aspro theme, including existing custom.css overrides.
   Keep the .km3d scope: other site blocks must not change. */
.km3d {
  --km3d-ink: var(--white_text_black, #1a1a1a);
  --km3d-muted: var(--light_basic_text_black, #444);
  --km3d-line: var(--stroke_black, #ececec);
  --km3d-red: var(--theme-base-color, #b9121b);
  --km3d-surface: var(--card_bg_black, #fff);
  color: var(--km3d-ink);
  background: var(--km3d-surface);
  margin: 24px 0;
  overflow: hidden;
  font-family: inherit;
  text-align: left;
  isolation: isolate;
}
.km3d *, .km3d *::before, .km3d *::after { box-sizing: border-box; }
.km3d [hidden] { display: none !important; }
/* 2. Header: brand label, title, subtitle and fullscreen button. */
.km3d .km3d-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px; }
.km3d .km3d-eyebrow { margin: 0 0 8px; }
.km3d .km3d-title { margin: 0; padding: 0; }
.km3d .km3d-subtitle { margin: 8px 0 0; }
/* 3. Native btn/btn-default/white/btn-sm own colors, typography, borders and hover/disabled states.
   The widget only controls placement and preserves an explicit keyboard focus ring. */
.km3d .km3d-btn { white-space: normal; margin: 0; }
.km3d .km3d-btn:focus-visible, .km3d .km3d-hotspot:focus-visible { outline: 3px solid var(--km3d-red); outline-offset: 3px; }
.km3d .km3d-btn:disabled { cursor: wait; }
.km3d .km3d-expand { flex-shrink: 0; }
/* 4. Model area: height and background. Lighting itself is configured in src/viewer.js. */
.km3d .km3d-stage {
  position: relative; height: clamp(350px, 48vw, 550px);
  background: radial-gradient(ellipse at 48% 30%, #edf0f3 0%, #d3dae2 58%, #aebac8 100%);
  border-top: 1px solid var(--km3d-line); border-bottom: 1px solid var(--km3d-line);
  overflow: hidden;
}
.km3d .km3d-model-slot, .km3d model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; }
.km3d model-viewer { --poster-color: transparent; --progress-bar-color: var(--km3d-red); --min-hotspot-opacity: .28; outline: none; background: transparent; }
/* 5. Loading/error cover shown before the model is ready. */
.km3d .km3d-cover {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: 30px; text-align: center;
  background: radial-gradient(ellipse, #f7f8faf0, #e0e5eceb);
}
.km3d .km3d-cover p { margin: 0; }
.km3d .km3d-cover span { max-width: 340px; }
/* 6. Zoom/reset buttons over the model and the loading progress bar. */
.km3d .km3d-stage-tools { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.km3d .km3d-stage-tools .km3d-btn { min-width: 32px; }
.km3d .km3d-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #d2d6da; }
.km3d .km3d-progress span { display: block; height: 100%; background: var(--km3d-red); width: 0; }
/* 7. View presets and labels/rotation buttons below the model. */
.km3d .km3d-controls { padding: 24px 24px 0; }
.km3d .km3d-views, .km3d .km3d-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.km3d .km3d-views { margin-bottom: 16px; }
/* 8. Detail description, status messages and permanent footer hint. Texts are not stored in CSS. */
.km3d .km3d-detail { background: var(--light_bg_black, #fafafa); padding: 16px; margin: 24px 24px 0; }
.km3d .km3d-detail strong { display: block; }
.km3d .km3d-detail p { margin: 8px 0 0; }
.km3d .km3d-status { margin: 16px 24px 0; }
.km3d .km3d-status:empty { display: none; }
.km3d .km3d-footer { margin: 16px 24px 24px; }
/* 9. Numbered buttons attached to points on the 3D model. */
.km3d .km3d-hotspot {
  width: 36px; height: 36px; border: 2px solid white; border-radius: 50%;
  background: var(--km3d-red); color: white; font: inherit; font-size: 14px; font-weight: 700;
  box-shadow: 0 2px 10px #15253630; cursor: pointer; padding: 0;
}
/* 10. Full browser viewport, not a 1400px popup. Explicit geometry defeats the site's margin reset. */
dialog.km3d-dialog {
  position: fixed; inset: 0; margin: 0; padding: 0; box-sizing: border-box;
  width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  border: 0; border-radius: 0; background: var(--card_bg_black, #fff); color: var(--white_text_black, #1a1a1a); font-family: inherit;
  overflow: auto; overscroll-behavior: contain;
}
dialog.km3d-dialog::backdrop { background: #101820ad; }
dialog.km3d-dialog > .km3d {
  display: flex; flex-direction: column; width: 100%; max-width: none;
  min-height: 100%; margin: 0; border: 0; border-radius: 0; overflow: visible;
}
dialog.km3d-dialog .km3d-header { position: sticky; top: 0; z-index: 3; background: var(--km3d-surface); }
dialog.km3d-dialog .km3d-stage { flex: 1 0 280px; height: auto; min-height: 280px; }
html:has(dialog.km3d-dialog[open]) { overflow: hidden; }
/* 11. Mobile overrides up to 600px. Keep controls readable without horizontal page scrolling. */
@media (max-width: 600px) {
  .km3d { margin-block: 16px; }
  .km3d .km3d-header { padding: 16px; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
  .km3d .km3d-stage { height: 365px; }
  .km3d .km3d-stage-tools { right: 10px; bottom: 10px; }
  .km3d .km3d-controls { padding: 16px 16px 0; }
  .km3d .km3d-views .km3d-btn { flex: 1 1 calc(50% - 8px); }
  .km3d .km3d-detail { margin: 16px 16px 0; }
  .km3d .km3d-status { margin: 16px 16px 0; }
  .km3d .km3d-footer { margin: 16px; }
}
/* Preserve comfortable touch targets without changing the desktop selector's density. */
@media (max-width: 600px), (pointer: coarse) {
  .km3d .km3d-btn { min-height: 44px; }
  .km3d .km3d-stage-tools .km3d-btn { min-width: 44px; }
}
/* 12. Interactive 3D is omitted from printed pages. */
@media print { .km3d { display: none !important; } }

/* 13. Demo/standalone only. No Aspro CSS or another UI framework is downloaded for the demo.
   This class is absent on the real site; native theme controls remain the production reference. */
.km3d.km3d-standalone { border: 1px solid var(--km3d-line); border-radius: 3px; font-size: 15px; line-height: 1.667; }
.km3d-standalone .km3d-btn { font: inherit; font-size: 13px; line-height: 1.154; padding: 9px 21px; border: 1px solid var(--km3d-red); border-radius: 3px; background: var(--km3d-red); color: #fff; cursor: pointer; }
.km3d-standalone .km3d-btn.white { background: var(--km3d-surface); color: var(--km3d-red); }
.km3d-standalone .km3d-btn.btn-sm { font-size: 12px; padding: 8px 18px; }
.km3d-standalone .km3d-btn:disabled { opacity: .65; }
.km3d-standalone .km3d-title { font-size: 24px; line-height: 1.333; font-weight: 500; }
.km3d-standalone .font_sm { font-size: .933em; line-height: 1.501; }
.km3d-standalone .font_xs { font-size: .867em; line-height: 1.692; }
.km3d-standalone .font_sxs { font-size: .8em; line-height: 1.692; }
.km3d-standalone .muted777 { color: var(--km3d-muted); }
.km3d-standalone .color-theme { color: var(--km3d-red); }
.km3d-standalone .km3d-detail { border: 1px solid var(--km3d-line); border-radius: 3px; }