/* vp-style.css - Virtual Painter styles */
.urwish-vp { max-width: 1200px; margin: 40px auto; padding: 0 20px; font-family: Arial, Helvetica, sans-serif; }
.urwish-hero { background: #f7f8fa; padding: 28px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.urwish-hero h1 { margin: 0 0 10px; font-size: 32px; font-weight: 700; }
.urwish-hero p { margin: 0; color: #334155; }

/* layout */
.vp-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 24px; margin-top: 28px; align-items: start; }
/*.vp-canvas { position: relative; width: 100%; max-width: 800px; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.06); background: #fff; }*/
/*.vp-img { width: 100%; height: auto; display: block; }*/
/*.vp-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }*/

/* controls */
.vp-controls { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.vp-controls h3 { font-size: 18px; margin: 0 0 8px; color: #0f172a; }
.vp-controls p { margin: 0 0 14px; color: #475569; font-size: 14px; }
.vp-group { margin-bottom: 16px; }
.vp-group h4 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.vp-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.vp-swatch { width: 36px; height: 36px; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vp-swatch:focus { outline: 3px solid #0ea5e9; outline-offset: 2px; }
.vp-swatch.active { box-shadow: 0 0 0 2px #0ea5e9 inset, 0 1px 3px rgba(0,0,0,.12); }
.vp-swatch .dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; opacity: .9; }

/* CTA */
.vp-note { margin-top: 18px; font-size: 13px; color: #64748b; }
.vp-cta { margin-top: 10px; display: inline-block; background: #0ea5e9; color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.vp-cta:hover { opacity: .95; }

/* responsive */
@media (max-width: 980px) {
  .vp-wrap { 
      grid-template-columns: repeat(3, 1fr); 
      
  }
  .vp-controls { order: 2; margin-top: 18px; }
}


/* Virtual Painter Base + Overlays */
.vp-canvas {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.vp-img {
  width: 100%;
  height: auto;
  display: block;
}

.vp-base {
  position: relative;
  z-index: 1; /* base always below */
}

.vp-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2; /* overlays always above base */
  display: none; /* toggled on via JS */
  pointer-events: none; /* make sure clicks go through */
}