/* Benny 34 Clean Run: one controller, real typing fields, no repeated redraw loops. */
body.pages-ready section{display:none !important;}
body.pages-ready section.active-page{display:block !important;}
#panels #panelTextInput{min-height:110px;resize:vertical;}
#panels #panelPhotoUpload{display:block;width:100%;margin:8px 0 12px;padding:10px;border-radius:14px;border:1px solid rgba(240,207,130,.42);background:rgba(255,255,255,.08);color:#fff7e6;}
#panels #trayDirectEditor,#panels #insideLidDirectEditor{pointer-events:auto !important;-webkit-tap-highlight-color:transparent;}
#panels #trayDirectEditor textarea.tray-text-stage,#panels #insideLidDirectEditor textarea.inside-text-stage{border:0 !important;outline:0 !important;resize:none !important;background:transparent !important;color:inherit !important;caret-color:#fff4c7 !important;pointer-events:auto !important;user-select:text !important;-webkit-user-select:text !important;cursor:text !important;overflow:hidden !important;white-space:pre-wrap !important;text-align:center !important;appearance:none !important;}
#panels #trayDirectEditor textarea.tray-text-stage:focus,#panels #insideLidDirectEditor textarea.inside-text-stage:focus{background:rgba(255,255,255,.10) !important;box-shadow:inset 0 0 0 1px rgba(255,244,199,.75) !important;}
#panels #trayDirectEditor textarea.tray-text-stage::placeholder,#panels #insideLidDirectEditor textarea.inside-text-stage::placeholder{color:currentColor;opacity:.70;}
#panels #trayDirectEditor .tray-photo-clicker,#panels #insideLidDirectEditor .inside-photo-clicker{pointer-events:auto !important;}
#panels #insideLidDirectEditor.inside-active:not(.inside-has-photo) .inside-photo-clicker,#panels #trayDirectEditor.tray-active:not(.tray-has-photo) .tray-photo-clicker{background:rgba(0,0,0,.22) !important;border-color:rgba(255,244,199,.65) !important;}
#panels #insideLidDirectEditor.inside-active .inside-photo-clicker::before,#panels #trayDirectEditor.tray-active .tray-photo-clicker::before{opacity:.92 !important;}
#panels #insideLidDirectEditor:not(.inside-active) .inside-photo-clicker::before,#panels #trayDirectEditor:not(.tray-active) .tray-photo-clicker::before{opacity:0 !important;}
#panels #insideLidDirectEditor.inside-active,#panels #trayDirectEditor.tray-active,#panels #frontMarbleDirectClick.benny34-active,#panels .guide-top-option-surface.benny34-active{box-shadow:0 0 0 2px rgba(255,244,199,.72),0 0 16px rgba(240,207,130,.34) !important;}
#panels .benny34-pressed,.bottom-nav .btn.benny34-pressed,.mobile-nav .btn.benny34-pressed,.side-link.benny34-pressed{transform:translateY(2px) scale(.985) !important;filter:brightness(.94) !important;}
#panels .panel-tab.active,#panels .panel-hitarea.active,#panels .panel-hotspot.active{opacity:1 !important;}
#panels #panelCleanPreview .panel-photo-stage.active,#panels #panelCleanPreview.has-photo .panel-photo-stage{display:block !important;opacity:1 !important;}
#panels #panelCleanPreview .panel-photo-stage img{max-width:100%;max-height:100%;object-fit:cover;}
#panels #insideLidDirectEditor{left:19.70% !important;top:12.18% !important;width:38.55% !important;height:10.70% !important;}
#panels #trayDirectEditor{top:28.25% !important;}
#panels #trayDirectEditor:not(.tray-photo-material) .tray-photo-clicker,#panels #insideLidDirectEditor:not(.inside-photo-material) .inside-photo-clicker{display:block !important;left:4px !important;width:38% !important;opacity:.82;}
#panels #trayDirectEditor:not(.tray-active) .tray-photo-clicker,#panels #insideLidDirectEditor:not(.inside-active) .inside-photo-clicker{opacity:0;}

