.hero-canvas{position:relative;width:100vw;height:100vh;overflow:hidden;background:#0A0A0B;}
#gallery3d{display:block;width:100%;height:100%;outline:none;}
.lux3d-ui{position:absolute;left:16px;top:16px;display:flex;gap:8px;z-index:5}
.lux3d-btn{background:rgba(10,10,11,.6);color:#F7F5F2;border:1px solid rgba(200,169,107,.45);padding:8px 12px;border-radius:999px;font-weight:600;cursor:pointer}

.lux3d-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:10;
}

.lux3d-drawer{
  position:absolute; right:24px; top:24px; bottom:24px; width:min(520px, 92vw);
  border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.35);
  transform: translateX(110%); transition: transform .25s ease; z-index:20;
}
.lux3d-drawer.open{ transform: translateX(0); }
.lux3d-drawer.lux3d-dark{ background:#0A0A0B; color:#F7F5F2; }
.lux3d-drawer .lux3d-body{ padding:20px; }
.lux3d-close{ position:absolute; right:12px; top:8px; border:none; background:transparent; color:#F7F5F2; font-size:28px; cursor:pointer; line-height:1; }
.lux3d-art-large{ width:100%; height:auto; border-radius:16px; margin-bottom:14px; display:block; }
.lux3d-body h3{ font-family:'Ms Madi', cursive; font-size:38px; margin: 8px 0 4px; }
.lux3d-body p{ font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:16px; line-height:1.5; opacity:.92; }
.btn-primary{ display:inline-block; margin-top:12px; padding:12px 20px; border-radius:999px; background:#F7F5F2; color:#0A0A0B; text-decoration:none; font-weight:700; }
.lux3d-displayonly{ display:inline-block; margin-top:12px; padding:8px 12px; border-radius:999px; border:1px solid #CFCFCF; color:#F7F5F2; }

/* Make the hero a positioning context */
.hero-canvas { 
  position: relative !important;
}

/* Pin the existing UI bar to the top-left with 15px margin */
.hero-canvas > .lux3d-ui {
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  z-index: 100 !important;
}

/* Optional polish for the button */
.hero-canvas .lux3d-ui .lux3d-btn {
  background: rgba(0,0,0,0.6);
  color: #f7f5f2;
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  font: 600 14px/1 Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor: pointer;
  transition: background .2s ease;
}
.hero-canvas .lux3d-ui .lux3d-btn:hover {
  background: rgba(255,255,255,0.85);
  color: #0a0a0b;
}