/* Let us position children inside the header */
.ui-header { position: relative; }

/* Target your barcode image (moved into header by JS) */
.ui-header .wo-barcode,
.ui-header img[src*="O4W_MOBILE_GET_BARCODE"] {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;        /* tune as needed */
  max-width: 45%;
  object-fit: contain;
}

/* Keep centered title from overlapping the barcode */
.ui-header .ui-title { margin-right: 200px; }  /* adjust to your barcode width */

@media (max-width: 480px) {
  .ui-header .wo-barcode { height: 22px; }
  .ui-header .ui-title { margin-right: 140px; }
}

#M06_BARCODE_PLACEHOLDER {
    display: flex;
    align-items: center;   /* Vertical center */
    height: 100%;          /* Make it fill the parent height */
}