/* Benny 36: make the shared photo upload control explicit and keep inside-lid photos visible immediately. */
#panels #panelPhotoUploadLabel{
  display:block !important;
  width:100% !important;
  margin:12px 0 8px !important;
  padding:13px 16px !important;
  border-radius:999px !important;
  border:1px solid rgba(240,207,130,.82) !important;
  background:linear-gradient(135deg,rgba(244,217,141,.94),rgba(184,149,84,.94)) !important;
  color:#2b180d !important;
  font-weight:900 !important;
  text-align:center !important;
  cursor:pointer !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}
#panels #panelPhotoUploadLabel:active{
  transform:translateY(2px) scale(.985) !important;
}
#panels #insideLidDirectEditor.inside-has-photo .inside-photo-stage,
#panels #insideLidDirectEditor.inside-photo-material .inside-photo-stage{
  display:block !important;
}
#panels #insideLidDirectEditor.inside-has-photo .inside-photo-stage img{
  opacity:1 !important;
  visibility:visible !important;
}
#panels #insideLidDirectEditor.inside-active.inside-photo-material:not(.inside-has-photo) .inside-photo-clicker::before{
  content:"Upload lid photo" !important;
  opacity:.95 !important;
}
#panels #panelCleanPreview.benny-inside-component.has-photo .panel-photo-stage,
#panels #panelCleanPreview.surface-inside.has-photo .panel-photo-stage{
  display:block !important;
  opacity:1 !important;
}

/* Benny 43: separate large Top Panel preview under the four small Top Panel option samples. */
#panels .top-panel-large-preview-card{
  display:block !important;
  width:100% !important;
  margin:18px auto 6px !important;
  padding:0 !important;
  background:#000 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#panels .top-panel-large-preview-card h4,
#panels .top-panel-large-preview-card p,
#panels .top-panel-large-preview-card .closed-top-mode-note{
  display:none !important;
}
#panels .top-panel-large-preview-wrap{
  position:relative !important;
  display:block !important;
  max-width:980px !important;
  margin:0 auto !important;
  background:#000 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
}
#panels .top-panel-large-preview-wrap:active{
  transform:translateY(2px) scale(.995) !important;
}
#panels .top-panel-large-preview-wrap img#closedWoodImage{
  display:block !important;
  width:100% !important;
  height:auto !important;
  background:#000 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#panels .top-panel-open-options{
  position:absolute !important;
  right:12px !important;
  top:12px !important;
  z-index:8 !important;
  border:1px solid rgba(240,207,130,.72) !important;
  background:rgba(0,0,0,.70) !important;
  color:#f4d98d !important;
  border-radius:999px !important;
  padding:8px 12px !important;
  font-size:.78rem !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
