/* Canvas Visualizer uses the shared product-service card and button styles. */
.vhpv-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}
.vhpv-visual::before { content: ''; position: absolute; z-index: -1; inset: 8% 2%; background: radial-gradient(ellipse, #f59e0b10, transparent 68%); }
.vhpv-room {
  position: relative;
  width: calc(100% - 28px);
  max-width: 360px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 3px solid #fffdf8;
  border-radius: var(--vivid-radius-lg, 16px);
  background: var(--vh-linen, #f5f0eb);
  box-shadow: 0 13px 30px -11px #2c28252b;
  isolation: isolate;
}
.vhpv-room-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.vhpv-alignment { position: absolute; z-index: 1; top: 5%; bottom: 45%; left: 47%; border-left: 1px dashed #fffdf69c; opacity: .55; }
.vhpv-placement { position: absolute; z-index: 2; left: 47%; top: 8%; width: 19%; aspect-ratio: 2 / 3; transform: translateX(-50%) scale(.92); transform-origin: 50% 50%; animation: vhpv-fit 12s ease-in-out infinite; }
.vhpv-canvas { position: absolute; inset: 0; background: var(--vh-sand, #ede7df); transform: perspective(500px) rotateY(-7deg); transform-style: preserve-3d; box-shadow: 4px 6px 9px #2c28253d; animation: vhpv-depth 12s ease-in-out infinite; }
.vhpv-canvas > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(.1px); }
.vhpv-canvas-edge { position: absolute; top: 0; left: 100%; width: 6%; height: 100%; transform-origin: left; transform: rotateY(90deg); background: var(--vh-espresso, #2c2825); }
.vhpv-canvas-edge::before { content: ''; position: absolute; inset: 0; background-image: var(--vhpv-art); background-position: right center; background-size: 1666.67% 100%; transform: scaleX(-1); opacity: .8; }
.vhpv-bounds { position: absolute; inset: -6px; border: 1px dashed #fffdf9c7; }
.vhpv-bounds > i { position: absolute; width: 5px; height: 5px; border: 1px solid #ffffffed; border-radius: 1px; background: var(--vh-espresso, #2c2825); }
.vhpv-bounds > i:nth-child(1) { top: -3px; left: -3px; }
.vhpv-bounds > i:nth-child(2) { top: -3px; right: -3px; }
.vhpv-bounds > i:nth-child(3) { bottom: -3px; right: -3px; }
.vhpv-bounds > i:nth-child(4) { bottom: -3px; left: -3px; }
.vhpv-width-guide { position: absolute; left: -6px; right: -6px; bottom: -19px; height: 9px; display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed #fffdf9bd; }
.vhpv-width-guide > i { width: 1px; height: 7px; background: #fffdf9bd; transform: translateY(-5px); }
.vhpv-width-guide > span { position: absolute; top: -7px; left: 50%; padding: 2px 5px; transform: translateX(-50%); border-radius: 4px; background: #fffdf5eb; color: var(--vh-espresso, #2c2825); font: 650 7px/1.2 var(--vh-font-body, Onest, sans-serif); white-space: nowrap; }
.vhpv-scan { position: absolute; z-index: 3; top: 8%; left: 16%; right: 16%; height: 1px; opacity: 0; background: var(--vivid-gradient-main, linear-gradient(90deg, #2563eb, #7c3aed, #db2777, #f59e0b)); box-shadow: 0 0 9px #fff8; animation: vhpv-scan 12s ease-in-out infinite; }
.vhpv-room-label { position: absolute; z-index: 4; bottom: 10px; left: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #ffffffb0; border-radius: 8px; background: #fffdf5dd; backdrop-filter: blur(14px); color: var(--vh-espresso, #2c2825); font: 650 8px/1.3 var(--vh-font-body, Onest, sans-serif); }
.vhpv-room-label svg { display: block; width: 14px; height: 14px; flex-shrink: 0; }
.vhpv-card.is-idle .vhpv-visual *, .vhpv-card.is-idle .vhpv-visual *::before, .vhpv-card.is-idle .vhpv-visual *::after { animation-play-state: paused; }

@keyframes vhpv-fit {
  0%, 18%, 100% { transform: translateX(-50%) scale(.92); }
  42%, 70% { transform: translateX(-50%) scale(1.08); }
}
@keyframes vhpv-depth {
  0%, 18%, 100% { transform: perspective(500px) rotateY(-7deg); }
  42%, 70% { transform: perspective(500px) rotateY(7deg); }
}
@keyframes vhpv-scan {
  0%, 18%, 66%, 100% { top: 8%; opacity: 0; }
  24% { top: 8%; opacity: .45; }
  56% { top: 54%; opacity: .45; }
  64% { top: 54%; opacity: 0; }
}
@media (min-width: 1024px) {
  .vhpv-visual { height: 240px; }
  .vhpv-room { width: calc(100% - 36px); max-width: 330px; }
}
@media (min-width: 601px) and (max-width: 1023px) {
  .vhpv-room { width: calc(100% - 24px); }
}
@media (max-width: 600px) {
  .vhpv-visual { height: 260px; }
  .vhpv-room { width: calc(100% - 40px); max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .vhpv-card:not(.has-motion-override) .vhpv-visual *,
  .vhpv-card:not(.has-motion-override) .vhpv-visual *::before,
  .vhpv-card:not(.has-motion-override) .vhpv-visual *::after { animation: none !important; }
}