.y3dv-product-viewer-section {
  clear: both;
  margin: 2rem 0;
}

.y3dv-viewer {
  position: relative;
  width: 100%;
  height: var(--y3dv-height, 600px);
  min-height: 240px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: #f4f4f4;
  touch-action: pan-y;
}

.y3dv-viewer:fullscreen {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
}

.y3dv-lazyback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--y3dv-model-transition, 350ms) ease;
  pointer-events: none;
}

.y3dv-viewer.has-lazyback:not(.is-loaded) .y3dv-lazyback {
  opacity: 1;
  visibility: visible;
}

.y3dv-canvas {
  position: relative;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--y3dv-model-transition, 350ms) ease;
}

.y3dv-viewer.is-loaded .y3dv-canvas {
  opacity: 1;
  visibility: visible;
}

/* During a model change, keep the outgoing canvas visible while its opacity
   transitions to zero. It is removed only after the fade completes. */
.y3dv-viewer.is-model-switching .y3dv-canvas {
  visibility: visible;
}

.y3dv-canvas,
.y3dv-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Configurable brand watermark / logo overlay. */
.y3dv-watermark {
  position: absolute;
  z-index: 4;
  width: min(var(--y3dv-watermark-size, 120px), calc(100% - 24px));
  max-width: calc(100% - 24px);
  opacity: 0;
  pointer-events: auto;
  user-select: none;
  transform-origin: center;
  transition: opacity 160ms ease;
}

.y3dv-watermark.is-ready {
  opacity: var(--y3dv-watermark-opacity, 0.72);
}

.y3dv-watermark.is-ready:hover,
.y3dv-watermark.is-ready:focus-visible {
  opacity: var(--y3dv-watermark-hover-opacity, 1);
}

.y3dv-watermark-link {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
}

.y3dv-watermark-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.y3dv-watermark img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100% - 24px);
  object-fit: contain;
}

