/* Baskibu Designer 0.23.0-dev53 — stable inline product options + precision ruler final */

/* --------------------------------------------------------------------------
   1. ONE ruler system only. The old rotating cm text ruler is permanently gone.
   -------------------------------------------------------------------------- */
.bbd-app #bbd-ruler-h,
.bbd-app #bbd-ruler-v,
.bbd-app .bbd-dimension-overlay,
.bbd-app [data-bbd-dimension-overlay] {
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-rulers,
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-rulers {
  z-index:16 !important;
  opacity:.92;
  filter:none !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler-unit {
  left:calc(var(--bbd-ruler-left) - 27px) !important;
  top:calc(var(--bbd-ruler-top) - 27px) !important;
  width:22px !important;
  height:22px !important;
  border:1px solid rgba(148,163,184,.25) !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.88) !important;
  color:#667085 !important;
  font-size:7.5px !important;
  font-weight:850 !important;
  letter-spacing:.02em !important;
  box-shadow:0 3px 12px rgba(15,23,42,.045) !important;
  backdrop-filter:blur(10px) !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler {
  color:#667085 !important;
  font-size:8px !important;
  font-weight:720 !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-horizontal {
  top:calc(var(--bbd-ruler-top) - 22px) !important;
  height:17px !important;
  border-bottom:1px solid rgba(100,116,139,.20) !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-vertical {
  left:calc(var(--bbd-ruler-left) - 22px) !important;
  width:17px !important;
  border-right:1px solid rgba(100,116,139,.20) !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler i {
  background:rgba(100,116,139,.30) !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-horizontal i.is-minor { height:3px !important; }
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-horizontal i.is-major { height:7px !important; }
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-vertical i.is-minor { width:3px !important; }
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-vertical i.is-major { width:7px !important; }
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-horizontal i span {
  bottom:8px !important;
  color:#667085 !important;
  font-size:7.5px !important;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-vertical i span {
  right:8px !important;
  color:#667085 !important;
  font-size:7.5px !important;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}

/* Keep the canvas breathing room symmetrical; ruler is now attached to artboard, not page edge. */
.bbd-app.bbd-pro-workspace-v0230-dev53:not(.is-preview-mode) .bbd-canvas-shell {
  padding-inline:30px !important;
  box-sizing:border-box !important;
}

/* --------------------------------------------------------------------------
   2. Stable inline product configurator — no leaving the editor, no page collapse.
   -------------------------------------------------------------------------- */
.bbd-app.bbd-pro-workspace-v0230-dev53 [data-v51-inline-config] {
  display:none !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options {
  margin:10px 0 2px;
  padding:12px;
  border:1px solid #dfe6ed;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%,#fafcfd 100%);
  box-shadow:0 9px 26px rgba(15,23,42,.045);
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options[hidden] { display:none !important; }
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid #edf1f5;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__head strong {
  display:block;
  color:#172033;
  font-size:12px;
  font-weight:850;
  line-height:1.2;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__head small {
  display:block;
  margin-top:3px;
  color:#8a96a8;
  font-size:9px;
  font-weight:650;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__close {
  width:30px;
  min-width:30px;
  height:30px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  background:#f4f6f8;
  color:#657184;
  font-size:17px;
  line-height:1;
  cursor:pointer;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__close:hover { background:#eef1f5; color:#111827; }
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__body {
  display:grid;
  gap:11px;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group + .bbd-v53-option-group {
  padding-top:10px;
  border-top:1px solid #edf1f5;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group > strong {
  display:block;
  margin:0 0 7px;
  color:#667085;
  font-size:8.5px;
  font-weight:900;
  line-height:1;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group > div {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button {
  min-height:34px;
  padding:0 11px;
  border:1px solid #dce3ea;
  border-radius:10px;
  background:#fff;
  color:#435066;
  font-size:10.5px;
  font-weight:780;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease,transform .12s ease;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button:hover:not(:disabled) {
  border-color:#b8c5d2;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(15,23,42,.045);
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button.is-selected {
  border-color:#43bea8;
  background:#ecfcf7;
  color:#08745f;
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.06);
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button.is-pending {
  opacity:.58;
  pointer-events:none;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button:disabled {
  opacity:.42;
  cursor:not-allowed;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__empty {
  display:grid;
  gap:4px;
  padding:10px;
  border-radius:10px;
  background:#f7f9fb;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__empty strong { color:#344054; font-size:10px; }
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__empty span { color:#8b96a7; font-size:9px; line-height:1.4; }

/* Commerce card should feel like one app surface, not nested boxes. */
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-commerce-summary {
  border-color:#dce4eb !important;
  box-shadow:0 10px 30px rgba(15,23,42,.04) !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-commerce-summary__actions .is-secondary {
  position:relative;
  z-index:2;
}

/* --------------------------------------------------------------------------
   3. Compact top HUD. Precision controls stay useful without owning the canvas.
   -------------------------------------------------------------------------- */
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-stage-meta.bbd-canvas-hud--top {
  top:10px !important;
  left:18px !important;
  right:auto !important;
  width:auto !important;
  max-width:min(460px,calc(100% - 36px)) !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-stage-meta > *,
.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-stage-meta .bbd-hud-chip {
  max-width:none !important;
  min-height:30px !important;
  padding:5px 9px !important;
  border-color:rgba(148,163,184,.24) !important;
  background:rgba(255,255,255,.90) !important;
  box-shadow:0 5px 16px rgba(15,23,42,.04) !important;
  backdrop-filter:blur(12px) !important;
}

@media (max-width:760px) {
  .bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-rulers,
  .bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-rulers {
    display:none !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev53:not(.is-preview-mode) .bbd-canvas-shell {
    padding-inline:8px !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-stage-meta.bbd-canvas-hud--top {
    left:8px !important;
    top:8px !important;
    max-width:calc(100% - 16px) !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button {
    min-height:38px;
    padding-inline:12px;
    font-size:11px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button { transition:none !important; }
}