#panels .top-panel-floating-options{
  position:absolute !important;
  left:50% !important;
  top:12px !important;
  transform:translateX(-50%) translateY(-6px) !important;
  z-index:9 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:8px !important;
  width:min(92%,760px) !important;
  padding:10px !important;
  background:rgba(0,0,0,.78) !important;
  border:1px solid rgba(240,207,130,.46) !important;
  border-radius:18px !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .16s ease, transform .16s ease !important;
}
#panels .top-panel-large-preview-wrap.options-open .top-panel-floating-options,
#panel-text-preview[data-active-panel="top"] .top-panel-large-preview-wrap .top-panel-floating-options{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}
#panels .top-panel-floating-options button{
  appearance:none !important;
  border:1px solid rgba(240,207,130,.62) !important;
  background:linear-gradient(180deg,rgba(43,31,21,.96),rgba(12,9,7,.96)) !important;
  color:#fff3cf !important;
  border-radius:999px !important;
  padding:8px 12px !important;
  font-size:.82rem !important;
  font-weight:800 !important;
  cursor:pointer !important;
}
#panels .top-panel-floating-options button.active,
#panels .top-panel-floating-options button.benny-selected{
  background:linear-gradient(180deg,#f4d98d,#b89554) !important;
  color:#211206 !important;
}
#panels .top-panel-large-preview-wrap #closedTopVisual,
#panels .top-panel-large-preview-wrap #closedTopInput{
  position:absolute !important;
  left:18.8% !important;
  top:18.8% !important;
  width:72.6% !important;
  height:57.5% !important;
  z-index:4 !important;
  border-radius:3px !important;
  transform:none !important;
}
#panels .top-panel-large-preview-wrap #closedTopVisual{
  pointer-events:none !important;
  box-sizing:border-box !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#panels .top-panel-large-preview-wrap #closedTopInput{
  z-index:6 !important;
  box-sizing:border-box !important;
  border:0 !important;
  outline:0 !important;
  resize:none !important;
  background:transparent !important;
  color:#f2d07a !important;
  caret-color:#fff5c6 !important;
  text-align:center !important;
  font-weight:800 !important;
  line-height:1.18 !important;
  padding:14% 8% 5% !important;
  font-size:clamp(1rem,2.1vw,1.55rem) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.75) !important;
  cursor:text !important;
  pointer-events:auto !important;
}
#panels .top-panel-large-preview-wrap #closedTopInput:focus{
  background:rgba(0,0,0,.10) !important;
  box-shadow:inset 0 0 0 1px rgba(255,244,199,.72) !important;
}
#panels .top-panel-large-preview-wrap #closedTopStyleLabel{
  position:absolute !important;
  left:18.8% !important;
  bottom:18.8% !important;
  z-index:7 !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  background:rgba(0,0,0,.72) !important;
  border:1px solid rgba(240,207,130,.42) !important;
  color:#f4d98d !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}
#panels .top-panel-large-preview-wrap #closedTopPhotoStage{
  display:none !important;
  position:absolute !important;
  left:6% !important;
  top:10% !important;
  width:35% !important;
  height:80% !important;
  overflow:hidden !important;
  border-radius:10px !important;
  background:#111 !important;
  border:2px solid rgba(237,209,136,.78) !important;
}
#panels .top-panel-large-preview-wrap #closedTopPhotoStage img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  filter:grayscale(1) contrast(1.18) !important;
}
#panels .top-panel-large-preview-wrap #closedTopVisual.style-wood-engraving{
  background:transparent !important;
  border:1px dashed rgba(240,207,130,.42) !important;
}
#panels .top-panel-large-preview-wrap #closedTopVisual.style-plaque-panel{
  background:linear-gradient(135deg,#1a1511,#050505 55%,#241a12) !important;
  border:3px solid rgba(214,170,89,.82) !important;
  box-shadow:inset 0 0 0 1px rgba(255,238,182,.45),0 8px 20px rgba(0,0,0,.28) !important;
}
#panels .top-panel-large-preview-wrap #closedTopVisual.style-black-panel{
  background:#030303 !important;
  border:3px solid rgba(240,207,130,.70) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.32) !important;
}
#panels .top-panel-large-preview-wrap #closedTopVisual.style-picture-frame{
  background:linear-gradient(135deg,#5d2518,#160807 55%,#6a2e1f) !important;
  border:5px solid rgba(230,188,104,.80) !important;
  box-shadow:inset 0 0 0 8px rgba(0,0,0,.46),0 8px 20px rgba(0,0,0,.32) !important;
}
#panels .top-panel-large-preview-wrap #closedTopVisual.style-picture-frame #closedTopPhotoStage{
  display:block !important;
}
#panels .top-panel-large-preview-wrap #closedTopVisual.style-nameplate{
  background:linear-gradient(135deg,#e6c56d,#9e7331 56%,#f2dc91) !important;
  border:3px solid rgba(89,55,20,.86) !important;
  box-shadow:inset 0 0 0 2px rgba(255,245,185,.38),0 8px 20px rgba(0,0,0,.32) !important;
}
#panels .top-panel-large-preview-wrap #closedTopInput.closed-style-wood-engraving{
  color:#3c180b !important;
  text-shadow:0 1px 1px rgba(255,226,170,.25) !important;
}
#panels .top-panel-large-preview-wrap #closedTopInput.closed-style-nameplate{
  color:#241304 !important;
  text-shadow:0 1px 1px rgba(255,244,180,.45) !important;
  padding-top:18% !important;
}
#panels .top-panel-large-preview-wrap #closedTopInput.closed-style-picture-frame{
  padding-left:44% !important;
  padding-top:16% !important;
  font-size:clamp(.85rem,1.65vw,1.2rem) !important;
}
#panels .top-panel-large-preview-wrap.top-panel-active{
  box-shadow:0 0 0 2px rgba(240,207,130,.66),0 0 22px rgba(240,207,130,.26) !important;
}