.y3dv-viewer[data-watermark-position="top-left"] .y3dv-watermark { top: 12px; left: 12px; }
.y3dv-viewer[data-watermark-position="top-center"] .y3dv-watermark { top: 12px; left: 50%; transform: translateX(-50%); }
.y3dv-viewer[data-watermark-position="top-right"] .y3dv-watermark { top: 12px; right: 12px; }
.y3dv-viewer[data-watermark-position="center-left"] .y3dv-watermark { top: 50%; left: 12px; transform: translateY(-50%); }
.y3dv-viewer[data-watermark-position="center"] .y3dv-watermark { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.y3dv-viewer[data-watermark-position="center-right"] .y3dv-watermark { top: 50%; right: 12px; transform: translateY(-50%); }
.y3dv-viewer[data-watermark-position="bottom-left"] .y3dv-watermark { bottom: 12px; left: 12px; }
.y3dv-viewer[data-watermark-position="bottom-center"] .y3dv-watermark { bottom: 12px; left: 50%; transform: translateX(-50%); }
.y3dv-viewer[data-watermark-position="bottom-right"] .y3dv-watermark { bottom: 12px; right: 12px; }

/* Keep normal page scrolling while the lazy viewer is unloaded. Once the WebGL
   surface is active it owns gestures for orbit/pinch controls. */
.y3dv-viewer.is-loaded .y3dv-canvas,
.y3dv-viewer.is-loaded .y3dv-canvas canvas {
  touch-action: none;
}

/* Minimal translucent subdirectory selector. */
.y3dv-model-menu {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  max-width: min(70%, 360px);
}

.y3dv-viewer .y3dv-model-menu .y3dv-model-select {
  display: block;
  width: auto;
  max-width: 100%;
  min-width: 150px;
  margin: 0;
  padding: var(--y3dv-dropdown-padding-y, 7px) calc(var(--y3dv-dropdown-padding-x, 10px) + 20px) var(--y3dv-dropdown-padding-y, 7px) var(--y3dv-dropdown-padding-x, 10px);
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--y3dv-dropdown-border, rgba(0, 0, 0, 0.14)) !important;
  border-radius: var(--y3dv-dropdown-radius, 6px) !important;
  background-color: var(--y3dv-dropdown-bg, rgba(255, 255, 255, 0.72)) !important;
  color: var(--y3dv-dropdown-text, #1b1b1b) !important;
  font-family: inherit;
  font-size: var(--y3dv-dropdown-font-size, 13px) !important;
  line-height: 1.2;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(var(--y3dv-dropdown-blur, 10px));
  backdrop-filter: blur(var(--y3dv-dropdown-blur, 10px));
  cursor: pointer;
  outline: none;
}

/* Native option popups are partly OS-controlled, but browsers that allow option
   styling now inherit the exact saved Yokoso dropdown colors as well. */
.y3dv-viewer .y3dv-model-menu .y3dv-model-select option {
  background-color: var(--y3dv-dropdown-bg, #ffffff) !important;
  color: var(--y3dv-dropdown-text, #1b1b1b) !important;
}

.y3dv-viewer .y3dv-model-menu .y3dv-model-select:hover,
.y3dv-viewer .y3dv-model-menu .y3dv-model-select:focus-visible {
  background-color: var(--y3dv-dropdown-bg, rgba(255,255,255,.72)) !important;
  color: var(--y3dv-dropdown-text, #1b1b1b) !important;
  border-color: var(--y3dv-dropdown-border, rgba(0,0,0,.14)) !important;
  outline: 1px solid currentColor;
  outline-offset: 1px;
}

.y3dv-status {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1rem;
  background: var(--y3dv-status-bg, rgba(255,255,255,0.18));
  color: var(--y3dv-status-text, #222);
  font-size: var(--y3dv-status-font-size, 13px);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.y3dv-viewer.is-loaded .y3dv-status {
  opacity: 0;
  visibility: hidden;
}

.y3dv-viewer.has-error .y3dv-status {
  background: rgba(255, 245, 245, 0.94);
  color: #9f1d1d;
}

.y3dv-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: y3dv-spin 0.8s linear infinite;
}

.y3dv-viewer.has-error .y3dv-spinner { display: none; }
@keyframes y3dv-spin { to { transform: rotate(360deg); } }

.y3dv-load-button {
  display: none;
  margin: 0;
  padding: var(--y3dv-button-padding-y, 7px) var(--y3dv-button-padding-x, 11px);
  border: 1px solid var(--y3dv-button-border, rgba(0,0,0,.16));
  border-radius: var(--y3dv-button-radius, 5px);
  background: var(--y3dv-button-bg, rgba(255,255,255,.88));
  color: var(--y3dv-button-text, #111);
  font: inherit;
  font-size: var(--y3dv-button-font-size, 12px);
  font-weight: 600;
  line-height: 1.15;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.y3dv-viewer.is-waiting .y3dv-spinner { display: none; }
.y3dv-viewer.is-awaiting-click .y3dv-status { pointer-events: auto; background: transparent; }
.y3dv-viewer.is-awaiting-click .y3dv-load-button { display: inline-flex; }
.y3dv-viewer.is-awaiting-click .y3dv-status-text,
.y3dv-viewer.is-awaiting-click .y3dv-spinner { display: none; }

.y3dv-toolbar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

.y3dv-button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--y3dv-button-border, rgba(0,0,0,.16));
  border-radius: var(--y3dv-button-radius, 5px);
  background: var(--y3dv-button-bg, rgba(255,255,255,.88));
  color: var(--y3dv-button-text, #111);
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.y3dv-button:hover,
.y3dv-button:focus-visible,
.y3dv-load-button:hover,
.y3dv-load-button:focus-visible {
  filter: brightness(1.04);
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.y3dv-help {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  padding: 6px 9px;
  border-radius: 5px;
  background: var(--y3dv-dropdown-bg, rgba(255,255,255,.72));
  color: var(--y3dv-dropdown-text, #333);
  font-size: 12px;
  line-height: 1.25;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--y3dv-dropdown-blur, 10px));
  backdrop-filter: blur(var(--y3dv-dropdown-blur, 10px));
}

.y3dv-viewer:not(.is-loaded) .y3dv-toolbar,
.y3dv-viewer:not(.is-loaded) .y3dv-help {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.y3dv-toolbar,
.y3dv-help,
.y3dv-model-menu {
  transition: opacity 180ms ease, visibility 180ms ease;
}

/* On devices with a real mouse/trackpad, keep the viewer chrome out of the
   way until the pointer is over the viewer. Keyboard focus also reveals it so
   the dropdown and buttons remain accessible. Touch devices keep the normal
   always-visible behavior because they do not have a persistent hover state. */
@media (hover: hover) and (pointer: fine) {
  .y3dv-viewer .y3dv-toolbar,
  .y3dv-viewer .y3dv-help,
  .y3dv-viewer .y3dv-model-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .y3dv-viewer:hover .y3dv-toolbar,
  .y3dv-viewer:hover .y3dv-help,
  .y3dv-viewer:hover .y3dv-model-menu,
  .y3dv-viewer:focus-within .y3dv-toolbar,
  .y3dv-viewer:focus-within .y3dv-help,
  .y3dv-viewer:focus-within .y3dv-model-menu {
    opacity: 1;
    visibility: visible;
  }

  .y3dv-viewer:hover .y3dv-toolbar,
  .y3dv-viewer:hover .y3dv-model-menu,
  .y3dv-viewer:focus-within .y3dv-toolbar,
  .y3dv-viewer:focus-within .y3dv-model-menu {
    pointer-events: auto;
  }

  /* Loading and error messages remain available while a model is not ready.
     Once loaded, the status overlay is already hidden by the base viewer CSS. */
  .y3dv-viewer:not(.is-loaded) .y3dv-status-text {
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .y3dv-viewer:not(.is-loaded):hover .y3dv-status-text,
  .y3dv-viewer:not(.is-loaded):focus-within .y3dv-status-text,
  .y3dv-viewer.has-error .y3dv-status-text {
    opacity: 1;
  }
}


.y3dv-copy-toast {
  position: absolute;
  left: 50%;
  bottom: 48px;
  z-index: 8;
  max-width: calc(100% - 32px);
  padding: 7px 11px;
  border: 1px solid var(--y3dv-dropdown-border, rgba(0,0,0,.14));
  border-radius: var(--y3dv-dropdown-radius, 6px);
  background: var(--y3dv-dropdown-bg, rgba(255,255,255,.82));
  color: var(--y3dv-dropdown-text, #222);
  font-size: 12px;
  line-height: 1.2;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  -webkit-backdrop-filter: blur(var(--y3dv-dropdown-blur, 10px));
  backdrop-filter: blur(var(--y3dv-dropdown-blur, 10px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.y3dv-copy-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.y3dv-missing-model {
  padding: 0.75rem 1rem;
  border-left: 4px solid #dba617;
  background: #fff8e5;
}

@media (max-width: 600px) {
  .y3dv-viewer { height: min(var(--y3dv-height, 600px), 72vh); }
  .y3dv-model-menu { max-width: calc(100% - 88px); }
  .y3dv-model-select { min-width: 130px; }
  .y3dv-help { max-width: calc(100% - 100px); }
}

/* Shift + drag: rotate the model itself while keeping camera and lights fixed. */
.y3dv-viewer.is-model-rotating .y3dv-canvas,
.y3dv-viewer.is-model-rotating .y3dv-canvas canvas { cursor: ew-resize !important; }

.y3dv-viewer.is-model-lifting .y3dv-canvas,
.y3dv-viewer.is-model-lifting .y3dv-canvas canvas { cursor: ns-resize !important; }


@media (prefers-reduced-motion: reduce) {
  .y3dv-viewer .y3dv-lazyback,
  .y3dv-viewer .y3dv-canvas {
    transition-duration: 0ms !important;
  }
}

/* Temporary build label during optimization checks. */
.y3dv-viewer .y3dv-version {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(250, 247, 242, 0.85);
  color: #62584e;
  font: 11px/1.2 sans-serif;
  pointer-events: none;
}
/* Compact settings replace the model chooser. */
.y3dv-viewer .y3dv-settings-button {appearance:none;background:#faf8f4ed;color:#594e43;border:0;border-radius:5px;padding:7px 11px;font:13px/1.3 sans-serif;cursor:pointer;}
.y3dv-viewer .y3dv-settings-panel {position:absolute;z-index:12;top:48px;left:12px;box-sizing:border-box;width:278px;max-width:calc(100% - 24px);max-height:calc(100% - 62px);overflow-y:auto;overscroll-behavior:contain;padding:12px;background:#fffefa;color:#594e43;box-shadow:0 4px 16px #34291e14;border-radius:6px;font:12px/1.35 sans-serif;}
.y3dv-viewer .y3dv-settings-panel[hidden],.y3dv-viewer .y3dv-settings-panel label[hidden] {display:none!important;}
.y3dv-viewer .y3dv-settings-panel h4 {margin:0 0 8px;padding:0 0 6px;border-bottom:1px solid #dcd4c9;color:inherit;font:bold 13px/1.3 sans-serif;}
.y3dv-viewer .y3dv-settings-panel h4:not(:first-child) {margin-top:10px;}
.y3dv-viewer .y3dv-settings-panel label {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px;margin:0 0 7px;color:inherit;font:inherit;}
.y3dv-viewer .y3dv-settings-panel output {font:inherit;color:#7b6e60;}
.y3dv-viewer .y3dv-settings-panel input[type=range] {grid-column:1/-1;width:100%;height:14px;min-height:0;margin:0;padding:0;accent-color:#79624c;cursor:pointer;}
.y3dv-viewer .y3dv-settings-panel select {width:auto;max-width:154px;min-height:26px;height:26px;margin:0;border:0;box-shadow:none;border-radius:4px;padding:3px 6px;color:#594e43;background:#f2eee8;font:inherit;}
.y3dv-viewer .y3dv-settings-panel input[type=color] {width:64px;height:25px;padding:1px;min-height:0;border:0;cursor:pointer;}
.y3dv-viewer .y3dv-settings-panel input[type=checkbox] {width:15px;height:15px;min-height:0;margin:0;accent-color:#79624c;}
.y3dv-viewer .y3dv-settings-actions {display:flex;gap:6px;margin-top:10px;}
.y3dv-viewer .y3dv-settings-actions button {flex:1;min-height:28px;border:0;border-radius:4px;padding:5px;font:inherit;color:#594e43;background:#f2eee8;cursor:pointer;}
.y3dv-viewer .y3dv-settings-button:focus-visible,.y3dv-viewer .y3dv-settings-panel :focus-visible {outline:2px solid #79624c;outline-offset:2px;}

/* Help is available on demand, without covering the bottom-left scenery. */
.y3dv-viewer .y3dv-help-panel {position:absolute;top:56px;right:12px;z-index:13;width:268px;max-width:calc(100% - 24px);max-height:calc(100% - 68px);box-sizing:border-box;overflow:auto;overscroll-behavior:contain;padding:12px;background:#fffefa;color:#594e43;box-shadow:0 4px 16px #34291e14;border-radius:6px;font:12px/1.4 sans-serif;}
.y3dv-viewer .y3dv-help-panel[hidden] {display:none!important;}
.y3dv-viewer .y3dv-help-panel p {margin:7px 0;font:inherit;color:inherit;}
.y3dv-viewer .y3dv-help-panel dl {display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:9px 0;}
.y3dv-viewer .y3dv-help-panel dt {font-weight:600;}
.y3dv-viewer .y3dv-help-panel dd {margin:0;}
.y3dv-viewer .y3dv-help-panel button {border:0;border-radius:4px;padding:6px 12px;background:#f2eee8;color:inherit;font:inherit;cursor:pointer;}
.y3dv-viewer .y3dv-version {top:54px;right:12px;}

/* Fine controls retain generous pointer targets inside WordPress themes. */
.y3dv-viewer .y3dv-settings-panel input[type=range] {
  -webkit-appearance:none;appearance:none;background:transparent;border:0;
  box-shadow:none;outline-offset:2px;height:20px;border-radius:0;
}
.y3dv-viewer .y3dv-settings-panel input[type=range]::-webkit-slider-runnable-track {
  height:3px;background:#ded8cf;border:0;border-radius:2px;box-shadow:none;
}
.y3dv-viewer .y3dv-settings-panel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;appearance:none;width:12px;height:12px;margin-top:-4.5px;
  background:#a18c75;border:2px solid #fffefa;border-radius:50%;box-shadow:0 0 0 1px #a18c7555;
}
.y3dv-viewer .y3dv-settings-panel input[type=range]::-moz-range-track {
  height:3px;background:#ded8cf;border:0;border-radius:2px;
}
.y3dv-viewer .y3dv-settings-panel input[type=range]::-moz-range-thumb {
  width:9px;height:9px;background:#a18c75;border:2px solid #fffefa;border-radius:50%;box-shadow:0 0 0 1px #a18c7555;
}
.y3dv-viewer .y3dv-settings-panel select {background-color:#f2eee8;font-weight:400;}
.y3dv-viewer .y3dv-settings-panel input[type=color] {background:transparent;border-radius:3px;}
.y3dv-viewer .y3dv-settings-panel input[type=color]::-webkit-color-swatch-wrapper {padding:3px 0;}
.y3dv-viewer .y3dv-settings-panel input[type=color]::-webkit-color-swatch {border:1px solid #ded8cf;border-radius:3px;}
.y3dv-viewer .y3dv-settings-panel input[type=color]::-moz-color-swatch {border:1px solid #ded8cf;border-radius:3px;}
.y3dv-viewer .y3dv-settings-panel h4 {font-weight:600;border-bottom-color:#ebe6df;}
.y3dv-viewer .y3dv-settings-actions button:hover {background:#eae3da;}