/* Benny 44: top panel bubbles are a temporary menu.
   Click the large top panel to show them; choose one and the rest disappears. */
#panel-text-preview[data-active-panel="top"] .top-panel-large-preview-wrap:not(.options-open) .top-panel-floating-options{
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(-8px) !important;
}
#panels .top-panel-large-preview-wrap.options-open .top-panel-floating-options{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}
#panels .top-panel-floating-options{
  max-width:620px !important;
  padding:8px !important;
  border-radius:999px !important;
}
#panels .top-panel-floating-options button{
  padding:7px 11px !important;
}
#panels .top-panel-open-options{
  opacity:.72 !important;
}
#panels .top-panel-open-options:hover,
#panels .top-panel-open-options:focus{
  opacity:1 !important;
}


/* Benny 45: lift top-panel bubble menu above the large preview, add close control, remove lower style oval. */
#panels .top-panel-large-preview-wrap{
  overflow:visible !important;
  margin-top:56px !important;
}
#panels .top-panel-large-preview-wrap img#closedWoodImage{
  position:relative !important;
  z-index:1 !important;
}
#panels .top-panel-floating-options{
  top:-52px !important;
  z-index:20 !important;
  max-width:720px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
}
#panels .top-panel-large-preview-wrap.options-open .top-panel-floating-options{
  transform:translateX(-50%) translateY(0) !important;
}
#panels .top-panel-floating-options .top-panel-menu-close{
  background:rgba(0,0,0,.92) !important;
  color:#f7e3a1 !important;
  border:1px solid rgba(247,227,161,.72) !important;
  padding:7px 10px !important;
  min-width:72px !important;
}
#panels .top-panel-floating-options .top-panel-menu-close:hover,
#panels .top-panel-floating-options .top-panel-menu-close:focus{
  background:#2a1708 !important;
  color:#fff6cf !important;
}
#panels .top-panel-large-preview-wrap #closedTopStyleLabel{
  display:none !important;
}
#panels .top-panel-open-options{
  top:8px !important;
  right:8px !important;
}


/* V11: tray only. Pull the back edge down to expose hinges; nudge the right/back corner right slightly; keep text/edit controls intact. */
#panels #trayDirectEditor{
  left:11.65% !important;
  top:28.05% !important;
  width:51.25% !important;
  height:12.85% !important;
  clip-path:polygon(10.1% 0%,95.6% 0%,99.4% 100%,0.2% 100%) !important;
  -webkit-clip-path:polygon(10.1% 0%,95.6% 0%,99.4% 100%,0.2% 100%) !important;
}
#panels #trayDirectEditor.tray-active{
  border:1.4px solid rgba(255,248,230,.92) !important;
  box-shadow:0 0 0 1px rgba(240,207,130,.28),0 0 12px rgba(240,207,130,.28) !important;
}